DEV Community: Sagar jadhav

How to Prevent Objects from Being Modified in JavaScript

Sagar jadhav — Sat, 22 Nov 2025 08:26:05 +0000

JavaScript objects are mutable by default. That means once an object is created, any code can change its properties—add new ones, delete them, or update values.

But in many situations, you don’t want objects to change.
For example:

Configuration objects that must remain consistent
Shared data structures in teams
API responses that shouldn’t be mutated
Security-critical values
Immutable state management (React, Redux, etc.)

JavaScript provides several techniques to restrict or completely prevent modifications.

This article covers all major methods—from shallow protection to deep immutability, including code examples so you know exactly how and when to use each.

Methods to Prevent Object Modification

JavaScript offers three primary methods with increasing levels of restriction:

Object.preventExtensions()

Object.seal()

Object.freeze()

1. Object.preventExtensions()

This method prevents new properties from being added to an object, but allows modification and deletion of existing properties.

const user = {
  name: "Sagar",
  age: 30
};

Object.preventExtensions(user);

// Existing properties can still be modified
user.age = 31; // Works fine
console.log(user.age); // 31

// Existing properties can be deleted
delete user.name; // Works
console.log(user.name); // undefined

// New properties cannot be added
user.email = "sagar@example.com"; // Fails silently in non-strict mode
console.log(user.email); // undefined

// In strict mode, it throws an error
"use strict";
user.phone = "123-456-7890"; // TypeError: Cannot add property phone

2. Object.seal()

Sealing an object prevents adding or removing properties, but allows modification of existing property values.

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3
};

Object.seal(config);

// Existing properties can be modified
config.timeout = 10000; // Works
console.log(config.timeout); // 10000

// Cannot add new properties
config.debug = true; // Fails silently (or throws in strict mode)
console.log(config.debug); // undefined

// Cannot delete existing properties
delete config.retries; // Fails silently (or throws in strict mode)
console.log(config.retries); // 3

// Check if sealed
console.log(Object.isSealed(config)); // true
console.log(Object.isExtensible(config)); // false (sealed objects are also non-extensible)

3. Object.freeze()

This is the strictest method. It makes an object completely immutable—you cannot add, remove, or modify properties.

const constants = {
  PI: 3.14159,
  MAX_SIZE: 100,
  APP_NAME: "MyApp"
};

Object.freeze(constants);

// Cannot modify existing properties
constants.PI = 3.14; // Fails silently
console.log(constants.PI); // 3.14159

// Cannot add new properties
constants.MIN_SIZE = 10; // Fails silently
console.log(constants.MIN_SIZE); // undefined

// Cannot delete properties
delete constants.APP_NAME; // Fails silently
console.log(constants.APP_NAME); // "MyApp"

// In strict mode, all modifications throw errors
"use strict";
constants.MAX_SIZE = 200; // TypeError: Cannot assign to read only property

// Check if frozen
console.log(Object.isFrozen(constants)); // true
console.log(Object.isSealed(constants)); // true (frozen objects are also sealed)
console.log(Object.isExtensible(constants)); // false

Important

All three methods apply only to the immediate properties of an object—they perform shallow protection. Nested objects remain mutable.

Mastering JavaScript: Understanding call, apply, and bind.

Sagar jadhav — Tue, 13 Aug 2024 06:11:10 +0000

JavaScript is a versatile and powerful programming language that forms the backbone of modern web development. As developers progress in their JavaScript journey, they encounter more advanced concepts that can significantly enhance their coding skills. Among these concepts are the call, apply, and bind methods. These methods are essential tools for manipulating the execution context of functions and managing the this keyword. In this article, we'll explore these methods in depth, understand their differences, and learn how to use them effectively in your JavaScript projects.

Understanding Function Context (`this`)

Before diving into call, apply, and bind, it's crucial to understand the concept of the this keyword in JavaScript

this refers to the object that is executing the current function. The value of this depends on how the function is called:

In a method of an object, this refers to the object.
In a function, this refers to the global object (window in browsers).
In an event, this refers to the element that received the event.
In strict mode ("use strict";), this is undefined in functions.

However, there are times when you need to manually set the value of this. That’s where call, apply, and bind come into play.

The call Method

The call method is used to invoke a function with a specific this value and arguments provided individually. This is particularly useful when you want to borrow a method from another object or set the context dynamically. Its syntax is as follows:

function.call(thisArg, arg1, arg2, ...)

Here's an example to illustrate how call() works:

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " lives in " + city + ", " + country);
  }
};

const john = {
  firstName: "John",
  lastName: "Doe"
};

