Skip to content

Instantly share code, notes, and snippets.

@dikshagoyal26
Last active July 8, 2020 16:43
Show Gist options
  • Save dikshagoyal26/2d5e04a1792134f578913804249acf28 to your computer and use it in GitHub Desktop.
Save dikshagoyal26/2d5e04a1792134f578913804249acf28 to your computer and use it in GitHub Desktop.
Objects

Object

Object is a non primitive data type in javascript.

Creating a JavaScript Object

With JavaScript, one can define and create own objects.

There are different ways to create new objects:

  1. Define and create a single object, using an object literal.
  2. Define and create a single object, with the keyword new.
  3. Define an object constructor, and then create objects of the constructed type.

Object Literal

Using an object literal, you both define and create an object in one statement.

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

Objects and properties

A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. The properties of an object define the characteristics of the object. Properties can be access with a '.' operator

let user = {     
  name: "John", 
  age: 30        
};
console.log(user.name) // John

Unassigned properties of an object are undefined

user.city; // undefined

Objects are Mutable

hey are addressed by reference, not by value.

let user = {     
  name: "John", 
  age: 30        
};

let user2=user // This will not create a copy of user. 
console.log(user)  // {name: "John", age: 30}
console.log(user2) // {name: "John", age: 30}

user2.city='Delhi'
console.log(user2) // {name: "John", age: 30, city: "Delhi"}
console.log(user)  // {name: "John", age: 30, city: "Delhi"}

// Both user and user2 are the same object.

using constructor function (new KEYWORD)

It follows two steps:

  1. Define the object type by writing a constructor function.
  2. Create an instance of the object with new.
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var mycar = new Car('Eagle', 'Talon TSi', 1993);
console.log(mycar) // Car {make: "Eagle", model: "Talon TSi", year: 1993}make: "Eagle"model: "Talon TSi"year: 1993__proto__: constructor: ƒ Car(make, model, year)arguments: nullcaller: nulllength: 3name: "Car"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: VM42:1[[Scopes]]: Scopes[1]__proto__: Object
mycar.color = 'black';
console.log(mycar) // Car {make: "Eagle", model: "Talon TSi", year: 1993, color: "black"}

Using Object given undefined and null types

The following examples store an empty Object object in o:

let obj = new Object() // {}
let obj = new Object(undefined) // {}
let obj = new Object(null) // {}

Using Object to create Boolean objects The following examples store Boolean objects in obj:

let obj = new Object(true)      // Boolean {true}
let obj = new Object(Boolean()) // Boolean {false}

Using the Object.create method

This method is useful to create objects, because it allows us to choose the prototype object for the object we want to create, without having to define a constructor function.

// Animal properties and method encapsulation
var Animal = {
  type: 'Invertebrates', // Default value of properties
  displayType: function() {  // Method which will display type of Animal
    console.log(this.type);
  }
};

// Create new animal type called animal1 
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = 'Fishes';
fish.displayType(); // Output:Fishes

getters and setters

A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property.

var obj = {
  a: 7,
  get getA() { 
    return this.a + 1;
  },
  set setA(x) {
    this.a = x / 2;
  }
};

console.log(obj.a); // 7
console.log(obj.getA); // 8 <-- At this point the get getA() method is initiated.
o.setA = 50;         //   <-- At this point the set setA(x) method is initiated
console.log(o.getA); // 25

Static methods

  1. Object.assign() Copies the values of all enumerable own properties from one or more source objects to a target object.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); //  { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }

  1. Object.defineProperty() Adds the named property described by a given descriptor to an object.

  2. Object.freeze() Freezes an object. Other code cannot delete or change its properties.

  3. Object.getOwnPropertyDescriptor() Returns a property descriptor for a named property on an object.

  4. Object.getOwnPropertyDescriptors() Returns an object containing all own property descriptors for an object.

  5. Object.getPrototypeOf() Returns the prototype (internal [[Prototype]] property) of the specified object.

  6. Object.isExtensible() Determines if extending of an object is allowed.

  7. Object.isFrozen() Determines if an object was frozen.

  8. Object.isSealed() Determines if an object is sealed.

  9. Object.keys() Returns an array containing the names of all of the given object's own enumerable string properties.

  10. Object.seal() Prevents other code from deleting properties of an object.

  11. Object.setPrototypeOf() Sets the object's prototype (its internal [[Prototype]] property).

  12. Object.values() Returns an array containing the values that correspond to all of a given object's own enumerable string properties.

deep cloning and Shallow cloning

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment