Javascript 가끔 헷갈리는 부분 정리

평소에 잘 사용하지 않던 문법이었는데, 가끔 헷갈려서 다시 정리 해봅니다.

---

?

• 변수명의 우측에 붙여서 사용하고, 해당 변수가 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 ("")

---

헷갈리지 말자!!