Split a String and get First or Last Array Element in JS

avatar
Borislav Hadzhiev

Last updated: Jan 9, 2023
5 min

banner

# Split a String and get First or Last Array Element in JS

To split a string and get the first or last array element:

  1. Use the split() method to split the string into an array.
  2. Use the shift() method to get the first array element.
  3. Use the pop() method if you need to get the last array element.
index.js
// โœ… split a string and get First element const str = 'bobby,hadz,com'; const firstElement = str.split(',').shift(); console.log(firstElement); // ๐Ÿ‘‰๏ธ bobby

split string and get first or last array element

If you need to get the last array element after splitting the string, use the Array.pop() method instead.

index.js
// โœ… split a string and get Last element const str = 'bobby,hadz,com'; const lastElement = str.split(',').pop(); console.log(lastElement); // ๐Ÿ‘‰๏ธ com

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

NameDescription
separatorThe pattern describing where each split should occur.
limitAn integer used to specify a limit on the number of substrings to be included in the array.

We split the string on each comma but you can use any other character.

index.js
const str = 'bobby-hadz-com'; // ๐Ÿ‘‡๏ธ [ 'bobby', 'hadz', 'com' ] console.log(str.split('-'));

The Array.shift method removes the first element from the array and returns it.

You would use the Array.pop() method if you only want to get the last element after splitting.

index.js
const str = 'bobby,hadz,com'; const lastElement = str.split(',').pop(); console.log(lastElement); // ๐Ÿ‘‰๏ธ com

The Array.pop() method removes and returns the last element from an array.

# Split a String and get the First or Last Array Element using Array.at()

This is a two-step process:

  1. Use the split() method to split the string into an array.
  2. Use the Array.at() method to get the first or last array element.
index.js
// โœ… split a string and get First element const str = 'bobby,hadz,com'; const firstElement = str.split(',').at(0); console.log(firstElement); // ๐Ÿ‘‰๏ธ bobby

split string and get first or last array element using array at

If you need to split the string and get the last array element, access the array at index -1.

index.js
// โœ… split a string and get Last element const str = 'bobby,hadz,com'; const lastElement = str.split(',').at(-1); console.log(lastElement); // ๐Ÿ‘‰๏ธ com

We used the String.split() method to split the string as we did in the previous example.

index.js
const str = 'bobby,hadz,com'; const arr = str.split(','); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'bobby', 'hadz', 'com' ] console.log(arr.at(0)); // ๐Ÿ‘‰๏ธ bobby console.log(arr.at(1)); // ๐Ÿ‘‰๏ธ hadz

The Array.at method takes an integer and returns the item at that index.

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

We accessed the array at index 0 to get the first array element.

The Array.at() method allows for positive and negative integers.

You can use negative integers to count back from the end of the array.

index.js
const str = 'bobby,hadz,com'; const arr = str.split(','); console.log(arr.at(-1)); // ๐Ÿ‘‰๏ธ com console.log(arr.at(-2)); // ๐Ÿ‘‰๏ธ hadz console.log(arr.at(0)); // ๐Ÿ‘‰๏ธ bobby console.log(arr.at(1)); // ๐Ÿ‘‰๏ธ hadz

For example, -1 returns the last element in the array and -2 returns the second to last element.

# Split a String and get the First or Last Array Element using indexing

This is a three-step process:

  1. Use the split() method to split the string into an array.
  2. Access the array element at index 0 to get the first array element.
  3. Access the array element at index array.length - 1 to get the last array element.
index.js
// โœ… split a string and get the First array element const str = 'bobby,hadz,com'; const firstElement = str.split(',')[0]; console.log(firstElement); // ๐Ÿ‘‰๏ธ bobby

split string and get first or last array element using index

We used bracket notation to access the array element at index 0 after we split the string.

And here is an example of splitting a string and getting the last array element with indexing.

const str = 'bobby,hadz,com'; const arr = str.split(','); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'bobby', 'hadz', 'com' ] const lastElement = arr[arr.length - 1]; console.log(lastElement); // ๐Ÿ‘‰๏ธ com

We split the string into an array as we did in the previous examples and accessed the array at index array.length - 1 to get the last element.

# Split a String and get the First or Last Array Element using slice()

You can also use the Array.slice() method to get the first or last array element after splitting the string.

index.js
// โœ… split a string and get the First array element const str = 'bobby,hadz,com'; const firstElement = str.split(',').slice(0, 1)[0]; console.log(firstElement); // ๐Ÿ‘‰๏ธ bobby

split string and get first or last array element using slice

And here is an example of using the method to get the last array element after splitting.

index.js
// โœ… split a string and get the Last array element const str = 'bobby,hadz,com'; const lastElement = str.split(',').slice(-1)[0]; console.log(lastElement); // com

The Array.slice method returns a copy of a portion of an array.

The method takes the following 2 arguments:

NameDescription
start indexThe index of the first element to include in the returned array
end indexThe index of the first element to exclude from the returned array

We used a start index of 0 and a stop index of 1 to get a new array containing only the first element of the original array.

index.js
const str = 'bobby,hadz,com'; // ๐Ÿ‘‡๏ธ [ 'bobby' ] console.log(str.split(',').slice(0, 1));

The last step is to access the array at index 0 to get the string.

index.js
const str = 'bobby,hadz,com'; // ๐Ÿ‘‡๏ธ 'bobby' console.log(str.split(',').slice(0, 1)[0]);

The Array.slice() method can be passed negative indexes to count backward.

index.js
const str = 'bobby,hadz,com'; const arr = str.split(','); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'bobby', 'hadz', 'com' ] console.log(arr.slice(-1)); // ๐Ÿ‘‰๏ธ [ 'com' ] console.log(arr.slice(-2)); // ๐Ÿ‘‰๏ธ [ 'hadz', 'com' ]

A start index of -1 means start at the last array element.

The last step is to access the array at index 0 to get the actual value.

# Split a String and get the Last Array Element using regex

If you need to use the split() method with multiple separators, pass a regular expression to the method.

The following example splits on every space or underscore.

index.js
const str = 'bobby hadz_com'; // ๐Ÿ‘‡๏ธ [ 'bobby', 'hadz', 'com' ] console.log(str.split(/[\s_]+/)); const lastElement = str.split(/[\s_]+/).pop(); console.log(lastElement); // ๐Ÿ‘‰๏ธ com

split string and get last array element using regex

The square brackets [] part is called a character class and matches either one of the characters between the brackets.

The plus + matches the preceding item (space or underscore) 1 or more times.

We used the plus + because we consider one or more spaces or underscores next to one another a single match.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev