Scribd
Upload
19 views

10 JS Coding Mistakes

The document discusses 10 common JavaScript coding mistakes and their solutions. The mistakes include: not declaring variables properly, using the wrong comparison operators, omitting semicolons, misunderstanding scoping, using "var" instead of "let" or "const", using "==" instead of "===", omitting curly braces in if statements, using the wrong data type conversion methods like "parseFloat" instead of "parseInt", not handling asynchronous code properly using callbacks, promises or async/await, and not properly scoping block variables. Examples are provided for each mistake and correction.

Uploaded by

svekisl
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

10 JS Coding Mistakes

The document discusses 10 common JavaScript coding mistakes and their solutions. The mistakes include: not declaring variables properly, using the wrong comparison operators, omitting semicolons, misunderstanding scoping, using "var" instead of "let" or "const", using "==" instead of "===", omitting curly braces in if statements, using the wrong data type conversion methods like "parseFloat" instead of "parseInt", not handling asynchronous code properly using callbacks, promises or async/await, and not properly scoping block variables. Examples are provided for each mistake and correction.

Uploaded by

svekisl
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

1

10 JavaScript Coding Mistakes with


solutions

Not declaring variables properly:


Using the wrong comparison operator:
Not using semicolons:
Not understanding scoping:
Using "var" instead of "let" or "const":
Instead, use "let" or "const":
Using "==" instead of "===":
Not using curly braces in if statements:
Using "parseFloat" instead of "parseInt":
Not handling asynchronous code properly:
Example using a promise:
Example using async/await:
Not properly scoping variables:
Example using let:
Example using var:

Laurence Svekis https://basescripts.com/


2

Not declaring variables properly:


One of the most common mistakes in JavaScript is forgetting to
declare a variable using the "var", "let", or "const" keyword. This
can lead to unexpected results and make debugging difficult.
Example:
x = 10; // This variable is not declared
console.log(x); // Output: 10
Instead, declare the variable using "var", "let", or "const":
let x = 10;
console.log(x); // Output: 10

Using the wrong comparison operator:


Using the wrong comparison operator can lead to unexpected
results, especially when comparing strings and numbers. The
"===" operator checks for both value and data type equality,
while the "==" operator only checks for value equality.
Example:
console.log(1 == '1'); // Output: true
console.log(1 === '1'); // Output: false

Laurence Svekis https://basescripts.com/


3

Not using semicolons:


JavaScript uses semicolons to separate statements. While the
interpreter will automatically insert them in most cases, it's best
practice to include them yourself to avoid unexpected results.
Example:
let x = 10
let y = 20
console.log(x + y) // Output: 30
Instead, add semicolons:
let x = 10;
let y = 20;
console.log(x + y); // Output: 30

Not understanding scoping:


Variables declared inside a function have local scope and are not
accessible outside of the function. Variables declared outside of a
function have global scope and can be accessed from anywhere in
the code.
Example:
let x = 10;

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

Laurence Svekis https://basescripts.com/


4

myFunction();
console.log(x); // Output: 10

Using "var" instead of "let" or "const":


"var" declares a variable with function scope, while "let" and
"const" declare variables with block scope. Using "var" can lead to
unexpected results when trying to access variables outside of
their intended scope.

Example:
function myFunction() {
if (true) {
var x = 5;
}
console.log(x); // Output: 5
}

myFunction();
console.log(x); // Output: ReferenceError: x is not
defined

Laurence Svekis https://basescripts.com/


5

Instead, use "let" or "const":

function myFunction() {
if (true) {
let x = 5;
}
console.log(x); // Output: ReferenceError: x is not
defined
}

myFunction();
console.log(x); // Output: ReferenceError: x is not
defined

Using "==" instead of "===":


As mentioned earlier, "==" only checks for value equality, while
"===" checks for both value and data type equality. Using "=="
can lead to unexpected results.
Example:
console.log(1 == '1'); // Output: true
Instead, use "===":
console.log(1 === '1'); // Output: false

Laurence Svekis https://basescripts.com/


6

Not using curly braces in if statements:


While it's possible to omit curly braces in if statements when
there's only one statement, it's best practice to include them to
avoid confusion.
Example:
if (x > 10)
console.log('x is greater than 10');

Instead, use curly braces:


if (x > 10) {
console.log('x is greater than 10');
}

Using "parseFloat" instead of "parseInt":


"parseFloat" is used to convert a string to a floating-point
number, while "parseInt" is used to convert a string to an integer.
Using the wrong method can lead to unexpected results.
Example:
console.log(parseFloat('10.5')); // Output: 10.5
console.log(parseInt('10.5')); // Output: 10

Laurence Svekis https://basescripts.com/


7

Not handling asynchronous code properly:


JavaScript is a single-threaded language, but it can handle
asynchronous tasks using callbacks, promises, and async/await.
Not handling asynchronous code properly can lead to race
conditions and other bugs.
Example using a callback:
function myFunction(callback) {
setTimeout(function() {
callback();
}, 1000);
}

myFunction(function() {
console.log('Callback executed after 1 second');
});

Example using a promise:

function myFunction() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('Promise resolved after 1 second');
}, 1000);
});
}

Laurence Svekis https://basescripts.com/


8

myFunction().then(function(result) {
console.log(result);
});

Example using async/await:


async function myFunction() {
try {
const result = await new Promise(function(resolve,
reject) {
setTimeout(function() {
resolve('Async/await resolved after 1 second');
}, 1000);
});
console.log(result);
} catch (error) {
console.error(error);
}
}
myFunction();

Not properly scoping variables:


When declaring variables, it's important to declare them within
the proper scope, otherwise they may not be accessible where
they need to be.
Example:

function myFunction() {
var x = 1; // x is declared in the function scope
if (true) {

Laurence Svekis https://basescripts.com/


9

var x = 2; // x is now 2, and it's also in the


function scope
}
console.log(x); // Output: 2
}
myFunction();

To properly scope variables, you can use the "let" and "const"
keywords introduced in ES6.

Example using let:


function myFunction() {
let x = 1; // x is declared in the function scope
if (true) {
let x = 2; // x is now 2, but it's only in the
block scope
}
console.log(x); // Output: 1
}
myFunction();

Example using var:


function myFunction() {
var x = 1; // x is declared in the function scope
if (true) {
var x = 2; // x is now 2, and it's also in the
function scope
}
console.log(x); // Output: 2
}
myFunction();

Laurence Svekis https://basescripts.com/


10

In this example, x is declared using the var keyword inside the


function myFunction(). When the if block is executed, x is
assigned a new value of 2, which changes the value of x outside
the if block as well. This is because variables declared with var
have function-level scope, meaning they are accessible
throughout the entire function, even if they are declared inside a
block.

To properly scope variables, you can use the let and const
keywords introduced in ES6. Here's an example:

function myFunction() {
let x = 1; // x is declared in the function scope
if (true) {
let x = 2; // x is now 2, but it's only in the
block scope
}
console.log(x); // Output: 1
}
myFunction();

In this example, x is declared using the let keyword inside the


function myFunction(). When the if block is executed, a new
variable called x is created with a value of 2, but this variable is
only accessible inside the block. The original variable x with a
value of 1 is still accessible outside the block and is outputted to
the console.

Laurence Svekis https://basescripts.com/

You might also like