[JavaScript] 매개변수 기본값(Default Parameters)을 정확하게 사용하는법과 생성하는법

Default Parameters MDN 정의

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

 

Defaluit Parameters 를 사용해야 하는 이유

우리는 계획을 세우고 프로젝트를 시작하다보면 상황은 무수하게 많이 달라진다. 고객의 요청사항이 달라질 수도 있고 다양한 이유가 생기기 때문이다. 특히, 함수 매개변수의 경우가 무수하게 많이 변하는 경우가 생긴다. 처음 함수를 작성할 때는 몇 가지 매개변수로 충분하다. 그렇지만 코드가 늘어나고 예외적인 경우가 늘어나기 시작한다면, 맨 처음의 매개변수로는 문제를 다 처리할 수 없게 된다.

 

자바스크립트의 함수의 특성상 모든 매개변수를 전달할 필요가 없다. 매개변수를 선택적으로 적용할 수 있기 때문이다. 매개변수를 누락하면 값은 undefined가 할당된다.

 

밑에 코드를 확인해보면 알 수 있다. 매개변수에 값이 없으니 undefined가 할당이 되고 NaN이 출력되는 것을 확인해볼 수 있다.

function convertWeight(weight) {
    return weight / 2.2;
}
 
console.log('convertWeight() : ', convertWeight())
// NaN
console.log('convertWeight() : ', convertWeight(10))
// 4.545454545454545

 

매개변수 기본값을 사용하지 않고 첫뻔째 방법을 선택해서 함수를 호출을 할 수 있지만, 실수할 가능성은 항상 있다. 자바스크립트 특성상 모든 매개변수를 전달할 필요가 없고, 선택적으로 적용할 수 있다. 다만 누락하면 undefined이기 때문에 밑에 코드처럼 누락의 경우를 예방하기 위해서 작성할 수 있다.

function convertWeight(weight, ounces) {
    const oz = ounces ? ounces / 16 : 0;
    const total = weight ? weight : 0 + oz;
    return total / 2.2;
}
 
console.log('convertWeight : ', convertWeight(6, 6))
// 2.727272727272727
 
console.log('convertWeight : ', convertWeight())
// 0

추가적으로 간단한 예시를 더 봐보자.

function defaultFunction(name, greeting) {
    name = (typeof name === 'undefined') ? 'Student' : name
    greeting = (typeof greeting === 'undefined') ? 'Welcome' : greeting
    
    return `${greeting} ${name}`
}
 
console.log('defaultFunction() : ', defaultFunction());
// Welcome Student
console.log("defaultFunction('JunHyun') : ", defaultFunction('JunHyun'))
// Welcome JunHyun
console.log("defaultFunction('JunHyun', 'Hello') : ", defaultFunction('JunHyun', 'Hello'))
// Hello JunHyun
 
function defaultFunction2(name = 'Student', greeting = 'Welcome') {
    return `${greeting} ${name}`
}
 
console.log('defaultFunction2() : ', defaultFunction2());
// Welcome Student
console.log("defaultFunction2('JunHyun') : ", defaultFunction2('JunHyun'))
// Welcome JunHyun
console.log("defaultFunction2('JunHyun', 'Hello') : ", defaultFunction2('JunHyun', 'Hello'))
// Hello JunHyun

 

또한 배열([])과 객체({})에서도 사용이 가능하다.

function createGridDefault([width = 5, height = 5]) {
    return `Generates a ${width} x ${height} grid`
}
 
console.log("createGridDefault([])) : " , createGridDefault([]))
// Generates a 5 x 5 grid
console.log("createGridDefault([1])) : " , createGridDefault([1]))
// Generates a 1 x 5 grid
console.log("createGridDefault([1,2])) : " , createGridDefault([1,2]))
// Generates a 1 x 2 grid
console.log("createGridDefault([undefined, 3])) : " , createGridDefault([undefined, 3]))
// Generates a 5 x 3 grid
console.log("createGridDefault([null, 4])) : " , createGridDefault([null, 4]))
// Generates a null x 4 grid

 

하지만 []과 {}에서 기본값 할당을 안해주고 함수를 호출한다면, TypeError가 발생한다.

// function createGridDefault([width = 5, height = 5] ) {
//     return `Generates a ${width} x ${height} grid`
// }
 
function createGridDefault([width = 5, height = 5] = []) {
    return `Generates a ${width} x ${height} grid`
}
 
 
// 기존의 방식대로 함수를 호출할때 []을 넣지 않으면 에러가 발생한다.
// 해결하기 위해 파라티머에 = [] 을 할당해주면 해결된다.
console.log("createGridDefault()) : " , createGridDefault())
// 기존 방식 : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
// = [] 추가 방식 : Generates a 5 x 5 grid
 

 

[]과 {}또한 똑같이 기본값 매개변수를 적용할 수 있다. 밑에 코드를 확인해보자.

function createPatbingsu({spoons = 1, toppings = ['adzuki bean']} = {}) {
    const scoopText = spoons === 1 ? 'spoon' : 'spoons'
    return `필요하신 스푼 ${spoons}개를 드렸습니다.. 추가하신 토핑은 ${toppings}입니다.`
}
 
console.log('createPatbingsu() : ', createPatbingsu())
// 필요하신 스푼 1개를 드렸습니다.. 추가하신 토핑은 adzuki bean입니다.

 

 

 

베타존 : 네이버쇼핑 스마트스토어