DEV Community

Cover image for A Guide to Master JavaScript-Objects
Sushant Gaurav
Sushant Gaurav

Posted on

A Guide to Master JavaScript-Objects

Objects are a fundamental part of JavaScript, serving as the backbone for storing and managing data. An object is a collection of properties, and each property is an association between a key (or name) and a value. Understanding how to create, manipulate, and utilize objects is crucial for any JavaScript developer. In this article, we’ll explore the various object functions in JavaScript, providing detailed explanations, examples, and comments to help you master them.

Introduction to Objects in JavaScript

In JavaScript, objects are used to store collections of data and more complex entities. They are created using object literals or the Object constructor.

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";
Enter fullscreen mode Exit fullscreen mode

Object Properties

  • Object.prototype: Every JavaScript object inherits properties and methods from its prototype.
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true
Enter fullscreen mode Exit fullscreen mode

Object Methods

1. Object.assign()

Copies the values of all enumerable own properties from one or more source objects to a target object. It returns the target object.

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}
Enter fullscreen mode Exit fullscreen mode

2. Object.create()

Creates a new object with the specified prototype object and properties.

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true
Enter fullscreen mode Exit fullscreen mode

3. Object.defineProperties()

Defines new or modifies existing properties directly on an object, returning the object.

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }
Enter fullscreen mode Exit fullscreen mode

4. Object.defineProperty()

Defines a new property directly on an object or modifies an existing property and returns the object.

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42
Enter fullscreen mode Exit fullscreen mode

5. Object.entries()

Returns an array of a given object's own enumerable string-keyed property [key, value] pairs.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]
Enter fullscreen mode Exit fullscreen mode

6. Object.freeze()

Freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, and prevents the values of existing properties from being changed.

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42
Enter fullscreen mode Exit fullscreen mode

7. Object.fromEntries()

Transforms a list of key-value pairs into an object.

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }
Enter fullscreen mode Exit fullscreen mode

8. Object.getOwnPropertyDescriptor()

Returns a property descriptor for an own property (that is, one directly present on an object and not in the object's prototype chain) of a given object.

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }
Enter fullscreen mode Exit fullscreen mode

9. Object.getOwnPropertyDescriptors()

Returns an object containing all own property descriptors of an object.

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/
Enter fullscreen mode Exit fullscreen mode

10. Object.getOwnPropertyNames()

Returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly upon a given object.

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']
Enter fullscreen mode Exit fullscreen mode

11. Object.getOwnPropertySymbols()

Returns an array of all symbol properties found directly upon a given object.

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]
Enter fullscreen mode Exit fullscreen mode

12. Object.getPrototypeOf()

Returns the prototype (i.e., the value of the internal [[Prototype]] property) of the specified object.

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true
Enter fullscreen mode Exit fullscreen mode

13. Object.is()

Determines whether two values are the same value.

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false
Enter fullscreen mode Exit fullscreen mode

14. Object.isExtensible()

Determines if extending of an object is allowed.

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false
Enter fullscreen mode Exit fullscreen mode

15. Object.isFrozen()

Determines if an object is frozen.

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true
Enter fullscreen mode Exit fullscreen mode

16. Object.isSealed()

Determines if an object is sealed.

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true
Enter fullscreen mode Exit fullscreen mode

17. Object.keys()

Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']
Enter fullscreen mode Exit fullscreen mode

18. Object.preventExtensions()

Prevents any extensions of an object.

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined
Enter fullscreen mode Exit fullscreen mode

19. Object.seal()

Seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed as long as they are writable.

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33
Enter fullscreen mode Exit fullscreen mode

20. Object.setPrototypeOf()

Sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null.

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true
Enter fullscreen mode Exit fullscreen mode

21. Object.values()

Returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

Practical Examples

Example 1: Cloning an Object

Using Object.assign() to clone an object.

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}
Enter fullscreen mode Exit fullscreen mode

Example 2: Merging Objects

Using Object.assign() to merge objects.

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}
Enter fullscreen mode Exit fullscreen mode

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!
Enter fullscreen mode Exit fullscreen mode

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42
Enter fullscreen mode Exit fullscreen mode

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]
Enter fullscreen mode Exit fullscreen mode

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

Top comments (0)