JavaScript Interview Questions

TL;DR

== is the abstract equality operator while === is the strict equality operator. The == operator will compare for equality after doing any necessary type conversions. The === operator will not do type conversion, so if two values are not the same type === will simply return false.

Equality operator (==)

The == operator checks for equality between two values but performs type coercion if the values are of different types. This means that JavaScript will attempt to convert the values to a common type before making the comparison.

console.log(42 == '42'); // true
console.log(0 == false); // true
console.log(null == undefined); // true
console.log([] == false); // true
console.log('' == false); // true

In these examples, JavaScript converts the operands to the same type before making the comparison. For example, 42 == '42' is true because the string '42' is converted to the number 42 before comparison.

However, when using ==, unintuitive results can happen:

console.log(1 == [1]); // true
console.log(0 == ''); // true
console.log(0 == '0'); // true
console.log('' == '0'); // false

As a general rule of thumb, never use the == operator, except for convenience when comparing against null or undefined, where a == null will return true if a is null or undefined.

var a = null;
console.log(a == null); // true
console.log(a == undefined); // true

Strict equality operator (===)

The === operator, also known as the strict equality operator, checks for equality between two values without performing type coercion. This means that both the value and the type must be the same for the comparison to return true.

console.log(42 === '42'); // false
console.log(0 === false); // false
console.log(null === undefined); // false
console.log([] === false); // false
console.log('' === false); // false

For these comparisons, no type conversion is performed, so the statement returns false if the types are different. For instance, 42 === '42' is false because the types (number and string) are different.

// Comparison with type coercion (==)
console.log(42 == '42'); // true
console.log(0 == false); // true
console.log(null == undefined); // true

// Strict comparison without type coercion (===)
console.log(42 === '42'); // false
console.log(0 === false); // false
console.log(null === undefined); // false

Bonus: Object.is()

There's one final value-comparison operation within JavaScript, that is the Object.is() static method. The only difference between Object.is() and === is how they treat of signed zeros and NaN values. The === operator (and the == operator) treats the number values -0 and +0 as equal, but treats NaN as not equal to each other.

Conclusion

• Use == when you want to compare values with type coercion (and understand the implications of it). In practice, the only reasonable use case for the equality operator is to check for both null and undefined in a single comparison for convenience.
• Use === when you want to ensure both the value and the type are the same, which is the safer and more predictable choice in most cases.

Notes

• Using === (strict equality) is generally recommended to avoid the pitfalls of type coercion, which can lead to unexpected behavior and bugs in your code. It makes the intent of your comparisons clearer and ensures that you are comparing both the value and the type.
• ESLint's eqeqeq rule enforces the use of strict equality operators === and !== and even provides an option to always enforce strict equality except when comparing with the null literal.

Further reading

• Equality (==) | MDN
• Strict equality (===) | MDN

TL;DR

Undeclared

Undeclared variables are created when you assign a value to an identifier that is not previously created using var, let or const. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a ReferenceError will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad in the same way that global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a try/catch block.

function foo() {
  x = 1; // Throws a ReferenceError in strict mode
}

foo();
console.log(x); // 1 (if not in strict mode)

Using the typeof operator on undeclared variables will give 'undefined'.

console.log(typeof y === 'undefined'); // true

undefined

A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined. If a function does not return a value, and its result is assigned to a variable, that variable will also have the value undefined. To check for it, compare using the strict equality (===) operator or typeof which will give the 'undefined' string. Note that you should not be using the loose equality operator (==) to check, as it will also return true if the value is null.

let foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true. Wrong, don't use this to check if a value is undefined!

function bar() {} // Returns undefined if there is nothing returned.
let baz = bar();
console.log(baz); // undefined

null

A variable that is null will have been explicitly assigned to the null value. It represents no value and is different from undefined in the sense that it has been explicitly assigned. To check for null, simply compare using the strict equality operator. Note that like the above, you should not be using the loose equality operator (==) to check, as it will also return true if the value is undefined.

const foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true. Wrong, don't use this to check if a value is null!

Notes

• As a good habit, never leave your variables undeclared or unassigned. Explicitly assign null to them after declaring if you don't intend to use them yet.
• Always explicitly declare variables before using them to prevent errors.
• Using some static analysis tooling in your workflow (e.g. ESLint, TypeScript Compiler), will enable checks that you are not referencing undeclared variables.

Practice

Practice implementing type utilities that check for null and undefined on GreatFrontEnd.

Further Reading

• MDN Web Docs: null
• MDN Web Docs: undefined
• MDN Web Docs: ReferenceError

TL;DR

.call and .apply are both used to invoke functions with a specific this context and arguments. The primary difference lies in how they accept arguments:

• .call(thisArg, arg1, arg2, ...): Takes arguments individually.
• .apply(thisArg, [argsArray]): Takes arguments as an array.

Assuming we have a function add, the function can be invoked using .call and .apply in the following manner:

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

Call vs Apply

