TypeScript - null и undefined

Здравствуйте, будущие программисты! Сегодня мы погрузимся в захватывающую тему, которая часто сбивает с толку начинающих: разницу между null и undefined в TypeScript. Не волнуйтесь, если вы чувствуете себя немного перегруженными — помню, когда впервые столкнулся с этими концепциями, я тоже чесал голову! Но к концу этого урока вы将成为 профессионалом в различении этих двух специальных значений. Поехали!

Что такое null?

В TypeScript (и JavaScript) null — это специальное значение, которое中表示故意 отсутствие любого объектного значения. Это как сказать: "Здесь должно быть что-то, но сейчас здесь ничего нет."

Давайте рассмотрим несколько примеров, чтобы лучше понять это:

let myPet: string | null = null;
console.log(myPet); // Вывод: null

// Позже в коде...
myPet = "Fluffy";
console.log(myPet); // Вывод: Fluffy

В этом примере мы объявляем переменную myPet, которая может быть строкой или null. Initially, мы устанавливаем ее в null, что означает, что у нас еще нет питомца. Позже, когда у нас появился питомец, мы присваиваем имя "Fluffy" переменной myPet.

Вот еще один пример:

function findUser(id: number): { name: string } | null {
// Представьте, что мы ищем в базе данных
if (id === 1) {
return { name: "Alice" };
} else {
return null;
}
}

let user = findUser(1);
console.log(user); // Вывод: { name: "Alice" }

user = findUser(2);
console.log(user); // Вывод: null

В этом случае функция findUser возвращает либо объект пользователя, либо null, если пользователь не найден. Это распространенный паттерн в программировании — использование null для指示, что搜索 или операция не дали результата.

Что такое undefined?

Теперь давайте поговорим о undefined. Это специальное значение представляет переменную, которая была объявлена, но еще не была присвоена значению. Это как пустая коробка — она существует, но пока ничего в ней нет.

Вот несколько примеров для иллюстрации undefined:

let myName: string;
console.log(myName); // Вывод: undefined

// Позже в коде...
myName = "John";
console.log(myName); // Вывод: John

function greet(name?: string) {
console.log(name);
}

greet(); // Вывод: undefined
greet("Alice"); // Вывод: Alice

В первом случае мы объявляем myName, но не присваиваем ему значения. TypeScript автоматически assigns ему значение undefined. Позже мы присваиваем значение, и оно уже не undefined.

В функции greet мы используем optional параметр. Если мы вызываем функцию без предоставления аргумента, параметр name будет undefined.

Вот еще один сценарий, где вы можете encountered undefined:

let person = {
name: "Bob",
age: 30
};

console.log(person.name); // Вывод: Bob
console.log(person.job); // Вывод: undefined

В этом случае person.job равен undefined, потому что мы never defined свойство job для нашего объекта person.

Null vs. Undefined: Основные различия

Теперь, когда мы рассмотрели null и undefined separately, сравним их lado a lado, чтобы лучше понять их различия.

Aspect	null	undefined
Meaning	Умышленное отсутствие любого объектного значения	Переменная объявлена, но не присвоена значению
Type	Объект	Undefined
In JSON	Valid	Invalid
Default function parameter	Не используется в качестве умолчания	Используется в качестве умолчания для optional параметров
Equality	null == undefined (true), null === undefined (false)	undefined == null (true), undefined === null (false)

Давайте рассмотрим несколько примеров кода для проиллюстрировать эти различия:

// Type checking
console.log(typeof null);       // Вывод: "object"
console.log(typeof undefined);  // Вывод: "undefined"

// JSON serialization
console.log(JSON.stringify({ a: null }));     // Вывод: {"a":null}
console.log(JSON.stringify({ a: undefined })); // Вывод: {}

// Default function parameters
function sayHello(name: string = "World") {
console.log(`Hello, ${name}!`);
}

sayHello();        // Вывод: Hello, World!
sayHello(undefined); // Вывод: Hello, World!
sayHello(null);    // Вывод: Hello, null!

// Equality
console.log(null == undefined);  // Вывод: true
console.log(null === undefined); // Вывод: false

На практике выбор между null и undefined часто зависит от предпочтений лично или команды. Однако понимание различий может помочь вам писать более точный и безошибочный код.

Вот последний пример, чтобы все связать вместе:

function processUser(user: { name: string, age?: number } | null | undefined) {
if (user === null) {
console.log("User explicitly set to null");
} else if (user === undefined) {
console.log("User not provided");
} else {
console.log(`Processing user: ${user.name}, Age: ${user.age ?? "Unknown"}`);
}
}

processUser(null);                    // Вывод: User explicitly set to null
processUser(undefined);               // Вывод: User not provided
processUser({ name: "Alice" });       // Вывод: Processing user: Alice, Age: Unknown
processUser({ name: "Bob", age: 30 }); // Вывод: Processing user: Bob, Age: 30

Эта функция demonstrates, как мы можем обрабатывать null, undefined и valid объекты пользователей differently в реальном сценарии.

И вот и все! Вы только что узнали о null и undefined в TypeScript. Помните, что практика makes perfect, так что не бойтесь экспериментировать с этими концепциями в своем коде. Счастливого кодирования, и пусть ваши переменные всегда будут намеренно null или undefined!

Credits: Image by storyset