Tüm blog yazıları

JavaScript'te Fonksiyonlar Nedir?

Programlama dünyasında birçok işi tekrar tekrar yaparız. Örneğin bir yazının ekrana yazdırılması, hesaplama yapılması veya kullanıcıya mesaj gösterilmesi gibi. Eğer aynı kodları tekrar tekrar yazmak zorunda kalırsak, hem zaman kaybı yaşarız hem de kodlarımız karmaşık hale gelir. İşte bu gibi d

eminbasbayan4 dk okuma
JavaScript'te Fonksiyonlar Nedir?

Programlama dünyasında birçok işi tekrar tekrar yaparız. Örneğin bir yazının ekrana yazdırılması, hesaplama yapılması veya kullanıcıya mesaj gösterilmesi gibi. Eğer aynı kodları tekrar tekrar yazmak zorunda kalırsak, hem zaman kaybı yaşarız hem de kodlarımız karmaşık hale gelir. İşte bu gibi durumlarda fonksiyonlar (functions) devreye girer.

Bu yazıda, JavaScript programlama dilinde fonksiyonların ne işe yaradığını, nasıl tanımlandığını ve nasıl kullanıldığını iki temel adımda açıklayacağız.

1. Fonksiyon Nedir?

Fonksiyonlar, belli bir işi yapan, bir veya daha fazla satırdan oluşan kodları bir araya topladığımız yapılardır. Fonksiyonlara bir isim veririz ve bu isimle o kodları istediğimiz zaman çalıştırabiliriz.

Fonksiyonları şöyle düşünebilirsin: Bir düğmeye bastığında bir makine belirli işlemleri arka arkaya yapar. O düğme bizim fonksiyon ismimiz, içindeki işlemler de fonksiyonun gövdesidir. O düğmeye basmadığın sürece makine çalışmaz. Aynı şekilde, fonksiyon tanımlandığında hemen çalışmaz. Sadece ne yapacağını bilir. Onu çalıştırmak senin elindedir.

2. Fonksiyon Yazmak: İki Aşamalı Süreç

JavaScript'te bir fonksiyonu kullanmak için iki temel adım vardır:

A. Fonksiyonu Tanımlamak (Yazmak)

Fonksiyonu tanımlarken function adlı anahtar kelimeyi kullanırız. Ardından bir isim veririz ve parantez ile süslü parantezler açarız. Süslü parantezler içine yazdığımız kodlar, o fonksiyon çalıştırıldığında gerçekleşir.

Örnek:

jsx
function bilgiVer() {
  console.log("Yazılım öğrenmek eğlencelidir.");
  console.log("Disiplinli çalışmak başarıyı getirir.");
  console.log("Bugün öğrendiğin, yarın seni geliştirir.");
}

Bu örnekte bilgiVer adında bir fonksiyon tanımladık. Ama henüz hiçbir şey çalışmadı. Çünkü sadece tanımlama yaptık.

Fonksiyonun gövdesindeki console.log komutları yalnızca fonksiyon çağrıldığında çalışır.

B. Fonksiyonu Çağırmak (Çalıştırmak)

Tanımladığımız fonksiyonu çalıştırmak için, ismini yazıp yanına () parantezlerini eklememiz gerekir.

jsx
bilgiVer();

Yukarıdaki satırı yazarsan, konsola şu satırlar yazdırılır:

metin
Yazılım öğrenmek eğlencelidir.
Disiplinli çalışmak başarıyı getirir.
Bugün öğrendiğin, yarın seni geliştirir.

Bu çağırma işlemini ne kadar yaparsan, fonksiyon o kadar çalışır.

jsx
bilgiVer();
bilgiVer();

Yukarıdaki gibi iki kez çağırırsan, yazılar iki kez ekrana basılır. Bu da fonksiyonların tekrar kullanılabilirliğini gösterir.

3. Fonksiyon Söz Dizimi (Yapısı)

Fonksiyon yazarken temel yapı aşağıdaki gibidir:

jsx
function fonksiyonAdi() {
  // çalışacak kodlar buraya yazılır
}

Kurallar:

  • function: JavaScript'e "şimdi bir fonksiyon tanımlıyorum" anlamını verir.
  • fonksiyonAdi: Fonksiyonun ismi olur. Bu ismi kendimiz belirleriz.
  • () parantezleri: Şimdilik boş kalabilir. Daha sonra içine bilgiler de verebiliriz.
  • {} süslü parantezler: Fonksiyonun içeriğini yani yapılacak işleri barındırır.

