javascript - spread, rest 문법 알아보기

JavaScript에서 spread, rest 문법은 ES6(ES2015)에서 처음 소개 된 문법이고 코드의 간결성과 가독성을 향상시키기 위해 탄생한 문법이다.

기존 JavaScript에서는 배열이나 객체를 복사하거나 병합하려면 for문이나 concat, slice등의 메서드를 사용해야 했다.

이런 방식은 번거롭고 에러를 발생시키기는 경우가 많았으며, 함수에 배열의 요소를 개별 인자로 전달하려면 apply 메서드를 사용해야 했는데 이런 메서드를 사용한 복사, 병합 등의 작업은 프로젝트의 규모가 커져감에 따라 코드의 복잡도가 증가하게 되고 가독성도 저하되는 경우를 발생시켰다.

이러한 복잡하고 가독성이 저하되는 부분을 해소하기 위해 spread, rest문법이 추가되어 배열이나 객체를 쉽게 복사하거나 병합할 수 있고 함수에 배열을 인자로 전달하는 것도 간편해졌다.

또한 함수형 프로그래밍 관점에서도 쉽게 구현하는데 도움을 주게 되는데 이는 데이터의 불변성을 지키는 것이 중요한 함수형 프로그래밍에서 spread문법은 새로운 배열이나 객체를 생성하면서 원래의 데이터를 변경하지 않기 때문이다.

spread 문법

객체나 배열 내부에 (...)를 이용하여 나타낼 수 있으며 객체를 개별 요소로 확장하는데 사용한다.

코드로 이해하기

1. 배열에서의 spread 문법 사용:

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

• arr1에서 1, 2, 3을 가지고 있는 배열을 선언한다.
• arr2에서 arr1의 값을 복사하여 추가하고 4, 5를 요소로 포함시켜준다.

2. 객체에서의 spread 문법 사용:

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};
console.log(obj2) // {a: 1, b: 2, c: 3}

• obj1에서 객체를 선언한다.
• obj2에서 obj1의 프로퍼티를 복사하여 추가하고 {c: 3} 포함시켜 준다.

3. 함수의 인수로서의 spread 문법 사용:

function sum(x, y, z) { // x, y, z가 차례로 들어감
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // output is 6

• 함수의 경우 함수의 인자를 spread를 이용하여 파라미터로 추가할 수 있다.

중요

spread 문법은 배열 또는 객체를 복사하거나 합치는 데 유용하며, 함수에 인수를 전달할 때에도 많이 되지만, spread 문법은 2차원 이상의 배열이나 객체에서는 얕은 복사(shallow copy)를 수행하기 때문에 중첩된 객체나 배열의 변경은 원본에 영향을 미칠 수 있다.

rest 문법

spread 문법과 같이 ES6(ES2015)에서 도입된 기능이며, 코드의 간결성과 가독성을 향상시키는 것을 목표로 한다.

rest 문법은 함수의 파라미터에서 주로 사용되며, 그 명칭은 '나머지'라는 의미를 가지고 있습니다. rest문법은 함수에 전달된 인자들을 배열로 모으는 역할을 한다. 이는 함수에 임의의 개수의 인자를 전달할 수 있게 해 주며, 이 인자들을 배열로 다루기 때문에 배열 메서드를 사용하여 쉽게 처리할 수 있다.

Rest 문법의 도입으로 인해 함수를 호출할 때 동적인 개수의 인자를 사용할 수 있게 되었고, 이는 함수의 유연성과 재사용성을 크게 향상시키게 되었다.

코드로 이해하기

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

console.log(a);  // 10
console.log(b);  // 20
console.log(rest);  // {c: 30, d: 40}

• rest문법은 객체의 구조 분해(destructuring)에서 자주 사용하는 걸 볼 수 있는데, 코드와 같이 구조분해를 통해 a와 b를 별개의 console.log()로 출력을 하고 남은 c, d를 모두 console.log()에서 출력하는 걸 볼 수 있다.

중요

rest문법은 코드의 유연성과 재사용성을 높여주는 강력한 도구로 사용되지만, 맨 마지막 매개변수에만 사용할 수 있다.