Common Beginner JavaScript Mistakes to watch out for...
Tags: javascript, beginners, webdev, programming
Published: 2023-06-08 09:13:21

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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/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>
```
<u>script.js</u>
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.

- [async Attribute](https://www.w3schools.com/tags/att_script_async.asp)
- [defer Attribute](https://www.w3schools.com/tags/att_script_defer.asp)

## 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.