DEV Community

Cover image for Arrays and Objects in JavaScript
Srishti Prasad
Srishti Prasad

Posted on • Updated on

Arrays and Objects in JavaScript

In this blog I've covered different methods to make arrays and objects in JavaScript

It is possible to learn a new programming language if you know how to create arrays and objects, as those concepts are fundamental to many programming languages.
Arrays are data structure that allow for efficient storage and retrieval of multiple values of the same data type, making them useful for a wide range of tasks such as storing and manipulating large amounts of data, implementing mathematical algorithms and more.

Two of the most general way to create arrays in JavaScript are:-

  • Using the array literal notation: You can create an array by enclosing a comma-separated list of values in square brackets. For example:
//var myArray=[] --> create array in JavaScript
var myArray = [1, 2, 3, 4, 5];
//Also javascript array can hold multiple data types
var myArray = ["Apple",5,false,"Apple is red"];
Enter fullscreen mode Exit fullscreen mode
  • Using the Array constructor: You can create an array by calling the Array constructor with the new operator. For example:
var myArray = new Array(1, 2, 3, 4, 5);
Enter fullscreen mode Exit fullscreen mode

In JavaScript, arrays are objects

Hence arrays also have some built-in properties and methods.
One of the most commonly used built-in methods on arrays are the push() and the pop() methods.
To add new items to an array, I can use the push() method:

var fruits = [];
fruits.push("apple"); // ['apple']
fruits.push('mango'); // ['apple', 'mango']
fruits.pop();
console.log(fruits); // ['apple']
Enter fullscreen mode Exit fullscreen mode

How to build objects

1) Object Literals and dot notation
One of the most common ways of building an object in JavaScript is using the object literal syntax: {}.

 var user = {}; //create an object
Enter fullscreen mode Exit fullscreen mode

Now that the variable user has been given an object literal, the object it is bound to can be expanded and altered in a variety of ways.

By specifying the object's properties, defined as key-value pairsĀ full object can occasionally be generated instantly using the object literal syntax.

Here's one such object:

//creating an object with properties and their values
var table = {
    legs: 3,
    color: "brown",
    price: 100,
}
console.log(table);
//{legs: 3, color: 'brown', price: 100}
Enter fullscreen mode Exit fullscreen mode

An alternative method of creating objects is to first store a blank object literal to a variable, then create new properties as needed using the dot notation and the assignment operator.; Example:

var house2 = {};
house2.rooms = 4;
house2.color = "pink";
house2.price = 12345;
console.log(house); // {rooms: 3, color: "brown", price: 10000}
Enter fullscreen mode Exit fullscreen mode

2) Object Literals and brackets notation
It's best to give an example to better understand how it functions, so I'll repeat the process of writing the house2 object using the brackets notation instead of the dot notation.

var house2 = {};
house2["rooms"] = 4;
house2['color']= "pink";
house2["price"] = 12345;
console.log(house2); // {rooms: 4, color: 'pink', price: 12345}
Enter fullscreen mode Exit fullscreen mode

Note that I effectively just wrap the key for each property as a string, inside either the single or double quotes, exactly like I would with regular strings, when using the brackets notation.
I may use either the dot notation, the bracket notation, or a combination of both to access and update properties on objects, like in the following example:

var car = {};
car.color = "red";
car["color"] = "green";
car["speed"] = 200;
car.speed = 100;
console.log(car); // {color: "green", speed: 100}
Enter fullscreen mode Exit fullscreen mode

There's one really useful thing that bracket notation has but is not available in the dot notation: It can evaluate expressions.

var arrOfKeys = ['speed', 'altitude', 'color'];
var drone = {
    speed: 100,
    altitude: 200,
    color: "red"
}
for (var i = 0; i < arrOfKeys.length; i++) {
    console.log(drone[arrOfKeys[i]])
}
/*
output
100
200
red
*/
Enter fullscreen mode Exit fullscreen mode

If you have any query let me know in the comment section. I'll try my best to answer them.
If you find this blog helpful, please ā¤ļø like it.
You can follow me if you wish to learn such amazing stuffs.
In the coming blogs I'll be covering all fundamental concepts of JavaScript.

Top comments (0)