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 ("")

헷갈리지 말자!!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

image.png

[by @happyberrysboy] Javascript 가끔 헷갈리는 부분 정리
https://www.steemit.com/@kr-dev.cu0/happyberrysboy-posting-2022-06-13-15-07

@kr-dev.cu0님이 당신을 멘션하였습니다.
멘션을 받고 싶거나 받지 않으시려면 댓글을 남겨주세요. 빠른 시일내에 반영하도록 하겠습니다.

This post has been upvoted by @italygame witness curation trail


If you like our work and want to support us, please consider to approve our witness




CLICK HERE 👇

Come and visit Italy Community



Upvoted! Thank you for supporting witness @jswit.
default.jpg

Hi @happyberrysboy,
my name is @ilnegro and I voted your post using steem-fanbase.com.

Come and visit Italy Community

정리 감사 🙏🏻

어짜피 다 아능거 아님!? ㅎㅎㅎㅎ
생각보다 JS 기능들이 많구먼..!! ㅎㅎ

자주 안쓰면 까먹어서 또 봐야지 기억나더라. 햅삐가 정리한 걸 보면서 다시 복습해야지 ㅋㅋ

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 17.75%, steem power : 1986012.75, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 47.593 KRWP [65058218 - c43cf72667984877b25989289898464fd8ab955d]