Undefined что это за ошибка как исправить

Undefined что это за ошибка как исправить

undefined в JavaScript — настоящий кошмар начинающего фронтендера. В чём отличие undefined и null, если даже сравнение null == undefined выводит true, и как обрабатывать ошибку undefined? Давайте разбираться.

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.

  1. Что такое undefined в JavaScript
  2. Как избежать undefined в JavaScript
  3. Значение undefined в массивах
  4. Отличие null и undefined в JavaScript
  5. Заключение

undefined является специальным значением. Согласно спецификации ECMAScript, undefined в JavaScript можно получить при доступе к неинициализированным переменным, несуществующим свойствам объекта, несуществующим элементам массива, etc. Пример:

let number;  
number;     // => undefined  
let movie = { name: 'Interstellar' };  
movie.year; // => undefined  
let movies = ['Interstellar', 'Alexander'];  
movies[3];  // => undefined

Как видим, undefined выводится при попытке доступа к:

  • неинициализированной переменной number;
  • несуществующему свойству объекта movie.year;
  • несуществующему элементу массива movies[3].

Оператор typeof возвращает строку undefined для неопределённого значения:

typeof undefined === 'undefined'; // => true

Оператор typeof отлично подходит для проверки значения undefined в JavaScript:

let nothing;  
typeof nothing === 'undefined';   // => true

Как избежать undefined в JavaScript

Неинициализированная переменная

Объявленная переменная, которая еще не имеет значения (не инициализирована), по умолчанию undefined. Пример:

let myVariable;  
myVariable; // => undefined

Переменная myVariable уже объявлена, но ещё не имеет присвоенного значения. Попытка обратиться к ней закончится выводом undefined. Чтобы это исправить, достаточно присвоить переменной значение. Чем меньше переменная существует в неинициализированном состоянии, тем лучше.

Ниже приведены способы решения проблемы.

1. const и let вместо var

Объявленные таким образом объекты и переменные находятся в области видимости, ограниченной текущим блоком кода, и находятся во временной мёртвой зоне до момента присвоения им значения.

При использовании неизменяемых данных (констант) рекомендуется инициализировать их как const:

const myVariable = 'initial'

Константа не подвергается неинициализированному состоянию, и получить значение undefined  в этом случае невозможно.

Если вам нужно менять значение переменной, то обозначьте её как let и также присваивайте ей начальное значение:

let index = 0

Проблема var заключается в поднятии переменных: где бы ни находилось объявление, это равнозначно тому, что переменную объявили в начале кода.

function bigFunction() {  
  // код...
  myVariable; // => undefined
  // код...
  var myVariable = 'Initial value';
  // код...
  myVariable; // => 'Initial value'
}
bigFunction();

В этом случае переменная myVariable содержит undefined до получения значения:

myVariable = 'Initial value'

Если же переменную объявить как let, она останется недоступной до момента присвоения ей значения. Таким образом, использование const или let снизит риск получения значения undefined в JavaScript.

2. Усиление связности

Связность характеризует степень взаимосвязи элементов модуля (пространства имён, класса, метода, блока кода). Сильная связность предпочтительнее, поскольку предполагает, что элементы модуля должны фокусироваться исключительно на одной задаче. Это поможет модулю быть:

  • сфокусированным и понятным;
  • легко поддерживаемым и поддающимся рефакторингу;
  • многоразовым;
  • простым для тестирования.

undefined в JavaScript и связность

Блок кода сам по себе может считаться небольшим модулем. Чтобы извлечь выгоду из преимуществ сильной связности, нужно держать переменные как можно ближе к блоку кода, который их использует.

Вот классический пример того, как не надо делать:

function someFunc(array) {  
  var index, item, length = array.length;
  // некоторый код...
  // некоторый код...
  for (index = 0; index < length; index++) {
    item = array[index];
    // некоторый код...
  }
  return 'some result';
}

index, item и length объявляются в начале функции, но используются они лишь ближе к концу. Всё время между объявлением переменной в начале и до использования её в цикле index и item не инициализируются и выводят undefined. Разумнее переместить переменные ближе к месту их применения:

function someFunc(array) {  
  // некоторый код...
  // некоторый код...
  const length = array.length;
  for (let index = 0; index < length; index++) {
    const item = array[index];
    // некоторый код 
  }
  return 'some result';
}

Доступ к несуществующему свойству

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

let favoriteMovie = {  
  title: 'Blade Runner'
};
favoriteMovie.actors; // => undefined

favoriteMovie — объект с одним значением title. Доступ к несуществующему свойству actors приведёт к выводу undefined.

Сам по себе доступ к не вызовет ошибку, а вот при попытке получить значение из несуществующего свойства выведется ошибка:

TypeError: Cannot read property <prop> of undefined

Проблема в особенностях JavaScript: свойство может быть установлено или отсутствовать. Хорошее решение — установка правил, которые обязывают задать свойствам значения.

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

Реализуем функцию append(array, toAppend), которая добавляет в начале и/или в конце массива новые элементы:

function append(array, toAppend) {  
  const arrayCopy = array.slice();
  if (toAppend.first) {
    arrayCopy.unshift(toAppend.first);
  }
  if (toAppend.last) {
    arrayCopy.push(toAppend.last);
  }
  return arrayCopy;
}
append([2, 3, 4], { first: 1, last: 5 }); // => [1, 2, 3, 4, 5]  
append(['Hello'], { last: 'World' });     // => ['Hello', 'World']  
append([8, 16], { first: 4 });            // => [4, 8, 16]

Поскольку объект toAppend может удалять первые или последние свойства, необходимо проверить их существование с помощью условий if(toAppend.first){} и if(toAppend.last){}.

Вот только undefined, как false, null, 0, NaN и ' ', является ложными значением, а в текущей реализации функция append() не позволяет вставлять ложные элементы:

append([10], { first: 0, last: false }); // => [10]

0 и false — ложные значения, потому что if (toAppend.first){} и if (toAppend.last){} фактически сравниваются с ложными значениями, и эти элементы не вставляются в массив. Функция возвращает исходный массив [10] без изменений.

1. Наличие свойства

К счастью, JavaScript предлагает множество способов определить, имеет ли объект определённое свойство:

  • obj.prop !== undefined в JavaScript позволяет проверить undefined, сравнив с ним объект;
  • typeof obj.prop !== 'undefined' проверяет тип значения свойства;
  • obj.hasOwnProperty('prop') проверяет объект на наличие собственного свойства;
  • 'prop' in obj проверяет объект на наличие собственного или унаследованного свойства.

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

function append(array, toAppend) {  
  const arrayCopy = array.slice();
  if ('first' in toAppend) {
    arrayCopy.unshift(toAppend.first);
  }
  if ('last' in toAppend) {
    arrayCopy.push(toAppend.last);
  }
  return arrayCopy;
}
append([2, 3, 4], { first: 1, last: 5 }); // => [1, 2, 3, 4, 5]  
append([10], { first: 0, last: false });  // => [0, 10, false]

'first' in toAppend ( как и 'last' in toAppend) выводит true, независимо от существующего свойства. В других случаях выводится — false.

Использование оператора in устраняет проблему со вставкой ложных элементов 0 и false. Теперь добавление элементов в начале и в конце массива [10] приводит к ожидаемому результату: [0, 10, false].

2. Деструктуризация доступа к свойствам объекта

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

const object = { };  
const { prop = 'default' } = object;  
prop; // => 'default'

Применяя преимущества деструктуризации объекта, реализуем quote():

function quote(str, config) {  
  const { char = '"', skipIfQuoted = true } = config;
  const length = str.length;
  if (skipIfQuoted
      && str[0] === char
      && str[length - 1] === char) {
    return str;
  }
  return char + str + char;
}
quote('Hello World', { char: '*' });        // => '*Hello World*'  
quote('"Welcome"', { skipIfQuoted: true }); // => '"Welcome"'

const { char = '"', skipIfQuoted = true } = config в одной строкe извлекает свойства char и skipIfQuoted из объекта config.

Если некоторые свойства недоступны в объекте config,  деструктуризация задаёт значения по умолчанию: '"' для char и false для skipIfQuoted. К счастью, функцию можно улучшить.

Переместим деструктуризацию в раздел параметров и установим значение по умолчанию (пустой объект { }) для параметра config, чтобы пропустить второй аргумент, когда будет достаточно значений по умолчанию:

function quote(str, { char = '"', skipIfQuoted = true } = {}) {  
  const length = str.length;
  if (skipIfQuoted
      && str[0] === char
      && str[length - 1] === char) {
    return str;
  }
  return char + str + char;
}
quote('Hello World', { char: '*' }); // => '*Hello World*'  
quote('Sunny day');                  // => '"Sunny day"'

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

3. Свойство по умолчанию

Есть простой способ установить значения по умолчанию для свойств объекта, и имя ему Spread syntax:

const unsafeOptions = {  
  fontSize: 18
};
const defaults = {  
  fontSize: 16,
  color: 'black'
};
const options = {  
  ...defaults,
  ...unsafeOptions
};
options.fontSize; // => 18  
options.color;    // => 'black'

Инициализатор объекта распространяет свойства из исходных объектов defaults и unsafeOptions. Важен порядок, в котором указаны исходные объекты: свойства более позднего исходного объекта перезаписывают более ранние. Независимо от ситуации, объект всегда содержит полный набор свойств, и появление undefined невозможно.

Параметры функции

Функция, имеющая определённые параметры, должна вызываться с одинаковым количеством аргументов. В таком случае параметры получают ожидаемые значения:

function multiply(a, b) {  
  a; // => 5
  b; // => 3
  return a * b;
}
multiply(5, 3); // => 15

При вызове функции multiply(5, 3) параметры a и b получают соответствующие значения 5 и 3. Умножение рассчитывается как ожидаемое: 5 * 3 = 15.

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

Лучшим подходом является использование параметров по умолчанию из ES2015:

function multiply(a, b = 2) {  
  a; // => 5
  b; // => 2
  return a * b;
}
multiply(5);            // => 10  
multiply(5, undefined); // => 10

Значение b = 2 в сигнатуре функции гарантирует, что если b получит значение undefined, то по умолчанию параметр изменится на 2.

Возвращаемое значение функции

В JavaScript функция, которая не имеет оператора return, возвращает значение undefined:

function square(x) {  
  const res = x * x;
}
square(2); // => undefined

То же происходит, если return присутствует, но без какого-либо выражения рядом:

function square(x) {  
  const res = x * x;
  return;
}
square(2); // => undefined

Указывая значение для return, можно получить желаемый результат:

function square(x) {  
  const res = x * x;
  return res;
}
square(2); // => 4

Теперь вызов функции выведет нужное значение.

Оператор void

Оператор void выполняет выражение и возвращает undefined вне зависимости от результата:

void 1;                    // => undefined  
void (false);              // => undefined  
void {name: 'John Smith'}; // => undefined  
void Math.min(1, 3);       // => undefined

Одним из вариантов использования оператора void является переопределение результата выполнения выражения и возврат undefined в случае возникновения неожиданных результатов выполнения функции.

Значение undefined в массивах

Вы получаете undefined при попытке доступа к элементу массива с индексом вне пределов массива.

const colors = ['blue', 'white', 'red'];  
colors[5];  // => undefined  
colors[-1]; // => undefined

Массив colors имеет 3 элемента, поэтому корректные индексы равны 0, 1 и 2. Поскольку в индексах массива 5 и -1 нет элементов, значения colors[5] и colors[-1] получают значение undefined.

В JavaScript вы можете столкнуться с так называемыми разрежёнными массивами. Эти массивы имеют пробелы, то есть на некоторых индексах не определены никакие элементы. Когда делаем попытку получить доступ к пустому значению в разрежённом массиве, на выходе получаем  undefined:

const sparse1 = new Array(3);  
sparse1;       // => [<empty slot>, <empty slot>, <empty slot>]  
sparse1[0];    // => undefined  
sparse1[1];    // => undefined  
const sparse2 = ['white',  ,'blue']  
sparse2;       // => ['white', <empty slot>, 'blue']  
sparse2[1];    // => undefined

sparse1 создается путем вызова конструктора Array с числовым первым аргументом. Он имеет 3 пустых элемента. sparse2 создается с литералом массива, второй элемент которого отсутствует. В любом из этих массивов доступ к пустому элементу оценивается как undefined.

Отличие null и undefined в JavaScript

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

Допустим, переменная number определена, но ей не назначено начальное значение:

let number;  
number; // => undefined

То же самое произойдёт при попытке доступа к несуществующему свойству объекта:

const obj = { firstName: 'Dmitri' };  
obj.lastName; // => undefined

Или переменная должна ожидать возвращение объекта функции, но по какой-то причине создание объекта невозможно. В этом случае null является значимым индикатором недостающего объекта. Например, clone() — это функция, которая клонирует простой объект JavaScript. Ожидается, что функция вернёт объект:

function clone(obj) {  
  if (typeof obj === 'object' && obj !== null) {
    return Object.assign({}, obj);
  }
  return null;
}
clone({name: 'John'}); // => {name: 'John'}  
clone(15);             // => null  
clone(null);           // => null

Но clone() может быть вызван с пустым аргументом: 15 или null. В этом случае функция не может создать клон, поэтому возвращает null — индикатор отсутствующего объекта.

В JavaScript существуют проверки на null и undefined. Оператор typeof демонстрирует различие между двумя значениями:

typeof undefined; // => 'undefined'  
typeof null;      // => 'object'

Строгий оператор равенства === также отличает undefined от null:

let nothing = undefined;  
let missingObject = null;  
nothing === missingObject; // => false

Вам также может быть интересна наша статья про обработку ошибок в JavaScript.

Заключение 

Стратегия борьбы с undefined в JavaScript:

  1. Уменьшить использование неинициализированных переменных.
  2. Сделать жизненный цикл переменных коротким и близким к источнику их использования.
  3. Назначить начальное значение переменным.
  4. Использовать const или let.
  5. Проверять наличие свойств или заполнить небезопасные объекты по умолчанию.
  6. Использовать значения по умолчанию для некритичных параметров функции.
  7. Избегать использования разрежённых массивов.

Перевод статьи «7 tips to handle undefined in JavaScript»

Источник

В середине декабря 2016 года (с 16 декабря и после) ряд пользователей электронных почтовых ящиков на Yandex массово столкнулись с невозможностью отправки своей электронной корреспонденции и соответствующими сообщениями «undefine error», «error data failed» и рядом других в Яндекс почте. При этом повторная попытка отправить электронную почту также оканчивается неудачно, система выдаёт ту же ошибку, и что далее делать в данной ситуации пользователь не знает и не представляет. В этой статье я расскажу, что это за ошибка Undefined в Яндексе, каковы могут быть её причины, и что делать, если произошла данная ошибка.

Картинка с изображением Яндекс Почта

Содержание

  1. Что за ошибка в почтовом сервисе Яндекса
  2. Как исправить ошибку Undefined в Яндекс почта
  3. Заключение

Что за ошибка в почтовом сервисе Яндекса

Ответ на вопрос о том, что это ошибка, следует начать с перевода текста самой ошибки. В переводе с английского языка «undefined» означает «неопределённый». Соответственно, под данным термином система Яндекса обозначает неопределённую ошибку, суть которой системе не известна (или, при использовании языка Javascript, такое значение получается при обращении к переменной или объекту, которые были созданы, но ещё не инициализированы).

Соответственно, если мы имеем дело с «неопределённой» ошибкой, то причины возникновения последней могут быть различными. Некоторые из специалистов связанных с «Яндекс» выдвигают версию о DOS-атаке, направленной на серверы Яндекса, к которой могли приложить руку зарубежные хакеры (выдвигается даже достаточно сомнительная версия о «мести» компании Гугл за скандальное антимонопольное дело, инициированное компанией «Яндекс»).

Изображение Элетронной Почты

Тем не менее, сервис Яндекс.Почта, которым пользуются около 27 миллионов человек, примерно с 16 декабря стал регулярно выдавать ошибку «undefined error», а частная и корпоративная почта многих почтовых аккаунтов на Яндекс не была вовремя доставлена к месту назначения.

Как исправить ошибку Undefined в Яндекс почта

Поскольку, как я уже упоминал чуть выше, это ошибка не пользовательская, а самого сервиса Яндекс, это существенно повлиять на развитие ситуации вы вряд ли сможете. Тем не менее, могу порекомендовать вам ряд действий, способных помочь в вопросе устранения ошибки в почтовом сервисе Яндекса. Итак:

  1. Обратитесь за помощью в техническую поддержку Яндекса. По заверению специалистов техподдержки, они оперативно реагируют на подобные ошибки, и достаточно быстро исправляют ситуацию;
  2. Попробуйте очистить кэш и куки вашего браузера (к примеру, на Мозилла это делается переходом в «Настройки», затем во вкладку «Приватность», и нажатием на «Удалить вашу недавнюю историю» и «Удалить отдельные куки»);
  3. Попробуйте зайти на свой почтовый ящик и выполнить отправку своей почты с другого браузера, это поможет исправить Undefined в Yandex;
  4. Подождите какое-то время. Возможно, на почтовом сервере наблюдаются некоторые проблемы (или проводятся технические работы с целью устранения проблем), и через некоторое время корректная работа почтового сервиса будет восстановлена.

Иллюстрация почтовый службы

Заключение

Как уже упоминалось выше, если у вас случилась ошибка Undefined в Яндекс почта, то это ошибка самого почтового сервиса, и существенно повлиять на ситуацию вы можете лишь обратившись с соответствующим уведомлением в службу технической поддержки. По состоянию на дату написания данного материала подобные проблемы были уже в целом устранены, а почтовый сервис Яндекс ныне работает без заметных проблем.

Опубликовано 10 января 2017 Обновлено 29 сентября 2020

Источник

Почему выводит undefined?

Потому что функция rush – ничего не возвращает.

Если убрать все лишнее функцию можно записать так:

function rush (filename){
    (function(){...})();
}

Отсюда хорошо видно отсутствие return. Поэтому результат этой функции всегда – undefined.

Решение “в лоб” – добавление return

function rush(filename) {
  return (function() {
    var res = filename.split(".");
    var b = res[res.lenght - 1];
    return b;
  })();
}
console.log(rush("work.tt"));

При добавлении можно заметить, что все равно не работает. Так как допущена опечатка

lenght -> length

function rush(filename) {
  return (function() {
    var res = filename.split(".");
    var b = res[res.length - 1];
    return b;
  })();
}
console.log(rush("work.tt"));

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

function rush(filename) {
  var res = filename.split(".");
  var b = res[res.length - 1];
  return b;
}
console.log(rush("work.tt"));

