Common Beginner JavaScript Mistakes to watch out for...
crit3cal
Posted on June 8, 2023
JavaScript is a language, which is beginner friendly compared to other programming languages in present. However there are a few common mistakes that many beginner programmers make. In this article we'll address some of the few commonly made mistakes during our beginning days.
Wrong Reference for "this"😢
referencing "this" is one of the most common confusion among JavaScript developers.
Before using "this" keyword, you really need to understand how it works
Consider this example code snippet:
var name = "Max";
const person = {
name: "John Doe",
getName: function () {
return this.name;
}
};
person.getName(); // John Doe
const tempName = person.getName;
tempName(); // Max, because in this case, "this" refers to the global object
Executing the above code, results in the following output
John Doe
Max
as you can see the tempName() function result is different, even though it has the reference of person object.
Why? It's all about context. The reason you get this buggy output is because, "this" depends on the object calling the function which it lives in.
since the function tempName() is defined globally, the "this" of the function references that of a global context, that's the reason the function prints the globally defined variable's value,
ie
var name = 'Max'
A simple way to save your reference to "this", is by using bind() method.
// Create a new function with 'this' bound to the person
const tempName= person.getName.bind(person)
tempName();
Output:
John Doe
Reference: bind()
Misunderstanding undefined with null
undefined means a variable which has been declared, but has not been assigned to a value.
let name;
console.log(name); // undefined
console.log(typeof name); // undefined
null is an assignment value. It can be assigned to a variable as a representation of no value
let name = null;
console.log(name) // null
console.log(typeof name) // null
from the above examples, it's clear that undefined and null are completely different.
undefined is a type itself, where as null is an object
The easiest way to check if a variable is null or undefined
let name;
if(!(name == null) {
// name is not null or undefined
}
the above code is equivalent to the below condition
let name;
if(typeof(name) !== "undefined" && name !== null){
// name is not null or undefined
}
Loading Scripts in HTML before the DOM is Loaded
consider the following example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Who's first?</title>
</head>
<body>
<script src="script.js"></script>
<h1 id="name">Hello world</h1>
</body>
</html>
script.js
reference to the name element and update its text
const name = document.getElementById('name');
name.innerText = "John Doe!";
But it wont work, as you expect it to be...
Your going to get an error: Cannot set properties of null (setting 'innerText').
This is because the JavaScript is trying to get a reference of a DOM element that has not been loaded on the page yet.
To fix this, it's common to import your javascript at the end of your HTML, after all the HTML elements have been loaded.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Who's first?</title>
</head>
<body>
<h1 id="name">Hello world</h1>
<script src="script.js"></script>
</body>
</html>
Now the JavaScript is being loaded after the name has already been loaded.
You can look into the below references, for different ways of importing JavaScript into the HTML file.
Improper naming of variables
Poorly named variables make code 10x times more difficult to follow.
Even though its difficult for developers to come up with meaningful names, you can make up for that by providing comments, over the functionality of the code.
Redundant else statements in functions
The return statement inside of a function, stops the execution of that function.
Whenever you return something from the function, no other code inside of that function gets run.
Consider the below example
const isEven = (num) => {
if(num % 2 === 0){
return true;
}else {
return false;
}
}
The above code can still be improved in the following way
const isEven = (num) => {
if(num % 2 === 0){
return true;
}
return false;
}
Difference between Assignment (=) and Equality (== and ===) operators
Assignment operators are used to assign values to variables. Beginners often confuse it with equality operators
Consider the below example
const name = "John Doe";
if(name = "nodejs"){
console.log(name);
}
// output = nodejs
In the above example, the name is not compared to nodejs, instead 'nodejs' is assigned to name, and it's being printed to the console
The comparison operators ('==') and ('===') are used in the following way
const num = 69;
console.log(num == "69") // true
console.log(num === "69) // false
Loose Comparison:
- The double equals ('==') usually ignores the type of the variable while comparing the values, hence true in the first output.
Strict Comparison:
- where as the triple equals ('===') returns false, because each value has a different data type
Conclusion
I've discussed a few of the mistakes beginners make frequently (out of many) throughout their web development careers.
You will be able to develop code that is not only cleaner but also more effective and efficient by becoming familiar with the most recent language features and learning the pitfalls and how to avoid them.
Posted on June 8, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
