DEV Community

Jared
Jared

Posted on

16 6

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;
Enter fullscreen mode Exit fullscreen mode

What does this expression evaluate to?

    threeString + threeNum
Enter fullscreen mode Exit fullscreen mode

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

Gordon Ramsay - Youre a string mate

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...

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (10)

Collapse
 
aminnairi profile image
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!

Collapse
 
codenutt profile image
Jared

Thank you! I agree.

Collapse
 
karataev profile image
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

Collapse
 
codenutt profile image
Jared

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

Collapse
 
marcellothearcane profile image
marcellothearcane
Collapse
 
codenutt profile image
Jared

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

Collapse
 
thepeoplesbourgeois profile image
Josh • Edited

It gets worse!

4 + "4"
// "44"

4 +"4"
// 8
Collapse
 
codenutt profile image
Jared

Mother of god lol why??

Collapse
 
pranjalagnihot8 profile image
Pranjal Agnihotri {..❤️}

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

Collapse
 
codenutt profile image
Jared

Ridiculous

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay