Ошибки при программировании на JavaScript (Как избежать ошибок?)

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

Неправильное использование операторов сравнения и присвоения
Это ошибку может совершить даже опытный программист, просто сделав опечатку в операторе сравнения, что приведет к большой логической ошибке в сценарии.
Речь идет об операторах «==» и «=». Первый используется для сравнения, второй — для присвоения значения переменной. Обычно языки программирования, использующие данные конструкции, предупреждают о возможной ошибке. JavaScript, напротив, выполняет оператор присвоения и возвращает true или false.
Пример:
var x = 5; 
if (x == 5)

Данный фрагмент делает абсолютно то, что от него хотят: он проверяет равен ли x пяти. Поскольку условие выполняется, сценарий продолжает выполнение кода внутри условия if.
Что произойдет, если сделать опечатку?
var x = 0; 
if (x = 5)

Вместо оператора сравнения разработчик ошибочно использовал оператор присвоения. JavaScript, в этом случае, даже не предупредит о возможной опечатке. Вместо этого переменной x будет присвоено значение 5, и вместо ожидаемого false в условии будет получено true.
Другая опечатка:
var x = 0; 
if (x = 0)

Булева величина принимает 1, если true, и 0, если false. Можно предположить что результатом проверки условия будет true, но на самом деле результат будет false.
Конечно, эта ошибка, в конце концов, будет найдена, но всегда стоит убедиться, что условие if содержит именно оператор сравнения, а не присвоения.

Помните символ «+» может быть оператором сложения и конкатенации
Немногие языки программирования используют символ «+» как оператор сложения и оператор соединения строк одновременно, но в JavaScript используется именно такой механизм. Об этом нужно всегда помнить при написании кода сценария.
Строка кода
var x = 10 + 5;

Присвоит переменной x, то что и подразумевалось, а именно 15. Но пользователь может ввести не только числовые, но и строковые значения. Что произойдет, если исправить строчку?
var x = 10 + '5';

Теперь x примет значение «105», потому что "5" — это строковая величина и плюс в этом выражении является знаком конкатенации. Это может случится, когда программист не учтет тип переменных, возвращаемых формой. А они могут быть не только числовыми, но и строковыми.
В этом случае нужно явно перевести строковую величину в числовую.
var x = 10 + parseInt("5", 10);

Здесь знак «+» снова стал знаком сложения, а не конкатенации.

Использование ассоциативных массивов в качестве массивов с числовыми индексами
Объект типа Array (Массив) в JavaScript всегда использует целочисленные значения в качестве индекса. Создание ассоциативных массивов в JavaScript осуществляется на основе другого типа - Object (объект). В этом случае в качестве индекса используются именованные индексы. Если попытаться использовать в объекте типа Array строковые индексы результаты будут неверными.
Рассмотрим следующий код:
var color = []; 
color[0] = "blue"; 
color[1] = '"purple"; 
color[2] = “orange”; 
var x = color.length; 
var y = color [0];

Здесь создается массив с именем «color». Затем присваиваются значения первым трем элементам массива, вычисляется длина массива и переменной y присваивается значение первого элемента массива. Переменная x становится равной 3, а y принимает значение «blue». Типичная работа с массивами.
Теперь создадим объект «car»:
var car = []; 
car ["color"] = "red"; 
car ["make"] = "chevy"; 
car ["model"] = “corvette”; 
var x = car.length; 
var y = car [0];

Вышестоящий код определяет объект, который, скорее ассоциативный массив, поскольку подразумевает именованные индексы. «Car» имеет три именованных индекса для определения объекта. Проблема будет с переменными «x» и «y». Это не простой массив, поэтому эти переменные будут неопределенны и не дадут ожидаемый результат. x будет присвоен 0, а y - «undefined».
Когда речь идет об этих двух видах данных в JavaScript, убедитесь, что Вы работаете именно с нужным.

Путаница с «UNDEFINED» и «NULL»
В других языках программирования можно переменным присваивать значение «null». JavaScript кроме «null» использует еще «undefined». По умолчанию переменной присваивается «undefined», а объекту - «null». Эти значения присваиваются в случае неправильного вычисления или отсутствия ссылки на объект. Чтобы объект имел значение «null», он должен быть, как минимум, определен. Это нужно учесть при построении оператора условия IF.
Например, нижеприведенный код выдаст ошибку, если объект не определен:
if (object !== null && typeof object !== 'undefined')

Для правильной работы сначала нужно всегда проверять определен ли объект, и лишь затем, равен ли он «null».
if (typeof object !== 'undefined' && object !== null)


JavaScript не определяет зону видимости для переменной цикла
В большинстве языков программирования может быть определена некая переменная для работы в цикле, значение которой уничтожается по его завершению.
Рассмотрим следующий участок кода:
for (var j = 0; j < 11; j++) { 
    j = j + 1; 
}; 
console.log(j);

Можно предположить, что «j» будет иметь значение «null». Но это неправильно для JavaScript. Здесь переменная «j» будет иметь значение 10. Эту особенность языка обязательно стоит учитывать при написании кода сценария.

JavaScript имеет некоторые особенности, которые делают его непохожим на другие языки программирования. В то же время он похож на другие С-образные языки, поэтому те, кто знает C, C# или Java, легко разберутся с синтаксисом этого языка. Но некоторые различия в работе с переменными, объектами и выражениями могут вызвать непредвиденные трудности. Данная статья поможет начинающим программистам на JavaScript избежать несколько наиболее распространенных ошибок при написании кода.
Автор: