JavaScript Objects - The Beginners Guide To Javascript(Part 5)
Tags: javascript, beginners, tutorial, programming
Published: 2023-04-19 15:46:23

## 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:

```javascript
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:

```javascript
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:

```javascript
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:

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

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

```javascript
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:

```javascript
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:

```javascript
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:

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

This will output:

```javascript
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:

```javascript
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:

```javascript
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!