Свойство undefined в JavaScript — обработка значений

В этом руководстве вы узнаете о undefined в JavaScript, обработке значений и о том, как эффективно с ним обращаться.

Если вы работали с другими языками программирования, такими как Java или C#, вы можете знать, что эти языки имеют null значение.

JavaScript также имеет null значение. Кроме того, он имеет undefined значение и представляют пустые значения в JavaScript.

undefined — это примитивный тип в JavaScript и имеет ровно одно значение.

1) Доступ к неинициализированной переменной

Когда вы объявляете переменную и не инициализируете ее значением, переменная будет иметь значение undefined. Например:

let counter;
console.log(counter); // undefined

Хорошей практикой является всегда инициализировать переменную, когда это возможно. В этом примере вы можете инициализировать переменную counter нулем, например:

let counter = 0;
console.log(counter); // 0

2) Доступ к несуществующему свойству объекта

Если вы получите доступ к несуществующему свойству объекта, вы получите undefined. Например:

let counter = {
   current: 0
};
console.log(counter.max); // undefined

В этом примере объект counter имеет одно свойство current. Доступ к свойству max, которого нет в объекте counter, возвращает undefined.

Хорошей практикой является проверка существования свойства перед доступом к нему. JavaScript предоставляет вам несколько способов сделать это.

И самый распространенный способ проверить, есть ли у объекта свойство, — использовать оператор in :

'propertyName' in objectName

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

В следующем примере оператор in используется для проверки наличия свойства max в объекте counter перед доступом к нему:

let counter = {
   current: 0
};

if('max' in counter) {
    console.log(counter.max);
}

Если вы хотите присвоить значение по умолчанию, когда свойство объекта не существует, вы можете использовать нулевой оператор объединения( ?? ):

const propValue = object.propName ?? defaultValue;

В этом синтаксисе нулевой оператор объединения( ?? ) возвращает defaultValue, если object.propName не undefined или равно null.

Обратите внимание, что нулевой оператор объединения доступен начиная с ECMAScript 2020.

let counter = { current: 0 };
const max = counter.max ?? 100;

3) Функциональные параметры

Когда вы вызываете функцию с несколькими параметрами, вы часто передаете одинаковое количество аргументов. Например:

const formatCurrency =(amount, currency) => {
   return currency === '$' ?
     `$${amount}`: `${amount} ${currency}`;
}

Функция formatCurrency() имеет два параметра. При вызове вы можете передать два аргумента следующим образом:

formatCurrency(100,'$');
 // $100

Возвращаются $100, как и ожидалось.

Но когда вы вызываете formatCurrency() и не передаете все аргументы, параметры внутри функции становятся undefined. Например:

formatCurrency(100);
 // 100 undefined

Чтобы избежать этой ситуации, вы можете установить значение по умолчанию для параметров функции следующим образом:

const formatCurrency =(amount, currency = '$') => {
   return currency === '$' ?
     `$${amount}`: `${amount} ${currency}`;
}

И при вызове без передачи второго аргумента вы получите правильное значение:

formatCurrency(100);
 // $100

4) Функции возвращают значение

Функция, не имеющая оператора return, неявно возвращает значение undefined. Например:

const log =(message) => {
  const time =(new Date()).toLocaleTimeString();
  console.log(`${time}: ${message}`);
};

const result = log('Hi');
console.log(result); // undefined

Точно так же, когда функция имеет оператор return без выражения, она также возвращает значение undefined. Например:

const add =(a,b) => {
    const result = a + b;
    return;
}

let result = add(10,20);
console.log(result);  // undefined

Рассмотрим следующий пример:

const add =(a,b) => {
    return 
       a + b;
};

let result = add(10,20);
console.log(result); // undefined

Функция add() возвращает undefined. Вместо этого он должен был вернуть 30.

Проблема в том, что когда вы создаете новую строку между ключевым словом return и возвращаемым выражением( a + b ), компилятор Javascript автоматически вставляет точку с запятой(;) перед новой строкой. Эта функция называется автоматической вставкой точки с запятой(ASI) в JavaScript.

Функция add() будет выглядеть для компилятора JavaScript следующим образом:

const add =(a,b) => {
    return;
       a + b;
};

Вот почему вы получаете undefined в качестве возвращаемого результата.

5) Доступ к элементам массива за пределами границ

При доступе к элементу массива, находящемуся за пределами границ, вы получите undefined значение. Например:

const colors = ['red', 'green', 'blue'];
console.log(colors[3]); // undefined

В этом примере в массиве colors нет ни одного элемента с индексом 3. Следовательно, colors[3] возвращает значение undefined.

Заключение

• undefined в JavaScript — это примитивный тип, который имеет единственное значение.
• Доступ к неинициализированной переменной возвращает undefined.
• Доступ к несуществующему свойству объекта возвращает данное свойство.
• При доступе к элементу массива, находящемуся за пределами границ, возвращается значение.
• Функция без оператора return или с оператором return, но без выражения возвращает значение undefined.