기본값 매개변수(default parameter)는 (item, qty = 1)처럼 매개변수 이름 뒤에 =와 값을 적어 둔 것입니다. 부를 때 그 인자를 빼서 매개변수가 undefined가 될 때만, 매개변수는 undefined 대신 그 기본값에 붙습니다.
매개변수와 인자에서 인자를 하나만 넘긴 order('라테')는 qty가 undefined에 붙어 '라테 undefined잔'을 만들었습니다. 주문은 대부분 한 잔이니 qty에 기본값 1을 두면, 빠진 자리를 그 값이 채웁니다.
이 레슨에서는 기본값이 언제 쓰이고 언제 쓰이지 않는지 봅니다.
1인자가 없으면 기본값에 붙는다
그림의 두 장면 코드를 한 파일에 모았습니다.
function order(item, qty = 1) {
console.log(item, `${qty}잔`);
}
order('커피');
order('라테', 3);커피 1잔
라테 3잔1번 줄의 qty = 1이 기본값입니다. 매개변수 이름 뒤에 = 기호와 값을 적습니다.
5번 줄은 인자가 하나라 새 칸에서 item만 '커피'에 붙고, 짝지을 인자가 없는 qty는 undefined 대신 기본값 1에 붙습니다(규칙 5).
6번 줄은 qty가 넘긴 3에 붙습니다. 인자를 넘기면 기본값은 쓰이지 않습니다. 기본값이 없는 item은 인자가 빠지면 그대로 undefined에 붙습니다.
2기본값은 undefined일 때만 쓰인다
자바스크립트는 매개변수가 undefined인지만 보고 기본값을 씁니다. 그래서 undefined를 직접 넘겨도 기본값이 쓰입니다. 그러면 '값이 없다'는 뜻의 null을 넘기면 어떻게 될까요? 무엇이 찍힐지 정한 뒤 펼쳐 보세요.
function order(item, qty = 1) {
console.log(item, `${qty}잔`);
}
order('녹차', undefined);
order('쿠키', null);실행 결과 보기
녹차 1잔
쿠키 null잔예상과 다르면 그곳이 배울 곳입니다.
5번 줄은 qty가 undefined라 기본값 1을 씁니다. 6번 줄의 null은 undefined가 아니라서, qty는 기본값 대신 넘긴 null에 붙고 'null잔'이 찍힙니다.
'쿠키 1잔'을 예상했다면, 값이 없는 것은 모두 기본값으로 바뀐다고 본 것입니다. 기본값이 보는 것은 undefined 하나입니다.
예제
잔 수에 기본값 두기
잔 수에 기본값 1을 둔 계산 함수입니다.
function pay(won, qty = 1) {
return won * qty;
}
console.log(pay(4000));
console.log(pay(4000, 3));
console.log(pay(4000, 0));4000
12000
05번 줄은 qty가 기본값 1에 붙어 4000입니다. 7번 줄의 0은 undefined가 아니라서 qty가 0에 붙고, 0잔 값 0을 돌려줍니다. 기본값 매개변수는 0을 그대로 둡니다.
자주 틀리는 곳
틀린 생각: null을 넘겨도 기본값이 쓰인다.
null도 '값이 없다'는 뜻이니 기본값이 채울 것 같습니다. 2절 맞혀 보기의 order('쿠키', null)은 'null잔'을 찍었습니다.
맞는 규칙: 기본값은 매개변수가 undefined일 때만 쓰입니다. null·0·''을 넘기면 그 값에 그대로 붙습니다.
틀린 생각: 기본값은 qty = qty || 1;로 써도 같다.
옛 코드에서는 기본값을 || 연산자로 만들곤 했습니다. 참 같은 값과 ??에서 본 것처럼 || 연산자는 0도 거짓 같은 값으로 쳐서 지웁니다.
function pay(won, qty) {
qty = qty || 1;
return won * qty;
}
console.log(pay(4000, 0));40000잔을 넘겼는데 2번 줄이 qty를 1에 다시 붙여 4000이 찍혔습니다. 예제의 qty = 1 기본값은 같은 부르기에 0을 돌려줍니다.
맞는 규칙: || 연산자는 0·''도 지워 기본값으로 바꿉니다. 빠진 인자만 채우려면 매개변수 자리에 qty = 1처럼 기본값을 둡니다.
틀린 생각: 기본값은 함수를 만들 때 한 번 정해진다.
1번 줄에 적어 두니 그 자리에서 값이 정해질 것 같습니다. 기본값 자리의 식은 부를 때마다 그때 계산됩니다. 기본값을 qty = base처럼 이름으로 적으면, 함수를 만든 뒤 base를 2에 다시 붙이고 불렀을 때 2잔이 됩니다.
맞는 규칙: 기본값은 인자가 빠진 채 부를 때마다 새로 계산되고, 그 순간 이름이 붙어 있는 값을 씁니다.
확인 문제
1. 1절 코드에서 qty의 기본값을 2로 바꿨습니다. 무엇이 찍히는지 두 줄을 글자 그대로 쓰세요.
function order(item, qty = 2) {
console.log(item, `${qty}잔`);
}
order('커피');
order('라테', 3);힌트
5번 줄과 6번 줄에서 qty와 짝지을 인자가 있는지 따로 봅니다.
정답
커피 2잔
라테 3잔5번 줄은 qty와 짝지을 인자가 없어 기본값 2에 붙고, 6번 줄은 넘긴 3에 붙습니다.
흔한 오답은 둘째 줄을 라테 2잔으로 쓰는 것입니다. 기본값이 넘긴 인자보다 앞선다고 본 것입니다. 기본값은 인자가 빠졌을 때만 쓰입니다.
2. 빈칸을 채워 pay(4000)은 4000을, pay(4000, 2)는 8000을 돌려주게 하세요.
function pay(won, ____) {
return won * qty;
}
console.log(pay(4000));
console.log(pay(4000, 2));힌트
2번 줄이 쓰는 qty가 어느 값에 붙는지, 5번 줄과 6번 줄의 부르기를 따로 따라가 봅니다.
정답
qty = 1입니다.
5번 줄은 qty와 짝지을 인자가 없어 기본값 1에 붙고, 6번 줄은 넘긴 2에 붙습니다.
흔한 오답은 기본값 없이 qty만 쓰는 것입니다. 그러면 5번 줄에서 qty가 undefined에 붙어 4000 * undefined가 NaN이 되고, 오류 없이 NaN과 8000이 찍힙니다.
3. 장보기 목록을 찍는 함수입니다. 무엇이 찍히는지 네 줄을 글자 그대로 쓰세요.
function buy(item, n = 1) {
console.log(item, `${n}개`);
}
buy('사과', 3);
buy('우유', 0);
buy('달걀', null);
buy('빵');힌트
줄마다 n이 undefined인지 먼저 봅니다. 기본값이 쓰이는 것은 그때뿐입니다.
정답
사과 3개
우유 0개
달걀 null개
빵 1개6번 줄의 0과 7번 줄의 null은 undefined가 아니라서 n이 그 값에 그대로 붙습니다. 인자가 빠진 8번 줄만 기본값 1을 씁니다.
흔한 오답은 둘째 줄을 우유 1개로, 셋째 줄을 달걀 1개로 쓰는 것입니다. 거짓 같은 값이나 '없음'도 기본값으로 바뀐다고 본 것입니다. 기본값은 undefined일 때만 쓰입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
1절 코드(여섯 줄)를 main.js에 저장해 돌립니다. 그다음 6번 줄 order('라테', 3);의 3을 null로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.