JavaScript Ders Notları

JavaScript Temel Kod Yapıları-2

İleri Diziler, Modern Sözdizimi, Asenkron Yapılar ve Uygulama Geliştirme

1. Giriş

Temel JavaScript konuları; değişkenler, veri tipleri, operatörler, koşullar, döngüler, fonk-
siyonlar, diziler, nesneler ve DOM işlemleri etrafında şekillenir. Bu yapıların öğrenilme-
sinden sonra JavaScript daha güçlü ve daha düzenli biçimde kullanılmaya başlanır. Bu
aşamada veri işleme, hata yönetimi, asenkron programlama, veri saklama, modüler yapı
ve nesne yönelimli yaklaşım gibi konular öne çıkar.
Bu ders notunda, temel konuların ardından ele alınan JavaScript başlıkları açıklanmakta
ve örnek kodlarla gösterilmektedir.

2. İleri Dizi İşlemleri

JavaScript’te diziler yalnızca veri saklamak için değil, aynı zamanda verileri dönüştürmek,
filtrelemek ve işlemek için de kullanılır. Bu amaçla çeşitli dizi metotları bulunur.

2.1. forEach()

forEach() bir dizinin her elemanı için verilen işlemi uygular.

1 let sayilar = [10 , 20 , 30 , 40];
2

3 sayilar . forEach ( function ( sayi ) {

4 console . log ( sayi ) ;
5 }) ;

Listing 1: forEach kullanımı

2.2. map()

map() her eleman üzerinde işlem yapar ve yeni bir dizi döndürür.
1 let sayilar = [1 , 2 , 3 , 4];
2 let kareler = sayilar . map ( function ( sayi ) {
3 return sayi * sayi ;
4 }) ;
5

6 console . log ( kareler ) ;

1
 JavaScript Ders Notları

Listing 2: map kullanımı

2.3. filter()

filter() belirli bir koşulu sağlayan elemanları seçer.

1 let sayilar = [1 , 2 , 3 , 4 , 5 , 6];
2 let ciftSayilar = sayilar . filter ( function ( sayi ) {
3 return sayi % 2 === 0;
4 }) ;
5

6 console . log ( ciftSayilar ) ;

Listing 3: filter kullanımı

2.4. find()

find() koşulu sağlayan ilk elemanı döndürür.

1 let ogrenciler = [
2 { ad : " Ayse " , not : 70 } ,
3 { ad : " Mehmet " , not : 85 } ,
4 { ad : " Zeynep " , not : 90 }
5 ];
6

7 let sonuc = ogrenciler . find ( function ( ogrenci ) {

8 return ogrenci . not > 80;
9 }) ;
10

11 console . log ( sonuc ) ;

Listing 4: find kullanımı

2.5. some() ve every()

some() en az bir elemanın koşulu sağlayıp sağlamadığını kontrol eder. every() tüm ele-
manların koşulu sağlayıp sağlamadığını kontrol eder.
1 let sayilar = [2 , 4 , 6 , 8];
2

3 console . log ( sayilar . some ( function ( sayi ) {

4 return sayi > 5;

2
 JavaScript Ders Notları

5 }) ) ;
6

7 console . log ( sayilar . every ( function ( sayi ) {

8 return sayi % 2 === 0;
9 }) ) ;

Listing 5: some ve every kullanımı

2.6. reduce()

reduce() dizideki elemanları tek bir sonuca indirger.

1 let sayilar = [1 , 2 , 3 , 4 , 5];
2

3 let toplam = sayilar . reduce ( function ( toplam , sayi ) {

4 return toplam + sayi ;
5 } , 0) ;
6

7 console . log ( toplam ) ;

Listing 6: reduce kullanımı

3. Metin ve Dizi Metotları

JavaScript’te metinler ve diziler üzerinde çok sayıda yerleşik metot bulunur.

3.1. Metin Metotları

1 let metin = " JavaScript Dersleri ";

2

3 console . log ( metin . trim () ) ;

4 console . log ( metin . toUpperCase () ) ;
5 console . log ( metin . toLowerCase () ) ;
6 console . log ( metin . includes (" Script ") ) ;
7 console . log ( metin . replace (" Dersleri " , " Notlari ") ) ;

Listing 7: Metin metotları

3.2. Parçalama ve Birleştirme

3
 JavaScript Ders Notları

1 let cumle = " JavaScript temel konulari ";

2 let kelimeler = cumle . split (" ") ;
3

4 console . log ( kelimeler ) ;

5

6 let yeniMetin = kelimeler . join (" -") ;

7 console . log ( yeniMetin ) ;

Listing 8: split ve join kullanımı

3.3. Kesme İşlemleri

1 let kelime = " Bilgisayar ";

2

3 console . log ( kelime . slice (0 , 5) ) ;

4 console . log ( kelime . substring (5 , 10) ) ;

Listing 9: slice ve substring kullanımı

4. Nesnelerde İleri İşlemler

Gerçek uygulamalarda veriler çoğu zaman nesneler ve nesne dizileri biçiminde tutulur.

4.1. İç İçe Nesneler

1 let ogrenci = {
2 ad : " Ayse " ,
3 bolum : " Bilgisayar Muhendisligi " ,
4 adres : {
5 sehir : " Malatya " ,
6 ulke : " Turkiye "
7 }
8 };
9

10 console . log ( ogrenci . adres . sehir ) ;

Listing 10: İç içe nesne örneği

4.2. Nesne Dizileri

4
 JavaScript Ders Notları

1 let ogrenciler = [
2 { ad : " Ayse " , not : 70 } ,
3 { ad : " Mehmet " , not : 85 } ,
4 { ad : " Zeynep " , not : 90 }
5 ];
6

7 console . log ( ogrenciler [1]. ad ) ;

Listing 11: Nesne dizisi örneği

4.3. [Link](), [Link](), [Link]()

1 let kitap = {
2 ad : " JavaScript " ,
3 sayfa : 350 ,
4 yazar : " Ali Yilmaz "
5 };
6

7 console . log ( Object . keys ( kitap ) ) ;

8 console . log ( Object . values ( kitap ) ) ;
9 console . log ( Object . entries ( kitap ) ) ;

Listing 12: Object metotları

5. Destructuring

Destructuring, dizi ve nesnelerdeki verileri daha kısa ve düzenli biçimde değişkenlere ayır-
mayı sağlar.

5.1. Dizi Destructuring

1 let renkler = [" kirmizi " , " mavi " , " yesil "];
2

3 let [ birinci , ikinci , ucuncu ] = renkler ;

4

5 console . log ( birinci ) ;

6 console . log ( ikinci ) ;
7 console . log ( ucuncu ) ;

Listing 13: Dizi destructuring

5
 JavaScript Ders Notları

5.2. Nesne Destructuring

1 let kullanici = {
2 ad : " Ahmet " ,
3 yas : 22 ,
4 sehir : " Malatya "
5 };
6

7 let { ad , yas , sehir } = kullanici ;

8

9 console . log ( ad ) ;
10 console . log ( yas ) ;
11 console . log ( sehir ) ;

Listing 14: Nesne destructuring

6. Spread ve Rest Operatörleri

Üç nokta (...) işareti JavaScript’te hem spread hem rest amacıyla kullanılır.

6.1. Spread Kullanımı

Spread operatörü bir dizinin veya nesnenin elemanlarını açar.

1 let sayilar1 = [1 , 2 , 3];
2 let sayilar2 = [... sayilar1 , 4 , 5];
3

4 console . log ( sayilar2 ) ;

Listing 15: Spread operatörü

1 let kisi = { ad : " Ayse " , yas : 21 };

2 let yeniKisi = { ... kisi , bolum : " Bilgisayar Muhendisligi " };
3

4 console . log ( yeniKisi ) ;

Listing 16: Nesnelerde spread kullanımı

6.2. Rest Parametresi

Rest yapısı, birden fazla parametreyi tek yapıda toplar.

6
 JavaScript Ders Notları

1 function topla (... sayilar ) {

2 let toplam = 0;
3

4 for ( let sayi of sayilar ) {

5 toplam += sayi ;
6 }
7

8 return toplam ;
9 }
10

11 console . log ( topla (1 , 2 , 3 , 4 , 5) ) ;

Listing 17: Rest parametresi

7. Scope ve Hoisting

7.1. Scope

Scope, bir değişkenin erişilebilir olduğu alanı ifade eder. JavaScript’te genel olarak global
scope, function scope ve block scope bulunur.
1 let globalDegisken = " Genel alan ";
2

3 function test () {
4 let yerelDegisken = " Fonksiyon alani ";
5 console . log ( globalDegisken ) ;
6 console . log ( yerelDegisken ) ;
7 }
8

9 test () ;

Listing 18: Scope örneği

7.2. Block Scope

let ve const, blok içinde tanımlandığında yalnızca o blok içinde geçerlidir.

1 if ( true ) {
2 let mesaj = " Merhaba ";
3 console . log ( mesaj ) ;
4 }

Listing 19: Block scope örneği

7
 JavaScript Ders Notları

7.3. Hoisting

Hoisting, JavaScript’in değişken ve fonksiyon tanımlarını bellekte önceden hazırlaması ile

ilgilidir. Ancak let ve const ile tanımlanan değişkenler kullanılmadan önce tanımlanma-
lıdır.
1 function selamla () {
2 console . log (" Merhaba ") ;
3 }
4

5 selamla () ;

Listing 20: Hoisting örneği

8. Callback Fonksiyonları

Bir fonksiyonun başka bir fonksiyona parametre olarak gönderilmesine callback yaklaşımı
denir.
1 function islemYap (a , b , callback ) {
2 return callback (a , b ) ;
3 }
4

5 function topla (x , y ) {
6 return x + y ;
7 }
8

9 console . log ( islemYap (3 , 5 , topla ) ) ;

Listing 21: Callback örneği

Olay yönetiminde de callback yapısı sık kullanılır.

9. Hata Yönetimi

Program çalışırken ortaya çıkan hatalar kontrollü biçimde yakalanabilir.

9.1. try-catch

1 try {
2 let sonuc = 10 / 0;
3 console . log ( sonuc ) ;
4 } catch ( hata ) {

8
 JavaScript Ders Notları

5 console . log (" Bir hata olustu :" , hata ) ;

6 }

Listing 22: try-catch örneği

9.2. finally

1 try {
2 console . log (" Islem basladi ") ;
3 } catch ( hata ) {
4 console . log ( hata ) ;
5 } finally {
6 console . log (" Islem tamamlandi ") ;
7 }

Listing 23: finally örneği

9.3. throw

1 function yasKontrol ( yas ) {

2 if ( yas < 0) {
3 throw new Error (" Yas negatif olamaz ") ;
4 }
5 return " Gecerli yas ";
6 }
7

8 console . log ( yasKontrol (20) ) ;

Listing 24: throw örneği

10. Tarih ve Zaman İşlemleri

JavaScript’te tarih ve saat bilgileri Date nesnesi ile yönetilir.

1 let simdi = new Date () ;
2

3 console . log ( simdi ) ;

4 console . log ( simdi . getFullYear () ) ;
5 console . log ( simdi . getMonth () + 1) ;
6 console . log ( simdi . getDate () ) ;
7 console . log ( simdi . getHours () ) ;
8 console . log ( simdi . getMinutes () ) ;

9
 JavaScript Ders Notları

Listing 25: Date kullanımı

11. DOM’da İleri İşlemler

Temel DOM işlemlerinden sonra daha esnek seçim ve düzenleme işlemleri yapılabilir.

11.1. querySelector() ve querySelectorAll()

1 let baslik = document . querySelector (" h1 ") ;

2 console . log ( baslik ) ;

Listing 26: querySelector kullanımı

1 let paragraflar = document . querySelectorAll (" p ") ;

2

3 paragraflar . forEach ( function ( paragraf ) {

4 console . log ( paragraf . textContent ) ;
5 }) ;

Listing 27: querySelectorAll kullanımı

11.2. Class Ekleme ve Silme

1 let kutu = document . querySelector (". kutu ") ;

2

3 kutu . classList . add (" aktif ") ;

4 kutu . classList . remove (" aktif ") ;
5 kutu . classList . toggle (" goster ") ;

Listing 28: classList kullanımı

11.3. Yeni Eleman Oluşturma

1 let yeniMadde = document . createElement (" li ") ;

2 yeniMadde . textContent = " Yeni gorev ";
3

4 document . querySelector (" ul ") . appendChild ( yeniMadde ) ;

Listing 29: Yeni eleman oluşturma

10
 JavaScript Ders Notları

11.4. Eleman Silme

1 let madde = document . querySelector (" li ") ;

2 madde . remove () ;

Listing 30: Eleman silme

12. Form Doğrulama

Form verilerinin kontrol edilmesi web uygulamalarında temel işlemlerden biridir.

1 let form = document . querySelector (" form ") ;
2 let giris = document . querySelector ("# ad ") ;
3 let mesaj = document . querySelector ("# mesaj ") ;
4

5 form . addEventListener (" submit " , function ( event ) {

6 event . preventDefault () ;
7

8 if ( giris . value . trim () === "") {

9 mesaj . textContent = " Ad alani bos birakilamaz .";
10 } else {
11 mesaj . textContent = " Form basariyla gonderildi .";
12 }
13 }) ;

Listing 31: Basit form doğrulama

13. localStorage ve sessionStorage

Tarayıcı üzerinde veri saklamak için localStorage ve sessionStorage kullanılır.

13.1. localStorage

1 localStorage . setItem (" kullaniciAdi " , " Ahmet ") ;

2

3 let veri = localStorage . getItem (" kullaniciAdi ") ;

4 console . log ( veri ) ;
5

6 localStorage . removeItem (" kullaniciAdi ") ;

Listing 32: localStorage kullanımı

11
 JavaScript Ders Notları

13.2. Nesne Saklama

Nesneler doğrudan saklanamaz. Önce JSON biçimine çevrilir.

1 let ogrenci = {
2 ad : " Ayse " ,
3 bolum : " Bilgisayar Muhendisligi "
4 };
5

6 localStorage . setItem (" ogrenci " , JSON . stringify ( ogrenci ) ) ;

7

8 let kayitliVeri = JSON . parse ( localStorage . getItem (" ogrenci ") ) ;

9 console . log ( kayitliVeri ) ;

Listing 33: JSON ile veri saklama

14. JSON Yapısı

JSON, veri taşımak ve saklamak için kullanılan metin tabanlı bir formattır.
1 let kisi = {
2 ad : " Mehmet " ,
3 yas : 25
4 };
5

6 let jsonVeri = JSON . stringify ( kisi ) ;

7 console . log ( jsonVeri ) ;
8

9 let tekrarNesne = JSON . parse ( jsonVeri ) ;

10 console . log ( tekrarNesne ) ;

Listing 34: JSON dönüştürme işlemleri

15. Asenkron JavaScript

Bazı işlemler hemen tamamlanmaz. Özellikle internetten veri alma ve zamanlayıcı işlemleri
asenkron yapı ile ilgilidir.

15.1. setTimeout

1 console . log (" Baslangic ") ;

2

12
 JavaScript Ders Notları

3 setTimeout ( function () {
4 console . log ("2 saniye sonra calisti ") ;
5 } , 2000) ;
6

7 console . log (" Bitis ") ;

Listing 35: setTimeout örneği

15.2. Promise

Promise, gelecekte tamamlanacak bir işlemin sonucunu temsil eder.

1 let kontrol = new Promise ( function ( resolve , reject ) {
2 let basarili = true ;
3

4 if ( basarili ) {
5 resolve (" Islem basarili ") ;
6 } else {
7 reject (" Islem basarisiz ") ;
8 }
9 }) ;
10

11 kontrol
12 . then ( function ( sonuc ) {
13 console . log ( sonuc ) ;
14 })
15 . catch ( function ( hata ) {
16 console . log ( hata ) ;
17 }) ;

Listing 36: Promise örneği

15.3. async ve await

1 function veriGetir () {
2 return new Promise ( function ( resolve ) {
3 setTimeout ( function () {
4 resolve (" Veri alindi ") ;
5 } , 2000) ;
6 }) ;
7 }
8

9 async function calistir () {

13
 JavaScript Ders Notları

10 let sonuc = await veriGetir () ;

11 console . log ( sonuc ) ;
12 }
13

14 calistir () ;

Listing 37: async-await örneği

16. API Kullanımı ve fetch

JavaScript ile internet üzerindeki servislerden veri alınabilir. Bu işlem için yaygın olarak
fetch() kullanılır.
1 fetch (" https :// jsonplaceholder . typicode . com / users ")
2 . then ( function ( response ) {
3 return response . json () ;
4 })
5 . then ( function ( data ) {
6 console . log ( data ) ;
7 })
8 . catch ( function ( error ) {
9 console . log (" Hata :" , error ) ;
10 }) ;

Listing 38: fetch ile veri alma

17. Modüller

Büyük uygulamalarda kod tek bir dosyada tutulmaz. Kodlar farklı dosyalara ayrılır ve
modüler yapı oluşturulur.

17.1. export

1 export function topla (a , b ) {

2 return a + b ;
3 }

Listing 39: export kullanımı

17.2. import

14
 JavaScript Ders Notları

1 import { topla } from "./ matematik . js ";

2

3 console . log ( topla (3 , 5) ) ;

Listing 40: import kullanımı

18. Class Yapısı

JavaScript’te nesne yönelimli yaklaşım için class yapısı kullanılabilir.

1 class Ogrenci {
2 constructor ( ad , yas ) {
3 this . ad = ad ;
4 this . yas = yas ;
5 }
6

7 bilgiGoster () {
8 console . log ( this . ad + " - " + this . yas ) ;
9 }
10 }
11

12 let ogrenci1 = new Ogrenci (" Ayse " , 21) ;

13 ogrenci1 . bilgiGoster () ;

Listing 41: class örneği

18.1. Kalıtım

1 class Kisi {
2 constructor ( ad ) {
3 this . ad = ad ;
4 }
5

6 selamVer () {
7 console . log (" Merhaba " + this . ad ) ;
8 }
9 }
10

11 class Ogrenci extends Kisi {

12 constructor ( ad , bolum ) {
13 super ( ad ) ;
14 this . bolum = bolum ;

15
 JavaScript Ders Notları

15 }
16 }
17

18 let ogrenci = new Ogrenci (" Zeynep " , " Bilgisayar Muhendisligi ") ;
19 ogrenci . selamVer () ;

Listing 42: Kalıtım örneği

19. Event Bubbling ve Event Delegation

DOM olaylarında bir olay önce hedef elemanda başlar, sonra üst elemanlara doğru yayı-
labilir. Bu davranışa event bubbling adı verilir.
1 document . querySelector (". dis ") . addEventListener (" click " , function
() {
2 console . log (" Dis kutu tiklandi ") ;
3 }) ;
4

5 document . querySelector (". ic ") . addEventListener (" click " , function

() {
6 console . log (" Ic kutu tiklandi ") ;
7 }) ;

Listing 43: Event bubbling örneği

Birden fazla benzer eleman için tek merkezden olay yönetimi yapıldığında event delegation
yaklaşımı kullanılır.
1 document . querySelector (" ul ") . addEventListener (" click " , function (
event ) {
2 if ( event . target . tagName === " LI ") {
3 console . log ( event . target . textContent ) ;
4 }
5 }) ;

Listing 44: Event delegation örneği

20. Modern Geliştirme Ortamı

JavaScript uygulamaları modern araçlarla birlikte geliştirilir. Paket yönetimi, modül yapısı
ve derleme süreçleri bu aşamada önem kazanır.

16
 JavaScript Ders Notları

20.1. npm

npm, JavaScript paketlerinin kurulmasını ve yönetilmesini sağlar.

1 npm init -y

Listing 45: npm başlangıç örneği

20.2. Paket Kurulumu

1 npm install axios

Listing 46: Paket yükleme örneği

20.3. Vite

Modern ön yüz uygulamalarında hızlı geliştirme ortamı sağlamak için Vite kullanılabilir.
1 npm create vite@latest

Listing 47: Vite proje oluşturma

21. TypeScript’e Giriş

TypeScript, JavaScript üzerine tip sistemi ekleyen bir yapıdır. Büyük projelerde veri tip-
lerinin açık biçimde belirtilmesi, hata yakalamayı kolaylaştırır.
1 let ad : string = " Ahmet ";
2 let yas : number = 22;
3

4 function topla ( a : number , b : number ) : number {

5 return a + b ;
6 }
7

8 console . log ( topla (3 , 5) ) ;

Listing 48: TypeScript örneği

22. Mini Proje Başlıkları

Temel ve ileri JavaScript konularının ardından küçük uygulamalar geliştirilebilir. Bu tür

uygulamalar, öğrenilen yapıların bir arada kullanılmasını sağlar.

17
 JavaScript Ders Notları

• Yapılacaklar listesi

• Not hesaplama sistemi

• Sayaç uygulaması

• Sayı tahmin oyunu

• Öğrenci bilgi formu

• Alışveriş sepeti uygulaması

• Hava durumu uygulaması

• API üzerinden kullanıcı listesi gösterme

23. Genel Konu Akışı

Temel JavaScript konularından sonra ilerleyen konu akışı aşağıdaki biçimde özetlenebilir:

1. İleri dizi işlemleri

2. Metin ve dizi metotları

3. Nesnelerde ileri işlemler

4. Destructuring

5. Spread ve rest operatörleri

6. Scope ve hoisting

7. Callback fonksiyonları

8. Hata yönetimi

9. Tarih ve zaman işlemleri

10. DOM’da ileri işlemler

11. Form doğrulama

12. localStorage ve sessionStorage

13. JSON yapısı

14. Asenkron JavaScript

15. API kullanımı ve fetch

18
 JavaScript Ders Notları

16. Modüller

17. Class yapısı

18. Event bubbling ve event delegation

19. Modern geliştirme ortamı

20. TypeScript’e giriş

21. Mini projeler

24. Özet

Temel JavaScript konularından sonra dilin daha güçlü özellikleri ve modern kullanım bi-
çimleri ele alınır. Bu aşamada veri işleme, nesne yapıları, modern sözdizimi, hata yönetimi,
veri saklama, asenkron programlama, modüler yapı ve nesne yönelimli yaklaşım önemli
başlıklar hâline gelir.
Bu konuların öğrenilmesiyle birlikte JavaScript yalnızca küçük örneklerin yazıldığı bir dil
olmaktan çıkar; veri işleyen, internetten bilgi alan, kullanıcı etkileşimlerine cevap veren
ve daha büyük ölçekli uygulamalar üreten bir geliştirme ortamına dönüşür.

19