Objects are a really important and huge part of JavaScript. Almost, in JS, everything works on the principle of an object. object consists of properties and methods. Properties are identified as key-value pairs, while methods are functions passed to the object. Mastering object manipulation is a must if you want to be a skillful JavaScript developer.
How to create an object?
There are several ways to create an object in JavaScript. The first way is by using {...}. The second way is by using object constructor syntax new Object(). Since ES6 we can use object literals to create an object, which are basically shorthand for creating an object.
//The first way of creating Object in JavaScript
const obj = {
id: 1,
name: "John",
username: "Doe"
}
//The second way of creating Object in
//JavaScript using Object constructor.
function Obj(id, name, username) {
this.id;
this.name;
this.username;
}
const user = new Obj(1, 'John', 'Doe');
//The third way of creating object in JavaScript
//is by using ES6 object literalls
let id = 1;
let name = 'John';
let username = 'Doe';
const obj = {
id,
name,
username
}
Object data manipulation
Object data manipulation is pretty easy once you learn few important things.
Accessing data
If you want to access object properties, or you want to change values, the easiest way to do this is by using either dot notation or square bracket notation.
Dot notation is used more often since it is more readable and easier to use. Dot notation has the following form: objectName.propertyName. Square bracket notation has the following form: objectName['propertyName']. If you want to use a variable as a property name then you use square bracket notation without quotes.
const obj = {
id: 1,
name: 'John',
username: 'Doe'
}
//Using dot notation
console.log(obj.id);
//Result:
// 1
//Using bracket notation
console.log(obj['name']);
//Result:
//John
Object.keys()
Object.keys() is a JavaScript object method that returns an array of object keys, or object’s own property names.
let obj = {
id: 1,
name: 'John',
username: 'Doe'
}
console.log(Object.keys(obj));
//Result:
//(3) ['id', 'name', 'username']
Object.values()
Similarly to Object.keys(), Object.values() is a JavaScript object method that returns an array of object values, or object’s own property values.
let obj = {
id: 1,
name: 'John',
username: 'Doe'
}
console.log(Object.values(obj));
//Result:
//(3) [1, 'John', 'Doe']
How to add data to an object?
Adding new key-value pairs to an existing object is easy. We can do that by using dot notation, or square bracket notation.
let obj = {
id: 1,
name: 'John',
username: 'Doe'
}
//Using dot notation
obj.items = 10;
console.log(obj);
//Result:
//{id: 1, name: 'John', username: 'Doe', items: 10}
//Using brackets notation
obj['type'] = 'student';
console.log(obj)
//Result:
//{id: 1, name: 'John', username: 'Doe', items: 10, type: 'student'}
How to change values in an object
Sometimes we just need to change some value in an object. We do that, same as with adding new data, by using dot notation or square bracket notation.
let obj = {
id: 1,
name: 'John',
username: 'Doe'
}
//Using dot notation
obj.id = 10;
console.log(obj);
//Result:
//{id: 10, name: 'John', username: 'Doe'}
//Using brackets notation
obj['name'] = 'Jany';
console.log(obj)
//Result:
//{id: 10, name: 'Jany', username: 'Doe'}
How to delete values in an object
There is only one way of deleting data in an object. It’s by using keyword delete. If we use undefined or null then data is not deleted, instead, the key remains but the value changes.
let obj = {
id: 1,
name: "John",
username: "Doe"
}
obj.name = null;
console.log(obj);
//Result:
//{id: 1, name: null, username: 'Doe'}
delete obj.name;
console.log(obj);
//Result:
//{id: 1, username: 'Doe'}
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to check if JavaScript object is empty?