JavaScript Fonksiyonları ve Şablon Dizeleri: Örneklerle Anlatım

Bu makale JavaScript fonksiyonlarının ne olduğunu, nasıl çalıştığı ve ne zaman kullanılması gerektiğini açıklamaktadır Bununla birlikte, sıklıkla kullanılan şablon dizeleri de örneklerle anlatılmaktadır Fonksiyonların parametreleri ve dönüş değerleri gibi konular hakkında bilgi verilirken, varsayılan ve rest parametreleri de açıklanmaktadır JavaScript dökümanları incelenerek, fonksiyonlar ve diğer konular hakkında daha fazla bilgi edinilebilir

JavaScript dilinin temel yapı taşlarından biri fonksiyonlardır. Bu makalede fonksiyonların ne olduğu, nasıl çalıştığı ve ne zaman kullanıldığına dair geniş bir açıklama yapacağız. Ayrıca, JavaScript'de sıklıkla kullanılan şablon dizelerinin ne olduğunu ve nasıl kullanıldığını da örneklerle anlatacağız.

Fonksiyonlar, programlama dillerinde belirli kod bloklarını çalıştırmak için kullanılan bir yapıdır. Bu kod blokları, başka kodlar tarafından çağrılabilir ve değiştirilebilir. JavaScript'te fonksiyonlar, genellikle bir değişken gibi tanımlanır ve sonra çağrıldıklarında çalışırlar. Fonksiyonlar, herhangi bir sayıda parametre alabilir ve bunları işleyerek bir sonuç döndürebilirler.

Fonksiyonlarla birlikte kullanılan önemli bir özellik, varsayılan parametreler olarak adlandırılır. Bu özellik, fonksiyonlara parametre verildiğinde, eğer parametre verilmezse, fonksiyonun varsayılan olarak ne yapması gerektiğini önceden belirler. Rest parametreleri ise bu özelliğin biraz farklı bir kullanım şeklidir. Rest parametreleri, fonksiyona gönderilen bütün parametreleri bir diziye toplar ve bu diziyi fonksiyon içinde kullanmamızı sağlar.

Fonksiyonların bir diğer önemli özelliği de dönüş değerleridir. Dönüş değerleri, fonksiyonun tamamlandıktan sonra geri döndürdüğü sonuçlardır. Promise'ler ise, dönüş değerleri gibi fonksiyonların sonuçlarını döndürür, fakat daha karmaşık kodlar içeren işlemler sonucu geri döndürülür.

JavaScript'de sıklıkla kullanılan bir diğer araç da şablon dizeleridir. Şablon dizeleri, string ifadelerini daha yapısal bir şekilde oluşturmamızı sağlar. Şablon dizelerinde, değişkenleri uygun şekilde yerleştirebilir, ifadeleri gömebilir ve hatta fonksiyonları çağırabiliriz. Etiketli şablon dizeleri ise, daha karmaşık işlemler yapmamızı sağlar ve daha büyük ölçekli projelerde kullanışlıdır.

Fonksiyonlar

JavaScript'de fonksiyonlar kodunuzu yeniden kullanmanızı sağlayan bloklardır. Bu bloklar, belirli bir işi yapan kodu tek bir ad altında birleştirir. Kodunuzu okunaklı ve düzenli bir hale getirerek, büyük proje veya dosyaları yönetilebilir hale getirir.

Fonksiyonları kullanmak oldukça basittir. Fonksiyonun adını belirlemeniz ve bunu kullanmak istediğiniz yerde çağırmanız yeterlidir. Bazı durumlarda bir fonksiyona parametreler eklemeniz gerekebilir. Bu parametreler fonksiyonun işlevini gerçekleştirmesine yardımcı olur. Parametreler fonksiyonun içinde belirtilirler ve çağırma komutunda tanımlanırlar.

Bir başka önemli konu da fonksiyonların dönüş değerleri. Fonksiyonlar bir değer döndürebilirler veya döndürmeyebilirler. Bir fonksiyonun dönüş değeri, fonksiyonun işlevi tamamlandığında oluşan sonuçtur. Ayrıca Promise'ler gibi belirli durumlarda dönüş değeri değişebilir.

