Unshift e Shift em JavaScript: Mexendo no Início do Array

POV: Você mexeu no início do array e bagunçou tudo 😂📦

Usando a mesma estrutura de animais do vídeo de push e pop, adicionamos "raposa" no início do array com unshift(), confirmando no console que ela passou a ocupar a posição zero. Em seguida, usamos shift() para remover essa mesma raposa, e o array volta a ter só os itens originais, na ordem de sempre.

"A gente vai pegar essa estrutura aqui e vamos agora fazer o inverso. Vamos colocar no início. A gente já sabe como é que tá a matriz aqui. Pra gente colocar no início, a gente vai utilizar o unshift. Depois no final da fila, ele vai remover a raposa aqui da nossa do nosso array. Dois métodos, um início, e o controle total sobre a primeira posição."

📦 O que são unshift() e shift() em JavaScript?

unshift() e shift() são métodos que manipulam o início de um array em JavaScript. Enquanto push e pop trabalham no final, unshift e shift operam na primeira posição .

// Declarando um array
let animais = ["cachorro", "gato", "pássaro"];
console.log(animais); // ["cachorro", "gato", "pássaro"]

// Adicionando no início com unshift
animais.unshift("raposa");
console.log(animais); // ["raposa", "cachorro", "gato", "pássaro"]

// Removendo do início com shift
let primeiro = animais.shift();
console.log(primeiro); // "raposa"
console.log(animais); // ["cachorro", "gato", "pássaro"]
        

🔄 O efeito de deslocamento em unshift e shift

Diferente de push e pop que operam no final sem afetar a posição dos outros elementos, unshift e shift precisam reorganizar todos os elementos do array .

let numeros = [10, 20, 30, 40];

// Antes: [10, 20, 30, 40]
// Índices:  0   1   2   3

// Usando unshift(5)
numeros.unshift(5);
// Depois: [5, 10, 20, 30, 40]
// Índices: 0   1   2   3   4
// Todos os elementos foram deslocados!

// Usando shift()
let removido = numeros.shift();
// Depois: [10, 20, 30, 40]
// Índices:  0   1   2   3
// Todos os elementos foram deslocados novamente!
        

🚶 O padrão FIFO: shift e push como uma fila

A combinação de push() (adicionar ao final) e shift() (remover do início) cria o comportamento de uma fila (queue) — uma estrutura de dados que segue o princípio FIFO (First In, First Out) .

// Simulando uma fila
let fila = [];

// Adicionando elementos ao final (entrando na fila)
fila.push("cliente1");
fila.push("cliente2");
fila.push("cliente3");

console.log(fila); // ["cliente1", "cliente2", "cliente3"]

// Removendo do início (atendendo o primeiro)
let atendido = fila.shift();
console.log(atendido); // "cliente1" (primeiro a entrar, primeiro a sair)
console.log(fila); // ["cliente2", "cliente3"]
        

⚡ Performance: unshift/shift vs push/pop

Uma diferença importante entre esses métodos é a performance . Enquanto push e pop são rápidos (O(1)), unshift e shift são mais lentos (O(n)) porque precisam reindexar todos os elementos .

📚 Exemplos práticos de unshift e shift

1. Histórico de navegação

let historico = [];

// Adicionando páginas visitadas
historico.push("página1");
historico.push("página2");
historico.unshift("página inicial");

console.log(historico); // ["página inicial", "página1", "página2"]

// Voltando para a página anterior
let ultima = historico.pop();
console.log("Voltando de: " + ultima);
        

2. Processamento de tarefas urgentes

let tarefas = ["tarefa normal 1", "tarefa normal 2"];

// Adicionando uma tarefa urgente no início
tarefas.unshift("tarefa URGENTE!");

console.log(tarefas); // ["tarefa URGENTE!", "tarefa normal 1", "tarefa normal 2"]

// Processando a tarefa mais urgente primeiro
let proxima = tarefas.shift();
console.log("Processando: " + proxima);
        

⏱️ Capítulos do vídeo

• 00:00 — Introdução: O conceito de inverter a lógica para mexer no início do array
• 00:09 — Utilizando o método .unshift() para adicionar o elemento "raposa" ao começo
• 00:14 — Verificação no console: O item adicionado com sucesso ao início da matriz
• 00:23 — Utilizando o método .shift() para remover o primeiro elemento da fila
• 00:27 — Encerramento e convite para inscrição no canal

🎯 Conclusão

Unshift e shift completam o conjunto de métodos para manipular arrays em JavaScript . Enquanto push e pop cuidam do final, unshift e shift cuidam do início .

Neste artigo, você aprendeu:

• ✅ Como usar o método unshift() para adicionar no início do array
• ✅ Como usar o método shift() para remover do início do array
• ✅ Como confirmar as alterações no array usando o console
• ✅ Como unshift e shift afetam a posição dos outros itens
• ✅ Como unshift/shift se comparam com push/pop
• ✅ Onde unshift e shift costumam ser usados na prática

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre Unshift e Shift em JavaScript

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo