DevPremier
Ashwani Garg In today's Technology-based world, Javascript is the topmost scripting language, which developers use for both backend and frontend using its frameworks like [ Node.js for backend ] and [ Angular.js, React.js or Vue.js for frontend ]. And as you know Javascript heavily uses Objects everywhere even in these frameworks. In this article, I'll focus on Popular JavaScript Object Prototype Functions. Posted at:

Popular JavaScript Object Prototype Functions

Popular JavaScript Object Prototype Functions

Popular JavaScript Object Prototype Functions

In today's technology-based world, Javascript is the topmost scripting language, which developers use for both backend and frontend using its frameworks like [ Node.js for backend ] and [ Angular.js, React.js or Vue.js for frontend ]. And as you know Javascript heavily uses Objects everywhere even in these frameworks. In this article, I'll focus on Popular JavaScript Object Prototype Functions.

Do you know, What is Object in Javascript?

The Object constructor creates an object wrapper for the given value. If the value is null or undefined, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.

When called in a non-constructor context, Object behaves identically to new Object().

What is Object.prototype in Javascript?

Nearly all objects in JavaScript are instances of Object; a typical object inherits properties (including methods) from Object.prototype, although these properties may be overridden-

  • Date objects inherit from Date.prototype
  • Array objects inherit from Array.prototype
  • Person objects inherit from Person.prototype

The Object.prototype is on the top of the prototype inheritance chain:

Date objects, Array objects, and Person objects inherit from Object.prototype.

The Object.prototype is a property of the Object constructor. And it is also the end of a prototype chain.

Note:- Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects. 

Below are some Standard JavaScript Object Prototype Functions explained...

Javascript Object.create()

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

 Syntax

 Object.create(proto, [propertiesObject])

Parameters

    •  proto 
      • The object which should be the prototype of the newly-created object.
    •  propertiesObject 
    • Optional. If specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. These properties correspond to the second argument of Object.defineProperties().

 Return value A new object with the specified prototype object and properties.

Below is an example of how to use Object.create() to achieve single inheritance.

console.clear();

var computer = Object.create(null);

typeof(computer) // Object
console.log(computer) // Object with prototype object as null
// expected output: Object {}

// Set any property to computer object
computer.name = "Super Computer";

console.log(computer) // Object with name as property and prototype as null
// expected output: Object {
  name: "Super Computer"
}

Javascript Object.assign()

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object. Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources' properties will similarly overwrite earlier ones. 

The Object.assign() method only copies enumerable and own properties from a source object to a target object.

It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters.

 Syntax

 Object.assign(target, ...sources)

Parameters

    •  target 
      • The target object.
      •  sources 
      • The source object(s).

     Return value The target object.

    Example: Cloning an object

    console.clear();
    
    var obj = { some_key: 'some_val' };
    var copy = Object.assign({}, obj);
    console.log(copy); 
    // expected output: Object {
      some_key: "some_val"
    }
    console.clear();
    
    let obj1 = { a: 0 , b: { c: 0}};
    let obj2 = Object.assign({}, obj1);
    console.log(JSON.stringify(obj2)); 
    //expected output: { a: 0, b: { c: 0}}
      
    obj1.a = 1;
    console.log(JSON.stringify(obj1)); 
    //expected output: { a: 1, b: { c: 0}}
    console.log(JSON.stringify(obj2)); 
    //expected output: { a: 0, b: { c: 0}}
      
    obj2.a = 2;
    console.log(JSON.stringify(obj1)); 
    //expected output: { a: 1, b: { c: 0}}
    console.log(JSON.stringify(obj2)); 
    //expected output: { a: 2, b: { c: 0}}

    Javascript Object.keys() 

    The Object.keys() method returns an array of a given object's own property names, in the same order as we get with a normal loop.

     Syntax

     Object.keys(obj)

     Return value An array of strings that represent all the enumerable properties of the given object.

    Where to use:

    • Object.keys() is used for returning enumerable properties of a simple array.
    • Object.keys() is used for returning enumerable properties of an array-like object.
    • Object.keys() is used for returning enumerable properties of an array like object with random key ordering.
    console.clear();
    
    var check = ['car', 'plane', 'ship'];
    console.log(Object.keys(check));
    //expected output: ["0", "1", "2"]
    
    var object = { 1: 'x', 2: 'y', 3: 'z' };
    console.log(Object.keys(object));
    //expected output: ["1", "2", "3"]

    Javascript Object.entries() 

    The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs.

    The order of the array returned by Object.entries() does not depend on how an object is defined. If there is a need for certain ordering then the array should be sorted first like Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));.

     Syntax

     Object.entries(obj)

     Return value An array of the given object's own enumerable string-keyed property [key, value] pairs.

    const object1 = { foo: 'bar', baz: 42 };
    console.log(Object.entries(object1)[1]);
    // expected output: Array ["baz", 42]
    
    const object2 = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(object2)[2]);
    // expected output: Array ["2", "c"]
    
    const result = Object.entries(object2).sort((a, b) => a - b);
    console.log(Object.entries(result)[1]);
    // expected output: Array ["1", Array ["1", "b"]]

    Javascript Object.freeze() 

    The Object.freeze() method 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, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.

     Syntax

     Object.entries(obj)

     Return valueThe object that was passed to the function.

    console.clear();
    
    const object1 = {
      property1: 42
    };
    
    const object2 = Object.freeze(object1);
    
    object2.property1 = 33;
    // Throws an error in strict mode
    
    console.log(object2.property1);
    // expected output: 42