Skip to main content

How to Increment the Values in a JavaScript Array

A common data transformation task is to take an array of numbers and create a new array where each number has been incremented by a certain amount. This is a classic use case for functional programming methods that operate on arrays.

This guide will demonstrate the modern and recommended best practice for this task using Array.prototype.map(). We will also cover the more traditional, mutating approach using Array.prototype.forEach() for comparison.

The Core Task: Incrementing Array Values​

The goal is to take an input array of numbers and produce an output array where each corresponding number is larger by a specific amount (e.g., +1).

For example, you have an array of numbers and you want to add 1 to every element.

// Problem: Create a new array where each element is incremented by 1.
const numbers = [10, 20, 30];

The map() method is the perfect tool for this job. It creates a new array by calling a provided function on every element in the input array. It is a non-mutating, functional approach, which is the preferred standard in modern JavaScript.

const numbers = [10, 20, 30];

// For each number, return that number + 1.
const incrementedNumbers = numbers.map(num => num + 1);

console.log(incrementedNumbers); // Output: [11, 21, 31]

// The original array is unchanged.
console.log(numbers);            // Output: [10, 20, 30]
note

This method is concise, readable, and safe because it does not modify the original data.

The Mutating Method: Array.prototype.forEach()​

If your goal is to modify the original array in place, you can use the forEach() method. This approach is less common in modern functional code but can be useful in certain contexts.

The forEach() callback receives both the element and its index, which allows you to reassign the value at that position in the original array.

const numbers = [10, 20, 30];

numbers.forEach((num, index, arr) => {
  // Directly modify the element at the current index in the original array.
  arr[index] = num + 1;
});

console.log(numbers); // Output: [11, 21, 31] (The original array is now changed)
note

While this works, the map() method is generally preferred for transformations because it avoids side effects (mutating data).

How map() Works (Non-mutating)​

The Array.prototype.map() method is a core concept in functional programming. newArray = oldArray.map(callbackFunction)

  1. map() is called on an existing array.
  2. It iterates over every element in that array, from the first to the last.
  3. For each element, it calls the callbackFunction you provided.
  4. It takes the return value from your callback function and pushes it into a new array.
  5. After iterating through all the elements, it returns the newly created array.

In our example, num => num + 1 is the callback function. For the element 10, it returns 11. For 20, it returns 21, and so on. These return values are collected to form the incrementedNumbers array.

Incrementing a Single Value by Index​

If you only need to increment a specific value in an array (and not all of them), you don't need a loop. You can access the element directly using its index and reassign its value.

const scores = [95, 88, 76];

// Increment the score at index 1 (the second element).
// JavaScript array indices are zero-based.
scores[1] += 5; // Shorthand for scores[1] = scores[1] + 5;

console.log(scores); // Output: [95, 93, 76]
note

This directly mutates the scores array.

Conclusion​

Incrementing the values in a numeric array is a simple transformation task with a clear best practice in modern JavaScript.

  • The Array.prototype.map() method is the recommended best practice. It is a non-mutating, functional, and highly readable way to create a new array with the transformed values.
  • The Array.prototype.forEach() method is a valid alternative if you have a specific need to mutate the original array in place.
  • For incrementing a single element, direct access via its index (array[i] += value) is the most efficient approach.

Table of Contents