All you need to know about arrays in JavaScript
Tags: javascript, webdev, beginners
Published: 2021-07-31 15:16:25


##Arrays in JavaScript
In JavaScript, arrays are used to store multiple values or you can think of an array as an ordered list of values (more specific elements).

Unlike Java or C++ in JavaScript, an array can store values of different data types and you also don't need to specify the size of array while declaring it as it can grow automatically as per requirement or you can say length of array is dynamically sized and auto-growing.

```javascript
let array=[1,"Java", 2,"CPP", 3,"JS", 3.5,"HTML"];
console.log(array);

// Output [1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"]
```

In JavaScript arrays are special type of objects, but let's not worry about that much and treat it as normal array for now

```javascript
let array=[1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"];
console.log(typeof(arrayObj));

// Output "object"
```


###Ways of creating an array in JavaScript


In JavaScript, you can create arrays in two ways, one via JavaScript keyword i.e., **`Array Constructor`** and the another way is via **`array literals`**(Easiest and most preferred way)


####1. Creating array via Array Constructor:

```javascript
let arrayObj = new Array(1,2,3,4,"Red");
console.log(arrayObj);

// Output [1, 2, 3, 4, "Red"]
```


####2. The preferred way to create an array is to use the array literal notation:

```javascript
let array=[1,"Java",2,"CPP",3,"JS",3.5,"HTML"];

console.log(array);

// Output [1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"]
```


####Accessing the array elements

In JavaScript, arrays are zero-indexed which means the first element of an array is at index 0, and the last element is at the index value of arrays length minus 1.

```javascript
let array=[1,"Java",2,"CPP",3,"JS",3.5,"HTML"];

// length of array = 8

console.log(array[0]);    //Output  1
console.log(array[2]);    //Output  2
console.log(array[3]);    //Output  "CPP"
console.log(array[6]);    //Output  3.5
console.log(array[7]);    //Output  "HTML"
console.log(array[8]);    //Output  undefined 
```


####Length property of Array

The length property sets or returns the number of elements in an array

```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London", "New York", "Tokyo", "Mexico City"];
console.log("Length of cities Array is "+cities.length);
// Output "Length of cities Array is 7"

let countryCode=["001", "002", "003", "004", "005", "006"];
countryCode.length=3;
console.log("Length of countryCode Array is "+countryCode.length);

// Output "Length of countryCode Array is 3"

console.log("CountryCode Array after setting size to 3",countryCode)

// Output "CountryCode Array after setting size to 3",  ["001", "002", "003"]
```


###Let's learn some important methods of array in JavaScript


####1. push()

The push() method adds new elements to the end of an array.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.push("New York");
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "New York"]
```


####2. pop()

The pop() method removes the last element of an array, and returns that element.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.pop());

//Output "London"

console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles"]
```


####3. concat()

The concat() method is used to join two or more arrays.
This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.
```javascript
let cities1=["Delhi", "Mumbai", "Los Angeles", "London"];
let cities2=["Pune", "Kolkata", "Moscow"];
let cities=cities1.concat(cities2);
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "Pune", "Kolkata", "Moscow"]
```


####4. slice()

The slice() method takes two arguments as starting index and ending index and returns the new array object selecting the elements from starting index to ending index(excluding end index).
**`Syntax`**
`slice(startIndex,endIndex)`
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London", "Pune"];
let silceCities=cities.slice(1,4);

console.log(silceCities);

//Output ["Mumbai", "Los Angeles", "London"]
```


####5. splice()

The splice() method adds/removes items to/from an array, 
and returns the removed item(s).
**`Syntax`**
`splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1....)`

```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];

console.log(cities.splice(1,2));

//Output ["Mumbai", "Los Angeles"]

console.log(cities);

//Output ["Delhi", "London"]

cities.splice(1,0,"Mumbai", "Los Angeles", "London")
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "London"]
```


####6. toString()

The toString() method returns a string with all the array values, separated by commas.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.toString());

//Output "Delhi,Mumbai,Los Angeles,London"
```


####7. sort()

The sort() method sorts the items of an array.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.sort();
console.log(cities);

//Output ["Delhi", "London", "Los Angeles", "Mumbai"]
```


####8. reverse()

The reverse() method reverses the order of the elements in an array.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.reverse();
console.log(cities);

//Output ["London", "Los Angeles", "Mumbai", "Delhi"]
```


####9. indexOf()

The indexOf() method searches the array for the specified element, and returns its position.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let pos=cities.indexOf("London");
console.log(pos);

//Output 3
```
Similar to `indexOf()` there is another method `lastIndexOf()` as the name suggest, it returns the index of last occurence of the element in an array.



####10. isArray()

The isArray() method determines whether an object is an array. This returns true if the object is an array, and false if not.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let res=Array.isArray(cities);
console.log(res);

//Output true
```


####11. includes()

he includes() method determines whether an array contains a specified element.
**`Syntax`**
`includes(searchElement)
includes(searchElement, fromIndex)`
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let res1=cities.includes("Mumbai");
console.log(res1);
//Output true

let res2=cities.includes("Mumbai",2);
console.log(res2);

//Output false
```


####12. join()

The join() method takes single argument and convert all the array elements into a string and return the converted string.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.join(" - "));

//Output "Delhi - Mumbai - Los Angeles - London"
```


####13. shift()

The shift() method removes the first item of an array.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.shift();
console.log(cities);

//Output ["Mumbai", "Los Angeles", "London"]
```

####14. unshift()

The unshift() method adds new items to the beginning of an array, and returns the new length.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.unshift("New York","Tokyo");
console.log(cities);

//Output ["New York", "Tokyo", "Delhi", "Mumbai", "Los Angeles", "London"]
```


####15. fill()

The fill() method fills the specified elements in an array with a static value. You can specify the position of where to start and end the filling. If not specified, all elements will be filled.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.fill("Delhi");
console.log(cities);

//Output ["Delhi", "Delhi", "Delhi", "Delhi"]
```


####16. find()

The find() method returns the value of the first element in an array that pass a test (provided as a function).
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>=6;
}
console.log(cities.find(city));

//Output "Mumbai"
```

####17. findIndex()

The findIndex() method returns the index of the first element in an array that pass a test (provided as a function).
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>=6;
}
console.log(cities.findIndex(city));

//Output 1
```

####18. forEach()

The forEach() method calls a function once for each element in an array, in order.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c,idx,arr)=>{
arr[idx]= c + " is a beautiful city";
}

cities.forEach(city);
console.log(cities);

//Output ["Delhi is a beautiful city", "Mumbai is a beautiful city", "Los Angeles is a beautiful city", "London is a beautiful city"]
```

####19. map()

The map() method creates a new array with the results of calling a function for every array element.
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=cities.map((c)=>{
return c + " is a beautiful city";
})

console.log(city);

//Output ["Delhi is a beautiful city", "Mumbai is a beautiful city", "Los Angeles is a beautiful city", "London is a beautiful city"]
```

####20. filter()

The filter() method creates an array filled with all array elements that pass a test (provided as a function).
```javascript
let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>6;
}
console.log(cities.filter(city));


//Output ["Los Angeles"]
```

Thanks for reading.

"Don't miss out" Follow my Social handles👉
[Subscribe my YouTube channel😊](https://www.youtube.com/mayanktyagi)
[Instagram😊](https://www.instagram.com/the_cs_guy_/) **||** [Twitter😊](https://twitter.com/tmayank860)

If you find this helpful and want to support💲 [Buy Me Coffee☕](https://www.buymeacoffee.com/mayanktyagi)