JavaScript Array Methods

What is an array?

Array is also a variable which has the capability of holding more than one value at a time. Each value is called an element specified by an index.

JavaScript arrays can hold different types of variables and you don't need to specify the size of an array in JavaScript since it is dynamically sized.

How to declare an array?

//1. With new key word
let randomNumWith = new Array(1, 5, 9, 7, 3, 6, 4);
//2. without new key word
let randomNumWithout = [1, 5, 9, 7, 3, 6, 4];
//3. Empty array
let emptyArray = [];
// let arrayName = [element1, element2, element3, ...];

How to access array elements?

//arrayName[index] -> index is the position of an array element which is starting with 0.
let randomNumWith = new Array(1, 5, 9, 7, 3, 6, 4);
console.log("result ->", randomNumWith[0]); // result -> 1

How to change array elements?

let fruits = new Array('Banana', 'Apple', 'Orange');
console.log('result ->'fruits) // result -> ['Banana', 'Apple', 'Orange']
fruits[1] = 'Grapes'
console.log('result ->',fruits) // result -> ['Banana', 'Grapes', 'Orange']

Useful array methods for React developments

Here are some of commonly use array methods in React developments.

.map()

This method creates a new array according the array which we are using this map() method and the results of calling a function for every array element. This won't modify the original array.

const movies = ["Mortal Kombat", "Cruella", "Tenet", "1917"];
const newMappedArray = movies.map((element) => "watched " + element);
console.log("result ->", newMappedArray); // result -> ['watched Mortal Kombat', 'watched Cruella', 'watched Tenet', 'watched 1917']

.forEach()

Very useful array method to loop all over the array and execute a provided function for each element in the given array.

const nums = [1, 3, 6, 10];
nums.forEach((element) => console.log("result ->", element)); // result-> 1, 3, 6, 10

.includes()

This array method checks whether there is any equivalent array elemnt for the givent value and return a boolean result.

const nums = [1, 3, 6, 10];
const result = nums.includes(6);
console.log("result ->", result); // result -> true;

.filter()

With this array method we can filter any values in a given array and create a new array based on the result.

const nums = [1, 3, 6, 10];
const filteredValues = nums.filter((element) => {
  if (element > 1 && element < 10) {
    return element;
  }
});
console.log("result ->", filteredValues); // result -> [3, 6];

.some()

This array method checks at least one element in the array exists according to the given condition and return a boolean result accordingly.

const nums = [1, 3, 6, 10];
const checkExists = nums.some((element) => {
  if (element > 6) {
    return element;
  }
});
console.log("result ->", checkExists); // result -> true;

.reduce()

According to this array methods, this will reduce the array into a single value by applying a given funtion to every elemnt in the array against an accumulator. This does not execute the function for array elements without values and does not modify the original array. We can pass the initial value of the accumulator as the second parameter of the reduce method as showing below.

const nums = [1, 3, 6, 10];
const reducedNum = nums.reduce((total, element) => {
  total += element;
  return total;
}, 0);
console.log("result ->", reducedNum); // result -> 20

.every()

This array method checks every element in the array are matches the given condition and return a boolean value. In this case every elemnt should pass to have true result.

const nums = [1, 3, 6, 10];
// Check all elements are greater than or equel to 1
const everyCheck = nums.every((element) => element >= 1);
console.log("result ->", everyCheck); // result -> true
// Check all elements are greater than 2
const everyCheck = nums.every((element) => element > 2);
console.log("result ->", everyCheck); // result -> false

.sort()

According to this array method we can sort or re arrange an array elements either in ascending or descending order.

const nums = [1, 3, 6, 10];
const names = ["Madushan", "Perera", "John", "Arthur"];
const SortedNums = nums.sort((a, b) => (a > b ? 1 : 1));
console.log("result ->", SortedNums); // result -> [1, 3, 6, 10]
const SortedNames = names.sort((a, b) => (a > b ? 1 : 1));
console.log("result ->", SortedNames); // result -> ["Arthur", "John", "Madushan", "Perera"]

NOTE : Rest of the array methods will be here soon..! 😍

Happy Coding friends!