Both .call and .apply are used to invoke functions and the first parameter will be used as the value of this within the function. However, .call takes in comma-separated arguments as the next arguments while .apply takes in an array of arguments as the next argument.

An easy way to remember this is C for call and comma-separated and A for apply and an array of arguments.

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

With ES6 syntax, we can invoke call using an array along with the spread operator for the arguments.

function add(a, b) {
  return a + b;
}

console.log(add.call(null, ...[1, 2])); // 3

Use cases

Context management

.call and .apply can set the this context explicitly when invoking methods on different objects.

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const anotherPerson = { name: 'Alice' };

person.greet.call(anotherPerson); // Hello, my name is Alice
person.greet.apply(anotherPerson); // Hello, my name is Alice

Function borrowing

Both .call and .apply allow borrowing methods from one object and using them in the context of another. This is useful when passing functions as arguments (callbacks) and the original this context is lost. .call and .apply allow the function to be invoked with the intended this value.

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

const person1 = { name: 'John' };
const person2 = { name: 'Alice' };

greet.call(person1); // Hello, my name is John
greet.apply(person2); // Hello, my name is Alice

Alternative syntax to call methods on objects

.apply can be used with object methods by passing the object as the first argument followed by the usual parameters.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)

console.log(arr1); // [1, 2, 3, 4, 5, 6]

Deconstructing the above:

1. The first object, arr1 will be used as the this value.
2. .push() is called on arr1 using arr2 as arguments as an array because it's using .apply().
3. Array.prototype.push.apply(arr1, arr2) is equivalent to arr1.push(...arr2).

It may not be obvious, but Array.prototype.push.apply(arr1, arr2) causes modifications to arr1. It's clearer to call methods using the OOP-centric way instead where possible.

Follow-Up Questions

• How do .call and .apply differ from Function.prototype.bind?

Practice

Practice implementing your own Function.prototype.call method and Function.prototype.apply method on GreatFrontEnd.

Further Reading

• Function.prototype.call | MDN
• Function.prototype.apply | MDN

TL;DR

The main difference lies in the bubbling behavior of mouseenter and mouseover events. mouseenter does not bubble while mouseover bubbles.

mouseenter events do not bubble. The mouseenter event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the mouseenter event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have mouseenter listeners attached and the mouse pointer moves from the parent element to the child element, mouseenter will only fire for the child.

mouseover events bubble up the DOM tree. The mouseover event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the mouseover event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, mouseover will fire for both the parent and the child.

mouseenter event:

• Does not bubble: The mouseenter event does not bubble. It is only triggered when the mouse pointer enters the element to which the event listener is attached, not when it enters any child elements.
• Triggered once: The mouseenter event is triggered only once when the mouse pointer enters the element, making it more predictable and easier to manage in certain scenarios.

A use case for mouseenter is when you want to detect the mouse entering an element without worrying about child elements triggering the event multiple times.

mouseover Event:

• Bubbles up the DOM: The mouseover event bubbles up through the DOM. This means that if you have an event listener on a parent element, it will also trigger when the mouse pointer moves over any child elements.
• Triggered multiple times: The mouseover event is triggered every time the mouse pointer moves over an element or any of its child elements. This can lead to multiple triggers if you have nested elements.

A use case for mouseover is when you want to detect when the mouse enters an element or any of its children and are okay with the events triggering multiple times.

Example

