JavaScript Objects

Hello Readers!
In this short article, let's discuss JavaScript Objects. Before diving into the Objects, I assume you have a basic knowledge of Javascript variables, Data Types and Functions. Let's Start!

Introduction

JavaScript Objects are used to define Real-world objects. A real-world object has two main attributes, Properties and Methods.

• Properties are variables that contain information about the object.
• Methods are functions that objects can do.

Syntax

• JavaScript objects are variables that contain many values as key-value pairs separated by a comma(,). On left we have Property and on right we have the corresponding Value.

  const object = {
     propertyName1 : value1,
     propertyName2 : value2
  };
  

• Usually, we declare JavaScript objects with the const keyword, that doesn't mean we cannot modify the properties of an object.
• Objects can contain variables of all data types including an array and functions. Let's have a look at the code below:

const pen = {
  brand : 'Reynolds',
  type : "Ball-point",
  colors : ['Blue', "Black", "Red"]
};

// Access Object property
console.log(pen.brand);     // Reynolds
console.log(pen["type"]);   // Ball-point

// Update property
pen.brand = "Parker";
console.log(pen["brand"]);  // Parker

// Add new properties
pen.style = "Click-type";

// Delete property
delete pen.type;

Properties can be Accessed and Modified by using either Dot or Bracket Notation. Now you know how to access or modify object properties.

Real-World Object

Let's explore this topic with a real-world example, a Mobile Phone.

A Mobile phone has Properties like Brand, Color, Display Type, Display Size, Battery Capacity and so on, and Functions like Screen Lock / Unlock, Volume Up / Down, Make Call, Open Applications, Capture Image and so on.

Let's see some basic object structure and operations.

const myPhone = {
  Brand : "Samsung",
  Colors : ["Matte Black", "White"],
  Power : false,
  Volume : 0,
  powerOn() {
    return this.Power = true;
  },
  volumeUp() {
    return this.Volume++;
  }
};

console.log(myPhone.Volume);      // 0
myPhone.volumeUp();               // calling function
console.log(myPhone.Volume);      // 1
console.log(myPhone.powerOn());   // true

'this' - keyword lets you access the variables inside the Object.
Our myPhone object has properties of data types string, number, boolean, array and functions.
As you can see, initially the Volume had the value 0 when I called the volumeUp function, the value incremented as per function definition. That's a short Introduction to JavaScript Objects.

That's it for this Article guys, I hope you guys found it useful especially beginners. If you did, give it a like and share this article, I would really appreciate it. Follow for more articles on Web Development.
Happy Coding!!!