Javascript - 전개구문, 전개연산자, ...문법, {...data} / rest, spread properties

Rest properties

ES6문법으로 객체나 배열에 값을 할당할 때 사용한다.

const info={
    id: 0,
    name: "홍길동",
    phone: "010-1234-1234"
}

const {id, ...newInfo} = info;
//const id에는 0이 들어가고 나머지는 newInfo 객체에 할당된다.
id; //0
newInfo //{name: "홍길동", phone: "010-1234-1234"}

 

 

Spread properties

ES6문법으로 새로운 객체에 자체적으로 열거한 속성을 할당한다.

let n = {id, ...newInfo};
n; //{id: 0, name: "홍길동", phone: "010-1234-1234"}

 

활용 예시)

배열 특정 데이터 삭제하기 - 1~5까지 존재하는 배열에서 3만 삭제하기

const arr = [1,2,3,4,5];

const newArr = arr.slice(0,2).concat(arr.slice(3,5));

slice 메소드를 활용하여 잘라내고, concat 메소드를 통해 잘라낸 부분을 다시 합치는 방법입니다.

 

 

하지만 Spread properties 방식을 사용하면 아래처럼 구현이 가능합니다.

const newArr2 = [...arr.slice(0,2), ...arr.slice(3,5)]

 

값 추가도 굉장히 쉽게 할 수 있습니다.

const numberArr = [...arr, 6, 7, 8, 9, 10];
numberArr; //1, 2, 3, 4, 5, 6, 7, 8, 9, 10

let temp = [5, 6, 7, 8, 9, 10];
const numberArr2 = [...arr, ...temp];

numberArr2 //1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10