Mastering the Array shift() and Array unshift() Methods in JavaScript

Do you want to know more about the shift() and unshift() methods in JavaScript arrays?

In this article, you’ll learn how to use these methods to manipulate arrays and understand their differences.

With clear explanations, practical examples, and detailed code snippets, this article will help you master the array.shift() and array.unshift() methods in JavaScript.

So what are you waiting for? Read on and start mastering these powerful array methods today!

What is shift method in JavaScript?

The shift() method is a built-in JavaScript function that removes the first element from an array and returns that removed element. This method changes the length of the array.

The shift() method is a mutating method, meaning it changes the original array. If an array is empty, calling the shift() method on it will return undefined.

Syntax

 array.shift() ✅

Parameters

None

Return value

This method returns the removed element from the array and it will return undefined if the array is empty.

Here’s an example of how to use the shift() method:

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
console.log("subjects before:", subjects);


const shifted = subjects.shift(); ✅
console.log("subjects after:", subjects);

console.log("Removed this element:", shifted);

Output:

subjects before: [ 'English', 'Math', 'Programming', 'Web Development', 'History' ]

subjects after: [ 'Math', 'Programming', 'Web Development', 'History' ]

Removed this element: English

Now, let’s proceed to array unshift in JavaScript.

What is array unshift in JavaScript?

The array.unshift() method is a built-in JavaScript function that adds one or more elements to the beginning of an array and returns the new length of the array.

This method changes the length of the array. The unshift() method is a mutating method, meaning it changes the original array.

Syntax

array.unshift() ✅

array.unshift(element0) ✅

array.unshift(element0, element1) ✅

array.unshift(element0, element1, …, elementN) ✅

Parameters

elemen01, element1, …, elementN ✅

The elements to add to the front of the array.

Return value

The new length property of the object upon which the method was called.

Here’s an example of how to use the unshift() method:

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
console.log("subjects before:", subjects);

const unshifted = subjects.unshift("Software Development"); ✅
console.log("subjects after:", subjects);

console.log("New length:", unshifted);

Output:

subjects before: [ 'English', 'Math', 'Programming', 'Web Development', 'History' ]

subjects after: [
  'Software Development',
  'English',
  'Math',
  'Programming',
  'Web Development',
  'History'
]

New length: 6

Example usage of Unshift method in JavaScript

Here are some example codes that use the unshift() method in different scenarios:

Adding multiple elements to the beginning of an array

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
subjects.unshift("Science", "Software Development"); ✅
console.log(subjects); 

Output:

[
  'Science',
  'Software Development',
  'English',
  'Math',
  'Programming',
  'Web Development',
  'History'
]

Using unshift() in a function to add elements to an array

function addSubjects(arr, ...elements) {
    arr.unshift(...elements); ✅
}

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
addSubjects(subjects, "Software Engineering", "Software Development");
console.log(subjects); 

Using unshift() to add elements to an array in a loop

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
const newSubjects = ["Software Development", "Software Engineering"];
for (let i = newSubjects.length - 1; i >= 0; i--) {
subjects.unshift(newSubjects[i]);
}
console.log(subjects);

Output:

[
  'Software Development',
  'Software Engineering',
  'English',
  'Math',
  'Programming',
  'Web Development',
  'History'
]

Difference between shift and unshift in JavaScript

The shift() and unshift() methods are both built-in JavaScript functions that can be used to manipulate the elements of an array.

The main difference between the two methods is that the shift() method removes the first element from an array and returns that removed element.

On the other hand, the unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Conclusion

In conclusion, the shift() and unshift() methods are powerful tools for manipulating arrays in JavaScript. 

The shift() method removes the first element from an array and returns that removed element, while the unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

With clear explanations, practical examples, and detailed code snippets, this article has provided a comprehensive guide to mastering these methods.

We hope that you have found this article helpful and informative and that you will be able to use the array shift and array unshift in JavaScript effectively.

If you want to dive into more JavaScript topics, check out the following articles:

• JavaScript wait for function to finish
• What is an argument in JavaScript
• What does nan mean in JavaScript

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →