How To Get First Element of an Array in Typescript
Jasser Mark Arioste
In this tutorial, you'll learn different ways of getting the first element of an array in Typescript or Javascript.
Option 1: Referring to the Index Number #
The first, most basic way, and fastest way to get the first element or any element of an array is to refer to the index number.
For example:
const arr: string[] = ["a", "b", "c"] const firstElement = arr[0]; // "a"12
The disadvantage of using this approach is that you can't use the "Optional Chaning" operator (.?) if the array is undefined.
For example:
function getFirstElement(array?: any[]){ return array[0] //TyepError: 'array' is possibly 'undefined'. } // if you try to use the Optional Chaining operator it returns a different error since the compiler treats it as a ternary operator. function getFirstElement(array?: any[]){ return array?[0] } // error: ':' expected.12345678
You should use it when the array is not possibly 'undefined' and you only need to read the value from an array and don't need to modify the array.
Option 2: The .at() method
#
The Array.prototype.at method is introduced in ES2021 which is fairly new but if you're using typescript it shouldn't be a problem. The at() method is basically the same as referring to the index number but more flexible.
You can pass the index of the element that you need to refer to, but you can pass -1 if you want to refer to the last element.
If you just want to get the first element, then you can do the following:
const arr: string[] = ["a", "b", "c"] const firstElement = arr.at(0) // "a" // getting the last element to use a negative index. It's not possible when using arr[-1]. const lastElement = arr.at(-1) // "c12345
You can also use optional chaining since you're accessing a method:
function getFirstElement(array?: any[]){ return array?.at(0); }123
Option 3: Using the shift() method.
#
It's also possible to get the first element of an array by using the Array.prototype.shift method. However, it's important to note that the shift() method does many things.
It removes the first element of an array, modifies the original array, and returns the first element.
const arr: string[] = ["a", "b", "c"] const firstElement = arr.shift() // "a" console.log(arr) // ["b", "c"]123
Since shift() method modifies the original array, it's not possible to use this method when an array is readonly. For example:
const arr: readonly string[] = ["a", "b", "c"] const firstElement = arr.shift() // Error: Property 'shift' does not exist on type 'readonly string[]'. const arr2 = Object.freeze(["a", "b", "c"]) const firstElement2 = arr2.shift() // Error: Property 'shift' does not exist on type 'readonly string[]'.12345
That's basically it!
Conclusion #
You learned three ways to get the first element of an array in typescript or javascript.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.
Resources #
Credits: Image by djedj from Pixabay
