Push e Pop em JavaScript: Adicionando e Removendo do Array

POV: Você adicionou e removeu do array e virou o mestre da pilha 😎📦

Partindo de um array com três animais (cachorro, gato e pássaro), usamos o push() para adicionar "raposa" ao final da lista, confirmando no console que ela realmente foi anexada como o quarto item. Em seguida, usamos o pop() para remover essa mesma raposa, mostrando que o array volta a ter os três animais originais.

"Vou colocar aqui o nosso console e vou declarar alguns animais. Cachorro, gato, pássaro. Primeira coisa que eu vou fazer é adicionar mais um animal. Vou utilizar o push. Depois a gente vai remover a raposa utilizando o método pop. Dois métodos, uma fila, e o controle total sobre o final do seu array."

📦 O que são push() e pop() em JavaScript?

push() e pop() são dois dos métodos mais fundamentais para manipular arrays em JavaScript. Eles operam no final do array, permitindo adicionar e remover elementos de forma eficiente .

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

// Adicionando com push
animais.push("raposa");
console.log(animais); // ["cachorro", "gato", "pássaro", "raposa"]

// Removendo com pop
let ultimo = animais.pop();
console.log(ultimo); // "raposa"
console.log(animais); // ["cachorro", "gato", "pássaro"]
        

🥞 O padrão LIFO: Push e Pop como uma pilha

A combinação de push() e pop() cria o comportamento de uma pilha (stack) — uma estrutura de dados que segue o princípio LIFO (Last In, First Out) . Isso significa que o último elemento adicionado é o primeiro a ser removido .

// Simulando uma pilha
let pilha = [];

// Adicionando elementos (empilhando)
pilha.push("primeiro");
pilha.push("segundo");
pilha.push("terceiro");

console.log(pilha); // ["primeiro", "segundo", "terceiro"]

// Removendo elementos (desempilhando)
let item = pilha.pop();
console.log(item); // "terceiro" (último a entrar, primeiro a sair)
console.log(pilha); // ["primeiro", "segundo"]
        

📚 Exemplos práticos de push e pop

1. Histórico de ações (Undo)

let historico = [];

// Usuário realiza ações
historico.push("Digitou 'Olá'");
historico.push("Digitou 'mundo'");
historico.push("Formatou texto");

// Undo: desfaz a última ação
let ultimaAcao = historico.pop();
console.log("Desfazendo: " + ultimaAcao);
// Saída: "Desfazendo: Formatou texto"
        

2. Removendo todos os elementos

let tarefas = ["tarefa1", "tarefa2", "tarefa3"];

while (tarefas.length > 0) {
    let tarefa = tarefas.pop();
    console.log("Processando: " + tarefa);
}
// Saída: Processando: tarefa3, tarefa2, tarefa1
console.log(tarefas); // []
        

🔄 Os "irmãos" do início: shift() e unshift()

Além de push e pop, o JavaScript oferece shift() e unshift() para manipular o início do array .

let cores = ["azul", "verde", "amarelo"];

// Adicionando no início
cores.unshift("vermelho");
console.log(cores); // ["vermelho", "azul", "verde", "amarelo"]

// Removendo do início
let primeira = cores.shift();
console.log(primeira); // "vermelho"
console.log(cores); // ["azul", "verde", "amarelo"]
        

⏱️ Capítulos do vídeo

• 00:00 — Preparando o ambiente: Declarando o array de animais
• 00:09 — Utilizando o método .push() para adicionar um novo elemento ao final
• 00:13 — Verificando a atualização do array no console
• 00:17 — Utilizando o método .pop() para remover o último elemento
• 00:23 — Comparativo: Visualizando o array antes e depois das modificações
• 00:40 — Encerramento e convite para inscrição no canal

🎯 Conclusão

Push e pop são dois dos métodos mais importantes para manipular arrays em JavaScript . Eles formam a base para estruturas de dados como pilhas e são usados em diversos padrões de programação .

Neste artigo, você aprendeu:

• ✅ Como declarar um array com valores iniciais
• ✅ Como usar o método push() para adicionar um item ao final
• ✅ Como usar o método pop() para remover o último item
• ✅ Como confirmar as alterações no array usando o console
• ✅ Como push e pop se relacionam com a lógica de pilha (LIFO)
• ✅ Onde push e pop costumam ser usados na prática
• ✅ Os "irmãos" shift e unshift para manipular o início

🤔 O que você achou?

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

❓ FAQ: Perguntas Frequentes sobre Push e Pop 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