javaScript - 스프레드 오퍼레이터(Spread Operator)

스프레드 오퍼레이터를 이용해서 구현할 수 있는 몇가지 유용한 것들을 소개해보겠습니다.

스프레드 오퍼레이터는 ES6에 추가된 문법입니다.

 

1. 배열 복사

let arr1 = [1,2,3];
let arr2 = [...arr1, 4, 5];
console.log(arr1);	// [1, 2, 3]
console.log(arr2);	// [1, 2, 3, 4, 5]

 

 

2. 배열 합치기

let arr1 = [1,2,3];
let arr2 = [4, 5];
let arr3 = [1,2,3];
let arr4 = [-1, 0];

arr1.push(...arr2);
arr3.unshift(...arr4);
console.log(arr1);	// 1, 2, 3, 4, 5
console.log(arr3);	// -1, 0, 1, 2, 3

위의 예시와 같이 스프레드 오퍼레이터를 사용하여 배열을 요소별로 앞에 추가하거나(push) 뒤에 추가할 수 있다(unshift).

 

 

3.  함수 apply 대체

function bar(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}

let args = [1, 2, 3];
bar.apply(null, args);
bar(...args);

함수 호출하는 bar.apply(null, args);와 bar(...args);가 동일한 기능을 합니다.

bar.apply(null, args)는 args의 있는 배열 요소들을 각각 함수 인자로 전달합니다. 

x=1, y=2, z=3과 같이 값이 세팅됩니다. 이와 동일한 기능을 하는 것이 bar(...args)입니다.

 

cf) apply 

apply 함수는 특정 배열에 있는 요소를 타겟 배열에 추가 할 수 있습니다.

일부 내장 함수는 어떤 작업에 대해서는 배열과 루프없이 쉽게 처리할 수 있습니다.

 

 

4. 함수에서의 Rest 파라미터

Rest 파라미터는 가변 연산자 개념으로 이해하면 될 것 같습니다.

render = (...params) => {
  return console.log(params);
}; 
 
let fn1 = render('a', 'b', 'c');
console.log(fn1);	// ["a", "b", "c"]

let fn2 = render('a', 'b', 'c', 'd', 'e');
console.log(fn2);	// ["a", "b", "c", "d", "e"]

함수 호출 시 파라미터(인자)를 상황에 따라 다르게 보낼 때 사용하면됩니다.

 

 

 

함수 스프레드 오퍼레이터 활용

render = (a, ...params) => {
  console.log(a);
  console.log(params);
}; 
 
let fn1 = render('a', 'b', 'c');
console.log(fn1);	// a	// ["b", "c"]

let fn2 = render('a', 'b', 'c', 'd', 'e');
console.log(fn2);	// a	// ["b", "c", "d", "e"]

let params = ['a', 'b', 'c'];
let fn3 = render(...params, 'd', 'e');
console.log(fn3);	// a	// ["b", "c", "d", "e"]

let fn4 = render('d', 'e', ...params);
console.log(fn4);	//d	// ["e", "a", "b", "c"]