The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. This method modifies the original array.
Example 1: Adding a single element to the beginning
// Example of adding a single element to the start of an array
const team = ['Alice', 'Bob'];
const newSize = team.unshift('Charlie');
console.log(team); // Output: ['Charlie', 'Alice', 'Bob']
console.log(newSize); // Output: 3
Explanation
unshift('Charlie') adds the string 'Charlie' to the beginning of the team array. The method returns the new length of the array, which is stored in newSize.
Example 2: Adding multiple elements to the beginning
// Example of adding multiple elements to the start of an array
const schedule = ['Meeting'];
schedule.unshift('Breakfast', 'Workout');
console.log(schedule); // Output: ['Breakfast', 'Workout', 'Meeting']
Explanation
unshift() can take multiple arguments. 'Breakfast' and 'Workout' are added to the beginning of the schedule array. The elements are inserted in the same order they appear as arguments.
Example 3: Adding elements of different types
// Example of unshifting elements of various data types
const collection = ['book'];
collection.unshift(123, true, null);
console.log(collection); // Output: [123, true, null, 'book']
Explanation
This demonstrates adding a number, a boolean, and a null value to the start of the collection array in a single unshift() call.
Example 4: Using unshift() to prepend an array
// Example of prepending an array's elements to another
const mainList = [4, 5, 6];
const toPrepend = [1, 2, 3];
Array.prototype.unshift.apply(mainList, toPrepend);
console.log(mainList); // Output: [1, 2, 3, 4, 5, 6]
Explanation
Similar to using push() with apply(), we can use unshift() with apply() to prepend the elements of one array to another. toPrepend's elements are inserted at the start of mainList.
Example 5: Adding an array as a single element at the start
// Example of adding an array as a single element
const components = ['Header', 'Footer'];
components.unshift(['Sidebar', 'Content']);
console.log(components); // Output: [['Sidebar', 'Content'], 'Header', 'Footer']
Explanation
When an array is passed to unshift(), it is added as a single new element at the beginning. This creates a nested array structure.
Example 6: Using unshift() in a loop
// Example of using unshift() in a loop to create a reversed array
const original = [1, 2, 3, 4, 5];
const reversed = [];
for (const item of original) {
reversed.unshift(item);
}
console.log(reversed); // Output: [5, 4, 3, 2, 1]
Explanation
This loop iterates through the original array. In each iteration, unshift() adds the current item to the beginning of the reversed array, effectively creating a reversed copy.
Example 7: Unshifting the return value of a function
// Example of unshifting a value returned from a function
function getPriorityTask() {
return 'Urgent: Review Document';
}
const taskList = ['Normal Task 1'];
taskList.unshift(getPriorityTask());
console.log(taskList); // Output: ['Urgent: Review Document', 'Normal Task 1']
Explanation
The getPriorityTask function returns a string. This returned string is then used as the argument for unshift(), placing it at the start of the taskList array.