ES6 introduced new array functions to simplify the iteration and filtering of arrays of elements or objects.

Let’s discuss the new methods introduced in the ES6 language.

Creating Arrays Using the Array.of Function in JavaScript

Before ES6, arrays could be created in the following ways:

  • Use Array literal syntax:

    Arrays declared using square brackets literal syntax with values assignment.

    // Array declaration in ES5
// Array Literal Syntax
var numbers = [1, 2, 3, 4, 5];
console.log(numbers);
console.log(numbers.length);

    Output:

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

  • Use Array object constructor Syntax

    Array variable created using Array constructor with multiple items.

    // Array Constructor object syntax
let words = Array("one", "two");
console.log(words.length);
console.log(words);

    Output:

    2
[ 'one', 'two' ]

ES6 introduced a new syntax for creating arrays using the Array.of() method, which creates an array from a variable number of arguments.

// Array of method
let words = Array.of("one","two");
console.log(words.length);
console.log(words);

Output:

2
[ 'one', 'two' ]

Array.from() Function in ES6

The Array.from() function method allows you to create an array from iterable objects while applying a callback function to each element.

It is commonly used to convert sets and maps into arrays of values.

Here is syntax

Array.from(iterableObjects, function, value)
  • iterableObjects are array, set, or Map object types.
  • Function is a normal or lambda expression that applies to each element.
  • Value is a value passed and used in the function with this scope.

Let’ see an example

var numbers = [1, 2, 3, 4, 5];
let result = Array.from(numbers, number => number * number);
console.log(result);

Array.fill Function

The Array.fill() function is used to assign values to array elements. It can replace all values in an array with a fixed or default value.

Syntax:

Array.fill(value,[index])

Default value is replaced with all values in array of elements. If an Optional index is given, it only updates the specific element at the index position.

var numbers = [1, 2, 3, 4, 5];
numbers.fill(0);
console.log(numbers);
numbers.fill(0, 1);
console.log(numbers);

Output:

[ 0, 0, 0, 0, 0 ]
[ 1, 0, 0, 0, 0 ]

Array.forEach Function

The forEach function is used to iterate over each element of an array and execute a function for each element.

Syntax

forEach(callbackfunction,[arguments])

The callbackFunction is a JavaScript function that accepts three arguments:

  • value: Current value
  • index: Current index
  • originalArray: Array being iterated

Here is an example

var numbers = [1, 2, 3, 4, 5];

// normal function
function show(item) {
  console.log(item);
}
numbers.forEach(show);

// function expression
const display = function(item, index) {
  console.log(item + " - " + index);
};
numbers.forEach(display);

// arrow or lambda expression
const print = (item, index, numbers) => {
  console.log(item + " - " + index, numbers);
};
numbers.forEach(print);

Output:

1
2
3
4
5
1 - 0
2 - 1
3 - 2
4 - 3
5 - 4
1 - 0 [ 1, 2, 3, 4, 5 ]
2 - 1 [ 1, 2, 3, 4, 5 ]
3 - 2 [ 1, 2, 3, 4, 5 ]
4 - 3 [ 1, 2, 3, 4, 5 ]
5 - 4 [ 1, 2, 3, 4, 5 ]

Array.map Function

The map function applies a function to each element of an array and returns a new array of modified values.

Syntax

array.map(function)

It returns a new array of elements applied with the given function.

function is either a normal function or lambda function

Here is an example

const numbers = [10, 20, 30, 40, 50];
const incrementArray = numbers.map(item => item + 1);

Output:

11, 21, 31, 41, 51

Other methods

There are some other methods

  • Array.prototype.values()
  • Array.prototype.keys()
  • Array.prototype.entries()
  • Array.prototype.findIndex()
  • Array.prototype.find()
  • Array.prototype.copyWithin()
  • Array.prototype.fill()