[JS] 전개 구문 (Spread syntax)

전개 구문은 ECMAScript6(2015)에서 새로 추가된 문법이다.

간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열을 펼칠 수 있게 해준다. 

//펼칠 대상이 객체인 경우
{...obj}

//펼칠 대상이 배열인 경우
[...arr]
{...arr}

간단하게 배열이나 객체 앞에 점 세개 (...) 를 붙여주면 된다.

그대신 펼쳐진 객체나 배열을 담을 곳이 필요하다 → 객체는 객체로, 배열은 배열 또는 객체로 담을 수 있다.

 

 

[새로운 배열 만들기]

전개 연산자를 활용해 새로운 배열을 만들 수 있다.

ES5에서의 concat 메소드 보다 코드가 간결하고 가독성도 좋다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const newArr = [...arr1, ...arr2, ...arr3];  //[1, 2, 3, 4, 5, 6, 7, 8, 9]

또한 전개 연산자는 아래처럼 배열의 아무곳에나 추가 할 수 있다는 장점을 가진다.

const arr = [4, 5, 6];
const newArr = [1, 2, 3, ...arr, 7, 8, 9];  //[1, 2, 3, 4, 5, 6, 7 ,8, 9]

 

[펼칠 대상이 배열인 경우]

const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = [...arr1];  //...arr1 : 'a', 'b', 'c', 'd'

console.log(arr1); //['a', 'b', 'c', 'd']
console.log(arr2); //['a', 'b', 'c', 'd']

console.log(arr1 === arr2); //false

배열도 전개구문을 활용해 펼쳐서 새로운 배열을 만들 수 있다.

하지만 두 배열을 비교하면 false 가 출력되고 arr1 과 arr2 는 서로 다른 독립적인 배열이라는 것을 알 수 있다.

 

const arr = ['a', 'b', 'c', 'd'];
const obj = {...arr};

console.log(arr); // ['a', 'b', 'c', 'd']
console.log(obj); // {0: 'a', 1: 'b', 3: 'c', 4: 'd'}

만약 펼친 배열을 중괄호로 감싸 객체로 만들면 각 요소는 프로퍼티 값, 배열의 인덱스값이 프로퍼티 네임이 된다.

 

[기존 배열을 보존할 때 유용]

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

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

 

reverse 메소드는 배열의 각 요소를 역순으로 바꾸는데 기존 배열도 바꿔버리는 단점이 있다.

 

const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse(); //arr1을 복사하고 역순으로 뒤집는것. 원본은 안바뀜.

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

전개 연산자는 원본 배열을 그대로 유지하면서 새로운 배열을 만든다.

 

[배열의 나머지 요소 할당 가능]

비구조화 할당과 전개 연산자를 사용해 배열의 나머지 요소를 할당 받을 수 있다.

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

console.log(a); //1
console.log(b); //2
console.log(c); //[3, 4, 5]

변수 a 와 b 의 각각 인덱스 값에 맞는 값이 차례로 들어가고 c에는 할당 받지 못한 나머지 값이 대입된다.

 

 

[펼칠 대상이 객체인 경우]

const userInfo1 = {
    name: 'nana',
    age: 12
}

const userInfo2 = {...userInfo1};

console.log(userInfo1); // {name: 'nana', age: 12}
console.log(userInfo2); // {name: 'nana', age: 12}

console.log(userInfo1 === userInfo2); //false
//서로 다른 주소 값을 가진 독립적인 객체임을 확인 가능하다.

userInfo2 에는 전개 구문을 활용해 값을 할당했다.

결과적으로 userInfo1 과 userInfo2 는 똑같은 모양의 프로퍼티를 가지지만 마지막 줄에서와 같이 두 객체를 비교했을 때

false가 출력되면서 서로 다른 독립적인 객체임을 확인할 수 있다.

 

또한 전개 구문을 활용하면 다른 객체의 프로퍼티를 복사해오며 추가로 프로퍼티를 작성할 수 있다.

const userInfo1 = {
    name: 'nana',
    age: 12
}

const userInfo2 = {
    ...userInfo1
    phone: 'I-phone'
}

console.log(userInfo1); // {name: 'nana', age: 12}
console.log(userInfo2); // {name: 'nana', age: 12, phone: 'I-phone'}

 

[객체를 복사할 경우]

const obj1 = {
    a: 1,
    b: 2
};
const obj2 = {
    c: 3,
    d: 4
};

const objWrap = {obj1, obj2};

console.log(objWrap);
/*
{
 obj1: {
    a: 1,
    b: 2
 },
 obj2: {
    c: 3,
    d: 4
 }
}
*/

obj1 객체와 obj2 객체를 하나의 objWrap 객체로 묶으면 객체 각각의 값이 아니라 객체 자체가 들어가 2차원 객체가 된다.

이 때 전개연산자를 사용라면 객체 자체가 할당되는 것이 아니고 각각의 값이 할당된다.

const obj1 = {
    a: 1,
    b: 2
};
const obj2 = {
    c: 3,
    d: 4
};

const objWrap = {...obj1, ...obj2};

console.log(objWrap);
/*
{
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
*/

 

[펼칠 대상이 매개변수인 경우]

- 전개 연산자로서 아규먼트 값 넘기는 경우

위에서 했듯이 배열 안에 있는 값들을 인수들 목록으로 풀어 넘겨주는 역할을 한다. (리턴값 : 인수들 목록)

const arr = [3, 6, 2];
const maxNum = Math.max(...arr); //6

전개 연산자가 배열을 인수 리스트로 바꿔주어 Math.max(3, 6, 2) 가 된다.

 

[나머지 연산자로서 매개변수로 파라미터 받는 경우]

매개변수에 전개 구문을 활용하면 함수를 호출할 때 많은 인자들을 하나의 배열로 모아주는 매개변수로 활용가능하다. (리턴값: 배열)

function sum(...args) { // args 는 배열
    let sum = 0;
    
    for(let arg of args) sum += arg;
    
    return sum;   
}

console.log(sum(1)); // 1
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

function name(first, last, ...titles){
    console(first + ' ' + last); // Nana Cherry
    
    //나머지 인수들은 배열 titles에 할당됨
    //titles = ['Love', 'Shara']
    console.log(titles[0]); // Love
    console.log(titles[1]); // Shara
    console.log(titles.length); //2
}

name('Nana', 'Cherry', 'Love', 'Shara');

단! 나머지 매개변수는 항상 마지막에 있어야 한다.

function fc(arg1, ...rest, arg2){
   //에러
}
//...rest 후에 arg2가 있으면 안됨.

 

[펼칠 대상이 문자열인 경우]

문자열도 spread 문법으로 산개 할 수 있다.

문자열도 자바스크립트에서 하나의 객체로 취급하기 때문이다.

const str = 'abcdefg';

const str2 = {...str};
console.log(str2); // {0: 'a', 1: 'b', 2: 'c', 3: 'd', 4: 'e', 5: 'f', 6: 'g'}

const str3 = [...str];
console.log(str3); // (7)['a', 'b', 'c', 'd', 'e', 'f', 'g']

 

1. (...)는 전개 연산자나 나머지 매개변수로 사용된다. 

2. 전개 연산자와 나머지 매개변수 구분하기

- 함수 호출시 사용되면 배열을 목록으로 확장해주는 전개 연산자

- 함수 매개변수 끝에 있으면 인수 목록 나머지를 배열로 모아주는 나머지 매개변수

 

 

[출처]

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-%EB%AC%B8%EB%B2%95

[JS] 📚 전개 연산자(Spread 문법) 정리