Understanding Coercion

There are seven data types in javascript namely: null, undefined,string,number,symbol, boolean and object. The first six are called primitives. The last one, Object is called non-primitive.

Javascript is dynamically typed. Meaning that a variable can start off as a type(for instance as a string data type) and end up as another type(say as a number). For instance

  let person = "human"  //string data type
  person = 10               // has become a number data type

Coercion, also known as "type conversion" is used to 'convert one data type to another'. ie, used to for instance convert a string to a number or number to string etc.

Primitives can be coerced or changed to either Number, String or Boolean.

Coerce primitives to Number

Primitives are changed to number using the comparison operators. The comparison operators include ">, >=, <, =<" etc. Let's see how this is done

Example 1: numeric string and number

 "6" >= 1
//Solution,
//Convert '6' (string) to number gives 6 (number), hence
 6 >= 1 // true
 true

Example 2: boolean and number

false > 3
//Solution:
//Convert false to number gives 0, hence
0 > 3 // false
false

Example 3: null and number

null > 4 
//Solution:
//Convert null to number gives 0, hence
0 > 4 // false
false

Example 4: text string and number

'hello' > 4 
//Solution:
//Convert 'hello' to number gives 1, hence
1 > 4 // false
false

Example 5: undefined and number

undefined > '9' 
//Solution:
//Convert undefined to number gives NaN, hence
NaN > 4 // false
false

Example 6: boolean and numeric string

true > 4 
//Solution:
//Convert true to number gives 1, hence
1 > 4 // false
false

Coerce primitives to String

Primitives are coerced to string using the unary + operator. If any of the operands is a string, it coerces them to string. This is called operator overboarding.

Example 1: boolean + string + number

true + "Is" + 5 // "trueIs5"

Example 2: string + null

"hello" + null // "hellonull"

Example 3: string + boolean

"hello" + true // "hellotrue"

Example 4: string + undefined

"hello" + undefined // "helloundefined"

Example 4: number + string

4 + "hello" // "4hello"

Coerce primitives to Boolean

Primitives are changed to Boolean using the logical operators. The logical operators include "&&, ||, !". Evaluation is based on Logical operators.

Examples using the and(&&) operator

Example 1: number and number

345 && 567 // 567 
//resolved as
true && true
567

Example 2: number and string

345 && "hello" // "hello" 
//resolved as
true && true
"hello"

Example 3: null and string

null && "hello" // null 
//resolved as
false && true
null

Example 4: string and string

"person" and "hello" // "hello" 
//resolved as
true && true
"hello"

Example 5: null and boolean

null && true // null
//resolved as
false && true
null

Example 6: number and boolean

4 && true // true
//resolved as
true && true
true

Example 7: null and undefined

null && undefined // null
//resolved as
false && false
null

Examples using the or(||) operator

Example 1: number || number

345 || 567 // 345 
//resolved as
true || true
345

Example 2: number || string

345 || "hello" // 345
//resolved as
true || true
345

Example 3: null || string

null || "hello" // "hello" 
//resolved as
false || true
"hello"

Example 4: string || string

"person" || "hello" // "person"
//resolved as
true || true
"person"

Example 5: null || boolean

null || true // true
//resolved as
false || true
true

Example 6: number || boolean

4 || true // 4
//resolved as
true || true
4

Example 6: null || undefined

null || undefined // undefined
//resolved as
false || false
undefined

Conclusion

The dynamic nature of javascript makes that data types can be changed from one type to another and coercion is that mechanism of achieving this feat. Primitives can be coerced to either Boolean, Number or String.

For a more detailed explanation of coercion, you can read up this sister article on Coercion in javascript.