[JavaScript-10]spread 연산자(...연산자)

본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.

완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.

특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.

참고:

javascript docs

ecmascript specification

js에서는 특별한 문법이 하나 존재한다.

바로 spread문법이다.

간단한 예시로 바로 접근해보자.

let arr = [2,4,6,8,10];

console.log(...arr);

위를 실행하고 결과만 보면 어? 그냥 가변길이 연산자인가? 싶을것이다.

비슷한게 자바에도 있고 C에도 있기 때문이다.(둘다 쓰는 법은 많이 다르다.)

그러나 앞으로 나올걸 보면 역시 js답다라는 소리가 절로 나오는 사기 연산자다.

let arr = [2, 4, 6, 8, 10];

console.log(add(...arr));

function add(a, b) {
    return a + b;
}

뭐지?? 아예 변수로 각각 들어가지는 황당하지만 딱봐도 매우 좋아보이는 연산자다.

spread연산자, 한국 사람들이 점점점연산자라고도 부르는데 이는 그냥 가변인자로 넣는게 아니라 아예 분리해서 파라메터로 넣을 수 있다.

객체(Object)는 되니?

let myObj = {'name':'kuakro','age':27};

console.log(...myObj);

객체도 되면 대박이다. 어떨까?

객체는 안된다... 객체는 iterable하지 않기 때문이다.

단 객체의 복제는 spread연산을 사용해서 할 수 있다.

let myObj = {'name':'kuakro','age':27};

console.log({...myObj});

이러한 문법은 가능하다는 것이다.

그럼 다른 iterable이 없냐고 하면 js에서 map역시 iterable객체이다.

let myObj = new Map();
myObj.set('name', 'kukaro');
myObj.set('age', '27');


f(...myObj);

function f(a, b) {
    console.log(a, b)
}

Map을 사용해서는 spread연산자를 사용해서 순회하는게 가능하다.

이렇게 출력되는걸 확인할 수 있다.