자바스크립트 (14)

Do_Doolly·2023년 4월 1일

JavaScript

자바스크립트 TIL

목록 보기

14/15

글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

자바스크립트의 문법 중 독특한 친구가 있다.

🔜 ...

ES6에 추가된 두 가지 기능을 갖고 있는 문법 표현이 있다. 위 소제목에 나오는 것처럼 ' ... '이 바로 하나의 문법이다.

점 세 개를 이어붙인 이 문법은 Spread 문법과 Rest 파라미터의 두 가지 기능을 구현하는데, 재밌게도 두 기능은 서로 상반된 내용을 갖고 있다.

🧐 Spread와 Rest

Spread 문법

Spread 문법은 압축되어 있는 것을 풀어서 뿌리는(spread) 기능이다.

자바스크립트의 배열(Array)과 객체(Object)는 이터러블(iterable)한 속성을 갖고 있는데, 이 프로토타입을 통해 내부에 있는 값들을 순회한다.

간단하게 예를 들어보자

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [2, 4, 6];

console.log(sum(...numbers)); // 12

위의 예시에서 ...numbers 는 배열 내부에 있는 모든 원소를 순회하며 값을 꺼낸다.

sum 함수가 3가지의 인수를 받기 때문에 위에서 sum(...numbers)는 sum(2, 4, 6)과 같은 동작을 한다.

Spread 문법의 예시를 위해 작성했지만 위 함수는 그닥 좋은 함수가 아니다. 만약에 numbers 배열 내 값이 중간에 변경되기라도 하면 sum함수가 실행될 때 에러가 날 것이다.

이걸 방지하기 위해 파라미터에도 적용할 수 있는 비슷한 문법이 있다!

Rest 문법

Rest는 Spread 문법과 매우 유사한 ... 을 사용하지만 역할이 매우 다르다.

Rest는 객체, 배열 그리고 함수의 파라미터에서 사용되며 비구조화 할당 문법과 자주 쓰인다.

const fruits = ['apple', 'banana', 'grape'];

const [one, ...otherFruits] = fruits;

console.log(one); // 'apple'
console.log(otherFruits); // ['banana', 'grape']

비구조화 문법은 순서대로 할당되므로 one에는 apple이 들어가고, otherFruits는 Rest문법을 통해 그 외 나머지 모든 과일 값이 배열로 들어간다.

중요한 건 Rest 문법을 사용한 변수 뒤에는 다른 변수가 오면 안된다. Rest 문법은 어디까지나 나머지를 의미하지 임의 범위까지 값을 추출할 순 없기 때문이다.

const [one, ...otherFruits, another] = fruits;
// -> 에러!! another는 Rest 변수 뒤에 올 수 없음

🔚 Spread와 Rest 혼용

두 문법이 따로따로 쓰일 때도 있지만, 같이 썼을 때 효과적일 때도 있다.

위 Spread 문법의 예시에서 numbers 배열은 오염될 가능성이 있기에 sum 함수의 파라미터에 Spread 문법으로 넣기에는 불안 요소가 있다.

오염되지 않는다 하더라도 내가 아닌 다른 개발자가 sum 함수의 파라미터를 2개나 4개로 변경하면 원하는 값이 안 나올 수도 있다.

이럴 때 Rest를 sum에 사용하면 문제를 해결할 수 있다!

function restSum(...numbers) {
  // reduce 문법으로 값 누산
  return numbers.reduce((prev, curr) => prev + curr);
}

const numbers1 = [2, 4];
const numbers2 = [1, 3, 5];
const numbers3 = [5, 10, 15, 20];

console.log(restSum(...numbers1)); // 6
console.log(restSum(...numbers2)); // 9
console.log(restSum(...numbers3)); // 50