DEV Community

Cover image for So you think you know JavaScript?

So you think you know JavaScript?

Amandeep Singh on July 07, 2019

JavaScript is an interesting language and we all love it because of its nature. Browsers are the home for JavaScript and both work together at our ...
Collapse
 
1isten profile image
STEN

I did these all wrong! How can I bring back my confidence...

Collapse
 
aman_singh profile image
Amandeep Singh • Edited

Hi Sten, lemme tell you a few things here:

Firstly, when I asked these questions to my fellow workers, most of them couldn't answer them right. So, it's completely fine if you got all of these wrong. Important thing is that now you know a few things.

Secondly, building confidence takes some time. And accepting what you don't know is the first step towards it. We all have been through a stage a not knowing anything. The important part is how much efforts you put into learning these new things.

Here are a few things I do to build up my confidence:

  • I try to note down my learning into a note pad and revisit them once a week. At the end of the month, I look at my monthly learning and feel happy about it.
  • Mostly when I learn something new, I tend to share it with my colleagues. Sharing stuff adds up to my confidence.
  • I've signed up for some of JavaScript newsletter subscriptions. This allows me to keep myself up to date with what's happening in the JS community: JavaScript Weekly, Pony Foo.

Consistency always beats Intelligence. 😀

Collapse
 
1isten profile image
STEN

Thanks for sharing these stuff Amendeep! I'll keep up learning JavaScript and hopefully someday I can share something valuable for the community like you.

Thread Thread
 
aman_singh profile image
Amandeep Singh

Glad to read that.😃

Collapse
 
pvamshi profile image
Vamshi Krishna

I guess at some stage every Javascript developer gets all of these wrong . It’s good thing to know that you don’t know something , you can now learn them .

Collapse
 
sanidz profile image
sanidz

you funny js, stop it...

0.1 + 0.2 === 0.3
false

Collapse
 
aman_singh profile image
Amandeep Singh

Here's your answer to this.
0.30000000000000004.com

JavaScript is funny I know, but not this much 🤣

Collapse
 
sanidz profile image
sanidz

sure it is

{} + []
0

Thread Thread
 
aman_singh profile image
Amandeep Singh

Well, to answer this question, here's how ECMAScript 2019 defines the Addition operator. ecma-international.org/ecma-262/#s.... The run time has a few steps to follow before it spits out the result.

Thread Thread
 
milkysingh27 profile image
Malkeet • Edited

{} + [] = 0

Before we understand how did we get that strange result, we need to dive into how type conversion a.k.a "Coercion" works in JavaScript.

Abstract operations are the fundamental building blocks that makes up how we deal with coercion. Abstract Operation fundamentally performs the type conversion for us.

By the way, Abstract operations are not the functions which get called. By calling them abstract, we mean they’re conceptual operations. These operations are not a part of the ECMAScript language; they are defined here to solely to aid the specification of the semantics of the ECMAScript language.

In our case, we are trying to do a numeric operation with 2 non-primitive types i.e an object and an array. So, to perform this numeric operation JS needs to convert them into primitives first i.e Numbers in our case. So if we have something non-primitive, like one of the object types like an object, an array, and a function and we need to make it into a primitive, there is an Abstract method named ToPrimitive which is going to get involved in doing that.

So any time you have something that is not primitive and it needs to become primitive, conceptually, what we need to do is this set of algorithmic steps, and that's called ToPrimitive as if it were a function that could be invoked.

ToPrimitive

The ToPrimitive abstract operation takes an optional type hint. So it says like “If you have something which is not primitive, tell me what do you think you would like, what type you would want it to be ?” If you are doing a numeric operation and it invokes ToPrimitive, guess what’s hint it’s gonna send in? - A Number. That doesn’t guarantee a number but it’s just a hint to say that the place I’m using it requires it to be a number. There can basically be 2 types of hints that can be sent i.e number and string.

Another thing we need to understand is that the algorithms within JS are inherently recursive, which means that they define something, for example - ToPrimitive and if the returned result from ToPrimitive is not Primitive, then it's gonna get invoked again and it's gonna keep getting invoked until we get something that's an actual Primitive or in some cases an error.

How does ToPrimitive works ?

The way it works is that there are 2 methods that can be available on any non-primitive i.e valueOf() and toString(). This algorithm says, if you've told me that the hint is number, then I'm going to first try to invoke the valueOf() function if it's there, and see what it gives me. And if it gives me a primitive then we're done. If it doesn't give me a primitive, or it doesn't exist, then we try the toString(). If we try both of those and we don't get a primitive, generally that's gonna end up resulting in an error. That happens when the hint is number. If the hint was string, they just reverse the order that they consult them in.

When JS executes {}+[], the following things happen -

  • As we are doing a numeric operation and we need primitives, ToPrimitive method gets called with "number" as a hint when we try to convert [].

  • As we know ToPrimitive calls 2 methods i.e valueOf() and toString() in an order depending on the hint. In this case, the hint was a number so valueOf() function is invoked.

  • For an array or an object, by default, the valueOf method essentially returns itself. Which has the effect of just ignoring the valueOf and deferring to toString(). So it doesn't even matter that the hint was number. It just goes directly goes to *toString() *.

                          valueOf() {return this;}
    

