[JavaScript] Spread 연산자

Spread operator는 ES6에서 도입된 문법으로 array의 내용을 효과적으로 spread할 수 있다. 변수 앞에 '...'를 작성하여 spread 문법을 이용한다. spread 문법을 사용하여 기존 변수나 객체가 가지고 있는 값을 변경하지 않고도 추가적인 값을 넣어줄 수 있다. 

 

const lion = { name : 'lion', // key : value로 오브젝트 생성
        size : 'big',
        isAggresive : true,
        weight : 200
        }

// spread 문법 사용하여 lion 변수가 포함된 새로운 변수를 생성

const animals = [ {
		...lion,
        },
        {
        name : 'cat',
        size : 'big',
        isAggresive : true,
        weight : 200
        } ]

 

선언한 변수들을 콘솔에 출력한 결과!

 

array의 내용을 효과적으로 spread할 수도 있다. spread하여 변수에 직접 대입은 불가하다.

 

let numList = [1,2,3];
console.log(numList); // 배열에 담겨 출력
console.log(...numList); // 1 2 3 (unpack되어 spread 출력)

let name = "JavaScript"
console.log(name[5]); // 5번째 원소 출력
console.log(...name); // J a v a S c r i p t (개별 원소 하나씩 spread 출력)

let newNumList = [...numList, 4]; // array를 spread하여 배열 끝에 원소 '4' 추가
console.log(newNumList); // 4가 포함된 배열 출력
console.log(...newNumList); // 1 2 3 4 (unpack되어 spread 출력)

/*
   스프레드 문법 사용하여 변수에 직접 대입은 불가
   let newList = ...numList; 
*/