JavaScript Array Playground

Array.filter()Pure

Creates a new array with all elements that pass the test implemented by the provided function. More

 
/* Try change the code */
emojis.filter(
  emoji => emoji === "🐶")
/* and press ▶ Run below */

Run

 
emojis.filter(
  emoji => emoji >= "🐶")

Run

 
users.filter(
  user => user.age > 13)

Run

 
users.filter(
  user => user.gender === "female")

Run

 
products.filter(
  product => product.price < 20000)

Run

 
products.filter(
  product => product.price > 20000 
  && product.price < 30000)

Run

Array.find()Pure

Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned. More

 
emojis.find(
  emoji => emoji === "🐶")

Run

 
users.find(
  user => user.age > 13)

Run

 
products.find(
  product => product.price < 20000)

Run

Array.findIndex()Pure

Returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned. More

 
emojis.findIndex(
  emoji => emoji === "🐶")

Run

 
users.findIndex(
  user => user.age > 13)

Run

 
products.findIndex(
  product => product.price < 20000)

Run

Array.map()Pure

Creates a new array with the results of calling a provided function on every element in the calling array. More

 
emojis.map(
  emoji => 
    'Char code of ' + emoji + ' is ' + emoji.codePointAt(0))

Run

 
users.map(
  user => user)

Run

 
users.map(
  user => user.gender)

Run

 
users.map(
  user => 
    user.name + ' age ' + user.age)

Run

 
users.map(
  user => user.gender).length

Run

Array.reduce()Pure

Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. More

 
users.reduce(
  (previousValue, currentValue) => 
    previousValue + currentValue.age, 0)

Run

 
users.reduce(
  /* Try change params */
  (sumAge, user) => 
    sumAge + user.age, 0)

Run

 
emojis.reduce(
  (result, emoji) => 
    result + '💥' + emoji, "")

Run

 
products.reduce(
  (sumPrice, product) => 
    sumPrice + product.price, 0)

Run

Array.filter().map()

Two method can put together.

 
users.filter(
  user => 
    user.gender === 'female')
      .map(user => user.username)

Run

Array.sort()Impure

Sorts the elements of an array and returns the array. We can define the conditions for sorting. More

 
emojis.sort()

Run

 
users.sort()

Run

 
/*Order by name*/
users.sort(
  (a, b) => (a.name - b.name))

Run

 
/*Order by price*/
products.sort(
  (a, b) => (a.price - b.price))

Run

Array.reverse()Impure

Reverses an array in place. More

 
emojis.reverse()

Run

 
users.reverse()

Run

 
products.reverse()

Run

Array.push()Impure

Adds one or more elements to the end of an array and returns the new length of the array. More

 
emojis.push('💥')

Run

 
emojis.push('⚽', '🏀')

Run

 
/* Observe this carefully */
emojis.push(['🔫', '💣', '🔪'])

Run

PushPure

We can pure push too.

 
// Use spread operator
var newEmojis = [...emojis, '🏀']
// Try push to array
newEmojis.push('🏀')
newEmojis

Run

 
// or use concat 
var newEmojisAgain = [].concat(emojis, '👍')
// Try push to array
newEmojisAgain.push('🏀')
newEmojisAgain

Run

Array.shift()Impure

Removes the first element from an array and returns that removed element. This method changes the length of the array. More

 
emojis.shift()

Run

 
users.shift()

Run

 
products.shift()

Run

Array.pop()Impure

Removes the last element from an array and returns that element. This method changes the length of the array. More

 
emojis.pop()

Run

 
users.pop()

Run

 
products.pop()

Run

Array.splice()Impure

Changes the contents of an array by removing existing elements and/or adding new elements. More

 
/*Add new element to index 2*/
 emojis.splice(2, 0,
   "👍", "👊", "✊", "✌️", "👌", "✋")

Run

 
/*Add new element*/
/*to index 2 - 4*/
 emojis.splice(2, 3,
   "👍", "👊", "✊")

Run

 
/*Remove element index 2 - 3*/
 users.splice(2, 2)

Run

Array.join()Pure

Joins all elements of an array (or an array-like object) into a string and returns this string. More

 
emojis.join()

Run

 
emojis.join("|")

Run

Array.concat()Pure

This method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. More

 
//Take first array and concatenate
/* with the second array.*/
emojis.concat(users)

Run

 
//Concatenate more than 2 arrays
empty.concat(users, emojis)

Run

 
//Concatenate more than 3 elements
//with empty array
[].concat(["🇹🇭", "🇰🇷", "🇯🇵"], emojis, ["🇹🇭", "🇰🇷", "🇯🇵"])

Run

Array.slice()Pure

Returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified. More

 
// Extracts all element.
emojis.slice()

Run

 
// Extracts the third element. 
// through the last element.
emojis.slice(3)

Run

 
// Extracts the third element. 
// through the fourth element.
emojis.slice(3, 4)

Run

Array.toString()Pure

Returns a string representing the specified array and its elements. More

 
// Return toString value of emojis. 
emojis.toString()

Run

