DEV Community: navvan

Part 1 - Memory Management in JavaScript: 10+ Data Structures & Garbage Collection Techniques | JS Deep Dive

navvan — Tue, 22 Oct 2024 13:56:27 +0000

Visit our official platform: Navvan
Follow us on: LinkedIn | YouTube

Memory management is a fundamental aspect of programming that varies significantly between languages. Low-level languages like C require manual memory management through functions like malloc() and free(), whereas high-level languages like JavaScript automate this process through garbage collection.

This article delves into the intricacies of memory management in JavaScript, exploring its lifecycle, allocation strategies, and the role of garbage collection.

Understanding the Memory Lifecycle

Every programming journey begins with understanding the memory lifecycle. Whether you're coding in C or JavaScript, the process is remarkably consistent:

Allocate: Request the memory you need.
Use: Utilize the allocated memory (read/write).
Release: Free the memory once it's no longer required.

While the first and third steps are explicit in low-level languages, JavaScript handles the first and last steps implicitly, thanks to its automatic memory management features.

Allocation in JavaScript

JavaScript elegantly manages memory allocation to simplify development. When you declare values, it automatically allocates memory:

const n = 123; // Allocates memory for a number
const s = "azerty"; // Allocates memory for a string

const o = {
  a: 1,
  b: null,
}; // Allocates memory for an object and its contents

const a = [1, null, "abra"]; // Allocates memory for an array and its elements

function f(a) {
  return a + 2; // Allocates a function
}
document.getElementById('myButton').addEventListener('click', () => {
  document.body.style.backgroundColor = 'blue';
}, false);

Releasing Unneeded Memory

Releasing memory when it's no longer needed is crucial. High-level languages like JavaScript employ garbage collection (GC) to automate this process. GC monitors memory allocation and decides when memory can be safely reclaimed.

Garbage Collection Explained

Garbage collection is a sophisticated technique used to manage memory. It works by identifying objects that are no longer accessible (i.e., not referenced by any live variables) and deallocating their memory. Two primary GC algorithms used are reference counting and mark-and-sweep.

Reference Counting

Reference counting tracks the number of references to an object. If an object's reference count drops to zero, it's considered safe to deallocate its memory. However, this method struggles with circular references, leading to memory leaks.

let primary = {
  key1: {
    key1_nested_key1: 2,
  },
};

let secondary = primary; // The 'secondary' variable is the second reference to the object.

primary = 1; // The object now has zero references and can be garbage-collected.

let tertiary = secondary.key1; // Reference to the 'key1' property of the object.
secondary = "Nikhil"; // The object has zero references now. It can be garbage collected.
tertiary = null; // The 'key1' property has zero references now. It can be garbage collected.

Mark-and-Sweep

Mark-and-sweep is a more advanced garbage collection strategy. It starts from a set of root objects (e.g., global variables) and marks all objects reachable from these roots. Afterwards, it sweeps away all unmarked objects, deallocating their memory. This method efficiently handles circular references, making it the preferred choice for modern JavaScript engines.

Configuring Engine's Memory Model

JavaScript engines allow developers to configure memory settings, such as increasing the maximum heap size or exposing the garbage collector for debugging purposes. For instance, Node.js offers flags to adjust memory limits and enable garbage collector inspection:

node --max-old-space-size=4096 myScript.js
node --expose-gc --inspect myScript.js

Advanced Data Structures for Memory Management

JavaScript introduces data structures like WeakMap and WeakSet, designed to aid in memory management by allowing objects to be garbage collected even if they're referenced within these structures. These structures hold weak references, meaning they don't prevent the garbage collector from collecting the referenced objects.

WeakMap and WeakSet

WeakMap and WeakSet allow you to associate objects with other objects or track unique values without preventing those objects from being garbage collected.

const weakMap = new WeakMap();
const key1 = {};
weakMap.set(key1, { key1 });
// Now `key1` cannot be garbage collected because the value holds a reference to it.

WeakRef and FinalizationRegistry