Fonksiyonlar ve diğer konular hakkında daha fazla bilgi edinmek için JavaScript dökümanlarını inceleyebilirsiniz. Bu konuda öğrenmeniz gereken diğer önemli konular, varsayılan parametreler ve rest parametreleri gibi konulardır.

Parametreler

JavaScript fonksiyonlarında parametreler, fonksiyonun çalışması için gerekli olan değerlerdir. Fonksiyonlar, parametreler sayesinde farklı değerlerle çağırılarak değişik işlemler yapabilirler. Her bir parametre, fonksiyonda tanımlanan değişkenlere aktarılır ve fonksiyon içinde de kullanılır.

Örneğin, bir toplama işlemi için iki sayı gereklidir. Bu sayıları fonksiyonun içinde kullanmak için parametreler oluşturmak gerekir. Fonksiyon çağrısı yapılırken ise, sayılar parametre olarak belirtilir.

Aşağıdaki örnek, iki sayıyı toplayan bir fonksiyondur:```function topla(sayi1, sayi2) { return sayi1 + sayi2;}```

Fonksiyon tanımlandığında, iki parametre belirlenir: `sayi1` ve `sayi2`. Fonksiyon çalıştığında, fonksiyon çağrısı sırasında verilen sayılar bu parametrelere atanır. Sonuç olarak, fonksiyon iki sayıyı toplar ve toplam sonucunu döndürür.

Fonksiyon çağrısı şu şekilde yapılabilir:```topla(5, 7);```Bu durumda, fonksiyon 5 ve 7 sayılarını toplayacak ve sonucu 12 olarak döndürecektir.

Fonksiyonlar birden fazla parametre de alabilirler. Parametreler, virgül ile ayrılır. Aşağıdaki örnek, üç sayıyı toplayan bir fonksiyondur:```function topla(sayi1, sayi2, sayi3) { return sayi1 + sayi2 + sayi3;}```Fonksiyon çağrısı yapılırken, üç sayı parametre olarak belirtilmelidir:```topla(2, 4, 6);```Fonksiyon, 2, 4 ve 6 sayılarını toplayarak sonucu 12 olarak döndürecektir.

Parametrelerin varsayılan değerleri de belirlenebilir. Bu sayede, fonksiyon çağrısı yapılırken parametre verilmeyen durumlar da ele alınabilir. Varsayılan parametreler, parametre listesinde belirtilir:```function mesajGoster(mesaj = 'Merhaba!') { alert(mesaj);}```Bu fonksiyon, bir mesaj gösterir. Eğer fonksiyon çağrısı sırasında parametre verilmezse, fonksiyon varsayılan olarak 'Merhaba!' mesajını gösterir:```mesajGoster(); // "Merhaba!" mesajı gösterilirmesajGoster("Selam!"); // "Selam!" mesajı gösterilir```

Rest parametreleri ise, bir fonksiyona değişken sayıda parametre geçişine izin verir. Bu parametreler, fonksiyondaki son parametre olarak belirtilir ve rest parametresi adı verilir. Rest parametresi, bir dizi şeklinde kullanılabilir:```function ortalamaHesapla(...sayilar) { let toplam = 0; for(let sayi of sayilar) { toplam += sayi; } return toplam / sayilar.length;}```Bu fonksiyon, hemen hemen herhangi bir sayıda sayının ortalamasını hesaplar. Fonksiyon çağrısı yapılırken, parametreler değişken sayıda verilebilir:```ortalamaHesapla(2, 4, 6); // 4 döndürürortalamaHesapla(2, 4, 6, 8, 10); // 6 döndürür```

Varsayılan parametreler

Varsayılan parametreler, bir fonksiyona argüman girilmediğinde kullanılacak olan değerleri tanımlamak için kullanılır. Fonksiyonun içinde bir argüman atanmadığında bu varsayılan değerler kullanılır. Örneğin:

function greetings(name = 'Dünya') { console.log('Merhaba ' + name + '!');}

greetings('Gökhan'); // Merhaba Gökhan!greetings(); // Merhaba Dünya!

Bu örnekte, 'greetings' isimli fonksiyona herhangi bir argüman girilmediği taktirde, varsayılan olarak 'Dünya' değeri kullanılacak şekilde tanımlandı. İlk çağrıda, argüman olarak 'Gökhan' girildiği için 'Merhaba Gökhan!' yazısı log ekranına yazdırıldı. İkinci çağrıda ise herhangi bir argüman girilmediği için varsayılan olarak 'Dünya' değeri kullanıldı ve 'Merhaba Dünya!' yazısı ekrana yazdırıldı.Varsayılan parametrelerin, bir kez belirlendiğinde fonksiyonun sonraki çağrılarda devam eden tüm çağrılarda kullanılması önemlidir. Ancak, yeni bir değer bir sonraki çağrılarda geçerli olacak şekilde belirlenebilir.

function countdown(start = 10, end = 1, step = 1) { for (let i = start; i >= end; i -= step) { console.log(i); }}

countdown(); // 10, 9, 8, 7, 6, 5, 4, 3, 2, 1countdown(20, 5, 3); // 20, 17, 14, 11, 8, 5

Bu örnekte, 'countdown' fonksiyonuna herhangi bir argüman girilmediği takdirde, varsayılan olarak 'start' değeri olarak 10, 'end' değeri olarak 1 ve 'step' değeri olarak 1 kullanılacaktır. İlk çağrıda, fonksiyon varsayılan değerlerle çağrıldı ve 10'dan 1'e kadar 1'er 1'er geri sayım yapıldı. İkinci çağrıda ise yeni argüman değerleri girildiğinden 20'den 5'e kadar 3'er 3'er geri sayım yapıldı.Varsayılan parametreler, bir fonksiyonun daha öngörülebilir olmasını sağlar ve argümanları daha açık ve özlü hale getirir. Bu nedenle, JavaScript fonksiyonlarını kullanırken varsayılan parametrelerin nasıl tanımlandığı ve kullanıldığı önemlidir.

Rest parametreleri

JavaScript fonksiyonları, belirli bir işlemi gerçekleştirmek için kullanılan temel yapı taşlarından biridir. Fonksiyonlar, istenildiğinde çağrılarak belirli bir işlemi tekrar tekrar gerçekleştirme kolaylığı sağlar. Ancak bazı durumlarda, fonksiyona kaç adet parametre gönderileceği önceden bilinmez olabilir. İşte bu gibi durumlarda rest parametreleri kullanılır.

Rest parametreleri, fonksiyona gönderilen argümanların tamamını bir dizi içerisinde toplamak için kullanılır. Bu sayede, fonksiyona kaç adet parametre gönderildiğinin bir önemi kalmaz ve tüm parametreler tek bir dizi içerisinde toplanır. Rest parametreleri tanımlamak için üç nokta (...) kullanılır ve sonrasında bir dizi adı belirtilir. Örneğin:

function toplam(...sayilar) {  let toplam = 0;  for (let sayi of sayilar) {    toplam += sayi;  }  return toplam;}

Yukarıdaki örnekte, rest parametresi sayesinde toplam fonksiyonuna kaç adet sayı gönderildiği önemli değildir. Fonksiyon, gönderilen tüm sayıları toplayacak ve sonucu geri döndürecektir. Ayrıca, rest parametreleri ile birlikte varsayılan parametreler de kullanılabilir.

function toplam(...sayilar) {  let toplam = 0;  for (let sayi of sayilar) {    toplam += sayi;  }  return toplam;}
function carpim(carpici, ...sayilar) {  let carpim = carpici;  for (let sayi of sayilar) {    carpim *= sayi;  }  return carpim;}
console.log(toplam(1, 2, 3)); // 6console.log(carpim(2, 3, 4)); // 24

