자바스크립트 - 지능형 함수 매개변수

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 지능형 함수 매개변수의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 명확한 설명과 많은 예제를 통해 이 개념들을 안내해 드리겠습니다. 그러니 가상의魔杖( 키보드)를 손에 들고 함께 뛰어들어 보세요!

기본 함수 매개변수

기본 매개변수는 무엇인가요?

피자를 주문할 때, 여러분은 "큰 페퍼로니 피자를 주세요"라고 말할 수도 있습니다. 하지만 사이즈를 지정하지 않으면 어떨까요? 피자점이 여러분이 중간 사이즈를 원하는 것으로 기본으로 가정하지 않으면 좋을까요? 바로 자바스크립트의 기본 매개변수가 하는 일입니다!

기본 매개변수는 함수 매개변수에 기본 값을 지정할 수 있게 해줍니다. 인수가 제공되지 않거나 undefined 인 경우, 기본 값이 적용됩니다.

간단한 예제를 보겠습니다:

function greet(name = "friend") {
console.log(`Hello, ${name}!`);
}

greet(); // 출력: Hello, friend!
greet("Alice"); // 출력: Hello, Alice!

이 예제에서, 이름을 제공하지 않으면 함수는 "friend"를 기본으로 사용합니다. 친절한 로봇이 이름을 몰라서 "Hello, friend!"라고 말하는 것과 같습니다!

더 복잡한 기본 매개변수

기본 매개변수는 단순한 값 이상일 수 있습니다. 표현식이나 심지어 함수 호출일 수도 있습니다. 더 발전된 예제를 보겠습니다:

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // 출력: 25
console.log(calculateArea(5, 3)); // 출력: 15

여기서, 너비를 제공하지 않으면 길이를 기본으로 사용합니다. 정사각형(길이가 너비와 같음)이나 직사각형의 면적을 계산하는 데 완벽합니다!

자바스크립트残数 매개변수

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

残수 매개변수는 마법의 가방처럼.any number of items을 담을 수 있습니다. 자바스크립트에서는 함수가 무한한 인수를 배열로 받을 수 있게 합니다.

다음과 같이 사용해 보겠습니다:

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 출력: 6
console.log(sum(1, 2, 3, 4, 5)); // 출력: 15

이 예제에서, ...numbers는 우리의 마법의 가방입니다. 그것은 어떤 수의 인수를 담을 수 있으며, 함수 내에서 배열로 작업할 수 있습니다.

일반 매개변수와 함께 사용

残수 매개변수는 일반 매개변수와 함께 사용할 수도 있습니다:

function introduce(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introduce("Hello", "Alice", "Bob", "Charlie");
// 출력:
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

여기서, greeting은 일반 매개변수이고, ...names는 나머지 인수를 담습니다.

자바스크립트 분해 구조화 또는 이름 매개변수

분해 구조화는 무엇인가요?

분해 구조화는 짐을 풀기와 같습니다. 하나씩 꺼내는 대신, 여러 항목을 한 번에 꺼내고 이름을 지정할 수 있습니다.

객체 분해 구조화의 예제를 보겠습니다:

function printUserInfo({ name, age, city = "Unknown" }) {
console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}

const user = { name: "Alice", age: 30 };
printUserInfo(user); // 출력: Name: Alice, Age: 30, City: Unknown

const anotherUser = { name: "Bob", age: 25, city: "New York" };
printUserInfo(anotherUser); // 출력: Name: Bob, Age: 25, City: New York

이 예제에서, 우리는 함수에 전달된 객체를 분해 구조화하여 name, age, 그리고 city(기본 값 포함)을 추출합니다.

배열 분해 구조화

분해 구조화는 배열에도 사용할 수 있습니다:

function getFirstAndLast([first, ...rest]) {
return { first, last: rest.pop() };
}

const result = getFirstAndLast(["Apple", "Banana", "Cherry", "Date"]);
console.log(result); // 출력: { first: "Apple", last: "Date" }

이 함수는 배열을 받아 첫 번째 요소를 추출하고,残수 매개변수를 사용하여 마지막 요소를 얻습니다.

기본 값과残수 매개변수와 함께 사용

이제 우리는 모든 개념을 하나의 초지능 함수로 결합해 보겠습니다:

function createTeam({ leader, members = [], maxSize = 5 } = {}) {
const team = [leader, ...members].slice(0, maxSize);
console.log(`Team created with ${team.length} members.`);
console.log(`Leader: ${leader}`);
console.log(`Other members: ${members.join(", ") || "None"}`);
}

createTeam({ leader: "Alice", members: ["Bob", "Charlie"] });
// 출력:
// Team created with 3 members.
// Leader: Alice
// Other members: Bob, Charlie

createTeam({ leader: "David" });
// 출력:
// Team created with 1 members.
// Leader: David
// Other members: None

createTeam();
// 출력:
// Team created with 0 members.
// Leader: undefined
// Other members: None

이 함수는 객체 분해 구조화와 기본 값, 그리고残수 매개변수를 사용하여 기본 빈 객체가 아무 것도 전달되지 않으면 기본으로 사용됩니다!

방법 요약

다음은 우리가 다룬 방법의 요약 표입니다:

방법	설명	예제
기본 매개변수	함수 매개변수에 기본 값을 제공	function greet(name = "friend")
残수 매개변수	무한한 인수를 배열로 받음	function sum(...numbers)
객체 분해 구조화	객체에서 속성을 추출	function printUserInfo({ name, age })
배열 분해 구조화	배열에서 요소를 추출	function getFirstAndLast([first, ...rest])

그리고 여러분, 우리는 자바스크립트의 지능형 함수 매개변수의 마법의 세계를 탐험했습니다. 이 기술들은 여러분의 프로그래밍 도구箱에 있는 도구들입니다. 이를 자주 사용하여 익숙해지면 됩니다. 그러니 지능적이고 유연하며 강력한 함수들을 만들어 나가세요! 행복한 코딩 되세요! ??

Credits: Image by storyset