João Guerreiro Designer & Developer
Current Status:

JavaScript

Table of Contents

Variables

In JavaScript, you can use letters, digits, underscores, and dollar signs to declare variables. However, a variable name must start with a letter, an underscore (_), or a dollar sign ($). Additionally, variable names are case-sensitive, meaning myVar and myvar are treated as different variables.

Null and Undefined

undefined is automatically assigned to variables that have been declared but not initialized, missing function parameters, non-existent object properties, and functions that return no value. Conversely, null is explicitly assigned by programmers to indicate the intentional absence of any object or value. While undefined signifies a lack of initialization, null represents a deliberate assignment of “no value”.

Variable Shadowing

Variable shadowing occurs when a variable declared within a nested scope has the same name as a variable in an outer scope, effectively “shadowing” the outer variable within that scope. This means that the inner variable takes precedence over the outer variable within its scope, making the outer variable inaccessible within that scope.

Const

Using const instead of let in JavaScript provides benefits like immutability, clarifying intent, safer refactoring, and scoped block variables, resulting in more robust, readable, and maintainable code.

Template Literals

Template literals in JavaScript allow for string interpolation and multiline strings using backticks (`), for example: const moonWeight = You weigh ${weight * 0.165} pounds on the moon;

Assignment vs. Mutation

Assignment

Assignment means creating or re-assigning a value to a variable. It involves pointing a variable to a new value, replacing the reference.

Key Idea: Assignment changes the reference of the variable to a new value, not the original value itself.

let x = 10; // Assign 10 to x
x = 20;     // Re-assign x to 20 (x now points to a new value)

In this example, x initially refers to 10. When reassigned, it stops referring to 10 and instead points to 20.

Mutation

Mutation means changing the contents of a data structure without changing its reference. Mutating affects the same object or array directly.

Key Idea: Mutation modifies the existing value or structure rather than replacing it.

const obj = { name: "Alice" }; // obj points to an object
obj.name = "Bob";             // Mutating the object; reference stays the same
Here, obj continues to point to the same object in memory, but the name property of the object is changed (mutated).

Key Difference: Assignment replaces the reference, while mutation alters the existing value. For predictable code, prefer assignment over mutation, especially with objects or arrays.

Introducing globalThis

globalThis was introduced as part of the ECMAScript 2020 (ES11) specification. It provides a way to access the global object (browser: window; node: global) regardless of the environment. So whether you’re in a browser, in Node.js, or in any other JavaScript environment, you can use globalThis to access the global object.

Arrays

JavaScript arrays are used to store multiple values in a single variable. Arrays can hold various types of data such as numbers, strings, objects, and other arrays. They provide built-in methods to efficiently manipulate and interact with the data.

Array Destructuring

Array destructuring is a convenient way to extract values from an array and assign them to variables in a single, concise statement.

Basic Syntax:

`const [variable1, variable2, ...rest] = array;`;

Example:

const fruits = ["apple", "banana", "mango"];

// Destructuring the first two elements
const [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // "apple"
console.log(secondFruit); // "banana"

In this example, the values "apple" and "banana" are extracted from the fruits array and assigned to firstFruit and secondFruit, respectively.

Skipping Elements: You can skip elements in the array by leaving a blank space between commas.

const fruits = ["apple", "banana", "mango"];

// Skipping the second element
const [firstFruit, , thirdFruit] = fruits;

console.log(thirdFruit); // "mango"

Using the Rest Operator: You can also use the rest operator (...) to capture the remaining elements of the array into a new array.

const fruits = ["apple", "banana", "mango", "pineapple"];

// Destructuring with the rest operator
const [firstFruit, ...otherFruits] = fruits;

console.log(otherFruits); // ["banana", "mango", "pineapple"]

Array Methods

includes

The includes method checks if an array contains a specific value. It returns true if the value is found and false otherwise.

Syntax:

array.includes(valueToFind, fromIndex);
  • valueToFind: The value to search for.
  • fromIndex (optional): The position in the array at which to begin the search. Default is 0.

Example:

let fruits = ["apple", "banana", "mango"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false

contact

The concat method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

Syntax:

array1.concat(array2, array3, ..., arrayN)
  • array1: The array on which concat is called.
  • array2, array3, ..., arrayN: The arrays or values to concatenate with array1.

Example:

let fruits = ["apple", "banana"];
let moreFruits = ["mango", "pineapple"];
let combinedFruits = fruits.concat(moreFruits);

console.log(combinedFruits); // ["apple", "banana", "mango", "pineapple"]
console.log(fruits); // ["apple", "banana"] (original array remains unchanged)
console.log(moreFruits); // ["mango", "pineapple"] (original array

some

The some method tests whether at least one element in the array passes the test implemented by the provided function. It returns true or false.

Syntax:

array.some(callback(element, index, array), thisArg);
  • callback: Function to test for each element.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array some was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let students = [
  { name: "Alice", grade: 85 },
  { name: "Bob", grade: 92 },
  { name: "Charlie", grade: 88 },
];
let hasTopStudent = students.some((student) => student.grade > 90);
console.log(hasTopStudent); // true

every

The every method tests whether all elements in the array pass the test implemented by the provided function. It returns true or false.

Syntax:

array.every(callback(element, index, array), thisArg);
  • callback: Function to test for each element.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array every was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let students = [
  { name: "Alice", grade: 85 },
  { name: "Bob", grade: 92 },
  { name: "Charlie", grade: 88 },
];
let allPassed = students.every((student) => student.grade >= 60);
console.log(allPassed); // true

reduce

The reduce method applies a function against an accumulator and each element in the array to reduce it to a single value.

Syntax:

array.reduce(callback(accumulator, currentValue, index, array), initialValue);
  • callback: Function to execute on each element.
    • accumulator: The accumulator accumulates the callback’s return values.
    • currentValue: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array reduce was called upon.
  • initialValue (optional): Value to use as the first argument to the first call of the callback.

Example:

let prices = [10, 20, 30];
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 60

map

The map method creates a new array populated with the results of calling a provided function on every element in the calling array. It does not modify the original array.

Syntax:

array.map(callback(element, index, array), thisArg);
  • callback: Function that produces an element of the new array.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array map was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let prices = [10, 20, 30];
let withTax = prices.map((price) => price * 1.1);
console.log(withTax); // [11, 22, 33]
console.log(prices); // [10, 20, 30]

forEach

The forEach method executes a provided function once for each array element. Unlike map, it does not create a new array.

Syntax:

array.forEach(callback(element, index, array), thisArg);
  • callback: Function to execute on each element.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array forEach was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let prices = [10, 20, 30];
prices.forEach((price) => console.log(price * 1.1)); // Outputs: 11, 22, 33
console.log(prices); // [10, 20, 30]

filter

The filter method creates a new array with all elements that pass the test implemented by the provided function. It creates a new array, similar to map.

Syntax:

array.filter(callback(element, index, array), thisArg);
  • callback: Function to test each element of the array.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array filter was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let prices = [10, 20, 30];
let affordable = prices.filter((price) => price < 25);
console.log(affordable); // [10, 20]
console.log(prices); // [10, 20, 30]

find

The find method returns the value of the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, undefined is returned.

Syntax:

array.find(callback(element, index, array), thisArg);
  • callback: Function to execute on each value in the array.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array find was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let students = [
  { name: "Alice", grade: 85 },
  { name: "Bob", grade: 92 },
  { name: "Charlie", grade: 88 },
];
let topStudent = students.find((student) => student.grade > 90);
console.log(topStudent); // {name: "Bob", grade: 92}

findIndex

The findIndex method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, it returns -1.

Syntax:

array.findIndex(callback(element, index, array), thisArg);
  • callback: Function to execute on each value in the array.
    • element: The current element being processed.
    • index (optional): The index of the current element.
    • array (optional): The array findIndex was called upon.
  • thisArg (optional): Value to use as this when executing the callback.

Example:

let students = [
  { name: "Alice", grade: 85 },
  { name: "Bob", grade: 92 },
  { name: "Charlie", grade: 88 },
];

let topStudentIndex = students.findIndex((student) => student.grade > 90);
console.log(topStudentIndex); // 1

Objects

Object Destructuring

Object destructuring in JavaScript allows you to extract properties from objects and assign them to variables using a syntax that is concise and readable. It’s useful because it simplifies code, making it easier to work with objects and their properties. The main benefits include reducing boilerplate code for accessing properties (simplicity), making it clear which properties are being used (clarity), and allowing the setting of default values for properties.

For example, consider the following scenario with nested destructuring in function parameters:

const user = {
  name: "Alice",
  age: 30,
  address: {
    city: "Wonderland",
    zip: "12345",
  },
};

// Without destructuring
function greet(user) {
  const name = user.name;
  const age = user.age;
  const city = user.address.city;
  console.log(`Hello, ${name} from ${city}. You are ${age} years old.`);
}

// With destructuring
function greet({ name, age, address: { city } }) {
  console.log(`Hello, ${name} from ${city}. You are ${age} years old.`);
}

// With default values
function greet({ name, age, address: { city = "Unknown" } }) {
  console.log(`Hello, ${name} from ${city}. You are ${age} years old.`);
}

greet(user); // Output: Hello, Alice from Wonderland. You are 30 years old.

Merging

Object spread in JavaScript allows you to merge objects and copy properties from one object to another in a concise and readable way. It’s useful for combining multiple objects into one, updating properties, or cloning objects with ease.

const user = {
  name: "Alice",
  age: 30,
  address: {
    city: "Wonderland",
    zip: "12345",
  },
};

const updates = {
  age: 31,
  address: {
    city: "New Wonderland",
  },
};

const updatedUser = {
  ...user,
  ...updates,
  address: {
    ...user.address,
    ...updates.address,
  },
};

console.log(updatedUser);
// Output:
// {
//   name: "Alice",
//   age: 31,
//   address: {
//     city: "New Wonderland",
//     zip: "12345"
//   }
// }

Value vs. Reference in Primitive and Object Data Types

Primitives (e.g., numbers, strings, booleans) are passed by value. This means that when you assign or pass a primitive, a copy of the value is made. Changing the new value does not affect the original.

let a = 5;
let b = a; // b is a copy of a
b = 10; // changing b does not change a
console.log(a); // 5

Objects (e.g., arrays, functions, objects) are passed by reference. This means that when you assign or pass an object, what gets copied is the reference to the same object in memory. Changing the object through one reference affects all references.

let obj1 = { name: "Alice" };
let obj2 = obj1; // obj2 is a reference to obj1
obj2.name = "Bob"; // changing obj2 also changes obj1
console.log(obj1.name); // 'Bob'

Even if two objects have identical properties and values, they are not considered equal because they reference different locations in memory.

let obj1 = {};
let obj2 = {};
console.log(obj1 === obj2); // false, because they are different objects in memory

Maps

In JavaScript, a Map is a collection of keyed data items, similar to an object. However, there are important differences between objects and maps, which affect their use cases.

A Map object holds key-value pairs where both keys and values can be of any data type. Maps maintain the order of their elements and provide several methods to interact with the data, such as .set(), .get(), .has(), and .delete().

Differences Between Objects and Maps

  1. Key Types:
    • Objects: Keys must be strings or symbols.
    • Maps: Keys can be any type, including functions, objects, and primitives.
  2. Order:
    • Objects: Keys are not guaranteed to be in any particular order.
    • Maps: Keys are ordered by insertion.
  3. Performance:
    • Objects: Generally slower for frequent addition and deletion of key-value pairs.
    • Maps: Optimized for frequent additions and deletions of key-value pairs.
  4. Size:
    • Objects: No direct way to get the number of keys.
    • Maps: size property returns the number of key-value pairs.
  5. Iteration:
    • Objects: Can be iterated using for...in, but this includes inherited properties unless filtered.
    • Maps: Directly iterable and only iterates over its elements.

When to Use

  • Objects:

    • When you need simple key-value pairs.
    • When working with JSON (since JSON is inherently object-based).
    • When the keys are known and are strings or symbols.

  • Maps:

    • When you need a collection of key-value pairs with keys that are of various types.
    • When the order of insertion matters.
    • When you frequently add and remove key-value pairs.
    • When you need methods like .size, .forEach(), and other Map methods.

Example

// Using an Object
const obj = {
  name: "Alice",
  age: 30,
};

console.log(obj.name); // Output: Alice
obj.city = "Wonderland";
console.log(obj); // Output: { name: 'Alice', age: 30, city: 'Wonderland' }

// Using a Map
const map = new Map();
map.set("name", "Alice");
map.set("age", 30);

console.log(map.get("name")); // Output: Alice
map.set("city", "Wonderland");
console.log(map); // Output: Map(3) { 'name' => 'Alice', 'age' => 30, 'city' => 'Wonderland' }

In summary, while both objects and maps store key-value pairs, maps offer more flexibility with key types, maintain insertion order, and provide more efficient key-value pair operations, making them ideal for more complex scenarios where these features are needed.

Classes

JavaScript classes, introduced in ES6, provide a more elegant and intuitive syntax for creating and managing objects compared to traditional constructor functions. While constructor functions were the primary method for defining object blueprints and handling inheritance, classes streamline this process with a clearer, more concise syntax.

Core Concepts:

  1. Defining a Class: Classes in JavaScript encapsulate data and behavior into a single construct. You define a class using the class keyword followed by the class name.

    class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

  2. Constructor: The constructor method is a special method for initializing new instances of the class. It’s called automatically when you use the new keyword.

    const alice = new Person("Alice", 30);
alice.sayHello(); // "Hello, my name is Alice"

  3. Methods: Methods defined inside a class are automatically added to the class’s prototype. This means all instances share these methods.

  4. Inheritance: Classes support inheritance using the extends keyword, allowing you to create subclasses that inherit from a parent class.

    class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age); // Call the parent class constructor
    this.jobTitle = jobTitle;
  }

  describeJob() {
    console.log(`${this.name} is a ${this.jobTitle}`);
  }
}

const bob = new Employee("Bob", 40, "Developer");
bob.describeJob(); // "Bob is a Developer"

Extending Classes

In JavaScript, the extends keyword is used in class declarations or class expressions to create a child class (also called a subclass) that inherits methods and properties from a parent class (or superclass). The child class can use the super keyword to call the constructor and methods of the parent class. This allows for code reuse and helps in creating a hierarchical structure of classes.

Example:

// Parent class (Superclass)
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// Child class (Subclass) that inherits from Animal
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call the parent class's constructor
    this.breed = breed;
  }

  speak() {
    // Call the parent class's speak method
    super.speak();

    // Add custom behavior for the Dog class
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Rex", "German Shepherd");
dog.speak();
// Output:
// "Rex makes a noise."
// "Rex barks."

Getters and Setters

Getters and setters are special methods in JavaScript classes that allow you to control how properties are accessed and modified.

  • Getters are methods that get the value of a specific property. They allow you to retrieve or “get” the value in a controlled manner.
  • Setters are methods that set or update the value of a specific property. They allow you to modify or “set” the value while possibly enforcing some logic or validation.

Why Use Getters and Setters?

  • Encapsulation: They help encapsulate the internal state of an object by controlling access to its properties. This is especially useful for validating or processing data before setting a property or for controlling how a property is accessed.
  • Flexibility: You can easily add logic to getters or setters without changing the external API of your class. This makes your code more adaptable to future changes.
  • Consistency: They allow you to enforce consistency in how data is accessed and modified, reducing the chance of bugs or invalid states.

Example with Getters, Setters, and _ Convention:

class Person {
  constructor(name, age) {
    this._name = name; // Use _name to indicate a "private" variable
    this._age = age; // Use _age to indicate a "private" variable
  }

  // Getter for name
  get name() {
    return this._name;
  }

  // Setter for name
  set name(newName) {
    if (newName) {
      this._name = newName;
    } else {
      console.log("Name cannot be empty.");
    }
  }

  // Getter for age
  get age() {
    return this._age;
  }

  // Setter for age
  set age(newAge) {
    if (newAge > 0) {
      this._age = newAge;
    } else {
      console.log("Age must be a positive number.");
    }
  }
}

const person = new Person("Alice", 30);

// Using getters to access properties
console.log(person.name); // Output: Alice
console.log(person.age); // Output: 30

// Using setters to modify properties
person.name = "Bob";
person.age = 35;

// Checking updated values using getters
console.log(person.name); // Output: Bob
console.log(person.age); // Output: 35

// Trying to set invalid values
person.name = ""; // Output: Name cannot be empty.
person.age = -5; // Output: Age must be a positive number.

Sets

In JavaScript, a Set is a collection of values where each value must be unique. Unlike arrays, which can have duplicate elements, a Set automatically handles duplicates for you. Here’s a brief overview and some examples to illustrate how it works:

Basic Usage

  1. Creating a Set:

    const mySet = new Set();

  2. Adding Values:

    mySet.add(1);
mySet.add(2);
mySet.add(2); // This will not be added, as 2 is already present
mySet.add("hello");

  3. Checking for Values:

    console.log(mySet.has(1)); // true
console.log(mySet.has(3)); // false

  4. Deleting Values:

    mySet.delete(1);
console.log(mySet.has(1)); // false

  5. Iterating Over a Set:

    mySet.forEach((value) => {
  console.log(value);
});

  6. Size of a Set:

    console.log(mySet.size);

  7. Clearing a Set:

    mySet.clear();
console.log(mySet.size); // 0

Example with Various Data Type

const mixedSet = new Set();
mixedSet.add(1);
mixedSet.add("text");
mixedSet.add({ a: 1 });
mixedSet.add([1, 2, 3]);

console.log(mixedSet);
// Outputs: Set(4) { 1, 'text', { a: 1 }, [1, 2, 3] }

console.log(mixedSet.has("text")); // true
console.log(mixedSet.has({ a: 1 })); // false, different object reference
console.log(mixedSet.has([1, 2, 3])); // false, different array reference

Functions

Basic Structure

In JavaScript, the basic structure of a function consists of several key components: the function keyword, the function name (optional for anonymous functions), parameters, and the function body.

Naming

When naming functions in JavaScript, it’s important to follow best practices to ensure your code is readable, maintainable, and self-explanatory. Here are some key rules and general examples:

  1. Use descriptive names:

    • Names should clearly describe what the function does.
    • Example: calculateTotal, fetchUserData

  2. Use camelCase:

    • Start with a lowercase letter and use uppercase letters to denote the start of new words.
    • Example: handleClick, getData

  3. Use action verbs:

    • Begin function names with a verb to denote action or behavior.
    • Example: loadPage, saveSettings

  4. Be consistent:

    • Stick to a naming convention across your codebase.
    • Example: If you use fetch in one place, use it consistently for similar operations (e.g., fetchUser, fetchPosts).

  5. Avoid generic names:

    • Avoid vague names like doStuff or processData.
    • Example: Instead of processData, use processUserData.

  6. Prefix with context:

    • Add context to the function name to clarify its purpose and avoid conflicts.
    • Example: userLogin, adminLogout

  7. Short but meaningful:

    • Keep names as short as possible while conveying their purpose.
    • Example: initApp (short for initialize application), sortList

General Examples:

  • Event Handlers: handleClick, onSubmit
  • Data Retrieval: fetchData, getUserData
  • Calculations: calculateSum, computeAverage
  • Utilities: formatDate, parseJSON
  • State Management: setState, resetForm

Arrow Functions

Arrow functions, introduced in ES6, provide a shorter syntax for writing functions. They are defined using the => syntax. Key features include:

  • Concise Syntax: Simplified function definition.
  • Implicit Return: For single expressions, omit return and {}.
  • Lexical this Binding: this context is inherited from the surrounding scope.
  • Parameter Handling:
    • Single parameter: parentheses optional.
    • Multiple/no parameters: parentheses required.
  • Non-constructible: Cannot be used with new.

Example:

const add = (a, b) => a + b;

Implicit Returns vs. Explicit Returns

When using arrow functions, implicit returns allow you to write cleaner and more concise code. If the arrow function has only one expression, you can omit the curly braces and the return keyword.

Example:

// Implicit return
let withTax = prices.map((price) => price * 1.1);

// Explicit return
let withTaxExplicit = prices.map((price) => {
  return price * 1.1;
});

“This”

In JavaScript, this refers to the context in which a function is called. It dynamically changes based on how the function is invoked.

Traditional Functions

In traditional functions, this is dynamic and changes based on how the function is called:

  • Global Context: If a function is called in the global scope, this refers to the global object (window in browsers).
  • Object Method: If a function is a method of an object, this refers to the object that owns the method.
  • Constructor Function: If a function is used as a constructor (with new), this refers to the newly created object.

Arrow Functions

Arrow functions do not have their own this. Instead, they capture this from the surrounding lexical context (the context in which the arrow function was defined). This is known as lexical scoping.

Example:

const obj = {
  name: "Alice",
  show: function () {
    setTimeout(() => {
      console.log(this.name); // `this` refers to `obj` because arrow function captures `this` from its lexical context
    }, 1000);
  },
};

obj.show(); // Output: Alice

Closures

Closures in JavaScript are powerful tools for managing scope and state, providing a way to retain access to variables in an outer function even after that function has completed execution.

function createCounter() {
  let count = 0;

  return function () {
    count += 1;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2
counter(); // Output: 3

Types and Type Conversion

Types

In JavaScript, types are categorized into two main groups: primitives and objects.

Primitives are the most basic data types in JavaScript. They include:

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

Everything else is of object type.

Type Conversion

Type conversion in JavaScript can be either explicit or implicit.

Explicit Type Conversion

Also known as type casting, explicit type conversion is when you manually convert a value from one type to another using built-in methods. For example:

String to Number:

let num = Number("123"); // 123

Or, Number to String:

let str = String(123); // "123"

Implicit Type Conversion

Also known as type coercion, implicit type conversion is when JavaScript automatically converts types to match the operation being performed.

For example:

let result = "The answer is " + 42; // "The answer is 42"

let sum = "10" + "5"; // 15 (the strings are implicitly converted to numbers)

if ("0") {
  // This block will execute because "0" is a truthy value
}

To avoid type coercion issues in JavaScript, use the strict equality operator (===) instead of == to prevent unexpected type conversions. Be explicit in conditionals, checking for both null and undefined where necessary, and convert types explicitly using Number(), String(), or Boolean(). Verify arrays with Array.isArray() and compare objects using strict equality to avoid reference issues. Ensure operands in arithmetic operations are of the expected type to maintain consistency and predictability in your code.

Truthy and Falsy

In JavaScript, a value is considered truthy if it evaluates to true in a boolean context, and falsy if it evaluates to false in a boolean context. This happens during type coercion, when JavaScript converts a value to a boolean for evaluation in conditions such as if statements or loops.

The following values are considered falsy in JavaScript:

  1. false
  2. 0 (zero)
  3. -0 (negative zero)
  4. 0n (BigInt zero)
  5. "" (empty string)
  6. null
  7. undefined
  8. NaN (Not-a-Number)

Any value not on this list is considered truthy.

Converting to Boolean

In JavaScript, values are inherently “truthy” or “falsy,” meaning they naturally evaluate to true or false in logical contexts. Explicitly converting a value to a boolean ensures clarity about its truthiness.

  • Boolean(value): Native, explicit, and more readable for boolean conversion.
  • !!value: Shorthand for conciseness, widely used in practice. The !! shorthand uses double NOT operators to convert a value to its boolean equivalent: The first ! negates the value, flipping its truthiness. The second ! negates it again, returning the original truthiness as a boolean.
const value = 0;
console.log(Boolean(value)); // false
console.log(!!value);       // false

Boolean() is ideal for clarity, while !! is useful in concise code.

Ternaries

The ternary operator is a concise way to perform a conditional check and return a value based on that condition. It’s essentially a one-liner if-else statement, and it’s useful in situations where you need a quick, simple conditional assignment or return.

const status = isActive ? "Active" : "Inactive";

Short-circuiting

Short-circuiting in JavaScript refers to the behavior of logical operators (&& and ||) where the second operand is evaluated only if the first operand does not determine the result of the operation.

const name = userName || "Guest";
isLoggedIn && showDashboard();

Nullish Coalescing operator

The Nullish Coalescing Operator (??) is a JavaScript operator that provides a default value for null or undefined. Unlike the logical OR operator (||), it doesn’t treat falsy values like 0, false, or ’’ as needing a fallback. It ensures only null or undefined trigger the fallback value.

const name = null ?? "Default Name"; // 'Default Name'
const age = 0 ?? 18; // 0 (not nullish, so no fallback)

Statements vs. Expressions

An expression is a piece of code that evaluates to a value. It can be as simple as a number (5), a variable (x), or a more complex operation (x + y). Expressions don’t do anything on their own—they just produce a value.

A statement is a complete instruction that performs an action. It might declare a variable, assign a value, or control the flow of a program (e.g., if or for).

Key distinction: Expressions produce values; statements perform actions.

Strict Mode

Script mode in JavaScript refers to the mode in which the JavaScript engine interprets and executes code. It determines whether the code is executed in strict mode or in non-strict mode (also known as sloppy mode). Strict mode enforces stricter rules and better error handling, leading to cleaner and safer code. To enable strict mode, you simply add the directive “use strict”; at the beginning of a script or function. This activates strict mode for that script or function and its inner scopes.

Hoisting

Hoisting in JavaScript means that variable and function declarations are moved to the top of their containing scope during the code execution phase. This allows you to use variables and functions before they are actually declared in your code. However, only the declarations are hoisted, not the initializations. This behavior can sometimes lead to unexpected results if not understood properly.

Tip: let and const declarations are hoisted, but unlike var, they are not initialized, leading to a “temporal dead zone” where accessing them before declaration results in a ReferenceError.

Understanding the DOM in JavaScript

The Document Object Model (DOM) is a critical concept in web development. It provides a structured representation of an HTML or XML document, arranging it as a tree of nodes. Each element, attribute, and piece of text in the document is represented as a node within this tree.

In JavaScript, the DOM is particularly powerful because each node is essentially an object. This means that we can easily interact with and manipulate these nodes using JavaScript’s object-oriented capabilities. For example, we can:

  • Access elements: Retrieve a specific element from the document using methods like getElementById or querySelector.
  • Modify content: Change the text or HTML within an element.
  • Update attributes: Adjust attributes like src or href to alter the behavior of elements like images or links.
  • Manage styles: Dynamically update the CSS styles of elements to change their appearance.
  • Add or remove elements: Create new elements, insert them into the document, or remove existing ones.

Understanding that the DOM is a collection of objects that we can manipulate with JavaScript is key to building dynamic, interactive web pages. This capability allows us to create responsive designs that can adapt to user interactions, making the web experience more engaging and functional.

querySelector

One can use querySelector as a more flexible alternative to getElementById or getElementsByClassName. It allows targeting elements using CSS selectors, making it easier to select by class, id, or any other CSS selector. However, it’s important to note that querySelector returns only the first matching element, whereas getElementById and getElementsByClassName can return multiple elements or just one, depending on the method.

Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Promises have three states: pending (initial state), fulfilled (operation completed successfully), and rejected (operation failed). You can handle the result of a Promise using .then() for success and .catch() for errors.

async/await

async/await is syntactic sugar over Promises, making it easier to write and read asynchronous code. An async function always returns a Promise, and the await keyword is used inside async functions to pause execution until a Promise is resolved.

Example

Simulating an asynchronous operation, like fetching data from a server.

Using Promises

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, title: "Promise Example" };
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log("Data using Promises:", data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

Using async/await

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, title: "Promise Example" };
      resolve(data);
    }, 1000);
  });
}

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log("Data using async/await:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchDataAsync();

Fetch

fetch is a modern API used for making network requests. It returns a Promise that resolves to the Response object, which can then be processed to retrieve the requested data or handle errors.

GET Request with fetch

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then((data) => {
    console.log("GET request data:", data);
  })
  .catch((error) => {
    console.error("Fetch error:", error);
  });

POST Request with fetch

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then((data) => {
    console.log("POST request data:", data);
  })
  .catch((error) => {
    console.error("Fetch error:", error);
  });

Javascript Modules

In JavaScript, using type="module" in the <script> tag enables module features, such as import and export, which allow for modular code and better organization. Modules support isolated scope, preventing naming conflicts and improving maintainability. They are loaded asynchronously by default, enhancing performance. Without type="module", scripts are treated as classic scripts, which do not support ES module syntax, execute synchronously, and share global scope, potentially leading to naming conflicts and less modular code organization. To leverage modern JavaScript features and modular code design, it is essential to use type="module" in your <script> tags.

Difference Between innerText and textContent

innerText and textContent both retrieve the text content of an element, but they differ in a few key ways:

  • textContent: Returns all the text within an element, including hidden text, and doesn’t take CSS styles into account. It’s generally faster because it doesn’t trigger reflows.
  • innerText: Returns the visible text (takes CSS styles like display: none into account) and triggers a reflow to account for any changes in the layout.

Example:

const text = element.textContent; // All text, including hidden
const visibleText = element.innerText; // Only visible text

throw new Error vs console.error

Using throw new Error is more powerful and intentional than simply console.error because it interrupts the program’s execution. When an error is thrown, it can be caught and handled properly in a try...catch block, making debugging and error tracking easier. In contrast, console.error only outputs a message to the console without stopping or affecting the program’s flow.

if (!data) {
  throw new Error("Data is required!"); // Stops execution
}
// vs.
if (!data) {
  console.log("Data is missing"); // Logs but continues running
}

crypto.randomUUID()

crypto.randomUUID() is a built-in JavaScript method that generates a secure, random UUID (version 4) in the format xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx. It’s ideal for creating unique identifiers for things like user sessions, database keys, or API requests.

Example:

const uuid = crypto.randomUUID();
console.log(uuid); // e.g., "1b4e28ba-2fa1-11d2-883f-0016d3cca427"

Why Use It?

  • Secure: Uses cryptographic randomness.
  • Convenient: No need for external libraries.
  • Standards-Compliant: Generates UUIDs according to the Version 4 standard.