[ES6] 매개변수 (기본값, 객체, 해체할당, 나머지 매개변수 ...)

안녕하세요!
이 번 포스팅에서는 매개변수에대해 공부해보겠습니다.
알고있는 내용이더라도 코딩할 때 습관처럼 사용하지 않으면 의미가 반감되는 것 같습니다.

• 매개변수에 기본값을 사용해 가독성 높히기

• 매개변수로 객체 사용하기 & 해체할당
• 나머지 매개변수 사용하기

1. 기본값

const test = (name,num,message) => {
    return `${name}님 ${num}번 째 방문, ${message}`
}
console.log(test())

인사메세지를 리턴 하는 함수를 작성해봤습니다.

• num이 0일 때도, 0번 째 방문이라는 메세지를 출력하고 싶습니다.
• 인수가 undefined일 경우 ERROR메세지를 출력합니다.

const test = (name,num,message) => {
    if(!name || !num || !message){
        return 'ERROR'
    }
    return `${name}님 ${num}일 째 방문, ${message}`
}
console.log(test('jack',0,'hello'))

// result
ERROR

이렇게 작성하게되면 인수에 0이 들어가면 false로 인식해 ERROR을 리턴합니다.
그리고, 함수 내에서 작성하게되면 다소 복잡하기도 합니다.

그럼,
매개변수 기본값을 사용해 보겠습니다

const greeting = (name = 'anonymous',num='0', message='hello') => {
    return `${name}님 ${num}일 째 방문, ${message}`
}
console.log(greeting('jack',0,'hello'))
// result
jack님 0일 째 방문, hello

주의할 점은 매개변수가 null일 경우에는 기본값을 사용하지 않습니다.

// result
jack님 null일 째 방문, hello

주의해야 할 점이 있긴 하지만, 기본값을 사용함으로서 명시적으로 매개변수가 어떤 자료형을 가지는지 어떤형태를 띄는지 알 수 있습니다.
그리고 기본값이 작성되어있으므로 기본값을 사용하고 싶을 땐 undefined를 넘겨주면 됩니다.

---

2. 객체를 매개변수로 사용

이번에는 매개변수에 객체를 이용해보겠습니다.

const laptop = {
    model : 'ab801z',
    manufacturer : 'samsung',
    price : '1000000',
    OS : 'window10',
    weight : '1.5'
    //...
    //...
}

laptop 객체에는 노트북 정보를 담은 많은 속성들이 있습니다.

• 이 객체를 매개변수로 넘겨주고, 해체할당을 해보겠습니다.
• 해체할당할 때의 주의점은 변수명을 key와 동일하게 작성해야 한다는 것입니다.*
  객체를 인수로 받아 모델명을 리턴하는 함수입니다.

    function someFunc (product) {
       const {model} = product
       return model
    }
    console.log(someFunc(laptop))
    // result
    ab801z

---

• 해체할당을 하는 동시에 기본값을 사용할 수도 있습니다.
  기본값을 작성하면, 해당 객체에 키가 존재하지 않을 때 undefined 대신 기본값을 사용합니다

function someFunc (product) {
    const {model = 'not found'} = product
    return model
}
const dog = {}
console.log(someFunc(dog))

// result
not found

---

• 해체할당에 나머지 매개변수를 이용해보겠습니다.

    function someFunc (product) {
      const {model = 'not found', ...restParam} = product
      return {
          model,
          ...restParam
      }
    }
    console.log(someFunc(laptop))
    
// result  
{  
model: 'ab801z',  
manufacturer: 'samsung',  
price: '1000000',  
OS: 'window10',  
weight: '1.5'  
}

---

• key명을 모르는경우 나머지 순회하기

function someFunc (product) {
    const {model ,...rest} = product
    const additional = Object.keys(rest).map(item=>`${rest[item]}`)
    return [model,...additional]
}
console.log(someFunc(laptop))
// result
[ 'ab801z', 'samsung', '1000000', 'window10', '1.5' ]

---

• key명과 다른 변수명을 사용하고 싶은 경우

function someFunc (product) {
    const {model : productCode} = product
    return {
        productCode
    }
}
console.log(someFunc(laptop))

// result
{ productCode: 'ab801z' }

---

• 해체할당에 배열을 사용하는 경우
• 배열을 해체할당하는 경우 변수명에 관계없이 순서에따라 할당됩니다.
  

    const phoneNum = ['010','0000','1111']
    function getPhoneNum (phoneNum) {
       const [first,second, third] = phoneNum
       return `${first}-${second}-${third}`
    }
    console.log(getPhoneNum(phoneNum))
    // result
    010-0000-1111

---

• 해체할당에 배열을 사용할 때, 나머지 매개변수

    const phoneNum = ['010','0000','1111', 'KT', 'Galaxy']
    function getPhoneNum (phoneNum) {
      const [first,second,third,...rest] = phoneNum
      return `${first}-${second}-${third},${rest}`
    }
    console.log(getPhoneNum(phoneNum))
    // result
    010-0000-1111,KT,Galaxy

• Map은 해체할당을 사용할 수 없습니다.

매개변수에대해 한 번 정리해보았습니다.
유용하지만 습관적으로 사용하지않으면 무용지물인 것 같습니다.
익숙해질 때 까지 사용하는 수 밖에 없는 것 같아요!
감사합니다!