Without further digression, let's answer the question []+{} = 0

  • When the parser sees that there is { at the beginning of a statement, it treats it as a block. In our case {} as no statements inside it hence it has empty continuation value. {} in our case is just an empty block which doesn't have any impact on the given statement.

                The given statement could be written as 
    
                             1. {}
                             2. +[]
    
               and it will produce the same result i.e 0.
    
  • Now coming down +[] statement, coercion kicks in here. [] is a non-primitive type which needs to be converted to Primitive and due to the + operator, it passes "number" as a hint to ToPrimitive which further calls valueOf() which defers it to toString() method.

                   It looks like this =>  String([]) = "";
    
  • "" is a primitive type which is returned from the ToPrimitive operation.

  • Now we have +"", again coercion kicks in and calls another abstract method ToNumber() which converts every non-numeric primitive to numeric primitive.

                       Number("") = 0; 
    
        In this case 0 is returned from ToNumber abstract method.
    
  • We are now left with +0 which is equals to 0.Here we have solved it, {} + [] = 0

Thread Thread
 
aman_singh profile image
Amandeep Singh

Thanks Malkeet for your time writing an in-depth explanation of how addition operators works. This comment can be turned into a single blog post. Would love to see that happen. ❤️❤️😍

Collapse
 
ashutosh profile image
Ashutosh Kumar

why ? it comes like this

Collapse
 
naceto profile image
Atanas Bozhanin

my answers:

  1. undefined
  2. 10
  3. 3 3 3
  4. no
  5. ?
  6. ?
  7. a, b, c
  8. 90, 10

I got the easy ones correct.
about 5. Honestly wasn't sure :D
about 6. I basically haven't got time to learn and play with with >= ES6.

Collapse
 
aman_singh profile image
Amandeep Singh

Well done 🙂. There are more new features coming up in ES2019. This is right time to invest into learning ES6 if you haven't started yet. Good luck 👍

Collapse
 
kioviensis profile image
Max Tarsis • Edited

Hey,
I think that's a really good and useful article

For the sixth answer, I made a bit another approach

obj[Symbol.iterator] = function*() {
  for (let key in this) {
    if (this.hasOwnProperty(key)) {
        yield this[key];
    }
  }
};

what do you think about that?
It makes me sure that I don't need to worry about new or old values

Collapse
 
aman_singh profile image
Amandeep Singh • Edited

This is a beautiful approach Max. 😀

For other people to understand, let me explain Max's approach here:

// an iterator object is returned
 const iterator = ob[Symbol.iterator]();

 // calling next method will execute the body till first yielded expression (yield this[key])
// and returns a value of {value: 'x', done: false}
iterator.next(); 

// calling next() again will continue the execution where it stopped the last time (inside for loop  😇)
iterator.next(); // { value: 'y': done: false}

// and thus the process will continue till done is *true*

The takeaway is:

  • calling a generator function doesn't execute its body; an iterator object is returned.
  • generator function's body is executed until the first yield expression when iterator's next() is called, and the value returned will be of the shape {value: 'x', done: true}
Collapse
 
wakeupmh profile image
Marcos Henrique

amazing post, opened doors of my perception, things like microtasks and macrotasks are new to me, thanks!😁

Collapse
 
aman_singh profile image
Amandeep Singh

Glad to read that. Thank you for your nice comment about the post.

Collapse
 
y0n3r profile image
Yonas Hassen

This is a really great post. Would love to see more like this. JavaScript is full of interesting idiosyncrasies.

Collapse
 
aman_singh profile image
Amandeep Singh

Thanks for your nice words Yonas. Looking forward to creating a part 2 of this. 🙂

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
aman_singh profile image
Amandeep Singh

Thank you for your kind words. I am looking forward to create part 2 of this series. 😃

Collapse
 
elanandkumar profile image
Anand Kumar

Very interesting. Specifically i liked the iterable one.

Collapse
 
aman_singh profile image
Amandeep Singh

Glad that you liked it.Thanks for reading. 😃

Collapse
 
karataev profile image
Eugene Karataev

Great post, would like to see more like this 👍
My answers to 2, 5 and 6 were wrong. I need to schedule some time to fill the gaps.

Collapse
 
aman_singh profile image
Amandeep Singh

Thank you Eugene for your words. I am looking forward to creating another one like this soon. 😃

Collapse
 
danmascena profile image
Daniel Mascena • Edited

I did 7 of 8, don't stop at the top :) excellent post

Collapse
 
aman_singh profile image
Amandeep Singh

Well played Daniel. Thanks for your nice words too 😃

Collapse
 
ashutosh profile image
Ashutosh Kumar

Nice share...

Collapse
 
aman_singh profile image
Amandeep Singh

Thank you Ashutosh. 🙂

Collapse
 
devnik14 profile image
DevNik14

I've got 4 out of 8 (I got them pretty comfy), but I need to dive deeper into the event loop and the and ES6+