[JavaScript] Spread Operator

Spread Operator

Spread Operator 는 함수를 호출할 때 인수로 사용할 수 도있고, 배열 안에 들어갈수도 있고, 객체 안에 들어갈 수도 있습니다.

함수 호출

3개의 인자를 받아와서 그 3개의 합을 리턴하는 함수를 만들었습니다.

function sum (x, y, z) {
  return x+y+z;
}

console.log(sum(1,2,3));

실행 결과

6

위의 예제 코드에서 array (배열)을 추가한 코드입니다.

function sum (x, y, z) {
  return x+y+z;
}

console.log(sum(1,2,3));

let arr = [10, 20, 30];
console.log(sum(arr));

실행 결과

6
10,20,30undifinedundefined

뭔가 이상한 값이 뜹니다.
배열의 요소들을 함수의 인수로 사용할 수 없습니다.

배열의 요소들을 함수의 인수로 사용하고자할 때에는 apply를 사용합니다.

function sum (x, y, z) {
  return x+y+z;
}

console.log(sum(1,2,3));

let arr = [10, 20, 30];
console.log(sum.apply(null, arr));

실행 결과

6
60

sum.apply 라는 매소드를 불러오고, 첫 번째 인수로는 null을 주게되면
배열에 있는 인수의 합인 60이 출력됩니다.

위의 코드는 Spread Operator를 사용하면 굉장히 간편해집니다.

function sum (x, y, z) {
  return x+y+z;
}

console.log(sum(1,2,3));

let arr = [10, 20, 30];
console.log(sum(...arr));
//console.log(sum.apply(null, arr));

실행 결과

6
60

위의 예제중에 console.log(sum(arr));를 실행했을 때에는 오류가 났습니다.

console.log(sum(...arr)); ... Spread Operator를 쓰게 되면 똑같이 60이라는 결과가 나타납니다.

Spread Operator는Rest Operator와 달리 함수를 호출할 때 사용하기 때문에 중간에 낑겨있어도 됩니다.

function sum (a, b, c, d, e) {
  return a+b+c+d+e;
}

let arr = [20, 30];

console.log(
  sum(10, ...arr, 40, 50)
)

실행 결과

150

10, 20, 30, 40, 50 의 합인 150 이 출력됩니다.

10이 a 에 들어가고, arr에 가지고 있는 2개의 요소가 b, c에 들어가고, 40, 50이 d 와 e 에 들어갑니다.

배열에서의 Spread Operator

첫 번째로 새로운 배열을 생성할 때 이미 존재하는 배열을 엘리먼트로 가지도록 하고싶을 때 Spread Operator가 사용됩니다.

let face = ['eyes', 'nose', 'mouth'];
let head = ['hair', ...face, 'ears'];

console.log(head);
            

실행 결과

['hair', 'eyes', 'nose', 'mouth', 'ears']

face라는 eyes, nose, mouth 를 갖는 배열을 만들고,
head 라는 'hair, face, ears` 를 갖는 배열을 만들어
head를 출력했습니다.

face라는 배열이 가지고 있는 element(요소)를 head가 가질 수 있도록 도와주는 것이 Spread Operator 입니다.

배열 복사

let arr = [1, 2, 3];
let arrCpy = [...arr];

console.log(arrCpy);

배열 arr를 만들고 1,2,3 의 요소를 주었고,
arrCpy를 만들어 Spread Operator을 사용하여 arr 와 같은 값을 갖게 할겁니다.