Arrays | Javascript

If you come from any other programming language background, you might probably know that array is a data type that contains a similar type of data elements. It can be an array of integers or strings, but not both.

But here in Javascript, it’s a bit different.

In Javascript, an array is a type of object which can store multiple values of different data types. Each value in the array can be accessed by its numeric positions also known as an index. Arrays are zero-indexed (zero-based) i.e, the indexing of the array starts from 0.

Example:

list=[1,'apple','mango',2]

We can access the values using the index

console.log(list[0]); // Output: 1
console.log(list[1]); // Output:  'apple'

Creating an array

We can create an array just by placing all the values as a comma-separated list inside square brackets.

Example:

newArray = [1,2,3,4,5]

Or, we can also create an empty array by:

const emptyArray = []

Inserting Elements in the array

We can insert elements in the array either by using the index or by using the push function.

Using the index:

  let cars = []
  cars[0] = 'Audi';
  cars[1] = 'BMW';

  console.log(cars) //output : ['Audi','BMW']

Using the push() function

The push() function always appends elements to the array i.e. it adds them to the end of the array.
```
  let cars = []
  cars.push('Audi');
  cars.push('BMW');

  console.log(cars) //output: ['Audi','BMW']
```

Using push method is the safest way to add new elements to the array because if you are adding elements using the index method then you will be bound to face two issues when you make a typo:

Case 1: index value is less than the length of the array

In this case, the element currently present at that index will be modified and you will face data loss.
```
  let heroes = ['IronMan','Thor']
  heroes[1] = ['Hulk']

  console.log(heroes) //Output: ['IronMan','Hulk']
```

Case 2: index value is more than the length of the array

In this case, there will be the creation of some empty items in the array.

  let heroes = ['IronMan','Hulk']
  heroes[4] = ['Thor']

  console.log(heroes) 
  //Output: ['IronMan','Hulk', <2 empty items>,'Thor']

Length property

We can fetch the length of the array using the length property of the array.

Example:

fruits = ['apple','mango','pears'];
console.log(fruits.length)  // Output : 3

Array Methods

map()

This method executes a function on each of the element and returns a new array.

let even = [2,4,6,8,10]
Odd = even.map( (element) => {
  return element + 1;
})
console.log(Odd) // Output: [3,5,7,9,11]

forEach()

This method also executes a given function on each element of the array.

let even = [2,4,6,8,10]
even.forEach( ele => console.log(ele);) // Output: 2 4 6 8 10

It is generally used for traversing purposes.

Note: The difference between map and forEach is that map returns the updated array while forEach doesn’t return anything.

find()

It returns the value of the first element that satisfies the given condition.

let even = [2,4,6,8,10]
Ouput = even.find(ele => {
return ele >5;
})

console.log(output) // output: 6

It allows us to quickly find any element. It stops after it finds the first values that match the condition. So, we will get a single value only.

filter()

This method is used to filter the element values based on a given condition and return all the values that match the condition.

let odd = [1,3,5,7,9,11,15]
greaterThanEight = odd.filter(ele => {
return ele > 8;
})

console.log(greaterThanEight) // output : [9,11,15]

Note: The difference between find and filter is that find return only a single value that matches the condition while filter return all the values that satisfy the condition.

some()

This method checks if at least one element in the array passes satisfies the given condition or not. It returns true or false depending on the match. It stops after finding the first match.

let even = [2,4,6,8,10]
Output = even.some(ele => return ele%2!=0)

console.log(output) //output : false

every()

This method checks if every element of the array satisfies the given condition or not. It also returns a boolean value(true or false) depending on the match.

let even = [2,4,6,8,10]
Output = even.every(ele => return ele%2==0)

console.log(output) //output: true

reduce()

This method applies a reducer function on each of the elements and returns the resulting single value.

let numbers = [1,2,3,4,5]
sum = numbers.map((accumulator,element) => {
    return accumulator + element;
})

console.log(sum) //output: 15

There are many more array methods present but it's not possible to list all here. So here's a mdn documentation link on Javascript arrays.

Reetesh Tiwari's Blog

Reetesh Tiwari's Blog

Arrays | Javascript

Inserting Elements in the array