DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Poulami Chakraborty
Poulami Chakraborty

Posted on

Back to JS Basics - Types & Coercion

These are my notes as I go back & revisit the nitty gritties of JS core concepts.

JavaScript Data Types

A value in JavaScript is always of a certain type (ex:number) - data type is the attribute which determines the behavior of a particular value and how it is treated (ex: 1 vs "1"). This also effects how different operators work with the value.

JavaScript is a dynamic language or loosely typed therefore a variable doesn’t associate with any type - its value does. That means the same variable may be reassigned a new value of a different type.

var x = 5; //x is a number
x = "Hello world" //x is now a string



There are basically 9 types of data types in JS with

  • 6 primitives: number, string, boolean, undefined, bigInt, symbol. A primitive data value is a single simple data value with no additional properties and methods.
  • 2 structural: objects and functions. Object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. Arrays, regular expressions, date, etc. are all different types of objects.

    Functions are like a sub-type of objects.

  • 1 special kind of primitive: null. null is a special instance of primitive datatype which points intentionally to a nonexistent or invalid object or address.

Both null and undefined cannot hold any value.

This article covers primitive types (& parts of null)

Null vs Undefined

undefined means a variable has been declared but has not yet been assigned a value. (An **undeclared* var, by contrast, is one that hasn't been declared yet, and will return a reference error*).

null represents null, empty, or non-existent reference. It is a blank object reference.

Peculiarities of Number

  • Number β‰  Integer ( 1, 1.0, 1. are all valid 'number' in JS. That may be important when trying to invoke a number method)

    
       console.log(1.toPrecision( 6)) // Uncaught SyntaxError
       console.log(1..toPrecision( 6)) //4.00000
    
    

    Ideally, its better to assign value to variable and then access function on the var.

  • Floating point arithmetic is not always 100% accurate

    
       console.log(0.1 + 0.2) //0.30000000000000004
    
    
  • NaN(not a number) : Any mathematical operation in which both operands aren't numbers (or values that cannot be forced into number) results in an invalid number, giving the NaN value.

    
       console.log(5 - '123' ) // -118
       console.log(5 - '12 3' ) // NAN
    
    

    NaN is a very special value in that it's never equal to another NaN value.

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

Type Conversions & Coercions

JS variables can be can be converted to a different data type by:

  1. Use of a JavaScript function - we explicity convert to a different type. (Ex: String(123))
  2. Automatic or implicit conversion of values - JS coerces an incorrect type to the expected data type. (Ex: 2*"2")

There are 3 possible conversions:

  • To String
  • To Number
  • To Boolean

1. To String

String() or toString() function can be used to explicitly convert to string. All primitives are converted to string type as may be expected:

String(123) β†’ '123'
String(true) β†’ 'true'
String(null) β†’ 'null'
String(undefined) β†’ 'undefined'

Implicit coercion is triggered by the binary + operator, when (atleast) one operand is a string

'a'+2 //a2

Note: String concatenation with + is not commutative. Ex: '$' + 4 + 5 will give '$45' but 4 + 5 + '$' will give '9$'

2. To Number

  • Mathematical operations results in implicit conversion to Number (except in case of + where it can result in conversion to string). It may not be a valid number - again NaN is also a sub-type of number!

       typeof(5 + true); //number
       typeof("6a"*"2"); //number
       typeof(5 - '12'); //number
    

    An empty string , empty array, becomes 0. true is 1, while false is 0.

  • In explicit conversions of strings, white-spaces from the start and end are removed.

Number(' 123 ') // 123
Number('12 3') // NaN
  • When (loosely) comparing values of different types, there is implicit conversion to numbers. We will visit comparisons shortly.

3. To Boolean

  • Values that are intuitively β€œempty”, like 0, an empty string, null, undefined, and , become false. Everything else is true - including "0"
  • If statements: Logical operators (|| and &&) do not return boolean values.

    
       a||0; [//a](//a) 
    
    

    When used within the condition of an if statement, there is an implicit coercion to boolean type.

Comparisons (Loose '==' vs Strict '===' equality)

As mentioned earlier, == uses type coercion to numbers if required.

A strict equality operator === checks the equality without type conversion. If two values are of different types, then a === b immediately returns false without an attempt to convert them.

console.log('0' == 0) //true
console.log('0' == false); //true
console.log('0' === false); //false

Number(null) & Number(undefined) are 0 & NaN respectively - so, they aren't equal.

null==undefined // false



Sources:

You-Dont-Know-JS/types & grammar

MDN: JavaScript data types and data structures

https://javascript.info/

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!