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 ...
For further actions, you may consider blocking this person and/or reporting abuse
I did these all wrong! How can I bring back my confidence...
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:
Consistency always beats Intelligence. 😀
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.
Glad to read that.😃
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 .
you funny js, stop it...
Here's your answer to this.
0.30000000000000004.com
JavaScript is funny I know, but not this much 🤣
sure it is
{} + []
0
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.{} + [] = 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() *.
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.
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.
"" 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.
We are now left with +0 which is equals to 0.Here we have solved it, {} + [] = 0
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. ❤️❤️😍
why ? it comes like this
my answers:
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.
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 👍
Hey,
I think that's a really good and useful article
For the sixth answer, I made a bit another approach
what do you think about that?
It makes me sure that I don't need to worry about new or old values
This is a beautiful approach Max. 😀
For other people to understand, let me explain Max's approach here:
The takeaway is:
amazing post, opened doors of my perception, things like microtasks and macrotasks are new to me, thanks!😁
Glad to read that. Thank you for your nice comment about the post.
This is a really great post. Would love to see more like this. JavaScript is full of interesting idiosyncrasies.
Thanks for your nice words Yonas. Looking forward to creating a part 2 of this. 🙂
Thank you for your kind words. I am looking forward to create part 2 of this series. 😃
Very interesting. Specifically i liked the iterable one.
Glad that you liked it.Thanks for reading. 😃
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.
Thank you Eugene for your words. I am looking forward to creating another one like this soon. 😃
I did 7 of 8, don't stop at the top :) excellent post
Well played Daniel. Thanks for your nice words too 😃
Nice share...
Thank you Ashutosh. 🙂
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+