DEV Community

Abstract Operations—the key to understand Coercion in JavaScript

Amandeep Singh on August 27, 2019

I was intrigued by one the question asked on my So you think you know JavaScript article. {} + []; // returns 0 ?? 🤔 I adm...

Read full post

Taha Hassan Mujaddadi • Mar 2 '20 • Edited

I felt like I was reading Kyle Simpson's article :D.

Richard Lenkovits • Aug 27 '19

Extremely thorough article on JavaScript types. Great job!

Amandeep Singh • Aug 27 '19

Glad to read that Richard. Thank you.

Alfredo Salzillo • Aug 28 '19

Now javascript has also the "bigint" primitive type.

Milindu Sanoj Kumarage • Aug 31 '19

Great article! Learned a lot.

BTW, {1} + [] results in an 0. How is this possible?

Amandeep Singh • Sep 4 '19

Hi Milindu,

The {} is a code block with a value of 1 inside. It has nothing to do with Addition operator outside of it. When parser reads this line it will evaluate 1 and move to another expression, which is + 0, and will output 0.

{
 // this is a block
let a = 10; 

console.log(a) // prints 10 
let b = 30; 
} 

// This is outside of the block
let a = 20; 
console.log(a); // prints 20
console.log(b); // throws a ReferenceError

Gaurav Mishra • Dec 21 '24

one issue i believe in the post is the toPrimitive algo for the hint 'Number', in that case no toString will be called only the valueOf will be called.

example : [] + 2;
this will return 2 as [] is directly converted to valueOf not via toString.
one more example in the screenshot.

Christian Aracena • Aug 27 '19

Clear and concise, learned something new today, thanks man! Keep it up

Amandeep Singh • Aug 27 '19

Thank you, Christian, for your kind words. I am glad that you learned something out of it. 😀

Ankit Kanyal • Jan 4 '21

Extremely helpful saved my day.

Amandeep Singh • Jan 4 '21

Glad to read that. 🙂

Divyanshu Bhatnagar • May 23 '24

Why does {name: 'Aman'} + 0 returns 0?

Uriel dos Santos Souza • May 25 '21

TypeScritp = Make Java.
Stay in Java rsrsrsrsrsrsr

shameekagarwal • Nov 20 '21 • Edited

why does [].toString() result in an empty string?
great article btw

Austin Layman • Dec 22 '22

This was great.

Moaaz Bhnas • Mar 17 '24

Thank you!

Offirmo • Nov 3 '19

Summary: use TypeScript and explicitly coerce!

Ravina • Aug 29 '19

For {} + [], {} is not an empty object but just an empty block; for [] + {}, {} is an object.

How did we reach these conclusions?

Amandeep Singh • Aug 29 '19

Hi Ravina,

This behavior is how JavaScript engine (e.g V8) starts out by parsing the source code into an Abstract Syntax Tree(AST). For {}, JavaScript parser considers it as an empty block because this is the first thing in the statement. But in the case of [] + {}, the first thing is an array followed by Addition operator.

Here's a nice AST explorer to check out. Paste both the statement to verify yourself. 🙂