평소에 잘 사용하지 않던 문법이었는데, 가끔 헷갈려서 다시 정리 해봅니다.
?
- 변수명의 우측에 붙여서 사용하고, 해당 변수가 undefined인 경우 그 변수에 추가 함수를 호출하더라도
undefined를 출력합니다.
??
- 좌측에 값이 없는 경우 우측의 값을 사용하는 문법
- 기존에는 개인적으로
||을 많이 사용하였었는데, 상황에 따라 이 문법에 맞지 않는 경우도 있을 수 있음 || ??의 차이는 '||'의 경우 좌측이 false 값을 가지면 우측의 값을 사용하는 것이고, ??의 경우 좌측이 nullish(null or undefined) 인 경우에만 우측의 값이 사용되는 경우입니다.- 실제로 좌측의 값이 false로 의미 있는 변수의 값을 가지는 경우에는 ||대신 ??을 사용 하는 것이 맞을 것 같습니다.
// ||와 ?? 의 차이
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 111;
console.log(baz);
// expected output: 0
const foo2 = null || 'default string2';
console.log(foo2);
// expected output: "default string"
const baz2 = 0 || 111;
console.log(baz2);
// expected output: 0
&&(&&= 도 사용 가능)
- 연산자로 엮인 모든 변수가 truthy 인 경우 가장 마지막 값을 출력
- 연산자로 엮인 변수들 중 하나라도 falsy하면 가장 먼저 falsy한 값을 출력
var a = 1;
var b = 0;
var aa = 'aa';
var bb = false;
a && b
>> 0
a && aa
>> 'aa'
aa && a
>> 1
b && a
>> 0
b && aa
>> 0
b && bb
>> 0
bb && b
>> false
??=
- 좌측에 값이 nullish(null or undefined) 할 경우에만 값을 할당 해주는 기능
const a = { duration: 50 };
a.duration ??= 10;
console.log(a.duration);
// expected output: 50
a.speed ??= 25;
console.log(a.speed);
// expected output: 25
let b;
b ??= 100;
console.log(b);
let c = 5;
c ??= 555;
console.log(c);
Truthy(true 값을 배출하는 경우들)
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
Falsy(false 값을 배출하는 경우들)
if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")
헷갈리지 말자!!