JavaScript Objects - The Beginners Guide To Javascript(Part 5)

Intro to JavaScript Objects

JavaScript is a powerful programming language that allows developers to create dynamic and interactive web pages. One of the key features of JavaScript is its ability to work with objects. In this post, we'll take a look at what objects are, how to create them, and how to work with their properties.

The What and Why of Objects

In JavaScript, an object is a collection of properties that describe a particular entity. These properties can be anything from simple values like strings and numbers, to more complex data types like arrays and even other objects. Objects are used to represent real-world entities like people, cars, and buildings, as well as abstract concepts like time and money.

Creating Objects

There are several ways to create objects in JavaScript. The most common way is to use the object literal notation, which looks like this:

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

This creates a new object called person with three properties: name, age, and city. The values of these properties are "John", 30, and "New York", respectively.

Adding Properties with Dot Notation

You can add properties to an existing object using dot notation. For example, let's say we want to add a job property to our person object:

person.job = "Developer";

This adds a new property called job to the person object with the value "Developer".

Adding/Updating Properties

You can also add or update properties using square bracket notation. For example, let's say we want to add a hobby property to our person object:

person["hobby"] = "Reading";

This adds a new property called hobby to the person object with the value "Reading". If the property already exists, this syntax will update its value.

Accessing Properties with Square Bracket Notation

You can access an object's properties using either dot notation or square bracket notation. For example, to access the name property of our person object using dot notation, we would do this:

console.log(person.name); // Output: John

To access the same property using square bracket notation, we would do this:

console.log(person["name"]); // Output: John

Checking if an Object has a Property

You can check if an object has a particular property using the hasOwnProperty() method. For example, to check if our person object has a job property, we would do this:

console.log(person.hasOwnProperty("job")); // Output: true

Deleting a Property

You can delete a property from an object using the delete operator. For example, to delete the hobby property from our person object, we would do this:

delete person.hobby;

Iterating Over an Object's Properties

You can iterate over an object's properties using a for...in loop. For example, let's say we want to log all the properties of our person object:

for (let prop in person) {
  console.log(prop + ": " + person[prop]);
}

This will output:

name: John
age: 30
city: New York
job: Developer

Property Shorthand Syntax

If you're creating a new object and the property names are the same as the variable names, you can use the shorthand syntax. For example:

let name = "Jane";
let age = 25;
let city = "Los Angeles";

let person = { name, age, city };

This creates a new object called person with three properties: name, age, and city. The values of these properties are "Jane", 25, and "Los Angeles", respectively.

Methods/Functions as Properties

In addition to simple values, an object's properties can also be functions. These functions are known as methods. For example, let's say we want to add a greet method to our person object:

let person = {
  name: "John",
  age: 30,
  city: "New York",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

This adds a new property called greet to the person object, which is a function that logs a greeting message to the console.

How Variables Hold Values or Reference Objects

In JavaScript, variables can hold either simple values or reference objects. Simple values include things like strings, numbers, and booleans. Reference objects include things like arrays and objects. When you assign a reference object to a variable, the variable actually holds a reference to the object in memory, rather than the object itself. This means that if you change a property of the object, any variables that reference that object will see the change.

Bonus Material

Objects are a fundamental part of JavaScript programming, and there's a lot more to learn about them. Here are a few more topics to explore:

• Object constructors: a way to create multiple objects with the same properties and methods.
• Object prototypes: a way to add properties and methods to all objects of a certain type.
• Object destructuring: a way to extract properties from an object into separate variables.
• Object.assign(): a way to merge two or more objects into a single object.

In conclusion, JavaScript objects are a powerful tool for representing real-world entities and abstract concepts in your code. By understanding how to create, update, and access object properties, you can create more dynamic and interactive applications. So go forth and create some awesome objects!