Change the way you create an Object – Javascript Weekly
Tags: showdev, webdev, tutorial, beginners
Published: 2019-08-02 20:55:51

---
title: Change the way you create an Object – Javascript Weekly
published: true
description: Change the way you create an Object – Javascript Weekly
tags: showdev,webdev,tutorial,beginners
canonical_url: https://cloudnweb.dev/2019/08/change-the-way-you-create-an-object-javascript-weekly/
---
<!-- wp:paragraph -->
<p>In this article, we will see different ways to create an object in javascript. Change the way you create an Object - Javascript Weekly</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/promises-inside-a-loop-javascript-es6/">Promise inside a  loop - javascript weekly</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/prototypal-inheritance-javascript-weekly/">Prototypal Inheritance - Javascript weekly</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/understanding-closures-in-javascript-javascript-weekly/">Understanding Closures in Javascript</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/currying-in-javascript-javascript-weekly/">Currying in Javascript</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Object plays an important role in javascript ecosystem. we as a javascript developers creates a lots of objects while writing code. we will see some different way to do that</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Object as literal</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>this is a default way to create an object. creating an object with curly braces is the popular way in Object Creation</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const User = {
  name : "John",
  age : 25
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>object as literal allows to add the property to an object dynamically. For Example, if you want add a property to <strong>User </strong>object, you can do it like</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>User.address = "Country"</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In addition to that, you can also have a nested property inside the object literal</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const Company = {
  name : "Test",
  tax : {
      id : "12345"
   }
}</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>"new" Operator</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>you can also create an object with key word <strong>new</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function Document(name,category) {
  this.name = name;
   this.category = category
}

let salarydocument = new Document("salary","SALARY");

let insurance = new Document("insurance","INSURANCE");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>main advantage of using <strong>new </strong>operator is, you can use prototype to chain methods. <a href="https://cloudnweb.dev/2019/07/prototypal-inheritance-javascript-weekly/">Prototype Chain</a> is an important concept in using <strong>new </strong>keyword</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function Language(name,shortform) {
  this.name = name;
  this.shortform = shortform;
}

Language.prototype.getShortForm = function(){
   return this.shortform;
}

let english = new Language("english","en");</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Object.create() method</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Object create method allows you to create an object from an existing one.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For Example, Let's say that you have an object <strong>Message</strong>, to create an Object with the same property as <strong>Message</strong>. you can do something like</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let Message = {
  title : "Hola!",
  body : "Welcome"
}

let greeting = Object.create(Message);

console.log(greeting.title);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>you can also add property to <strong>greeting </strong>object</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let Message = {
  title : "Hola!",
  body : "Welcome"
}

let greeting = Object.create(Message,{type : {
  writable : true,
  enumerable : true,
  configurable : false,
  value : "Data"
}});

console.log(greeting.type);</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Using ES6 Class</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ES6 class is an another way to create objects in javascript</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>class User {

  constructor(name,age) {
     this.name = name;
     this.age = age;

  }

  getInfo() {
    console.log(`Hey ${this.name} Age : ${this.age}`);
  }
}

let admin = new User("admin",40);

admin.getInfo();</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>these are all the different ways to create an Object in javascript. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Change the way you create an Object - Javascript Weekly</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we will see more aboout Javascript in upcoming articles. I am a big fan of Eric Elliot's work on Javascript Stuffs. checkout his latest article.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58">Do React Hooks Replace Higher Order Components (HOCs)?</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until then Happy Coding :-)</p>
<!-- /wp:paragraph -->