Javascript 전개 연산자(... 문법, dot dot dot, Spread operator tricks)

 

자바스크립트에서 간혹 점 3개로 만들어진 문법을 볼 때가 있다  ->...

가령 요런코드가 있다고 하여보자.

function printer(...arg){
   console.log(arg);
}

printer(1,2,3,4,5);

 

해당 코드를 실행하면 아래 사진처럼 배열이 출력이 된다.

요렇게 배열이 튀어나온다.

 

그러면 숫자 1을 넣어보고 아무런 값도 넣지않아보자.

오홍..배열값으로 잘 나온다.

 

마치 자바에서의 가변인자처럼 사용이 가능하다!

또한 불변데이터 패턴(Immutable data pattern)에서도 사용된다.

아래코드를 보면 쉽게 이해할 수 있다.

var a = [3,4,5];
var b = a;
a.push( 6 );  //a 배열에 6을 넣는다.

console.log(a);  //3,4,5,6이 출력된다.
console.log(b);  //3,4,5,6이 출력된다.

 

위 내용은 자바스크립트의 특성때문에 발생하는 문제아닌 문제이다.

당연히 b가 바라보는 값이 a이므로 b 또한 새로 추가된 데이터가 출력이 되는 것 이다.

 

b 배열의 값을 불변, 변하지 않게 하려면 다른 메소드를 사용하거나 배열을 새로이 생성해서 문제를 해결했지만 위에서 언급한 전개 연산자를 사용하면 쉽게 구현 가능하다.

var a = [3,4,5];
var b = a;
a.push( 6 );  //a 배열에 6을 넣는다.

console.log(a);  //3,4,5,6이 출력된다.
console.log(b);  //3,4,5,6이 출력된다.



var a = [3,4,5];
var b = {...a};
a.push( 6 );  //a 배열에 6을 넣는다.
console.log(a);  //3,4,5,6이 출력된다.
console.log(b);  //3,4,5이 출력된다.

 

b의 배열값을 추가하는 경우에 a 배열을 전개 연산자를 통해서 받도록 하여 서로 바라보고있는 데이터의 주소를 다르게 하였다.

요런식으로도 사용가능한 전개연산자...ES6문법으로 되어있으므로 익스플로러에서는 되지 않는다..ㅠㅠ