Tag: null

Difference-null and undefined

null vs undefined

When writing my previous article nullish coalescing operator, i learned about the differences between null and undefined. Before that i thought both are more or less same but after getting to know about falsy values in javascript. Now i know the difference between them.

Null:

In English the literal meaning of null is having no value. null indicates the intentional absence of value in programming. null is manually assigned by programmers to variable which is declared, initialized and currently hold no value in Javascript. But a value can be expected in future. When we assign null to a variable it is empty or blank. null is of object data type in javascript. An object can be emptied by assigning it to null.

Syntax:
var a = null;

Here we have assigned value null to variable a.

undefined:

undefined means ‘not defined’. Here we declare a variable and does not assign a value to it. The value of undefined variable is set by javascript as undefined.

Syntax:
var a;

Here a variable is created at runtime and if we haven’t passed an argument for a function parameter default value is undefined. When a function doesn’t return a value it is undefined.

Similarites:

  • null and undefined denote the absence of value
  • Both are primitive Javascript types
  • They are falsy values
  • undefined and null are loosely equal (==)

null vs undefined:

Using typeof:

When we use typeof it returns object as type for null and undefined as type for undefined variable

var a = null;
console.log(typeof(a));
var b;
console.log(typeof(b));

Output:

object

undefined

Using primitive operations:

In primitive operations null is converted to 0 and undefined to NaN.

var a = 10;
var b;
var c = a+b;
console.log(c);

Output:

NaN

var a = 10;
var b = null;
var c = a+b;
console.log(c);

Output:

10

nullundefined
It is an assigned valueIt is not an assigned value
It represents an empty or unknown valueHere variable is declared but not assigned any value
It is a primitive type object in javascriptIt is a ES1 feature and is a primitive type by itself
null indicates absence of value for a variableundefined indicates absence of variable itself
Using typeof returns objectUsing typeof returns undefined
By primitive operations null is converted to zero (0)By primitive operations undefined is converted to NaN

Why Javascript needs nullish coalescing operator?

Javascript provides a double question mark operator (??) which is known as nullish coalescing operator. It is introduced in ES2020. It is a logical operator.

According to MDN, nullish coalescing operator(??) is defined as “a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.”

Nullisch coalescing is used to set default values when dealing with null or undefined.

In Javascript we already have a logical OR operator || which returns the truthy values.

Here nullish coalescing ?? deals with falsy values.

So, now what are falsy values in javascript?

  • Null
  • Undefined
  • 0
  • NaN
  • False
  • ” “

Using logical OR operator ||:

let a = 0;
let b = 2;
console.log(a||b); //checks the first true value.

Output:0

let a = false;
let b=2;
console.log(a||b); //checks the first true value.

Output: 2

let a = 1;
let b=2;
console.log(a||b); // checks the first true value.

Output: 1

Using nullish coalescing operator:

let a = 0;
let b = 2;
console.log(a??b);

Output: 0

let a = false;
let b=2;
console.log(a??b);

Output: false

let a = null;
let b = 2;
console.log(a??b);

Output: 2

let a = undefined;
let b = 2;
console.log(a??b);

Output: 2

let a = 1;
let b=2;
console.log(a??b);.

Output: 1

For nullish operators only null and undefined are falsy values.

We often use logical operators for assigning a default value to a variable. Nullish coalescing operator is used when you want to evaluate the second expression only when first expression is null or undefined.

Browser Support:

The browsers supported by nullish coalescing operator are:

  • chrome 80
  • firefox 72
  • safari 13.1
  • opera 67
  • edge 80

Key points to remember:

  • We cannot chain with AND && or OR || operator.
  • ?? operator returns the second value if first value is null or undefined.