DEV Community

loading...
Cover image for HOW TO CREATE OBJECTS IN JAVASCRIPT

HOW TO CREATE OBJECTS IN JAVASCRIPT

salaheddin12 profile image Salah Eddine Ait Balkacm ・2 min read

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);

Discussion (4)

pic
Editor guide
Collapse
thepeoplesbourgeois profile image
Josh • 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() {
      // ...
    }
  };
}
Collapse
salaheddin12 profile image
Salah Eddine Ait Balkacm Author

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
  };
}
Collapse
edimeri profile image
Erkand Imeri

const factoryFunction = () => {
//I like a lot declaring factory functions through arrow functions
};

Collapse
salaheddin12 profile image
Salah Eddine Ait Balkacm Author

I usually prefer to use them as callback functions