Here's an example demonstrating the difference between mouseover and mouseenter events:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mouse Events Example</title>
    <style>
      .parent {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        padding: 20px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      Parent Element
      <div class="child">Child Element</div>
    </div>

    <script>
      const parent = document.querySelector('.parent');
      const child = document.querySelector('.child');

      // Mouseover event on parent.
      parent.addEventListener('mouseover', () => {
        console.log('Mouseover on parent');
      });

      // Mouseenter event on parent.
      parent.addEventListener('mouseenter', () => {
        console.log('Mouseenter on parent');
      });

      // Mouseover event on child.
      child.addEventListener('mouseover', () => {
        console.log('Mouseover on child');
      });

      // Mouseenter event on child.
      child.addEventListener('mouseenter', () => {
        console.log('Mouseenter on child');
      });
    </script>
  </body>
</html>

Expected behavior

• When the mouse enters the parent element:
  • The mouseover event on the parent will trigger.
  • The mouseenter event on the parent will trigger.
• When the mouse enters the child element:
  • The mouseover event on the parent will trigger again because mouseover bubbles up from the child.
  • The mouseover event on the child will trigger.
  • The mouseenter event on the child will trigger.
  • The mouseenter event on the parent will not trigger again because mouseenter does not bubble.

Further reading

• Element: mouseenter event - Web APIs | MDN
• Element: mouseover event - Web APIs | MDN

TL;DR

In JavaScript, data types can be categorized into primitive and non-primitive types:

Primitive data types

• Number: Represents both integers and floating-point numbers.
• String: Represents sequences of characters.
• Boolean: Represents true or false values.
• Undefined: A variable that has been declared but not assigned a value.
• Null: Represents the intentional absence of any object value.
• Symbol: A unique and immutable value used as object property keys. Read more in our deep dive on Symbols
• BigInt: Represents integers with arbitrary precision.

Non-primitive (Reference) data types

• Object: Used to store collections of data.
• Array: An ordered collection of data.
• Function: A callable object.
• Date: Represents dates and times.
• RegExp: Represents regular expressions.
• Map: A collection of keyed data items.
• Set: A collection of unique values.

The primitive types store a single value, while non-primitive types can store collections of data or complex entities.

Data types in JavaScript

JavaScript, like many programming languages, has a variety of data types to represent different kinds of data. The main data types in JavaScript can be divided into two categories: primitive and non-primitive (reference) types.

Primitive data types

1. Number: Represents both integer and floating-point numbers. JavaScript only has one type of number.

let age = 25;
let price = 99.99;
console.log(price); // 99.99

2. String: Represents sequences of characters. Strings can be enclosed in single quotes, double quotes, or backticks (for template literals).

let myName = 'John Doe';
let greeting = 'Hello, world!';
let message = `Welcome, ${myName}!`;
console.log(message); // "Welcome, John Doe!"

3. Boolean: Represents logical entities and can have two values: true or false.

let isActive = true;
let isOver18 = false;
console.log(isOver18); // false

4. Undefined: A variable that has been declared but not assigned a value is of type undefined.

let user;
console.log(user); // undefined

5. Null: Represents the intentional absence of any object value. It is a primitive value and is treated as a falsy value.

let user = null;
console.log(user); // null
if (!user) {
  console.log('user is a falsy value');
}

6. Symbol: A unique and immutable primitive value, typically used as the key of an object property.

let sym1 = Symbol();
let sym2 = Symbol('description');
console.log(sym1); // Symbol()
console.log(sym2); // Symbol(description)

7. BigInt: Used for representing integers with arbitrary precision, useful for working with very large numbers.

let bigNumber = BigInt(9007199254740991);
let anotherBigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // 9007199254740991n
console.log(anotherBigNumber); // 1234567890123456789012345678901234567890n

Non-primitive (reference) data types

1. Object: It is used to store collections of data and more complex entities. Objects are created using curly braces {}.

let person = {
  name: 'Alice',
  age: 30,
};
console.log(person); // {name: "Alice", age: 30}

2. Array: A special type of object used for storing ordered collections of data. Arrays are created using square brackets [].

let numbers = [1, 2, 3, 4, 5];
console.log(numbers);

3. Function: Functions in JavaScript are objects. They can be defined using function declarations or expressions.

function greet() {
  console.log('Hello!');
}

let add = function (a, b) {
  return a + b;
};

greet(); // "Hello!"
console.log(add(2, 3)); // 5

4. Date: Represents dates and times. The Date object is used to work with dates.

let today = new Date().toLocaleTimeString();
console.log(today);

5. RegExp: Represents regular expressions, which are patterns used to match character combinations in strings.

let pattern = /abc/;
let str = '123abc456';

console.log(pattern.test(str)); // true

6. Map: A collection of keyed data items, similar to an object but allows keys of any type.

let map = new Map();
map.set('key1', 'value1');
console.log(map);

7. Set: A collection of unique values.

let set = new Set();
set.add(1);
set.add(2);
console.log(set); // { 1, 2 }

Determining data types

JavaScript is a dynamically-typed language, which means variables can hold values of different data types over time. The typeof operator can be used to determine the data type of a value or variable.

console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (this is a historical bug in JavaScript)
console.log(typeof Symbol()); // "symbol"
console.log(typeof BigInt(123)); // "bigint"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function () {}); // "function"

Pitfalls

Type coercion

JavaScript often performs type coercion, converting values from one type to another, which can lead to unexpected results.

let result = '5' + 2;
console.log(result, typeof result); // "52 string" (string concatenation)

let difference = '5' - 2;
console.log(difference, typeof difference); // 3 "number" (numeric subtraction)

In the first example, since strings can be concatenated with the + operator, the number is converted into a string and the two strings are concatenated together. In the second example, strings cannot work with the minus operator (-), but two numbers can be minused, so the string is first converted into a number and the result is the difference.

Further reading

• JavaScript data types and data structures - MDN
• JavaScript guide: Data types
• Data types - javascript.info
• JavaScript data types

TL;DR

Both Map objects and plain objects in JavaScript can store key-value pairs, but they have several key differences:

Map vs plain JavaScript objects

In JavaScript, Map objects and a plain object (also known as a "POJO" or "plain old JavaScript object") are both used to store key-value pairs, but they have different characteristics, use cases, and behaviors.

Plain JavaScript objects (POJO)

A plain object is a basic JavaScript object created using the {} syntax. It is a collection of key-value pairs, where each key is a string (or a symbol, in modern JavaScript) and each value can be any type of value, including strings, numbers, booleans, arrays, objects, and more.

const person = { name: 'John', age: 30, occupation: 'Developer' };
console.log(person);

Map objects

A Map object, introduced in ECMAScript 2015 (ES6), is a more advanced data structure that allows you to store key-value pairs with additional features. A Map is an iterable, which means you can use it with for...of loops, and it provides methods for common operations like get, set, has, and delete.

const person = new Map([
  ['name', 'John'],
  ['age', 30],
  ['occupation', 'Developer'],
]);
console.log(person);

Key differences

Here are the main differences between a Map object and a plain object:

1. Key types: In a plain object, keys are always strings (or symbols). In a Map, keys can be any type of value, including objects, arrays, and even other Maps.
2. Key ordering: In a plain object, the order of keys is not guaranteed. In a Map, the order of keys is preserved, and you can iterate over them in the order they were inserted.
3. Iteration: A Map is iterable, which means you can use for...of loops to iterate over its key-value pairs. A plain object is not iterable by default, but you can use Object.keys() or Object.entries() to iterate over its properties.
4. Performance: Map objects are generally faster and more efficient than plain objects, especially when dealing with large datasets.
5. Methods: A Map object provides additional methods, such as get, set, has, and delete, which make it easier to work with key-value pairs.
6. Serialization: When serializing a Map object to JSON, it will be converted to an object but the existing Map properties might be lost in the conversion. A plain object, on the other hand, is serialized to a JSON object with the same structure.

When to use which

Use a plain object (POJO) when:

• You need a simple, lightweight object with string keys.
• You're working with a small dataset.
• You need to serialize the object to JSON (e.g. to send over the network).

Use a Map object when:

• You need to store key-value pairs with non-string keys (e.g., objects, arrays).
• You need to preserve the order of key-value pairs.
• You need to iterate over the key-value pairs in a specific order.
• You're working with a large dataset and need better performance.

In summary, while both plain objects and Map objects can be used to store key-value pairs, Map objects offer more advanced features, better performance, and additional methods, making them a better choice for more complex use cases.

Notes

Map objects cannot be serialized to be sent in HTTP requests, but libraries like superjson allowing them to be serialized and deserialized.

Further reading

• Map - JavaScript | MDN
• Object - JavaScript | MDN

TL;DR

In JavaScript, a proxy is an object that acts as an intermediary between an object and the code. Proxies are used to intercept and customize the fundamental operations of JavaScript objects, such as property access, assignment, function invocation, and more.

Here's a basic example of using a Proxy to log every property access:

const myObject = {
  name: 'John',
  age: 42,
};

const handler = {
  get: function (target, prop, receiver) {
    console.log(`Someone accessed property "${prop}"`);
    return target[prop];
  },
};

const proxiedObject = new Proxy(myObject, handler);

console.log(proxiedObject.name);
// Someone accessed property "name"
// 'John'

console.log(proxiedObject.age);
// Someone accessed property "age"
// 42

Use cases include:

• Property access interception: Intercept and customize property access on an object.
  • Property assignment validation: Validate property values before they are set on the target object.
  • Logging and debugging: Create wrappers for logging and debugging interactions with an object
  • Creating reactive systems: Trigger updates in other parts of your application when object properties change (data binding).
  • Data transformation: Transforming data being set or retrieved from an object.
  • Mocking and stubbing in tests: Create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test
• Function invocation interception: Used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance
• Dynamic property creation: Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.

JavaScript proxies

In JavaScript, a proxy is an object that allows you to customize the behavior of another object, often referred to as the target object. Proxies can intercept and redefine various operations for the target object, such as property access, assignment, enumeration, function invocation, and more. This makes proxies a powerful tool for a variety of use cases, including but not limited to validation, logging, performance monitoring, and implementing advanced data structures.

Here are some common use cases and examples of how proxies can be used in JavaScript:

Property access interception

Proxies can be used to intercept and customize property access on an object.

const target = {
  message: 'Hello, world!',
};

const handler = {
  get: function (target, property) {
    if (property in target) {
      return target[property];
    }

    return `Property ${property} does not exist.`;
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // Hello, world!
console.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.

Creating wrappers for logging and debugging

This is useful for creating wrappers for logging and debugging interactions with an object.

const target = {
  name: 'Alice',
  age: 30,
};

const handler = {
  get: function (target, property) {
    console.log(`Getting property ${property}`);
    return target[property];
  },
  set: function (target, property, value) {
    console.log(`Setting property ${property} to ${value}`);
    target[property] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Output: Getting property name
//         Alice
proxy.age = 31; // Output: Setting property age to 31
console.log(proxy.age); // Output: Getting property age
//         31

Property assignment validation

Proxies can be used to validate property values before they are set on the target object.

const target = {
  age: 25,
};

const handler = {
  set: function (target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[property] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);

proxy.age = 30; // Works fine
proxy.age = 'thirty'; // Throws TypeError: Age must be a number

Creating reactive systems

Proxies are often used to trigger updates in other parts of your application when object properties change (data binding).

A practical example is JavaScript frameworks like Vue.js, where proxies are used to create reactive systems that automatically update the UI when data changes.

const target = {
  firstName: 'John',
  lastName: 'Doe',
};

const handler = {
  set: function (target, property, value) {
    console.log(`Property ${property} set to ${value}`);
    target[property] = value;
    // Automatically update the UI or perform other actions
    return true;
  },
};

const proxy = new Proxy(target, handler);

proxy.firstName = 'Jane'; // Output: Property firstName set to Jane

Other use cases for access interception include:

• Mocking and stubbing: Proxies can be used to create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test.

Function invocation interception

Proxies can intercept and customize function calls.

const target = function (name) {
  return `Hello, ${name}!`;
};

const handler = {
  apply: function (target, thisArg, argumentsList) {
    console.log(`Called with arguments: ${argumentsList}`);
    return target.apply(thisArg, argumentsList);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy('Alice')); // Called with arguments: Alice
// Hello, Alice!

This interception can be used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance by reducing the number of requests/computations made.

Dynamic property creation

Proxies can be used to dynamically create properties or methods on an object. This is useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.

const target = {};

const handler = {
  get: function (target, property) {
    if (!(property in target)) {
      target[property] = `Dynamic property ${property}`;
    }
    return target[property];
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.newProp); // Output: Dynamic property newProp
console.log(proxy.anotherProp); // Output: Dynamic property anotherProp

Implementing object relational mappers (ORMs)

Proxies can be used to create objects for database records by intercepting property access to lazily load data from the database. This provides a more object-oriented interface to interact with a database.

Real world use cases

Many popular libraries, especially state management solutions, are built on top of JavaScript proxies:

• Vue.js: Vue.js is a progressive framework for building user interfaces. In Vue 3, proxies are used extensively to implement the reactivity system.
• MobX: MobX uses proxies to make objects and arrays observable, allowing components to automatically react to state changes.
• Immer: Immer is a library that allows you to work with immutable state in a more convenient way. It uses proxies to track changes and produce the next immutable state.

Summary

Proxies in JavaScript provide a powerful and flexible way to intercept and customize operations on objects. They are useful for a wide range of applications, including validation, logging, debugging, dynamic property creation, and implementing reactive systems. By using proxies, developers can create more robust, maintainable, and feature-rich applications.

Further reading

• Proxy - JavaScript | MDN
• Proxy and Reflect | JavaScript.info

TL;DR

A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

What is a callback function?

A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed. This is particularly useful in asynchronous programming, where operations like network requests, file I/O, or timers need to be handled without blocking the main execution thread.

Synchronous vs. asynchronous callbacks

• Synchronous callbacks are executed immediately within the function they are passed to. They are blocking and the code execution waits for them to complete.
• Asynchronous callbacks are executed after a certain event or operation has been completed. They are non-blocking and allow the code execution to continue while waiting for the operation to finish.

Example of a synchronous callback

function greet(name, callback) {
  console.log('Hello ' + name);
  callback();
}

function sayGoodbye() {
  console.log('Goodbye!');
}

greet('Alice', sayGoodbye);
// Output:
// Hello Alice
// Goodbye!

Example of an asynchronous callback

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});
// Output after 1 second:
// { name: 'John', age: 30 }

Common use cases

• Network requests: Fetching data from an API
• File I/O: Reading or writing files
• Timers: Delaying execution using setTimeout or setInterval
• Event handling: Responding to user actions like clicks or key presses

Handling errors in callbacks

When dealing with asynchronous operations, it's important to handle errors properly. A common pattern is to use the first argument of the callback function to pass an error object, if any.

function fetchData(callback) {
  // assume asynchronous operation to fetch data
  const { data, error } = { data: { name: 'John', age: 30 }, error: null };
  callback(error, data);
}

fetchData((error, data) => {
  if (error) {
    console.error('An error occurred:', error);
  } else {
    console.log(data);
  }
});

Further reading

• MDN Web Docs: Callback function
• JavaScript.info: Callbacks
• Node.js: Asynchronous programming and callbacks

TL;DR

The microtask queue is a queue of tasks that need to be executed after the currently executing script and before any other task. Microtasks are typically used for tasks that need to be executed immediately after the current operation, such as promise callbacks. The microtask queue is processed before the macrotask queue, ensuring that microtasks are executed as soon as possible.

The concept of a microtask queue

What is a microtask queue?

The microtask queue is a part of the JavaScript event loop mechanism. It is a queue that holds tasks that need to be executed immediately after the currently executing script and before any other task in the macrotask queue. Microtasks are typically used for operations that need to be executed as soon as possible, such as promise callbacks and MutationObserver callbacks.

How does the microtask queue work?

1. Execution order: The microtask queue is processed after the currently executing script and before the macrotask queue. This means that microtasks are given higher priority over macrotasks.
2. Event loop: During each iteration of the event loop, the JavaScript engine first processes all the microtasks in the microtask queue before moving on to the macrotask queue.
3. Adding microtasks: Microtasks can be added to the microtask queue using methods like Promise.resolve().then() and queueMicrotask().

Example

Here is an example to illustrate how the microtask queue works:

console.log('Script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
  })
  .then(() => {
    console.log('Promise 2');
  });

console.log('Script end');

Output:

Script start
Script end
Promise 1
Promise 2
setTimeout

In this example:

• The synchronous code (console.log('Script start') and console.log('Script end')) is executed first.
• The promise callbacks (Promise 1 and Promise 2) are added to the microtask queue and executed next.
• The setTimeout callback is added to the macrotask queue and executed last.

Use cases

1. Promise callbacks: Microtasks are commonly used for promise callbacks to ensure they are executed as soon as possible after the current operation.
2. MutationObserver: The MutationObserver API uses microtasks to notify changes in the DOM.

Further reading

• MDN Web Docs: Microtask
• JavaScript Event Loop Explained
• Understanding the JavaScript Microtask Queue

TL;DR

Caching is a technique used to store copies of files or data in a temporary storage location to reduce the time it takes to access them. It improves performance by reducing the need to fetch data from the original source repeatedly. In front end development, caching can be implemented using browser cache, service workers, and HTTP headers like Cache-Control.

The concept of caching and how it can be used to improve performance

What is caching?

Caching is a technique used to store copies of files or data in a temporary storage location, known as a cache, to reduce the time it takes to access them. The primary goal of caching is to improve performance by minimizing the need to fetch data from the original source repeatedly.

Types of caching

Browser cache

The browser cache stores copies of web pages, images, and other resources locally on the user's device. When a user revisits a website, the browser can load these resources from the cache instead of fetching them from the server, resulting in faster load times.

Service workers

Service workers are scripts that run in the background and can intercept network requests. They can cache resources and serve them from the cache, even when the user is offline. This can significantly improve performance and provide a better user experience.

HTTP caching

HTTP caching involves using HTTP headers to control how and when resources are cached. Common headers include Cache-Control, Expires, and ETag.

How caching improves performance

Reduced latency

By storing frequently accessed data closer to the user, caching reduces the time it takes to retrieve that data. This results in faster load times and a smoother user experience.

Reduced server load

Caching reduces the number of requests made to the server, which can help decrease server load and improve overall performance.

Offline access

With service workers, cached resources can be served even when the user is offline, providing a seamless experience.

Implementing caching

Browser cache example

<head>
  <link rel="stylesheet" href="styles.css" />
  <script src="app.js"></script>
</head>

Service worker example

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/styles.css', '/app.js']);
    }),
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    }),
  );
});

