Javascript mistakes that beginners do

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.

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:

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.

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.

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:

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:

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:

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

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.

Blog