Weird Parts of Javascript

Photo by Vinicius "amnx" Amano on Unsplash

Javascript is one of the most popular programming languages in the world. A lot of people also have a notion that it’s really easy to learn Javascript, but over last few years it has gained popularity exponentially, and with frameworks like Node JS, people have started to take it seriously in terms of server side development as well. Anyone can learn the basics of the language, but it takes time and effort to truly understand the more advanced areas of the language.

In this article we will discuss a little bit about the basics of core javascript, along with some weird things happening in javascript.

Photo by Ferenc Almasi on Unsplash

Tagged template literals

You may already know that ES6 introduced the creation of Template Literals by using the `` quotes (backtick character) located on the tilde key.

To use Template Literals you have to use the backtick quotes instead of single or double quotes (which would not work with template literals.)

Template string literal example

But a lot of us are not aware about the magic we can do with string literals. It is possible to combine template literals with a custom-written function created specifically to work in the context of a string literal.

It may sound a little confusing, but try to recollect if you have worked with Styled components library. That’s what we are going to achieve. Take a look at below example.

Tagged literal

Strange !! Is it? Not exactly. Now the next question that comes up is, can we use dynamic values inside it. Good News ! Yes, you can add dynamic values in the custom function, and the same concept is being used by styled components. In the below code, i have kept the function name as h1 since i am creating a custom h1 tag, you can use any random name for the function.

Tagged literal with dynamic values

Strange NaN

We all have once in a while encountered NaN in our code. But a lot of us are not aware about how weird NaN can be at times. It is always a challenge to check the equality for values of NaN. Why I say so is because

Confused, here comes the biggest catch, NaN is the only value in javascript which will result in below result.

var a = NaN;

a !== a → will return true.

So the best way to check for NaN is using the above condition for isNaN and check the equality at the same time.

Functional arguments

Sometimes in functions we use arguments, which is an array-like variable that contains all the arguments passed to the function. But the catch here is, that it’s not an array but an array like object. It has length property but not other array properties. Take a look at below example, where arguments.slice call will throw an error.

functional arguments

Understanding this

This is my all time favourite topic in javascript. In any function, this is a reserved keyword that refers to the owner of the function. For example: when calling a function defined on an object, it will be the object itself:

Let’s make it a little more complex. Let’s say, we have another function inside checkThis function. What will be the value of this inside inner function, any guesses??

So, how do we handle this? You might have seen at places using word “self”. This is where we make use of another cool javascript concept called closures.

var self = this;

With this declaration, you can use the value of this inside the inner function as well.

Being able to change the owner of a function can lead to some confusion what this currently refers to but there are only three rules for what it can be:

1. The object, when the function is called on the object (using the . or [] operator)
2. The new object when a function is called with the new operator
3. The owner has been set with call, apply or bind.

Understanding this.

Conclusion

This is a definitely incomplete list of some JavaScript weirdnesses and things you might trip over especially when just starting out with JavaScript. In a follow up post I want to talk about inheritance( prototypical and constructor) in JavaScript.