WeakRef and FinalizationRegistry offer deeper insights into the garbage collection process. WeakRef allows you to hold a weak reference to an object, enabling it to be garbage collected while still accessing its value. FinalizationRegistry lets you register callbacks to run when an object is about to be garbage collected, facilitating cleanup operations.

const cache = new Map();
const registry = new FinalizationRegistry((value) => {
  cache.delete(value);
});

function cached(fetcher) {
  return async (key) => {
    let value = cache.get(key);
    if (value !== undefined) {
      return value.deref();
    }
    value = await fetcher(key);
    cache.set(key, new WeakRef(value));
    registry.register(value, key);
    return value;
  };
}
const getImage = cached(async (url) => fetch(url).then(res => res.blob()));

If you enjoyed this article, please make sure to Subscribe, Like, Comment, and Connect with us today! 🌐

Visit our official platform: Navvan
Follow us on: LinkedIn | YouTube

JavaScript's Iterators & Generators ⚙️ Refresher 🚀

navvan — Thu, 17 Oct 2024 17:47:05 +0000

Visit our official platform: Navvan
Follow us on: LinkedIn | YouTube

An In-Depth Look at JavaScript's Iteration Tools 🛠️

Iterators and generators are powerful features that provide a mechanism for customizing the behavior of for…of loops. 🔄

Iterators: Unlocking the Power of Iteration 🔑

Before diving into generators, let's first understand iterators. Most likely, you've already used iterators when working with arrays, maps, or even strings. (Yes, 😮 you've been using them!) 📚

for (let char of 'hello') {
  console.log(char); // 'h', 'e', 'l', 'l', 'o'
}

Any object that implements the iterable protocol can be iterated using a for…of loop. 🔄 To make an object iterable, you need to implement the iterator method, which returns an iterator object. 🧱

An iterator is an object that defines a sequence and potentially a return value upon termination. It has a next() ⏭️ method that returns an object with two properties:

value: The next value in the iteration sequence ⏩
done: true ✅ if the last value has been consumed, false ❌ otherwise

Here's how you can craft your range iterator: ✍️

function makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let nextIndex = start;
  let iterationCount = 0;
  const rangeIterator = {
    next() {
      let result;
      if (nextIndex < end) {
        result = {
          value: nextIndex,
          done: false
        };
        nextIndex += step;
        iterationCount++;
        return result;
      }
      return {
        value: iterationCount,
        done: true
      };
    }
  };
  return rangeIterator;
}

This iterator represents a sequence of numbers from start 🏁 to end 🔚 with a given step 🪜. Its next() ⏭️ method returns the next number in the sequence until the end is reached.

Creating Custom Iterators 👾🤖

While many built-in JS objects, such as arrays and strings, are iterable by default, you can also create custom iterators for your objects. To create a custom iterator, define a method with the key Symbol.iterator for your object, and this method should return an iterator object with a next() method.

For a range of numbers, you can construct a custom iterator like this:

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    return {
      next() {
        if (current <= end) {
          return {
            value: current++,
            done: false
          };
        } else {
          return {
            value: undefined,
            done: true
          };
        }
      },
    };
  }
}

const range = new Range(1, 3);
for (const number of range) {
  console.log(number); // 1, 2, 3
}

While they may not be used every day, understanding how to leverage iterators and generators can be a great advantage when you encounter situations that require their unique capabilities. 💪

Generators: Simplifying Iterator Creation ✨

While custom iterators are useful, creating them requires careful 🧐 state management. This is where generator functions come to the rescue! 🦸‍♀️

Generator functions allow you to define an iterative algorithm by writing a single 🔂 function whose execution is not continuous. They are written using the function* syntax and use the yield keyword to pause ⏸️ and resume 🎬 their execution.

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
  let iterationCount = 0;
  for (let i = start; i < end; i += step) {
    iterationCount++;
    yield i;
  }
  return iterationCount;
}

When called, a generator function returns a special iterator called a Generator. Each time the generator's next() ⏭️ method is called, the function executes until it encounters the next yield expression. 🧮

The yield keyword is similar to return, but instead of terminating the function, it pauses its execution until it encounters another next() ⏭️ call, behaving exactly like a breakpoint for iteration.

function* stringGenerator() {
  yield 'Iterators';
  yield 'Generators';
}

const strings = stringGenerator();
console.log(strings.next()); // { value: 'Iterators', done: false }
console.log(strings.next()); // { value: 'Generators', done: false }
console.log(strings.next()); // { value: undefined, done: true }

Basic Generator Functions ⚙️

To create a generator function, you need to use the function* syntax. Within this, you can use the yield keyword to pause the execution and return a value to the caller. When the generator is resumed by calling next(), it will continue executing from where it left off.

Here's a simple one that yields the numbers from 1 to 3:

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();
for (const number of generator) {
  console.log(number); // 1, 2, 3
}

Nesting Generators

Since generators return iterators and those iterators are iterable, we can use yield* to nest generators, just like we nest functions.

function* getNumbers() {
  yield -3;
  yield -2;
  yield -1;
}

function* counterGenerator() {
  let i = 0;
  while (true) {
    yield i;
    i++;
  }
}

function* getNumbersThenCount() {
  yield* getNumbers();
  yield* counterGenerator();
}

for (let element of getNumbersThenCount()) {
  if (element > 4) {
    break;
  }
  console.log(element);
}

Output:

-3 // <- getNumbers()
-2
-1
0 // <- counterGenerator()
1
2
3
4

Use Cases for Generators and Iterators 🎯

Represent infinite sequences: Since generators compute values on-demand, they can efficiently represent sequences of unlimited size. ♾️
Implement custom iteration behavior: Generators allow you to define custom iteration logic for your objects, giving you fine-grained control. 🎛️
Simplify asynchronous code: Generator functions can be used to implement asynchronous iteration, allowing you to work with asynchronous data sources, such as APIs or streams, in a more streamlined way. 📝
Implement lazy evaluation: Generators and iterators can be useful for implementing lazy evaluation, where values are only computed when they are needed. This can be particularly helpful for working with large data sets or expensive computations. 🦥

Bonus: 🎈 Endless Fibonacci Sequence with a Resetter

function* fibonacciGenerator() {
  let a = 0;
  let b = 1;
  while (true) {
    const reset = yield a;
    [a, b] = [b, a + b];
    if (reset) {
      a = 0;
      b = 1;
    }
  }
}

const generator = fibonacciGenerator();
// Get the first 10 Fibonacci numbers
for (let i = 0; i < 10; i++) {
  if (i === 8) {
    console.log(generator.next(true).value);
  }
  console.log(generator.next().value);
}

Output:

0
1
1
2
3
5
8
13
0  // <- resetter ran here
1
1

❓ Can I use generators and iterators with other JavaScript data structures?

Yes, they can be used with a variety of JS data structures. Many built-in JS objects, like arrays, strings, and sets, already have default iterator implementations. We can also create custom iterators and generator functions for our objects and data structures.

Conclusion 🎉

Generators and iterators are powerful tools in JavaScript that allow you to customize iteration behavior and create more expressive and readable code. Now that you know how they work under the hood, you can leverage their capabilities to solve complex problems elegantly.

If you enjoyed this article, please make sure to Like & Subscribe 🌐

Visit our official platform: Navvan
Follow us on: LinkedIn | YouTube

🕵️‍♂️ Unraveling the JavaScript "this" Enigma 🕵️‍♀️

navvan — Thu, 17 Oct 2024 17:41:40 +0000

Visit our official platform: Navvan
Follow us on: LinkedIn | YouTube

1. Function Context 🎭

When a regular function is invoked, the value of this depends on how the function is called. Let's explore different scenarios: 🕵️‍♂️

1.1. Method Invocation 🎨

