7 Ways to increment JavaScript Array Values

In this blogpost, we will see 7 ways to increment Array numerical values in JavaScript. We’ll also corner cases involving Recursion, checking Data Type and do a practice question to cement the concepts.

Lets dive in! 👨‍💻

Refresher: Arrays in JavaScript:

Arrays in JavaScript are special objects used to store ordered collections. They’re like lists where each item has a numeric index. Key methods:

• .push() adds items to the end.
• .pop() removes the last item.
• .map() creates a new array with the results of calling a function for every array element.
• .filter() creates a new array with all elements that pass a test implemented by the provided function.
• .reduce() executes a reducer function on each element, resulting in a single output value.

// Array Methods:

//   Construction and pushin elements
let fruits = ['Apple', 'Banana']; // Construction
fruits.push('Cherry'); // Pushing elements
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']

//   Popping Array elements:
fruits.pop();
console.log(fruits); // Output: ['Apple', 'Banana']

//   Map elements from one to another array using a function
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6]

//   Filter elements passing a test.
const filtered = numbers.filter(num => num > 1);
console.log(filtered); // Output: [2, 3]

// Reduce the array to a single value:
const sum = numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 6

Ways to increase Array values in JavaScript

Using Array.map() Method

The map() method can create a new array with transformed elements using a callback function. This callback function is applied to each element in the array, and returns a new array. So there’s no mutation of the original array; it creates a new one.

Lets see an example of incrementing all numerical values of an array by 1.

let numbers = [1, 2, 3, 4, 5]; 
console.log(numbers); // Output: [1, 2, 3, 4, 5]

// Lets increment all these values by 1:

let incremented = numbers.map(number => number + 1);
console.log(incremented); // Output: [2, 3, 4, 5, 6]

Using forEach() method

Unlike map() (which returns new array), we can use forEach() to mutate the existing array itself. Alternatively we can push altered elements one by one in a separate array (which keeps original array unaltered).

See both approaches below, for incrementing all values in array by 1.

const numbers =[1,2,3,4];

// 1️⃣ Pushing into New Array (Original array unmutated):
numbersAltered = [];
numbers.forEach(number => numbersAltered.push(number + 1));
console.log('Incremented Numbers: ', numbersAltered);
console.log('Unumated Original Array:', numbers);
// Output: 👇
//  Incremented Numbers:  [ 2, 3, 4, 5 ]
//  Unumated Original Array: [ 1, 2, 3, 4 ]

// 2️⃣ Mutating original `numbers` array itself:
numbers.forEach((number, index, arr) => arr[index] = number + 1);
console.log('Mutated Original Array', numbers); // Output: [2, 3, 4, 5, 6]
// Output: 👇
//  Mutated Original Array [ 2, 3, 4, 5 ]

• forEach() can take 3 Parameters:
  • number represents the current element.
  • index is the position of the current element.
  • arr refers to the array forEach() is being applied to.
• Note that forEach returns undefined, so to accumulate results, either modify existing array or push into new array within each iteration.
• In first example, we only used number, but in second example we use index and array as well.

Using for Loop

Classic for loop can iterate over the array, and give full control of each element during iteration. Can mutate existing array, or you can create a new array and push elements one by one and avoid mutating original array. See both examples below.

// 1️⃣ Mutating existing Array:
for (let i = 0; i < numbers.length; i++) {
  numbers[i]++;
}
console.log(numbers); // Output: [2, 3, 4, 5, 6]

// 2️⃣ Creating separate array and not mutating source array:
const newArray = [];
for (let i = 0; i < numbers.length; i++) {
  newArray.push(numbers[i] + 1);
}
console.log(numbers); // Output: [2, 3, 4, 5, 6]
console.log(newArray); // Output: [3, 4, 5, 6, 7]

Using ES6 Syntactic Sugars: Spread and Arrow

We can use ES6 features of spread operator and arrow functions for incrementing array values. This method creates a new array and does not mutate the original. Code below:

let incremented = [...numbers].map(n => n + 1);
console.log(incremented); // Output: [3, 4, 5, 6, 7]

Using Recursion to increment Nested Array values in JavaScript