HTTP caching example

Cache-Control: max-age=3600

Further reading

• MDN Web Docs: HTTP caching
• Google Developers: The offline cookbook
• Service Workers: an Introduction

TL;DR

Code coverage is a metric that measures the percentage of code that is executed when the test suite runs. It helps in assessing the quality of tests by identifying untested parts of the codebase. Higher code coverage generally indicates more thorough testing, but it doesn't guarantee the absence of bugs. Tools like Istanbul or Jest can be used to measure code coverage.

What is code coverage?

Code coverage is a software testing metric that determines the amount of code that is executed during automated tests. It provides insights into which parts of the codebase are being tested and which are not.

Types of code coverage

1. Statement coverage: Measures the number of statements in the code that have been executed.
2. Branch coverage: Measures whether each branch (e.g., if and else blocks) has been executed.
3. Function coverage: Measures whether each function in the code has been called.
4. Line coverage: Measures the number of lines of code that have been executed.
5. Condition coverage: Measures whether each boolean sub-expression has been evaluated to both true and false.

Example

Consider the following JavaScript function:

function isEven(num) {
  if (num % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

A test suite for this function might look like this:

test('isEven returns true for even numbers', () => {
  expect(isEven(2)).toBe(true);
});

test('isEven returns false for odd numbers', () => {
  expect(isEven(3)).toBe(false);
});

Running code coverage tools on this test suite would show 100% statement, branch, function, and line coverage because all parts of the code are executed.

How to measure code coverage

Tools

1. Istanbul: A popular JavaScript code coverage tool.
2. Jest: A testing framework that includes built-in code coverage reporting.
3. Karma: A test runner that can be configured to use Istanbul for code coverage.

Example with Jest

To measure code coverage with Jest, you can add the --coverage flag when running your tests:

jest --coverage

This will generate a coverage report that shows the percentage of code covered by your tests.

Assessing test quality with code coverage

Benefits

• Identifies untested code: Helps in finding parts of the codebase that are not covered by tests.
• Improves test suite: Encourages writing more comprehensive tests.
• Increases confidence: Higher coverage can increase confidence in the stability of the code.

Limitations

• False sense of security: High coverage does not guarantee the absence of bugs.
• Quality over quantity: 100% coverage does not mean the tests are of high quality. Tests should also check for edge cases and potential errors.

Further reading

• Istanbul documentation
• Jest code coverage
• Karma coverage

TL;DR

Content Security Policy (CSP) is a security feature that helps prevent various types of attacks, such as Cross-Site Scripting (XSS) and data injection attacks, by specifying which content sources are trusted. It works by allowing developers to define a whitelist of trusted sources for content like scripts, styles, and images. This is done through HTTP headers or meta tags. For example, you can use the Content-Security-Policy header to specify that only scripts from your own domain should be executed:

Content-Security-Policy: script-src 'self'

What is Content Security Policy (CSP)?

Content Security Policy (CSP) is a security standard introduced to mitigate a range of attacks, including Cross-Site Scripting (XSS) and data injection attacks. CSP allows web developers to control the resources that a user agent is allowed to load for a given page. By specifying a whitelist of trusted content sources, CSP helps to prevent the execution of malicious content.

How CSP works

CSP works by allowing developers to define a set of rules that specify which sources of content are considered trustworthy. These rules are delivered to the browser via HTTP headers or meta tags. When the browser loads a page, it checks the CSP rules and blocks any content that does not match the specified sources.

Example of a CSP header

Here is an example of a simple CSP header that only allows scripts from the same origin:

Content-Security-Policy: script-src 'self'

This policy tells the browser to only execute scripts that are loaded from the same origin as the page itself.

Common directives

• default-src: Serves as a fallback for other resource types when they are not explicitly defined.
• script-src: Specifies valid sources for JavaScript.
• style-src: Specifies valid sources for CSS.
• img-src: Specifies valid sources for images.
• connect-src: Specifies valid sources for AJAX, WebSocket, and EventSource connections.
• font-src: Specifies valid sources for fonts.
• object-src: Specifies valid sources for plugins like Flash.

Benefits of using CSP

• Mitigates XSS attacks: By restricting the sources from which scripts can be loaded, CSP helps to prevent the execution of malicious scripts.
• Prevents data injection attacks: CSP can block the loading of malicious resources that could be used to steal data or perform other harmful actions.
• Improves security posture: Implementing CSP is a proactive measure that enhances the overall security of a web application.

Implementing CSP

CSP can be implemented using HTTP headers or meta tags. The HTTP header approach is generally preferred because it is more secure and cannot be easily overridden by attackers.

Using HTTP headers

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

Using meta tags

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://trusted.cdn.com" />

Further reading

• MDN Web Docs: Content Security Policy (CSP)
• OWASP: Content Security Policy
• Google Developers: CSP: Content Security Policy

TL;DR

Cross-Site Request Forgery (CSRF) is an attack where a malicious website tricks a user's browser into making an unwanted request to another site where the user is authenticated. This can lead to unauthorized actions being performed on behalf of the user. Mitigation techniques include using anti-CSRF tokens, SameSite cookies, and ensuring proper CORS configurations.

Cross-Site Request Forgery (CSRF) and its mitigation techniques

What is CSRF?

Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious website causes a user's browser to perform an unwanted action on a different site where the user is authenticated. This can lead to unauthorized actions such as changing account details, making purchases, or other actions that the user did not intend to perform.

How does CSRF work?

1. User authentication: The user logs into a trusted website (e.g., a banking site) and receives an authentication cookie.
2. Malicious site: The user visits a malicious website while still logged into the trusted site.
3. Unwanted request: The malicious site contains code that makes a request to the trusted site, using the user's authentication cookie to perform actions on behalf of the user.

Mitigation techniques

Anti-CSRF tokens

One of the most effective ways to prevent CSRF attacks is by using anti-CSRF tokens. These tokens are unique and unpredictable values that are generated by the server and included in forms or requests. The server then validates the token to ensure the request is legitimate.

<form method="POST" action="/update-profile">
  <input type="hidden" name="csrf_token" value="unique_token_value" />
  <!-- other form fields -->
  <button type="submit">Update Profile</button>
</form>

On the server side, the token is validated to ensure it matches the expected value.

SameSite cookies

The SameSite attribute on cookies can help mitigate CSRF attacks by restricting how cookies are sent with cross-site requests. The SameSite attribute can be set to Strict, Lax, or None.

Set-Cookie: sessionId=abc123; SameSite=Strict

• Strict: Cookies are only sent in a first-party context and not with requests initiated by third-party websites.
• Lax: Cookies are not sent on normal cross-site subrequests (e.g., loading images), but are sent when a user navigates to the URL from an external site (e.g., following a link).
• None: Cookies are sent in all contexts, including cross-origin requests.

CORS (Cross-Origin Resource Sharing)

Properly configuring CORS can help prevent CSRF attacks by ensuring that only trusted origins can make requests to your server. This involves setting appropriate headers on the server to specify which origins are allowed to access resources.

Access-Control-Allow-Origin: https://trustedwebsite.com

Further reading

• OWASP CSRF Prevention Cheat Sheet
• MDN Web Docs: SameSite cookies
• MDN Web Docs: Cross-Origin Resource Sharing (CORS)

TL;DR

Debouncing and throttling are techniques used to control the rate at which a function is executed. Debouncing ensures that a function is only called after a specified delay has passed since the last time it was invoked. Throttling ensures that a function is called at most once in a specified time interval.

Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
debouncedHello(); // Prints 'Hello world!' after 2 seconds

Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized at', new Date().toLocaleTimeString());
}, 2000);

