자바스크립트 확산 연산자(스프레드 연산자)

확산연산자란?

es6에서 추가된 문법으로 ...을 사용해서 배열의 나머지 값들을 받아오거나 편하게 확장시킬 수도 있습니다. 또 매개변수에도 활용가능합니다.

let arr = [1, 2, 3, 4, 5];
console.log(...arr);

우선 arr이라는 배열 안에는 1~5까지의 숫자가 들어있습니다. 그리고 확산연사자를 통해서 콘솔에 값을 확인하면 어떻게 될까요? ...arr은 1 2 3 4 5라는 안 쪽의 값을 리턴합니다. 그리고 [...arr]처럼 배열리터럴을 하고 확산연산자를 쓰면 arr이라는 배열과 값이 같은 배열을 만들어 냅니다. 기본적으로 이 사실을 알면 쉽게 활용할 수 있습니다.

배열에서의 활용

위에서도 언급했지만 배열리터럴 안에서 확산연산자 + 배열명을 사용하면 쉽게 값이 똑같은 배열을 만들어 낼 수 있습니다. 확인해볼까요.

let arr = [1, 2, 3, 4, 5];
let arr2 = [...arr] //arr2의 값은 [1, 2, 3, 4, 5]

확산연산자를 활용하면 예시처럼 쉽게 값을 복사할 수 있습니다. 또 배열을 확장하는데도 아주 편하게 사용할 수 있습니다. 

let arr = [1, 2, 3, 4, 5];
let arr2 = [0, ...arr, 6, 7];

arr이라는 배열에 몇 개의 숫자를 더해서 arr2라는 배열을 만들어냈습니다. 당연히 arr2의 값은 [0, 1, 2, 3, 4, 5, 6, 7] 입니다. 확산연산자에는 또 하나의 기능이 있습니다. 바로 나머지 값을 할당받는 것입니다.

배열에서 나머지 요소 받기

let arr = [1, 2, 3, 4, 5];
let [arr2, arr3, ...arr4] = arr;

배열리터럴을 할당문 왼쪽에 사용하는 것은 구조분해에서 본 형태죠? arr이라는 배열에 있는 값을 arr2와 arr3, arr4에 할당하고 있습니다. arr4 앞에는 확산연산자가 있다는 것을 주목해주세요. 이처럼 확산연산자를 통해서 나머지 요소를 다 할당받을 수 있습니다. 예시에서 arr2는 1, arr3은 2 그리고 arr4는 [3, 4, 5]라는 값을 가지게 됩니다.

나머지 값을 받으실 땐 확산연산자가 붙은 변수는 항상 맨뒤에 있어야 합니다.

나머지 값을 받는 요소가 가운데나 첫번째에 위치한다면 에러를 일으킵니다. 알아두세요.

함수에서의 활용

확산연산자를 통해서 배열 안에 있는 값들을 매개변수에 쉽게 넣을 수 있습니다.

let arr = [1, 2, 3, 4, 5];
function sum(a, b, c, d, e){
  return a + b + c + d + e;
};
sum(...arr); // 15

sum이라는 함수에는 매개변수가 5개 필요하고, 그 5개의 값을 더한 값을 반환합니다. arr이라는 배열안의 값을 확산연산자를 통해서 함수에 전달했습니다. 나머지 요소들을 받는 확산연산자의 기능을 함수에서도 사용할 수 있습니다.

함수에서 나머지 요소 활용하기 

function f(x, ...y) {
  // y 는 배열입니다.
  console.log(y[0], y[1]);
  return x * y.length;
};
console.log(f(3, "hello", true)); //결과값은 6

매개변수에 확산연산자를 사용했습니다. 이때도 주의해야할 건 확산연산자를 쓴 매개변수는 제일 뒤에 위치해야한다는 것입니다. 위치가 맨 뒤가 아닐 시 에러가 납니다. 그리고 매개변수에서 나머지값을 받은 y는 배열처리 된다는 것을 알아주세요. 

공감은 제작자에게 큰 힘이 됩니다.