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 ?? 🤔 Enter fullscreen mo...

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.

Ankit Kanyal • Jan 4 '21

Extremely helpful saved my day.

Amandeep Singh • Jan 4 '21

Glad to read that. 🙂

Alfredo Salzillo • Aug 28 '19

Now javascript has also the "bigint" primitive type.

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

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

Moaaz Bhnas • Mar 17

Thank you!

Offirmo • Nov 3 '19

Summary: use TypeScript and explicitly coerce!

Uriel dos Santos Souza • May 25 '21

TypeScritp = Make Java.
Stay in Java rsrsrsrsrsrsr

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

Austin Layman • Dec 22 '22

This was great.

shameekagarwal • Nov 20 '21 • Edited

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