// Simulate rapid calls to handleResize every 100ms
let intervalId = setInterval(() => {
  handleResize();
}, 100);
// 'Window resized' is outputted only every 2 seconds due to throttling

Debouncing and throttling

Debouncing

Debouncing is a technique used to ensure that a function is only executed after a certain amount of time has passed since it was last invoked. This is particularly useful in scenarios where you want to limit the number of times a function is called, such as when handling user input events like keypresses or mouse movements.

Example use case

Imagine you have a search input field and you want to make an API call to fetch search results. Without debouncing, an API call would be made every time the user types a character, which could lead to a large number of unnecessary calls. Debouncing ensures that the API call is only made after the user has stopped typing for a specified amount of time.

Code example

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Usage
const handleSearch = debounce((query) => {
  // Make API call
  console.log('API call with query:', query);
}, 300);

document.getElementById('searchInput').addEventListener('input', (event) => {
  handleSearch(event.target.value);
});

Throttling

Throttling is a technique used to ensure that a function is called at most once in a specified time interval. This is useful in scenarios where you want to limit the number of times a function is called, such as when handling events like window resizing or scrolling.

Example use case

Imagine you have a function that updates the position of elements on the screen based on the window size. Without throttling, this function could be called many times per second as the user resizes the window, leading to performance issues. Throttling ensures that the function is only called at most once in a specified time interval.

