Tuesday, 13 September 2016

Java Script Falsy Values

Java script is weird. Here is another weird behavior of java script. Like any other programming language Java Script has Boolean data type. But in Java Script any value and any data type can be converted into Boolean. If some one not understand falsy values they might run into trouble. Understanding of falsy values will help you in debugging.

What is falsy?

Any value which will be translated into false is called falsy. Below are the falsy value of Java Script.

  • false
  • 0 (Zero)
  • ""(Empty String)
  • null
  • undefined
  • NaN (It is a Number But Not-A-Number)

1
2
3
4
5
6
console.log(!!(false)) // false
console.log(!!(0)) // false
console.log(!!("")) // false
console.log(!!(null)) // false
console.log(!!(null)) // false
console.log(!!(null)) // false

All other than above values are true in Java Script. You might wonder what about the "0" (Zero in double quotes)? But it is also returns true.


1
console.log(!!("0")) // true

Based on above logic one might think below code will return false.


1
console.log("0" == false) // true

What? "0" is true, true==false should be false. But it is not. This called coercion. It is not bug. It is feature. TO get better understanding look at this "Java Script Coercion".

Above mentioned values are falsy. Each one will behave differently when comes to comparision between then. Look into the compare table of falsy values.

==false0""nullundefinedNaN
falsetruetruetruefalsefalsefalse
0truetruetruefalsefalsefalse
""truetruetruefalsefalsefalse
nullfalsefalsefalsetruetruefalse
undefinedfalsefalsefalsetruetruefalse
NaNfalsefalsefalsefalsefalsefalse


False - Zero - Empty String

The falsy values false, 0 and "" are equivalent when comparing to one another.

1
2
3
console.log(0 == false) // true
console.log("" == false) // true
console.log(0 == "") // true



null and undefined


The falsy values null and undefined is false with all other falsy values except themselves.

1
2
3
4
console.log(0 == null) // false
console.log(0 == undefined) // false
console.log(null == undefined) // true
console.log(null == null) // true


NaN

NaN returns false with any value including NaN itself.


1
console.log(NaN == NaN) // false

Hope you have good understanding on falsy values of Java Script.  

Friday, 9 September 2016

JavaScript Coercion

Java script is weird. We know that. Here is one of the weird behavior.Let us look into the below two lines of code. In most of the programming languages, it will thrown as error "Can not compare Boolean to number". But java script won't throw an error and executes the code.

1
2
console.log(1<2<3);//true
console.log(3>2>1);//false

Java script will execute the above lines, that is fine. But why the first line is true and second line is false? On a plain sight any one can think of that if first line is true then second also should be true right. It is not. Let us see why this weird behavior. To understand this behavior we need to know the coercion.

What is Coercion?

In Java script coercion is treated as error and unexpected behavior. But it is a feature of Java script and we need to know how to use it. Coercion is will be applicable only on "==" and logical operators operator.

Type Coercion means if the data types operands of an operator are different. One of the operator is type castes to other operators type. Or both operands will be converted to a common data type.


1
console.log(5+"7"); //57

In a above line 5 is converted into string and + is concatenation operator. So output will become 57. This kind of implicit type casting is called coercion.

Line 1 :
Now try to solve the above problem. In the first line there are two operators and precedence will be left to right.


1
2
3
4
5
6
7
Console.log(1<2<3);
//Step 1: 1<2 is true.
//Step 2: result of the  1 < 2 will be placed in console.log.
Console.log(true < 3);
//step 3: Coercion will happen then true will be converted to number. true => 1.
//Step 4: 
Console.log(1<3); // is true.

Line 2:
Now we see the second line of code execution step by step.


1
2
3
4
5
6
7
Console.log(3>2>1);
//Step 1: 3>2 is true.
//Step 2: 
Console.log(true > 1);
//Step 3: Coercion will happen then true will be converted to number. true => 1.
//Step 4: 
Console.log(1 > 1); // is false.

This what happened in above code. Coercion happened. If you are not comfortable with coercion use "===" triple equal. "===" will compare data type and value both.

Please refer the coercion table..



Thursday, 1 September 2016

What is HOSTING in Java Script?

Hoisting

This is another weird part of Java script. Some times this is misleading and useful at times.  Let us take an example below.

1
2
3
console.log(myvar); //undefined
var myvar ='Hello World!';
console.log(myvar); //Hello word!

In most of the programming languages line 1 will result in an error saying variable not declared. But in Java Script it didn't throw an error. if we assume that without var keyword variable got created then second line should result in error saying variable already declared. Neither of them happened.

What is happened?


Hoisting is happened. Hoisting is not an ECMA terminology. Execution in Java script engine is happens in two phases.

Creation


On creation phase all variable and functions will get allocated memory. By default variables will get assigned with undefined. This creation phase is mostly misinterpreted as hoisting.

Execution


In Execution phase only code will be get executed line by line. Execution is like any other programming languages will be executed line by line.

Here is what happened. 


On creation phase myvar variable is got created and assigned with undefined. On execution phase, first line printed undefined, on second line myvar will get assigned with "Hello world!". In third line it printed with "Hello world!".


Conclusion


Hoisting is nothing but allocation memory to variables and functions even before the execution of line of code.To avoid confusion declare variables at the top of the function.