펼침 연산자

 

객체나 배열에 대해서 데이터를 불러올때 "..." 기호를 사용하는 방법

 

 

배열

const num = [100, 200, 300, 400, 500];

document.write(num); // 100, 200, 300, 400, 500

document.write(num[0], num[1], num[2], num[3], num[4]); // 100 200 300 400 500 (쉼표가 없다)
document.write(...num); // ... 키워드를 사용, 100 200 300 400 500 (쉼표가 없다)

객체

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

document.write(...obj);					// 100, 200, javascript 출력

변수에 저장한 뒤 불러오기

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

    const spread = {...obj};			// spread 변수에 obj 객체 데이터를 저장
    document.write(spread.a);			// 100
    document.write(spread.b);			// 200
    document.write(spread.c);		    // javascript

변수에 데이터를 추가한 뒤에 저장한 후 불러오기

펼침 연산자로 변수에 객체 데이터를 저장할때 데이터를 추가할 수 있다

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

    const spread = {...obj, d: "jquery"}; // obj 객체 대이터와 jquery를 추가한 뒤 spread에 저장
    document.write(spread.a);		      // 100
    document.write(spread.b);		      // 200
    document.write(spread.c);			  // javascript
    document.write(spread.d);		      // jquery
 

두 개의 객체를 결합해 불러오기

두 개의 객체들의 데이터를 하나의 변수에 저장한 뒤 불러 올 수 있다

   const objA = {
        a: 100,
        b: 200,
    };

    const objB = {
        c: "javascript",
        d: "jquery"
    };

    const spread = {...objA, ...objB};	// objA, objB의 데이터들이 spread 변수에 저장된다
    document.write(spread.a);			// 100
    document.write(spread.b);			// 200
    document.write(spread.c);			// javascript
    document.write(spread.d);			// jquery