널 병합 연산자 (??)
왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자
| | boolean 논리 연산자 때문에, 왼쪽 피연산자는 boolean으로 강제로 변환되었고 falsy 한 값(0, -0, '', NaN, null, undefined)은 반환되지 않았다. 이 동작은 만약 0, '' or NaN을 유효한 값으로 생각한 경우 예기치 않는 결과를 초래.
널 병합 연산자는 첫 번째 연산자가 null 또는 undefined로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다
<script>
function check(a){
return foo = a ?? 'default string';
}
console.log(check('hello')) // 'hello'
console.log(check(undefined)) // 'default string'
console.log(check(null)) // 'default string'
console.log(check(0)) // 0
console.log(check("")) // ''
function check(a){
return foo = a || 'default string';
}
console.log(check('hello')) // 'hello'
console.log(check(undefined)) // 'default string'
console.log(check(null)) // 'default string'
console.log(check(0)) // 'default string'
console.log(check("")) // 'default string'
</script>
값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화
undefined가 아닌 ' '(빈문자열), null, false는 여전히 ' ', null, false 값을 그대로 사용.
function multiply(a, b = 1) {
return a*b
}
>
multiply(5, 2) // 10
multiply(5) // 5
multiply(5, undefined) // 5
user?.address?.street
let user = {}; // 주소 정보가 없는 사용자 user?.address?.street // undefined, 에러가 발생하지 않습니다.
const anna = {
name: 'jul',
age: 20,
job: {
}
}
BAD
function display(person){ if(person.job && person.job.title){ console.log(person.job.title); } } display(anna);
GOOD
<script> function display(person){ if(person.job?.title){ console.log(person.job.title); } } function display(person){ const title = person.ddd?.title ?? 'nope' console.log(title); // 'nope' } </script>
person.job이 있다면 person.job.title 여부 확인
person.job이 없다면 false를 반환