Weird parts of javascript every beginner should know about it – Part 1

Here I m gonna give a most confusing part of javascript which provides different output than you think. Guess the output and look into the explanation. Which provides a clear understanding of how Javascript code works. It will save a lot of time when you work on real projects and also save you in the interview.

//self execution function.

(function()
{
var x = y = 10;
})();
console.log("x defined? " + (typeof x !== 'undefined'));
console.log("y defined? " + (typeof y !== 'undefined'));

As most of the developers will end with answer both are undefined. Since it's declared in enclosing block. The developer will end up with var x = 10 and var y =10. No, it's not. The above answer will be false and true respectively.

console.log("x defined? " + (typeof x !== 'undefined')); // Falseconsole.log("y defined? " + (typeof y !== 'undefined')); // True

The variable y is not preceded with var keyword the scope of the variable becomes global scope like below.

//Correct one

y = 10; // declared globallyvar x = y; // x is visible only to the function block.

To avoid this kind of mistakes use strict mode (‘use strict’). It will generate runtime error saying y is not defined - reference error.

//Object

var obj = {
name: "programmer first",
func: function() {
var that = this;
console.log("outer func: this.name = " + this.name);
console.log("outer func: that.name = " + that.name);
(function() {
console.log("inner func: this.name = " + this.name);
console.log("inner func: that.name = " + that.name);
}());
}
};

//invoke function

obj.func();

In the outer function, both this and that refer to obj and therefore both can properly reference and access name in the object.

In the inner function, though, this no longer refers to obj. As a result, this.name is undefined in the inner function, whereas the reference to the local variable that remains in scope and is accessible there.

The output of the above code:

outer func: this.name = programmer first
outer func: that.name = programmer first
inner func: this.name = undefined
inner func: that.name = programmer first

You can use ES6 arrow function. Check out the below code

//ES6 Arrow funtion

var obj = {
name: "programmer first",
func: function(){
console.log("outer func: this.name = " + this.name);
console.log("outer func: this.name = " + this.name);
(()=> {
console.log("inner func: this.name = " + this.name);
console.log("inner func: this.name = " + this.name);
})();
}};
Output of the above code:
outer func: this.name = programmer first
outer func: this.name = programmer first
inner func: this.name = programmer first
inner func: this.name = programmer first

The arrow function doesn’t rebind this like normal functions.

//function sayHello

function sayHello()
{
return {
greeting: "hello"
};
}

//function sayHi

function sayHi()
{
return
{
greeting: "hi"
};
}

The answer is no. SayHi function will return undefined without any error message the reason is the semicolons are technically optional in Javascript.

Output

//sayHello
hello
//sayHi
undefined

The javascript compiler will check if anything available after the return keyword. If there is nothing available it will automatically add the semicolon after the return statement. The sayHi function greeting message becomes unused code block.

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);

The answer is ‘you can not be sure’. You may expect 0.2 and true respectively. But the javascript compiler treats a number as floating point precision.

Output
0.30000000000000004
false

console.log(false == ‘0’);
console.log(false === ‘0’);
output :
true
false

In JavaScript, there are two sets of equality operators. The triple-equals operator === behaves like any traditional equality operator would and evaluates to true if the two expressions on either of its sides have the same type and the same value. The double-equal operator, however, tries to coerce(convert type) the values before comparing them. It is therefore generally good practice to use the === rather than ==.