Arrays & Objects- Working with data

What are Objects?

To start let us answer what an Object means in layman terms. In the real-world, things which you can materialize around you are known as objects. You can touch those objects, and those objects has some features and attributes linked to them.

E.g. A TV remote is an object, it has some attributes like buttons, color and it has some functionalities like turning on/off the TV or changing the volume.

JavaScript objects are similar, where they represent something and have some information stored about it.

Representing Objects in JS

Objects in JavaScript are usually donated under {} (curly braces). It is used to store various keyed collections and more complex entities.

//Creating an Object
const tvRemote = {
  color: "black",
  buttons: 20,
  brand: "Sony",
  turnOn: function () {
    console.log("TV is now ON");
  },
  volumeUp: function () {
    console.log("Volume increased");
  }
};

Accessing Data from an Object

You can use dot notation or bracket notation to access object data.

console.log(tvRemote.color);       // "black"
console.log(tvRemote["brand"]);   // "Sony"
tvRemote.turnOn();                // "TV is now ON"

Updating Object Properties

tvRemote.color = "grey";         // update
tvRemote.battery = "AA";         // add new property

This was some basic workaround Objects, now let us focus on Arrays. In Arrays part 1, we did storytelling and understood the different functionalities of Arrays, we can have a quick summary here.

What are Arrays?

In layman terms an array is like a box that holds your favorite snacks — each item has its own spot, and you can grab them by number.

Declaring and Accessing Elements in an array

//Declaring element
const fruits = ["apple", "banana", "mango"];

//Accessing element
console.log(fruits[1]); // "banana"

Looping Arrays and Objects

There are different ways to loop over the elements in an array such as:

let arr=[1,2,3,4,5]

//using the for loop
for(let i=0 ;i<arr.length; i++){
console.log(arr[i]) 
}

//using for each loop
arr.forEach((element) => console.log(element));

//using for-of loop
for(let element of arr){
console.log(element)
}

//using map
arr.map((element)=>console.log(element))

//all the above loops will print the element of the arrays

The different ways to loop over elements of an object are:

const person = {
  nationality: "Indian"
};

const user = Object.create(person); // user inherits from person
user.name = "Saurav";
user.age = 25;

for (let key in user) {
  console.log(key, user[key]);
}

//name Saurav
//age 25
//nationality Indian  

//NOTE: If you do not want to iterate over inherited properties, use hasOwnProperty()
for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key, user[key]);
  }
}

//Iterates only over the object’s own enumerable property names (keys).
Object.keys(user).forEach(key => {
  console.log(key, user[key]);
});

//Iterates over the values only.
Object.values(user).forEach(value => {
  console.log(value);
});

//Iterates over both keys and values using array destructuring.
Object.entries(user).forEach(([key, value]) => {
  console.log(key, value);
});

//for a more readable experience
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

This was a basic overview to loop over array and objects, there could be more ways to do so depending on the type of outcome that is desired