Objects : creation and manipulation in javascript

In JavaScript, objects are the most important and widely used data type and is used to store and manipulate collections of key-value pairs.

Objects can be created using the :
1) Object literal syntax {},
2) The new keyword with a constructor function, or
3) by extending existing object prototypes.

Here's an example of creating an object using the object literal syntax: 

const personObj = {
  name: 'Rui',
  age: 33,
  city: 'Washington',
  country: 'USA'
};


In this example, we create an object named person with properties such as name, age, and city. Each property consists of a key-value pair, where the key is a string (or symbol in ES6+) and the value can be of any data type, including other objects, functions, or arrays.

To access the properties of an object, you can use dot notation (object.property) or square bracket notation ( object['property'] ): 

console.log(personObj.name);  // Output: Rui
console.log(personObj['age']); // Output: 33


You can dynamically add or modify an object's properties as well: 

personObj.phone = '098765987';
personObj.surname = "Goncalves";

console.log(personObj.phone); // Output: "098765987"
console.log(personObj.surname);    // Output: "Goncalves"


If you want to remove a property from an object, use the delete keyword: 

delete personObj.country;
console.log(personObj.country); // Output: undefined


Additionally, JavaScript comes with a wide range of built-in functions and methods for altering objects. The object is a list of key-value pairs that are separated by colons(:), so please be mindful of that.
Typical examples include:

Object.keys(obj) :
Each key for the object is returned in an array by the function Object.keys(obj). 

const personObj = {
  name: 'Rui',
  age: 30,
  occupation: 'Developer'
};

const keys = Object.keys(personObj);
console.log(keys); // Output: ['name', 'age', 'occupation']


Object.values(obj) :
An array holding a list of all the values for the object is returned by the function Object.values(obj). 

const personObj = {
  name: 'Rui',
  age: 30,
  occupation: 'Developer'
};

const values = Object.values(person);
console.log(values); // Output: ['Rui', 30, 'Developer']


Object.entries(obj) :
The function Object.entries(obj) returns a key-value pair in an array of arrays. 

const person = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};

const entries = Object.entries(person);
console.log(entries);
// Output: [['name', 'John'], ['age', 30], ['occupation', 'Developer']]


Object.assign(target, ...sources) :
You can copy properties from one or more source objects to a destination object using the "assign" method. 

const target = {};
const source = { name: 'John', age: 30 };

Object.assign(target, source);

console.log(target); // Output: { name: 'John', age: 30 }


Object.freeze(obj) :
Object.freeze(obj) prevents the addition, modification, or removal of an object's properties.

Object.seal(obj) :
Using the Object.seal(obj) method, you can seal an object to stop alterations and the addition of new attributes.

Object.create(proto, [propertiesObject]) :
Calling Object.create(proto, [propertiesObject]) creates a new object with the provided prototype object and any additional optional properties.


These are just a few examples of how objects can be created and manipulated in JavaScript. Objects are versatile and powerful in JavaScript, allowing you to represent complex data structures and build robust applications.

Objects destructuring

Object destructuring means breaking the object into its individual properties and objects specific value can be accessed by its corresponding key variable. It looks something like this. 

// case 1
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const { name, age, city } = person;  // destructuring

console.log(name); // Output: John
console.log(age); // Output: 30
console.log(city); // Output: New York

// case 2: destructuring in function arguments
function printPersonDetails({ name, age, city }) { // destructuring in function arguments
  console.log(name);  //John
  console.log(age);   //30
  console.log(age);   // New York
}

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

printPersonDetails(person);
PrevNext