JavaScript function to prepend string into all the values of array?

In this article, we will learn to prepend a string into all the values of an array in JavaScript. Arrays are versatile data structures used to store multiple elements of similar or mixed types. A common operation is prepending a string to each element of an array, which involves adding a specified string at the beginning of each element.

Problem Statement

Given a string to prepend and an array of values, we need to add the string at the beginning of each array element and return the modified array.

Example Input:

const str = "Hello";
const stringArray = ["naman", "priya", "rishi"];

Expected Output:

[ 'Hellonaman', 'Hellopriya', 'Hellorishi' ]

Method 1: Using for Loop (In-place Modification)

This approach modifies the original array by iterating through each element and prepending the string.

function prependString(str, stringArray) {
    for (let i = 0; i < stringArray.length; i++) {
        stringArray[i] = str + stringArray[i];
    }
    return stringArray;
}

const str = "Hello";
const stringArray = ["naman", "priya", "rishi"];
const result = prependString(str, stringArray);
console.log(result);

[ 'Hellonaman', 'Hellopriya', 'Hellorishi' ]

Method 2: Using map() (Creates New Array)

The map() method creates a new array with prepended strings, leaving the original array unchanged.

function prependStringMap(str, stringArray) {
    return stringArray.map(element => str + element);
}

const str = "Hello";
const stringArray = ["naman", "priya", "rishi"];
const result = prependStringMap(str, stringArray);

console.log("Original array:", stringArray);
console.log("New array:", result);

Original array: [ 'naman', 'priya', 'rishi' ]
New array: [ 'Hellonaman', 'Hellopriya', 'Hellorishi' ]

Method 3: Using Template Literals

Template literals provide a cleaner syntax for string concatenation.

function prependWithTemplate(str, stringArray) {
    return stringArray.map(element => `${str}${element}`);
}

const str = "Hello";
const stringArray = ["naman", "priya", "rishi"];
const result = prependWithTemplate(str, stringArray);
console.log(result);

[ 'Hellonaman', 'Hellopriya', 'Hellorishi' ]

Comparison

Handling Different Data Types

When working with mixed arrays, convert non-string elements to strings first:

function prependToMixed(str, array) {
    return array.map(element => str + String(element));
}

const mixedArray = ["text", 123, true, null];
const result = prependToMixed("prefix_", mixedArray);
console.log(result);

[ 'prefix_text', 'prefix_123', 'prefix_true', 'prefix_null' ]

Conclusion

Prepending strings to array elements can be accomplished using for loops, map(), or template literals. Use for loops for in-place modification, and map() when you need to preserve the original array. Template literals offer cleaner syntax for string concatenation.