Working with JavaScript Array of Strings

Today, we will explore the world of JavaScript arrays of strings.

When working with textual data, string arrays play an important role.

Keep reading! To learn how to work with string arrays, manipulate them effectively, and utilize them in your code correctly.

What is Array of String?

A string array is simply an array that contains multiple string values. An array is a variable that can hold multiple values of the same type.

String array specifically, stores string values, which are combinations of characters.

How to create and initialize arrays of strings?

To create an array of strings in JavaScript, you can use the array literal syntax or the Array constructor.

For example:

let sampleArray = ["it", "source", "code"];
console.log(sampleArray)

Output:

[ 'it', 'source', 'code' ] 

Or we can also use the new keyword to create an array of strings in JavaScript.

let sampleArray = new Array("hi", "welcome", "to", "it", "source", "code");
console.log(sampleArray)

Output:

[ 'hi', 'welcome', 'to', 'it', 'source', 'code' ]

How to access and modify elements in an array of strings?

You can access elements in an array of strings using bracket notation, where the index of the first element is 0.

For example:

let sampleArray = ["it", "source", "code"];
console.log(sampleArray[0]); // "it"
sampleArray[1] = "new value";
console.log(sampleArray); // ["it", "new value", "code"]

Output:

it
[ 'it', 'new value', 'code' ]

Here’s the additional example of accessing and modifying elements in an array of strings:

Adding elements

You can add elements to an array using methods like push (to add to the end) or unshift (to add to the beginning).

For example:

const sampleArray = ["it", "source", "code"];
sampleArray.push("offers free sourcecode");
console.log(sampleArray);

Output:

[ 'it', 'source', 'code', 'offers free sourcecode' ]

Removing elements

You can remove elements from an array using methods like pop (to remove from the end) or shift (to remove from the beginning).

Here’s an example of pop:

const sampleArray = ["it", "source", "code"];
sampleArray.pop();
console.log(sampleArray);

Output:

[ 'it', 'source' ]

Here’s an example of shift:

const sampleArray = ["it", "source", "code"];
sampleArray.shift();
console.log(sampleArray);

Output:

[ 'source', 'code' ]

How to use built-in array methods with arrays of strings?

JavaScript provides many built-in methods for working with arrays, including arrays of strings.

Here are some examples of how to use the built-in array methods with arrays of strings:

join() method

This method concatenates all elements in an array into a string. Here’s an example:

let str = ["it", "source", "code"];
let result = str.join(", ");
console.log(result); 

Output:

it, source, code

slice() method

This method returns a new array containing a portion of the original array.

Here’s an example:

let str = ["it", "source", "code"];
let result = str.slice(1, 3);
console.log(result); 

Output:

[ 'source', 'code' ]

indexOf() method

This method returns the first index at which a given element can be found in the array.

Here’s an example:

let str = ["it", "source", "code"];
let result =str.indexOf("code");
console.log(result); 

Output:

2

splice() method

This method changes the contents of an array by removing or replacing existing elements and/or adding new elements.

Here’s an example:

const sampleArray = ["it", "source", "code"];
sampleArray.splice(1, 1, "example");
console.log(sampleArray);

Output:

[ 'it', 'example', 'code' ]

map() method

This method creates a new array with the results of calling a provided function on every element in the calling array.

Here’s an example:

const sampleArray = ["it", "source", "code"];
const mapped = sampleArray.map(samarr => samarr.toUpperCase());
console.log(mapped);

In this example we use the toUpperCase() method.

Output

[ 'IT', 'SOURCE', 'CODE' ]

filter() method

This method creates a new array with all elements that pass the test implemented by the provided function.

Here’s an example:

const sampleArray = ["it", "source", "code"];
const filtered = sampleArray.filter(samarr => samarr.length > 4);
console.log(filtered);

Output:

[ 'source' ]

How to convert an array of strings to a string?

To convert an array of strings to a string in JavaScript, you can use the join() method, which concatenates all elements in an array into a string.

For example:

let sampleArray = ["it", "source", "code"];
console.log(sampleArray.join());

Output:

it,source,code

How to sort an array of strings in JavaScript? 

You can sort an array of strings in JavaScript using the sort() method.

The sort() method sorts the elements in ascending order by default, converting them to strings and comparing their sequences of UTF-16 code units values .

Here’s an example:

const sampleArray = ["source", "code", "it"];
sampleArray.sort();
console.log(sampleArray);

Output:

[ 'code', 'it', 'source' ]

How to convert an Array of Strings to numbers in JavaScript

You can convert an array of strings to numbers in JavaScript using the map() method.

Here’s an example:

const stringArray = ["1", "2", "3", "4", "5"];
const numberArray = stringArray.map(Number);
console.log(numberArray);

Output:

[ 1, 2, 3, 4, 5 ]

In this example, we use the map() method to create a new array with the results of calling the Number function on every element in the calling array. This converts each string element to a number.

Here’s another solution

You can use the parseInt() function to parse a string argument and return an integer.

You can loop through each element in the array of strings and use parseInt() to convert each element to a number.

let stringArray = ["1", "2", "3", "4", "5"];
let numberArray = [];
for (let i = 0; i < stringArray.length; i++) {
    numberArray.push(parseInt(stringArray[i]));
}
console.log(numberArray);

Output:

[ 1, 2, 3, 4, 5 ]

Conclusion

In conclusion, this article provides a comprehensive exploration of working with JavaScript arrays of strings.

This article explains the concept of string arrays and demonstrates how to create and initialize them using various methods, such as array literals and constructors.

The article also covers essential operations like accessing and modifying elements in a string array, including adding and removing elements.

Moreover, it explores how to use built-in array methods specifically tailored for arrays of strings, such as join(), slice(), indexOf(), splice(), map(), and filter().

We are hoping that this article provides you with enough information that helps you understand JavaScript array of strings.

You can also check out the following article:

• JavaScript touppercase
• JavaScript array return
• JavaScript breakpoint

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →