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

# 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.

Copied!
// ✅ split a string and get First element
const str = 'bobby,hadz,com';

const firstElement = str.split(',').shift();
console.log(firstElement); // 👉️ bobby

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

Copied!
// ✅ split a string and get the 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:

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

Copied!
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.

Copied!
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.

Copied!
// ✅ split a string and get First element
const str = 'bobby,hadz,com';

const firstElement = str.split(',').at(0);
console.log(firstElement); // 👉️ bobby

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

Copied!
// ✅ split a string and get the 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.

Copied!
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.

Copied!
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.

Copied!
// ✅ split a string and get the First array element
const str = 'bobby,hadz,com';

const firstElement = str.split(',')[0];
console.log(firstElement); // 👉️ bobby

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.

Copied!
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.

Copied!
// ✅ 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

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

Copied!
// ✅ 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:

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.

Copied!
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.

Copied!
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.

Copied!
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.

Copied!
const str = 'bobby hadz_com';

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(str.split(/[\s_]+/));

const lastElement = str.split(/[\s_]+/).pop();
console.log(lastElement); // 👉️ com

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:

• Split a String on Capital Letters using JavaScript
• Split on the Last Occurrence of a String in JavaScript
• Split a Number into an Array in JavaScript
• Split a String removing any Empty Elements in JavaScript
• Split a String at a specific Index using JavaScript
• How to Split a String by Newline in JavaScript
• How to Split a String by a Regex in JavaScript
• Split a String with multiple Separators using JavaScript
• How to Split a string by Spaces in JavaScript
• Split a String only on the First Occurrence of a Character
• Split a String by Special Characters in JavaScript
• Split a String every N characters in JavaScript