DEV Community

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

Read full post

STEN • Jul 7 '19

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

Amandeep Singh • Jul 8 '19 • 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. 😀

STEN • Jul 8 '19

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.

Amandeep Singh • Jul 8 '19

Glad to read that.😃

Vamshi Krishna • Jul 7 '19

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 .

sanidz • Jul 8 '19

you funny js, stop it...

0.1 + 0.2 === 0.3
false

Amandeep Singh • Jul 8 '19

Here's your answer to this.
0.30000000000000004.com

JavaScript is funny I know, but not this much 🤣

sanidz • Jul 8 '19

sure it is

{} + []
0

Amandeep Singh • Jul 9 '19

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.

Malkeet • Jul 12 '19 • 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

Amandeep Singh • Jul 12 '19

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. ❤️❤️😍

Ashutosh Kumar • Jul 11 '19

why ? it comes like this

Atanas Bozhanin • Jul 8 '19

my answers:

undefined
10
3 3 3
no
?
?
a, b, c
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.

Amandeep Singh • Jul 8 '19

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 👍

Max Tarsis • Jul 11 '19 • 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

Amandeep Singh • Jul 11 '19 • 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}