person.fullName.call(john, "New York", "USA");
// Output: John Doe lives in New York, USA

In this example, we use call() to invoke the fullName function with john as the this value, effectively borrowing the method from the person object.

The apply Method

The apply() method is similar to call(), but it takes arguments as an array. Its syntax is:

function.apply(thisArg, [argsArray])

Let's take an example.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " lives in " + city + ", " + country);
  }
};

const john = {
  firstName: "John",
  lastName: "Doe"
};

person.fullName.apply(john, ["New York", "USA"]);
// Output: John Doe lives in New York, USA

The main difference between call() and apply() is how they handle arguments. call() expects arguments to be passed individually, while apply() expects them in an array.

The bind Method

Unlike call() and apply(), which immediately invoke the function, bind() creates a new function with a fixed this value. This is particularly useful for creating functions that can be called later with a specific context. Its syntax is:

const boundFunction = function.bind(thisArg, arg1, arg2, ...)

Here's an example of how bind() works:

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const logName = function() {
  console.log(this.fullName());
};

const boundLogName = logName.bind(person);
boundLogName(); // Output: John Doe

In this example, we create a new function boundLogName that has person permanently bound as its this value.

Comparison and Use Cases

call: Use when you need to invoke a function and control the this context immediately, passing arguments individually.
apply: Similar to call, but use it when you have an array of arguments.
bind: Use when you need to create a function that can be called later with a specific this context.

Performance Considerations

While call, apply, and bind are powerful tools, it's important to consider their performance implications. bind() is generally slower than call() or apply() because it creates a new function. If you're working in performance-critical sections of your code, you might want to use call() or apply() instead of bind().

Best Practices and Common Pitfalls

When using call, apply, and bind, keep these best practices in mind:

Always be clear about what this should refer to in your functions.
Use call() or apply() when you want to invoke a function immediately with a specific this value.
Use bind() when you want to create a new function with a fixed this value for later use.
Be cautious when using these methods with arrow functions, as arrow functions have a lexical this binding that cannot be changed.

A common pitfall is forgetting that bind() returns a new function. Make sure to either reassign the bound function or use it directly

Conclusion

Mastering call, apply, and bind is a significant step towards becoming a proficient JavaScript developer. These methods provide powerful ways to control function execution context and manage the this keyword. By understanding and effectively using these tools, you can write more flexible, reusable, and maintainable code.

As you continue to explore JavaScript, remember that these concepts are just the tip of the iceberg. The language is constantly evolving, and staying updated with the latest features and best practices is crucial. Practice using call, apply, and bind in your projects, and you'll soon find yourself writing more elegant and efficient JavaScript code.

Understanding Primitive Data Types in JavaScript

Sagar jadhav — Tue, 06 Aug 2024 06:55:15 +0000

JavaScript has seven primitive data types that are essential for every developer to understand. These types form the building blocks of more complex data structures and are crucial for efficient programming. In this article, we will explore the different primitive data types in JavaScript, their characteristics, and how they are used.

What are Primitive Data Types?
Primitive data types are the most basic kinds of data that are immutable, meaning their values cannot be changed. In JavaScript, there are seven primitive data types:

String
Number
BigInt
Boolean
Undefined
Null
Symbol

Understanding these primitive types is crucial for proper data manipulation, type checking, and avoiding common programming errors in JavaScript.

1. String
Represents textual data
Enclosed in single or double quotes
Example:

let name = "John"; let greeting = 'Hello';

2. Number
The number data type represents both integer and floating-point numbers.
Example:

let age = 25; let pi = 3.14;

3. BigInt
BigInt is a relatively new addition to JavaScript and allows the representation of integers with arbitrary precision. BigInt values are created by appending n to the end of an integer or using the BigInt function.
Example:

let bigIntValue = 1234567890123456789012345678901234567890n;
let anotherBigIntValue = BigInt("1234567890123456789012345678901234567890");

4. Boolean
The boolean data type has only two values: true and false. It is typically used for conditional testing and logical operations.
Example:

let isJavaScriptFun = true;
let isTired = false;

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

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

6. Null
The null value represents the intentional absence of any object value. It is one of JavaScript's primitive values and is treated as falsy for boolean operations.
Example:

let emptyValue = null;
console.log(emptyValue); // null

7. Symbol
Symbol introduced in ES6. Symbols are unique and immutable primitive values often used to identify object properties. They are created using the Symbol function.
Example:

let uniqueSymbol = Symbol('description');
let anotherUniqueSymbol = Symbol('description');
console.log(uniqueSymbol === anotherUniqueSymbol); // false