Fonksiyon isimleri, tıpkı değişken isimleri gibi küçük harfle başlar ve birden fazla kelime varsa camelCase dediğimiz yapıyla yazılır: bilgiVer, mesajGoster, saatYazdir gibi.

4. Fonksiyonlar Tanımlandığında Hemen Çalışır mı?

Hayır. JavaScript'te bir fonksiyonu tanımladığımızda, tarayıcı onu sadece "biliyor" hale gelir. Ama fonksiyon, çağrılmadıkça çalışmaz. Fonksiyonun içindeki kodlar, yalnızca fonksiyon çağrıldığında yürütülür.

Bu yüzden:

jsx
function selamla() {
  console.log("Selam!");
}

console.log("Fonksiyon tanımlandı ama henüz çağrılmadı.");

Bu kodu çalıştırırsan sadece Fonksiyon tanımlandı ama henüz çağrılmadı. çıktısını görürsün. Selam! mesajı ise görünmez çünkü selamla() çağrısı yapılmamıştır.

Ancak:

jsx
selamla();

satırını eklediğinde, artık Selam! da yazdırılır.

5. Fonksiyonların Tanımlanmadan Önce Çağrılması (Hoisting)

Normalde bir değişkeni tanımlamadan önce kullanırsak JavaScript hata verir. Ancak fonksiyonlar için bu durum biraz farklıdır.

Örnek:

jsx
mesajVer(); // bu satır üstte olmasına rağmen çalışır

function mesajVer() {
  console.log("Hoş geldin!");
}

Bu kod çalışır. Çünkü JavaScript, sayfayı çalıştırmadan önce tüm function tanımlarını belleğe alır. Bu olaya hoisting denir. Yani tanımlama kodda aşağıda olsa bile JavaScript onu en başa taşır.

Ama yeni başlayanlar için önerilen yöntem, her zaman fonksiyonu önce tanımlamak, sonra çağırmaktır. Bu kodu daha okunabilir ve anlaşılır yapar.

6. console.log ve alert ile Karşılaştırma

console.log ve alert gibi komutlar da birer fonksiyondur.

Örnek:

jsx
console.log("Bu bir mesajdır.");

Burada console.log fonksiyonu çağrılır. Eğer sadece console.log yazarsan, JavaScript bu fonksiyonun tanımlı olduğunu söyler ama çalıştırmaz.

jsx
console.log // sadece tanımlı olduğunu gösterir
console.log("Merhaba"); // fonksiyonu çalıştırır

Aynı durum kendi yazdığımız fonksiyonlar için de geçerlidir:

jsx
function goster() {
  console.log("Buradayım.");
}

goster; // JavaScript "bu bir fonksiyon" der ama çalıştırmaz
goster(); // fonksiyonu çalıştırır

7. Başka Bir Örnek: Tarihi Yazdır

Şimdi farklı bir örnekle pekiştirelim:

jsx
function tarihiYaz() {
  console.log("Bugünün tarihi:");
  console.log(new Date().toLocaleDateString());
}

Bu fonksiyonu çağırırsan:

jsx
tarihiYaz();

Çıktı şöyle olur:

metin
Bugünün tarihi:
19.05.2025

Sonuç

JavaScript'te fonksiyonlar, kodu daha düzenli ve tekrar kullanılabilir hale getiren önemli araçlardır. Bu yazıda sadece temel konulara odaklandık:

  • Fonksiyon nedir?
  • Nasıl tanımlanır?
  • Nasıl çalıştırılır?
  • Ne zaman çalışır, ne zaman çalışmaz?
  • console.log gibi yerleşik fonksiyonlarla benzerlikleri

Bu temel bilgiler, ileride parametre alan, değer döndüren veya başka fonksiyonlarla birlikte kullanılan daha gelişmiş fonksiyonları anlaman için sağlam bir temel oluşturur.

Fonksiyonları öğrenmek, JavaScript’te gerçekten programlamaya başladığını hissetmeni sağlayacak önemli bir adımdır. Kodlarını sadeleştirir, tekrar eden işleri kolaylaştırır ve seni daha üretken bir yazılımcı yapar.

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