JavaScript Fundamentals / Arrays

Array Methods

✅ Using for loop

We can iterate array and access array elements using for loop.

Example : It is an example of for loop.

let a = ["HTML", "CSS", "JS"];
// Iterating through for loop
for (let i = 0; i < a.length; i++) {
   console.log(a[i])
}
HTML
CSS
JS

✅ Array forEach( )

The forEach() method calls a function (a callback function) once for each array element.

Note that the function takes 3 arguments:

  • The item value

  • The item index

  • The array itself

Example 1 :

const numbers = [45, 4, 9, 16, 25];
numbers.forEach((value, index, array) => {
	console.log("Value:", value, "Index:", index, "Array:", array);
	console.log("-----------------------------------------------"); 
});
Value: 45 Index: 0 Array: [ 45, 4, 9, 16, 25 ]
-----------------------------------------------
Value: 4 Index: 1 Array: [ 45, 4, 9, 16, 25 ]
-----------------------------------------------
Value: 9 Index: 2 Array: [ 45, 4, 9, 16, 25 ]
-----------------------------------------------
Value: 16 Index: 3 Array: [ 45, 4, 9, 16, 25 ]
-----------------------------------------------
Value: 25 Index: 4 Array: [ 45, 4, 9, 16, 25 ]
-----------------------------------------------

Example 2 :

let a = [12,13,14];

a.forEach(function (value) {
	console.log(value);
});

This example uses only the value parameter.

value is the current element of the array during each iteration. It is the value from the array a

12
13
14

✅ Array map( )

  • The map() method creates a new array by performing a function on each array element.

  • The map() method does not execute the function for array elements without values.

  • The map() method does not change the original array.

Example :

This example multiplies each array value by 2:

const numbers1 = [45, 4, 9, 16, 25];

const numbers2 = numbers1.map((value) => value * 2);
console.log(numbers2)
[ 90, 8, 18, 32, 50 ]

✅ Array filter( )

The filter() method creates a new array with array elements that pass a test.

Example : This example creates a new array from elements with a value larger than 18:

const numbers = [45, 4, 9, 16, 25];

const over18 = numbers.filter((value) => value > 18);
console.log(over18)
[ 45, 25 ]

✅ Array reduce( )

  • The reduce() method runs a function on each array element to produce a single value.

  • The reduce() method works from left-to-right in the array.

Note that the function takes 4 arguments:

  • The array itself

  • The item index

  • The total (the initial value / previously returned value)

  • The item value

Example : This example finds the sum of all numbers in an array

const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduce((total, value, index, array) => total + value);
console.log(sum)
99

✅ Array every( )

  • The every() method checks if all array values pass a test.

  • The function takes 3 arguments:

    • The array itself

    • The item value

    • The item index

Example : This example checks if all array values are larger than 18

const numbers = [45, 4, 9, 16, 25];

let allOver18 = numbers.every((value) => value > 18);
console.log("all Over 18 is " + allOver18);
all Over 18 is false

✅ Array some()

The some() method checks if some array values pass a test.

  • The function takes 3 arguments:

    • The array itself

    • The item value

    • The item index

Example : This example checks if some array values are larger than 18

const numbers = [45, 4, 9, 16, 25];

let someOver18 = numbers.some((value) => value > 18);
console.log("some Over 18 is " + someOver18);
some Over 18 is true

✅ Array find( )

  • The find() method returns the first element in the array that passes a test.

  • It stops searching after finding the first match.

  • If no element satisfies the condition, it returns undefined.

Example: This example finds the first number greater than 18

const numbers = [45, 4, 9, 16, 25];

let firstOver18 = numbers.find((value) => value > 18);
console.log("First Over 18 is " + firstOver18);
First Over 18 is 45

✅ Array.from( )

The Array.from() method returns an Array object from:

  • Any iterable object

  • Any object with a length property.  In this example, we will be using Array from( ) method to create an array from the string value.

console.log(Array.from("Codeveda"));
console.log(Array.from([1, 2, 3], (x) => x + x));
[
  'C', 'o', 'd',
  'e', 'v', 'e',
  'd', 'a'
]
[ 2, 4, 6 ]

✅ Array with( ) Method

The Array with( ) method as a safe way to update elements in an array without altering the original array.

Example :

const months = ["January", "February", "Mar", "April"];
const myMonths = months.with(2, "March");
console.log(myMonths);
[ 'January', 'February', 'March', 'April' ]

✅ Array Spread (...)

The ... operator expands an array into individual elements.

Example : This can be used join arrays

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
1,2,3,4,5,6

✅ Array Rest Operator (...)

The rest operator looks just like the spread operator (...), but it's used in destructuring to collect the remaining (or "rest") elements into a new array.

const fruits = ["apple", "banana", "mango", "orange"];
const [first, second, ...rest] = fruits;
console.log(first, second, rest);   
apple banana [ 'mango', 'orange' ]

✅ Array splice( )

  • The splice() method adds or removes elements from an array.

  • It modifies the original array.

  • Syntax: array.splice(startIndex, deleteCount, item1, item2, ...)

Example: This example removes 2 items starting from index 2 and adds two new items.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2, 2, "Lemon", "Kiwi");
console.log(fruits);
["Banana", "Orange", "Lemon", "Kiwi"]

✅ Array slice( )

  • The slice() method returns a shallow copy of a portion of an array.

  • It does not modify the original array.

  • Syntax: array.slice(startIndex, endIndex) (endIndex is not included)

Example: This example creates a new array from index 1 to 3 (excluding 3)

const fruits = ["Banana", "Orange", "Apple", "Mango"];

const citrus = fruits.slice(1, 3);
console.log(citrus);
["Orange", "Apple"]