펼침 연산자 / 객체 구조, 비구조 할당

펼침 연산자 / 객체구조, 비구조 할당

펼침 연산자와 객체구조, 비구조 할당에 대해 알아보는 시간을 가지도록 하겠습니다.

---

01. 펼침연산자란?

배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다.
마침표 세개(...)로 표시합니다.
펼침 연산자는 단독으로 쓰일 수 없습니다.
배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야합니다. 변수에 담을 시 에러가 발생합니다.

01-1. 펼침연산자 : 복사

{
        // 복사
        {
            const obj = {
                a: 100,
                b: 200,
                c: "javascript"
            }
            const spread = { ...obj }
    
            document.write(spread.a)
            document.write(spread.b)
            document.write(spread.c)
}

결과보기

100
200
javascript

01-2. 펼침연산자 : 추가

{
        // 20. 추가
        {
            const obj = {
                a: 100,
                b: 200,
                c: "javascript"
            }
            const spread = { ...obj, d: "jquery"}
    
            document.write(spread.a);
            document.write(spread.b);
            document.write(spread.c);
            document.write(spread.d);
        }
}

결과보기

100
200
javascript
jquery

01-3. 펼침연산자 : 결합

{
    // 21. 결합
    {
        const objA = {
            a: 100,
            b: 200
        }
        const objB = {
            c: "javascript",
            d: "jquery"
        }
        const spread = { ...objA, ...objB }

        document.write(spread.a);
        document.write(spread.b);
        document.write(spread.c);
        document.write(spread.d);
    }
}

결과보기

100
200
javascript
jquery

02. 객체 구조분해(비구조) 할당이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

02-1. 비구조화 할당

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const { a, b, c } = obj;

    document.write(a);
    document.write(b);
    document.write(c);
}

결과보기

100
200
javascript

02-2. 객체 구조분해 할당

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const { a:name1, b:name2, c:name3 } = obj;

    document.write(name1);
    document.write(name2);
    document.write(name3);
}

결과보기

100
200
javascript