Javascript data types and type casting

There are two kinds of values in JavaScript: primitives and objects. We will just talk about primitive datatypes.

So what are primitives?

A primitive is a data type that is not an object and has no methods and properties. In JavaScript, there are 6 primitive data types: string, number, boolean, null, undefined, symbol (new in ECMAScript 2015). Everything else is an object.

Difference between Objects and primitives :
Object is a collection of properties. A property can reference an object or a primitive as a value(using valueOf() method). Primitives are value literals, they have no properties.

Except for null and undefined, all primitive values have object equivalents as wrap around them.

typeof true; //"boolean"
typeof Boolean(true); //"boolean"
typeof new Boolean(true); //"object"
typeof "abc"; //"string"
typeof String("abc"); //"string"
typeof new String("abc"); //"object"
typeof 123; //"number"
typeof Number(123); //"number"
typeof new Number(123); //"object"

Now the question is if primitive values have no properties, why does 123.toString() returns a value?

Because JavaScript will readily coerce between primitives and objects. In this case the numeric value is coerced to a number object in order to access its toString() method. The number object is only used for a fraction of second after which it is sacrificed to the Gods of garbage collection.

Here’s a more environmentally responsible example that verifies the object type without interfering with garbage collection:

Number.prototype.toString = function(){ return typeof this; }
(123).toString(); //"object"

We are pretty much clear about javascript data types, their object shadow and coercion between primitives and objects. Now lets see how + operator type cast values to primitives, numbers and strings.

1. Type casting values to numbers

Number(undefined) //NaN
Number(null) //NaN
Number(true) //NaN
Number(false) //NaN
Number("123") //123
Number(obj) //An object obj is type casted to a number by calling its valueOf() method and then applying Number() constructor to the (primitive) result.

2. Type casting values to string
String(undefined) //"undefined"
String(null) //"null"
String(true) //"true"
String(false) //"false"
String(123) //"123"
String(obj) /An object obj is converted to a string by calling toValue() method and then applying String() constructor to the (primitive) result.

Now what happens when we add two values? Let’s understand this by taking few examples.

Example 1 :

> [] + []
  ''

Primitive equivalent of [] is itself an array which is not a primitive value. So toString() will be called which returns an empty string. Therefore, the result will be an empty string.

Example 2:

> [] + {}
  ''

As explained in previous example [] returns an empty string. Converting an empty object to string yields the following result.

> String({})
    '[object Object]'

The result is concatenation of “” and “[object Object]”.

Example 3:

> {} + {}
  NaN

What????? Seriously????

Relax…

The problem is that JavaScript interprets the first {} as an empty code block and ignores it. The NaN is therefore computed by evaluating +{} (plus followed by the second {}). The plus you see here is not the binary addition operator, but a unary prefix operator that converts its operand to a number, in the same manner as Number() constructor works.

Arguments of functions or methods are also always parsed as expressions. You can fix things by forcing the input to be parsed as an expression:

> ({} + {})
    '[object Object][object Object]'
> console.log({} + {})
    '[object Object][object Object]'

I hope, now we are clear with data types in javascript and their type casting.

I am leaving you with a small riddle. Try not to use console ;)

What’s the val of y:

x={ valueOf() {return 7}, toString() {return ‘hi’} }
y=String(x) + x + `${x}`

This is my very first blog. I am also learning with you guys while writing this blog :)

Comments and suggestions are always welcome ;D

References
http://2ality.com/2011/03/javascript-values-not-everything-is.html