Code example

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Usage
const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized');
}, 100);

window.addEventListener('resize', handleResize);

Further reading

• Debouncing and Throttling Explained Through Examples
• Understanding the Difference Between Debounce and Throttle
• Lodash Documentation for Debounce and Throttle

TL;DR

Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:

// Array destructuring
const [a, b] = [1, 2];

// Object destructuring
const { name, age } = { name: 'John', age: 30 };

Destructuring assignment for objects and arrays

Destructuring assignment is a convenient way to extract values from arrays and objects into separate variables. This can make your code more readable and concise.

Array destructuring

Array destructuring allows you to unpack values from arrays into distinct variables using square brackets.

Basic example

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

Skipping values

You can skip values in the array by leaving an empty space between commas.

const numbers = [1, 2, 3];
const [first, , third] = numbers;

console.log(first); // 1
console.log(third); // 3

Default values

You can assign default values in case the array does not have enough elements.

const numbers = [1];
const [first, second = 2] = numbers;

console.log(first); // 1
console.log(second); // 2

Object destructuring

Object destructuring allows you to unpack properties from objects into distinct variables using curly braces.

Basic example

const person = { name: 'John', age: 30 };
const { name, age } = person;

console.log(name); // John
console.log(age); // 30

Renaming variables

You can rename the variables while destructuring.

