DEV Community

Danish Saleem
Danish Saleem

Posted on

6 Beginner JavaScript Mistakes to Avoid!

JavaScript can be a little daunting to a beginner but it’s important to watch out for mistakes. So, I've rounded up 6 common mistakes beginners make and how you can avoid them, along with a little advice for any aspiring developers/programmers.

Assignment vs equality operators

In JavaScript a single equals sign (=) and double/triple equals sign (==/===) mean very different things so don't get them confused.

// Wrong

const text = "JavaScript";

if ((text = "JS")) {
  console.log(text);
} // output = JS
Enter fullscreen mode Exit fullscreen mode
// Right

const text = "JavaScript";

if (text == "JS") {
  console.log(text);
} // no output

// OR

if (text === "JS") {
  console.log(text);
} // no output
Enter fullscreen mode Exit fullscreen mode

Not using default values

Setting default values for dynamic or optional variables is good practice to prevent unexpected errors due to undefined values.

// Wrong

function addNumbers(a, b) {
  console.log(a + b);
}

addNumbers(); // NaN
Enter fullscreen mode Exit fullscreen mode
// Right

function addNumbers(a = 0, b = 0) {
  console.log(a + b);
}

addNumbers(); // 0

addNumbers(5); // 5
Enter fullscreen mode Exit fullscreen mode

Addition vs concatenation

A plus symbol (+) is used for both mathematics addition and for combining string. Keep that in mind to avoid any unexpected issues.

// Wrong

console.log(30 + "50"); // 3050
Enter fullscreen mode Exit fullscreen mode
// Right

console.log(30 + 50); // 80

console.log("Java" + "Script"); // JavaScript
Enter fullscreen mode Exit fullscreen mode

Improper naming of variables

It's important to name variables as precisely and accurately as possible. This will prevent accidental duplication and make the code easier to read and understand.

// Wrong

const p = 600;

const d = 100;

const total = 500;
Enter fullscreen mode Exit fullscreen mode
// Right

const price = 600;

const discount = 100;

const totalPrice = 500;
Enter fullscreen mode Exit fullscreen mode

Undefined is not the same as null

Undefined means a variable has not been assigned a value, while null is a special assignment value, which can be assigned to a variable as a representation of no value.

// Wrong

let variable;

console.log(variable); // undefined
Enter fullscreen mode Exit fullscreen mode
// Right

let emptyVariable = null;

console.log(emptyVariable); // null
Enter fullscreen mode Exit fullscreen mode

Misunderstanding scope

A scope can be global or local and refers to the current context of code, which determines the accessibility of variables to JavaScript.

// Wrong

console.log(message); // Error: message is not defined
Enter fullscreen mode Exit fullscreen mode
// Right

// Global scope variable
const firstName = "Dev";

function showMessage() {
  // Local scope variable
  const message = "Welcome back";

  console.log(`${message}, ${firstName}`);
}

showMessage(); // Welcome back, Dev
Enter fullscreen mode Exit fullscreen mode

A little advice

Learning JavaScript (or any programming language) is not all about writing the code or learning the syntax. A big chunk of it is problem-solving and learning the process of identifying and solving the problems you come across. So make sure you don't forget this part and use all the resources available to you to learn how to solve problems. It's what will take you from being a good developer to becoming a great developer!


Let's connect 💜

You can follow me on Twitter, Instagram & GitHub

If you like this post. Kindly support me by Buying Me a Coffee

Buy Me a Coffee

Discussion (0)