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

Let’s discuss new methods introduced in ES6 language

How to create an Array using Of function in JavaScript

We can create arrays using below ways before ES6.

  • Use Array literal syntax:

Arrays declared using square brackets 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 new syntax for creating an array using of method, used create an array of variable arguments items.

// 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

array.from() function method allows to create an array from an iterable objects with applying callback function applied to it.

It is used to convert set and map into array of values.

Here is syntax

Array.from(iterableobjects, function, value)
  • iterableobjects are array, set or Map object types.
  • Function - Normal or lambda expression that applies to each element
  • value - value passed and used in 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

Array fill function used to assign the array with some values.

Array.fill function used to assign array elements with fixed or default values.

Syntax:

Array.fill(value,[index])

Default value is replaced with all values in array of elements. If index is given, Only updates specific element at 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

foreach function used to iterate each element and execute a function for each function.

Syntax

forEach(callbackfunction,[arguments])

callbackfunction is a javascript function that accepts three arguments

  • value - Current value
  • index - current index
  • originalarray - array to iterate

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

map function used to apply an function to each element and return the new array of modified values.

Syntax

array.map(function)

Returns New array of elements applied with an function.

function is 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()