모던 자바스크립트 핵심 가이드 03 함수 기본값 인수

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습

* 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것

* 문제될 경우 삭제할 것 

 

○ 함수 기본값 인수 이전 문제

- '기본값이 인수 목록의 끝이 아닌 시작 부분에 있도록 하려면'의 해결법

 

function world(city, country, continent) {
  if(typeof country === 'undefined') {
    country = 'Korea'; //기본값으로 대체
  }
  if(typeof continent === 'undefined') {
    continent = 'Asia'; //기본값으로 대체
  }
  console.log(continent, country, city)
}

world("seoul"); //Aisa Korea seoul
 
world("tokyo", "Japan"); //Asia Japan tokyo

 

○ 함수 기본값 인수

 

function gamePrice(employee, user=100, server= 200) {
  //user나 server에 값 할당하지 않으면 기본값으로 100, 200만 쓰임
  return employee + user + server;
}

console.log(gamePrice(300)); //300 + 100 + 200 = 600

//문제점
//server에 500 넣고 싶음(총합 900 원함)
console.log(gamePrice(300, 500));  
//500이 server가 아닌 user로 값이 들어감
//300 + 500 + 200 = 1000

//해결책 1 : user부분을 undefined
console.log(gamePrice(300, undefined, 500)); //300 + 100 + 500 = 900

 

해결책 2(디스트럭처링) 설명

- 함수의 인수를 객체로 만듦 

- 함수를 호출하면 매개변수가 주어진 키에 맞춰 입력됨 -> 매개변수 순서에 대해 걱정할 필요 없음

 

//인수 객체를 빈 객체로 기본 설정하지 않고(즉 = {}로 만든 것) 선언함
function gamePrice({employee=0, user=100, server=200,} ={}) {
  //user나 server에 값 할당하지 않으면 기본값으로 100, 200만 쓰임
  return employee + user + server;
}

console.log(gamePrice(300)); //300 + 100 + 200 = 600

//문제점
//server에 500 넣고 싶음(총합 900 원함)
console.log(gamePrice(300, 500));  
//500이 server가 아닌 user로 값이 들어감
//300 + 500 + 200 = 1000

//해결책 2 : 디스트럭처링(destructuring)
const bill = gamePrice({user: 100, server: 500})

console.log(bill); // 100 + 500(기본값인 100 + 200 = 300이 아님)

문제

function university(classRoom, stuendts=10, professor=1) {
  return total = classRoom + students + professor;
}

//문제 classRoom = 50, stuendts = 20, professor = 5 지정, 총합 75 원함

//오류 발생
console.log(university(50, 20, 5));

 

해결방법

//해결방법
function university({classRoom, students=10, professor=1}={}) {
  return total = classRoom + students + professor;
}

totalPeople = university({classRoom:50, students: 20, professor: 5})

console.log(totalPeople); //75