DEV Community

Keerthana M
Keerthana M

Posted on

JavaScript Array Iterations

JavaScript Array Iterations:

JavaScript Array flatMap()

  • The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.

example:
const numbers = [1, 2, 3, 4];
const result = numbers.flatMap(num => {
if (num % 2 === 0) {
return [num, num * 10];
} else {
return [];
}
});
console.log(result);

output:
[ 2, 20, 4, 40 ]

JavaScript Array filter()

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

const numbers1 = [45, 4, 9, 16, 25];
const less18 = numbers1.filter(myFunction);
function myFunction(value) {
return value < 18;
}
console.log(less18);

output:
[4,9,16]

JavaScript 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.

example:

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total / value;
}
console.log(sum);

output:
0.003125

JavaScript Array reduceRight()
The reduceRight() method runs a function on each array element to produce a single value.
The reduceRight() works from right-to-left in the array.

example:
const numbers = [45, 4, 9, 16, 25];
let sum1 = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total - value;
}
console.log(sum1);

output:
-49

JavaScript Array every()

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

example:
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}

output:
false

JavaScript Array some()

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

example:
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}

output:
true

JavaScript Array.from():

  • The Array.from() method returns an Array object from:
  • Any iterable object
  • Any object with a length property

example:
let text = "keerthana";
let name = Array.from(text);
console.log(name);

output:
[ "k", "e", "e", "r", "t", "h", "a", "n", "a"]

JavaScript Array keys():

  • The Array.keys() method returns an Array Iterator object with the keys of an array.

example:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
console.log(x);
}
console.log(keys);

output:
0
1
2
3
Array Iterator { constructor: Iterator() }

JavaScript Array entries():

  • The entries() method returns an Array Iterator object with key/value pairs.

example:

const fruits1 = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits1.entries();
for (let x of f) {
console.log(x);
}
console.log(f);

output:
[ 0, "Banana" ]
[ 1, "Orange" ]
[ 2, "Apple" ]
[ 3, "Mango" ]
Array Iterator { constructor: Iterator() }

JavaScript 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", "March", "April"];
const myMonths = months.with(2, "august");
console.log(myMonths);
console.log(months);

output:
[ "January", "February", "august", "April" ]
[ "January", "February", "March", "April" ]

JavaScript Array Spread (...)

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

example:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Des"];
const year = [...q1, ...q2, ...q3, ...q4];
console.log(year);
console.log(q3);

output:
[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
[ "Jul", "Aug", "Sep" ]

JavaScript Array Rest (...)

  • The rest operator (...) allows us to destruct an array and collect the leftovers.

example:

let a, b, rest;
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
[a, b, ...rest] = arr1;
console.log(a);
console.log(b);
console.log(rest);
console.log(arr1);

output:
1
2
[ 3, 4, 5, 6, 7, 8 ]
[ 1, 2, 3, 4, 5, 6, 7, 8 ]

Top comments (0)