let
ES6에서 let 키워드는 블록레벨 스코프 변수를 선언하는데 사용된다. 자바스크립트에서 기존의 var키워드는 함수레벨 스코프였고, 이는 메모리 문제와 가독성, 디버깅의 어려움등의 이슈가 있었고 이에 대한 해결책으로 내놓은 키워드이다.
함수레벨 스코프
앞서 얘기했듯, var키워드로 변수를 선언하는 것은 함수레벨 스코프이다. 함수레벨 스코프는 함수 밖에서 선언 되었을 경우 전역에서 접근이 가능하다. 하지만, 함수 내부에서 선언되었을 경우 전역에서 접근이 불가능하다. 또한, if블록 내부에서 선언된 변수 역시 함수레벨스코프이기 때문에, if 내부에서 선언한 코드 역시 전역에서 접근할 수 있다.
이렇기 때문에, ES6에서는 블록 레벨 스코프를 가지는 변수를 선언하는 let 키워드를 제시했다.
블록레벨 스코프
let 키워드로 선언된 변수는 블록레벨 스코프 변수이다. 말 그대로, 블록 내부에서 선언된 경우 전역에서 접근이 불가능하며 오직 블록 내부에서만 접근이 가능하다.
재선언
var 키워드로 변수를 재 선언하게되면, 재 선언된 변수가 기존의 변수를 대체한다. 하지만 let 키워드는 같은 스코프 내에서 재선언을 하게 되면 에러가 발생한다.
var과 let 어떤걸 써야 하는가
ES6 코드를 작성할 때에는, var대신 let으로 통일하는 것을 권장한다. 이는 스코핑 실수나 버그를 예방하고, 코드의 가독성을 올려준다. 하지만, var을 절대로 쓰면 안되는 것은 아니다.
const
ES6에서 const 키워드는 오직 읽기 전용 변수에만 사용한다. 즉, 값을 재할당 할 수 없다. 메모리의 주소를 변경할 수 없다.
const의 스코프
let의 스코핑 방식과 일치한다. 블록레벨 스코프를 가진다.
Default parameter
자바스크립트에서는 함수호출시 전달되지 않은 인수에 대해서는 undefined를 할당한다. 혹은, 삼항연산자를 이용하여 디폴트 값을 정한다.
function myFunction(x, y, z)
{
x = x === undefined ? 1 : x;
y = y === undefined ? 2 : y;
z = z === undefined ? 3 : z;
console.log(x, y, z); //Output "6 7 3"
}
myFunction(6, 7);ES6는 새로운 구문을 이용하여 디폴트 파라미터 값을 정할 수 있게 해준다.
function myFunction(x = 1, y = 2, z = 3)
{
console.log(x, y, z); // Output "6 7 3"
}
myFunction(6,7);spread operator
spread operator 은 ... 를 사용한다. spread operator은 iterable 한 객체를 individual한 값으로 나누어 준다. 주로 iterable한 객체를 분리하여 함수의 인자로 넘길 때 사용한다.
function myFunction(a, b)
{
return a + b;
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5"
// let result = myFunction(1,4);
// 와 똑같다.또한, 코드에서 요소에 대해서도 사용 할 수 있다. 다음 예시를 보자.
let array1 = [2,3,4];
let array2 = [1, ...array1, 5, 6, 7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7"rest parameter
rest parameter 도 ... 를 사용한다. rest parameter란, 말그대로 나머지 파라미터를 뜻한다.
function myFunction(a, b, ...args)
{
console.log(args); //Output "3, 4, 5"
}
myFunction(1, 2, 3, 4, 5);destructuring assignment ( 구조 분해 할당 )
구조 분해 할당이란, iterable 또는 객체의 값이나 프로퍼티를 변수에 할당 시키는 표현식이다.
배열 구조분해할당
let myArray = [1, 2, 3];
let a, b, c;
[a, b, c] = myArray; //array destructuring assignment syntax
// another way
let [a, b, c] = [1, 2, 3];
// default value
let [a, b, c = 3] = [1, 2];
console.log(c); //Output "3"
// nested array
let [a, b, [c, d]] = [1, 2, [3, 4]];배열에서는 위와 같은 방식으로 사용할 수 있다.
rest parameter를 이용한 구조분해할당
나머지 매개변수를 통해서 구조분해할당을 할 수 있다.
let [a, ...b] = [1, 2, 3, 4, 5, 6];
console.log(a);// 1
console.log(Array.isArray(b));// true
console.log(b); // 2,3,4,5,6파라미터로서의 구조분해할당
구조분해할당을 이용하여 파라미터로 넘겨줄 수 있다. 또한, default value 또한 정할 수 있다.
function myFunction([a, b, c = 3])
{
console.log(a, b, c); //Output "1 2 3"
}
myFunction([1, 2]);
// default value for destructuring assignment
function myFunction([a, b, c = 3] = [1, 2, 3])
{
console.log(a, b, c); //Output "1 2 3"
}
myFunction(undefined);객체 구조분해할당
개념은 같다. 프로퍼티 값을 추출하여 변수에 할당하기 위해 쓴다. 다음과 같이 쓰인다.
// 기존의 코드
var object = {"name" : "John", "age" : 23};
var name = object.name;
var age = object.age;
// ES6 객체 구조분해할당
let object = {"name" : "John", "age" : 23};
let name, age;
({name, age} = object); //object destructuring assignment syntax
// nested object
let {name, otherInfo: {age}} = {name: "Eden", otherInfo: {age:
23}};
console.log(name, age); //Eden 23