IT/Font-end

[JavaScript]Spread operator - 배열의 복사 및 활용

omaeng 2020. 6. 8. 10:54

Spread operator는 펼침 연산자라는 뜻이다. 펼침이라는 의미로 배열 안에 있는 데이터를 펼쳐서 보여준다는 의미가 있다. 

 

let pre = ["apple", "orange",100];
//펼침 연산사.
let newData = [...pre];
console.log(pre,newData);
["apple", "orange", 100]
["apple", "orange", 100]

변수인 pre와 newData가 같은지 검사해보면 false가 나온다. 

 

같은 값이 나오더라도 === 연산자로 검사해보면 false가 나오는 이유는 Spread operator로 변수를 재 정의했기 때문에 주소 채계가 달라졌기 때문이다.

  또, spread operator는 배열의 어디든 위치할 수 있어서 배열 안에 배열을 또 넣을수 있다.

 

 

let pre = [100,200,"hello",null];
let data = [0,1,2,3, ...pre,4];
console.log(data);
[0, 1, 2, 3, 100, 200, "hello", null, 4]

기존에는 spread operator를 이용하지 않고 다음과 같은 방법으로 함수에 인자값을 전달했다.

let pre = [100,200,300];

function sum(a,b,c){
  return a+b+c;
}
 
console.log(sum.apply(null, pre));
//결과:600

하지만 spread operator를 이용하면 매개변수로 펼쳐서 넣어주기 때문에 더욱 간결한 코드를 작성할 수 있다.

let pre = [100,200,300];

function sum(a,b,c){
  return a+b+c;
}
 
console.log(sum(...pre));
//결과 600