자바스크립트 - REST 매개변수: 초보자를 위한 종합 가이드

안녕하세요, 미래의 자바스크립트 마법사 여러분! ? 저는 여러분을 현대 자바스크립트에서 가장 유용한 기능之一的 REST 매개변수를 탐험하는 여정에 안내해드릴 것을 기대하고 있습니다. 프로그래밍을 가르치고 있던 몇 년 동안, 이 개념을 마스터하면 여러분의 코딩 생활이 훨씬 더 쉬워질 것이라고 확신할 수 있습니다. 그럼 시작해보겠습니다!

JavaScript - Rest Parameter

REST 매개변수는 무엇인가요?

상상해보세요, 파티를 열 때, 얼마나 많은 손님들이 올지 모른다면 어떨까요? 몇 개의 의자를 준비하지만, 추가 손님들을 위한 큰 편안한 소파도 준비해 두는 것입니다. 자바스크립트에서 REST 매개변수는 그 소파와 같습니다 - 던져준 추가 인자를 처리할 수 있습니다!

REST 매개변수는 함수가 불정한 개수의 인자를 배열로 받을 수 있게 합니다. 이는 세 개의 점(...) 뒤에 매개변수 이름이 오는 것으로 표현됩니다.

간단한 예를 보겠습니다:

function gatherFriends(firstFriend, ...otherFriends) {
console.log("제 بهترین 친구는: " + firstFriend);
console.log("제 다른 친구들은: " + otherFriends.join(", "));
}

gatherFriends("Alice", "Bob", "Charlie", "David");

이 예제에서, firstFriend는 "Alice"이고, otherFriends는 ["Bob", "Charlie", "David"] 배열이 됩니다.

출력은 다음과 같습니다:

제 بهترین 친구는: Alice
제 다른 친구들은: Bob, Charlie, David

REST 매개변수를 사용하는 이유는 무엇인가요?

유연성: 인자의 수를 임의로 받을 수 있는 함수를 작성할 수 있습니다.
읽기 쉽게: 코드가 더 직관적이고 이해하기 쉬워집니다.
배열 메서드: 수집된 매개변수에 배열 메서드를 사용할 수 있습니다.

REST 매개변수와 Arguments 객체

REST 매개변수 이전에는 자바스크립트에서 arguments 객체가 사용되었습니다. 이는 비슷한 목적을 했지만, REST 매개변수는 몇 가지 장점을 가지고 있습니다. 비교해보겠습니다:

기능	REST 매개변수	Arguments 객체
유형	진정한 배열	배열과 비슷한 객체
배열 메서드	지원됨	직접 지원되지 않음
이름 매개변수	사용 가능	사용 불가능
명확성	더 명확	덜 명확

다음 예제를 통해 차이를 설명해보겠습니다:

// arguments 객체 사용
function sumOld() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

// REST 매개변수 사용
function sumNew(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumOld(1, 2, 3, 4)); // 10
console.log(sumNew(1, 2, 3, 4)); // 10

과 같이, REST 매개변수 버전은 더 깨끗하고 배열 메서드인 reduce를 사용할 수 있습니다.

스프레드 연산자와 REST 매개변수

이제 스프레드 연산자에 대해 이야기해보겠습니다. 스프레드 연산자는 REST 매개변수와 외관상 동일하지만, 반대의 목적을 가집니다. REST 매개변수는 여러 요소를 배열로 수집하는 반면, 스프레드 연산자는 배열을 개별 요소로 확장합니다.

재미있는 예제를 보겠습니다:

function makeSandwich(bread, ...fillings) {
console.log("빵: " + bread);
console.log("재료들: " + fillings.join(", "));
}

const myFillings = ["치즈", "토마토", "상추"];
makeSandwich("밀가루", ...myFillings);

출력:

빵: 밀가루
재료들: 치즈, 토마토, 상추

이 예제에서, 우리는 스프레드 연산자를 사용하여 myFillings 배열을 makeSandwich 함수에 개별 인자로 전달하고 있습니다.

REST 매개변수와 구조 분해

구조 분해는 짐을 풀어서 필요한 것을 꺼내고 나머지는 두는 것과 같습니다. REST 매개변수와 결합하면 강력한 도구가 됩니다. 어떻게 되는지 보겠습니다:

const [first, second, ...others] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]

이는 객체에도 적용됩니다:

const {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}

실 세계 예제: 함수 매개변수

이제 모든 것을 한데 모아 더 실용적인 예제를 보겠습니다. 상상해보세요, 쇼핑 카트에 있는 아이템의 총 가격을 계산하는 함수를 작성하고 있습니다:

function calculateTotal(discount, ...prices) {
const total = prices.reduce((sum, price) => sum + price, 0);
return total * (1 - discount);
}

const groceries = [5.99, 2.50, 3.75, 1.99];
console.log("10% 할인 후 총액: $" + calculateTotal(0.1, ...groceries).toFixed(2));

이 예제에서, 우리는 REST 매개변수를 사용하여 모든 가격을 수집하고, 그 가격을 함수에 스프레드 연산자를 사용하여 전달합니다. 출력은 다음과 같습니다:

10% 할인 후 총액: $12.81

결론

그렇게, 여러분은 REST 매개변수의 땅을 탐험하고, Arguments 객체와의 차이를 비교하고, 스프레드 연산자와의 관계를 탐구하며, 구조 분해와의 조합을 경험했습니다.

REST 매개변수는 항상 손을 내밀어주는 친구처럼, 여러분의 코딩 생활을 더 쉽게 만들어주는 강력한 도구입니다. 그러니 이 강력한 도구를 자바스크립트 도구箱에 넣고, 함수가 유연하고 코드가 항상 읽기 쉬운 것을 기억하십시오!

행복한 코딩 되세요, 여러분의 함수가 항상 유연하고 코드가 읽기 쉬운 것을 바랍니다! ??‍??‍?

Credits: Image by storyset

이전 튜토리얼:

JavaScript - 어트믹 오브젝트

다음 튜토리얼:

JavaScript - 페이지 리디렉션