DEV Community

Cover image for Abstract Operations—the key to understand Coercion in JavaScript

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...
Collapse
 
mujaddadi profile image
Taha Hassan Mujaddadi • Edited

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

Collapse
 
pencillr profile image
Richard Lenkovits

Extremely thorough article on JavaScript types. Great job!

Collapse
 
aman_singh profile image
Amandeep Singh

Glad to read that Richard. Thank you.

Collapse
 
ankit9761 profile image
Ankit Kanyal

Extremely helpful saved my day.

Collapse
 
aman_singh profile image
Amandeep Singh

Glad to read that. 🙂

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Now javascript has also the "bigint" primitive type.

Collapse
 
cdaracena profile image
Christian Aracena

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

Collapse
 
aman_singh profile image
Amandeep Singh

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

Collapse
 
agentmilindu profile image
Milindu Sanoj Kumarage

Great article! Learned a lot.

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

Collapse
 
aman_singh profile image
Amandeep Singh

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
Collapse
 
bhatnagardivyanshu profile image
Divyanshu Bhatnagar

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

Collapse
 
offirmo profile image
Offirmo

Summary: use TypeScript and explicitly coerce!

Collapse
 
urielsouza29 profile image
Uriel dos Santos Souza

TypeScritp = Make Java.
Stay in Java rsrsrsrsrsrsr

Collapse
 
shameekagarwal profile image
shameekagarwal • Edited

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

Collapse
 
ravinaparab1 profile image
Ravina

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

How did we reach these conclusions?

Collapse
 
aman_singh profile image
Amandeep Singh

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

Collapse
 
moaazbhnas profile image
Moaaz Bhnas

Thank you!

Collapse
 
enkienki77 profile image
Austin Layman

This was great.