Objects and it's Methods in Javascript

Objects and it's Methods in Javascript

In JavaScript, almost "everything" is an object.

What are Objects ?

The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.Objects, in JavaScript, is the most important data-type and forms the building blocks for modern JavaScript.

Syntax:

let object_name = {
    key_name : value,
    ...
}

Example:

let info = {
        name: 'Mahashay',
        location : 'New-Delhi',
        dob : '1999',
        displayInfo : function(){
            console.log(`${info.name} was born on
                ${info.dob} at ${info.location}`);
        }
    }
    info.displayInfo();   // Mahashay was born on 1999 at New-Delhi

What is this?

In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used.

Example:

let info = {
        name: 'Mahashay',
        location : 'New-Delhi',
        dob : '1999',
        displayInfo : function(){
            return this.name + " born at " + this.location + " in " + this.dob;
        }
    }
    console.log(info.displayInfo());  //Mahashay born at New-Delhi in 1999
  • In an object method, this refers to the object.
  • Alone, this refers to the global object.
  • In a function, this refers to the global object.
  • In an event, this refers to the element that received the event.

Object Methods

Object Methods in JavaScript can be accessed by using functions. Functions in JavaScript are stored as property values. The objects can also be called without using bracket ().

Syntax:

objectName.methodName();
  • Object.assign()

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

const targetObject = { a: 1, b: 2 };
const sourceObject = { b: 4, c: 5 };

const returnedTarget = Object.assign(targetObject, sourceObject);

console.log(targetObject); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget === targetObject); //true
  • Object.create()

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

const info = {
  isAbove18: false,
  printInfo: function() {
    console.log(`My name is ${this.name}. Am I above 18? ${this.isAbove18}`);
  }
};

const details = Object.create(info);

details.name = 'Mahashay'; // "name" is a property set on "details", but not on "info"
details.isAbove18 = true; // inherited properties can be overwritten
details.printInfo(); // "My name is Matthew. Am I human? true"
  • Object.defineProperties()

The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object.

const object1 = {};

Object.defineProperties(object1, {
  property1: {
    value: 42,
    writable: true
  },
  property2: {}
});

console.log(object1.property1); // 42
  • Object.entries()

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

const testObject = {
    name: 'Mahashay',
    dob : '1999',
};

for (const [key, value] of Object.entries(testObject)) {
  console.log(`${key}: ${value}`);
} 
/* output:
 name: Mahashay
 dob: 1999
*/
  • Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly in a given object.

const testObject = {
  name: 'Mahashay',
  dob : '1999',
};
console.log(Object.getOwnPropertyNames(testObject));  //[ 'name', 'dob' ]

The Object.is() method determines whether two values are the same value.

const testObject1 = {
  name: 'Mahashay',
};

const testObject2 = {
  name: 'Mahashay',
};
const testObject3 = testObject1;

console.log(Object.is(testObject1, testObject1)) //true
console.log(Object.is(testObject1, testObject2)) //false
console.log(Object.is(testObject1, testObject3)) //true
  • Object.keys()

The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

const testObject = {
  name: 'Mahashay',
  dob : '1999',
};
console.log(Object.keys(testObject));  //[ 'name', 'dob' ]
  • Object.values()

The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for-in loop.

const testObject = {
  name: 'Mahashay',
  dob : '1999',
};
console.log(Object.values(testObject));  //[ 'Mahashay', '1999' ]

REFERENCES:

mdn docs

w3schools

Thanks for Reading. Any Suggestions & feedback are highly welcomed.