구조 분해 할당은 말 그대로 배열이나 객체를 분해하여 배열의 특정한 원소나 객체의 특정한 자체 속성을 추출해서 변수에 저장할 수 있도록 한다.
이는 전개 구문과 유사하다고 생각할 수 있지만,
전개 구문은 모든 원소와 자체 속성을 가져와서 새 배열이나 객체 또는 함수에 전달하는 반면,
Destructuring은 특정 배열의 원소나 객체의 자체 속성을 가져와서 변수에 저장한다는 차이점이 있다.
아래의 코드는 배열을 새로 생성하는 것 처럼 보이지만 변수 a
와 b
에 “Hellow”
와 “world!”
를 각각 할당한다.
[a, b] = ["Hello", "world!"]; // 출력 시 -> 각각 Hello와 world!로 출력됨
앞서 살펴봤던 전개 구문 또한 구조 분해 할당에서 사용할 수 있는데, 각각의 배열 원소나 객체 자체 속성을 변수에 할당한 후, 남은 데이터들이 있다면 전개 구문을 통해 모두 한 곳에 저장할 수 있다.
여기서 주의할 점은 항상 구조 분해 패턴 마지막에 사용되어야 한다.
let num1, num2, spread;,
[num1, num2, ...spread] = [1, 2, 3, 4, 5];
console.log(num1) // 1
console.log(num2) // 2
console.log(spread) // [3, 4, 5]
그렇지 않으면 아래 오류가 나타난다.
💡
[ num1, ...spread, num2 ] = [ 1, 2, 3, 4, 5 ];
할당 연산자 왼쪽에서 중괄호를 사용하여 자체 속성 이름을 사용하여 자체 속성을 대상으로 지정하는 구문
({ name } = { name: "choi", age: 24 });
console.log(name); // choi
console.log(age); // Error : age is not defined
객체 구조 분해 할당 시 주의할 점은 왼쪽에 선언되는 변수 명은 참조하고자하는 객체 내에 존재하는 자체 속성 이름으로 선언해야 한다.
💡 MDN, 구조 분해 할당 #선언 없는 할당
참고: 할당 문을 둘러싼( .. )
는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.
{a, b} = {a:1, b:2}
는 유효한 독립 구문이 아닙니다. 좌변의{a, b}
이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.
하지만,({a, b} = {a:1, b:2})
는 유효한데,var {a, b} = {a:1, b:2}
와 같습니다.
( .. )
표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다.
배열이나 객체에서 특정 원소나 특정 속성을 추출하기 편리함