When a function is called as a method of an object, this refers to the object itself. 🎯

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, my name is ${this.name}! 😄`);
  },
};
person.greet(); // Output: Hello, my name is Alice! 😄

In the example above, this inside the greet method refers to the person object. 👤

1.2. Function Invocation 📞

When a function is invoked without an object reference, this refers to the global object (window in browsers, global in Node.js) in non-strict mode, or undefined in strict mode. 🌐

function sayHello() {
  console.log(`Hello, ${this}! 👋`);
}
sayHello(); // Output: Hello, [object Window]! 👋 (in a browser)

1.3. Constructor Invocation 🏗️

When a function is invoked with the new keyword, a new object is created, and this refers to that newly created object. 🆕

function Person(name) {
  this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // Output: Alice 😎

1.4. Explicit Binding 🔗

You can explicitly set the value of this using the call(), apply(), or bind() methods. 🎯

function greet() {
  console.log(`Hello, my name is ${this.name}! 😊`);
}
const person = { name: 'Alice' };
greet.call(person); // Output: Hello, my name is Alice! 😊
greet.apply(person); // Output: Hello, my name is Alice! 😊
const boundGreet = greet.bind(person);
boundGreet(); // Output: Hello, my name is Alice! 😊

2. Arrow Functions 🏹

Arrow functions do not have their own this binding. Instead, they inherit this from the parent (surrounding) scope. 👨‍👩‍👧‍👦

const person = {
  name: 'Alice',
  greet() {
    const innerArrow = () => {
      console.log(`Hello, my name is ${this.name}! 😄`);
    };
    innerArrow();
  },
};
person.greet(); // Output: Hello, my name is Alice! 😄

In the example above, the arrow function innerArrow inherits this from the surrounding greet method. 👪

3. Class Context 🎓

In ES6 classes, this behaves differently in constructor functions, instance methods, and static methods. 🏫

3.1. Constructor Functions 🔧

In a class constructor, this refers to the newly created instance of the class. 🆕

class Person {
  constructor(name) {
    this.name = name;
  }
}
const alice = new Person('Alice');
console.log(alice.name); // Output: Alice 😎

⚠️ However, there's an interesting twist! If the constructor function returns another non-primitive value (like an object), the this binding is discarded, and the returned value becomes the result of the new expression. 😮

function Car(model) {
  this.model = model;
  return { year: 2023 };
}

let myCar = new Car("Tesla");
console.log(myCar.model); // Output: undefined
console.log(myCar.year); // Output: 2023

3.2. Instance Methods 🎭

In an instance method, this refers to the instance of the class on which the method is called.

3.3. Static Methods 📊

In a static method, this refers to the class itself, not an instance of the class. 📈

class Animal {
  makeSound() {
    console.log(this); // `this` refers to the instance
  }

  static getSpecies() {
    console.log(this); // `this` refers to the class
  }
}

const dog = new Animal();
dog.makeSound(); // Output: instance of Animal
Animal.getSpecies(); // Output: Animal

🌟 In derived classes, constructors have slightly different behavior. Unlike base class constructors, derived constructors have no initial this binding. Calling super() creates the this binding within the constructor.

🚨 It's important to remember that referring to this before calling super() will throw an error. 🚨

class Vehicle {}
class Car extends Vehicle {
  constructor() {
    super(); // Creates `this` binding
    console.log(this); // Now, `this` is available
  }
}

new Car();

4. Global Context 🌐

In the global execution context, this refers to the global object (window in browsers, global in Node.js). 🌍

console.log(this === window); // Output: true 😄 (in a browser)

5. Event Handlers 🎉

When a function is used as an event handler, this refers to the element that triggered the event. 🎯

<button id="myButton">Click me! 🖱️</button>

const button = document.getElementById('myButton');
button.addEventListener('click', function () {
  console.log(this === button); // Output: true 😄
});

In the example above, this inside the event handler function refers to the button element. 🔘

6. Strict Mode 🚨

In strict mode, the value of this remains whatever it was set to when entering the execution context. If this is not defined, it remains undefined. 🤔

function strictFunc() {
  return this;
}
console.log(strictFunc() === undefined); // Output: true 😅

Conclusion 🎉

Phew! We've covered some ground in this little dive into the context of this in JavaScript. From normal to arrow functions, classes to event handlers, and strict mode considerations, this plays a crucial role in understanding how JS code behaves. 🌟

Remember, the value of this is determined by how a function is called, not where it's defined. 💪

If you enjoyed this article, please make sure to Subscribe, Like, Comment, and Connect with us today! 🌐

Visit our official platform: Navvan
Follow us on: LinkedIn | YouTube