Spread 연산자

ES6에서 도입된 spread 연산자에 대하여 간략하게 정리하는 글이다.

 

1.  결합의 기능

스프레드 연산자(...)는 배열, 문자열, 맵 등 과 같이 반복가능한 객체에 한하여 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어주는데 두개의 같은 타입의 다른 값을 가진 데이터를 결합할 때 유용하게 쓰인다.

// 배열에서의 spread
let arr1 = [1, 2, 3, 4]

// [1, 2, 3, 4]를 개별 요소로 분리한다. -> 1 2 3
console.log(...arr1) //1 2 3 4

// 2개의 배열을 한 개의 배열로 결합
let arr2 = [...arr1, 5, 6]
console.log(arr2) // [1, 2, 3, 4, 5, 6]

// 문자열에서의 spread
console.log("hello");    // hello
console.log(..."hello"); // h e l l o

//객체에서의 spread
let person = {
    name : 'kihoon',
    age : '22'
}
person = {...person, gender:'male'}
console.log(person); // {name : 'kihoon', age : '22', gender:'male'}

위와 같이 스프레드 연산자를 이용하여 배열을 결합하는 것이 가능하다. 

 

2. 기존 데이터 유지 및 복사

한 가지 특징은 ES5에서는 기존 배열을 다른 변수에 대입연산자(=)를 통해 할당을 하고 배열의 값을 임의로 바꾸면 원본배열의 값도 바뀌게 되어 slice함수나 map을 통해 복사하였는데 스프레드 연산자를 사용하면 새로운 복사된 배열을 만들수 있다.

let arr1 = [1, 2, 3, 4]
let arr2 = arr1

arr2.push(5)
console.log(arr1); //[1, 2, 3, 4, 5] 원본 배열이 변경됨 
console.log(arr2); //[1, 2, 3, 4, 5] 

//slice를 사용한 배열복사
let arr3 = [6, 7, 8]
let arr4 = arr3.slice(); 

arr4.push(9)
console.log(arr3); //[6, 7, 8]
console.log(arr4); //[6, 7, 8, 9] 

//spread를 사용한 배열복사
let arr5 = [10, 11, 12]
let arr6 = [...arr5]

arr6.push(13)
console.log(arr5); //[10, 11, 12]
console.log(arr6); //[10, 11, 12, 13]

3.함수에서의 spread 연산자

함수를 호출할 시에도 spread 연산자를 사용하여 인수를 넘겨줄 수 있다.  한가지 주의사항은 스프레드 문법은 rest 파라미터와 형태가 동일하여 혼동을 할 수 있다는 점이다.  rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙이는 것이다. 

function mul(...rest){
    let mul = 1;
    for(let v of rest){
        mul *= v
    }
    return mul;
}

console.log(mul(1)); //1
console.log(mul(2, 3)); //6
console.log(mul(...[2, 3, 5])); //30

위 코드는 mul 함수에 스프레드 연산자를 사용하여 배열을 각 개별요소로 파라미터를 넘겨주었고 rest 파라미터를 사용하여 각 개별요소를 배열로 전달받아 동작한다.

 

위 예시외에도 활용법이 다양하지만 자주 쓰일 것 같은 예시를 위주로 간략하게 작성하였는데 잘 활용하면 가독성 좋은 코드를 짤 때 많은 도움이 될 것 같다.