{"id":37778,"date":"2025-07-15T17:08:17","date_gmt":"2025-07-15T20:08:17","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&p=37778"},"modified":"2025-07-15T17:08:17","modified_gmt":"2025-07-15T20:08:17","slug":"unshift-javascript","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/unshift-javascript\/","title":{"rendered":"M\u00e9todo unshift: insira elementos no in\u00edcio de um array"},"content":{"rendered":"

O m\u00e9todo unshift em JavaScript<\/strong> \u00e9 utilizado para adicionar elementos no in\u00edcio de um array. Ele permite manipular a ordem dos itens de maneira eficiente, especialmente para criar estruturas como filas ou reorganizar dados.<\/p>\n

Neste artigo, exploraremos exemplos pr\u00e1ticos do uso do unshift()<\/em>, suas diferen\u00e7as em rela\u00e7\u00e3o a outros m\u00e9todos e como ele impacta o desempenho, principalmente em arrays grandes. Acompanhe para entender como tirar o m\u00e1ximo proveito desse m\u00e9todo em suas aplica\u00e7\u00f5es JavaScript.<\/p>\n

Exemplos pr\u00e1ticos de uso do unshift()<\/h2>\n

O m\u00e9todo unshift()<\/em> em JavaScript \u00e9 utilizado para adicionar um ou mais elementos no in\u00edcio de um array<\/strong>. Ele pode ser \u00fatil quando \u00e9 necess\u00e1rio criar estruturas como filas, onde os elementos mais antigos s\u00e3o removidos primeiro.<\/p>\n

Isso \u00e9 similar ao processo de hospedagem de site<\/a>, onde novos conte\u00fados ou funcionalidades s\u00e3o adicionados constantemente, e a organiza\u00e7\u00e3o dos dados precisa ser eficiente para garantir um bom desempenho.<\/p>\n

Come\u00e7aremos com exemplos pr\u00e1ticos de uso do unshift() <\/strong>para, depois, voc\u00ea se aprofundar em outros conceitos e usos.<\/p>\n

Exemplo 1: criar uma fila com unshift()<\/h3>\n

Veja um exemplo simples de como usar o unshift()<\/em> para criar uma fila<\/strong>:<\/p>\n

let fila = ['A', 'B', 'C'];<\/em>\r\n\r\n\/\/ Adiciona elementos no in\u00edcio<\/em>\r\n\r\nfila.unshift('D');<\/em>\r\n\r\nconsole.log(fila); \/\/ Sa\u00edda: ['D', 'A', 'B', 'C']<\/em><\/pre>\n
Nesse exemplo, a letra D <\/strong>foi adicionada ao in\u00edcio da fila e deslocou os elementos existentes para a direita. Esse comportamento \u00e9 caracter\u00edstico de uma fila, onde novos elementos entram na frente, enquanto os antigos seguem para tr\u00e1s.<\/p>\n
Outra fun\u00e7\u00e3o do unshift()<\/em> \u00e9 adicionar mais de um elemento de uma vez:<\/p>\n
fila.unshift('E', 'F');<\/em>\r\n\r\nconsole.log(fila); \/\/ Sa\u00edda: ['E', 'F', 'D', 'A', 'B', 'C']<\/em><\/pre>\n
Assim, \u00e9 poss\u00edvel manipular a ordem dos elementos de forma eficiente com o uso do unshift()<\/em>.<\/p>\n
Exemplo 2: adicionar objetos a um array<\/h3>\n
O m\u00e9todo unshift()<\/em> tamb\u00e9m pode ser usado para adicionar objetos a um array<\/strong>, o que \u00e9 bem \u00fatil para organizar dados de maneira estruturada.<\/p>\n
Veja um exemplo:<\/p>\n
let pessoas = [<\/em>\r\n\r\n { nome: 'Jo\u00e3o', idade: 25 },<\/em>\r\n\r\n { nome: 'Maria', idade: 30 }<\/em>\r\n\r\n];<\/em>\r\n\r\n\/\/ Adiciona um novo objeto no in\u00edcio<\/em>\r\n\r\npessoas.unshift({ nome: 'Carlos', idade: 22 });<\/em>\r\n\r\nconsole.log(pessoas);<\/em><\/pre>\n
Nesse exemplo, um novo objeto com informa\u00e7\u00f5es de Carlos<\/strong> foi inserido no in\u00edcio do array. Como resultado, o objeto Carlos<\/strong> ocupa a primeira posi\u00e7\u00e3o no array, enquanto os outros elementos s\u00e3o deslocados para a direita.<\/p>\n
Como remover elementos do in\u00edcio do array?<\/h2>\n
O m\u00e9todo shift()<\/em> \u00e9 usado para remover o primeiro elemento de um array <\/strong>em JavaScript. Ap\u00f3s a remo\u00e7\u00e3o, todos os elementos seguintes s\u00e3o deslocados para a esquerda, e o array diminui de tamanho.<\/p>\n
Exemplo de uso do shift():<\/em><\/p>\n
let frutas = ['Ma\u00e7\u00e3', 'Banana', 'Laranja'];<\/em>\r\n\r\nlet removido = frutas.shift();<\/em>\r\n\r\nconsole.log(removido); \/\/ Sa\u00edda: 'Ma\u00e7\u00e3'<\/em>\r\n\r\nconsole.log(frutas); \/\/ Sa\u00edda: ['Banana', 'Laranja']<\/em><\/pre>\n
Vale apontar que unshift() e shift() s\u00e3o diferentes: enquanto unshift() <\/strong>adiciona um ou mais elementos<\/strong> no in\u00edcio do array, shift()<\/strong> remove o primeiro elemento<\/strong>. Ou seja, um modifica o array ao inserir, enquanto o outro altera ao remover, o que gera efeitos opostos no array.<\/p>\n
O que \u00e9 o m\u00e9todo unshift() no JavaScript?<\/h2>\n
Conforme vimos, o m\u00e9todo unshift()<\/em> \u00e9 utilizado em JavaScript<\/a> para adicionar um ou mais elementos no in\u00edcio de um array. Ele altera o array original ao deslocar os elementos existentes para a direita<\/strong>, para dar espa\u00e7o aos novos elementos.<\/p>\n
Ao contr\u00e1rio do m\u00e9todo push()<\/em>, que adiciona elementos no final do array, o unshift()<\/em> \u00e9 indicado para criar filas e reordenar dados<\/strong>, pois insere os elementos no come\u00e7o.<\/p>\n
Veja um exemplo b\u00e1sico<\/strong> de unshift()<\/em>:<\/p>\n
let numeros = [2, 3, 4];<\/em>\r\n\r\n\/\/ Adiciona elementos no in\u00edcio<\/em>\r\n\r\nnumeros.unshift(1);<\/em>\r\n\r\nconsole.log(numeros); \/\/ Sa\u00edda: [1, 2, 3, 4]<\/em>\r\n\r\nO n\u00famero 1<\/strong> foi inserido no in\u00edcio do array, e os outros (2, 3, 4<\/strong>) foram deslocados uma posi\u00e7\u00e3o \u00e0 direita.\r\n\r\nOutro uso do unshift()<\/em> \u00e9 adicionar m\u00faltiplos elementos ao mesmo tempo<\/strong>:\r\n\r\nnumeros.unshift(0, -1);<\/em>\r\n\r\nconsole.log(numeros); \/\/ Sa\u00edda: [0, -1, 1, 2, 3, 4]<\/em><\/pre>\n
Esse m\u00e9todo \u00e9 eficaz para manipular arrays de forma din\u00e2mica.<\/p>\n
Sintaxe do unshift() e par\u00e2metros aceitos<\/h2>\n
O m\u00e9todo unshift()<\/em> \u00e9 usado para adicionar um ou mais elementos no in\u00edcio de um array. Sua sintaxe \u00e9 simples<\/strong>:<\/p>\n
array.unshift(elemento1, elemento2, …, elementoN)<\/em><\/p>\n
O m\u00e9todo aceita adi\u00e7\u00e3o de um ou mais valores no in\u00edcio. Os par\u00e2metros podem ser de qualquer tipo<\/strong>, como n\u00fameros, strings, objetos, arrays, entre outros.<\/p>\n
Exemplo de uso:<\/p>\n
let frutas = ['Banana', 'Laranja'];<\/em>\r\n\r\n\/\/ Adiciona v\u00e1rios elementos<\/em>\r\n\r\nfrutas.unshift('Ma\u00e7\u00e3', 'Morango');<\/em>\r\n\r\nconsole.log(frutas); \/\/ Sa\u00edda: ['Ma\u00e7\u00e3', 'Morango', 'Banana', 'Laranja']<\/em>\r\n\r\nO unshift()<\/em> pode adicionar qualquer tipo de valor<\/strong>, o que inclui objetos ou outros arrays:\r\n\r\nlet pessoas = [];<\/em>\r\n\r\npessoas.unshift({ nome: 'Ana', idade: 28 });<\/em>\r\n\r\nconsole.log(pessoas); \/\/ Sa\u00edda: [{ nome: 'Ana', idade: 28 }]<\/em><\/pre>\n
Qual \u00e9 a diferen\u00e7a entre push() e unshift()?<\/h2>\n
Os m\u00e9todos push()<\/em> e unshift()<\/em> t\u00eam a fun\u00e7\u00e3o de adicionar elementos em um array, mas com comportamentos diferentes.<\/p>\n