[javascript] Spread syntax & Rest Parameters

zoe·2022년 9월 12일

JavaScript

Javascript

목록 보기

12/19

Spread syntax

spread syntax(전개구문)은 배열이나 객체의 요소를 펼쳐주는 문법이다.
ES6 기능에 해당한다.

배열 리터럴에서의 spread syntax

1. 이미 존재하는 배열을 일부로 하는 새로운 배열 생성

let berries = [raspberry, blueberry];
let fruits = [banana, ...berries, apple];
// [banana, raspberry, blueberry, apple]

2. 배열 복사

전개 구문을 이용하여 배열을 복사하면, arr.slice() 혹은 arr.slice(0)와 같은 효과이다.

let arr1 = [1,2,3,4];
let arr2 = [...arr];
arr2.push(5);

// arr2는 [1,2,3,4,5] 가 된다.
// arr1은 [1,2,3,4] 이다.
// arr2는 arr1을 복사해서 만든 새로운 배열이므로, arr2의 요소가 바뀌어도 arr1에는 아무 영향이 없다.

3. 배열 연결

전개 구문으로 concat이나 unshift보다 간결한 코드로 배열을 연결해줄 수 있다.

let arr1 = [1,2,3];
let arr2 = [8,9,0];
arr1 = [...arr1, ...arr2];
// arr1은 [1,2,3,8,9,0]이 된다.

let arr1 = [1,2,3];
let arr2 = [8,9,0];
arr1 = [...arr2, ...arr1];
// arr1은 [8,9,0,1,2,3]이 된다.

객체 리터럴에서의 spread syntax

Object.assign()보다 간결하게 객체 복사와 합치기를 할 수 있다.

1. 객체 복사

let obj = {a: 'baz', b: 2};
let clonedObj = {...obj};
// clonedObj는 {a: 'baz', b: 2} 가 된다.
// clonedObj는 Obj와 주소값이 다른 객체이다.

2. 객체 합치기

let obj1 = {a: 'baz', b: 2};
let obj2 = {a: 'bar', c: 3};
let mergedObj = {...obj1, ...obj2};
// mergedObj는 {a: 'bar', b: 2, c : 3}가 된다.
// 동일한 키 값이 있을 때는, 첫번째 객체의 값이 두번째 객체 값으로 덮어씌워진다.