Javascript fundamentals that can prevent debugging headaches

One of the key strengths of Javascript lies in its expressive nature. It gives programmers high level of freedom. Yet, as programs and applications become increasingly complex, the same expressive nature can be its downfall.

Loosely written code can result in mysterious bugs that can take hours to resolve. In order to prevent these situations, it is imperative that javascript fundamentals are understood and practiced from the start.

Understanding Primitive vs. Complex Types

Javascript contains 6 main primitive types

• Number
• String
• Boolean
• BigInt
• Symbol
• Undefined

The key idea to take away for primitives is that primitive values are immutable (cannot be changed).

Complex types which include arrays, objects and functions are immutable.

These distinctions come up in practice all the time and can cause mysterious problems in applications. It is important not to confuse immutability of primitive types with a variable containing a primitive value. A variable can always be reassigned a new value (in which case the value is replaced not changed).

Example:

// Primitive Type
var medium = "MEDIUM";
console.log(medium); // MEDIUM
medium.toLowerCase();
console.log(medium); // MEDIUM - string remains unchanged
// Variable assignment with primitive types
medium = medium.toLowerCase();
console.log(medium); // medium - primitive value is replaced 
// Complex Types
var cities = [];
console.log(cities); // []
cities.push("Sydney"); 
console.log(cities); // ["Sydney"] - array was changed

Understanding Truthy and Falsy Values

Another fundamental concept to understand is truthy and falsy values. Javascript coerces any value to a boolean in contexts where it is required such as conditionals and loops. In these situations, it is important to know exactly when the conditionals will be triggered to avoid buggy corner cases.

There are 8 falsy values to keep in mind

• false keyword
• 0
• -0 (Negative 0)
• 0n (BigInt)
• “” (empty string)
• null
• undefined
• NAN

All values that are not falsy are truthy.

Although the concept is simple at face value, there are few caveats that can cause issues in practice as shown in examples below.

Examples:

if (0) // falsy
if ("0") // truthy
if (false) // falsy
if ("false") // truthy

Understanding the this keyword

One of the biggest pain points in javascript is the use of “this” keyword. In practice, a few useful rules can be followed in order to avoid running into problems.

• Using this inside a method will refer to the object that contains the method.

Example:

var car = {
  color: "Red",
  brand : "Toyota",
  info : function() {
    return this.color + " " + this.brand;
  }
};
car.info(); // Red Toyota - this refers to the car object

• Outside any function, methods and objects, using this will refer to the global object. (in case of a browser global object = window object).
• Inside a function, this refers to the global object. However, in strict mode this inside a function will be undefined .

Example:

function myFunction() {
  return this;  // refers to the global object
}

• In HTML event handlers, this will refer to the element that received the event.

Example:

<button onclick="this.style.color='red'">
  Click to Change Colour!
</button>

Putting the rules listed above will result in a more pleasant developer experience in addition to higher quality applications.