HOW TO CREATE OBJECTS IN JAVASCRIPT

#javascript #object #oop #beginners

objects

creating an object

Using Object litteral

this is the simplest way of creating a javascript object
you simply create a variable an assign it to an object with specified properties

const person = {
  name: "salah",
  age: 22
};

using constructors

constructor are methods that creates an instate object based on given values passed as parameters,
the properties of that object are spercifed in the method implementation .
here we define our constructor:

function Person(name_, age_) {
    this.name = name_;
    this.age = age_;
    this.Greeting = function () {
        console.log("hi, My name is " + this.name);
    }
}

and now we only initialize a new instance of Person
let salah = new Person("salah", 25);
so here we can access our objects promerties and methods

salah.Greeting();
console.log(salah.age);
console.log(salah.name);

using factory functions

var personFF = function(name_, age_) {
  return {
    name_,
    age_
//we can add methods and properties here
  };
};
var khalid = personFF("khalid", 15);
console.log(khalid);

using the Object.clone() method

to clone an object is another choice we have.
this method takes one or more objets as parameters and then creates a new object based o what's given

var hamza = Object.assign(khalid);
hamza.name_ = "hamza";

as we can see the assign method copies the values of an object by reference.
so when we changed the second object's property name the first object's property changed to and vise-versa.

console.log(hamza);
console.log(khalid);

same thing if we try to change the age property

khalid.age_ = 33;
console.log(hamza);
console.log(khalid);

so now both objects are referncing the same memory adress
to prevent this problem we can use the spread operator
using the spread operator

var ayoube = {
  ...khalid // this ... is called the spread operator it basically spreads an object's properties into another object
};

console.log(ayoube);
ayoube.name_ = "ayoube";

so now even if we change the second object the first object stays the same and vise versa.

console.log(ayoube);
console.log(khalid);

using the create method
a better way to prevent this problem is the create method
it creates an empty object based on an exesting object's properties.

var khalil = Object.create(khalid);
console.log(khalil);
console.log(khalid);

so now we have an object called khalil that has the same properties as khalid (name* and age*)
but the with no values yet.

khalil.name_ = "khalil";
khalil.age_ = 25;
console.log(khalil);
console.log(khalid);

Top comments (4)

Josh • Feb 4 '20 • Edited

Why not sanitize the object keys in the factory function? And the arguments in the class-like variation, for that matter? There's not any apparent reason the underscores need to be there.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.Greeting = function() {
    // ...
  }
} 

function personFF(name, age) {
  return {
    name, 
    age,
    // no reason the factory version can't have  the Greeting function, either
    Greeting() {
      // ...
    }
  };
}

Salah Eddine Ait Balkacm • Feb 4 '20

This is a constructor that creates an instance of a Person

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.Greeting = function() {
    // ...
  }
}

And this is a factory fuction that creates an object of type personFF by returning an object with the properties geven as parameters

function personFF(name, age) { //here age and name can be named anything.
//this (name_ and age_) is just a naming convention I used :)
  return 
  //this returns an object using the object literal.
  //so the object that we return can have as many properties and methods depending on our //needs.
  {
    name, 
    age,
    //we can add methods and properties here
  };
}