Учебное пособие по нулевому объединению (в JS) для нормальных людей

Привет! Вы когда-нибудь разочаровывались, пытаясь обработать пустые или неопределенные значения в своем коде JavaScript? Нулевое объединение — это новая функция, которая помогает сделать это намного проще. В этом посте мы объясним нулевое объединение.

Это означает простые термины, забавные примеры и отсутствие сложного жаргона. К концу вы будете писать чистый, краткий код JS в кратчайшие сроки.

Так что же такое нульское слияние? По сути, это короткий и простой способ предоставить значение по умолчанию, когда что-то равно null или не определено. Вместо беспорядочных вложенных троичных элементов или логических операторов ИЛИ вы можете использовать оператор двойного вопросительного знака (??) для объединения со значением по умолчанию.

Звучит запутанно? Не волнуйтесь, мы покажем вам, как это работает, на нескольких простых примерах. Пристегнитесь, это будет веселая поездка!

Что такое нулевой оператор объединения??

Вы когда-нибудь сталкивались с нулевыми значениями в JavaScript? Я знаю, что у меня есть. Итак, друг мой, позвольте представить вам нулевой оператор объединения (??). Этот малыш сделает вашу жизнь намного проще.

Так что же такое нулевой оператор объединения? По сути, это ярлык для предоставления значения по умолчанию, когда что-то может быть нулевым или неопределенным. Вместо того, чтобы писать:

let name = obj.name || 'default name';

Теперь вы можете просто написать:

let name = obj.name ?? 'default name';

?? оператор вернет левую часть, если она не нулевая (то есть нулевая или неопределенная), в противном случае она вернет правую часть. Таким образом, в приведенном выше примере, если obj.name не равно null или undefined, для имени будет установлено значение obj.name. Но если obj.name имеет значение null или не определено, имя будет "именем по умолчанию".

Довольно удобно, правда? Некоторые другие примеры:

let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25

let email = user.email ?? 'no email provided';

let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

Надеюсь, это поможет вам упростить условную логику в JavaScript.

Пример из реальной жизни, который всем нам близок

Случалось ли вам когда-нибудь заплатить за что-то, а потом понять, что вам не хватает нескольких долларов? Мы все были там. Нулевое слияние — это как найти несколько дополнительных долларов в кармане, чтобы вы могли позволить себе купить то, что хотите.

Допустим, вы отправляетесь в свою любимую кофейню за своим обычным утренним напитком. Вы подходите к прилавку с 3 долларами в руке и готовы сделать заказ. Но когда бариста сообщает вам общую сумму, получается 3,50 доллара после уплаты налогов.

Нулевое слияние похоже на внезапное воспоминание о том, что у вас есть еще один доллар в кармане, так что вы все еще можете выпить кофе. Фу!

В JavaScript нулевое объединение — это способ предоставить значение по умолчанию на случай, если что-то разрешается как нулевое или неопределенное. Например, предположим, что у вас есть функция, которая может возвращать или не возвращать значение:

function getCoffeePrice() {

// Returns $3.50 or undefined

}

let price = getCoffeePrice() ?? '$3.50';

Здесь, если getCoffeePrice() возвращает undefined, price по умолчанию будет '3,50$ благодаря ?? нулевой оператор объединения. Так что в любом случае вы гарантированно получите цену за свой кофе.

Объединение с нулевым значением позволяет вашему коду быть более устойчивым, предоставляя резервные значения по умолчанию, когда переменные имеют значение null или не определены. Точно так же, как найти лишний доллар в кармане в кафе, это гарантирует, что у вас есть то, что вам нужно для завершения транзакции. Довольно удобно, правда?

Теперь вы можете быть спокойны, зная, что разбираетесь в объединении нулей как профессионал. Удачного программирования и приятного вам кофе!

Использование нулевого объединения в JavaScript

Нулевой оператор объединения (??) возвращает свой левый операнд, если он не нулевой; в противном случае возвращается правильный операнд.

Смущенный? Давайте сломаем это. "Нулевое" значение является либо нулевым, либо неопределенным. Таким образом, оператор ?? проверяет, является ли левое значение нулевым, и если да, то вместо этого возвращает правое значение.

Например:

const name = bob ?? 'anonymous';

Это присвоит значение имени «bob», если bob определен. Если bob не определен или имеет значение null, вместо этого будет назначена строка «anonymous».

Почему это полезно?

Без ?? оператора, вам нужно будет сделать следующее:

const name = bob !== null && bob !== undefined ? bob : 'anonymous';

?? Оператор дает нам более короткий и понятный синтаксис, позволяющий делать то же самое.

