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 와 같은 값을 갖게 할겁니다.
