Javascript mistakes that beginners do
Tags: javascript, beginners, codenewbie, productivity
Published: 2023-01-26 05:14:47

Here are some common mistakes that are often done accidentally by beginners in JavaScript:

##1) Accidentally Using the Assignment Operator:

Using a single equals sign (=) for assignment instead of a double equals sign (==) or triple equals sign (===) for comparison.
```javascript
if (x = 5) {
    console.log("x is 5");
}
```
This will always return true because "x" is being assigned the value of 5, not compared to it. It should be:
```javascript
if (x == 5) {
    console.log("x is 5");
}
```
##2) Confusing Addition & Concatenation:

Addition and concatenation is a common mistake made by beginners in JavaScript. This mistake happens when beginners use the `+` operator instead of the correct operator for their intended operation.

For example, when adding two numbers together, the `+` operator should be used as it is used for mathematical addition. However, if the operands are strings, the `+` operator will concatenate them instead of adding them mathematically.
```javascript
let x = "5";
let y = "6";
let z = x + y;
console.log(z);  // Output: "56"
```
Another common mistake beginners make is trying to add a number and a string together, which results in concatenation instead of addition.
```javascript
let x = 5;
let y = "6";
let z = x + y;
console.log(z);  // Output: "56"
```
__To avoid this mistake,__ beginners should make sure to convert a `string` to a `number` before performing mathematical operations, or use the `parseInt()` or `parseFloat()` functions. It is important for beginners to understand the type of operands they are using and the operation they are trying to perform in order to use the correct operator.

##3) Misunderstanding Floats:

Misunderstanding **floats** in JavaScript is a common mistake made by beginners. A float, or floating-point **number**, is a number with a decimal point. However, due to the way computers store **decimal numbers**, **floats** can sometimes produce unexpected results.

One common mistake is assuming that floats will always have a precise value. However, due to the way computers represent **decimal numbers**, **floats** can have rounding errors. This can cause unexpected behavior when comparing **float** values for equality or performing mathematical operations.

For example:
```javascript
let x = 0.1 + 0.2;
console.log(x);  // Output: 0.30000000000000004
```
In this example, the result of `0.1 + 0.2` is not exactly `0.3`, but a close approximation.

##4) Not using parentheses when calling a function:

Not using parentheses when calling a **function** in JavaScript is a common mistake made by beginners. In JavaScript, **functions** are objects and when you refer to a **function** by its name without invoking it, it returns a reference to the **function** instead of executing it.

For example:
```javascript
function myFunction() {
    console.log("Hello, world!");
}

let x = myFunction;
x();  // Output: "Hello, world!"
```

In this example, the variable `x` is assigned a reference to the `myFunction` function, not the result of calling it. To call the function, parentheses must be added:

```javascript
function myFunction() {
    console.log("Hello, world!");
}

let x = myFunction();
console.log(x);  // Output: "Hello, world!"
```
##5) Referencing code before it’s loaded:


Referencing code before it's loaded can cause issues in JavaScript because the code is executed in the order that it appears in the document. If you reference code before it's loaded, it can lead to a `undefined` or `null` reference error. This typically occurs when you try to access a **variable** or **function** that has not been **defined yet**.

One common cause of this issue is when you put **script tags in the head of the HTML document**
```html
<html>
<head>
 <script src="script.js"></script>
</head>
<body>
 <div>This div is your div.</div>
</body>
</html>
```
In order to avoid this problem you should put `script` tag  at the bottom of the body
```html
<html>
<head>
 <title>My Document</title>
</head>
<body>
 <div>This div is your div.</div>
 <script src="script.js"></script>
</body>
</html>
```
Other way is to use the `async` or `defer` attributes. This can cause the script to execute before the page has **fully loaded**, resulting in errors if the script references elements that are not yet available.
```html
<html>
<head>
 <script src="script.js" defer></script> //You can use async as well
</head>
<body>
 <div>This div is your div.</div>
</body>
</html>
```

##6) Not properly handling variable scope:

Not properly handling variable scope in JavaScript can **lead to unexpected behavior**, such as **accidentally modifying** or **overwriting global variables**, or not being able to access a variable that should be in scope.

```javascript
const x = 5;

function myFunction() {
  let y = 10;
  console.log(x); // Output: 5
  console.log(y); // Output: 10
}

console.log(x); // Output: 5
myFunction(); 
console.log(y); // ReferenceError: y is not defined
```
In this example, a global constant variable `x` is defined with a value of 5, and a local variable `y` is defined inside the function `myFunction` using the `let` keyword.

Because `y` is defined inside the function `myFunction` using the `let` keyword, it can only be accessed within the scope of the function and will not be **accessible outside** of the function.

As a result, the code will execute as expected and output **"5"** twice and **"10"** once, and if you try to access `y` outside of the function scope, you will get an error because `y` is not defined.

By using `const` for the global variable `x`, you make sure that the variable **can't be reassigned** to another value, so you will not accidentally change the value of the global variable.

In this way, you can ensure that your variables are only accessible within the appropriate scope and prevent accidental modification or overwriting of global variables.

**Have any problem**? Comment section is for you. 

**Was this helpful**? Let me know in the comment section.