자바스크립트에서는 short circuiting이라는 개념이 있다. &&와 || 연산자에서 적용되는 개념인데, 불필요한 연산을 건너뛰어준다. 무슨말인지는 아래의 코드를 보면서 이해해보자.
|| (or) ,The Nullish Coalescing Operator (??)
//use ANY data type, return ANY data type, short-circuiting
console.log(3 || 'Lingling')//3
//if the first value is truthy value,
//it will immidately return the first value
console.log(''|| 'Lingling')//lingling
console.log(true|| 0)//true
console.log(undefined|| null)//null
console.log(undefined || 0 || '' || 'hello'||null)//hello
//first truthy vlaueor에 해당하는 ||를 사용할 때, 첫번째 벨류가 truthy한 벨류이면 바로 그 벨류를 리턴한다. 첫번째 벨류가 truthy가 아닐때는 다음으로 넘어가서 제일 먼저 truthy한 값이 리턴된다. 그렇기 때문에 제일 마지막 console.log에서 hello가 출력되는 것이다. 실제 코드에서 어떤식으로 쓰이는지 아래의 예시를 보자
const guests1 = restaurant.numGuests? restaurant.numGuests : 10;
console.log(guests1)
const guests2 = restaurant.numGuests || 10
console.log(guests2)
//if the numGuests is 0, the result is 10 so we need to fix it첫번째 코드에서 삼항연산자를 사용해서 restaurant.numGuests가 있으면 restaurant.numGuests의 값이 나오고 아니면 10이 나오게 했다. 이걸 || 연산자로 더 간단하게 표현할 수 있다. restaurant.numGuests가 truthy 벨류면 restaurant.numGuests값이 나올것이고 아니면 10이 나오기 때문이다. 따라서 같은 로직의 코드지만 더 간결하게 작성할 수 있다.
그런데 여기서 restaurant.numGuests = 0;이라고 해보자. 여기서 0이라는 레스토랑 게스트 숫자가 없기 때문에 우리가 0으로 적은 것이다. 하지만 0은 falsy 값이기 때문에 guests2의 값은 0이 아닌 10이 된다. 로직 오류가 생기는 것이다. 이때, 이 오류를 없애는 방법은 바로 Nullish Coalescing Operator (??)를 사용하는 것이다.
//Nullish: null and undefined (not 0 or '')
const guestCorrect = restaurant.numGuests ?? 10;
console.log('??>>>>',guestCorrect)??는 값이 null이거나 undefined일 때만 오른쪽 값을 반환하기 때문에, 0은 그대로 사용된다. 따라서 여기서는 로직에 맞게 0을 반환하게 된다.
&&(and)
console.log(0 && 'Lingling') //0
console.log(7 && 'Lingling') //Lingling
//if the first value is truthy then we get the last one.
//if the first value is falsy then we get the first one.
console.log('hello' && 23 && null && 'Lingling')//null다음으로 &&을 보면 이건 ||와 다르게 제일 먼저 falsy인 값이 리턴된다. 따라서 마지막 코드에서 제일 먼저 falsy값인 null이 나오게 된다.
실제 코드에서 사용하는 예시를 보자.
if(restaurant.orderPizza){
restaurant.orderPizza('mushrooms','spinach')
}
restaurant.orderPizza &&
restaurant.orderPizza('mushrooms','spinach')위의 코드에서는 if문으로 restaurant.orderPizza가 존재할 때만 실행되게 했는데 이 코드를 간단하게 &&을 사용하여 표현할 수 있다. &&는 앞 value가 true이면 뒤의 값이 나오기 때문이다.따라서 둘은 같은 로직이다.
15개의 댓글
Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!THANKS!!!!!! More details
This is exactly for that reason fabulous and additionally extremely creative. I simply absolutely love all the different shades and additionally anyone can get the software on the deliver would be happy. 바카라사이트 꽁머니
Nikmati permainan slot online terbaik dan taruhan bola seru di Agencuan. Platform terpercaya ini memberikan pengalaman judi yang mudah diakses dan peluang kemenangan menguntungkan untuk pemain di seluruh Indonesia. situs bola online
Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. agenolx
You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. unblocked-76.io
Very useful post. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. Really its great article. Keep it up. slot gacor
I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work... alexistogel
I recently found many useful information in your website especially this blog page. Among the lots of comments on your articles. Thanks for sharing. Affordable VHS digitization Australia
Really special blog post, Thanks for your time designed for writing It education. Outstandingly drafted guide, if only every webmasters marketed the exact same a better standard of subject matter whilst you, cyberspace was obviously a better set. Satisfy continue the good work! biurko z regulacją wysokosci
Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. Mix SEO Backlinks
You have a good point here!I totally agree with what you have said!!Thanks for sharing your views...hope more people will read this article!!! online casino Malaysia
No doubt this is an excellent post I got a lot of knowledge after reading good luck. Theme of blog is excellent there is almost everything to read, Brilliant post. pokój dziecięcy z fototapetą
Keep up to date the nice deliver the results, I actually learn very few discussions during this webpage plus There's no doubt that that your chosen website site is definitely serious helpful and has now became encircles with brilliant information and facts. bandar slot