How to Get Character Array from String in JavaScript ?

The string is defined as a sequence of characters. In this article, we will learn how to get a character array from a string in JavaScript.

Table of Content

  • JavaScript String split() Function
  • JavaScript Array.from() Function
  • JavaScript Spread Operator
  • Using for … of Loop
  • Using Array.prototype.map()
  • Using Array Destructuring
  • Using String.prototype.charAt() Method in a Loop

JavaScript String split() Function

The str.split() function is used to split the given string into an array of strings by separating it into substrings using a specified separator provided in the argument. 

Syntax:

str.split(separator, limit);

Example: In this example, we will get a character array from the string using the JavaScript split() method.

Javascript
// Input string
let str = "w3wiki";

// Use string.split() to Get Character Array
let arr = str.split("");
             
// Display output
console.log(arr);

Output
[
  'G', 'e', 'e', 'k',
  's', 'f', 'o', 'r',
  'G', 'e', 'e', 'k',
  's'
]

JavaScript Array.from() Function

The Array.from() function creates a new array instance from a given array. In case of string, every alphabet of the string is converted to an element of the new array instance, and in the case of integer values, a new array instance simply takes the elements of the given array. 

Syntax:

Array.from(str);

Example: In this example, we will get a character array from the string using the Array.from() function in JavaScript.

Javascript
// Input array
let str = "w3wiki: A computer science portal";

// Getting char array
let arr = Array.from(str);
          
// Display output          
console.log(arr);

Output
[
  'G', 'e', 'e', 'k', 's', 'f', 'o',
  'r', 'G', 'e', 'e', 'k', 's', ':',
  ' ', 'A', ' ', 'c', 'o', 'm', 'p',
  'u', 't', 'e', 'r', ' ', 's', 'c',
  'i', 'e', 'n', 'c', 'e', ' ', 'p',
  'o', 'r', '...

JavaScript Spread Operator

The Spread operator allows an iterable to expand in place. In the case of a string, it example string into character and we capture all the characters of a string in an array.

Syntax:

let variableName = [ ...value ];

Example: In this example, we will get a character array from the string using the spread operator in JavaScript.

Javascript
//Input array
let str = "w3wiki";

//Display output using spread operator
console.log([...str]);

Output
[
  'G', 'e', 'e', 'k',
  's', 'f', 'o', 'r',
  'G', 'e', 'e', 'k',
  's'
]

Using for … of Loop

JavaScript for of statement iterates over the values of an iterable object (like Array, Map, Set, arguments object, …,etc), executing statements for each value of the object.

Syntax:

for ( variable of iterableObjectName) {
...
}

Example: In this example, we are using for…of… loop.

Javascript
const s = '12345';
const a = [];
for (const s1 of s) {
   a.push(s1);
}
console.log(a);

Output
[ '1', '2', '3', '4', '5' ]

Using Array.prototype.map()

The Array.prototype.map() approach creates a character array from a string by mapping each character to itself. It iterates over the string, applying a function to each character, and returns a new array with the transformed characters.

Example: In this example we are using Array.prototype.map() with Array.prototype.call() to convert the string into a character array, mapping each character individually. Output: an array of characters.

JavaScript
let str = "w3wiki: A computer science portal";

// Getting char array using Array.prototype.map()
let arr = Array.prototype.map.call(str, char => char);

console.log(arr);

Output
[
  'G', 'e', 'e', 'k', 's', 'f', 'o',
  'r', 'G', 'e', 'e', 'k', 's', ':',
  ' ', 'A', ' ', 'c', 'o', 'm', 'p',
  'u', 't', 'e', 'r', ' ', 's', 'c',
  'i', 'e', 'n', 'c', 'e', ' ', 'p',
  'o', 'r', '...

Using Array Destructuring

Array destructuring can be used to directly extract individual characters from a string into an array.

Example: In this example, we use array destructuring to extract each character from the string into an array.

JavaScript
// Input string
let str = "w3wiki";

// Use array destructuring to directly extract characters into an array
let arr = [...str];

// Display output
console.log(arr);

Output
[
  'G', 'e', 'e', 'k',
  's', 'f', 'o', 'r',
  'G', 'e', 'e', 'k',
  's'
]

Using String.prototype.charAt() Method in a Loop

Another approach to convert a string to a character array in JavaScript is by using the charAt() method in a loop. This method retrieves the character at a specified index in a string. By iterating through the string, you can construct an array of characters.

Example:

In this example, we will use a for loop along with the charAt() method to get a character array from a string.

JavaScript
// Input string
let str = "w3wiki";

// Initialize an empty array to hold characters
let charArray = [];

// Use a for loop to iterate over the string and use charAt() to get each character
for (let i = 0; i < str.length; i++) {
    charArray.push(str.charAt(i));
}

// Display output
console.log(charArray);

Output
[
  'G', 'e', 'e', 'k',
  's', 'f', 'o', 'r',
  'G', 'e', 'e', 'k',
  's'
]

arn JavaScript from this JavaScript Tutorial and practice on JavaScript Examples.



Contact Us