JavaScript Learning Array and Objects

 

If you ever worked with a JSON structure, you've worked with JavaScript objects. Quite literally. JSON stands for JavaScript Object Notation.

object is as simple

  {
        "color": "purple",
        "type" : "minicar",
        "capacity": 5    
  }

This object represents a car. There can be many types and colors of cars, each object then represents a specific car.

Creating an array of Objects

let cars = [car1, car2, car3, car4, car5, car6 ]

 
 
 
 
 

represent it as an array this way

let cars = [ {
        "color": "purple",
        "type": "minivan",
        "capacity": 5
      },
      {
        "color": "blue",
        "type": "wagon",
        "capacity": 4
      },
      {
        ...
      },
      ...
    ]

Add a new object at the start - Array.unshift

To add an object at the first position, use Array.unshift.

  let cars = ['car1', 'car2', 'car3', 'car4', 'car5'];
       console.log(car);
       car.unshift('red car');
       console.log(car); // Output: ["red car", "car1", "car2", "car3", "car4", "car5"]

Add a new object at the end - Array.push

To add an object at the last position, use Array.push.

let cars = ['car1', 'car2', 'car3', 'car4', 'car5'];
        console.log(car);
        car.push('red car');
        console.log(car); // Output: ["car1", "car2", "car3", "car4", "car5", "red car"]

Add a new object in the middle - Array.splice

To add an object in the middle, use Array.splice. This function is very handy as it can also remove items.

let cars = ['car1', 'car2', 'car3', 'car4', 'car5'];
        console.log(car);
        car.splice(1, 3);  // splice (start number , delete count number);
        console.log(car); // Output: ["car1", "car5"]

Remove object in to end - Array.pop

To remove an object in the end, use Array.pop.

 let cars = ['car1', 'car2', 'car3', 'car4', 'car5'];
        console.log(car);
        car.pop();  // 
        console.log(car); // Output: ["car1", "car2", "car3", "car4"]

Remove object in to Start - Array.shift

To remove an object in the Start, use Array.shift.

let cars = ['car1', 'car2', 'car3', 'car4', 'car5'];
        console.log(car);
        car.shift();  // 
        console.log(car); // Output: ["car2", "car3", "car4", "car5"]

Reverse Of an objects - Array.reverse

To reverse of an object, use Array.reverse.

 let cars = ['car1', 'car2', 'car3', 'car4', 'car5'];
         console.log(car);
         car.reverse();  // 
         console.log(car); // Output: ["car5", "car4", "car3", "car2", "car1"]

Find an object in an array by its values - Array.find

Let's say we want to find a car that is red. We can use the function Array.find

let car = [ {
          "color": "red",
          "type": "minivan",
          "capacity": 5
        },
        {
          "color": "blue",
          "type": "wagon",
          "capacity": 4
        },
        {
          "color": "purple",
          "type": "wagon",
          "capacity": 4
        },
        {
          "color": "red",
          "type": "wagon",
          "capacity": 4
        }
      ];
      
      console.log(car.find(cars => cars.color === 'red'));

        // Output: {color: "red", type: "minivan", capacity: 5}

Get multiple items from an array that match a condition - Array.filter

The Array.find function returns only one object. If we want to get all red cars, we need to use Array.filter.

let abc = [ {
          "color": "red",
          "type": "minivan",
          "capacity": 5
        },
        {
          "color": "blue",
          "type": "wagon",
          "capacity": 4
        },
        {
          "color": "purple",
          "type": "wagon",
          "capacity": 4
        },
        {
          "color": "red",
          "type": "wagon",
          "capacity": 4
        }
      ];
      
      console.log(car.find(cars => cars.color === 'red'));

        // Output: 0: {color: "red", type: "minivan", capacity: 5}
                   1: {color: "red", type: "wagon", capacity: 4}

Transform objects of an array - Array.map

The Array.find function returns only one object. If we want to get all red cars, we need to use Array.filter.

let mapCar = [
    {
        "color": "red",
        "type": "minivan",
        "capacity": 2
      },
      {
        "color": "blue",
        "type": "wagon",
        "capacity": 3
      },
      {
        "color": "purple",
        "type": "wagon",
        "capacity": 4
      },
      {
        "color": "red",
        "type": "wagon",
        "capacity": 6
      },
      {
        "color": "red",
        "type": "wagon",
        "capacity": 7
      }

      
];

let size = mapCar.map( mycar => {
    if(mycar.capacity <= 3){
        return 'Small Car';
    } if(mycar.capacity <= 5){
        return 'Medium Car';
    }else {
        return 'Large Car';
    }
})

console.log(size);

        // Output: ["Small Car", "Small Car", "Medium Car", "Large Car", "Large Car"]

Add a property to every object of an array - Array.forEach

 let foreachCar = [
    {
        "color": "red",
        "type": "minivan",
        "capacity": 2
      },
      {
        "color": "blue",
        "type": "wagon",
        "capacity": 3
      },
      {
        "color": "purple",
        "type": "wagon",
        "capacity": 4
      },
      {
        "color": "red",
        "type": "wagon",
        "capacity": 6
      },
      {
        "color": "red",
        "type": "wagon",
        "capacity": 7
      }

      
];

foreachCar.forEach( (value) => {
    console.log(value);
})
         /* Output:{color: "red", type: "minivan", capacity: 2}
        {color: "blue", type: "wagon", capacity: 3}
        {color: "purple", type: "wagon", capacity: 4}
        {color: "red", type: "wagon", capacity: 6}
        {color: "red", type: "wagon", capacity: 7} */