JavaScript  — різниця між null та undefined

Кожен, хто розпочинає свою пригоду з JavaScript,  напевно, звернув свою увагу на два літерали: null та undefined. На перший погляд може здатися, що різниці між ними немає, але це зовсім не так. Ця стаття викриває їх подібності та відмінності, а також показує практичне застосування.

Що таке null?

null має дві особливості, які треба собі підкреслити:

• null показує, що змінна «пуста»;
• null має бути присвоєний.

Наприклад, ми присвоюємо значення null змінній a:

let a = null;
console.log(a);  // null

Що таке undefined?

undefined зазвичай означає, що змінна об'явлена, але не має присвоєного значення. Наприклад:

var a;
console.log(a);  // undefined 
console.log(b);  // undefined 
var b;

Ми можемо задекларувати змінну b в такий спосіб завдячуючи «Підняттю». Саме для реалізації цього був використаний оператор var.

Або при пошуку неіснуючих властивостей об'єкту ви отримаєте undefined:

let a = {};
console.log(a.fake);  // undefined

Подібні речі між null та undefined

В JavaScript існує всього шість неправдивих значень (Falsy). null і undefined є двома з них. Повний перелік:

• false
• 0
• ""
• null
• undefined
• NaN — Not A Number

Усі інші значення правдиві. Тобто об'єкт Boolean поверне true.

Також в JavaScript є шість простих типів. Знову-таки, null і undefined є двома з них. Повний перелік:

• Boolean
• Null
• Undefined
• Number
• String
• Symbol

Усе інше є об'єктом: функція, об'єкт, список тощо. Тобто метод Object.isObject(x) був би просто !Object.isPrimitive(x).

Досить цікаво, що typeof від null повертає тип object. Хоча не є екземпляром Object.

let a = null;
let b;

console.log(typeof a);  // object
console.log(typeof b);  // undefined

console.log(null instanceof Object)  // false  

Так склалося з історичних причин. Це було багом і Брендон Айк сам це визнає.

Варто також зауважити, що порівняння true та false з null та undefined повертають false:

null == true;  // false
null == false;  // false
null === true;  // false
null === false;  // false

undefined == true;  // false
undefined == false;  // false
undefined === true;  // false
undefined === false;  // false

Різниця: null !== undefined

Дослідивши спільні та відмінні риси, можна з упевненістю сказати, що те, що null строго не дорівнює undefined має сенс. null !== undefined // true

Але не строге порівняння null != undefined // false повертає false, тому що два значення перед порівнянням конвертуються до одного і того самого типу. Не зважаючи на те, що в цей самий час конвертація !!null та !!undefined повертає false.

В арифметичних операціях null конвертується в 0, а undefined повертає NaN:

null + 1  // 1
null / 10  // 0
null * 10  // 0

undefined + 1  // NaN
undefined / 10  // NaN
undefined * 10  // NaN

Тому як null в арифметичних операціях конвертується в 0, то функція isFinite повертає true для null, на відміну від undefined.

isFinite(undefined);  // false 
isFinite(null);  // true

Практичне застосування набутих знань

Завдячуючи тому, що null не справжній об'єкт (це єдиний не правдивий об'єкт. Порожні об'єкти правдиві), то ми маємо можливість написати функцію isNull:

const isNull = (val) => !val && typeof val === 'object';

isNull(null);  // true

А так би мала вигляд функція isUndefined:

const isUndefined = (value) => typeof value === 'undefined';

isUndefined(undefined);  // true

Якщо все-таки щось залишилось не обговореним, то запрошую в коментарі. Буду радий відповісти.