[javascript] 객체의 구조 분해 할당

객체 구조 분해 할당

기본 할당

<script>
var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true
</script>

선언 없는 할당

구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있다.

<script>
var a, b;

({a, b} = {a: 1, b: 2});
</script>

할당문을 둘러싼 ( ... ) 는 선언 없이 객체 리터럴 비구조화 할당을 사용할 때 필요한 구문이다.

{a, b} = {a:1, b:2}는 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문에 유효한 독립 구문이 아니다.

( .. ) 표현식 앞에는 세미콜론이 있어야 한다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있다.

새로운 변수 이름으로 할당하기

객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수를 할당할 수 있다.

<script>
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true
</script>

기본값

객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있다.

<script>
var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5
</script>

기본값 갖는 새로운 이름의 변수에 할당하기

새로운 변수명 할당과 기본값 할당을 한번에 할 수 있다.

<script>
var {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5
</script>

중첩된 객체 및 배열의 구조 분해

중첩된 객체의 구조 분해도 기본 객체의 구조 분해와 비슷하게 내부에 접근하여 구조 분해를 작업 해준다.

<script>
var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"
</script>

객체 구조 분해 Rest

rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모아준다.

<script>
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }
</script>