Yukarıdaki örnekte, carpim fonksiyonunda rest parametresi yanında bir de varsayılan parametre kullanılmıştır. carpici parametresi varsayılan olarak 2 değerini almaktadır ve fonksiyon çağrılırken bu değer belirtilmezse otomatik olarak 2 değeri atanacaktır. rest parametresi sayilar ise fonksiyona gönderilen tüm sayıları içeren bir diziye dönüştürülmektedir.

Rest parametreleri, JavaScript'te fonksiyonların kullanımını daha da esnek hale getirir ve fonksiyonlara kaç adet parametre gönderildiği önemsiz hale getirir. Bu sayede, fonksiyonlar neredeyse her türlü senaryoda kullanılabilecek şekilde tasarlanabilir.

Dönüş Değerleri

JavaScript fonksiyonları, kullanıcılara çeşitli işlemler yapma imkanı sağlar. Fonksiyonların arasında en önemli olanlardan biri, dönüş değerleri veren fonksiyonlardır.

Dönüş değerleri, bir fonksiyonun geri döndürdüğü sonuçtur. Bu sonuç, bir değişkene atanabilir ya da başka bir fonksiyonda kullanılabilir. Bir fonksiyonun bir değer döndürmesi için, "return" anahtar kelimesinden sonra döndürülecek olan değer yazılmalıdır.

Örneğin, aşağıdaki fonksiyon, iki sayıyı toplar ve sonucu geri döndürür:

```function topla(sayi1, sayi2) { return sayi1 + sayi2;}```

Bu, fonksiyonun kullanımını gösteren bir örnektir:

```var sonuc = topla(5,3);console.log(sonuc); // 8```

Ayrıca, JavaScript'te fonksiyonlar, "promise" objeleri aracılığıyla da dönüş değeri döndürebilirler. Promiseler, asenkron işlemleri yönetmek için kullanılan bir tekniktir. Bir fonksiyon, promise objesi döndürdüğünde, promise'in döneceği sonucu asenkron olarak bekliyor demektir. Bu yöntem önemli ölçüde daha hızlı ve verimli olabilir.

Promise kullanımına örnek olarak, aşağıdaki fonksiyon, bir resim URL'si aldığında, resmin yüklenmesini bekler ve resmi görüntüler:

```function resimGoster(url) { return new Promise(function(resolve, reject) { var resim = new Image(); resim.onload = function() { document.body.appendChild(resim); resolve(resim); }; resim.onerror = function() { reject(new Error('Resim yüklenemedi')); }; resim.src = url; });}```

Bu, fonksiyonun kullanımını gösteren bir örnektir:

```resimGoster('https://www.example.com/resim.jpg') .then(function(resim) { console.log('Resim yüklendi'); }) .catch(function(hata) { console.log('Hata:', hata); });```

JavaScript fonksiyonlarının dönüş değerleri kullanımı, daha karmaşık uygulamalar için önemlidir ve aynı zamanda işlemlerini daha da optimize etmek için kullanılabilir.

Promise'ler

JavaScript'te Promise'ler, asenkron işlemlerin gerçekleştirilmesi için kullanılır. Birçok JavaScript işleminin zaman alıcı olduğu ve istemci tarafında yürütüldüğü düşünüldüğünde, asenkron işlemler performans ve kullanılabilirlik açısından çok önemlidir.

Promise'ler, bir işlem tamamlandığında gerçekleşecek olan sonucu temsil eder. Bu sonuç, başarılı bir tamamlanma durumunda bir değer veya bir hata durumunda bir hata mesajı olabilir.

Promise oluşturma, Promise.prototype.then() kullanarak işlem sonucuna göre farklı işlemler gerçekleştirme, Promise.all() kullanarak birden çok Promise nesnesini eşleştirerek birleştirme ve Promise.race() kullanarak sadece ilk tamamlanan Promise nesnesinin sonucunu geri döndürme gibi birçok farklı işlem yapılabilir.

