JS ES6 문법 익숙해지기 (5) - spread, rest, destructuring

spread와 rest는 모두 (...)을 사용하여 배열/객체 요소를 활용할 수 있는 문법임.

1. spread

spread를 통해 배열/객체의 요소를 '펼치는' 혹은 '확장하는' 작업을 수행할 수 있음. 그게 무슨 말이냐면...

spread 용례

1-1) 배열 합치기

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

// Spread 문법을 사용하여 두 배열을 합침
let combinedArray = [...array1, ...array2];

console.log(combinedArray); // 출력: [1, 2, 3, 4, 5, 6]

1-2) 배열 복사하기

let originalArray = [1, 2, 3];

// Spread 문법을 사용하여 배열을 복사
let copiedArray = [...originalArray];

console.log(copiedArray); // 출력: [1, 2, 3]

// 원본 배열과 복사본은 다른 객체입니다.
console.log(originalArray === copiedArray); // 출력: false

1-3) 배열 요소 추가하기

let array = [2, 3, 4];

// 배열의 시작 부분에 요소 추가
let newArrayStart = [1, ...array];

console.log(newArrayStart); // 출력: [1, 2, 3, 4]

// 배열의 끝 부분에 요소 추가
let newArrayEnd = [...array, 5];

console.log(newArrayEnd); // 출력: [2, 3, 4, 5]

1-4) 객체 합치기

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

// 두 객체를 합쳐 새로운 객체 생성
let combinedObj = { ...obj1, ...obj2 };

console.log(combinedObj); // 출력: { a: 1, b: 2, c: 3, d: 4 }

1-5) 객체 프로퍼티 추가

let obj = { a: 1, b: 2 };

// 프로퍼티를 추가하여 새로운 객체 생성
let updatedObj = { ...obj, c: 3 };

console.log(updatedObj); // 출력: { a: 1, b: 2, c: 3 }

// 기존 프로퍼티를 변경하여 새로운 객체 생성
let modifiedObj = { ...obj, b: 20 };

console.log(modifiedObj); // 출력: { a: 1, b: 20 }

1-6) 함수 호출 시 인자로 추가하기

function multiply(a, b, c) {
    return a * b * c;
}

let numbers = [2, 3, 4];

// Spread 문법을 사용하여 배열의 요소를 개별 인수로 전달
let product = multiply(...numbers);

console.log(product); // 출력: 24

---

2. rest

반면, rest는 여러 요소를 하나로 '모으는' 역할을 수행함.

destructuring

• rest를 더 잘 이해하려면, destructuring이 뭔지 간단히 짚고 넘어가야 함.
  • 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식임. (2-2 참조하면 쉬움)

rest 용례

2-1) 함수 연산자에서 여러 개의 인수를 하나의 배열로

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 출력: 10
console.log(sum(5, 10, 15)); // 출력: 30

2-2) 배열을 destructuring

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

// Spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 출력: [1, 2, 3, 4, 5]

• 이 예시를 보면

  • 우측에 있는 원래 배열 [1,2,3,4,5]를 각각 first, second와 ...rest라는 const에 할당함.

    • 1 -> first
    • 2 -> second
    • [3,4,5] -> rest

  • array의 structure를 분해(destructuring)한 것.

2-3) 객체를 destructuring

// Rest (destructuring)
const {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4};
console.log(rest); // 출력: {c: 3, d: 4}

• 이것도 보면
  • 우측에 있는 원래 객체 {a: 1, b: 2, c: 3, d: 4}를 각각 a, b와 rest라는 const에 할당함.
  • 여기서 좌항과 우항의 rest 연산자를 제외한 값, 즉 'a'와 'b' 좌우항이 동일한 것을 알 수 있음.
    • 그래서 a와 b에는 object의 key-value 중 value가 할당됨.

---

출처1) https://soopdop.github.io/2020/12/02/rest-and-spread-in-javascript/
출처2) https://www.freecodecamp.org/news/javascript-rest-vs-spread-operators/
출처3) https://soopdop.github.io/2020/12/02/rest-and-spread-in-javascript/