Также, для получения последнего элемента массива можно использовать функцию pop

function rush(filename) {
  return filename.split(".").pop();
}
console.log(rush("work.tt"));
Источник

Это значит, что браузер не может найти нужный объект.

Что означает ошибка: TypeError: ‘undefined’ is not an object

Ситуация: вы пишете скрипт, в котором вам нужно выяснить расстояние от верха экрана до начала нужного элемента. У этого элемента есть класс .entry-content, и вы используете jQuery, чтобы достучаться до него:

// …
var dh;
dh = $(‘.entry_content’).offset().top;

После запуска скрипта браузер выдаёт ошибку:

❌ TypeError: ‘undefined’ is not an object

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

Что это значит: браузер при виде точки понимает, что перед ним — объект, у которого есть какие-то свойства. Эта ошибка означает, что вы пытаетесь обратиться к свойствам несуществующего объекта.

Когда встречается: когда программист делает опечатки в имени объекта, неправильно объявляет его или начинает работать с чем-то, что точно не объект.

В нашем примере программист неправильно указал имя раздела при вызове, и вот что произошло:

  1. Браузер знает, что на странице есть элемент с классом entry-content, который написан через дефис.
  2. Программист увлёкся и поставил знак подчёркивания вместо дефиса.
  3. Скрипт попытался найти этот класс, но не смог, поэтому вернул значение undefined.
  4. После этого команда стала выглядеть так: dh = undefined.offset().top, но undefined.offset() — это не объект, а что-то неопределённое, у которого нет свойства top.
  5. Браузер выдаёт ошибку, что вообще-то это не объект и работать с ним он не будет.

Что делать с ошибкой TypeError: ‘undefined’ is not an object

Эта ошибка означает, что вы пытаетесь использовать как объект то, что им не является. Чтобы исправить эту ошибку, проверьте:

  • нет ли у вас опечаток в именах и названиях (скорее всего);
  • правильно ли вы определили нужный объект;
  • в jQuery нужно будет дополнительно проверить, не теряется ли значение this или $ при использовании внутри функции;
  • есть ли внутри вашей переменной или объекта вообще что-нибудь, с чем можно работать.

Попробуйте сами

У вас есть страница с элементом <h1 id=”text-test”></h1> и JavaScript-кодом. При повторном запуске анимации он падает с нашей ошибкой. Попробуйте выяснить, почему так происходит.

Источник

Когда новички начинают изучать JavaScript, то иногда сталкиваются с одной интересной проблемой. Они зачастую не могут понять разницу между undefined и null. Ведь null и undefined представляют собой пустые значения. Даже операция сравнения null == undefined выводит true. Давайте попробуем разобраться в том, что из себя всё-таки представляет undefined.

Содержание статьи:

  1. Введение.
  2. Что такое undefined.
  3. Что влияет на появление undefined.
  4. Undefined в массивах.
  5. Разница между null и undefined.
  6. Заключение.

Введение

Большинство современных языков вроде Ruby, Python и Java имеют только одно значение null (null или nill), что совершенно логично.

В случае с JavaScript интерпретатор возвращает undefined при попытке доступа к переменной или свойству объекта, которые ещё не былы заданы. Пример:

let company;  

company;    // => undefined  

let person = { name: ‘John Snow’ };  

person.age; // => undefined

Что же касается null, это значение представляет собой ссылку на отсутствующий объект. В JavaScript не устанавливается значение null для переменных или свойств объекта.

Некоторые встроенные методы, такие как String.prototype.match(), могут возвращать значение null для обозначения отсутствующего объекта:

let array = null;  

array;                // => null  

let movie = { name: ‘Starship Troopers’,  musicBy: null };  

movie.musicBy;        // => null  

‘abc’.match(/[0—9]/); // => null

Поскольку в JavaScript  у разработчиков есть возможность получить доступ к неинициализированным значениям, это может вызвать некоторые ошибки.

Часто такие действия приводят к ошибке undefined, что ломает весь скрипт. Наиболее часто при этом возникают следующие ошибки:

  • typeError: undefined не является функцией;
  • typeError: невозможно прочитать '<prop-name>' свойство undefined;
  • другие подобные ошибки.

А иронию этой шутки может понять только разработчик JavaScript:

function undefined() {  

  // проблема решена

Чтобы избежать ошибок, связанных с undefined, нужно понимать, когда эта ошибка может возникать, и снизить риски ее появления в вашем приложении.

В JavaScript есть 6 примитивных типов:

  • Boolean. У этого типа есть два значения: true (истина) и false (ложь). Как правило,  логический тип boolean используется для хранения значения типа да/нет.
  • Number. Тип число используется как для целых, так и для дробных чисел (1, 6.7, 0xFF);
  • String. В JavaScript любые текстовые данные являются строками. В JavaScript нет разницы между двойными и одинарными кавычками: var text = "строка" / var texts = 'строки';
  • Symbol. Новый примитивный тип данных Symbol служит для создания уникальных идентификаторов: Symbol("name") (начиная с ES2015);
  • Null. Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null;
  • Undefined. Значение undefined, как и null, образует свой собственный тип, состоящий из одного этого значения. Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть undefined (значение не присвоено).

Отдельно от всех стоит тип Object (объект), который используется для организации данных и объявления более сложных сущностей. Пример:

var human = {

    id: 12884002,

    age: 28,

    name: ‘Bob’,

    favorite_song: ‘Photograph, by Nickelback’

Объект может иметь любые свойства до тех пор, пока они находятся внутри {фигурных скобок}.

Среди этих 6 примитивных типов undefined является специальным значением. Согласно спецификации ECMAScript, undefined используется тогда, когда переменной не присвоено значение.

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

let number;  

number;     // => undefined  

let movie = { name: ‘Interstellar’ };  

movie.year; // => undefined  

let movies = [‘Interstellar’, ‘Alexander’];  

movies[3];  // => undefined

Пример выше показывает, что undefined выводится при попытке доступа к:

  • неинициализированной переменной number;
  • несуществующему свойству объекта movie.year;
  • несуществующему элементу массива movies[3].

Оператор typeof возвращает строку undefined для неопределенного значения:

typeof undefined === ‘undefined’; // => true

Оператор typeof отлично подходит для проверки значения undefined у переменной:

let nothing;  

typeof nothing === ‘undefined’;   // => true

Что влияет на появление undefined

Неинициализированная переменная

Объявленная переменная, которая еще не имеет значения (неинициализированна), по умолчанию undefined.
Пример:

let myVariable;  

myVariable; // => undefined

Переменная myVariable уже объявлена, но еще не имеет присвоенного значения. Попытка обратиться к переменной закончится выводом undefined.

Эффективный подход к решению проблем неинициализированных переменных — это по возможности присвойте им начальное значение. Чем меньше переменная существует в неинициализированном состоянии, тем лучше. В идеале вы сразу же присваиваете значение myVariable = 'Стартовое значение’, хотя это не всегда возможно.

Отдавайте предпочтение const и let, а от var нужно постепенно отказываться

Некоторые разработчики считают, что одной из лучших особенностей ECMAScript 2015 является новый способ объявления переменных путём использования const и let. Это большой шаг вперед, так как объявленные таким способом объекты/переменные находятся в области видимости, ограниченной текущим блоком кода (в отличие от старой функции var), и находятся во временной мертвой зоне до момента присвоения им конкретного значения.

При использовании неизменяемых данных (констант) рекомендуется инициализировать их как const. Это создаст неизменную связку.

Одна из приятных особенностей const заключается в том, что существует возможность назначить начальное значение константы. Пример:

const myVariable = ‘initial’

Таким образом, константа не подвергается неинициализированному состоянию, и получить значение undefined просто невозможно.

Давайте протестируем функцию, которая проверяет, является ли слово палиндромом:

function isPalindrome(word) {  

  const length = word.length;

  const half = Math.floor(length / 2);

  for (let index = 0; index < half; index++) {

    if (word[index] !== word[length — index — 1]) {

      return false;

  return true;

isPalindrome(‘madam’); // => true  

isPalindrome(‘hello’); // => false

Переменным length и half  значение присваивается один раз. В этом случае объявить их как const будет логично, так как их значение не будет меняться.

Если вам нужно будет менять значение переменной несколько раз, то обозначьте ее как let. По возможности сразу присваивайте ей начальное значение. Пример:

А когда использовать var? Некоторые разработчики, ссылаясь на стандарт ES2015, предлагают перестать использовать var.

Проблема использования var заключается в так называемом поднятии переменных (англ. variable hoisting). Где бы ни находилось объявление, это равнозначно тому, что переменную объявили в самом начале кода.

function bigFunction() {  

  // код…

  myVariable; // => undefined

  // код…

  var myVariable = ‘Initial value’;

  // код…

  myVariable; // => ‘Initial value’

bigFunction();

В этом случае переменная myVariable содержит undefined до получения значения:

myVariable = ‘Initial value’

Если же переменную объявить как let, то она останется недоступной до момента присвоения ей значения. Это происходит из-за того, что переменная находится во временной мертвой зоне. В этом случае вероятность получения значения undefined близится к нулю.

Вышеприведенный пример с let (вместо var) выведет ReferenceError, потому что переменная во временной мертвой зоне недоступна.

function bigFunction() {  

  // код…

  myVariable; // => выводится ‘ReferenceError: myVariable is not defined’

  // код…

  let myVariable = ‘Initial value’;

  // код…

  myVariable; // => ‘Initial value’

bigFunction();

Использование const или let для неизменяемых привязок позволит снизить риски получения значения undefined при написании кода.

Усильте связность

Связность характеризует степень взаимосвязанности элементов модуля (пространства имен, класса, метода, блока кода). Есть два вида связанности — сильная и слабая.

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

  • сфокусированным и понятным — становится легче понять, какую задачу выполняет модуль;
  • легко поддерживаемым и поддающимся рефакторингу — изменение модуля влияет на меньшее количество элементов;
  • многоразовым — если модуль ориентирован на выполнение одной задачи, то его легче использовать повторно;
  • простым для тестирования — вам будет проще протестировать модуль, ориентированный на одну задачу.

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

Блок кода сам по себе может считаться небольшим модулем. Чтобы извлечь выгоду из преимуществ сильной связности, нужно держать переменные как можно ближе к блоку кода, который их использует.

Например, если переменная нужна только для использования в определенном блоке кода, тогда можно объявить её и разрешить существовать только внутри нужного блока (используя const или let для объявления).

Одним из классических примеров излишнего срока жизни переменных является использование цикла for внутри функции:

function someFunc(array) {  

  var index, item, length = array.length;

  // некоторый код…

  // некоторый код…

  for (index = 0; index < length; index++) {

    item = array[index];

    // некоторый код…

  return ‘some result’;

index, item и length — эти переменные объявляются в начале тела функции. Однако они используются только ближе к концу функции. Так в чем проблема с таким подходом?

Всё время между объявлением переменной в начале и до использования её в цикле for переменные index и item не инициализируются и выводят undefined. По этому примеру видно, что срок жизни переменной является необоснованно длинным.

Разумнее будет переместить переменные ближе к месту их применения:

function someFunc(array) {  

  // некоторый код…

  // некоторый код…

  const length = array.length;

  for (let index = 0; index < length; index++) {

    const item = array[index];

    // некоторый код

  return ‘some result’;

Переменные index и item существуют только в области действия блока  for. У них нет никакого значения за его пределами.

Переменная (const) length объявляется в месте ее использования.

Почему модифицированная версия лучше первоначальной? Посмотрим:

  • значения не подвергаются неинициализированному состоянию, поэтому нет риска получения undefined;
  • перемещение переменных ближе к месту их использования увеличивает читаемость кода;
  • элементы с высокой связанностью кода легче рефакторить и извлекать при необходимости в отделенные функции.

Доступ к несуществующему свойству

При доступе к несуществующему свойству объекта JavaScript возвращает undefined.

Обратите внимание на пример:

let favoriteMovie = {  

  title: ‘Blade Runner’

favoriteMovie.actors; // => undefined

favoriteMovie — это объект с одним значением title. Доступ к несуществующему свойству actors путём использования favoriteMovie.actors приведет к выводу undefined.

Сам по себе доступ к несуществующему свойству не вызывает ошибки. Реальная проблема возникает при попытке получить значение из несуществующего свойства. Это сообщение об ошибке отражает наиболее распространенную ловушку, связанную с undefined:

TypeError: Cannot read property <prop> of undefined

Немного изменим предыдущий фрагмент кода, чтобы пояснить поведение TypeError:

let favoriteMovie = {  

  title: ‘Blade Runner’

favoriteMovie.actors[0];  

// TypeError: Cannot read property ‘0’ of undefined

В favoriteMovie нет свойства actors, поэтому использование favoriteMovie.actors приведет к undefined.

В результате доступ к элементу со значением undefined с помощью выражения favoriteMovie.actors [0] вызывает TypeError.

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

К сожалению, не всегда возможно контролировать объекты, с которыми приходится работать. Такие объекты могут иметь разный набор свойств в различных сценариях. Таким образом, нужно обрабатывать все эти сценарии вручную.

Попробуем реализовать функцию append(array, toAppend), которая добавляет в начале и/или в конце массива новые элементы. Параметр toAppend принимает объект со свойствами:

  • first: элемент, вставленный в начале массива;
  • last: элемент, вставленный в конец массива.

Функция возвращает новый экземпляр массива, не изменяя исходный (т.е. это чистая функция).

Функция append() может выглядеть так:

function append(array, toAppend) {  

  const arrayCopy = array.slice();

  if (toAppend.first) {

    arrayCopy.unshift(toAppend.first);

  if (toAppend.last) {

    arrayCopy.push(toAppend.last);

  return arrayCopy;

append([2, 3, 4], { first: 1, last: 5 }); // => [1, 2, 3, 4, 5]  

append([‘Hello’], { last: ‘World’ });     // => [‘Hello’, ‘World’]  

append([8, 16], { first: 4 });            // => [4, 8, 16]

Поскольку объект toAppend может удалять первые или последние свойства, необходимо проверить, существуют ли эти свойства в toAppend.

Доступ к свойству приведет к получению undefined, если его не существует. Можно проверить существует ли первое или последнее свойство, чтобы избежать undefined. Как вариант, это можно сделать с помощью условий if(toAppend.first){} и if(toAppend.last){}.

Но не будем торопиться. В этом подходе есть серьезный недостаток. undefined, также как false, null, 0, NaN и ' ' являются ложными значениями (falsy values).

В текущей реализации append() функция не позволяет вставлять ложные элементы:

append([10], { first: 0, last: false }); // => [10]

0 и false — ложные значения, потому что if (toAppend.first) {} и if (toAppend.last) {} фактически сравниваются с ложными значениями и эти элементы не вставляются в массив. Функция возвращает исходный массив [10] без изменений.

Последующие подсказки объясняют, как правильно проверить существование свойства.

Проверьте, существует ли свойство

К счастью, JavaScript предлагает множество способов определить, имеет ли объект определенное свойство:

  • obj.prop !== undefined позволяет сравнивать объект напрямую с undefined;
  • typeof obj.prop !== 'undefined' проверяет тип значения свойства;
  • obj.hasOwnProperty('prop') проверяет объект на наличие собственного свойства;
  • 'prop' in obj проверяет объект на наличие собственного или унаследованного свойства.

Рекомендацией в этом случае будет использование in оператора. У него простой и понятный синтаксис. Присутствие оператора in указывает на четкое намерение проверить, имеет ли объект определенное свойство, не обращаясь к фактическому значению этого свойства.

Использование obj.hasOwnProperty('prop') — это также неплохое решение. Оно немного длиннее, чем  оператор in , и проверяет только собственные свойства объекта.

Эти два способа сравнения с undefined могут сработать… Но кажется, что использование obj.prop !== undefined и typeof obj.prop !== 'undefined' является не очень хорошим решением и может привести к непонятным последствиям при прямом сравнении с undefined.

Давайте попробуем улучшить функцию append(array, toAppend), используя in оператора:

function append(array, toAppend) {  

Добавить в заметки чтобы посмотреть позже?

  const arrayCopy = array.slice();

  if (‘first’ in toAppend) {

    arrayCopy.unshift(toAppend.first);

  if (‘last’ in toAppend) {

    arrayCopy.push(toAppend.last);

  return arrayCopy;

append([2, 3, 4], { first: 1, last: 5 }); // => [1, 2, 3, 4, 5]  

append([10], { first: 0, last: false });  // => [0, 10, false]

'first' in toAppend ( как и 'last' in toAppend) выводит true, независимо от существующего свойства. В других случаях выводится — false.

Использование оператора in устраняет проблему со вставкой ложных элементов 0 и false. Теперь добавление элементов в начале и в конце массива [10] приводит к ожидаемому результату [0, 10, false].

Выполните деструктурирование доступа к свойствам объекта

При доступе к свойству объекта иногда необходимо указать значение по умолчанию, если свойство не существует.

Можно использовать in с тернарным оператором, чтобы получить следующий результат:

const object = { };  

const prop = ‘prop’ in object ? object.prop : ‘default’;  

prop; // => ‘default’

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

Чтобы использовать более простой подход, давайте познакомимся с функцией ES2015, называемой деструктурирование объекта.

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

Действительно, извлечение свойств теперь выглядит совершенно по-другому:

const object = {  };  

const { prop = ‘default’ } = object;  

prop; // => ‘default’

Чтобы увидеть это в действии, определяем полезную функцию, обертывающую строку в кавычки. quote(subject, config) принимает первый аргумент как строку, которую нужно обернуть. Второй аргумент config — это объект со следующими свойствами:

  • char — символ цитаты, например, '(одинарная кавычка) или "(двойная кавычка). По умолчанию — ";
  • skipIfQuoted — логическое значение, чтобы пропустить цитирование, если строка уже цитируется. По умолчанию —  true.

Применяя преимущества деструктурирования объекта, давайте реализуем quote():

function quote(str, config) {  

  const { char = ‘»‘, skipIfQuoted = true } = config;

  const length = str.length;

  if (skipIfQuoted

      && str[0] === char

      && str[length — 1] === char) {

    return str;

  return char + str + char;

quote(‘Hello World’, { char: ‘*’ });        // => ‘*Hello World*’  

quote(‘»Welcome»‘, { skipIfQuoted: true }); // => ‘»Welcome»‘

const { char = '"', skipIfQuoted = true } = config в одной строкe извлекает свойства char и skipIfQuoted из объекта config.

Если некоторые свойства недоступны в объекте config,  деструктурирование задает значения по умолчанию: '"' для char и false для skipIfQuoted.

К счастью, функцию можно даже улучшить.

Давайте переместим деструктурирование прямо в раздел параметров. И установим значение по умолчанию (пустой объект { }) для параметра config, чтобы пропустить второй аргумент, когда будет достаточно значений по умолчанию.

function quote(str, { char = ‘»‘, skipIfQuoted = true } = {}) {  

  const length = str.length;

  if (skipIfQuoted

      && str[0] === char

      && str[length — 1] === char) {

    return str;

  return char + str + char;

quote(‘Hello World’, { char: ‘*’ }); // => ‘*Hello World*’  

quote(‘Sunny day’);                  // => ‘»Sunny day»‘

Обратите внимание, что деструктурирующее присваивание заменяет параметр config в сигнатуре функции. Это позволяет сделать параметр quote() на одну строку короче. Параметр = {} в правой части деструктурирующее присваивание гарантирует, что используется пустой объект, если второй аргумент не указан вообще quote('Sunny day').

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

Установите объекту свойства по умолчанию.

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

Функция ES2015 Object.assign (target, source1, source2, ...) копирует значения всех перечисленных собственных свойств из одного или нескольких исходных объектов в целевой объект. После чего возвращает целевой объект.

Например, вам нужно получить доступ к данным объекта unsafeOptions, который не всегда содержит полный набор свойств.

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

  • определить объект defaults, который содержит значения свойств по умолчанию;
  • вызвать функцию Object.assign({ }, defaults, unsafeOptions), чтобы создать новый объект options. Новый объект получает все свойства из unsafeOptions, недостающие берутся из defaults.

const unsafeOptions = {  

  fontSize: 18

const defaults = {  

  fontSize: 16,

  color: ‘black’

const options = Object.assign({}, defaults, unsafeOptions);  

options.fontSize; // => 18  

options.color;    // => ‘black’

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

Object.assign() принимает первый аргумент как целевой объект {}. Целевой объект получает значение свойства fontSize из объекта-источника unsafeOptions. А значение свойства color — из объекта-источника defaults, поскольку unsafeOptions не содержит color. Важен порядок, в котором перечислены исходные объекты: первый пришёл — первый ушёл.

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

К счастью, существует более простой и легкий способ установить значения по умолчанию для свойств объекта. Рекомендуется использовать новую функцию JavaScript, которая позволяет расширять свойства при инициализации объектов.

Вместо вызова Object.assign() используйте синтаксис распространения объекта, чтобы скопировать в целевой объект все собственные и перечисляемые свойства из исходных объектов:

const unsafeOptions = {  

  fontSize: 18

const defaults = {  

  fontSize: 16,

  color: ‘black’

const options = {  

  ...defaults,

  ...unsafeOptions

options.fontSize; // => 18  

options.color;    // => ‘black’

Инициализатор объекта распространяет свойства из исходных объектов defaults и unsafeOptions. Важен порядок, в котором указаны исходные объекты: свойства более позднего исходного объекта перезаписывают более ранние.

Заполнение неполного объекта значением по умолчанию является эффективной стратегией, обеспечивающей безопасность и стабильность вашего кода. Независимо от ситуации, объект всегда содержит полный набор свойств, и появление undefined невозможно.

Параметры функции

Параметры функции по умолчанию установлены на undefined.

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

function multiply(a, b) {  

  a; // => 5

  b; // => 3

  return a * b;

multiply(5, 3); // => 15

При вызове функции multiply(5, 3) параметры a и b получают соответствующие значения 5 и 3. Умножение рассчитывается как ожидаемое: 5 * 3 = 15.

Что происходит, когда пропускается аргумент при вызове? Параметр внутри функции получает значение undefined.

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

function multiply(a, b) {  

  a; // => 5

  b; // => undefined

  return a * b;

multiply(5); // => NaN

Функция multiply(a, b) { } определяется двумя параметрами: a и b. Вызов multiply(5) выполняется с помощью одного аргумента, в результате параметр равен 5, а параметр b получает значение undefined.

Используйте значение параметра по умолчанию

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

Учитывая предыдущий пример, давайте сделаем некоторые улучшения. Если параметр b — undefined, то по умолчанию ему присваивается значение 2:

function multiply(a, b) {  

  if (b === undefined) {

    b = 2;

  a; // => 5

  b; // => 2

  return a * b;

multiply(5); // => 10

Функция вызывается одним аргументом multiply(5). Первоначально параметр a равен 2, а b соответствует undefined. Выражение проверяет, не равно ли b параметру undefined. Если это так, b получает значение по умолчанию 2.

Хотя представленный способ назначения значений по умолчанию работает, не рекомендуется сравнивать значения напрямую сundefined. Это уже будет выглядеть как хак.

Лучшим подходом является использование параметров по умолчанию из ES2015. Он краткий и не содержит в себе прямого сравнения значений с undefined.

Установка параметров по умолчанию для b не выводит значения undefined:

function multiply(a, b = 2) {  

  a; // => 5

  b; // => 2

  return a * b;

multiply(5);            // => 10  

multiply(5, undefined); // => 10

Значение b = 2 в сигнатуре функции гарантирует, что если b получит значение undefined, то по умолчанию параметр изменится на 2.

Функция параметров по умолчанию из ES2015 интуитивно понятна и выразительна. Всегда используйте ее для установки значений по умолчанию для необязательных параметров.

Возвращаемое значение функции

В JavaScript функция, которая не имеет оператора return, возвращает значение undefined:

function square(x) {  

  const res = x * x;

square(2); // => undefined

Функция square() не возвращает результаты вычислений. Результат — undefined.

Такая же ситуация возникает, когда оператор return присутствует, но без какого-либо выражения рядом:

function square(x) {  

  const res = x * x;

  return;

square(2); // => undefined

return; выполняется, но он не возвращает ничего. Результат вызова — undefined.

Указывая значение для return, можно получить желаемый результат:

function square(x) {  

  const res = x * x;

  return res;

square(2); // => 4

Теперь вызов функции выведет нужное значение.

Не доверяйте автоматической расстановке точки с запятой

Следующий список операторов в JavaScript должен заканчиваться точкой с запятой (;):

  • пустой оператор;
  • операторы: let, const, var, import, export;
  • утверждение значения;
  • утверждение отладчика;
  • утверждения: continue, break, throw, return.

Если вы используете одно из вышеуказанных утверждений, обязательно нужно ставить точку с запятой в конце:

function getNum() {  

  // Notice the semicolons at the end

  let num = 1;

  return num;

getNum(); // => 1

Как можно видеть, в конце объявленияlet и  оператором return обязательно ставится точка с запятой.

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

В такой ситуации ECMAScript предоставляет механизм автоматической установки точки с запятой (ASI),  который сделает всю работу за вас.

Используя ASI, вы можете удалить точки с запятой из предыдущего примера:

function getNum() {  

  // Notice that semicolons are missing

  let num = 1

  return num

getNum() // => 1

Вышеприведенный текст является допустимым кодом JavaScript. Отсутствующие точки с запятой автоматически вставлены за вас.

На первый взгляд, это выглядит довольно многообещающе. Механизм ASI позволяет пропустить ненужные точки с запятой. Вы можете сделать код JavaScript меньше и более простым для чтения.

Но тут существует один небольшой, но раздражающий момент, который может создать ASI. Если между return и возвращаемым выражением стоит новая строка return n expression, ASI автоматически вставляет точку с запятой return; n expression.

К чему приведет пустой оператор return ? Функция вернет значение undefined. Если вы не знаете, как работает механизм ASI, то неожиданное появление значения undefined может ввести в заблуждение.

Например, давайте изучим возвращаемое значение вызываемой функции getPrimeNumbers():

function getPrimeNumbers() {  

  return

    [ 2, 3, 5, 7, 11, 13, 17 ]

getPrimeNumbers() // => undefined

Между return и значением массива есть новая строка. JavaScript автоматически вставляет точку с запятой после оператора return, интерпретируя код следующим образом:

function getPrimeNumbers() {  

  return;

  [ 2, 3, 5, 7, 11, 13, 17 ];

getPrimeNumbers(); // => undefined

В таком случае мы получим значение undefined.

Проблема решена путем удаления новой строки между return и массивом:

function getPrimeNumbers() {  

  return [

    2, 3, 5, 7, 11, 13, 17

getPrimeNumbers(); // => [2, 3, 5, 7, 11, 13, 17]

Оператор void

Оператор void выполняет выражение и возвращает undefined вне зависимости от результата:

void 1;                    // => undefined  

void (false);              // => undefined  

void {name: ‘John Smith’}; // => undefined  

void Math.min(1, 3);       // => undefined

Одним из вариантов использования оператора void является переопределение результата выполнения выражения и возврат undefined, в случае возникновения побочных эффектов выполнения функции.

Undefined в массивах

Вы получаете undefined при попытке доступа к элементу массива с индексом вне пределов массива.

const colors = [‘blue’, ‘white’, ‘red’];  

colors[5];  // => undefined  

colors[—1]; // => undefined

Массив colors имеет 3 элемента, поэтому корректные индексы равны 0, 1 и 2.

Поскольку в индексах массива 5 и -1 нет элементов, значения colors[5] and colors[-1] получают значение undefined.

В JavaScript вы можете столкнуться с так называемыми разреженными массивами. Эти массивы имеют пробелы, то есть на некоторых индексах не определены никакие элементы.

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

Следующий пример генерирует разреженные массивы и пытается получить доступ к их пустым элементам:

const sparse1 = new Array(3);  

sparse1;       // => [<empty slot>, <empty slot>, <empty slot>]  

sparse1[0];    // => undefined  

sparse1[1];    // => undefined  

const sparse2 = [‘white’,  ,‘blue’]  

sparse2;       // => [‘white’, <empty slot>, ‘blue’]  

sparse2[1];    // => undefined

sparse1 создается путем вызова конструктора Array с числовым первым аргументом. Он имеет 3 пустых элемента.

sparse2 создается с литералом массива, второй элемент которого отсутствует. В любом из этих разреженных массивов доступ к пустому элементу оценивается как undefined.

При работе с массивами, чтобы избежать появления значения undefined, обязательно используйте допустимые индексы массивов или вообще не создавайте разреженные массивы. А вообще не забывайте, что массивы начинаются с нуля.

Разница между undefined и null

Часто у людей возникает разумный вопрос: в чем основное отличие между undefined и null? Оба специальных значения означают пустое состояние.

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

Рассмотрим разницу на примерах.

Переменная number определена, но ей не назначено начальное значение:

let number;  

number; // => undefined

Числовая переменная не определена, что явно указывает на неинициализированную переменную.

То же самое произойдёт при попытке доступа к несуществующему свойству объекта:

const obj = { firstName: ‘Dmitri’ };  

obj.lastName; // => undefined

Поскольку свойство lastName не существует в obj, JavaScript корректно оценивает obj.lastName как undefined.

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

Например, clone() — это функция, которая клонирует простой объект JavaScript. Ожидается, что функция вернет объект:

function clone(obj) {  

  if (typeof obj === ‘object’ && obj !== null) {

    return Object.assign({}, obj);

  return null;

clone({name: ‘John’}); // => {name: ‘John’}  

clone(15);             // => null  

clone(null);           // => null

Однако clone() может быть вызван с пустым аргументом: 15 или null (или вообще со значением null или undefined). В этом случае функция не может создать клон, поэтому возвращает null — индикатор отсутствующего объекта.

Оператор typeof делает различие между двумя значениями:

typeof undefined; // => ‘undefined’  

typeof null;      // => ‘object’

Строгий оператор равенства === правильно отличает undefined от null:

let nothing = undefined;  

let missingObject = null;  

nothing === missingObject; // => false

Заключение

Существование undefined является следствием разрешительной природы JavaScript, которая позволяет использовать:

  • неинициализированные переменные;
  • несуществующие свойства или методы объекта;
  • несуществующие индексы для доступа к элементам массива;
  • вызов функции, которая ничего не возвращает.

В основном сравнение напрямую с undefined является плохой практикой, потому что вы, вероятно, полагаетесь на разрешенную, но плохую практику, упомянутую выше.

Стратегия борьбы с undefined заключается в уменьшении появления этого значения в вашем коде. И выработайте в себе привычку делать следующее:

  • уменьшать использование неинициализированных переменных;
  • делать жизненный цикл переменных коротким и близким к источнику их использования;
  • по возможности назначать начальное значение переменным;
  • стараться использовать const или let;
  • использовать значения по умолчанию для некритичных параметров функции;
  • проверять наличие свойств или заполнить небезопасные объекты по умолчанию;
  • избегать использования разреженных массивов.
Источник

Добавить комментарий