JavaScript Common Mistakes

JavaScript is a popular programming language, but it can be easy to make mistakes when you're learning it. In this article, we’ll go over some common mistakes that many people make while coding in JavaScript.

Case Sensitivity

JavaScript is case-sensitive. Variable and function names must match exactly in case. Also, remember that built-in JavaScript methods and CSS properties (when accessed in JavaScript) follow camelCase, not lowercase or PascalCase.

let userName = "Alice";
console.log(username); // ReferenceError: username is not defined

In this example

• In JavaScript, userName and username are considered two different variables.
• Since JavaScript is case-sensitive, you need to make sure you match the exact casing every time you reference a variable or function.

Using Assignment Instead of Comparison

One of the most common mistakes is accidentally using the assignment operator (=) instead of the comparison operator (== or ===) in conditions. This can lead to unexpected results, since the assignment operator will always return the assigned value, which can cause the condition to always evaluate as true.

let x = 0;
if (x = 10) {
  console.log("x is 10"); // This runs because x is assigned 10
}

In this example

• x = 10 assigns the value 10 to x, and the condition if (x = 10) always evaluates to true because the assignment returns the value of 10.
• The correct operator to use for comparison is == or ===.

Forgetting the 'this' Keyword

Another common mistake is forgetting to use ‘this‘. Functions defined on a JavaScript object accessing properties on that JavaScript object and failing to use the ‘this’ reference identifier.

const obj = {
  name: "Alice",
  greet() {
    console.log(name); // ReferenceError: name is not defined
  }
};

In this example

• Inside the greet method, name is not defined locally.
• To correctly access the name property of the person object, you need to use this.name, like so:

console.log(this.name); // Alice

Confusing addition and concatenation

In JavaScript, the + operator is used for both addition (when the operands are numbers) and concatenation (when the operands are strings). This can lead to confusion, especially when dealing with variables that could be numbers or strings.

let x = 10;
let y = "5";
console.log(x + y); // "105" (concatenation, not addition)

In this example

• JavaScript converts the number 10 to a string and then concatenates it with the string "5", producing "105".
• To ensure proper addition, both operands must be numbers

let result = x + Number(y); // 15

Misunderstanding Scope and Closures

JavaScript uses function-scoped variables (var), which can cause problems in loops, especially when asynchronous functions like setTimeout are used. This happens because var does not create block-scoped variables inside loops.

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}

In this example

• Since var is function-scoped, the value of i is shared across all iterations of the loop.
• By the time the setTimeout function runs, the loop has already completed, and i has the final value of 5.

Breaking Strings Improperly

While JavaScript allows you to break statements across multiple lines, breaking strings in the middle without proper escaping can cause errors.

let str = "Hello \
World!";  // This works

In this example

• The backslash (\) allows you to continue a string on the next line.
• Without it, JavaScript will throw an error.

Misplacing Semicolons

Misplacing semicolons, especially in control flow statements like if, can lead to unexpected behavior by prematurely ending the statement. This can cause blocks of code to run unconditionally, leading to bugs. Always ensure semicolons are placed correctly.

if (x === 10); {
  console.log("This runs anyway!");
}

In this example

• The semicolon after if (x === 10) ends the if statement prematurely.
• This causes the if condition to do nothing, and the block inside {} runs unconditionally.
• As a result, console.log("This runs anyway!"); is executed regardless of the value of x

Breaking return Statements

When you break a return statement across multiple lines in JavaScript, the engine automatically inserts a semicolon at the end of the line, causing the function to return prematurely with undefined. This can lead to unexpected results.

function foo() {
  return
  42;  // This will return undefined, not 42
}

In this example

• The return statement is broken across two lines.
• JavaScript automatically inserts a semicolon after return, causing the function to return undefined before reaching the value 42.
• As a result, the function returns undefined instead of 42.

Using Arrays with Named Indexes

In JavaScript, arrays should be indexed with numbers, not named properties. If you use named indexes, JavaScript treats the array as an object, which can break array-specific methods and cause unexpected behavior.

const arr = [];
arr["name"] = "Alice";
console.log(arr.length); // 0

In this example

• an array arr is created, and a named property "name" is added to it.
• Since arrays in JavaScript are indexed numerically, adding a named property doesn't affect the array's length, which remains 0.
• The "name" property is treated as an object key, not as part of the array.

Trailing Commas

Trailing commas are allowed in modern JavaScript for arrays and objects, simplifying code maintenance. However, they can lead to errors in older browsers and when dealing with JSON, as JSON does not support trailing commas.

const obj = {
  name: "Alice",
};

In this example

• we define a constant object obj with a single property name set to the string "Alice".
• The trailing comma after the name property is allowed in modern JavaScript environments, but it doesn't affect the object's behavior and makes it easier to add new properties later.

Undefined vs Null

Understanding the difference between undefined and null is important in JavaScipt. Both are used to represent "no value" or "empty" in different contexts. However, these two values are not interchangeable, and their meanings are slightly different.

let myVar;
console.log(myVar == null); // true
console.log(myVar === null); // false

In this example

• undefined means a variable has been declared but has not been assigned a value.
• null is an explicit assignment to indicate that a variable has no value.