Promise'ler, JavaScript'teki kodun okunabilirliğini ve işlevselliğini artıracak şekilde kullanıldığında çok güçlü bir araçtır. Ancak, yanlış kullanıldığında ve kötü yapılandırıldığında, kodunuzu karmaşık hale getirebilir ve performans sorunlarına yol açabilir. Bu nedenle, Promise'lerin ve diğer JavaScript özelliklerinin doğru bir şekilde kullanılmasını sağlamak için kodlarınızı dikkatli bir şekilde oluşturduğunuzdan emin olun.

Şablon Dizeleri

JavaScript'te şablon dizeleri, önceden tanımlanmış bir kalıba uygun olarak bir dize oluşturmak için kullanılır. Şablon dizeleri, çoğunlukla değişkenlerle birleştirilir ve ardından bir dize olarak çıktı verir. Bu yöntem, özellikle uzun dizeler oluşturmada çok yararlıdır.

Şablon dizeleri, '' ` '' (ters tırnak) işareti içinde yazılır ve içindeki değişkenler, ${} işaretiyle belirtilir. Örneğin, ${myVariable} gibi. Bu yöntem, daha önceki JavaScript sürümlerindeki dize birleştirmelerinin yerini alır.

Örneğin, bir kişinin adı ve yaşını içeren bir dize örneği oluşturmak istediğimizi varsayalım. Şablon dizeleri kullanarak şu şekilde yazabiliriz:

```const name = "John Doe";const age = 30;const info = `Adı:${name}. Yaşı:${age}.`;```

Bu kod, bir 'Adı: John Doe. Yaşı: 30.' dizesine eşit bir 'info' değişkeni oluşturur. Şablon dizeleri aynı zamanda ifade gömülmesi ve fonksiyon çağrısı için de kullanılabilir.

Genel olarak, şablon dizeleri, daha okunaklı ve anlaşılır kod yazmaya yardımcı olan yararlı bir araçtır.

Değişken Uyarlaması

Şablon dizeleri, dize içindeki değişkenlerin yerini alabilen bir işaretçi ile tanımlanır. Bu işaretçiler, iki kalem ($) işareti içinde tanımlanabilir.

Örneğin, ${name} işaretçisi, name değişkeninin değeriyle değiştirilecektir. Bu değişkenler, çift tırnak veya tek tırnak içinde olabilir. Örnek olarak;

Kod	Çıktı
`const name = 'John';` console.log(`Merhaba, ben ${name}`);	`Merhaba, ben John`
`let x = 5;` console.log(`x'nin değeri ${x}`);	`x'nin değeri 5`

Bu şekilde, şablon dizeleri içindeki değişkenler, kolayca değiştirebilir. Değişken sayısının artması durumunda, şablon dizeleri daha okunaklı hale gelebilir.

İfade Gömülmesi

JavaScript'te şablon dizeleri, değişken değerleri veya ifadelerle birleştirilerek kullanıcı arayüzünde etkileşim kurmamızı sağlar. İfade gömülmesi işlemi, şablon dizelerinde yer alan ${} ifadesine bir değişken ekleyerek yapılır.

Örneğin, bir kullanıcının adını şablon dizesine eklemek istediğimizde, 'Merhaba ${isim}' şeklinde bir şablon dizesi kullanabiliriz. Daha sonra, bir JavaScript değişkeni oluşturabilir ve adımızı bu değişkene atayabiliriz. Ardından, bu değişkeni şablon dizesine gömerek sonucu elde edebiliriz.

Örnek olarak, aşağıdaki kodu inceleyebilirsiniz:

```jslet isim = "John";let mesaj = `Merhaba ${isim}, hoş geldin!`;console.log(mesaj); // "Merhaba John, hoş geldin!"```

Dikkat ederseniz, şablon dizeleri alt alta satırlarda yer alabilir ve ifadeleri birleştirmek için tek tırnak veya çift tırnak kullanmamız gerekmez.

Bu özelliği kullanarak, kullanıcıların girdiği verileri kullanarak dinamik olarak sayfalar oluşturabiliriz. Örneğin, bir kullanıcının adını, yaşını ve hobilerini girdiği bir form vardır diyelim. Bu bilgileri şablon dizeleri ile birleştirerek sonuç sayfasında bir tebrik mesajı ve kullanıcının bilgilerini gösterebiliriz.

