Increment the Values in an Array using JavaScript

avatar

Borislav Hadzhiev

Thu Nov 11 20212 min read

banner

Photo by Chewy

Increment the Values in an Array #

Use the map() method to increment the values in an array, e.g. arr.map(num => num + 1). The map method will return a new array where each value of the original array is incremented by the supplied number.

index.js
const arr = [1, 2, 3]; // โœ… Increment all values (new array) const newArr = arr.map(num => num + 1); console.log(newArr); console.log(newArr); // ๐Ÿ‘‰๏ธ [2, 3, 4] // โœ… Increment single value (in place) arr[0] += 1; console.log(arr[0]); // ๐Ÿ‘‰๏ธ 2 arr[0] = arr[0] + 1; console.log(arr[0]); // ๐Ÿ‘‰๏ธ 3

The function we passed to the Array.map method gets called with each element in the array.

Whatever we return from the function gets added to the new array the map() method returns.

On each iteration, we add 1 to the current number and return the result.

The Array.map() method does not mutate the original array, it returns a new array.

Alternatively, you can use the Array.forEach method to increment the values in place.

Use the forEach() method to increment the values in an array. The forEach method takes a function which gets called for each element in the array. On each iteration, increment the element at the specific index by 1.

index.js
const arr = [1, 2, 3]; arr.forEach((num, index) => { arr[index] = num + 1; }); console.log(arr); // ๐Ÿ‘‰๏ธ [2, 3, 4]

The function we passed to the forEach() method gets called for each element in the array.

We access the element at the current index and increment its value by 1.

The map() method returns an array, however forEach returns undefined, which means that we mutate the original array, changing its values in place.

To increment a value in an array, you can use the addition assignment (+=) operator, e.g. arr[0] += 1. The operator adds the value of the right operand to the array element at the specific index and assigns the result to the element.

index.js
const arr = [1, 2, 3]; arr[0] += 1; console.log(arr[0]); // ๐Ÿ‘‰๏ธ 2 arr[0] = arr[0] + 1; console.log(arr[0]); // ๐Ÿ‘‰๏ธ 3

The addition assignment (+=) operator is a shorthand for myVariable = myVariable + value.

Indexes are zero-based in JavaScript, meaning the first element in the array has an index of 0, and the last - an index of array.length - 1.

When you access the array at the specific index and assign a new value to it, you mutate the original array and change its value in place.

Note that when using the addition assignment (+=) operator with primitives like strings or numbers, the variable has to be declared using the let keyword.

index.js
let a = 1; a += 5; console.log(a); // ๐Ÿ‘‰๏ธ 6 // ๐Ÿ‘‡๏ธ same as above a = a + 5; console.log(a) // ๐Ÿ‘‰๏ธ 11 const b = 1; // โ›”๏ธ SyntaxError: Assignment to constant variable. b ++ 5;

When using the addition assignment (+=) operator with primitives, we reassign the variable.

This is not the case with arrays or objects, where we change the value of a specific element and not reassign the variable that stores the array / object.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee