자바스크립트 스프레드 연산자

스프레드 연산자란? (전개 구문)

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

 

 

#1 - 배열에서의 스프레드 연산자

스프레드 연산자의 등장으로

배열 병합과 복사가 간단해졌다.

 

 

배열 병합

// 배열 스프레드 연산자
const arr = ['a','b','c','d'];
const arr2 = ['e','f','g','h'];
const arr3 = [...arr, ...arr2]

콘솔

기존에 concat을 이용해서 병합했었는데.

스프레드 구문 (...) 만으로 배열이 병합된 모습이다.

 

 

배열 복사

// 배열 스프레드 연산자
const arr = ['a','b','c','d'];
const arr2 = [...arr];

콘솔

 

기존에는 slice나 map을 이용해 복사했었는데,

스프레드 연산자로 배열의 얕은 복사가 가능하다.

 

#2 - 함수에서의 스프레드 연산자

 

Rest Parameter

파라미터로 스프레드 연산자를 사용한 것을 Rest Parameter라고 한다.

기존에는 인수로 전달된 값들을 argument로 처리했는데.

스프레드 연산자로 처리할 수 있다.

 

// 함수 스프레드 연산자
function sum(...nums){
    let sum = 0;
    for(let num of nums){
        sum += num;
    }
    return sum;
}

콘솔

 

몇개를 넣어도 잘 돌아가는 모습이다.

주의할 것, 스프레드 연산자는 매개변수 마지막에 써야한다

ex) ...nums , a , b 이런식으로는 불가능

 

함수 호출할 때

파라미터쪽이 아닌 호출 할 때 인수에다가도 사용이 가능하다.

배열을 저장해 인수로 활용이 불가능했는데.

스프레드 연산자를 이용하면 가능해졌다.

 

// 함수 스프레드 연산자
const arr = [1,2,3,4,5,6,7];

function sum(...nums){
    let sum = 0;
    for(let num of nums){
        sum += num;
    }
    return sum;
}

 

콘솔

스프레드 연산자를 사용했을 때와 안했을 때의 모습이다.

 

#3 - 객체에서의 스프레드 연산자

객체 역시 복사가 가능하다.

객체를 병합할 때 같은 키를 가지고 있으면

뒤에 입력된 키로 오버라이딩된다.

 

// 객체 스프레드 연산자
const human = {
    name : 'joy',
    age : '33',
    tel : '010-xxxx-xxxx'
}
const human2 = {
    name : 'jayce',
    year : '1999',
    address : 'seoul'
}

콘솔

객체가 병합되고 같은 키를 가지고 있으면 뒤에 입력한 것으로 덮어씌워진 모습