A Guide to Master JavaScript-Objects
Tags: webdev, javascript, beginners, programming
Published: 2024-07-15 13:09:00

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.

```javascript
// 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";
```

### Object Properties

- **`Object.prototype`**: Every JavaScript object inherits properties and methods from its prototype.

```javascript
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true
```

### 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.

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

#### 2. `Object.create()`

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

```javascript
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
```

#### 3. `Object.defineProperties()`

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

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

#### 4. `Object.defineProperty()`

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

```javascript
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
```

#### 5. `Object.entries()`

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

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

#### 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.

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

#### 7. `Object.fromEntries()`

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

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

#### 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.

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

#### 9. `Object.getOwnPropertyDescriptors()`

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

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

#### 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.

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

#### 11. `Object.getOwnPropertySymbols()`

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

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

#### 12. `Object.getPrototypeOf()`

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

```javascript
let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true
```

#### 13. `Object.is()`

Determines whether two values are the same value.

```javascript
console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false
```

#### 14. `Object.isExtensible()`

Determines if extending of an object is allowed.

```javascript
let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false
```

#### 15. `Object.isFrozen()`

Determines if an object is frozen.

```javascript
let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true
```

#### 16. `Object.isSealed()`

Determines if an object is sealed.

```javascript
let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true
```

#### 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.

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

#### 18. `Object.preventExtensions()`

Prevents any extensions of an object.

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

#### 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.

```javascript
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
```

#### 20. `Object.setPrototypeOf()`

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

```javascript
let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true
```

#### 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.

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

### Practical Examples

#### Example 1: Cloning an Object

Using `Object.assign()` to clone an object.

```javascript
let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}
```

#### Example 2: Merging Objects

Using `Object.assign()` to merge objects.

```javascript
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}
```

#### Example 3: Creating an Object with a Specified Prototype

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

```javascript
let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!
```

#### Example 4: Defining Immutable Properties

Using `Object.defineProperty()` to define immutable properties.

```javascript
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
```

#### Example 5: Converting an Object to an Array

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

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

### 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.