Key characteristics of primitive data types:

Immutability: Once a primitive value is created, it cannot be altered. Operations on primitive values return new values rather than modifying the original value.
Typeof Operator: The typeof operator can be used to determine the type of a primitive value.

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')); // "symbol"
console.log(typeof 1234567890123456789012345678901234567890n); // "bigint"

Conclusion
Primitive data types in JavaScript are the building blocks for working with data in the language. Understanding these data types is crucial for effective JavaScript programming. They are simple yet powerful tools that allow you to represent and manipulate basic values in your applications. As you advance in your JavaScript journey, a solid grasp of these fundamentals will serve you well, enabling you to write more robust and efficient code.

Feel free to experiment with these data types and observe how they behave in different scenarios. Happy coding!

Understanding Prototypes in JavaScript

Sagar jadhav — Mon, 05 Aug 2024 04:30:00 +0000

As a JavaScript developer, understanding prototypes is crucial. They're the backbone of JavaScript's object-oriented programming model. Let's unpack this powerful concept:

🔑 What are Prototypes

Prototypes are the mechanism by which JavaScript objects inherit features from one another. Every object in JavaScript has a prototype, which acts as a template object.

🔧 Prototypal Inheritance

Prototypal inheritance is a feature where an object can inherit properties and methods from another object. This is different from classical inheritance found in languages like Java or C++, where classes inherit from other classes.

🔗 The Prototype Chain
When you try to access a property on an object, JavaScript first looks for it on the object itself. If not found, it looks up the prototype chain until it finds the property or reaches the end of the chain.

let animal = { eats: true };
let rabbit = Object.create(animal);

console.log(rabbit.eats); // true

Here, rabbit inherits the eats property from its prototype, animal.

🏗️ Constructor Functions and Prototypes:

Constructor functions use prototypes to share methods across all instances:

function Dog(name) {
  this.name = name;
}

Dog.prototype.bark = function() {
  console.log(this.name + ' says Woof!');
};

let rover = new Dog('Rover');
rover.bark(); // Outputs: Rover says Woof!

All Dog instances now share the bark method, saving memory.

🔧 Modifying Built-in Prototypes:
You can even extend built-in objects, but use caution:

Array.prototype.first = function() {
  return this[0];
};

let arr = [1, 2, 3];
console.log(arr.first()); // 1

⚠️ Gotchas:

Modifying built-in prototypes can lead to naming conflicts.
The for...in loop iterates over inherited properties too.
Object.create(null) creates objects with no prototype.

💡 Pro Tip: Use Object.getPrototypeOf() to inspect an object's prototype, and Object.setPrototypeOf() to change it (though this can impact performance).

Understanding prototypes is key to mastering JavaScript. They enable powerful OOP patterns and are fundamental to how the language works under the hood.

How do you use prototypes in your code? Share your experiences or questions below!

Shallow Copy vs Deep Copy in JavaScript

Sagar jadhav — Fri, 26 Jul 2024 10:54:02 +0000

When working with JavaScript, understanding the difference between shallow copy and deep copy is essential for effective manipulation of objects and arrays. Let's delve into what these terms mean and how to implement each type of copy in your code.

Shallow Copy
A shallow copy creates a new object or array that holds the same values as the original. However, if the original contains nested objects or arrays, the shallow copy only copies the references to these nested structures, not the structures themselves. This means changes to the nested objects or arrays in the copied structure will also affect the original.

Examples of Shallow Copy Methods:

Spread Operator ({...})

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

Here, shallowCopy is a new object, but shallowCopy.b still references the same object as original.b.

2.Object.assign()

const shallowCopy = Object.assign({}, original);

Array slice Method

const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

Deep Copy
A deep copy creates a new object or array that is a complete, independent clone of the original, including all nested objects and arrays. Changes to the deep copy do not affect the original and vice versa.

Examples of Deep Copy Methods:

JSON.stringify() and JSON.parse()

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

This method serializes the object to a JSON string and then parses it back to a new object. However, it does not handle functions, undefined, or circular references.

2.Recursive Function

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

StructuredClone() (in modern JavaScript environments)

const deepCopy = structuredClone(original);

When to Use Each

Shallow Copy: Suitable for simple objects or arrays without nested structures. It's faster and uses less memory. Use it when you need a quick copy where changes to nested objects should reflect in both the original and the copy.
Deep Copy: Necessary for complex objects or arrays with nested structures. It ensures that changes to the copy do not affect the original. Use it when you need completely independent clones.

Understanding these differences helps prevent bugs that arise from unintended shared references and ensures data integrity in your applications