[JS] Rest Syntax

1. Rest Syntax란?

Rest Syntax는 함수가 호출될 때 전달된 모든 인자를 하나의 배열로 받아들이는 문법입니다. 즉, 함수의 매개변수 앞에 ...을 붙이면, 해당 매개변수는 나머지 모든 인자들을 배열로 받을 수 있습니다.

예제:

function f(...args) {
    const sum = args[0] + args[1]; return sum;
}
console.log(f(3, 4)); // 7

• f(3, 4)를 호출하면, 함수 내부에서 args는 [3, 4]가 됩니다.
• 이처럼 함수에 전달된 모든 인자를 배열로 다룰 수 있게 해줍니다.

---

2. 왜 Rest Syntax를 사용할까?

처음에는 "그냥 배열을 함수에 전달하면 되는 거 아닌가?"라는 생각이 들 수 있습니다. 하지만 Rest Syntax는 가변적인 인자를 다루거나, 더 유연한 코드를 작성하는 데 유용합니다.

예제:

function multiply(...numbers) {
    return numbers.reduce((product, num) => product * num, 1);
}
console.log(multiply(2, 3, 4)); // 24

• 이 함수는 몇 개의 인자를 받든 모두 곱셈을 수행합니다. Rest Syntax가 없으면 numbers 배열을 직접 만들어 전달해야 하지만, Rest Syntax 덕분에 더 간단하게 작성할 수 있습니다.

---

3. Higher-Order Functions란?

Higher-Order Function(고차 함수)은 함수를 인자로 받거나, 함수를 반환하는 함수입니다. Rest Syntax는 고차 함수를 작성할 때도 자주 사용됩니다.

예제: 로그를 추가하는 고차 함수

function log(inputFunction) {
    return function(...args) {// Rest Syntax로 인자들을 받음
    console.log("Input", args); // 입력 인자 출력
    const result = inputFunction(...args); // 원래 함수 실행
    console.log("Output", result); //결과 출력
    return result; // 결과 반환
    }
}
const f = log((a, b) => a + b); // log 함수를 통해 새로운 함수 생성 f(1, 2); 
// Logs: Input \[1, 2\]
// Logs: Output 3
// 결과: 3

작동 방식:

1. log 함수는 다른 함수(inputFunction)를 인자로 받습니다.
2. 내부에서 새로운 함수를 반환하며, 이 함수는 호출된 모든 인자를 Rest Syntax로 받습니다.
3. 이 반환된 함수는 다음을 수행합니다:
   • 인자(args)를 출력합니다.
   • 원래의 inputFunction을 호출하며 인자들을 전달(...args).
   • 결과를 출력한 뒤 반환합니다.
4. 결과적으로 f는 원래 함수 (a, b) => a + b에 로그 기능이 추가된 새로운 함수가 됩니다.

---

4. 왜 이렇게 쓸까?

고차 함수와 Rest Syntax는 다음과 같은 장점을 제공합니다:

1. 코드 재사용성: 반복적인 작업(예: 로그 출력)을 함수 바깥에서 처리할 수 있습니다.
2. 유연성: 어떤 함수든 log와 결합하여 새로운 기능을 추가할 수 있습니다.
3. 가변 인자 처리: Rest Syntax는 인자의 개수가 고정되지 않은 경우에도 유연하게 작동합니다.

---

요약

• Rest Syntax (...): 함수 호출 시 전달된 모든 인자를 배열로 수집.
• 고차 함수: 함수를 인자로 받거나 반환하는 함수. Rest Syntax와 자주 조합되어 사용됨.
• 예제 활용: Rest Syntax로 가변 인자를 받아 처리하거나, 고차 함수를 통해 함수의 동작을 확장할 수 있음.

이처럼 Rest Syntax는 JavaScript에서 가변 인자 처리 및 고차 함수 활용을 위한 강력한 도구입니다.

---

어떤 함수든 log와 결합한다는 것의 예시

비동기 함수와 결합

async function fetchData(url) {
    const response = await fetch(url);
    return await response.json();
}

const loggedFetchData = log(fetchData);
loggedFetchData("https://jsonplaceholder.typicode.com/todos/1");
// Logs: Input: ["https://jsonplaceholder.typicode.com/todos/1"]
// Logs: Output: {userId: 1, id: 1, title: "delectus aut autem", completed: false}
// 결과: {userId: 1, id: 1, title: "delectus aut autem", completed: false}