Как самоучитель, мне требуется время, чтобы понять много информации и вещей в Javascript, которые очень важно знать и уметь применять, потому что легко создать переменную и вызвать name = “Chewbacca”, а затем напечатать с console.log(name) да, это это легкая часть, но когда вам нужно сделать некоторые промежуточные вещи, вам нужно знать, как правильно применять эти знания.

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

Поймите, что и когда использовать **this

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

const car = {
	name: "Camaro",
	start: function() {
		console.log(`${this.name} has started`);
	}
}
car.start()
// Camaro has started

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

const car = {
	name: "Camaro",
	start: function() {
		console.log(`${this.name} has started`);
	},
	gas: function() {
		setTimeout(function(){
			console.log(`${this.name} are running`);
		}, 1000)	
	},
	stop: function() {
		setTimeout(() => {
			console.log(`${this.name} please STOOP!!`)		
		}, 100)	
	},
};
car.start();
// Camaro has started
car.gas();
// are running
car.stop();
// Camaro please STOOP!!

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

Именование функций и переменных

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

let localEnviroment = "dev";
const changeLocalEnviroment = () => {
	if(localEnviroment === "dev"){
		localEnviroment = "prod";
	}
}

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

function toggleMenu(event){
	if(event.target.classList.contains("open")){
		event.target.classList.remove("open");
		event.target.classList.add("close");
	} else {
		event.target.classList.remove("close");
		event.target.classList.add("open");
	}
}

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

Неправильные сравнения

В этом пункте есть две концепции, о которых нужно поговорить. Прежде всего, нам нужно понять, что такое примитивные типы данных:

  • Число
  • Символ
  • Нить
  • логический
  • Неопределенный
  • Нулевой

Эти 6 типов данных — единственные типы, которые вы можете использовать для сравнения друг друга.

const num1 = 25;
const num2 = 'Twenty five';
if(num1 == num2) {
		console.log("Equal");
}
// num1 == num2 equal false

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

const person = {
	name: "Jason",
	age: 25
};
const doctor = {
	name: "Jason",
	age: 34
};
if(person == doctor) {
	console.log("It's the same person");
}
// nothing

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

if(person.name == doctor.name && person.age == doctor.age) {
	console.log("It's the same person");
}

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

console.log(25 === 25) // true
console.log(25 === "25") // false
console.log(true === true) // true
console.log("Hello" === "World") // false
console.log(null === undefined) // false

Это очень помогает нам и экономит время, это рекомендуемый оператор equal, который следует использовать всегда.

Передать неопределенные параметры

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

const addToCart(cart, api) {
	fetch(api, {
		method: "POST",
		data: cart
	}).then(response => {
		// ...do something
	})
}
addToCart({
	product: "T-Shirt",
	cost: 25
});

Если мы заметим, мы не отправляем API для передачи информации на сервер и получения ответа. Итак, самая распространенная ошибка — забыть о такой простой ситуации. Лучший способ избежать этих проблем — убедиться, что переменная, которая нам нужна в функции, делает ее значением по умолчанию.

Непонимание асинхронного потока

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

// Synchronous flow
const flower = "Rose";
const message = `I hope a ${flower} as a gift`;
console.log(message);
// Asynchronous flow
const getFlower= async () => "Rose";
const flower = getFlower();             // Promise { <fulfilled>: "Rose"}
const asyncFlower = await getFlower();  // Rose

В примере мы можем заметить, что синхронный поток — это обычный код, когда все происходит одновременно, но в асинхронном коде мы можем заметить разницу, когда мы вызвали asyn/await. Если мы вызовем функцию getFlower как обычную функцию, она ответит как функция Promise, и мы не получим желаемое значение, но если мы вызовем await, мы получим информацию, необходимую для продолжения кодирования.

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

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