JavaScript Objects – Basics

Full article can be found here.

A JavaScript object is a variable which can contain many values. These values can be represented using name:value pairs (name and value separated by a colon). These named values are either referred to as properties or methods, depending on what's stored in them.

OBJECT PROPERTIES

Most objects contains at least one property. Properties describes the characteristics of an object. All properties are in name:value pairs. Example:

model:"BMW"

Here, model is the name, and "BMW" is the value. Together, they create a name:pair value.

Accessing object properties

There are two ways to access object properties:

Dot notation

A property is accessed by giving the object's name, followed by a period ( . ), then followed by the property name

objectName.propertyName

Bracket notation

The name of the object is given, followed by a pair of squared brackets ( [ ] ), which holds the string for the name of the property you wish to access.

objectName["propertyName"]

OBJECT METHODS

Objects may contain methods inside them. Consider methods as actions that can be performed on an object. Methods are really just functions stored inside a property.

drive: function(){
  console.log("Car is driving");
}

Accessing object methods

Here's how you'd access an object method

objectName.methodName()

With some of the basics covered, we are now ready to create objects, and use their properties and methods.

OBJECT CREATION

1. Object literal

Now let's dive into creating objects. There are a couple of ways that you can create objects in JavaScript.

A quick and simple way to create a new object is using the object literal syntax.

const car = {};

this will create a new empty object called car. You can also define properties and methods when using object literal syntax.

const car = {
  model: "BMW",
  color:"red",
  drive: function(){
    console.log("Car is driving");
  }
};

Now we have a new object, car with the properties color, and model, and a drive() method.

2. New Operator or Constructor

Another way to create an object is by using a constructor function. Calling a function with the new keyword results in the function acting as a constructor. The function will then return an object which will contain the properties and methods declared in the function.

function Car(mode, color){
  this.model = model;
  this.color = color;
  this.drive = function(){
    console.log("Car is driving");
  }
}
const car = new Car("Porsche", "black");

Creating objects this way has two steps:

1. Create a function which will define the object
2. Create an instance of on object using the new keyword

3. Object.create Method

The Object.create() method allows you to specify the prototype object of the object you're creating. The Object.create() methods accepts two arguments, proto and propertiesObject. The propertiesObject argument is optional.  We'll take a closer look at it further down.

const Car = {
  model:'BMW',
  color:'red',
  drive(){
    console.log('Car is driving')
  }
};

We can then use this Car object as the prototype to create more objects. Here's an example:

const secondCar = Object.create(Car);
console.log(secondCar.color); // red

The Car object is the prototype for the secondCar object.

We can add more properties to secondCar. This is done by passing a second argument, propertiesObject.

const secondCar = Object.create(Car, {
  year: {
    value: 2020,
    writable: true
  },
  preOwned: {value:false},
});
console.log(secondCar.year); // 2020

Here we are passing a second argument, propertiesObject, which is an object. This object contains keys that represents the name of properties to be defined. The values for these keys are objects describing those properties. You can read more here.

4. Class

A class is a type of function. However, instead of using the keyword function to initiate it, we use class. Properties of a class are assigned in the constructor() method.

class Car {
  constructor(model, color) {
    this.model = model;
    this.color = color;
  }

//method
 drive(){
    console.log('Car is driving')
 }
}

We can now use the Car class to create new objects. Here's an example:

const car = new Car("BMW", "red");

We can access the properties and methods like normal:

console.log(car.color) // red
car.drive() // car is driving

Objects are an important part of the JavaScript programming language. Here, we've covered some of the basics, namely object properties, methods, and object creation in JavaScript.

Hope you found this article helpful. Until next time, think, learn, create, repeat.