ES6(ECMAScript 2015) – 기본 매개변수 – 0 – 함수 인자의 기본값 설정
소제목: ES6에서 도입된 기본 매개변수 설정
ES6(ECMAScript 2015)에서는 함수의 매개변수에 기본값을 설정하는 기능이 도입되었습니다. 이 기능을 통해 함수를 호출할 때 인자를 전달하지 않거나 undefined로 전달할 경우, 매개변수에 미리 설정한 기본값이 사용됩니다. 이는 매개변수의 초기값을 직접 설정할 필요 없이 더 간편하게 함수를 작성할 수 있게 해줍니다.
예시를 통한 설명
function greet(name = "친구") {
console.log(`안녕하세요, ${name}님!`);
}
greet("영희"); // 출력: 안녕하세요, 영희님!
greet(); // 출력: 안녕하세요, 친구님!위의 예시에서 greet 함수는 name이라는 매개변수를 가지고 있습니다. 매개변수에는 기본값으로 "친구"를 설정해 두었습니다. 첫 번째 호출에서는 인자로 "영희"를 전달하였으므로 "안녕하세요, 영희님!"이 출력되었습니다. 두 번째 호출에서는 인자를 전달하지 않았기 때문에 기본값인 "친구"가 사용되어 "안녕하세요, 친구님!"이 출력되었습니다.
비유적인 표현을 통한 쉬운 이해
매개변수의 기본값 설정은 마치 파티 초대장을 준비할 때의 상황과 비슷합니다. 초대장을 전달받는 사람들에게는 이름을 적어달라고 할 수도 있지만, 이미 알고 있는 사람들에게는 별도의 요청 없이도 초대장을 준비해 놓을 수 있습니다. 함수의 기본 매개변수 설정도 마찬가지로, 인자를 전달받는 경우 해당 값을 사용하고, 인자를 전달받지 않거나 undefined를 전달받는 경우 미리 설정한 기본값을 사용하는 것입니다.
ES6에서의 기본 매개변수 설정의 다양한 활용
ES6의 기본 매개변수 설정은 유연하게 활용될 수 있습니다. 몇 가지 다양한 예시를 살펴보겠습니다.
1. 숫자 계산 함수에서 기본값 활용하기
function calculate(num1, operator = "+", num2 = 0) {
switch (operator) {
case "+":
return num1 + num2;
case "-":
return num1 - num2;
case "*":
return num1 * num2;
case "/":
return num1 / num2;
default:
return NaN;
}
}
console.log(calculate(5, "*", 3)); // 출력: 15
console.log(calculate(10, "-")); // 출력: 10
console.log(calculate(8)); // 출력: 8위의 예시에서 calculate 함수는 숫자 2개와 연산자를 받아서 계산을 수행합니다. 연산자와 두 번째 숫자는 기본값으로 +와 0을 각각 설정해 두었습니다. 첫 번째 호출에서는 인자로 5, *, 3을 전달하여 곱셈 연산을 수행하고 결과인 15가 출력됩니다. 두 번째 호출에서는 인자로 10과 -만 전달하였기 때문에 뺄셈 연산을 수행하고 결과인 10이 출력됩니다. 세 번째 호출에서는 인자로 8만 전달하였고, 나머지 인자에는 기본값이 사용되어 8이 출력됩니다.
2. 배열 요소를 출력하는 함수에서 기본값 활용하기
function printArray(array = []) {
if (array.length === 0) {
console.log("배열이 비어있습니다.");
} else {
console.log("배열 요소:");
array.forEach((item) => console.log(item));
}
}
printArray([1, 2, 3]); // 출력: 배열 요소: 1, 2, 3
printArray(); // 출력: 배열이 비어있습니다.위의 예시에서 printArray 함수는 배열을 받아서 요소를 출력합니다. 매개변수 array에는 기본값으로 빈 배열 []을 설정해 두었습니다. 첫 번째 호출에서는 [1, 2, 3]이라는 배열을 인자로 전달하여 배열 요소를 출력하고, 결과인 배열 요소: 1, 2, 3이 출력됩니다. 두 번째 호출에서는 인자를 전달하지 않았기 때문에 기본값인 빈 배열이 사용되어 "배열이 비어있습니다."가 출력됩니다.
주의해야 할 점
- 기본 매개변수 설정은 함수의 맨 마지막에 위치해야 합니다. 매개변수 기본값 이후에 일반적인 매개변수를 사용하는 것은 허용되지 않습니다.
- 기본 매개변수는 매개변수 선언 시에 한 번만 설정됩니다. 함수가 호출될 때마다 기본값이 다시 설정되지는 않습니다.
- 기본 매개변수는 인자로
undefined를 전달받을 때에만 동작합니다.null이나 빈 문자열 같은 falsy한 값이 전달되면 해당 값이 매개변수에 할당됩니다. - 함수 호출 시에 인자를 전달하면 전달한 값이 매개변수에 할당되고, 전달하지 않으면 기본값이 사용됩니다. 기본값이 설정된 매개변수 이후의 매개변수에는 인자를 전달하지 않으면
undefined가 할당됩니다.
마무리
ES6(ECMAScript 2015)에서 도입된 기본 매개변수 설정은 함수 작성을 더욱 간편하고 유연하게 만들어 줍니다. 함수를 호출할 때 인자를 전달하지 않거나 undefined를 전달하는 경우, 미리 설정한 기본값이 매개변수에 할당되어 함수가 정상적으로 동작합니다. 기본 매개변수 설정을 사용하면 초기값을 직접 설정하는 번거로움을 피하고, 코드를 간결하게 유지할 수 있습니다.
하지만 기본 매개변수 설정을 사용할 때 주의해야 할 점도 있습니다. 매개변수의 위치, 기본값이 한 번만 설정되는 것, 인자 전달 시의 동작 등을 명확히 이해하고 사용해야 합니다. 이를 유념하면서 ES6의 기본 매개변수 설정을 활용하면 더욱 효과적이고 편리한 코드를 작성할 수 있습니다. Happy coding!