Tüm blog yazıları

JavaScript’te push, pop, shift ve unshift Metotları

Programlamaya yeni başlayan birinin en çok karşılaşacağı konulardan biri, birden fazla veriyi bir arada tutma ihtiyacıdır. JavaScript gibi modern programlama dillerinde bu ihtiyaç, “dizi” adı verilen veri yapılarıyla karşılanır. Ancak sadece verileri tutmak y

eminbasbayan4 dk okuma
JavaScript’te push, pop, shift ve unshift Metotları

Programlamaya yeni başlayan birinin en çok karşılaşacağı konulardan biri, birden fazla veriyi bir arada tutma ihtiyacıdır. JavaScript gibi modern programlama dillerinde bu ihtiyaç, “dizi” adı verilen veri yapılarıyla karşılanır. Ancak sadece verileri tutmak yetmez. Bu veriler üzerinde işlem de yapmak isteriz: yeni elemanlar eklemek, var olanları silmek, sıralarıyla oynamak... İşte bu noktada JavaScript’in sunduğu bazı temel dizi metotları devreye girer: push, pop, shift ve unshift.

Bu makalede, bu dört metodu yakından inceleyecek, gerçek hayattan örneklerle ne işe yaradıklarını ve nasıl kullanılacaklarını öğreneceğiz. Konumuz sadece bu metotlarla sınırlı olacak; gereksiz teknik detaylara veya farklı dizi metodlarına yer verilmeyecek.

push(): Diziye Eleman Eklemenin Kolay Yolu

push() metodu, bir diziye yeni bir eleman eklemek istediğimizde başvurduğumuz en kolay yöntemlerden biridir. Özelliği, bu elemanı dizinin sonuna eklemesidir.

Örnek:

Bir sınıf listesi oluşturalım:

jsx
let sinifListesi = ["Merve", "Ali"];
sinifListesi.push("Kenan");
console.log(sinifListesi);
// ["Merve", "Ali", "Kenan"]

Burada "Kenan" isimli öğrenci listenin sonuna eklendi. push() ile birden fazla eleman da aynı anda eklenebilir:

jsx
sinifListesi.push("Ezgi", "Baran");
console.log(sinifListesi);
// ["Merve", "Ali", "Kenan", "Ezgi", "Baran"]

Metot, ekleme işleminden sonra dizinin yeni uzunluğunu döner:

jsx
let yeniUzunluk = sinifListesi.push("Hasan");
console.log(yeniUzunluk); // 6

pop(): Son Elemanı Silmek

pop() metodu, dizinin en sonundaki elemanı siler ve silinen bu elemanı geri döner. Bu özellik sayesinde örneğin son yapılan bir işlemi geri almak gibi durumlarda pop() sıkça kullanılır.

Örnek:

jsx
let kitapListesi = ["1984", "Hayvan Çiftliği", "Fahrenheit 451"];
let silinenKitap = kitapListesi.pop();

console.log(kitapListesi);
// ["1984", "Hayvan Çiftliği"]

console.log(silinenKitap);
// "Fahrenheit 451"

pop() metodu, dizi üzerinde değişiklik yapar, yani orijinal diziyi değiştirir. Ayrıca parametre almaz; ne silineceğini siz belirlemezsiniz, her zaman son eleman silinir.

shift(): İlk Elemanı Silmek

shift() metodu da pop() gibi eleman silmeye yarar. Ancak farkı, dizinin başındaki elemanı silmesidir. Bu, gerçek hayatta sıralı yapılan işlemlerde, yani bir kuyruğun ilk elemanını almak gibi durumlarda oldukça işe yarar.

Örnek:

jsx
let destekTalepKuyrugu = ["Talep1", "Talep2", "Talep3"];
let islenenTalep = destekTalepKuyrugu.shift();

console.log(destekTalepKuyrugu);
// ["Talep2", "Talep3"]

console.log(islenenTalep);
// "Talep1"

Burada "Talep1" ilk sıradaydı ve shift() ile kuyruktan çıkarıldı. Kalan elemanlar öne doğru kaydırıldı.

unshift(): Başa Eleman Ekleme

unshift() metodu, push() ile benzerdir ama eklemeyi dizinin başına yapar. Yani dizinin en önüne yeni bir eleman eklemek istiyorsanız unshift() kullanmalısınız.

Örnek:

jsx
let sunucuListesi = ["Server2", "Server3"];
sunucuListesi.unshift("Server1");

console.log(sunucuListesi);
// ["Server1", "Server2", "Server3"]

Birden fazla eleman da başa eklenebilir:

jsx
sunucuListesi.unshift("Backup1", "Backup2");
console.log(sunucuListesi);
// ["Backup1", "Backup2", "Server1", "Server2", "Server3"]

unshift() de, push() gibi, ekleme sonrası dizinin yeni uzunluğunu döner.

Karşılaştırmalı Özet Tablo

MetotİşleviHangi Uçta İşlem Yapar?Eleman Döner mi?Dizi Değişir mi?
push()Eleman eklerSondaHayırEvet
pop()Eleman silerSondaEvetEvet
shift()Eleman silerBaştaEvetEvet
unshift()Eleman eklerBaştaHayırEvet

Gerçek Hayattan Benzetmeler

Bu metodları akılda tutmak için onları gündelik hayattan örneklerle düşünebiliriz:

  • push() → Yeni bir müşteri sıranın sonuna gelir.
  • pop() → En son eklenen kişi karar değiştirip sıradan çıkar.
  • shift() → En başta bekleyen müşteri hizmet alır ve çıkar.
  • unshift() → VIP müşteri sıranın başına alınır.

Sonuç

JavaScript dizileriyle çalışırken push, pop, shift ve unshift metotları, temel ama çok güçlü araçlardır. Bu dört metodu doğru şekilde kullanmak, veri üzerinde etkili işlemler yapmanın kapısını açar. Ayrıca bu metotlar, programlamanın ileri konularında sıkça kullanılan “stack” (yığın) ve “queue” (kuyruk) yapılarının da temelini oluşturur.

Her şeyden önce, bu metodlara ne zaman ihtiyacınız olacağını pratik yaptıkça daha iyi anlayacaksınız. Şimdilik önemli olan; hangi metodun, dizinin hangi ucunda çalıştığını bilmek ve ne tür bir işlem yaptığını kavramaktır.

JavaScript Classes ile pratik uygulamalar, metotlar arası iletişim ve gerçek dünya kod örnekleri
JavaScript Dersleri9 dk okuma

JavaScript Classes - Pratik Uygulamalar

JavaScript class'ları ile pratik uygulamalara geçin! Metotlar arası iletişimden constructor'da metot çağırmaya, kod tekrarını azaltmaktan gerçek dünya senaryolarına kadar class kullanımının inceliklerini keşfedin. Kendi alışveriş sepeti örneğinizle bilginizi pekiştirin.

Yazıyı oku
JavaScript class yapısını gösteren bir kod örneği, ES6 ile modern nesne oluşturma
JavaScript Dersleri9 dk okuma

JavaScript Classes

ES6 ile JavaScript'e gelen class yapısı sayesinde nesne oluşturmak artık çok daha kolay ve düzenli! Constructor function karmaşasından kurtulup, okunabilir ve yönetilebilir kodlar yazmak isteyenler için modern JavaScript'in temel taşı olan class'ları tüm detaylarıyla keşfedin. Bu rehberle nesne şabl

Yazıyı oku
JavaScript kodunda Constructor Function ve new keyword'ü ile nesne oluşturma örnekleri
JavaScript Dersleri8 dk okuma

Constructor Functions ve new Keyword

Factory Function'ların hafıza israfı sorununa Constructor Function'lar ve new keyword'ü ile son verin! Metotları paylaştırarak JavaScript objelerini daha verimli nasıl oluşturacağınızı, new'in perde arkasında neler yaptığını ve prototype sisteminin gücünü bu rehberde keşfedin.

Yazıyı oku

Çerez tercihlerin

Platformun çalışması için zorunlu çerezler kullanıyoruz. İzin verirsen anonim kullanım verilerini ölçüyoruz. Ayrıntıları incele