5 распространенных ошибок, которые делает каждый новый программист в JavaScript

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

Перевод статьи 5 Common mistakes that every new JavaScript programmer does

True и False значения

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

let foo = 0;
let boo = 0;
if (foo === 0) {
  boo = 1;
} else {
  boo = 2;
}

Код выше выглядит правильным, так? Так и есть, но есть кое что ещё, что мы можем с ним сделать. Теперь посмотрите дальше:

let foo = 0;
let boo = 0;

if (!foo) {
  boo = 1;
} else {
  boo = 2;
}

Выглядит получше? По факту, нам не нужно проверять 0, как на false значение. Мы можем просто проверить в условии !foo, отдаёт ли оно false. Давайте посмотрим на верные и неверные значения в JavaScript:

// false значения в JavaScript
undefined --> "undefined" отдаст true, если является строкой
null --> "null" тоже что и "undefined"
0 --> "0" тоже что и "undefined"
false --> "false" тоже что и "undefined"
NaN --> "NaN" тоже что и "undefined"
'' or "" --> пустая строка
// true значения в JavaScript
"String" -->  Любая строка
[] --> Пустой массив
{} --> Пустой объект
function() {} --> Пустая функция

Условный (тернарный) оператор

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

Зачем? Чтобы избежать писанины 😉 и конечно для удобной читабельности. Давайте посмотрим на тот же пример повыше и сделаем его с использованием тернарного оператора.

let foo = 0;
let boo = 0;
!foo ? boo = 1 : boo = 2;
// и ещё лучше
boo = !foo ? 1 : 2;

В коде выше, вместо пяти строчек кода, мы просто воспроизвели ту же логику в одной строчке. Давайте посмотрим на другой кусок кода.

if (любое условие) {
  ----------------
  что-то тут происходит
  ----------------
  return foo ? true : false;
}

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

if (любое условие) {
  ----------------
  что-то тут происходит
  ----------------
return foo; // если вы уверены, что foo это булево значение
return !!foo; // если foo может быть чем угодно, но не им
}

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

Проверка равенства

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

if (false == 0) {
  return true;
} else {
  return false;
}
if (false === 0) {
  return true;
} else {
  return false;
}

Оба условия вернут true? Извините, что расстрою вас, но первое условие вернет true, а второе вернет false. Что же это за магия такая? Разница в обоих случаях в одном ‘=’, которое всё меняет в значительной степени. ‘==’ делает проверку на равенство с приведением типов, а ‘===’ смотрит на строгое соответствие.

Прибавление и конкатенация

Прибавление и связывание зависят от типа данных пока мы явно не укажем переменные с типом данных в JavaScript.

var a = 10;
var b = '20';
var c = 30;
return a + b; // отдаст "1020"
return b + c; // отдаст "2030"
return a + c; // отдаст 40

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

Использование переменной как ключа в объекте

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

const a = 1;
let b = '';
if(a) {
  b = 'first Name';
} else {
  b = 'Last Name';
}
const myObject = {
  b : 'Emily'
};
return myObject;

В примере выше мы хотели вернуть объект как { 'first Name' : 'Emily' }, но что возвращает код это { b: 'Emily' } из-за того, что b используется как ключ. Чтобы решить эту проблему, мы используем квадратные скобки [].

if(a) {
  b = 'first Name';
} else {
  b = 'Last Name';
}
const myObject = {
  [b] : 'Emily'
};
return myObject;

Теперь код возвращает то, что мы хотели — { 'first Name' : 'Emily' }