Using Javascript unshift to Add Elements

So you’re diving into JavaScript, and today you’re tackling arrays — the magical list-makers of code. If you’ve ever wanted to add something to the beginning of an array, there’s a perfect little tool made just for that. Meet the unshift() method — your shortcut to stack things onto the front of the list like a pro.

TL;DR:

Want to add items to the front of an array in JavaScript? Use unshift()! It inserts one or more elements to the beginning. The array grows, and everything else shifts right. It’s simple, fast, and very handy.

What is unshift()?

In JavaScript, arrays have built-in methods that let you modify them. One such method is unshift(). When you want to slap something onto the front of an array, that’s your go-to tool.

Here’s an example:

let fruits = ["banana", "apple"];
fruits.unshift("mango");

console.log(fruits); 
// Output: ["mango", "banana", "apple"]

So what just happened? “mango” was added to the beginning. Simple, right?

When Should You Use unshift()?

You want the new stuff in the front. That’s the basic rule.

Think of it like a queue at a theme park. Normally, people get in line at the back — that’s what push() does. But if someone cuts to the front? That’s unshift() in action.

Here are a few practical uses:

• Log messages with the newest first
• Add urgent tasks to the top of the list
• Build arrays in reverse order

How Does It Work?

Let’s go deeper — not scary-deep, promise. Here’s what happens when you call unshift():

1. It adds one or more elements to the front of the array
2. It shifts existing elements one index to the right
3. It updates the length of the array
4. It returns the new length of the array

Let this sink in with another example:

let numbers = [2, 3, 4];
let newLength = numbers.unshift(1);

console.log(numbers);     // [1, 2, 3, 4]
console.log(newLength);   // 4

Boom — not only is 1 now first, but you also got back the new size.

You Can Add Multiple Items!

Why stop at one? The power of unshift() is that you can add as many items as you want.

let pets = ["cat", "dog"];
pets.unshift("parrot", "hamster");

console.log(pets); 
// ["parrot", "hamster", "cat", "dog"]

Everything just scoots over to make room.

Important Things to Remember

• unshift() changes the original array — it’s not a copy
• It returns the new length of the array
• It shifts all elements, which can take some time if the array is big

What Happens Behind the Scenes?

This part’s cool: When you call unshift(), every existing element is moved up one spot internally. So if you’re dealing with a huge list of 100,000 items — well, each of those items has to move.

Not always a big deal, but something to keep in mind.

Let’s Compare: unshift() vs push()

Both are for adding things, but from different ends of the pool.

Need things at the top? Use unshift(). Adding to the back? Say hello to push().

Can You Mix Methods?

Absolutely!

let stack = [];
stack.push("bottom");
stack.unshift("top");

console.log(stack); // ["top", "bottom"]

Even cooler? You can pop from one end and shift from another. That’s a little advanced, but just know it’s possible.

Fun Ways to Play With unshift()

Create a mini-timeline, stack your sandwiches (kind of), or just have fun seeing how arrays grow.

let sandwich = [];
sandwich.push("bread");
sandwich.unshift("lettuce");
sandwich.unshift("tomato");
sandwich.unshift("bacon");

console.log(sandwich); 
// ["bacon", "tomato", "lettuce", "bread"]

Mmm… a coding BLT.

Real-World Example: Task Manager

Let’s say you’re building a mini to-do list. Urgent tasks need to go first.

let tasks = ["walk dog", "do laundry"];

tasks.unshift("fix urgent outage");

console.log(tasks); 
// ["fix urgent outage", "walk dog", "do laundry"]

Using unshift() With Other Data

You can unshift any type of data: strings, numbers, booleans, even objects!

let notes = [];

notes.unshift({ title: "Buy milk", complete: false });
notes.unshift({ title: "Pay bills", complete: false });

console.log(notes);

Each note object is now placed at the front of the list.

Let’s Recap

• unshift() adds items to the front of an array
• It can take one or many items
• It returns the new length of the array
• Array elements shift right to make space
• It modifies the original array

Wrap-Up

The unshift() method may be tiny, but it’s mighty. From building tasks lists to managing data sequences, it helps you keep things in order — your way.

So go ahead, unshift some fun into your code!