```jslet ad = document.querySelector("#ad").value;let yas = document.querySelector("#yas").value;let hobiler = document.querySelector("#hobiler").value;

let mesaj = `Merhaba ${ad}, ${yas} yaşındasın ve hobilerin ${hobiler}.`;

let sonuc = document.querySelector("#sonuc");sonuc.innerHTML = mesaj;```Yukarıdaki örnekte, kullanıcı girdilerini alarak bir mesaj oluşturuyoruz ve sonucu HTML sayfasında bir div içinde gösteriyoruz.

İfade gömülmesi özelliği, dinamik web sayfaları oluşturmak için oldukça yararlı bir araçtır. Bu özelliği kullanarak, kullanıcıların bilgilerini sayfada anında görüntüleyebilir ve interaktif bir deneyim sağlayabiliriz.

Fonksiyon Çağrısı

Fonksiyon çağrısı şablon dizelerinin güçlü özelliklerinden biridir. Fonksiyon çağrıları, çıktıları belirtilen amaç doğrultusunda formatlandıran yenilikçi bir yöntemdir. Şablon dizeleri kullanarak, fonksiyonlara eklenen argümanlar da uygun hale getirilebilir.

Bir fonksiyon çağrısı yapmak için, bir şablon dizesindeki herhangi bir yerde bir fonksiyon tanımlandığında, o fonksiyonun adı parantezlerle birlikte tanımlanabilir. Fonksiyon çağrısı, bir şablon dizesinin bir parçası olarak, o anki içeriğin sonucuna göre etkilenebilir.

Örneğin, aşağıdaki fonksiyonu göz önünde bulundurun:

function greet(name) { return `Merhaba, benim adım ${name}.`;}

Şablon dizeleri kullanarak, "greet" fonksiyonu çağrılabilir ve çıktısı doğru formatta yazdırılabilir:

const name = "Ali";const message = `Selam, ${greet(name)}`;console.log(message);

Burada, "greet" fonksiyonu çağrılarak "message" değişkenine atanmıştır. Sonrasında, console.log() yöntemi kullanılarak "message" değişkeninin çıktısı üretilmiştir.

Bir başka örnek için, bir toplama işlemi yapalım:

function toplama(a, b) { return a + b;}

Şimdi, bu fonksiyonu çağırarak, bir dize içerisinde şekillendirelim:

const sonuc = `Toplama sonucu: ${toplama(5, 3)}`;console.log(sonuc);

İşte bu kadar! İster bir fonksiyon çağrısı ile basit bir matematiksel işlem, ister bir kişi adı ve selamlaşma kullanın, şablon dizeleri fonksiyon çağrılarına uygun hale getirebilir ve istediğiniz formatta çıktı almanıza olanak sağlar.

Etiketli Şablon Dizeleri

JavaScript'de şablon dizeleri kullanmanın en ilgi çekici yönü etiketli şablon dizeleridir. Bu, JavaScript kodunu HTML veya XML belgeleriyle birleştirmenin en iyi yoludur. Öncelikle belirtilmek istenen bir etikete sahip olmak için şablon dizeleri işaretlenir. Bu etiket, genellikle kendine ait bir CSS stiliyle sunulur ve bir işlev tarafından yönetilir. Bu yaklaşım, yazılım geliştiricilerin verileri daha iyi yapısallaştırmalarına ve uygun biçimlendirmeye olanak tanır.

Özetle, etiketli şablon dizeleri, HTML veya XML belgelerini kodlamak için JavaScript kullanmanın en iyi yoludur. HTML koduna benzer bir okuma deneyimi sağlar ve önemli verileri yapısal biçimlendirmede kullanmaya olanak tanır. Böylece verilerin düzenlenmesi kolaylaşır ve kodun okunması daha da anlamlı hale gelir. Ayrıca, etiketli şablon dizelerinin düzenlemesi ve yönetimi kolaydır.