Arrays and Objects in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2023-01-15 09:03:44


**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: 

```javascript
//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"];
```
- **Using the Array constructor**: You can create an array by calling the Array constructor with the new operator. For example: 

```javascript
var myArray = new Array(1, 2, 3, 4, 5);
```

##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:

```javascript
var fruits = [];
fruits.push("apple"); // ['apple']
fruits.push('mango'); // ['apple', 'mango']
fruits.pop();
console.log(fruits); // ['apple']
```
##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: {}.

```javascript
 var user = {}; //create an object
```
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:

```javascript
//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}
```
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:

```javascript
var house2 = {};
house2.rooms = 4;
house2.color = "pink";
house2.price = 12345;
console.log(house); // {rooms: 3, color: "brown", price: 10000}
```
 
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.

```javascript
var house2 = {};
house2["rooms"] = 4;
house2['color']= "pink";
house2["price"] = 12345;
console.log(house2); // {rooms: 4, color: 'pink', price: 12345}
```
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:

```javascript
var car = {};
car.color = "red";
car["color"] = "green";
car["speed"] = 200;
car.speed = 100;
console.log(car); // {color: "green", speed: 100}
```
**There's one really useful thing that bracket notation has but is not available in the dot notation: It can evaluate expressions.**

```javascript
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
*/
```
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.