[ES6] Enhanced object property

객체 확장 표현식 > Enhanced object property

기존 JS에서는 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당해야 했다.

var x = 0; var y = 0; var obj = { x: x, y: y}; var randomKeyString = 'other'; var combined = {}; combined['one' + randomKeyString] = 'some value'; var obj2 = {   methodA: function() { console.log('A'); },   methodB: function() { return 0; }, };	> JavaScript before ES6 obj 변수를 확인하면 0:0 / 1:1이라는 키 쌍이 나온다.   따라서 연산결과를 키 쌍으로 저장하기 위해선 combine 처럼 지정할 코드를 추가로 작성해야 한다. 또한 객체에 함수를 추가할 때는 변수에 함수를 할당 해야한다.
var x = 0; var y = 0; var obj = { x, y }; var randomKeyString = 'other'; var combined = {   ['one' + randomKeyString]: 'some value', }; var obj2 = {   x,   methodA() { console.log('A'); },   methodB() { return 0; }, };	> ES6 객체의 변수를 이전에 선언된 변수를 사용할 때 키 값을 생략하면 자동으로 키의 이름으로 키 값을 지정한다.   객체 생성 블록안에 대괄호를 사용하여 표현식 작성이 가능하다. function 키워드를 생략하여 함수를 선언할 수 있다.

구조 분해 할당 > destructuring assignment

https://ko.javascript.info/destructuring-assignment

분해는 파괴(destructive)를 의미하지 않는다. 복사한 이후에 변수로 '분해' 해준다는 의미로 의미가 명명되었다.

이 과정에서 분해 대상은 수정 또는 파괴가 되지 않는다.

var list = [0,1]; var item1 = list[0]; // A var item2 = list[1]; var item3 = list[2] || -1; // B var temp = item2; //C item2= item1; item1 = temp; var obj = {   key1: 'one',   key2: 'two', }; var key1 = obj.key1; // D var key2 = obj.key2; var key3 = obj.key3 || 'default key3 value'; // E var newKey1 = key1; // F	A> 배열의 인덱스를 이용하여 변수 할당 B> || 연산자를 이용하여 해당 인덱스에 값이 없을 시 기본 값 할당 C> temp값을 이용하여 둘의 값을 서로 바꿈 배열과 마찬가지로 객체 또한 저지랄로 할당한다. D> 객체의 키값을 변수에 할당한다. E> || 연산자를 이용하여 값이 없으면 기본 값을 할당한다. F> 객체 키값을 다른 변수에 할당한다.
var list = [0, 1]; var [   item1, // A   item2,   item3 = -1, // B ] = list; [item2, item1] = [item1, item2]; // C var obj = {   key1: 'one',   key2: 'two', }; var {   key1: newKey1, // E   key2,  // D   key3 = 'default key3 value',  // F } = obj;	A> 대괄호를 이용하여 사이에 추출하고자 하는 값의 인덱스 위치에 변수 배치 B, F> = 를 변수와 함께 사용하여 기본값을 할당할 수 있다. C> 치환도 간편하게! E > : 를 사용하여 새 변수명을 선언했고, 추출된 키 값을 다른 변수명으로 할당 할 수 있음. obj에 있는 변수가 각각 새롭게 분해되어 사용 될 수 있다. console.log(key1) = undefined. console.log(newKey1) = one. console.log(key2) = two. console.log(key3) = default key3 value.

구조 할당은 전개 연산자와 함께 사용될 수 있다. ES6의 구조 분해와 구조 할당은 함수 인자 값을 다루거나 JSON 데이터를 변환할 때

매우 유용하게 사용된다.

var [item1, ...otherItems] = [0, 1, 2]; var { key1, ...others } = { key1: 'one', key2: 'two' }; // otherItems = [1, 2] // others = { key2: 'two' }

나머지 값들은 전개연산자 otherItems에 알아서 들어간다.