array vs object javascript with example

What is the main difference Array and Objects in JavaScript

Both objects and arrays are very “special” in JavaScript. Objects represent a data type that is mutable and can be used to store a collection of data.

Array is a special type of variable that is also mutable and can also be used to store a list of values.

So to define a array you will use this syntax in Javascript

Arrays in JavaScript

let variableName = []; // defined an empty array

let arrayWithValues = [12,23,34,45,56,67]; // Array with values

Nested arrays look something like this

let arrayOne = [
                    [12,23,34,45,56,67], // Here we have array with in array.
                    [34,56,12,54,76,12],
                    [23,67,45,34,23],
                    23,45,56,76
                ];

So we can loop through array using Loops.

Let's see an example of forEach loop in JavaScript

arrayOne.forEach((item) => {
     if(Array.isArray(item)){
          item.forEach((element)=>{
                console.log(element);
          })
     }
})

Here we are looping twice, Once in main array and then arrays with in array so it prints all values from all arrays.

Note that i used "isArray" function to check arrays inside main array. and if there is array inside main array then using foreach loop again.

Objects in JavaScript

Object can be defined like this

let emptyObject = {} 

And with values here is an example

                let names = {
                    players:[
                        {
                            name: 'Mark', 
                            age: 56, 
                            phone:324324, 
                            address:{
                                street:'some street',
                                city:'some city',
                                }
                        },
                        {name: 'Roger', age: 45},
                        {name: 'Marcus', age: 27},
                        {name: 'Tom', age: 14},
                        {name: 'Andrew', age: 44},
                        {name: 'John', age: 24,
                            address:{
                                street:'some street',
                                city:'Some Another city',
                            }
                        },
                    ]
                }

We have names then Inside "names" object we have "players" object. And then array of objects which is mainly the data of each player.

To loop through an object we use similar way as arrays.

Loop through Object in JavaScript

Here you go

names.players.forEach((item)=>{
   if(item.address){
      console.log(item.name + ' is '+ item.age + ' years old and From '+item.address.city);
   }else{
      console.log(item.name + ' is '+ item.age + ' years old');
   }
});

Here we are looping through object and the printing data it outputs something like this

Mark is 56 years old and From some city test:55:33

Roger is 45 years old test:57:33

Marcus is 27 years old test:57:33

Tom is 14 years old test:57:33

Andrew is 44 years old test:57:33

John is 24 years old and From Some Another city

We are accessing "Players" using "names.players" and then each player name using "item.name". Same way we are getting age and address.

If data has key and values we use Object as objects are better in performance as compare to Array also easy to use.