3. 배열을 좀 더 직관적으로 활용, 전개연산자 (spread operator)

안녕하세요, 프로독학러입니다. 

이번 포스팅에서는 ES6의 전개연산자에 대해서 알아보도록 하겠습니다.

전개연산자는 함수를 호출하는 인자로 배열을 사용하고 싶을 때나 배열을 정의하는 리터럴 내에서 사용할 수 있습니다.

표현식은 아래와 같습니다.

1) 함수를 호출하는 인자로 배열을 사용할 때

myFunction(...iterableObj);

2) 배열 리터럴

[...iterableObj, 4, 5, 6]

2-1) 배열 리터럴 비구조화 (iterableObj를 선언하지 않고 할당)

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

1) 전개연산자의 함수호출용의 용도를 예제와 함께 알아보겠습니다.

function add(a, b, c){
    return a+b+c;
}
var arr = [2, 4, 5];
add.apply(null, arr); // 11 

기존 자바스크립트 문법으로 add함수를 정의하고, arr배열도 정의 했습니다.

add함수를 호출 할 때 인자값으로 arr배열의 원소들을 사용하려면 함수에 기본 메서드인 apply를 활용해야 했습니다.

(Function 객체로 부터 상속받는 메서드 - Function.prototype.apply)

똑같은 예제를 ES6의 전개연산자를 이용하면 다음과 같이 표현됩니다.

const add = (a, b, c) => {
    return a+b+c;
}
var arr = [2, 4, 5];
add(...arr); // 11이 출력

add라는 상수에 arrow function을 이용하여 함수를 할당하고, 

arr 배열을 정의한 후, add함수를 호출 할 때 전개 연산자를 통해 함수의 인자값으로 배열의 원소를 사용했습니다.

*(ES6의 arrow function이 생소하신 분은 이 글을 참조하세요)

2) 배열 리터럴에서 전개연산자를 활용하는 방법에 대해서 알아보겠습니다.

var arr1 = [3, 4, 5];
var arr2 = [1, 2, ...arr1, 6, 7];
console.log(arr2);
// [1, 2, 3, 4, 5, 6, 7]

위의 예제에서는 arr2배열을 정의할 때, arr1의 내용을 중간에 삽입해서 정의했습니다.

만약 전개연산자를 사용하지 않았더라면 배열의 push, splice, concat 메서드 등을 이용해 작업해야 했을 것입니다.

push메서드를 전개 연산자를 이용해 더 간단하게 수행하는 예제를 하나 더 살펴 보겠습니다.

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

위와 같이 두 개의 배열을 정의 했습니다.

이 상태에서 arr1의 뒤에 arr2를 붙여 [1, 2, 3, 4, 5, 6]의 배열을 만들고 싶다면 어떻게 해야할까요?

arr1.push(arr2)를 하면 될까요?

arr1.push(arr2);
// [1, 2, 3, [4, 5, 6]]

그렇게 하면 배열안에 배열이 push되므로 우리가 원하는 결과가 나오지 않습니다.

우리가 원하는 결과를 얻어내기 위해서는 배열객체의 프로토타입 메서드인 push.apply를 이용해야합니다.

코드는 다음과 같습니다.

Array.prototype.push.apply(arr1, arr2);
// [1, 2, 3, 4, 5, 6]

원하는 결과를 얻었지만 코드가 복잡합니다.

하지만 전개연산자를 활용하면 다음과 같이 쉽게 구현이 가능합니다.

arr1.push(...arr2);
// [1, 2, 3, 4, 5, 6]

*객체에서도 spread operator 를 사용할 수 있습니다.

spread 연산자를 이용하여 객체를 수정하는 방법을 간단하게 살펴보겠습니다.

let object = {
    a:'1',
    b:'2',
    c: {
        d:'3',
        e: {
            changeTarget: '0',
            f: '5'
        }
    }
}

위의 코드에서 객체 object 를 정의 했습니다.

우리는 이 object 에서 7번째 줄에 있는 changeTarget 의 값을 4로 바꾼 새로운 객체를 만들어 changed 변수에 할당할 것입니다.

let changed = {
...object,
    c: {
        ...object.c,
        e: {
            ...object.c.e,
            changeTarget: '4'
        }
    }
}

수정을 원하지 않는 부분은 spread 연산자를 활용하여 표기하고, 수정을 하고자 부분만 새롭게 지정해 주면 됩니다.

코드의 7번째 줄에서 changeTarget 에 4 를 지정해 주고 나머지 부분에는 spread 연산자를 이용해 그대로 두었습니다.

changed 를 콘솔에 찍어보면

의도한 대로 changedTarget 만 변경된 것을 볼 수 있습니다.

다음 포스팅에서는 전개연산자와 유사한 나머지 매개변수에 대해서 알아보겠습니다.

**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator

짱구의 기술블로그 - Chap27. 알쓸 ES6 

https://appear.github.io/2018/03/14/JavaScript/javascript_28/

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)