Copy ArrayPure

pure Copy Array

 
// Copy emojis array 
var copyEmojis = [...emojis]
// Try push element to emojis
copyEmojis.push('🏀')
copyEmojis

Run

 
// or use [].concat 
var copyEmojisAgain = [].concat(emojis)
// Try push element to emojis
copyEmojisAgain.push('🏀')
copyEmojisAgain

Run

Array.copyWithin()Impure

Shallow copies part of an array to another location in the same array and returns it, without modifying its size. More

 
// place at position 0 
// the element between
// position 3 and 4 
var copyEmojis = emojis.slice(0)
copyEmojis.copyWithin(0, 3, 4)

Run

 
// place at position 1 
// the elements after 
// position 3 
var copyEmojis = emojis.slice(0)
copyEmojis.copyWithin(1, 3)

Run

Array.entries()Pure

Returns a new Array Iterator object that contains the key/value pairs for each index in the array. More

 
// place at position 0 
var iterator = emojis.entries()
iterator.next().value

Run

Array.every()Pure

Tests whether all elements in the array pass the test implemented by the provided function. More

 
// function to test
function isPriceBelowThreshold(product) {
  return product.price < 100000;
}
products.every(isPriceBelowThreshold)

Run

Array.fill()Impure

Fills all the elements of an array from a start index to an end index with a static value. The end index is not included. More

 
var copyEmojis = emojis.slice(0)
// fill with 0 from position 
// 2 until position 4
copyEmojis.fill(0, 2, 4)

Run

 
var copyEmojis = emojis.slice(0)
// fill with 1 from position 2
copyEmojis.fill(1, 2)

Run

 
var copyEmojis = emojis.slice(0)
// fill with 2 
copyEmojis.fill(2)

Run

Array.find()Pure

Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned. More

 
// Find the first user 
// age more than 14
users.find(function(user) {
  return user.age > 14
})

Run

Array.forEach()Pure

Executes a provided function once for each array element. More

 
let copyEmojis = ""
emojis.forEach(function(emoji) {
 copyEmojis += emoji
})
copyEmojis

Run

Array.includes()Pure

Determines whether an array includes a certain element, returning true or false as appropriate. It uses the sameValueZero algorithm to determine whether the given element is found. More

 
emojis.includes("💻")

Run

 
emojis.includes("🇹🇭")

Run

 
emojis.includes("🍵")

Run

Array.from()Pure

Creates a new, shallow-copied Array instance from an array-like or iterable object. More

 
Array.from("shiba")

Run

Array.isArray()Pure

Determines whether the passed value is an Array. More

 
Array.isArray(emojis)

Run

Array.of()Pure

Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments. More

 
Array.of(1, 2, 3, 4, 5)

Run

Array.indexOf()Pure

Returns the first index at which a given element can be found in the array, or -1 if it is not present. More

 
emojis.indexOf("☕️")

Run

 
emojis.indexOf("👙")

Run

 
emojis.indexOf("🍶")

Run

Array.keys()Pure

Returns a new Array Iterator object that contains the keys for each index in the array. More

 
let copyEmoji = ""
var iterator = emojis.keys()
for (let key of iterator) {
  copyEmoji += key; // expected output: 0 1 2
}
copyEmoji

Run

Array.lastIndexOf()Pure

Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex. More

 
emojis.lastIndexOf("🍻")

Run

 
emojis.lastIndexOf("👙")

Run

 
emojis.lastIndexOf("💪")

Run

Array.map()Pure

Creates a new array with the results of calling a provided function on every element in the calling array. More

 
var array = [1, 4, 9, 16]
array.map(x => x * 2)

Run

Array.reduceRight()Impure

Applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value. More

 
[[0, 1], [2, 3], [4, 5]].reduceRight(
  (previousValue, currentValue) => previousValue.concat(currentValue)
)

Run

Array.some()Pure

Tests whether at least one element in the array passes the test implemented by the provided function. More

 
var array = [1, 2, 3, 4, 5]
var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
}
array.some(even)

Run

Array.toLocaleString()Pure

Returns a string representing the elements of the array. The elements are converted to Strings using their toLocaleString methods and these Strings are separated by a locale-specific String (such as a comma “,”). More

 
var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")]
array1.toLocaleString("en", {timeZone: "UTC"})

Run

Array.unshift()Impure

Adds one or more elements to the beginning of an array and returns the new length of the array. More

 
emojis.unshift("🍺","🍻")

Run

Array.values()Pure

Returns a new Array Iterator object that contains the values for each index in the array. More

 
let copyArray = ""
const array = ["a", "b", "c"]
const iterator = array.values()
for (const value of iterator) {
  copyArray += value // 
}
copyArray

Run

Array[Symbol.iterator]()Pure

Property is the same function object as the initial value of the values() property. More

 
let copyArray = ""
var arr = ["w", "y", "k", "o", "p"]
var eArr = arr[Symbol.iterator]()
for (let letter of eArr) {
  copyArray += letter
}
copyArray

Run

Star Fork

Made with 🍺 and