ECMAScript 2015
by jbee
[ES6] 5. Destructuring and Default
Parameter
Destructuring
 shorthand 방식을이용하여함수의반환값을바로객체에할당할수있다.
이때함수에서반환되는프로퍼티값과 지역변수의이름이같아야가능하다.
이렇게 하면함수의반환값을임시객체에저장하고 그 객체의프로퍼티를통
해접근하여지역변수에할당하는과정을축소할수있다. 굳이전체를객체에
할당하지않고 부분적으로만할당도가능하다. 즉, 리턴되는값이객체일경우,
그 객체를분해하여바로지역변수로접근이가능하다는것이다. (iterable
protocol을구현해야만destructuring이가능하다.)
function buildUser(first, last){
let fullName = first + " " + last;
return {first, last, fullName};
}
let { first, last, fullName } = buildUser("Sam", "Williams"
console.log(first); // Sam
console.log(last); // Williams
console.log(fullName); // Sam Williams
굳이전체를객체에할당하지않고 부분적으로만할당도가능하다.
let { fullName } = buildUser("Sam", "Williams");
console.log( fullName ); // Sam Williams
Method Initializer Shorthand
객체에함수를추가할때, 객체의프로퍼티에익명함수를추가하는방식을사
용했다. ES6에서는메소드를활용한다. 비교를위해ES5도함께제시한다.
ES5code>>
function buildUser(first, last, postCount){
return {
first: first,
last: last,
isActive: function( ) {
//...
}
}
}
ES6code>>
function buildUser(first, last, postCount){
return {
first,
last,
isActive( ) {
//...
}
}
}
Destructuring Assignment
오른쪽의배열을분할하여왼쪽변수에값을 할당 한다. 인덱스번째의엘리먼
트값을인덱스번째의변수에할당하는것이다. 엘리먼트가 아직남았는데할
당할변수가 없다면그대로할당되지않고, 엘리먼트가 남지않았는데할당한
변수가 있다면그 변수는 undefined 로할당된다.
let one, two, three, four;
//case1
[one, two] = [1, 2];
console.log(one); //1
console.log(two); //2
//case2
[one, two, three] = [1, 2];
console.log(one); //1
console.log(two); //2
console.log(three);//undefined
//case3
[one, two] = [1, 2, 3];
console.log(one); two//1
console.log(two); //2
이전Chapter에서다뤘던 Spread 연산자를사용할수있으며, 공백으로두
어해당값을건너뛰고  할당 할수있다.
[one, ...other] = [1, 23, 24, 25];
console.log(one); //1
console.log(other); //[23, 24, 25]
[one, , , four] = [1, 2, 3, 4];
console.log(one); //1
console.log(four); //4
Default Value
 destructuring 을통해값을할당할때, 해당하는값이없을때,
 undefined 대신할당할default value를지정해줄수있다.
let [first, second, third = 3] = [1, 2];
console.log(first); //1 by destructuring
console.log(second); //2 by destructuring
console.log(third); //3 by default value
물론해당하는값이존재할때는default value는무시된다.
let [fourth, fifth, sixth = 6] = [4, 5, 66];
console.log(first); //4 by destructuring
console.log(second); //5 by destructuring
console.log(third); //66 by destructuring
Default Parameter
parameter에값이넘어가지않아도, default value로설정된값이해당파라
미터대신값이할당된다. parameter에서도마찬가지로기존의default
value는 undefined 값이었지만, 그 값을코드상에서설정할수있게 된것
이다.
let somethingFunction = (prev, post = 20) => prev + post;
console.log(somethingFunction(1)); //21 by default parameter
console.log(somethingFunction(1, 2)); //3
console.log(somethingFunction(1, undefined)); //21 by default p
console.log(somethingFunction(1, null)); //1
length property of Function
함수에도 length 라는 property 가 따로존재한다. 그런데이때,
 default parameter 는 length 에서무시된다.
getTotal(100); //1
getTotal(100, 0.05); //2
console.log(getTotal.length); //1
한가지주의할점이있다.  let 으로선언했을때의값은Default parameter
와는다르기 때문에,  Destructuring 으로값을덮어쓸수있다.  let 으로
선언했을때할당하는것과는다르다.
default parameter code>>
let salary = [100, 200, 300];
let [low, avg, high = 500] = salary;
console.log(high); //500
high 값으로 300 을넘겨주었고 그 값을다시 500 으로변경한다.
let assignment code>>
let salary = [100, 200, 300];
let low, avg, high = 500;
[low, avg, high] = salary;
console.log(high); //300
원래 500 이었는데salary의 300 이그 값을대체한다.
5. end

[ES6] 5. Destructuring