default parameter
const f = function (x, y, z) {
x = x ? x : 4
y = y || 5
if (!z) {
z = 6
}
console.log(x, y, z)
}
f(1)
f(0, null)
const f = function (x, y, z) {
x = x !== undefined ? x : 3
y = typeof x !== "undefined" ? y : 4
console.log(x, y)
}
f(0, null)
위 코드를 해석하면
x에 undefined가 아니면 x를 할당하고 x가 undefined라면은 3을 할당하라,
y는 x가 문자열 undefined가 아니면 y가 undefined라면은 4를 할당하라.
const f = function (x, y, z) {
x = x ? x : 4
y = y || 5
if (!z) {
z = 6
}
console.log(x, y, z)
}
f(1)
f(0, null)
이렇게 undefined일때만 기본 값을 할당하고 싶은데
일일이 하기에는 개발자들에게 많은 시간 할애가 필요하다. 따라서
const f = function ( x = 4, y = 5, z = 6) {
console.log(x, y, z)
}
f(0,null)
이렇게 하면
z에 값을 할당하지 않은 undefined 일때는 앞서 선언했던 z = 6이 기본값으로 들어가게 된다.
const f = function (a = 1, b = 2, c = 3, d = 4, e = 5, f = 6) {
console.log(a, b, c, d, e, f)
}
f(7, 0, "", false, null)
이상태라면 7, 0, "", false, null은 정상적으로 나올테고 undefined된 f 값은 6이 기본값으로 나오게 될 것이다.
상세
undefined 혹은 누락된 파라미터에 대해서만default parameter가 동작한다.
식?
const f = function (x = 1, y = 3 + x) {
console.log(x, y)
}
f()
let 선언과 동일한 효과
function a (a = 1, b = 2, c = 3){
let _a = a !== undefined ? a : 1;
let _b = 2;
let _c = 3;
}
a(1,2,3)
괄호안은 결국 let과 동일하게 동작 할 것이다.
TDZ
function a (a = 1, b = a + 1, c = 3){
console.log(a, b, c);
}
a(1, undefined, 3)
function a (a = 1, b = c + 1, c = 3){
console.log(a, b, c);
}
a(1, undefined, 3)
따라서 b보다 먼저 할당된 값을 가지고 있는 a에 대해서 식을 만들 수가 있다.
반면 b보다 나중에 할당된 값을 가지고 있는 c에 대해서는 참조할때에 tdz에 걸리게 된다. 따라서 error가 발생하게 된다.
const notValid = function() {
console.error('getDefault Called.')
return 10
}
const sum = function(x = notValid(), y = notValid()){
console.log(x + y)
}
sum(1,2) //3
sum(1) //11
y값은 undefined가 될테니 y의 기본값 notValid 함수를 실행 함에 따라서 10이 반환 될테고
콘솔값은 결국 11이 나오게 될 것이다.
기본값으로 할당하고자 하는 값이 변수일 경우 주의사항
let a = 10
let b = 20
function f (aa = a, b = b){
console.log(aa,b)
}
f(1,2)
f(undefined,2)
f(1)
f()
let a= 10;을 선언하고 할당하는데
순서를 생각해보면
let a; 가 첫번째
= 이 있으면 오른쪽 부터 해석
즉 10 이 있다면은
10을 a에 넣어라라는 뜻이 된다.
let a;
let a = a; // reference error
따라서 변수명을 지을때는 같은 변수명을 지어서는 안된다.
예를 들어 위 코드에서 b = b를 뜻한다.
'JS' 카테고리의 다른 글
드래그 이벤트 - 자바스크립트 (0) | 2023.04.29 |
---|---|
제너레이터 함수 (0) | 2022.02.06 |
ES6 - template literal (0) | 2020.07.21 |
ES6 - Block scope (0) | 2020.06.21 |
호이스팅 (0) | 2020.06.14 |