[JS] 구조 분해 할당을 알아보자2

Array 분할 할당

배열의 엘리먼트를 분할해 할당한다.

 

1) 인덱스 기준으로 할당

let one, two, three;
[one, two, three] = [1, 2, 3]

console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

 

2) 할당 받을 변수 수가 적을 경우

let one, two;
[one, two] = [1, 2, 3]

console.log(one) // 1
console.log(two) // 2

 

3) 할당 받을 변수 수가 많을 경우

let one, two, three, four;
[one, two, three, four] = [1, 2, 3];

console.log(three) // 3
console.log(four) // undefined

 

4) 배열 차원에 맞춰 분할 할당

let one, two, three, four;
[one, two, [three, four]] = [1, 2, [3, 4]];

console.log([one, two, three, four])
// [1, 2, 3, 4]

 

5) 인덱스에 변수가 없을 때

let let one, two, three, four;
[one, , , four] = [1, 2, 3, 4]

console.log([one, two, three, four]);
// [1, undefined, undefined, 4]

 

6) 나머지를 전부 할당

구조 분해 할당에서 '...'은 나머지 연산자(rest operator)로 사용된다.

배열에서 이 연산자는 일부 요소를 추출하고 난 나머지 요소를 새로운 배열로 할당한다.

one이 추출된 후 나머지 요소 2, 3, 4가 새로운 배열로 할당되어 rest = [2, 3, 4] 형태를 띈다.

let one, rest;
[one, ...rest] = [1, 2, 3, 4]

console.log(one) // 1
console.log(rest) // [2, 3, 4]

 

7) 인덱스를 반영한 나머지 할당

6번과 동일하게 three에 3이 할당된 후 나머지 4, 5를 새로운 배열로 만들어 rest에 할당했다.

let one, three, rest;
[one, , three, ...rest] = [1, 2, 3, 4, 5]

console.log(three) // 3
console.log(rest) // [4, 5]

---

Object 분할 할당

1) 프로퍼티 값할당

(왼쪽은 키값:밸류값 쌍이 아니기 때문에 객체는 아니다.)

오른쪽의 객체에서 one, two라는 키를 찾아 해당하는 값들을 변수로 할당한다.

왼쪽과 오른쪽은 지금 키값이 같고, 그 같은 키값에 밸류값을 할당한 것이다.

const {one, two} = {one: 10, two: 20};

console.log(one) // 10
console.log(two) // 20

 

2) 프로퍼티 키값을 별도로 작성

프로퍼티 키값을 변수로 먼저 선언했다면 소괄호()를 써준다.

 

쓰지 않는다면 {one, two} = {one: 10, two: 20} 이렇게 된다.

왼쪽은 구조 분해 할당 시 사용할 변수들이고, 오른쪽은 키값-밸류값 2쌍이 있는 객체다.

둘은 같지 않기 때문에 해당 문법은 성립되지 않는다. 

let one, two;
({one, two} = {one: 10, two: 20});

console.log(one) // 10
console.log(two) // 20

 

3) 값 위치에 변수 이름 작성

2번과 동일하다. 소괄호 ()를 쓰지 않으면 같지 않은 둘을 같다고 하게 되어 오류가 난다.

let five, six;
({one: five, two: six} = {one: 5, two: 6});

console.log(five) // 5
console.log(six) // 6

 

4) object 구조에 맞춰 값 할당

const {one, plus: {two, three}}
		= {one: 10, plus: {two: 20, three: 30}}
        
console.log(one) // 10
console.log(two) // 20
console.log(three) // 30

 

5) 나머지를 object로 할당

배열에서 나머지 연산자를 쓸 때, 나머지 요소를 하나의 배열로 반환한다고 했다.

객체에서 나머지 연산자를 쓸 때에도 나머지 키-값 쌍을 하나의 객체로 반환한다.

const {one, ...rest}
		= {one: 10, two: 20, three: 30}
        
console.log(rest)  // {two: 20, three: 30}

---

파라미터 분할 할당

호출하는 함수에서 오브젝트 형태로 넘겨준 파라미터 값을, 호출 받는 함수의 파라미터에 맞춰 할당한다.

 

함수를 호출하면서 one, two를 넘겨준다.

add 함수에 프로퍼티 이름에 맞춰 값을 분할 할당해 30이 나온다. 

function add({one, two}) {
	console.log(one + two);
};

add({one: 10, two: 20})

// 30

 

아래도 똑같이 넘겨 받은 오브젝트 구조와 프로퍼티에 맞춰 값을 할당한다.

function add({one, plus: {two}}) {
	console.log(one + two)
};

add({one: 10, plus: {two: 20}})

// 30

---

 

Object Operation

1) 같은 프로퍼티 이름을 사용할 때

 

뒤에 작성한 프로퍼티 값으로 대체된다.

ES5 strict 모드에서는 프로퍼티 이름이 같으면 에러가 났지만, ES6는 모드에 관계 없이 에러가 발생하지 않는다. 

const value = {book: 10, book: 20}
console.log(value)

// {book: 10}

 

2) Shorthand Property names (스펙에 정의 X, MDN발)

 

one에 10을, two에 20을 부여한 것으로 아래와 같은 결과가 나온다.

const one = 10, two = 20;
const values = {one, two}

console.log(values)
// {one: 10, two: 20}

 

3) 문자열을 프로퍼티 이름으로 사용할 때

const value = {
	["one" + "two"]: 12
};

console.log(value.onetwo)
// 12

 

4) 변수 값을 프로퍼티 이름으로 사용할 때

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"]) // 스포츠

 

++ 분할 할당을 조합한 형태

const item = "book";
const result = {[item]: title} = {book: "책"};

console.log(result) // {book: 책}

{[item]: title} 은 {book: title} 형태가 되고, title에는 "책"이 할당된다.

 

뭔가 알 듯 말 듯 쉬워 보이는데 아리송하다.