Skip to main content

Array methods in JavaScript: A guide with examples and exercises

Array methods in JavaScript

Master array methods in JavaScript. Learn to manipulate and transform arrays with clear examples and practical exercises.

What are array methods in JavaScript?​

Array methods in JavaScript are built-in functions that allow you to perform various operations on arrays, such as adding, removing, transforming, and iterating over elements. These methods facilitate the efficient and concise manipulation of data stored in arrays.

Common array methods in JavaScript​

###push()

The methodpush()Adds one or more elements to the end of an array and returns the new length of the array.

let frutas = ["manzana", "banana"];

frutas.push("naranja");

console.log(frutas); // ["manzana", "banana", "naranja"]

###pop()

The methodpop()Removes the last element from an array and returns it. This method modifies the array's length.

let frutas = ["manzana", "banana", "naranja"];

let ultimaFruta = frutas.pop();

console.log(ultimaFruta); // "naranja"

console.log(frutas); // ["manzana", "banana"]

###shift()

The methodshift()Removes the first element from an array and returns it. This method modifies the array's length.

let frutas = ["manzana", "banana", "naranja"];

let primeraFruta = frutas.shift();

console.log(primeraFruta); // "manzana"

console.log(frutas); // ["banana", "naranja"]

###unshift()

The methodunshift()Adds one or more elements to the beginning of an array and returns the new length of the array.

let frutas = ["banana", "naranja"];

frutas.unshift("manzana");

console.log(frutas); // ["manzana", "banana", "naranja"]

###map()

The methodmap()creates a new array with the results of the call to a provided function applied to each element of the original array.

let numeros = [1, 2, 3, 4];

let cuadrados = numeros.map((num) => num * num);

console.log(cuadrados); // [1, 4, 9, 16]

###filter()

The methodfilter()Create a new array containing all elements that meet the condition implemented by the provided function.

let numeros = [1, 2, 3, 4, 5, 6];

let pares = numeros.filter((num) => num % 2 === 0);

console.log(pares); // [2, 4, 6]

###reduce()

The methodreduce()It applies a function to an accumulator and to each value in the array (from left to right) to reduce it to a single value.

let numeros = [1, 2, 3, 4];

let suma = numeros.reduce((acumulador, num) => acumulador + num, 0);

console.log(suma); // 10

###forEach()

The methodforEach()It executes a provided function once for each element of the array. It does not return a new array.

let frutas = ["manzana", "banana", "naranja"];

frutas.forEach((fruta) => console.log(fruta));

// Imprime:

// manzana

// banana

// naranja

###find()

The methodfind()It returns the first element of the array that meets the condition implemented by the provided function. If no element meets the condition, it returnsundefined

let numeros = [1, 2, 3, 4, 5];

let numeroMayorQueTres = numeros.find((num) => num > 3);

console.log(numeroMayorQueTres); // 4

###includes()

The methodincludes()determines if an array includes a certain element, returningtrue either falseas appropriate.

let frutas = ["manzana", "banana", "naranja"];

let tieneBanana = frutas.includes("banana");

console.log(tieneBanana); // true

###slice()

The methodslice()Returns a shallow copy of a portion of the array into a new array, without modifying the original array. Start and end indices can be specified.

let frutas = ["manzana", "banana", "naranja", "pera", "uva"];

let algunasFrutas = frutas.slice(1, 4);

console.log(algunasFrutas); // ["banana", "naranja", "pera"]

###splice()

The methodsplice()Changes the contents of an array by removing, replacing, or adding elements at a specific position. Modifies the original array and returns an array with the removed elements.

let frutas = ["manzana", "banana", "naranja", "pera"];

let eliminadas = frutas.splice(1, 2, "kiwi", "mango");

console.log(eliminadas); // ["banana", "naranja"]

console.log(frutas); // ["manzana", "kiwi", "mango", "pera"]

###join()

The methodjoin()Joins all elements of an array into a string, separating them with a specified separator. If no separator is specified, a comma is used by default.

let frutas = ["manzana", "banana", "naranja"];

let cadena = frutas.join(" - ");

console.log(cadena); // "manzana - banana - naranja"

###sort()

The methodsort()Sorts the elements of an array in place and returns the sorted array. By default, the elements are converted to strings and sorted lexicographically.

let numeros = [3, 1, 4, 1, 5, 9];

numeros.sort((a, b) => a - b);

console.log(numeros); // [1, 1, 3, 4, 5, 9]

Conclusion​

Array methods in JavaScript are powerful tools that facilitate the manipulation and transformation of data stored in arrays. From adding and removing elements to transforming and filtering data, these methods allow you to write cleaner and more efficient code. Practicing their use through examples and exercises is essential to mastering their application in web development.

Resources
Exercises

💻Try this basic exercise on array methods in JavaScript: