# JavaScript Objects Explained: Properties, Methods & More

### ***What Is an*** `Object` ***in JavaScript, and How Can You Access*** `Properties` ***from an*** `Object`***?***

In JavaScript, an `object` is a fundamental ***data structure*** that allows you to store and organize `related` ***data*** and ***functionality***.

You can think of an `object` as a `container` that holds various pieces of ***information***, much like a ***filing cabinet*** holds different ***folders*** and ***documents***.

These pieces of information are called `properties`, and they consist of a `name (or key)` and a `value`.

```javascript
const exampleObject = {
  propertyName: value,
}
```

`Objects` are incredibly versatile and form the `backbone` of JavaScript. In fact, almost `everything` in JavaScript is an `object` or can be `treated` as one.

This includes `arrays`, `functions`, and even `primitive` ***data types*** like `strings` and `numbers` when used in certain ways.

This `object-centric` nature of ***JavaScript*** is one of the reasons it's such a flexible and powerful language. Let's look at how you can create an `object`:

```javascript
const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};
```

In this example, we've created an `object` called `person` with three properties: `name`, `age`, and `city`. Each property has a `name` and a `value`, separated by a `colon`. This is `object literal`.

![](https://cdn.hashnode.com/uploads/covers/695114b01f48b622b5631972/f6ac12d5-87f9-467e-81c8-dbaecb76158f.jpg align="center")

### ***How to access properties of object***

Now, let's explore how you can `access` these properties. There are `two` main ways to access `object` properties in JavaScript: `dot notation` and `bracket notation`.

### ***Dot notation***

`Dot notation` is the most common and straightforward way to access object properties. Here is the basic syntax for `dot notation`:

```javascript
objectName.propertyName
```

Here's how you would use dot notation with our `person` object:

```javascript
const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};

console.log(person.name);  // Alice
console.log(person.age);   // 30
```

`Dot notation` is concise and easy to read, making it the preferred choice when you know the `exact` name of the `property` you want to access and that `name` is a valid JavaScript `identifier` (meaning it doesn't start with a number and doesn't contain special characters or spaces).

### ***Bracket notation***

`Bracket notation`, on the other hand, allows you to access object properties using a `string` inside square brackets. Here's how you would use bracket notation:

```javascript
const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};

console.log(person["name"]); // Alice
console.log(person["age"]); //  30
```

`Bracket notation` is more flexible than `dot notation` because it allows you to use `property` names that aren't valid JavaScript `identifiers`. For example, if you had a property name with `spaces` or that starts with a `number`, you'd need to use `bracket` `notation`:

```javascript
const oddObject = {
  "1stProperty": "Hello",
  "property with spaces": "World"
};

console.log(oddObject["1stProperty"]);  // Hello
console.log(oddObject["property with spaces"]);  // World
```

Another advantage of `bracket notation` is that it allows you to use `variables` to access properties `dynamically`:

```javascript
const person = {
  name: "Alice",
  age: 30,
  city: "Wonderland"
};

let propertyName = "city";
console.log(person[propertyName]); // Wonderland
```

This flexibility makes `bracket notation` particularly useful when you don't know the `exact` property name at the time you're writing the code, or when you're working with property names that come from `user` input or some other `dynamic` source.

It's worth noting that `objects` in JavaScript are incredibly powerful and versatile. They can contain not just `simple` values like `strings` and `numbers`, but also `arrays`, or other `objects`.

![](https://cdn.hashnode.com/uploads/covers/695114b01f48b622b5631972/6a91654a-215a-41a5-bd50-2005e540144d.jpg align="center")

### ***How Can You*** `Remove` ***Properties from an*** `Object`***?***

There are several ways to `remove` properties from an `object`, with the `delete` operator being the most straightforward and commonly used method.

When you use `delete`, it `removes` the `selected` property from the `object`. Here's an example of how to use the `delete` operator:

```javascript
const person = {
  name: "Alice",
  age: 30,
  job: "Engineer"
};

delete person.job;

console.log(person.job); // undefined
```

In this example, we start with a `person` object that has three properties: `name`, `age`, and `job`. Then, we use the `delete` operator to `remove` the `job` property. After the `deletion`, the `person` object no longer has the `job` property.

Another way to remove properties is by using `destructuring` assignment with `rest` parameters. This approach doesn't actually `delete` the property, but it creates a `new` object without the specified properties:

```javascript
const person = {
  name: "Bob",
  age: 25,
  job: "Designer",
  city: "New York"
};

const { job, city, ...remainingProperties } = person;

// { name: "Bob", age: 25 }
console.log(remainingProperties);
```

In this example, we use `destructuring` to extract `job` and `city` from the `person` object, and collect the remaining properties into a `new` object called `remainingProperties`. This creates a `new` object without the `job` and `city` properties.

![](https://cdn.hashnode.com/uploads/covers/695114b01f48b622b5631972/8530c7eb-8eb5-47db-af90-590203427384.jpg align="center")

### ***How to Check If an*** `Object Has a Property`***?***

### ***hasOwnProperty() method***

In JavaScript, there are several ways to check if an `object` has a specific `property`. Understanding these methods is important for working effectively with `objects`, especially when you're dealing with data from `external` sources or when you need to ensure `certain` properties `exist` before using them.

We'll explore some common approaches: the `hasOwnProperty()` method, the `Object.hasOwn()` method, the `in` operator, and checking against `undefined`.

Let's start with the `hasOwnProperty()` method. This method returns a `boolean` indicating whether the object has the specified property as its `own` property. Here's an example:

```javascript
const person = {
  name: "Alice",
  age: 30
};

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("job")); // false
```

In this example, we have an object called `person` with two properties: `name` and `age`. To check if `name` is a property in the `person` object, we use the `hasOwnProperty()` method. Since `name` is a property, it will return `true`. But when we use the `hasOwnProperty()` to check if `job` is a property, it will return `false` because it does not exist in the object.

### ***Object.hasOwn() method***

`Object.hasOwn()` is the modern, recommended way to check if an object has a property as its own (not inherited). Think of it as an upgraded, safer version of `hasOwnProperty()`. The syntax is `Object.hasOwn(object, propertyName)` — you pass the `object` as the `first` argument and the property name as the `second`.

Here is a basic example:

```javascript
const person = {
  name: "Alice",
  age: 30
};

console.log(Object.hasOwn(person, "name")); // true
console.log(Object.hasOwn(person, "job")); // false
```

In this example, `Object.hasOwn(person, "name")` returns `true` because `name` exists directly on the `person` object. `Object.hasOwn(person, "job")` returns `false` because `job` was never added to the object.

![](https://cdn.hashnode.com/uploads/covers/695114b01f48b622b5631972/acb9166c-0231-4ea0-8800-261a5e2e6bee.jpg align="center")

### ***Alert:***

A very important thing to understand is that `Object.hasOwn()` only checks if the property **exists** - it does not care about the `property's value`. This means it still returns `true` even when the value is `0`, `false`, `null`, or `undefined`:

```javascript
const user = {
  username: "coder123",
  score: 0,
  isActive: false,
  nickname: null
};

// Object.hasOwn() correctly reports these all exist
console.log(Object.hasOwn(user, "score"));    // true  (value is 0, but property exists)
console.log(Object.hasOwn(user, "isActive")); // true  (value is false, but property exists)
console.log(Object.hasOwn(user, "nickname")); // true  (value is null, but property exists)
console.log(Object.hasOwn(user, "email"));   // false (property was never added)

// Danger! Using if() directly gives wrong results for falsy values
if (user.score) {
  console.log("Has score"); // This will NOT print even though score exists!
}

// Safe! Object.hasOwn() gives correct result
if (Object.hasOwn(user, "score")) {
  console.log("Has score:", user.score); // Has score: 0
}
```

![](https://cdn.hashnode.com/uploads/covers/695114b01f48b622b5631972/0ed435a3-8669-4dbc-bf36-b4cc48002ef5.jpg align="center")

### ***in operator***

Another way to check for the `existence` of a property in an `object` is to use the `in` operator. Like `hasOwnProperty()`, the `in` operator will return `true` if the property `exists` on the object. Here's how you can use it:

```javascript
const person = {
  name: "Bob",
  age: 25
};
console.log("name" in person);  // true
```

In this example, `"name" in person` returns `true` because `name` is a property of `person`.

The third method involves checking if a property is `undefined`. This approach can be useful, but it has some limitations. Here's an example:

```javascript
const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

console.log(car.brand !== undefined); // true
console.log(car.color !== undefined); // false
```

In this code, we check if `car.brand` and `car.color` are not `undefined`. This works because accessing a non-existent property on an object returns `undefined`. However, this method can give false negatives if a property explicitly has the value `undefined`.

![](https://cdn.hashnode.com/uploads/covers/695114b01f48b622b5631972/166c2cc1-3195-4f9d-990b-ff6a185727c6.jpg align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text"><strong>Once you understand how JavaScript objects work, you’re not just storing data, you’re learning how JavaScript structures and manages it.</strong></div>
</div>