10 типичных ошибок в коде на JavaScript

10 типичных ошибок в коде на JavaScript

Для знатоков и начинающих

О ужас. Это — самые противные 10 мест в JavaScript, где люди часто ошибаются, особенно по неопытности. 

Использование = вместо ==

❌ Из математики все помнят, что знак равенства означает «равно». Но почти во всех языках программирования «=» — это команда присваивания. А знак равенства — «==». 

На примере ниже часть в скобках означает не «i равно 10», а «присвой переменной i значение 10». И так как в JavaScript это выражение считается true, то и всё условие будет выполнено вне зависимости от состояния переменной i. 

var obedTime = 14;
if (currentTime = obedTime) {
	console.log('У нас обед');
	// У этих ребят будет бесконечный обед
}

✅ Правильная команда сравнения — «==». Теперь код будет работать так, как мы подразумевали: «Если значение переменной равно десяти, тогда...». 

var obedTime = 14;
if (currentTime == obedTime) {
	console.log('У нас обед');
	// У этих ребят бед с 14
}

Использование «==» там, где нужно максимально точное сравнение

❌ JavaScript умный, иногда даже слишком. Если предложить ему сравнить число и строку через «==», он сначала преобразует одно в другое и только потом — сравнит. Если нас это устраивает, то окей, но вообще-то число 42 и строка «42» — это разные вещи. 

if (42 == '42') {  
    console.log('Для простоты допустим, что это одно и то же');  
} 

✅ Если нужно сравнить более строго, используется «строгое сравнение» с тремя знаками равенства:

if (42 === '42') {  
    console.log('Это одно и то же');  
} else {
   console.log('Почти одно и то же');
}

Неверное форматирование вывода

❌ Многие начинающие программисты пользуются командой вывода в консоль console.log(), чтобы узнать текущее состояние работы программы. Но иногда даже такая безобидная команда может стать источником ошибки:

console.log('Начинаем сложные вычисления, прогреваем процессор');
s = 10 + 2;
console.log('Результат: ' s);

Всё дело в том, что console.log() — это функция, которая работает со строками, а в нашем примере сначала идёт строка, а потом сразу число. Компьютер не понимает, чего от него хотят, поэтому останавливается с ошибкой. 

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

console.log('Начинаем сложные вычисления, прогреваем процессор');
s = 10 + 2;
console.log('Результат, который вы точно увидите: ' + s);

Название аргумента в функции совпадает с названием переменной

❌ Если мы хотим через функцию поменять значение глобальной переменной, то не стоит указывать её как название аргумента функции. В этом случае значение глобальной переменной не поменяется:

var something = 1;

function change(something) {
	something = 10;
	return true;
}
change();
console.log(something);

✅ В этом случае something внутри функции — это уже не глобальная переменная, а название аргумента, которое живёт только внутри функции. Чтобы исправить это, достаточно назвать аргумент иначе:

var something = 1;

function change(anythningElse) {
	something = 10;
	return true;
}
change();
console.log(someghing);

Неточная работа JavaScript с дробными числами

❌ Иногда ошибки возникают не по вине программиста, но про них тоже нужно знать. Если мы просто сложим два дробных числа, то в результате можем получить не то, что ожидаем. В этом примере мы точно не получим 0,3 (хотя казалось бы!):

10 типичных ошибок в коде на JavaScript

✅ Причина в том, что дробные числа хранятся в памяти в формате «плавающей запятой» и могут вычисляться на ходу, а это может приводить к появлению лишних значений после запятой. Универсального решения нет, но если вы точно знаете, сколько цифр после запятой вам нужно — сделайте их целыми, а потом разделите на 10 в нужной степени:

var x = 0.1;
var y = 0.2;
var z = (x * 10 + y * 10) / 10; 
console.log(z);
10 типичных ошибок в коде на JavaScript

Ненумерованные индексы в массиве

❌ Работая с массивом, мы можем обратиться к его элементам только по номерам, а не по названиям, даже если это кажется логичным и правильным:

var person = [];
person["firstName"] = "Женя"; // создаём ненумерованный индекс в массиве
person["lastName"] = "Аверс";
var x = person.length;         // вернёт 0
var y = person[0];             // person[0] вернёт 'undefined'

✅ Правильные решения — либо вместо массива использовать объект, либо использовать массив и номера элементов. В примере — второй вариант: 

var person = [];
person[0] = "Женя"; // создаём нумерованный индекс в массиве
person[1] = "Аверс";
person[2] = "Веган-питонист"
var x = person.length;         // вернёт 3
var y = person[0];             // person[0] вернёт 'Женя'

Несовпадающие кавычки

❌ Вы получите ошибку, если будете использовать разные открывающие и закрывающие кавычки:

var pers = "Осторожно, кавычки закрываются';

10 типичных ошибок в коде на JavaScript

✅ Используйте одинаковые кавычки в начале и конце строки:

var pers = "Осторожно, кавычки закрываются";

Несовпадение области видимости

❌ Типичная ошибка начинающих — обращаться к переменным, созданным внутри функции, как будто они глобальные и доступны всегда:

function lst() {
	var importantVariable = 'Недавно под мостом поймали Безоса с хвостом!';
}
console.log(importantVariable);
10 типичных ошибок в коде на JavaScript

✅ Решение — вынести переменную из функции и сделать её глобальной (если это позволяет логика проекта):

var importantVariable = 'Недавно под мостом поймали Безоса с хвостом!';

function keknutb(times) {
	for (let i = 0; i < times; i++) {
	importantVariable = importantVariable + ' :-)';
}
}
keknutb(1);
console.log(importantVariable);

Большие и маленькие буквы в переменных

❌ В JavaScript большие и маленькие буквы — это разные буквы, поэтому нельзя обращаться так к переменной, написанной с большой буквы:

var CorleoneSpeech = 'А теперь ты приходишь ко мне и говоришь: “Дон Корлеоне, я хочу справедливости”. Но ты просишь без уважения, не предлагаешь дружбы.';
console.log(corleonespeech);

✅ Если в имени переменной, класса, объекта или метода есть большие буквы — нужно писать именно так, как они объявлены первый раз. Благо ваш текстовый редактор подскажет:

var CorleoneSpeech = 'А теперь ты приходишь ко мне и говоришь: “Дон Корлеоне, я хочу справедливости”. Но ты просишь без уважения, не предлагаешь дружбы.';
console.log(CorleoneSpeech);

Незакрытые скобки

❌ Иногда можно увлечься и не закрыть фигурную скобку, когда закончился логический блок:

if (42 == '42') {
	console.log('Готовим данные для сравнения');
	{
		console.log('Сравнивать будем методом ступенек');
		{
			console.log('Готовим ступени');
			{
				console.log(42);
				{
					console.log('42');
					{
						console.log('Всё верно!');
					}
				}
			}
		}
	}

✅ Сколько открытых скобок — столько должно быть и закрытых:

if (42 == '42') {
	console.log('Готовим данные для сравнения');
	{
		console.log('Сравнивать будем методом ступенек');
		{
			console.log('Готовим ступени');
			{
				console.log(42);
				{
					console.log('42');
					{
						console.log('Всё верно!');
					}
				}
			}
		}
	}
}

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Алина Грызлова

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Изучить
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Вжух, вжух! Добавляем звук меча на любой странице

Время дурацких проектов.

medium
Как сделать колесо фортуны на сайте
Как сделать колесо фортуны на сайте

Достаточно одного скрипта и немного CSS

medium
Что нужно поставить на компьютер, чтобы делать сайты
Что нужно поставить на компьютер, чтобы делать сайты

Устанавливаем MAMP за 10 минут

medium
Программируем скринсейвер для Илона
Программируем скринсейвер для Илона

Анимация движения звёзд на JavaScript.

medium
Своя игра: создаём собственную «Змейку»

Работы на 10 минут, а удовольствия на целый день.

medium
Универсальная аналитическая машина

Она может предсказать что угодно, если правильно её настроить.

medium
Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

medium
Пинг-понг против компьютера на JavaScript

Лёгкая версия

easy
Простая работа с исключениями
Простая работа с исключениями

Чтобы программа не падала из-за разных ошибок

easy
Ещё больше полезных CSS-команд
Ещё больше полезных CSS-команд

Короткие и мощные.

hard
easy