5 Common Mistakes to Avoid When Learning JavaScript

As a self-learner, it takes me time to understand a lot of info and stuff in Javascript that is very important to know and know how to apply, because it’s easy to create a variable and call name = “Chewbacca” and then print with console.log(name) yeah, that is the easy part, but when you need to do some intermediate things you need to know how to apply that knowledge correctly.

So I put in a list of the 5 most common mistakes from a beginner and not so beginners to avoid when learning Javascript. This also helps you to practice your brain to remember some repetitive bugs from you or another person you learning and catch them easily.

Understand what and when to use **this

This point has a couple of concepts you need to know and understand to avoid some complex errors in the future. First of all, always remember this it’s called to reference an object, for example, if we have:

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

car.start()
// Camaro has started

So, in this case, we called this a reference of the car so the name should be printed on the console. But if we made another function with a callback and used a function call instead of an Arrow Function then we should have a problem with the scope.

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!!

Now we can see the difference between those functions where gas() doesn't print the name of the car but when we call the stop function then it shows it. In the gas function, we don’t have an object to refer to because we are using a callback inside of a function so the object doesn’t exist. That’s always the confusing part but is helpful to know or use an arrow function to avoid the type of scope issues we normally forgot and avoid these issues.

Naming functions and variables

Whenever we start a project it’s common to use names for our variables to refer to something we want to store, but sometimes we spent hours on a problem, and to make it simple and work fast we put a named variable arr into an array and test. But that is the wrong way to do it.

let localEnviroment = "dev";

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

These names are easy to read. If I share this code with someone to maybe help me to improve the code I ensure you it would be made, because you too. I named the variable as needed and the function has a name for what it does. I don’t talk about naming a function or a variable with all specifications but it has to be easy to read. For example, if you are making a functionality for a mobile menu you should name it like something you want to explain.

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");
	}
}

In this case, the function toggleMenu makes the menu appears or disappears. Easy, but powerful to improve the code, and don’t forget when you are coding. So, remember, easy to read, easy to apply, easy to explain, and not that long but not shorter than 4 letters.

Wrong Comparisons

There are two concepts in this point to talk about, first of all, we need to understand what ar Primitive data types are:

• Number
• Symbol
• String
• Boolean
• Undefined
• Null

These 6 data types are the only types you can use to compare each other.

const num1 = 25;
const num2 = 'Twenty five';

if(num1 == num2) {
		console.log("Equal");
}
// num1 == num2 equal false

As you can see we can compare Primitive data types as a Number with a String or String with a String and that’s ok, but when you want to compare a Non-Primitive data type like an object is when you can find a big problem.

const person = {
	name: "Jason",
	age: 25
};

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

If you run it in the console you should get nothing, not even a console error. Here the problem is we cannot compare using the equality operator because it compares their location in memory. If we want to compare objects or arrays we should create our function to do it

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

And another point of comparison, when we start learning Javascript, is the right use for the equality operator. In the examples before I used the equality operator that compares us only the value, and that’s ok, but if we want to compare the value and the data type is better to use the === operator to verify everything and not make a mistake validating something we need.

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

This helps us a lot and saves us time, it’s the recommended equal operator to use always.

Pass Undefined parameters

Sometimes as self-learner, this cost us a lot of time to resolve a simple bug but when we notice and follow the breakpoints where our application it’s failing we found the problem, and mostly the time we pass an empty or undefined value.

const addToCart(cart, api) {
	fetch(api, {
		method: "POST",
		data: cart
	}).then(response => {
		// ...do something
	})
}

addToCart({
	product: "T-Shirt",
	cost: 25
});

If we notice we don’t send an API to pass the info to the server and get a response. So the most common mistake is forgetting a simple situation like this. The better way to avoid these problems is to ensure the variable we need in the function makes it a default value.

Not Understanding Asynchronous Flow

As a beginner in the programming world, some concepts are difficult to understand with no practice, and sometimes with making mistakes on the path to improving our skills. The asynchronous flow it’s something that everyone tries to understand the first time watching some tutorial but when you make your code to have a lot of issues.

// 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

In the example, we can notice the synchronous flow is a regular code when everything happened at once, but in the asynchronous code, we can notice a difference when we called an asyn/await. If we call the function getFlower as a regular function it will respond as a Promise function and we don’t get the value we want, but if we called with an await we get the info we need to continue to code.

So the main definition of the Asynchronous flow it’s simple, it’s waiting for information that we don’t have yet so it’s necessary to wait as long as the connection needs and then we continue to make other things.

In conclusion, as developers sometimes we don’t know how things are built but it’s important to know how we can build and understand obviously with concepts so that we can make mistakes and learn from them. To be great developers and do what needs to do it’s better to up the bar and make the common mistakes into one-time mistakes and keep practicing.