Javascript Dizi Oluşturma ve Dizi Methodları
Hepinize merhaba dostlarım :) yine güzel bir konu ile karşınızdayım :). Başlıktan da anlaşılacağı üzere Javascript programlama dilinde dizi oluşturmayı ve oluşturulan dizi üzerinde method kullanmayı göreceğiz :). Biliyorum her zamanki gibi heyecanlısınız. Yavaştan başlayalım derim ama dizinin mantıksal tanımını yaparak :).
Dizi (Array) Nedir ?
Dostlarım gelin teorik bir tanım haricinde mantıksal bir tanımlama yapalım ve bu işi kavrayalım :). Örneğin 10 adet verimiz olsun ve her verinin 10 adet özelliği olsun diyelim. Bunları her veriye ait değişken olarak ayarlarsak ne kadar uzun olur değil mi :). 10 verinin 10 adet özelliğini her bir ayrı değişken atayarak tutarsak 100 adet değişken olacaak ve bu değişkenlere ulaşmak ve işlem yapmak da bir hayli zamanımızı alacaktır :). İşte dostlarım bu ve bunun gibi durumlarda Dizi(Array) bize gel dostum ben sana yardımcı olurum diyor :). Eğlenceli geldi değil mi :). Hadi o zaman vakit kaybetmeden başlayalım
Dostlarım javascript programlama dilinde dizi oluşturmak hiç de zor değil :). Gelin hadi ilk dizimizi oluşturalım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
// dizimiz şehirleri tutsun :)
var sehirler = ["Ordu","Mersin","Sakarya","Konya"];
</script>
</body>
</html>
Evet dostlarım ilk dizimizi rahatça oluşturduk :). Yalnız size bahsetmek istediğim bir özellik var
- Dizilerin ilk elemanının numarası '0' dır.
- 4 elemanlı bir dizinin en son elemanının numarası 3 tür (n-1 formülü)
Gelin dostlarım şimdi "Ordu" şehrini alert() ile ekrana bastıralım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var sehirler = ["Ordu","Mersin","Sakarya","Konya"];
alert(sehirler[0]);
</script>
</body>
</html>
Yukarıdaki özelliklerde anlattığım gibi dostlarım dizinin ilk değeri "Ordu" olduğu için ve indis değeri "0" olduğu için sehirler[0] yazıp alert() fonksiyonu ile çağırdığımızda ekranımıza
Ordu
ifadesini bastıracaktır :). Bu dizide sadece string ifadeler kullandım ben siz isterseniz sayılar da kullanabilirsiniz :). Bir sınırlama yok dostlarım :).
Şimdi gelelim dostlarım dizilerde belli işlem yapmaya :). Örneğin diziden eleman silme işlemi olsun vs olsun bunları farklı yollarla yapabiliriz uzunn uzun işlemler yapabiliriz. Ama javascript geliştiricileri bunları bizim için düşünmüş ve bazı fonksiyonları ortaya çıkarmış dostlarım :). Bunları maddeler halinde listeleyelim
- length
- reverse()
- concat()
- sort()
- indexOf()
- pop()
- shift()
Bu methodlar böyle uzar gider dostlarım :). Şimdi gelelim bu methodların kullanımına
1-) length
Dostlarım temel ingilizce biliyorsanız length yazısını görür görmez uzunluk olduğu aklınızdan geçmiştir buraya kadar süperiz. Konumuz da diziler olduğu için bu methodun amacı dizimiz içerisinde kaç eleman olduğunu hesaplar :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var sehirler = ["Ordu","Mersin","Sakarya","Konya"];
alert(sehirler.length);
</script>
</body>
</html>
<!--
EKRAN ÇIKTISI: 4
-->
Gördüğünüz gibi dostlarım dizi içerisinde kaç eleman olduğunu hesapladı ve ekrana o sayıyı bastırdı :).
2-) reverse()
Dostlarım çoğu yerde bu terim karşınıza çıkmıştır. Yani Geri Çevirme,Tersini Alma olarak geçer. Mantık oluşturduğunuzu seziyorum 10 numarasınız :). Amacı zaten belli diziyi ters çevirir. Gelin bir örnek yapalım sizinle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var sayilar= ["Ordu","Mersin","Sakarya","Konya"];
alert(sehirler.reverse());
</script>
</body>
</html>
<!--
EKRAN ÇIKTISI
"Konya"
"Sakarya"
"Mersin"
"Ordu"
-->
Şekildeki gibi reverse() methodu dizimizi aldı ters çevirdi ekrana bastırdı :). Zor bir şey yok dostlarım sadece istikrarlı olmak ve bol pratik yapmak gerekiyor :)
3-) concat()
Dostlarım terim size biraz yabancı gelecektir :). Çünkü concatenation(Birleştirme) sözcüğündeki concat yazısına kadar alınmış ve güzel bir fonksiyon oluşturulmuştur. Tek parametre alır
- Birleştirme yapılacak olan dizi
Dostlarım concat fonksiyonu bizim belirlediğimiz 2 dizideki elemanları alıp birleştirip tek bir dizi haline getirir :). Gelin bunu da farklı bir örnekle gerçekleştirelim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var pozisyon = ["Full Stack Developer","DevOps","React Developer"];
var isim = ["Zafer","Sercan","Didem"];
var sonuc = pozisyon.concat(isim);
alert(sonuc);
</script>
</body>
</html>
<!--
EKRAN ÇIKTISI
Full Stack Developer,DevOps,React Developer,Zafer,Sercan,Didem
-->
Şekilde görüldüğü gibi dostlarım :). İki diziyi aldı concat() methodu ile birleştirme işlemini yaptı ve değişkene atadı. O değişkeni de alıp alert() ile ekrana bastırdığımızda örnekte belirtilen ekran çıktısı verildi :)
4-) sort()
Artık dostlarım görür görmez çevirisini yapıp methodun mantığını anladığınıza eminim :). Yalnız ufak bir nokta var bunda dostlarım. Çevirisi tamam sıralama olarak geçiyor. Çalışma mantığı da reverse() methodunun tam tersidir :). O ters sıralama işlemi yapar bu da düz sıralama işlemi yapar. Gelin bir örnek yapalım :). Bu örnekte de string değerler yerine sayılar olsun :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var sayilar = [1,2,54,63,78,99,36];
alert(sayilar.sort());
</script>
</body>
</html>
<!--
EKRAN ÇIKTISI
1,2,36,54,63,78,99
-->
Evet dostlarım ekran çıktısından da anlaşılmıştır olay. Dizi içerisine rastgele sayılar girdik ve bunları sort() methoduyla düzeltilmesini istedik. Daha sonra methodumuz üzerine düşen görevi yaptı ve sayıları küçükten büyüğe doğru sıraladı :).
5-) indexOf()
Dostlarım şimdi gelelim son methodumuz olan indexOf() methodumuza :). Çevirisini yapmak gerekirse "... indeksi" olarak geçiyor :). 1 parametre alıyor
- Index numarası bulunacak değer
Dostlarım method içerisine dizi içerisinde index numarasını öğrenmek istediğiniz değeri girmeniz gerekiyor ve bu zorunlu parametredir :). Eğer dizi içerisinde o değer varsa onun index numarası döndürülüyor, bulunamamış ise -1 değerini döndürüyor :). Gelin bunun için de okuduğum kitapları içeren bir dizi oluşturalım ve indexOf() methodunu kullanalım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var kitaplar = ["Sitem","Siyah Güller","Bir Dünya Yıkıldı","Gönül Yarası"];
alert(kitaplar.indexOf("Sitem"));
// EKRAN ÇIKTISI : 0
/************************************************************************************/
alert(kitaplar.indexOf("Siyah Gulller"));
// EKRAN ÇIKTISI : -1
</script>
</body>
</html>
6-) pop()
Dostlarım bir diğer methodumuz olan pop() methodunun amacı tanımlamış olduğumuz dizinin son elemanını silmeye yarar :). Gayet güzel bir fonksiyon olduğu için bize de oluşturan kişilere teşekkür etmek düşer :). Sözü daha fazla uzatmadan hemen kullanımına bakalım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var renkler = ["Kırmızı","Sarı","Yeşil","Mavi","Mor"];
renkler.pop();
alert(renkler);
// EKRAN ÇIKTISI: Kırmızı,Sarı,Yeşil,Mavi
</script>
</body>
</html>
Evet dostlarım :). pop() methodu geldi dizimize baktı en sondaki elemanımıza baktı ve sen buraya ait değilmişsin dostum dedi ve kaldırdı :). İşte dostlarım methodların kullanımı bu kadar basit :). Gelelim diğer methodumuza
7-) shift()
Dostlarım shift() methodunun pop() methodunun tam tersi şeklinde çalışır :). Yani pop() methodu en sondaki elemanı silerken shift() methodu en baştaki elemanın silinmesinde rol oynar :). Gelin aynı örnek üzerinden inceleyelim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Diziler (Arrays) | MFSoftware Blog</title>
</head>
<body>
<script>
var renkler = ["Kırmızı","Sarı","Yeşil","Mavi","Mor"];
renkler.shift();
alert(renkler);
// EKRAN ÇIKTISI: Sarı,Yeşil,Mavi,Mor
</script>
</body>
</html>
Aynı pop() işleminde olduğu gibi burada da fonksiyonumuz en baştaki elemana sen buraya ait değilmişsin dostum dedi ve bu diziden sildi :). Gördüğünüz gibi çok basit bir kullanımı var methodların.
Evet dostlarım :). Artık javascript üzerinde dizi oluşturmayı ve bu dizi methodlarından bazılarının nasıl kullanılacağını öğrenmiş olduk :). Umarım faydalı olmuşumdur. Sizlerden isteğim istikrarlı ilerleyiş içinde olmanız ve bol pratik yapmanızdır :).
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer