1. Destructuring, Array 분할 할당
Destructuring
•
Destructuring Assignment
•
작성 형태
let one, two, three;
const list = [1, 2, 3];
[one, two, three] = list;
console.log(one); //1
console.log(two); //2
console.log(three); //3
console.log(list);// //[1,2,3]
JavaScript
복사
•
사전적 의미로는 구조를 파괴한다는 의미가 있는데, 코드를 보면 원 데이터가 파괴된다기보다는 구조분해후 특정요소 pick을 한다는게 더 맞는 의미입니다. 즉, 파괴보다는 분할/분리에 더 가깝다고 볼 수 있고, "분할 할당"이라고 할 수 있습니다.
Array분할 할당
•
배열의 엘리먼트를 분할하여 할당할 수 있습니다.
1.
인덱스에 해당하는 변수에 할당
⇒ 왼쪽의 인덱스에 해당하는 오른쪽 배열의 값을 할당합니다.
one에 1, two에 2, three에 3이 할당됩니다.
let one, two, three;
[one, two, three] = [1, 2, 3];
console.log(one);
console.log(two);
console.log(three);
JavaScript
복사
2. 할당받을 변수 수가 적은 경우
⇒ 왼쪽에 할당받을 변수가 분할 할당할 값보다 적은 경우 왼쪽 인덱스에 맞추어 값을 할당합니다. 그렇기에 3은 할당되지 않습니다.
let one, two;
[one, two] = [1, 2, 3];
console.log(one);
console.log(two);
JavaScript
복사
3. 할당받을 변수 수가 많은 경우
⇒ 왼쪽의 할당받을 변수가 3개이고 분할 할당할 값이 2개라면 왼쪽에 값을 할당할 수 없는 변수에는 undefined가 설정됩니다.
let one, two, three;
[one, two, three] = [1, 2];
console.log(two);//2
console.log(three);//undefined
JavaScript
복사
4. 배열 차원에 맞추어 분할 할당을 합니다.
⇒[three, four]와 [3,4]가 배열이고 배열 차원도 변환됩니다.
let one, two, three, four;
[one, two, [three, four]] = [1,2,[3,4]];
console.log([one, two, three, four]);//[1,2,3,4]
JavaScript
복사
5. 매치되는 인덱스에 변수가 없으면 값을 할당하지 않습니다.
⇒ [one, , , four] 형태에서 콤마로 구분하고 변수를 작성하지 않을 경우 인덱스를 건너 띄어 할당합니다.
let one, two, three, four;
[one, , , four] = [1,2,3,4];
console.log([one, two, three, four]);
//[1, undefined, undefined, 4]
JavaScript
복사
•
spread와 같이 사용할 수 있습니다.
1.
나머지를 전부 할당
let one, rest;
[one, ...rest] = [1,2,3,4];
console.log(one); //1
console.log(rest);//[2,3,4]
JavaScript
복사
2. 인덱스를 반영한 나머지 할당
let one,three, rest;
[one, ,three ...rest] = [1,2,3,4, 5];
console.log(three); //3
console.log(rest);//[4, 5]
JavaScript
복사
2.Object 분할 할당, 파라미터 분할 할당
Object 분할 할당
•
Object의 프로퍼티를 분할하여 할당합니다.
•
프로퍼티 이름이 같은 프로퍼티에 값을 할당합니다.
const {one, two} = {one: 10, two: 20};
console.log(one);//10
console.log(two);//20
JavaScript
복사
•
프로퍼티 이름을 별도로 작성
⇒ 이처럼 프로퍼티 명을 위에 별도로 작성을 한 경우에 분할 할당을 하기위해서는 소괄호안에 작성을해 평가해야합니다.
let one, two
({one, two} = {one: 10, two: 20});
console.log(one);//10
console.log(two);//20
JavaScript
복사
•
프로퍼티 값 위치에 변수 이름 작성
⇒ 이름을 별도로 선언했기에 소괄호안에 작성합니다.
one의 프로퍼티 값 5를 five에 할당하고, six도 마찮가지로 two의 프로퍼티 값인 6을 할당합니다.
이때 one을 출력하려하면 ReferenceError가 발생합니다.
let five, six;
({one: five, two: six} = {one: 5, two: 6});
console.log(five);//5
console.log(six);//6
//console.log(one); //ReferenceError
JavaScript
복사
•
Object구조에 맞춰 값 할당
⇒왼쪽의 할당받는 변수에서 plus: {two, three}에서 plus는 구조(경로)를 만들기 위해 존재하며 구조가 다르면 실행할 때 에러가 발생하기에 작성합니다. 그렇기에 plus는 실제로 존재하지 않습니다.
const {one, plus: {two, three}}
= {one: 10, plus:{two:20, three:30}};
console.log(one);
console.log(two);
console.log(three);
JavaScript
복사
•
나머지를 Object로 할당
const {one, rest} = {one: 10, two: 20, three:30};
console.log(rest);//{two: 20, three:30}
JavaScript
복사
파라미터 분할 할당
•
호출하는 함수에서 Object형태로 넘겨준 파라미터 값을 호출받는 함수의 파라미터에 맞추어 할당합니다.
⇒ 호출하는 함수에서 넘겨준 one과 two가 담긴 오브젝트를 호출받는 함수의 프로퍼티 이름에 맞춰 분할 할당합니다.
function add({one, two}){
console.log(one + two);
}
add({one: 10, two: 20});//30
JavaScript
복사
•
Object구조에 맞춰 값을 할당합니다.
function add({one, plus:{two}}){
console.log(one + two);
}
add({one: 10, plus:{two: 20}});//30
JavaScript
복사
3. Object 오퍼레이션, 프로퍼티 이름 조합
Object 오퍼레이션
•
같은 프로퍼티 이름 사용
⇒ {book: 10, book: 20}에서 프로퍼티이름( book)이 같습니다.
ES5 strict 모드에서 프로퍼티 이름이 같으면 에러가 발생합니다.
ES6에서는 strict 모드에 관계 없이 에러가 발생하지 않고 뒤에 작성한 프로퍼티 값으로 대체됩니다.
const value = {book: 10, book: 20};
console.log(value);//20
JavaScript
복사
•
Shorthand property names
⇒one과 two변수에 값을 작성 후 {one, two} 형태로 value에 할당합니다. 그렇게 되면 one, two는 프로퍼티 이름이되고 10, 20이 프로퍼티 값으로 할당이 됩니다.
이것(Shorthand property names)은 MDN에 작성된 것으로 스펙에 정의된 것은 아닙니다.
const one = 10, two = 20;
const values = {one, two};
console.log(values);//{one: 10, two: 20}
JavaScript
복사
프로퍼티 이름 조합
•
문자열을 프로퍼티 이름으로 사용
⇒ []안에 문자열로 이름을 작성하면 그 문자열이 프로퍼티 이름이 되는데 우측 코드에서 one + two로 문자열 결합이되어 onetwo가 프로퍼티 이름으로 사용됩니다.
const value = {
["one" + "two"]: 12
};
console.log(value.onetwo);//12
JavaScript
복사
•
변수값을 프로퍼티 이름으로 사용
⇒ 변수값을 프로퍼티 이름으로 사용합니다.
⇒ 변수값을 문자열 결합하여 사용할 수도 있습니다.
⇒ 프로퍼티 이름에 공백도 넣을 수 있습니다.
⇒ 함수로 호출할 수도 있습니다.
const item = "world";
const sports = {
[item]: 100,
[item + " Cup"]: "월드컵",
[item + "Sports"]: function(){
return "스포츠";
}
};
console.log(sports[item]); // 100
console.log(sports[item + " Cup"]); //월드컵
console.log(sports[item + "Sports"]());// 스포츠
JavaScript
복사
•
분할 할당을 조합한 형태
⇒ 변수값을 프로퍼티 이름으로 사용하고 분할 할당하는 형태입니다.
⇒{[item]: title}은 {book: title} 형태가 됩니다.
⇒ {book: title} = {book: "책"}이되어 result는 {book: "책"}이 됩니다
const item = "book";
const result = {[item]: title} = {book: "책"};
console.log(result);
JavaScript
복사
