JavaScript - 기본 매개변수

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript의 기본 매개변수라는 마법의 세계로 뛰어들어 보겠습니다. 친절한 이웃의 컴퓨터 선생님이자 여러분의 가이드로서, 이 여정을 안내해드리게 되어 기쁩니다. 그러면 가상의魔杖(키보드)을 손에 들고, 코드의 마법을 부을 때까지 함께 가보겠습니다!

기본 매개변수 문법

ES6(ECMAScript 6) 이전의 JavaScript에서는 함수 매개변수에 기본 값을 설정하는 것이 고대의 마법처럼 보였습니다. 고대의 방법은 다음과 같았습니다:

function greet(name) {
name = name || 'Anonymous';
console.log('Hello, ' + name + '!');
}

하지만 지금은 ES6 이상에서 훨씬 더 예쁜 방법을 사용할 수 있습니다:

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

greet(); // 출력: Hello, Anonymous!
greet('Alice'); // 출력: Hello, Alice!

이 예제에서, greet()에 인자를 전달하지 않으면 기본 값 'Anonymous'를 사용합니다. 이는 모르는 사람에게 일반적인 인사를 사용하는 예절 있는 문서관처럼입니다!

기본 매개변수 값으로 표현식 사용

기본 매개변수는 간단한 값에 한정되지 않습니다. 표현식으로도 사용할 수 있습니다! 예제를 보겠습니다:

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

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

이 예제에서, 너비를 제공하지 않으면 길이 값을 사용합니다. 이는 하나의 측면만 주면 정사각형을 만들려는 게으른 제작자처럼입니다!

더 재미있는 방법도 있습니다:

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
console.log(greeting);
}

getRandomGreeting('Bob'); // 출력: Hello, Bob! The lucky number is 42. (또는 다른 랜덤 숫자)

이 함수는 커스텀 인사를 제공하지 않을 때마다 랜덤한 행운의 숫자를 생성합니다. 이는 친절한 운명의饼干처럼, 하지만 더 친절합니다!

Undefined 인자 전달

기억해 두어야 할 이상한 행동이 있습니다:

function showMessage(message = 'Default message') {
console.log(message);
}

showMessage(undefined); // 출력: Default message
showMessage(null); // 출력: null

undefined를 전달하는 것은 아무것도 전달하지 않는 것과 같으며, 기본 값을 트리거합니다. 하지만 null은 유효한 값으로 간주되므로 기본 값을 대체합니다. undefined는 "모르겠다, 너 결정해"라고 말하는 반면, null은 "내 선택을 했고, 그 선택은 아무것도 없다"라고 말합니다!

함수 표현식을 기본 매개변수로 사용

함수 표현식을 기본 매개변수로 사용할 수도 있습니다. 이를 확인해 보겠습니다:

function greet(name, getGreeting = () => 'Hello') {
console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // 출력: Hello Alice!
greet('Bob', () => 'Hi there'); // 출력: Hi there Bob!

이를 통해 우리는 기본 매개변수의 값뿐만 아니라 행동도 커스터마이즈할 수 있습니다. 이는 커스터마이즈 가능한 인사 로봇을 가지는 것과 같습니다!

함수 선택 매개변수

이제 선택 매개변수에 대해 이야기해 보겠습니다. JavaScript에서는 모든 매개변수가 기본적으로 선택입니다. 만약 제공하지 않으면 undefined가 됩니다. 하지만 기본 매개변수를 사용하면 대체 값을 제공할 수 있습니다:

function createUser(name, age, country = 'Unknown') {
return {
name: name,
age: age,
country: country
};
}

console.log(createUser('Alice', 30)); // 출력: { name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // 출력: { name: 'Bob', age: 25, country: 'USA' }

이렇게 하면 일부 매개변수(이름과 나이)를 필수로 하고 다른 매개변수(국가)를 선택으로 만들 수 있습니다. 이는 일부 필수 필드에 빨간 별표가 달린 양식을 작성하는 것과 같습니다. 다른 필드는 좋은 것일 뿐입니다!

여기서 다룬 방법을 요약한 표입니다:

방법	설명	예제
기본 매개변수	인자가 전달되지 않을 때 기본 값을 제공	function greet(name = 'Anonymous')
표현식으로 기본值	기본 값을 계산하는 표현식 사용	function calcArea(length, width = length)
Undefined 행동	undefined는 기본 값을 트리거, null은 아님	showMessage(undefined) vs showMessage(null)
함수로 기본值	기본 값을 계산하는 함수 사용	function greet(name, getGreeting = () => 'Hello')
선택 매개변수	일부 매개변수를 필수로, 다른 매개변수를 선택으로	function createUser(name, age, country = 'Unknown')

젊은 제자 여러분, 기본 매개변수는 코드의 안전망입니다. 네가 넘어질 때(또는 인자를 забыл) 너를 잡아주는 기능입니다. 항상 지혜롭게 사용하며, 코드가 너와 함께 하기를 바랍니다!

Credits: Image by storyset