본문 바로가기

ECMAScript 6

(15)
디스트럭처링 디스트럭처링디스트럭처링은 구조화된 배열 또는 객체를 destructuring (비구조화, 파괴) 하여 개별적인 변수에 할당하는 것이다.배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.그럼 바로 디스트럭처링에 대해서 살펴보자.#1 배열 디스트럭처링ES5에서 배열의 각 요소를 배열로부터 디스트럭처링 하여 변수에 할당하기 위한 방법은 아래와 같다. // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 ES6에서의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다.이때 추출/할당..
객체 리터럴 프로퍼티 기능 확장 객체 리터럴 프로퍼티 기능 확장객체 리터럴 프로퍼티 기능 확장에 대해서 알아보도록 하자.#1 프로퍼티 축약 표현 ES5에서 객체 리터럴의 프로퍼티는 프로퍼티 이름과 프로퍼티 값으로 구성된다.프로퍼티의 값은 변수에 할당된 값일 수도 있다. // ES5 var x = 1, y = 2; var obj = { x: x, y: y }; console.log(obj); // { x: 1, y: 2 } ES6에서는 프로퍼티 값으로 변수를 사용하는 경우에는 프로퍼티 이름을 '생략'할 수 있다.이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. // ES6 let x = 1, y = 2; const obj = { x, y }; console.log(obj); // { x: 1, y: 2 }#2 프로퍼티 이름 조합ES5..
Spread 연산자 Spread 연산자Spread 연산자 ...는 연산자의 대상 배열 또는 이터러블을 개별 요소로 분리해주는 역할을 하는 연산자이다.// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다. ( -> 1, 2, 3 ) console.log(...[1, 2, 3]); // 문지열은 이터러블이다. console.log(...'Hello'); // H e l l o // Map과 Set은 이터러블이다. console.log(...new Map([['a', '1'], ['b', '2']])); // ['a', '1'], ['b', '2'] console.log(...new Set([1, 2, 3])); // 1 2 3다음은 이 Spread 연산자를 사용하는 경우에 대해서 살펴보도록 하겠다.#1 함수의..
Rest 파라미터 Rest 파라미터#1 기본 문법Rest 파라미터는 Spread 연산자 (...)를 사용하며 파라미터를 정의한 것이다.Rest 파라미터를 사용하면 인수 리스트를 함수 내부에서 '배열'로 전달받을 수 있다.function boo(...rest) { console.log(Array.isArray(rest)); console.log(rest); // [1, 2, 3, 4, 5] } boo(1, 2, 3, 4, 5);인수는 순차적으로 파라미터와 Rest 파라미터에 할당한다.function boo(param, ...rest) { console.log(param); // 1 console.log(rest); // [2, 3, 4, 5] } boo(1, 2, 3, 4, 5);function goo(param1, par..
화살표 함수 (=>) 화살표 함수#1 화살표 함수 문법 (선언) 함수는 기본적으로 function 키워드를 이용해 작성하지만 화살표 함수는 function 키워드 대신 '=>'를 이용해 간단하게 함수를 선언할 수 있다. 그럼 기본 문법을 알아보자. [ 매개변수 지정 ] () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 가능 (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 불가능 [ 함수 몸체 지정 ] x => { return x * x } // 한 줄 블록 x => x * x /* 함수 전체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 변환됨. 위 표현과 동일 */ () => { return { a: 1 }; }..
ES6 템플릿 리터럴 템플릿 리터럴#1 템플릿 리터럴 사용법, '와 "의 혼용 ES6 는 템플릿 리터럴 이라고 불리는 새로운 문자열 표기법을 도입하였다.템플릿 리터럴은 일반 문자열과는 달리 ' 또는 " 같은 따옴표 대신 백틱 문자 ` 를 사용한다.const tempalte = `템플릿 리터럴은 '작은따옴표'와 "큰따옴표"를 혼용할 수 있다.`; console.log(template);또한 ES6 템플릿 리터럴은 여러 줄에 걸쳐 작성할 수 있으며, 템플릿 리터럴 내에 있는 모든 화이트스페이스는 있는 그대로 적용된다. const template = ` Home News Contact About `; console.log(template);#2 문자열 삽입템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을..
let, const 그리고 블록 레벨 스코프 let, const 그리고 블록 레벨 스코프 #1 ES5의 var, ES6의 let, const ES5에서 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 것이었는데, 이 var 키워드로 선언된 변수는 아래와 같은 특징이 있다.이는 주의를 기울이지 않으면 심각한 문제를 일으킨다.1. 함수 레벨 스코프 : 전역 변수의 남발. for 루프의 초기화 식에서 사용한 변수를 for 루프 외부 또는 전역에서 참조 가능2. var 키워드 생략 허용 : 의도하지 않은 변수의 전역화3. 중복 선언 허용 : 의도하지 않은 변숫값 변경4. 변수 호이스팅 : 변수를 선언하기 전에 참조 가능 대부분의 문제는 전역 변수로 인해 발생하는데, 전역 변수는 사용이 편리하다는 장점이 있지만 불가피한 상황을 제외하고는 사용을 자제..