Recursion is a programming technique where a function calls itself to solve a problem. In context of this blogpost, Recursion is particularly useful for Nested Arrays, or Multidimensional Arrays.

Understanding Recursion: Recursion involves breaking down a problem into smaller, more manageable parts, and then solving each part by applying the same function. It’s like those Matryoshka nested dolls, where each doll opens up to reveal a smaller one inside, similar to how each recursive call breaks down the problem into a smaller subset.

In following example, we’ll use a recursive function to increment each value in an array. This function will check if an element is a number, if yes then it increments it. But if it encounters a nested array, then it will call itself (recurse) on that nested array.

function incrementArrayRecursively(arr) {
    return arr.map(element => {
        if (Array.isArray(element)) {
            // If the element is an array, recurse on this nested array
            return incrementArrayRecursively(element);
        } else {
            // If it's a number, increment it
            return element + 1;
        }
    });
}

let exampleArray = [1, [2, 3], 4];
let incrementedArray = incrementArrayRecursively(exampleArray);
console.log(incrementedArray); // Output: [2, [3, 4], 5]

• Base Case and Recursive Call: In recursive functions, we usually have a base case and a recursive call. In our example, the base case is when the function encounters a number (element + 1), and the recursive call is made when it encounters a nested array (incrementArrayRecursively(element)).
• The map() Method: We use map() to iterate over each element of the array. map() is ideal here as it returns a new array, thus preserving the immutability of the original array.
• Handling Nested Arrays: The function checks if an element is an array using Array.isArray(element). If true, it recursively calls incrementArrayRecursively on this nested array.
• Incrementing Values: For non-array elements, it simply increments the value by 1.
• Termination: The recursion terminates when all nested arrays have been flattened, and all number elements have been incremented.

This recursive approach is particularly powerful for handling arrays of unknown depth or complexity. But note that there are Stack depth limitation limiting recursion depth (else Stack Overflow Error occurs).

Incrementing Multidimensional Array values in JavaScript

Approach might differ depending dimensionality. Lets say you know only 2 dimensional array exists, then you can simply use nested map calls as below:

let matrix = [[1, 2], [3, 4]];
let incrementedMatrix = matrix.map(row => row.map(n => n + 1));
console.log(incrementedMatrix); // Output: [[2, 3], [4, 5]]

• To increment each value in this 2D array, we use the map() method twice: once for the outer array (each row of the matrix) and once for each inner array (each element of the row).
• matrix.map(...): This first map() call iterates over each row in the matrix.
  • row => ...: For each row (which is itself an array), we apply another map() method.
  • row.map(n => n + 1): This second map() call iterates over each element (n) in the current row (sub-array) and increments it by 1.
  • The result of this inner map() is a new array where each element of the original row has been incremented.
• The outer map() then constructs a new 2D array from these modified rows.

But if lots of dimensions, then recursion might be more elegant.

Lets consider following example of nested array which can have even unknown depth of nested arrays, and say we want to increment all the values. We can use a function which first checks whether an element is an array itself and, if so, recursively calls itself; otherwise, it increments the value.

function incrementNestedArray(arr) {
    return arr.map(element => {
        if (Array.isArray(element)) {
            // Recursive call for nested arrays
            return incrementNestedArray(element);             
        }
        // Increment the value if it's not an array
        return element + 1; 
    });
}

let nestedArray = [1, [2, [3, 4], 5], 6];
let incrementedArray = incrementNestedArray(nestedArray);
console.log(incrementedArray); // Output: [2, [3, [4, 5], 6], 7]

Tips on incrementing Array values in JavaScript

Check data type & value before incrementing

JavaScript is a loosely typed language, and do increment operation between different data types (String, Number, Boolean, etc) and values (null, NaN or undefined) in unexpected ways.

Incrementing values in an array in JavaScript requires careful consideration of the data types involved, as JavaScript is a loosely typed language and handles data types in ways that can lead to unexpected results. Here are some key points and potential complications to be aware of:

String Concatenation Instead of Arithmetic Addition:

• In JavaScript, if an element in an array is a string that looks like a number (e.g., "2"), using the + operator will result in string concatenation, not arithmetic addition. For example, "2" + 1 will yield "21" instead of 3.
• Solution: Ensure that the data is of the correct type. Convert strings to numbers using methods like parseInt(), parseFloat(), or the unary + operator before performing arithmetic operations.

let mixedArray = ["2", 1, "3"];

// Incorrect approach: String concatenation occurs instead of addition
let concatenatedResult = mixedArray.map(element => element + 1);
console.log(concatenatedResult); // Output: ["21", 2, "31"]

// Correct approach: Convert strings to numbers before addition
let correctedResult = mixedArray.map(element => 
    (typeof element === 'string' ? parseInt(element) : element) + 1
);
console.log(correctedResult); // Output: [3, 2, 4]

Type Coercion

• JavaScript performs type coercion in certain contexts, which means it can automatically convert values from one type to another. This can lead to unexpected results when incrementing values.
• Example: true + 1 will result in 2, as true is coerced to 1.

// Type coercion with a boolean value
let boolValue = true;
console.log(boolValue + 1); // Output: 2 (true is coerced to 1)

// Avoiding unintended type coercion by being explicit about them
let numericBoolValue = Number(boolValue);
console.log(numericBoolValue + 1); // Output: 2

Handling Non-Numeric Values:

• Arrays might contain non-numeric values like null, undefined, or NaN. Incrementing these values can lead to NaN or unintended results.
• Solution: Check for non-numeric values using typeof or isNaN() before performing operations.

let mixedValues = [1, 'a', null, undefined, 5];

// Attempting to increment non-numeric values
let incrementedMixed = mixedValues.map(element => {
    if (typeof element === 'number') {
        return element + 1;
    }
    return element;
});
console.log(incrementedMixed); // Output: [2, 'a', null, undefined, 6]

Floating Point Precision:

• JavaScript uses floating-point arithmetic for all number operations, which can lead to precision issues, especially with decimal numbers.
• Example: 0.1 + 0.2 does not exactly equal 0.3 in JavaScript.
• Solution: To handle decimal operations, round the results to the desired precision using methods like toFixed().

// Floating-point arithmetic issue
console.log(0.1 + 0.2); // Output: 0.30000000000000004

// Corrected approach using toFixed()
let sum = (0.1 + 0.2).toFixed(2);
console.log(sum); // Output: "0.30" (Note: toFixed() returns a string)

// Converting back to a number
let numericSum = parseFloat(sum);
console.log(numericSum); // Output: 0.3

Sparse Arrays:

• JavaScript arrays can be sparse, meaning they can have empty slots. Iterating and incrementing values in sparse arrays can lead to unexpected behavior, as missing indices are treated as undefined.
• Solution: Ensure the array is dense (no missing elements) or handle potential undefined values explicitly.

let sparseArray = [];
sparseArray[3] = 3;

// Attempting to increment values in a sparse array
let incrementedSparse = sparseArray.map(element => element + 1);
console.log(incrementedSparse); // Output: [undefined × 3, 4]

// Handling undefined values explicitly
let correctedSparse = sparseArray.map(element => (element || 0) + 1);
console.log(correctedSparse); // Output: [1, 1, 1, 4]

🧪Practice Coding Problem: Array Increment Mastery ↗

In the spirit of Test Driven Development ( 😁), lets test our understanding by solving a problem.

Write a function that not only doubles the value of each element in an array but also checks for non-numeric values, handling them gracefully.

Problem (JavaScript)

/**
 * Doubles the numeric values in an array, ignoring non-numeric values.
 * @param {Array} arr - The array to process.
 * @return {Array} A new array with doubled values for numeric elements.
 */
function doubleNumericValues(arr) {
  // > > > 👉 Write code here 👈 < < <
}

console.log(doubleNumericValues([1, 'a', 3, { val: 4 }, 5])); 
// Expected Output: [2, 'a', 6, { val: 4 }, 10]

function doubleNumericValues(arr) {
    return arr.map(element => {
        if (typeof element === 'number') {
            return element * 2;
        }
        return element;
    });
}

Now you are a master in incrementing numeric values in JavaScript Array. ↗

Keep learning, keep experimenting and keep coding! 🚀👨‍💻