I Don't Know Javascript Coercion, Do You?

I've made a grave mistake

In a video I published a few weeks ago, I made a rather basic mistake.

Given the following variables...

    let threeString = "3";
    let threeNum = 3;

What does this expression evaluate to?

    threeString + threeNum

If you're smarter than I was an hour ago, you'll know that it evaluates to "33".

Why does it do that?

According to ECMAScript, as summarized by Valentino:

If x is String or y is String then return ToString(x) followed by ToString(y)

In other words, if there is an expression with the + operator, and one of the values is a string, it will always coerce the values into a string.

Final Thoughts

I like to think I'm not completely dumb. I've been building websites/web apps in Javascript for about four years now. However, we all make mistakes. Even the most basic ones! Own up to them, and we'll all learn something. I know I did!

If you want to see my mistake in action, check out the video below!

And the follow up video, which I made before this mistake I made was pointed out...

Comments

[Amin]

I like to think that intelligent people are really the people able to learn from their mistakes. Good catch on this one. Sharing our mistake is a way of teaching others. Especially for these kind of quirks in JavaScript!

[Jared]

Thank you! I agree.

[Eugene Karataev]

Type coercion is definitely one of the most confusing parts in JS. It may contain many implicit steps with wtf results. For example

[] == ![] // true

And step by step explanation

My favorite type coercion example

Eugene Karataev ・ Jun 1 ・ 2 min read

#javascript #coercion #types #comparision

[Jared]

I should have included === in my video. Oops lol. Thank you!

[marcellothearcane]

More quirks! destroyallsoftware.com/talks/wat

[Jared]

That was hilarious! Thank you for sharing. I wasnt sure what it was before clicking though lol

[Josh]

It gets worse!

4 + "4"
// "44"

4 +"4"
// 8

[Jared]

Mother of god lol why??

[Pranjal Agnihotri {..❤️}]

Using "+" before a String converts it to Number in JavaScript

[Jared]

Ridiculous