Его можно использовать где угодно в JavaScript — в переменных, аргументы функции, свойства объекта и т. д. Везде, где вы обычно используете || (или) для значений по умолчанию, теперь вы можете использовать ?? для "нулевого" значения по умолчанию.

Несколько примеров:

const foo = null ?? 'default string';

// foo is 'default string'

const bar = 0 ?? 42;

// bar is 0

const qux = 0 || 42;

// qux is 42 - || returns first truthy value

function doSomething(x = 0) {

x = x ?? 10;

// If x is nullish, set default of 10

console.log(x);

}

doSomething(null); // Prints 10

doSomething(5); // Prints 5

Надеюсь, это поможет объяснить нулевой оператор объединения!

Почему нулевое объединение лучше, чем OR (||)

Операция ИЛИ (||) вернет первое истинное значение.

Операция ИЛИ (||) работает, возвращая первое попавшееся истинное значение. Если оба значения ложны, будет возвращено последнее значение. Например:

let name = null;

let user = name || 'John'; // user is 'John'

Здесь name имеет значение null (falsy), поэтому user получает второе значение, "Джон".

Нулевой оператор объединения (??) умнее.

Нулевой оператор объединения (??) был представлен в ES2020 и немного умнее, чем ИЛИ (||). Он вернет первое определенное значение (не null/undefined). Поэтому, если первое значение является пустой строкой, 0 или false, оно вернет это значение. Например:

let name = '';

let user = name ?? 'John'; // user is ''

Здесь name — пустая строка, поэтому user получает name (первое определенное значение).

Нулевой оператор объединения позволяет нам более четко предоставлять значения по умолчанию. Мы можем установить значения по умолчанию для нулевых/неопределенных значений, не беспокоясь о ложных значениях, таких как 0, пустые строки, ложь и т. д.

Например, у нас есть функция, которая возвращает возраст пользователя, но иногда этот возраст равен нулю:

function getAge() {

return age; // could be null

}

let userAge = getAge() || 30; // Uses OR, not ideal

Здесь, если age равно 0, '' или false, userAge будет ошибочно равно 30.

Использование Nullish Coalescing Operator исправляет это:

let userAge = getAge() ?? 30; // Uses ??

Теперь userAge будет равно 30, только если age имеет значение null или не определено. Будет использоваться любое другое ложное значение, например 0.

Подводя итог, используйте нулевой оператор объединения (??) вместо ИЛИ (||), если вы хотите предоставить значение по умолчанию для null/undefined, но не для ложных значений, таких как 0, пустые строки или false.

Ваш код будет чище и менее подвержен ошибкам!

Часто задаваемые вопросы об нулевом слиянии

Итак, вы слышали об этом причудливом новом операторе Nullish Coalescing (??) в JavaScript и у вас есть вопросы. Не беспокойтесь, я вас прикрою!

С какими типами данных работает Nullish Coalescing?

• Объединение с нулевыми значениями работает с любыми типами данных в JavaScript, включая:
• Числа: 0 ?? 1 // возвращает 1
• Строки: '' ?? 'Привет' // Возвращает 'Привет'
• Булевы значения: false ?? true // возвращает true
• Объекты: {} ?? {имя: 'Джон'} // Возвращает {имя: 'Джон'}
• Массивы: [] ?? [1, 2, 3] // Возвращает [1, 2, 3]
• И многое другое!

В чем разница между || (ИЛИ) и ?? (Нулевое объединение) Операторы?

|| Оператор (ИЛИ) вернет правый операнд, если левый операнд ложный (ложь, 0, пустая строка, null, undefined, NaN).

?? (объединение нулей) возвращает правый операнд только в том случае, если левый операнд имеет значение null или не определен.

Итак, ключевое отличие в том, что ?? считает 0 и пустые строки допустимыми значениями, тогда как || нет.

Когда следует использовать ?? Более ||?

Используйте ??, если вы хотите указать значение по умолчанию для null или undefined, но считаете 0 и пустые строки допустимыми значениями.

Используйте || когда вы хотите предоставить запасной вариант для любого "ложного" значения.

Надеюсь, это поможет прояснить некоторые из тех животрепещущих вопросов, которые у вас возникали об операторе Nullish Coalescing! Дайте мне знать, если у вас есть другие вопросы.

Заключение

Теперь вы знаете все о нулевом объединении и о том, как оно работает в JavaScript. Довольно просто, правда? Этот маленький оператор может сэкономить ваше время и сделать ваш код чище, предоставив значения по умолчанию в сжатой форме.

Так что идите вперед и объединяйте нулевые ценности сколько душе угодно! Вы уже на пути к освоению современных функций JavaScript.

Удачного кодирования!