JavaScript and objects

introduction

What's an object?

Think about objects in the non-programming sense, like a pen. A pen can have different ink colors, be manufactured by different people, have a different tip, and many other properties.

Similarly, an object in programming is an entity that has properties. Each property defines a characteristic of the object. A property can be a piece of information associated with the object (the color of the pen) or an action (the pen's ability to write).

What does this have to do with code?

Object-oriented programming (OOP for short) is a way to write programs using objects. When using OOP, you write, create, and modify objects, and the objects make up your program.

OOP changes the way a program is written and organized. So far, you've been writing function-based code, sometimes called procedural programming. Now let's discover how to write object-oriented code.

JavaScript and objects

Like many other languages, JavaScript supports programming with objects. It provides a number of predefined objects while also letting you create your own.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Creating an object

Here is the JavaScript representation of a blue Bic ballpoint pen.

const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic"
};

As stated earlier, a JavaScript object can be created by simply setting its properties within a pair of curly braces: {...}. Each property is a key/value pair. This is called an object literal.

W> The semicolon ; after the closing brace is optional, but it's safer to add it anyway.

The above code defines a variable named pen whose value is an object: you can therefore say pen is an object. This object has three properties: type, color and brand. Each property has a name and a value and is followed by a comma , (except the last one).

Accessing an object's properties

After creating an object, you can access the value of its properties using dot notation such as myObject.myProperty.

const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic"
};

console.log(pen.type);  // "ballpoint"
console.log(pen.color); // "blue"
console.log(pen.brand); // "Bic

Accessing an object's property is an expression that produces a value. Such an expression can be included in more complex ones. For example, here's how to show our pen properties in one statement.

const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic"
};

console.log(`I write with a ${pen.color} ${pen.brand} ${pen.type} pen`);

Modifying an object

Once an object is created, you can change the value of its properties with the syntax myObject.myProperty = newValue.

const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic"
};

pen.color = "red"; // Modify the pen color property

console.log(`I write with a ${pen.color} ${pen.brand} ${pen.type} pen`);

JavaScript even offers the ability to dynamically add new properties to an already created object.

const pen = {
  type: "ballpoint",
  color: "blue",
  brand: "Bic"
};

pen.price = "2.5"; // Set the pen price property

console.log(`My pen costs ${pen.price}`);

In our simpler example, a character will have three attributes:

her name,

her health (number of life points),

her strength.

A naive example

Let me introduce you to Aurora, our first RPG character.

const aurora = {

name: "Aurora",

health: 150,

strength: 25

};

The aurora object has three properties: name, health and strength.

I> As you can see, you can assign numbers, strings, and even other objects to properties!

Aurora is about to start a series of great adventures, some of which will update her attributes. Check out the following example.

const aurora = {

name: "Aurora",

health: 150,

strength: 25

};

console.log(`${aurora.name} has ${aurora.health} health points and ${aurora.strength} as strength`);

// Aurora is harmed by an arrow

aurora.health -= 20;

// Aurora equips a strength necklace

aurora.strength += 10;

console.log(`${aurora.name} has ${aurora.health} health points and ${aurora.strength} as strength`);

Introducing methods

In the above code, we had to write lengthy console.log statements each time to show our character state. There's a cleaner way to accomplish this.

Adding a method to an object

Observe the following example.

const aurora = {
  name: "Aurora",
  health: 150,
  strength: 25
};

// Return the character description
function describe(character) {
  return `${character.name} has ${character.health} health points and ${character.strength} as strength`;
}

console.log(describe(aurora));

The describe() function takes an object as a parameter. It accesses that object's properties to create a description string.

Below is an alternative approach, using a describe() property inside the object.

const aurora = {
  name: "Aurora",
  health: 150,
  strength: 25,

  // Return the character description
  describe() {
    return `${this.name} has ${this.health} health points and ${this
      .strength} as strength`;
  }
};

console.log(aurora.describe());

Now our object has a new property available to it: describe(). The value of this property is a function that returns a textual description of the object. The execution result is exactly the same as before.

An object property whose value is a function is called a method. Methods are used to define actions for an object. A method adds some behavior to an object.

Calling a method on an object

Let's look at the last line of our previous example.

console.log(aurora.describe());

To show the character description, we use the aurora.describe() expression instead of describe(aurora). It makes a crucial difference:

describe(aurora) calls the describe() function with the aurora object as an argument. The function is external to the object. This is an example of procedural programming.

aurora.describe() calls the describe() function on the aurora object. The function is one of the object's properties: it is a method. This is an example of object-oriented programming.

To call a method named myMethod() on an object myObject, the syntax is myObject.myMethod().

W> Remember the parentheses, even if empty, when calling a method!

The this keyword

Now look closely at the body of the describe() method on our object.

const aurora = {
  name: "Aurora",
  health: 150,
  strength: 25,

  // Return the character description
  describe() {
    return `${this.name} has ${this.health} health points and ${this
      .strength} as strength`;
  }
};

You see a new keyword: this. This is automatically set by JavaScript inside a method and represents the object on which the method was called.

The describe() method doesn't take any parameters. It uses this to access the properties of the object on which it is called.

 From  Java Script and Object thejsway book