Table of contents
INTRODUCTION
It is quite common to make mistakes when one is completely new to a language. In this article, I will be listing out some of the errors I made and some of which I've seen people make and how to avoid those errors.
COMMON ERRORS
Initializing a constant on a separate statement
As we all know, const is used to declare variables whose value will remain unchanged throughout a program. One thing we forget to take note of is that, unlike var and let, we cannot declare a constant on a separate line as an assignment. I did this once before I realised it. A constant variable should be assigned a value immediately it is declared
//wrong
const firstName;
firstName = "Ann";
//Right
const firstName = "Ann";
Omitting parenthesis in mathematical expressions
Before you attempt to solve a problem that involves the use of mathematical and comparison operators, it is necessary to think of how you want such an expression to be evaluated. Operators in JavaScript all have a precedence number. Operators with a higher precedence number are treated with higher priority. For Instance, we want to sum 2 numbers and multiply it with the sum of 2 other numbers
//wrong
console.log(2 + 3 * 3 + 3);
From the above, we can see that * gets evaluated first and this isn't what we want. * and / have a higher precedence than - and + hence will be evaluated first. To solve this, wrap the expression which we want to be evaluated first within a parenthesis, now everything works as expected.
//Right
console.log( (2 + 3) * (3 + 3) );
Parenthesis has higher precedence than all other operators.
You can check out the precedence of operators table here (developer.mozilla.org/en-US/docs/Web/JavaSc..)
Calling a function declaration outside the block it is declared
In "use strict" mode, a function declaration is only visible within the block it is declared. An attempt to call the function outside that block will result in an error.
//wrong
"use strict";
let admin = true;
if (admin) {
function grantPermission() {
console.log("permission granted");
}
} else {
function grantPermission() {
console.log("permission denied");
}
}
grantPermission();
The function is only visible within the if statement because it was declared within that block making it impossible to access grantPermission function outside that block. To access grantPermission function call it within the block it was declared which is the if and else block.
//Right but take a look at a better solution below
"use strict";
let admin = true;
if (admin) {
function grantPermission() {
console.log("permission granted");
}
grantPermission();
} else {
function grantPermission() {
console.log("permission denied");
}
grantPermission();
}
In cases like this, use a function expression. Declare a variable outside the block and assign a function value to the variable inside the block. This way it has proper visibility and can be accessed outside the if statement.
//Right
"use strict";
let admin = true;
let grantPermission;
if (admin) {
grantPermission = function () {
console.log("permission granted");
}
} else {
grantPermission = function () {
console.log("permission denied");
}
}
grantPermission();
PS: Strict mode was introduced in ECMAScript 5. By default, strict mode isn't enabled in browsers. Strict mode can be invoked in a script or within a function. To enable the strict mode in a script, add the statement "use strict" at the top of your script and to enable strict mode in a function, add "use strict" within the function body before any statement. In strict mode, some mistakes which were formerly silenced will throw an error. "use strict" can be removed when you start working with classes and modules as it is enabled by default.
You can read more about it strict mode (developer.mozilla.org/en-US/docs/Web/JavaSc..)
Calling a function expression before initialization
A function expression is created upon reaching execution and it is only reachable from that moment. An attempt to call a function expression before initialization will result in an error
//wrong
displayResult();
let displayResult = function() {
console.log("Result....");
}
To access a function before declaration, a function declaration should be used in place of a function expression
//Right
displayResult();
function displayResult() {
console.log("Result....");
}
Adding a return statement to a one-linear arrow function
I did this when I wrote an arrow function for the first time. An arrow function doesn't need a return statement in a one-line action as the value gotten from the evaluation of the expression at the right-hand side of the arrow is automatically returned.
//Wrong
let product = (a, b) => return a * b;
//Right
let product = (a, b) => a * b;
console.log( product(2, 2) );
For multi-line statements, the implicit return doesn't work here. You will have to enclose the statements within curly braces and add a return statement.
//Right
let product = (a, b) => {
let multiply = a * b;
return multiply;
}
console.log( product(2, 2) );
SUMMARY
It is perfectly normal to make these mistakes if you're totally new to JavaScript. The syntax becomes clearer as you continuously stick with it. Take note of these mistakes which leads to errors, thus slows down productivity.
Thanks for reading. Kindly drop a comment in the comment section.