Weird Javascript

Javascript is one of the most popular web programming languages in the world. It is easy to learn but still there are some tricky concepts that might confuse beginners.

In this post, we are going to discuss few weird concepts of javascript.

Hoisting

If you're familiar with languages such as c, c++, or java then you must know that we cannot use a variable unless we initialize it. What if I tell you that you can use a variable even before it is declared? Weird right?

In javascript, if you declare a variable at the bottom of your source code still you will be able to use it before its declaration/initialization. It sounds weird, but it's a simple concept. While executing the javascript code, the compiler moves all the declared variables on top of the source code. It is defined as hoisting in terms of javascript.

example:

getLog() => console.log('Logging...');

getLog();

In the above example, we have defined a function called getLog that outputs a string to the console. Calling this function will output the desired result to the console.

Now let's see how hoisting works.

getLog();

getLog() => console.log('Logging...');

In the above example, we have called function before actually declaring it. Even though the function is called before the declaration still it would output a similar result to the console instead of giving any error. It is possible because of hoisting.

During the execution of this code, the function body/definition is moved to the top before the actual function call. Hence the function call outputs the accurate result to the console.

Hoisting only works on declarations. If you declare a variable and initialize it later, the result will be undefined.

To avoid confusion, always declare and initialize your variables before using them.

== vs ===

1 == 1 is True
1234 == '1234' is also True

but hey, it doesn't make any sense. You are comparing integer and a string.

There are two equality comparison operators in javascript :

• == (Normal Comparison Operator)
• === (Strict Comparison Operator)

== does not implement strict comparison. It compares only values not the data types. When you compare string with a number, javascript converts string to a number. Hence 1 == '1' will always return true.

To avoid this, we can use === (Strict Equality Comparison Operator). === compares data values along with its type so if you compare a string with integer, it will return false.

1 === '1' will return false, 1 === 1 will return true.

Logical Comparison

In javascript, you can compare truthy/falsy values with other types using logical operators. Let me explain this in simple terms.

0 === 0 && 'Hello'

Can you guess the output of the above expression?
It will give an error right? Well, No.

In the above expression,

0 === 0

returns true so the expression becomes,

true && 'Hello'.

After evaluating this expression, Hello will be printed to the console.

In javascript, if you compare truthy values with string or integer. It will always return that string or integer.

false && 'Hello' this expression will evaluate to false. Comparing with falsy values always return false.

There are numerous tricky concepts in javascript that makes it fun to learn.