Будучи младшим веб-разработчиком, вы, возможно, сталкивались с терминами «null», «undefined» и «не определено» в своем путешествии по JavaScript. Эти концепции могут немного сбивать с толку, особенно когда вы только начинаете. Но не бойтесь! Мы вместе увидим различия между этими терминами, как они работают с примерами кода, и объясним некоторые потенциальные побочные эффекты, которые могут возникнуть, если вы не обратите внимание на их различия.

Нулевой

В JavaScript null — это специальное примитивное значение, которое представляет преднамеренное отсутствие какого-либо значения объекта. Он присваивается переменной, чтобы указать, что она не должна иметь значения.

const exampleVar = null;
console.log(exampleVar) // Output: null

Неопределенный

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

let exampleVar;
console.log(exampleVar); // Output: undefined

Не определен

Фраза «не определено» не является значением в JavaScript, таким как null или undefined, а скорее сообщением об ошибке, с которым вы столкнетесь, когда попытаетесь сослаться на необъявленную переменную.

console.log(nonexistentVar); // Output: ReferenceError: nonexistentVar is not defined

Итак, довольно просто, верно?

Не стесняйтесь манипулировать этими примерами прямо в консоли вашего браузера, чтобы ознакомиться с этими понятиями.

Побочные эффекты

Теперь поговорим о том, что нас действительно интересует.

Если вы не обращаете внимания на различия между null, undefined и «не определено», вы можете столкнуться с некоторыми проблемными побочными эффектами:

Неожиданное поведение

Когда функция ожидает определенный тип или значение, передача null или undefined может привести к ошибкам, сбоям или другим непредвиденным последствиям.

Рассмотрим следующую функцию, которая ожидает объект со свойством name:

function greet(person) {
  return `Hello, ${person.name}!`;
}

Если вы передаете объект со свойством name, функция работает так, как ожидалось:

const john = { name: 'John' };
console.log(greet(john)); // Output: Hello, John!

Однако, если вы передадите null или undefined, функция выдаст ошибку:

console.log(greet(null)); // Output: TypeError: Cannot read property 'name' of null
console.log(greet(undefined)); // Output: TypeError: Cannot read property 'name' of undefined

Чтобы избежать этого побочного эффекта, вы можете добавить условие для проверки, является ли параметр person объектом:

function greet(person) {
  if (!person || typeof person !== 'object') {
    return 'Hello, stranger!';
  }
  return `Hello, ${person.name}!`;
}

Трудности отладки

Представьте, что у вас есть функция, которая вычисляет общую стоимость товаров в корзине, включая налог:

function calculateTotal(items, taxRate) {
  let total = 0;

  for (const item of items) {
    total += item.price * item.quantity;
  }

  total += total * taxRate;
  return total;
}

Теперь предположим, что вы забыли объявить переменную taxRate и использовали ее непосредственно в вызове функции:

const items = [
  { price: 10, quantity: 2 },
  { price: 15, quantity: 1 },
];

console.log(calculateTotal(items, taxRate)); // Output: ReferenceError: taxRate is not defined

В этом случае сообщение об ошибке «ReferenceError: taxRate не определено» указывает на то, что переменная taxRate не была объявлена. Если вы неправильно поняли ошибку и подумали, что это означает, что taxRate просто не назначено (undefined), вы можете потратить время на поиски того, где должно было быть присвоено значение.

Чтобы исправить ошибку, нужно объявить и присвоить значение переменной taxRate:

const taxRate = 0.1;
console.log(calculateTotal(items, taxRate)); // Output: 38.5

Эти примеры подчеркивают важность понимания различий между null, undefined и «не определено» при написании и отладке кода JavaScript.

Зная об этих нюансах, вы можете избежать неожиданного поведения и повысить эффективность отладки. Вы сэкономите время и нервы, напишите более чистый код и создадите более надежные приложения.

Помните об этих концепциях, когда пишете код, и вы будете на пути к освоению JavaScript.



Присоединяйтесь к Medium по моей реферальной ссылке — Leo G.
Прочитайте все истории от Leo G. (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Leo G…medium.com



  1. Веб-документы MDN — null: этот ресурс содержит подробное объяснение значения null в JavaScript, а также несколько примеров: https://developer.mozilla.org/en-US /docs/Web/JavaScript/Reference/Global_Objects/null
  2. Веб-документы MDN — undefined: Как и по предыдущей ссылке, на этой странице представлено подробное описание значения undefined, а также примеры, которые помогут закрепить ваше понимание: https://developer. mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined
  3. Переполнение стека. В чем разница между null и undefined в JavaScript? В этой ветке переполнения стека подробно обсуждаются различия между null и undefined: https://stackoverflow.com/ вопросы/5076944/какая-есть-разница-между-нулевым-и-неопределенным-в-javascript
  4. Веб-документы MDN — ReferenceError: на этой странице подробно рассматривается сообщение об ошибке не определено (ReferenceError) и предоставляется информация о ее причинах и способах ее устранения: https://developer. mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError