[자바스크립트] 스프레드 오퍼레이터(spread operator) 사용법

1. 전개 연산자(spread operator)

1.1 전개 연산자(spread operator)란?

전개 연산자(..)는 배열안에 있는 데이터 또는 문자열안에 있는 단어 하나하나를 넘기는 용도로 사용한다.

 

1.2 전개 연산자 사용법

전개 연산자를 사용하는 방법은 배열 또는 문자열 앞에 점 세개를 붙이면 된다.

1) 배열일때

const arr = [1, 2, 3];
const newArr = [...arr];

console.log(newArr);
// [1, 2, 3]

코드해석

1. 배열 arr의 요소에 처음부터 하나씩 접근하기 위해 ...이라는 전개 연산자 기호를 붙였다
2. ...arr은 arr의 요소 1, 2, 3이므로 ...arr을 배열의 기호[ ]로 감싸줘서 배열로 만든 후 newArr에 할당해준다
3. newArr은 [1, 2, 3]이다

2) 문자열일때

const str = "maple";
const newStr = [...str];

console.log(newStr);
// ["m", "a", "p", "l", "e"]

코드해석

1. 문자열 str의 각 단어에 처음부터 하나씩 접근하기 위해 ...이라는 전개 연산자 기호를 붙였다
2. ...str은 str의 요소 "m", "a", "p", "l", "e"이므로 ...str을 배열의 기호[]로 감싸줘서 배열로 만든 후 newStr에 할당해준다
3. newStr은 ["m", "a", "p", "l", "e"]이다

1.3 전개 연산자의 특징

1) 배열에 바로 붙일 수 있다

const arr = [4, 5, 6];
const arrWrap = [1, 2, 3, ...arr, 7, 8, 9]
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2) 불변성을 유지 할 수 있다

원본 배열은 그대로 유지하면서 새로운 배열을 만들었다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [3, 2, 1]

3) 배열의 나머지 요소를 할당할 수 있다

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

 

---

 

Reference

• 기록맨 블로그: 전개 연산자(Spread Operator)