To remove the first element from an array, call the `shift` method on the array, e.g. `arr.shift()`. The `shift` method removes the first element from an array and returns the removed element.

Remove the first Element from an Array in JavaScript


## Remove the first Element from an Array

**To remove the first element from an array, call the `shift` method on the
array, e.g. `arr.shift()`. The `shift` method removes the first element from an
array and returns the removed element.**

```javascript:index.js
const arr = ['a', 'b', 'c'];

const firstElement = arr.shift();
console.log(firstElement); // 👉️ a

console.log(arr); // 👉️ ['b', 'c']
```

In the code snippet we used the
[Array.shift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)
method to remove the first element from the array.

<InArticleAd />

<Alert>
  The <code>Array.shift</code> method mutates the original array and changes its
  length.
</Alert>

The `shift` method removes the element at index `0` of the array.

If you call the `Array.shift` method on an empty array, the method returns
`undefined`.

```javascript:index.js
const arr = [];

const firstElement = arr.shift();
console.log(firstElement); // 👉️ undefined

console.log(arr); // 👉️ []
```

<Alert>
  In my experience mutating (changing) the structure of arrays and objects is
  very difficult to debug and reason about, especially if you have to perform
  other operations on the array after mutating it.
  <br />
  <br />
  An alternative is to create a copy of the array containing all the elements, but
  the first.
</Alert>

<InArticleAd />

**We can use the `Array.slice` method to get a new array, containing all array
elements, but the first.**

```javascript:index.js
const arr = ['a', 'b', 'c'];

const withoutFirst = arr.slice(1);
console.log(withoutFirst); // 👉️ ['b', 'c']

console.log(arr); // 👉️ ['a', 'b', 'c']
```

In the code snippet we pass a starting index of `1` and no end index to the
[Array.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
method.

The method returns a shallow copy of the original array with all elements
starting at index `1`.

**The `Array.slice` method is very different from `Array.shift`, because it does
not change the contents of the original array.**

<Alert type="success">
  This is my recommended approach, because once you start mutating the same
  array with multiple operations, things get very confusing and we are forced to
  think about multiple operations at the same time.
</Alert>

<InArticleAd />


Remove the first Element from an Array in JavaScript

Remove the first Element from an Array #

Borislav Hadzhiev

For more articles, navigate to myHome Page

Remove the first Element from an Array in JavaScript