JavaScript Quirks

On the first day of BootCamp, we were all asked to introduce ourselves and share our quirks with other students. It was an exciting moment, but as soon as we finished the introductions, we took a deep dive into the ocean of JavaScript. It felt like gibberish at first, but I realized I am learning more than I admit as I continue this journey. For example, I can see a fundamental JavaScript question, and my mind goes straight to solving the problem and getting the computer to do what I need it to do. However, the more time I spend with the language, the more I notice its quirks. I have come to understand that javaScript is petty. This article will point out some quirks and an easy way to fix them, so they do not affect your code.

Semicolons(;)

I do not know about other languages, but I know that JavaScript loves its semicolons (;). Semicolons are crucial to your JavaScript code, and you must use your semicolons where it matters or else it will break your code. Unfortunately, JavaScript does not complain when you miss a semicolon; it will just refuse to work since it is passive-aggressive. To understand the importance of semicolons in JavaScript, you need to understand JavaScript’s automatic semicolon insertion rule. The rule states that a valid program ends with a (;) if it does not end with a (;) then JavaScript will automatically insert a (;) (petty right?!).

You may be thinking, well, that is not a problem, we should allow it to do its job. Please do not fall for this trap because it will break your code. Consider the following code:

const addNumber = function (number){
if (number > 5){
return
number + 2
}
};
console.log(addNumber(10));

It will not work if you run it because JavaScript automatically inserts a (;) after the return statement. In other words, you would get an ‘undefined’ error because JavaScript interpreted your code as:

const addNumber = function (number){
if (number > 5){
return;
number + 2;
}
}
console.log(addNumber(10));

So, to prevent errors, you must insert semicolons (;) at the right place, or you will be left wondering where you went wrong. A better way to write the code is as follow:

const addNumber = function (number){
if (number > 5){
return number + 2;
}
};
console.log(addNumber(10));

This code will run, and JavaScript will not insert its own (;) since you already inserted it. Think of semicolons as a way to prevent run-on sentences in JavaScript.

Strict Equality (===)

The second quirk has to do with strict Equality; comparing data types is something you will have to do regularly as a developer; using the strict Equality (===) instead of Equality (==) will save you from frustration and errors. The equality operator (==) leads to type coercion in JavaScript, this means the equality operator sees a string containing “1” and says it is the same as number 1. It takes away the quotation (“”) around the number and check if what is inside is the same as the other side. On the other hand, the strict Equality (===) checks if the data types are the same and if it is not, it returns false. For example:

let blue = 1;
let red = "1";
console.log(blue == red) // true

This code returns true because the equality operator is a type conversion; however, if we used strict Equality on the same code, it will return false.

let blue = 1;
let red = "1";
console.log(blue === red) //false

This code returns false because the string containing one is not the same as number 1. The same rule applies to non-equality. Instead of writing (!=) to check if data types are not equal, it advised that we use (!==). The (!==) asks the computer to check if the data type is strictly not equivalent to each other; it ensures what we are trying to compare is not valid.

Let and const

It would be best not to use “var” to declare a variable because it is not block-scoped and allows for mutation. Instead, professionals advise using “let” or “const” to declare a variable. “let” can be used in place of “var” in case you want to be able to change the value of the variable. Most developers use let instead of “var” because it provides block scoping. Being block-scoped means a variable does not pass its boundaries, unlike var that does not respect borders. If your value needs to change in the future, then you use “let,” else use “const.” The “const” keyword defines a variable whose values should never change. It returns a type error if you reassign the variable to a new value. For example:

const blue = "red";
blue = "no";
//error: Uncaught TypeError: Assignment to constant variable.

It works, but what happens if the value is an object? The “const” keyword does not protect the values in the object from changing. For example:

const angel = {school: "JCM", age: 15}
angel.age = 20;
console.log(angel.age); // returns 20

To prevent the values in an object from mutating, you need to use the freeze(); object method. For example:

const angel = Object.freeze({school: "JCM", age: 15})
angel.age = 20;
console.log(angel.age);
//error: Uncaught TypeError: Cannot assign to read only property 'age' of object

That is how you fix the error of object mutation with a const keyword. However, the freeze() method does not help if the object is nested like this:

const angela = Object.freeze({name: "angela", age: 55, location:{
address: "Canada",
aptNumber: 5510
}})

The location object is nested inside “angela” using the freeze method. While we will not be able to change the name and age value in “angela,” it is possible to change the location values. For example:

const angela = Object.freeze({name: "angela", age: 55, location:{
address: "Canada",
aptNumber: 5510
}})
angela.location.address = "Markham";
console.log(angela.location.address) // Output: Markham

The values inside a nested object can change even with the freeze() method, and there is no way to ensure its values do not change (at least not any that I have seen). In other words, JavaScript gave us the “const” keyword to prevent mutation but makes it possible for the items in arrays and objects to mutate. The freeze() method ensures that modification is impossible. However, if the object is nested inside another object, there is no way for Javascript to ensure its values are not modified (weird).

Fixing Errors

As I have said, the language is quirky and weird, but there are many ways to ensure none of this ever becomes a problem to your code. I have seen people write “use strict” at the top of their code to push JavaScript to scream when there is a problem/error.

The one way we learned at the Bootcamp is eslint the javaScript file. We are taught to lint out codes in the command line using “eslint filename.js.” ESLint not only tells you where the problem lies but could also fix the errors for you if you run “ — fix” on the file. If you run “eslint filename.js — fix” in your command line, it will fix the codes for you and highlight errors that could affect your code.

Now we have learned some JavaScript quirks, and there are many more that you should lookup. I admit that JavaScript is just like me because I majorly enjoy songs written in my first language, Yoruba.