DEV Community

Unexpected Moments of JavaScript That Will Challenge Your Understanding of the Language

Code of Relevancy on March 18, 2023

As one of the most popular programming languages in the world, JavaScript is widely used for building dynamic and interactive websites, web applica...

Read full post

Tommy • Mar 19 '23 • Edited

Good stuff. Another common gotcha:

for (var i = 0; i < 3; ++i) {
  setTimeout(() => console.log(i), 1000); // returns 3 three times
}

for (let i = 0; i < 3; ++i) {
  setTimeout(() => console.log(i), 1000); // returns 0 1 2
}

This is because var creates a single binding at the function scope, so after a one-second timeout the loop has already run its course, hence you get 3 three times. By using let you bind the variable at the block scope (loop), so it returns the values you expected since i refers to the value at that loop iteration.

Victor Vincent • Mar 20 '23

If someone wants to overcome this while using var, not many people know that setTimeout can accept params to be passed to the callback, great alternative to bind.

for (var i = 0; i < 3; ++i) {
  setTimeout(a => console.log(a), 1000, i);
}

Tommy • Mar 20 '23

Good tip. I used this pattern a lot before ES6.

Code of Relevancy • Mar 21 '23

Good fix

Code of Relevancy • Mar 20 '23

I gave your suggestion a space, here it's..

Thank you again.. Happy reading!!!

Scofield Idehen • Mar 20 '23

this is insightful.

Code of Relevancy • Mar 20 '23

Yes

Code of Relevancy • Mar 20 '23

Yes perfect example. I will add it to the article..
Personally, I don’t use ‘var’. I always use ‘let’ and ‘const’ to avoid these kinds of bugs..
Thank you for your valuable feedback

Joydeep Bhowmik • Mar 18 '23

This was really informative and solved one of most annoying glitch of my small project. Thanks

Code of Relevancy • Mar 18 '23

You're welcome my friend. Glad you found it helpful and thank you for your feedback..

Aaron Reese • Mar 21 '23

The moral of this article is
1) don't try to be clever. Just write clean, clear expressive code.
2) Using Typescript will avoid the majority of the accidental type coercion errors.
3) please don't rely on these coercion oddities for logic gates. Be explicit.

Code of Relevancy • Mar 21 '23

I appreciate your input on this article

Michael J. Ryan • Mar 30 '23

Interesting... But most of this begins to make more sense if you understand how loose typing works through coercion and the seven falsy values.

I learned this I've 25 years ago.

It also helps when using JS to process potentially unreliable input. JS is also pretty nice for ETL work.

Michael J. Ryan • Mar 31 '23

One thing I've found cool is that ~~ double bitwise not will coerce any value into a number in the 32-bit signed integer range. Not number or easily interpreted string values will be 0.

Code of Relevancy • Mar 30 '23

Yes it's more important to understand the loosely type languages..

Thank you sir for your valuable feedback..

Raku Zeta • Apr 9 '23 • Edited

5️⃣ is terribly wrong and your explanation just contradicts to itself:

JS converts the string "1" to the boolean value true and string "0" to false because any non empty string is considered truthy and on other side falsy.

Is "0" even non-empty?
Does true == "2"?
Does if ("0") { console.log("hi"); } execute?

Read the doc: developer.mozilla.org/en-US/docs/W...

Code of Relevancy • Apr 10 '23 • Edited

I will update the explanation. Thanks

Raphael • Mar 22 '23

I've always loved these little tricks (although they do lead to some nasty mistakes sometimes lol) and this is a wonderful compilation! I also really appreciate that you made the NaN example say baNaNa

Code of Relevancy • Mar 22 '23

Glad you loved it and thank you for appreciating it. Happy reading..

Chris Cook • Mar 19 '23

It’s kind of frightening to see that the language that runs all of the web and a lot of backend applications has so many quirks.

Code of Relevancy • Mar 20 '23

Yes it should be refactored. Thanks you for the feedback..

Anthony Fung • Mar 18 '23

Nice write up!

People generally love JavaScript for its duck-typing, but this article illustrates that there are quite a few traps that we can fall in to if we aren't careful.

Code of Relevancy • Mar 19 '23

Thank you my friend. Yes I agree with you.. we should be careful with JavaScript. I appreciate your feedback..

fruntend • Mar 20 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Code of Relevancy • Mar 20 '23

Thank you my dear friend. I appreciate it

Jon Randy 🎖️ • Mar 19 '23

These results are only 'unexpected' if you don't fully understand the language and how to use it. They can also be used to your advantage.

Code of Relevancy • Mar 19 '23

Yes you’re right. But sometimes it happens, even for experienced developers..
Thank you for your feedback

Code Of Accuracy • Mar 18 '23

This is really helpful cleared core concept which is mainly we are using day to day coding.

Code of Relevancy • Mar 18 '23

Thank you for appreciating it

Comment deleted

Code of Relevancy • Mar 21 '23

Thank you, Parth. Tamaro feedback mne gamyo..

Comment deleted

Code of Relevancy • Mar 21 '23

😂😂

Femi Akinyemi • Mar 20 '23

Well done @codeofrelevancy This is awesome

Code of Relevancy • Mar 20 '23

Thank you sir for appreciating it..

L O U I S • Mar 20 '23

Accurate compilation of JS 'craziness' that could drive a human insane lol

Code of Relevancy • Mar 20 '23

Yes it could..
Thanks for comment

Joel Ndoh • Mar 20 '23

This is crazy

Thanks for sharing this

Code of Relevancy • Mar 20 '23

You’re welcome my friend. Thank you for your kind message

Md.Mustakim Ahmed • Mar 20 '23

Good One 👌

Code of Relevancy • Mar 20 '23

Thank you boss

Peter Cockerell • Mar 19 '23

This article is a great advert for the use of TypeScript. Hardly any of the examples would even compile in TypeScript, as they shouldn't in any language that takes type safety seriously