JavaScript Arrays and it's operations with examples

In JavaScript, an array is a data structure that allows you to store and organize multiple values within a single variable. Arrays are ordered, indexed collections of values, and each value is called an element. The index of an array starts from 0, so the first element is at index 0, the second at index 1, and so on.

Here’s a basic example of how to create an array and access its elements:

// Creating an array
let fruits = ['Apple', 'Banana', 'Orange'];

// Accessing elements
console.log(fruits[0]); // Output: 'Apple'
console.log(fruits[1]); // Output: 'Banana'
console.log(fruits[2]); // Output: 'Orange'

Important Operations on Arrays:

Length of an Array:

You can find the number of elements in an array using the length property.

console.log(fruits.length); // Output: 3

Adding Elements:

You can add elements to the end of an array using the push method.

fruits.push('Grapes');
console.log(fruits); // Output: ['Apple', 'Banana', 'Orange', 'Grapes']

Removing Elements:

Elements can be removed from the end of an array using the pop method.

fruits.pop();
console.log(fruits); // Output: ['Apple', 'Banana', 'Orange']

Adding Elements at the Beginning:

You can add elements to the beginning of an array using the unshift method.

fruits.unshift('Grapes');
console.log(fruits); // Output: ['Grapes', 'Apple', 'Banana', 'Orange']

Removing Elements from the Beginning:

Elements can be removed from the beginning of an array using the shift method.

fruits.shift();
console.log(fruits); // Output: ['Apple', 'Banana', 'Orange']

Finding Index of an Element:

You can find the index of an element in an array using the indexOf method.

let bananaIndex = fruits.indexOf('Banana');
console.log(bananaIndex); // Output: 1

Slicing an Array:

The slice method can be used to create a new array by extracting a portion of an existing array.

let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // Output: ['Banana', 'Orange']

Iterating Through an Array:

You can use loops, such as for or forEach, to iterate through each element in an array.

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Using forEach
fruits.forEach(function (fruit) {
  console.log(fruit);
});

Mapping an Array:

The map method can be used to create a new array by applying a function to each element of an existing array.

let fruitLengths = fruits.map(function (fruit) {
  return fruit.length;
});
console.log(fruitLengths); // Output: [5, 6, 6]

Concatenating Arrays:

The concat method is used to concatenate two or more arrays, creating a new array.

let moreFruits = ['Grapes', 'Mango'];
let combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits); // Output: ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']

Checking if an Element Exists:

You can use the includes method to check if an array contains a specific element.

console.log(fruits.includes('Banana')); // Output: true
console.log(fruits.includes('Pineapple')); // Output: false

Filtering an Array:

The filter method creates a new array with elements that pass a certain condition.

let filteredFruits = fruits.filter(function (fruit) {
  return fruit.length > 5;
});
console.log(filteredFruits); // Output: ['Banana', 'Orange']

Joining Array Elements:

The join method creates a string by joining all the elements of an array with a specified separator.

let joinedFruits = fruits.join(', '); // Join with a comma and space
console.log(joinedFruits); // Output: 'Apple, Banana, Orange'

Reversing an Array:

The reverse method reverses the order of elements in an array.

let reversedFruits = fruits.reverse();
console.log(reversedFruits); // Output: ['Orange', 'Banana', 'Apple']

Sorting an Array:

The sort method is used to sort the elements of an array.

let sortedFruits = fruits.sort();
console.log(sortedFruits); // Output: ['Apple', 'Banana', 'Orange']

Note: The default sort behavior converts elements to strings and sorts them based on their UTF-16 code units. For sorting numbers, you may need a custom sorting function.

Reducing an Array:

The reduce method is used to reduce an array to a single value by applying a function to each element.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Flattening Nested Arrays:

The flat method is used to flatten a nested array.

let nestedArray = [1, [2, [3, 4]]];
let flatArray = nestedArray.flat(2);
console.log(flatArray); // Output: [1, 2, 3, 4]

Finding the Maximum and Minimum Values:

You can use the Math.max and Math.min functions with the spread operator (...) to find the maximum and minimum values in an array.

let numbers = [5, 2, 8, 1, 7];
let maxNumber = Math.max(...numbers);
let minNumber = Math.min(...numbers);
console.log(maxNumber); // Output: 8
console.log(minNumber); // Output: 1

Checking if Every Element Passes a Condition:

The every method checks if every element in an array passes a specific condition.

let allGreaterThanZero = numbers.every(function (number) {
  return number > 0;
});
console.log(allGreaterThanZero); // Output: true

Checking if Some Elements Pass a Condition:

The some method checks if at least one element in an array passes a specific condition.

let someGreaterThanFive = numbers.some(function (number) {
  return number > 5;
});
console.log(someGreaterThanFive); // Output: true

Copying an Array:

You can use various methods to create a shallow copy of an array, such as the spread operator (...), slice, or Array.from.

let copyOfNumbers = [...numbers];
let anotherCopy = numbers.slice();
let arrayFromCopy = Array.from(numbers);

Filling an Array:

The fill method is used to fill all the elements of an array with a static value.

let emptyArray = new Array(5);
emptyArray.fill(0);
console.log(emptyArray); // Output: [0, 0, 0, 0, 0]

Find Index of an Element:

The findIndex method returns the index of the first element in an array that satisfies the provided testing function. If no element is found, it returns -1.

let index = numbers.findIndex(function (number) {
  return number > 5;
});
console.log(index); // Output: 2 (index of the first element greater than 5)

Find and Return Object Based on a Property:

If you have an array of objects and want to find an object based on a property value, you can combine find with arrow functions.

let persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 22 }
];

let person = persons.find(p => p.name === 'Bob');
console.log(person); // Output: { name: 'Bob', age: 30 }

These additional array operations provide you with more tools to manipulate and work with arrays in JavaScript. Understanding when and how to use these methods will make you more proficient in handling arrays in your code.

Post Views: 76