Achieving Final Keyword Behavior in JavaScript

Photo by Florian Olivo on Unsplash

Hello programmers! In today’s discussion, we explore the concept of the “final” keyword, a term commonly used in programming languages to signify that a particular entity, such as a variable, method, class, or object, cannot be further modified or extended. Simply put, the “final” keyword is a technique that ensures things like variables, methods, classes, or objects stay immutable.

While JavaScript doesn’t have a built-in “final” keyword, we can achieve similar behavior through a combination of best practices and design patterns.

Use Object.freeze() for Constants:

One effective way to emulate the “final” keyword in JavaScript is by employing Object.freeze(). This method makes an object immutable, preventing any modifications to its properties. This is particularly useful when creating constants:

const myConstant = Object.freeze({ value: 2});

Above the example, the object value cannot be modified. It throws an error exception.

It’s essential to note that Object.freeze() only makes the first level of the object immutable.

For objects with nested structures, consider implementing a deep freezing function.

function deepFreeze(obj) {
  // Get the all attributes names of the object
  const attributes = Object.getOwnPropertyNames(obj);

  // Freeze attributes before freezing self
  attributes.forEach(function(name) {
    let property = obj[name];

    // Freeze prop if it's an object
    if (typeof property === 'object' && property !== null) {
      deepFreeze(property);
    }
  });

  // Freeze the object itself
  return Object.freeze(obj);
}

// Example usage:
const nestedObject = {
  attribute1: 'value1',
  attribute2: {
    attribute2_1: 'value3',
    attribute2_2: [1, 2, 3]
  }
};

const frozenObject = deepFreeze(nestedObject);

// Attempt to modify the frozen object (will result in an error in strict mode)
// frozenObject.attribute1 = 'new value'; // This will throw an error
// frozenObject.attribute2.attribute2_1 = 'new value'; // This will throw an error
// frozenObject.attribute2.attribute2_2.push(4); // This will throw an error

In this example, the deepFreeze function recursively goes through all properties of the input object and freezes them. This makes the entire object and all nested objects immutable. If any attempt is made to modify a frozen object, it will result in an error in strict mode, providing a safeguard against unintentional changes.

Private Variables with Closures:

While not a replica of the “final” keyword, closures in JavaScript can help create private variables and methods, safeguarding them from external modifications:

const counter = () => {
  let count = 0;

  return {
    increment: () => {
      count++;
    },
    getValue: () => {
      return count;
    },
  };
}

counter.increment();
console.log(counter.getValue()); // 1

The ‘count’ variable is not directly accessible from outside the closure.

ES6 Classes and Object.seal():

Utilizing ES6 classes, we can use Object.seal() to prevent the addition or removal of properties from an object. While not equivalent to the "final" keyword, this approach effectively restricts modifications:

class SealClass {
  constructor(value) {
    this.value = value;
    Object.seal(this);
  }

  getValue() {
    return this.value;
  }
}

const sealObject = new SealClass(42);
sealObject.value = 100; // This won't throw an error, but the value won't change.

Conclusion:

In the world of JavaScript, the absence of a built-in “final” keyword doesn’t mean we can’t achieve similar powerful features. By tapping into methods such as Object.freeze(), closures, and Object.seal(), developers can enhance the reliability of their code, enforce immutability, and maintain better control over modifications in their JavaScript applications.

References:

1. MDN Web Docs — Object.freeze(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
2. MDN Web Docs — Closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
3. MDN Web Docs — Object.seal(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal