[JS] 매개변수 배열로 묶어서 받기 | Rest 문법

rest

rest문법은 spread문법과 생긴건 똑같다.  기능적으로는 완전히 반대의 역할을 수행한다. spread문법이 배열이나 객체의 요소를 펼쳐서 평탄화를 시켜준다면, rest는 반대로 펼쳐있는 값들을 배열로 묶어준다.

 

 

💡 우리가 알고있는 매개변수 받을 때 모습 

function normal(a, b, c, d) {
    console.log(a, b, c, d);
}

normal(1, 2, 3, '사'); // 1 2 3 사

 

💡 rest를 사용해서 매개변수 받을 때

function rest(...rest) {
    console.log(rest);
}

rest(1, 2, 3, '사'); // [ 1, 2, 3, '사' ]

배열이 아닌 기본 리터럴을 전달해주었지만 받는 쪽에서 `...`을 붙여서 받게 되면 배열로 값을 받아온다. 

 

 

💡 일부만 배열로 받기

function rest2(a, b, ...rest) {
    console.log(a, b); // 1 2
    console.log(rest); // [ 3, '사' ]
}

rest2(1, 2, 3, '사');

두 번째 매개변수까지는 평범하게 받고, 그 이후의 값들만 묶어서 받아줄 수 있다. 근데 이런 코드 패턴을 사용할 일은 잘 없을 것 같다. 괜히 가독성만 안좋아질 것 같고, 가독성을 해치지 않으려면 완벽한 네이밍을 해주어야 할 것 같은데 나는 작명 센스가 없기 때문에 안쓸래요. 단, 다른 작업자가 사용할 수도 있으니 문법은 알아두면 좋.. 겠지요

---

매개변수가 아닐 때도 사용이 가능하다

rest는 배열이 아닌 객체일 때도 사용이 가능하고, 매개변수가 아닌 일반 변수에 값을 할당할 때(with. 구조분해)도 사용할 수 있다. 사실 이런 케이스에서 정말 많이 사용할 것 같고, 실제로 나도 진행했던 프로젝트를 리팩토링하는 과정에서 사용한 적이 있다. 그때는 rest 문법이라는걸 모르고 썼지만 이번에 알게 되어 다행이다.

 

💡 변수 할당하기

const person = {
    name: '길동',
    age: 30,
    height: 160,
}

const { name, ...rest } = person; // 이런 형태로 값을 저장하는걸 `구조 분해 할당` 이라고 함

console.log(name) // 길동
console.log(rest); // { age: 30, height: 160 }

• `person` 객체에 3가지(`name`, `age`, `height`) 속성이 있다. 
• 변수 `name`에 `person.name`을 저장한다. 
• `person`의 나머지 속성들을 변수 `rest`에 객체 형태로 저장한다 (`age`속성과 `height`속성)

 

📍 구조 분해 할당을 모른다면 이거부터 .. 

2024.08.06 - [자바스크립트] - [JS] 매개변수가 많아질 때 고민 | 구조 분해 할당 #객체편

 

 

💡 객체를 매개변수로 받기 - 응용(1)

const person = {
    name: '길동',
    age: 30,
    height: 160,
}

function func({ name, ...rest }) {
    console.log(name); // 길동
    console.log(rest); // { age: 30, height: 160 }
}

func(person)

변수에 값을 할당할 때와 똑같은 방식으로 동작한다.