Destructuring assignment

Issue

let title, hello;
const obj = {title: "title2", hello: "hello2"};

{title, hello} = obj; // 여기서 바로 할당 되었으면 좋겠다.

위 코드 처럼, title과 hello 변수에 obj의 프로퍼티 값을 바로 넣어주고 싶었다.

하지만 이렇게 할 경우 아래와 같은 에러가 발생했다.

Destructuring assignment(할당)

일단 정답은 아래와 같다.
구조 분해 할당 표현식을 () 괄호로 감싸주면 원했던 결과가 나온다.

let title, hello;
const obj = {title: "title2", hello: "hello2"};

({title, hello} = obj);
console.log(title, hello)

🤔 몇번을 봐도 이해가 되지 않았다. 왜 괄호가 있으면 될까?

내 생각에 정답은 할당에 있었다.
나는 항상 구조 분해 라고 이야기를 했지 뒤에 있는 Assignment(할당)은 신경쓰지 않았었다.

아래의 코드를 실행 해보자

1. object 구조 분해 할당

let title;
const obj = {titl: "title2", hello: "hello2"};

({titl, hello} = obj); // 여기서 titl은 새로운 변수로 할당된다.
// hello는 이미 선언된 변수가 있기에 해당 변수로 값이 들어간다.

console.log("title: ", title);	// undefined
console.log("titl: ", titl);	// title2
console.log("hello: ", hello)	// hello2

앞서서 해당프로퍼티 이름으로 변수가 선언되어 있지 않으면, 구조 분해 된 프로퍼티가 새로운 변수로 선언이 되는 것이다.

만약 앞의 로직에 이미 동일한 변수 이름으로 선언이 되어 있다면, 선언된 변수에 값이 할당 되게 된다.
-> 아래와 비슷한 로직으로 실행되는 것이 아닌가 싶다.

var i = 1;
i = 30;
console.log(i) // 30;

배열 구조 분해 할당

const arr = [1, 2, 3, 4, 5];
[a, b, ...c] = arr;
console.log(a, b, c); // 1, 2, [3, 4, 5]

vs

const obj = {a: "a", b: "b", c: "c", d: "d"};
({a, b, ...c} = obj); // ⚠️ ()를 감싸주지 않으면 에러가 발생한다.

console.log(a, b, c);

배열은 () 괄호로 감싸주지 않아도 바로 할당이 가능하다. 왜 그럴까?

V8을 조금 더 찾아보는 시간을 가져야 겠지만, 지금 생각으로는 배열은 연속적으로 메모리에 할당되어 있기 때문이 아닐까?
[1][2] (...[3][4][5]) 이런 식으로 말이다.

하지만, object는 주소를 가지고 있으니 효율이 떨어지고 해당 방식으로 사용하기 위해서는 () 괄호를 써주는 행위가 필요한 것아닐까?!

참고자료

• 구조 분해 할당
• Group Operator