Hello Jay's Programming World!

오늘 공부해볼 ES6 JavaScript는 구조 분해 할당입니다. ES6에서 정말 많이 쓰는 문법 중 하나입니다. 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 합니다. 배열 구조 분해 var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two);// "two" console.log(three); // "three" 가장 기본적인 구조 분해 할당입니다. foo 배열은 "one", "two", "three" 세개의 문자열 요소를 가지고 있습니다. 각각의 문자열 요소를 one, two, three라는 이름의 변수에 구조 분해할당하고 있습니..

오늘은 템플릿 리터럴에 대해서 알아보겠습니다. ES6이전에는 템플릿 스트링(Template Strings)라고 불렸습니다. 템플릿 리터럴은 문법적으로 더 편하게 문자열을 생성하는 방법입니다. 템플릿 리터럴은 백틱(``)을 이용합니다. 그리고 $와 중괄호(${expression})을 이용하여 표현식을 표기할 수도 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러시를 삽입하면 됩니다. `\`` === "`" // --> true Multi-line strings 템플릿 리터럴에서 source내에 삽입되는 Newline Characters(\n)은 템플릿 리터럴의 일부가 됩니다. 아래와 같이 편리하게 사용할 수 있습니다. let msg = "Hello world!\nShow me the..

객체 리터럴이란 중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트라고 말할 수 있습니다. 일반적으로 객체를 생성하는 방법을 생각하시면 됩니다. 오늘은 객체 리터럴에 대해 알아보도록 하겠습니다. 먼저 확인할 부분은 ES6이전에도 사용가능했던 부분입니다. 이 부분을 먼저 공부해보겠습니다. 객체 리터럴 var sales = 'Toyota'; function carTypes(name) { if (name === 'Honda') { return name; } else { return "Sorry, we don't sell " + name + "."; } } var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; conso..

JavaScript에는 class가 없었습니다. 그래서 많은 개발자들은 JavaScript에서 객체지향 프로그래밍을 위해 함수를 이용하여 class처럼 동작하게 구현하여 사용했습니다. 프로토타입 체인과 클로저등으로 상속, 캡슐화등을 구현할 수 있기 때문입니다. 이러한 불편함을 알고 있었는지 ES6에서는 드디어 class 문법이 발표되었습니다. 그렇다고 전혀 새로운 것이 생긴 것은 아닙니다. 기존에 있던 프로토타입 기반 객체지향 프로그래밍을 조금 더 보기 좋고 쉽게 만들어준 것이라고 생각하면 될 것 같습니다. 그럼 하나 하나 살펴보도록 하겠습니다. 클래스 정의 클래스는 사실 함수입니다. 함수를 정의하는 방법이 함수 선언과 함수 표현식이 있는 것처럼 클래스도 두 가지 모두 제공하고 있습니다. 먼저 클래스를 ..

일반적으로 ES5에서 함수를 표현할 때는 function 키워드를 사용합니다. ES6에서는 함수를 짧게 표현할 수 있는 방법을 제공합니다. 그것이 바로 화살표 함수입니다. 화살표 함수를 어떻게 표현하는지 알아보겠습니다. // ES5 function let getDouble = function(num) { return num * 2; } // ES6 화살표 함수 let getDouble = (num) => { return num * 2; } getDouble(2);// 4 가장 기본적인 함수 표현입니다. 숫자 num을 입력받아 두 배로 곱한 값을 반환해주는 함수 입니다. 기존 function에서 화살표 함수로 바꾸려면 function 키워드를 제거하고 소괄호와 중괄호 사이에 => 키워드를 사용하면 화살표 ..

함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 Memoization(메이모제이션) 패턴이라고 한다. var func = function(param) { if (!func.cache[param]) { console.log(param + ' is not cached!'); func.cache[param] = Math.pow(2, param); } else { console.log(param + ' is cached!'); } return func.cache[param]; } func.cache = {}; func(2); // 2 is not cached! func(4); // 4 is not cached! func(2); // 2 i..

Array의 find 메서드에 대해 알아보겠습니다. 메서드의 이름처럼 특성 요소를 찾을때 사용합니다. 기본 구조는 아래와 같습니다. Array.find(callback[, thisArg]) callback 함수와 callback의 this로 사용할 객체를 받습니다. thisArg는 생략 가능합니다. callback 함수는 아래와 같은 매개변수를 받습니다. - element: callback 함수에서 처리할 현재 요소. - index: callback 함수에서 처리할 현재 요소의 인덱스. - array: find 메서드를 호출한 배열 find 함수는 간단합니다. 배열의 모든 요소를 순회하며 callback 함수를 호출합니다. 만약 callback 함수가 true를 반환하게 되면 순회를 멈추고 true를 반..

기본 구조는 아래와 같습니다. Array.reduce(callback[, initialValue]) callback 함수와 initailValue 매개변수를 받습니다. initialValue는 생략가능하며, 생략한다면 배열의 첫번째 값으로 초기화 됩니다. 이러한 규칙으로 인하여 initialValue를 제공하지 않는다면 첫번째 배열 값을 건너뛰어 실행되고, initialValue를 제공하면 첫번째 배열 값도 포함하여 실행됩니다. 아래는 실제로 테스트해본 결과입니다. callback함수는 네 개의 매개변수를 갖습니다. accumulator: reduce 매서드의 핵심입니다. 번역하면 누산기 정도로 말할 수 있습니다. 콜백의 반환값을 누적합니다. current value: 처리할 현재 요소의 값입니다. cu..

오늘은 이벤트 생성하여 트리거 하는 방법에 대해 알아보도록 하겠습니다. 일반적으로 이벤트는 브라우저가 알아서 처리를 해주는 구조입니다. 예를 들어, 개발자가 Div에 Click 이벤트를 추가했다면, 브라우저가 해당 Div가 Click 된 것을 감지하여 Click 이벤트 핸들러를 호출해주는 구조입니다. 그렇다면, 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요? 그 방법에 대해 알아보겠습니다. 제가 JSFiddle을 이용해 샘플을 만들어보았습니다. Div와 Button이 하나씩 있습니다. Div에는 Click 이벤트를 등록해 놓았고, Div가 Click되면 'Clicked Div!'라는 메세지를 포함한 Alert창이 출력됩니다. Button에는 onclick으로 o..

Event.composedPath는 이벤트의 Path를 반환해줍니다. 그래서 이벤트가 어떤 흐름으로 도달했는지 알 수 있습니다. caniuse.com에서 검색해보면 알 수 있지만, Event.composedPath() API는 IE에서 사용할 수 없습니다. https://caniuse.com/#search=composedPath Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is..