Skip to main content

JavaScript’te Fonksiyon Tanımlama

Giriş​

Fonksiyon, belirli bir işlemi yapan ya da bir değer döndüren kod bloklarıdır.
Programcılar tarafından tanımlanır, tekrar tekrar kullanılabilir. Bu sayede programlar hem daha modüler hem de daha verimli hale gelir.

Bu derste JavaScript’te fonksiyonları farklı şekillerde nasıl tanımlayabileceğini, nasıl çağırabileceğini ve parametreleri nasıl kullanabileceğini öğreneceğiz.

Fonksiyon Tanımlama​

JavaScript’te fonksiyonlar function anahtar kelimesi ile tanımlanır (ya da bildirilir).
Aşağıda temel fonksiyon sözdizimini görebilirsin:

function fonksiyonAdi(parametre1, parametre2) {
  // Çalıştırılacak kodlar buraya yazılır
}

Fonksiyon bildirimi function anahtar kelimesiyle başlar, ardından fonksiyonun adı gelir.
Fonksiyon isimleri, değişken isimleriyle aynı kurallara uyar: harf, rakam, alt çizgi (_) ve dolar işareti ($) içerebilir.
Genellikle camelCase yazım tarzı tercih edilir.

Fonksiyon adından sonra parantezler gelir. Bu parantezler, fonksiyona parametre göndermek için kullanılır (parametreler opsiyoneldir).
Fonksiyonun çalışacak kodları ise küme parantezleri {} içinde yazılır; tıpkı for ya da if ifadelerinde olduğu gibi.

İlk Örneğimiz​

Konsola bir selamlama mesajı yazdıran basit bir fonksiyon tanımlayalım:

function selamVer() {
  console.log("Merhaba! JavaScript öğreniyoruz ");
}

Yukarıdaki örnekte selamVer() fonksiyonunun içinde Merhaba! JavaScript öğreniyoruz mesajını konsola yazdıran kod var.
Ama dikkat et, fonksiyonu sadece tanımladık — henüz çalıştırmadık.

Bir fonksiyon, çağrılmadığı sürece hiçbir şey yapmaz.
Fonksiyonu çalıştırmak için adını yazıp yanına parantez açıp kapatman yeterlidir:

// Fonksiyonu çağırma
greet();

Şimdi bu adımları birleştirelim:
Fonksiyonu tanımlayacağız ve ardından çağırarak çalıştıracağız.

function selamVer() {
  console.log("Merhaba! JavaScript öğreniyoruz ");
}

// Fonksiyonu çağırma
selamVer();

selamVer(); satırını çağırdığımızda fonksiyon çalışır ve programın çıktısı olarak Merhaba! JavaScript öğreniyoruz mesajını görürüz.

Output
Merhaba! JavaScript öğreniyoruz

Artık selamVer() kodumuz bir fonksiyonun içinde, yani istediğimiz kadar tekrar kullanabiliriz.

Ayrıca fonksiyonlara parametreler ekleyerek kodu daha dinamik hale getirebiliriz.

Fonksiyon Parametreleri​

script.js dosyamızda konsola Hello, World! yazdıran basit bir fonksiyon oluşturmuştuk.
Parametreler kullanarak bu fonksiyonu daha esnek ve kullanışlı hale getirebiliriz.

Parametreler, fonksiyonlara girilen değerlerdir ve fonksiyonun içinde yerel değişken gibi davranırlar.

Örneğin, bir kullanıcı bir uygulamaya giriş yaptığında, sadece “Hello, World!” yazmak yerine onu ismiyle selamlamak isteyebiliriz.

Bunu yapmak için fonksiyonumuza name adında bir parametre ekleyeceğiz. Bu parametre, selam verilecek kişinin adını temsil edecek.

// Özel selamlama fonksiyonunu başlat
function selamVer(name) {
  console.log(`Merhaba, ${name}!`);
}

Fonksiyonumuzun adı selamVer ve artık parantez içinde tek bir parametremiz var.
Parametre adı, değişken adlarıyla aynı kurallara uyar.

