object(JavaScript Variable data type)

English version.

The object type is one of the basic data types in JavaScript and represents a complex data structure that consists of key-value pairs.

The object type in JavaScript is also known as an associative array or a hashmap, but it offers much more flexibility and functionality than traditional associative arrays or hashmaps in other programming languages.

Create

Objects are enclosed in curly braces {} and defined in the following format:

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

Object keys must be strings, numbers, or symbols, and values can be any JavaScript data type. Keys and values are separated by a colon :, and multiple pairs are separated by commas ,.

Empty object

There are two ways to create an empty object in JavaScript:

Using curly braces {}:

const emptyObject = {};

Using the Object constructor:

const emptyObject = new Object();

Both methods create an empty object.

Retrieve element.

To retrieve values from JavaScript objects, you can use dot notation or bracket notation.

For example, let's say you have an object like this:

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

To retrieve the value of the name property from this object using dot notation, you would write:

console.log(myObject.name); // 'Alice'

Alternatively, you can use bracket notation:

console.log(myObject['name']); // 'Alice'

Note that when using bracket notation, you need to enclose the property name in quotes. You can also use a variable to access the property:

const myKey = 'name';
console.log(myObject[myKey]); // 'Alice'

It's also important to check for the existence of a property, as accessing a non-existent property will return undefined.

console.log(myObject.unknown); // undefined

All keys

To loop through all the keys in an object in JavaScript, you can use the Object.keys() method. This method returns an array of the names of the enumerable properties of an object.

Here's an example:

const person = {
  name: 'John',
  age: 30,
  address: '123 Main St'
};

const keys = Object.keys(person);

for (let i = 0; i < keys.length; i++) {
  console.log(keys[i]); // "name", "age", "address"
}

In this example, we use the Object.keys() method to get an array of keys from the person object and then loop through the array using a for loop to log each key to the console. Note that the Object.keys() method does not include properties in the prototype chain.

All elements

Here's an example of looping through an object and accidentally including properties in the prototype chain:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello!');
};

const alice = new Person('Alice', 30);

for (const key in alice) {
  console.log(`${key}: ${alice[key]}`);
}

In this example, we create a new object with the Person constructor and define the sayHello method on its prototype. We then loop through the properties of the alice object using a for...in loop. This loop retrieves the name and age properties, as well as the sayHello method. However, the sayHello method is not actually defined on the alice object, so we're retrieving an unintended property.

To prevent including properties in the prototype chain, we can use the hasOwnProperty() method. This method checks if an object has a specified property. Here's the updated example using hasOwnProperty():

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello!');
};

const alice = new Person('Alice', 30);

In this updated example, we add an if statement to check if alice has the specified property using hasOwnProperty(). This prevents unintended properties from being retrieved from the prototype chain.

Property existence checks.

in operator

You can use the in operator to check if a property exists on an object. It returns true if the property exists and false if it doesn't.

For example, consider the following object:

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

If the object has a name property:

console.log('name' in myObject); // true

If the object doesn't have the specified property:

console.log('unknown' in myObject); // false

hasOwnProperty() method

You can use the hasOwnProperty() method to check if a property exists on an object and if it's a property of the object itself. It returns true if the property exists and is a property of the object, and false if it doesn't.

For example, consider the following object:

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

If the object has a name property:

console.log(myObject.hasOwnProperty('name')); // true

If the object doesn't have the specified property:

console.log(myObject.hasOwnProperty('unknown')); // false

Get the number of elements. 

const myObject = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

const objectLength = Object.keys(myObject).length;

console.log(objectLength); // 3

In this example, we're using the Object.keys() method to get an array of the object's property names, and then using the length property of that array to get the number of elements in the array, which corresponds to the number of properties in the object.

Edit element.

object can be modified by adding, removing, and changing elements.

Add and Update

In JavaScript, objects are a data type that can hold key-value pairs. You can add or modify data to an object by setting a new value to its property.

There are several ways to set a new value to an object's property, and here are some of the most commonly used methods:

Using dot notation:

You can set a new value to an object's property using dot notation by separating the property name with a dot. For example, the following code sets a value of 30 to the age property of the person object:

let person = {name: "John"};
person.age = 30;

Using bracket notation:

You can set a new value to an object's property using bracket notation by enclosing the property name with quotes. For example, the following code sets a value of 30 to the age property of the person object:

let person = {name: "John"};
person['age'] = 30;

Using the Object.assign() method:

You can use the Object.assign() method to add or modify properties of an existing object. The following code adds an age property and modifies the existing name property to "Jane" of the person object:

let person = {name: "John"};
Object.assign(person, {age: 30, name: "Jane"});

Delete

One element

Using the delete operator

In JavaScript, you can use the delete operator to remove a property from an object. Here is an example that removes the age property from the person object:

let person = { name: "John", age: 30 };
delete person.age;

In the code above, the delete operator is used to remove the age property from the person object. This operator is used to remove properties from an object, and once removed, the property cannot be accessed anymore.

However, it's important to note that the delete operator is only used to remove properties from an object, and it cannot be used to remove the object itself, variables, functions, or other JavaScript constructs. The delete operator is specifically designed to remove properties from an object.

Using the Object.keys() method

You can use the Object.keys() method in JavaScript to remove a property from an object. The Object.keys() method returns an array of an object's property names, which can be used to remove a property from the object.

Here is an example that removes the age property from the person object using the Object.keys() method

let person = { name: "John", age: 30 };
let keys = Object.keys(person);
delete person[keys[1]];

In the code above, the Object.keys() method is used to get an array of the property names of the person object. The delete operator is then used to remove the age property from the person object, using the index of the age property in the keys array.

Using the Object.keys() method, you can get an array of an object's property names and then use that array to remove a specific property from the object.

Using the Reflect.deleteProperty() method

You can use the Reflect.deleteProperty() method in JavaScript to remove a property from an object. This method takes the object and the property name to delete as arguments.

Here is an example that removes the age property from the person object using the Reflect.deleteProperty() method

let person = { name: "John", age: 30 };
Reflect.deleteProperty(person, "age");

In the code above, the Reflect.deleteProperty() method is used to remove the age property from the person object. This method is recommended for removing properties from an object because it returns true if the deletion was successful, unlike the delete operator.

Additionally, when working with Proxy objects, you must use the Reflect.deleteProperty() method instead of the delete operator.

All elements

for...in loop

Here's an example of using a for...in loop to delete all properties of an object:

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

for (let prop in obj) {
  delete obj[prop];
}

console.log(obj);

In this example, we're using a for...in loop to delete all properties of the object obj. The delete operator is used to remove the specified property. With this method, the object itself is not deleted, so it can be reused.

Object.keys()

Here's an example of using the Object.keys() method to delete all properties of an object:

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

Object.keys(obj).forEach(prop => {
  delete obj[prop];
});

In this example, we're using the Object.keys() method to get all the properties of the object obj, and using the forEach() method to delete each property. With this method, the object itself is not deleted, so it can be reused.

These methods are convenient ways to delete all properties of a JavaScript object. However, when deleting properties using a for...in loop or the Object.keys() method, it's important to be cautious if the object has a prototype chain. Properties in the prototype chain can also be deleted, so it's recommended to use Object.hasOwnProperty() to only delete properties that the object itself has.

Object.hasOwnProperty() method

The Object.hasOwnProperty() method returns true if the specified object has the specified property as its own property. That is, it returns true if the property is a property of the object itself, and false if the property is a property of the prototype chain. By using Object.hasOwnProperty(), you can delete only the properties that the object itself has.

Here's an example of using Object.hasOwnProperty() to delete only the properties that the object itself has:

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    delete obj[prop];
  }
}

console.log(obj);

In this example, we're using a for...in loop to get all properties of the object obj, and using the Object.hasOwnProperty() method to delete only the properties that the object itself has. By using this method, you can avoid deleting properties in the prototype chain.

By using the Object.hasOwnProperty() method, you can delete only the properties that the object itself has.

Integrate

Spread syntax

The spread syntax is used to expand elements of an array or object into a new array or object.

Here's an example of using the object spread syntax to integrate multiple object-type variables:

const obj1 = {
  prop1: 'value1',
  prop2: 'value2'
};

const obj2 = {
  prop3: 'value3',
  prop4: 'value4'
};

const combinedObj = {...obj1, ...obj2};

console.log(combinedObj);

In this example, we're integrating the objects obj1 and obj2 to create a new object called combinedObj. combinedObj contains all the properties of obj1 and obj2.

Object.assign() method

Here's an example of using Object.assign() to integrate multiple object-type variables:

const obj1 = {
  prop1: 'value1',
  prop2: 'value2'
};

const obj2 = {
  prop3: 'value3',
  prop4: 'value4'
};

const combinedObj = Object.assign({}, obj1, obj2);

console.log(combinedObj);

---

Links

JavaScript Articles

JavaScript

See more