const person = { name: 'John', age: 30 };
const { name: personName, age: personAge } = person;

console.log(personName); // John
console.log(personAge); // 30

Default values

You can assign default values in case the property does not exist in the object.

const person = { name: 'John' };
const { name, age = 25 } = person;

console.log(name); // John
console.log(age); // 25

Nested objects

You can destructure nested objects as well.

const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
const {
  name,
  address: { city, zip },
} = person;

console.log(name); // John
console.log(city); // New York
console.log(zip); // 10001

Further reading

• MDN Web Docs: Destructuring assignment
• JavaScript.info: Destructuring assignment
• FreeCodeCamp: How Destructuring Works in JavaScript

TL;DR

Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using try...catch blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:

function a() {
  throw new Error('An error occurred');
}

function b() {
  a();
}

try {
  b();
} catch (e) {
  console.error(e.message); // Outputs: An error occurred
}

Error propagation in JavaScript

Error propagation in JavaScript is a mechanism that allows errors to be passed up the call stack until they are caught and handled. This is crucial for debugging and ensuring that errors do not cause the entire application to crash unexpectedly.

How errors propagate

When an error occurs in a function, it can either be caught and handled within that function or propagate up the call stack to the calling function. If the calling function does not handle the error, it continues to propagate up the stack until it reaches the global scope, potentially causing the program to terminate.

Using try...catch blocks

To handle errors and prevent them from propagating further, you can use try...catch blocks. Here is an example:

function a() {
  throw new Error('An error occurred');
}

function b() {
  a();
}

try {
  b();
} catch (e) {
  console.error(e.message); // Outputs: An error occurred
}

In this example, the error thrown in function a propagates to function b, and then to the try...catch block where it is finally caught and handled.

Propagation with asynchronous code

Error propagation works differently with asynchronous code, such as promises and async/await. For promises, you can use .catch() to handle errors:

function a() {
  return Promise.reject(new Error('An error occurred'));
}

function b() {
  return a();
}

b().catch((e) => {
  console.error(e.message); // Outputs: An error occurred
});

For async/await, you can use try...catch blocks:

async function a() {
  throw new Error('An error occurred');
}

async function b() {
  await a();
}

(async () => {
  try {
    await b();
  } catch (e) {
    console.error(e.message); // Outputs: An error occurred
  }
})();