Fonksiyonun içinde ise sabit bir "Merhaba! JavaScript öğreniyoruz" metni yerine, parametreyi kullandığımız bir template literal (şablon string) var.
Bu parametre burada yerel bir değişken gibi davranıyor.

Dikkat edersen, name parametresini fonksiyon dışında hiçbir yerde tanımlamadık.
Bu parametreye değer atamasını, fonksiyonu çağırırken yapıyoruz.

Örneğin kullanıcımızın adı Ali olsun. Fonksiyonu çağırırken bu ismi argüman olarak göndeririz.
Argüman, fonksiyona aktarılan gerçek değerdir. Burada argüman "Ali" stringidir.

// "Sammy" argümanıyla greet fonksiyonunu çağır
selamVer("Ali");

// Çıktı: 
Merhaba, Ali!

"Ali" değeri, fonksiyonun name parametresine aktarılıyor.
Artık fonksiyon içinde name her kullanıldığında "Ali" değerini temsil edecek.

// Özel selamlama fonksiyonunu başlat
function selamVer(name) {
  console.log(`Merhaba, ${name}!`);
}

// "Ali" argümanıyla greet fonksiyonunu çağır
selamVer("Sammy");

Yukarıdaki programı çalıştırdığımızda aşağıdaki çıktıyı alacağız.

// Çıktı: 
Merhaba, Ali!

Artık bir fonksiyonun nasıl yeniden kullanılabileceğine dair örneğimiz oldu.
Gerçek hayatta bu fonksiyon, ismi doğrudan argüman olarak almak yerine bir veritabanından çekebilirdi.

Parametrelerin yanında, fonksiyonların içinde değişkenler de tanımlanabilir.
Bu değişkenlere yerel değişken (local variable) denir ve yalnızca tanımlandıkları fonksiyon bloğu içinde var olurlar.

Değişken kapsamı (scope), bir değişkenin erişilebilirliğini belirler:

  • Fonksiyon içinde tanımlanan değişkenler dışarıdan erişilemez.
  • Ancak fonksiyon her çalıştırıldığında bu değişkenler tekrar oluşturulur ve kullanılabilir.

Değer Döndürme (Returning Values)​

Bir fonksiyonda birden fazla parametre kullanılabilir.
Bu sayede fonksiyona birden fazla değer gönderebilir ve bir sonuç döndürebiliriz.

Örneğin, iki sayının toplamını bulan bir fonksiyon yazalım. Bu sayıları x ve y parametreleri temsil edecek.

// Toplama fonksiyonunu başlat
function add(x, y) {
  return x + y;
}

// Fonksiyonu çağır ve toplamı bul
add(7, 4); // 11

Yukarıdaki programda, x ve y parametreleriyle bir fonksiyon tanımladık ve ardından bu fonksiyona 7 ve 4 değerlerini gönderdik.
Programı çalıştırdığımızda, bu sayıların toplamı çıktı olarak dönecek:

// Çıktı: 
11

Bu örnekte, 7 ve 4 değerleri add() fonksiyonuna aktarıldığında, program 16 sonucunu döndürdü.

return anahtar kelimesi kullanıldığında, fonksiyonun çalışması durur ve ifadenin sonucu dışarıya döndürülür.
Tarayıcı bu değeri konsolda gösterebilir, fakat bu durum console.log() ile ekrana yazdırmakla aynı değildir.

Fonksiyon çağrıldığında dönen değer, tam olarak fonksiyonun çağrıldığı yerde kullanılır.
Bu değeri hemen başka işlemlerde kullanabilir ya da bir değişkene atayabilirsin.

Fonksiyon İfadeleri (Function Expressions)​

Bir önceki bölümde, iki sayının toplamını almak ve değeri döndürmek için fonksiyon bildirimi (declaration) kullandık.
Ama fonksiyonları sadece bildirimle değil, aynı zamanda bir değişkene atayarak ifade (expression) şeklinde de tanımlayabiliriz.

Örneğin, aynı add fonksiyonunu bir değişkene atayabilir ve sonucu doğrudan sum değişkeninde saklayabiliriz.

// add fonksiyonunu sum sabitine ata
const sum = function add(x, y) {
  return x + y;
}

// Fonksiyonu çağır ve toplamı bul
sum(20, 5); // 25
Output
25

Artık sum sabitimiz bir fonksiyon haline geldi.
Bunu daha da kısaltmak için anonim fonksiyon (isimsiz fonksiyon) haline getirebiliriz.

Şu anda fonksiyonumuzun adı add, fakat function expression (fonksiyon ifadesi) kullanırken fonksiyona isim vermek zorunlu değildir.
Genellikle isim tamamen atlanır.

// Fonksiyonu sum sabitine ata (anonim fonksiyon)
const sum = function(x, y) {
  return x + y;
}

// Fonksiyonu çağır ve toplamı bul
sum(100, 3); 
Output
// 103

Bu örnekte, fonksiyonun adı olan add kaldırıldı ve fonksiyon anonim hale getirildi.

İsmi olan bir fonksiyon ifadesi, özellikle hata ayıklama (debugging) sırasında faydalı olabilir.
Ama çoğu zaman pratikte bu isim kullanılmadan bırakılır.

Arrow Fonksiyonları (Arrow Functions)​

Şimdiye kadar fonksiyonları function anahtar kelimesiyle tanımlamayı gördük.
Ama ECMAScript 6 (ES6) ile birlikte fonksiyonları tanımlamanın daha kısa ve modern bir yolu geldi: arrow functions (ok fonksiyonları).

Arrow function sözdizimi, => işareti ile gösterilir (eşittir = ardından büyüktür >).

Arrow fonksiyonları her zaman anonimdir ve bir tür function expression olarak çalışır.

Basit bir örnekle iki sayının çarpımını bulan bir fonksiyon yazalım:

// Çarpma fonksiyonunu tanımla (arrow function)
const multiply = (x, y) => {
  return x * y;
}

// Fonksiyonu çağır ve çarpımı bul
multiply(30, 4); // 120
Output
120

Burada function anahtar kelimesi yerine => işaretini kullanıyoruz ve bununla fonksiyon tanımlamış oluyoruz.
Temel kullanımda normal fonksiyon ifadelerine benzer şekilde çalışır, fakat bazı ileri seviye farkları vardır (bunları daha sonra Arrow Functions başlığı altında öğrenebilirsin).

Eğer sadece tek bir parametre varsa, parantezleri kullanmak zorunlu değildir.
Örneğin, sadece tek bir sayı alıp karesini döndüren fonksiyonda parantezleri kaldırabiliriz:

// Kare alma fonksiyonunu tanımla (arrow function)
const square = x => {
  return x * x;
}

// Fonksiyonu çağır ve sonucu bul
square(8); 
Output 
64

Not: Eğer fonksiyonun hiç parametresi yoksa, arrow function’da boş parantez () kullanmak zorunludur.

Bu örneklerde fonksiyon sadece bir return ifadesinden oluşuyor.
Arrow function’lar sayesinde sözdizimini daha da kısaltabiliriz.

Eğer fonksiyon tek satırdan oluşuyorsa, hem küme parantezlerini hem de return ifadesini kaldırabiliriz.

// Kare alma fonksiyonunu tanımla (tek satır arrow function)
const square = x => x * x;

// Fonksiyonu çağır ve sonucu bul
square(10); 
Output
100

Bu üç farklı sözdiziminin (function declaration, function expression ve arrow function) hepsi aynı çıktıyı verir.

Hangisini kullanacağın genellikle kişisel tercih ya da çalıştığın ekibin kodlama standartlarına bağlıdır.

Sonuç​

Bu derste şunları öğrendik:

  • Fonksiyon bildirimleri (declarations)
  • Fonksiyon ifadeleri (expressions)
  • Fonksiyonlardan değer döndürme (return)
  • Fonksiyonları değişkenlere atama
  • Arrow fonksiyonları

Fonksiyonlar, bir değer döndüren ya da bir işlem yapan kod bloklarıdır.
Bu özellikleri sayesinde programlarımız daha ölçeklenebilir ve modüler hale gelir.