Web Sayfalarının Beyni: Javascript -3

Bir öndeki yazımızda değişken, veri tipleri, diziler ve döngülerden bahsetmiştik. Bu yazımızda fonksiyonlar ve nesnelerden bahsedeceğiz.

Bir e-ticaret sayfası düşünün. Orada bir çok yerde sepete ekle butonu var. Biz bu kodları her yerde tekrar tekrar yazmak yerine bir yerde yazıp istediğimiz yerde mi kullanmak daha doğru olduğu için fonksiyonları kullanıyoruz.

Fonksiyon Nedir?

Fonksiyon, belirli işlemleri yapmak için tasarlanmış kod bloğudur. Fonksiyon oluşturulduktan sonra istediğimiz yerde çağırıp kullanabiliriz.

Fonksiyonu function degiskenAdi() {} şeklinde oluşturabilirsiniz.

Fonksiyon isimlendirmesinde dikkat edilmesi gereken kurallar:

• Fonksiyonlar bir eylemi gerçekleştirir. Bu yüzden yüklem içermelidir ve yüklem ingilizce isimlendirmeden dolayı başta olmalıdır. Örnek; get, calc, add, check, create
• Fonksiyon tanımlamasında camel case yazmak daha doğrudur. Yani fonksiyonun ilk kelimesinin ilk harfi küçük harfle diğer kelimelerin ilk harfi büyük harfle başlar.
• Fonksiyon tanımlamasında boşluk bırakılmamalıdır. Mesela add Number() kullanımı yanlıştır. addNumber() şeklinde tanımlanması gerekir.

Aşağıdaki fonksiyonda 3+4 ü toplayıp console ekranında göstermek için istediğimiz yerde add() şeklinde çağırıyoruz. Peki 3+4 ü değil de istediğim 2 sayıyı toplamak isteseydim nasıl yapardım? Burada devreye fonksiyon parametresi giriyor. Fonksiyona değeri dışarıdan göndererek istediğim sayıları toplatabilirim.

Aşağıda add fonksiyonuna number1 ve number2 adında 2 parametre gönderdik ve bu değerlerin toplamını console ekranında gösterdik. add() fonksiyonuna bir değer göndermeden çalıştırırsak console ekranında undefined yazıyor. Peki neden? Bir değişken tanımlandıktan sonra değer atanmazsa undefineddır. add fonksiyonuna 2 değer gönderirsek toplamını doğru bir şekilde console ekranında görebiliyoruz. Peki bir değer gönderirsek? Aşağıdaki kodda 9. satırda add fonksiyonuna 5 değerini gönderdik ve bu 5 değerini number1 e atadı. Peki console ekranında neden NaN yazdı ve NaN ne demek? Number1 e 5 atandı ama number2 değer atanmadığı için undefined durumda hala ve number ile undefined toplama yapamadığımız için sonuç NaN çıkıyor. NaN, not a number demektir.

Peki fonksiyonuma dışarıdan bir değer gelmezse ve ben sonucu NaN veya undefined görmek istemezsem ne yapacağım? İşte burada devreye varsayılan değerler giriyor. Varsayılan değerler, eğer fonksiyonda o parametreye bir değer atanmazsa o parametrenin değerinin yazdığımız varsayılan değer olmasını sağlıyor. Aşağıdaki kodda add fonksiyonuna parametre göndermediğimiz için fonksiyon varsayılan değerler olan 5 ve 10 u alıyor ve console ekranına 15 değeri yazılıyor. Fonksiyona bir değer gönderirsem ilk parametrenin değerini değiştiriyor ve 2 yapıyor o yüzden sonuç 12 olarak gözüküyor. 2 değer gönderirsem 2 parametre de değişiyor ve sonuç 14 oluyor. Bu arada kodda 9.satırda olduğu gibi, fonksiyonlara dışarıda oluşturduğumuz değişkenleri de gönderebildiğimizi unutmayalım.

1.satırdaki number1 ve number2 nin fonksiyondaki number1 ve number2 ile aynı değil. Peki neden? Çünkü değişkenler tanımlı olduğu parantezler arasında geçerlidir. Yani fonksiyondaki ve console.log()’ daki number1 ve number2 parametresini istediğiniz değişken adıyla değiştirin sonuç yine de değişmeyecektir.

Şu ana kadar sadece console ekranında değerleri gösterdik. Peki bu fonksiyondan gelen değeri kodumda kullanmak istersem? İşte burada karşımıza return keywordu geliyor. Return keywordu fonksiyondan bir değeri kullanılabilir şekilde geri dönmesini sağlar ve geri dönen bu değeri kullanabiliriz.

Fonksiyonları anladığımıza göre başka bir konuya değinelim. Ürünü butona ekle fonksiyonu çalıştığında ürünün sadece adı değil fiyatı, açıklaması, kaç adet eklendiği bilgileri de fonksiyona gönderiliyor. Aşağıdaki kodda fonksiyona değerleri gönderirken sürekli ilk hangisi gönderilmesi gerekiyor diye kontrol etmek zorunda kaldım. Bu durum şu an çok karmaşık gibi gözükmese de ilerde çalıştığımız firmada yönetim bize ekstra resim bilgisi de tutmak istiyoruz gibi şeyler derse bu işimizi epey zorlaştırır. O yüzden ürünün bilgilerini elle girmek yerine obje dediğimiz yapılarda tanımlama yapıp fonksiyona objeyi gönderiyoruz. bu sayede ilerde olacak değişikliklerde objemizi güncellemek yetecek.

Obje(Nesne) Nedir?

Birden fazla değer alabilen değişkenlere nesne denir. Mesela e-ticaret sitemizdeki ürünler birer nesnedir. İsmi, fiyatı, adet bilgisi, açıklaması gibi değerlere sahiptir. Bir nesne şu şekilde tanımlanır:

let product1 = {prop1: val1, prop2:val2, …, propn:valn}

Aşağıdaki kodda fonksiyona parametre olarak yazılan product bizim tanımlamış olduğumuz bir değişken adı. Biz fonksiyona sayı da atabiliriz, metinsel ifade de atabiliriz. Burada fonksiyona product atılacağını umarak hareket ediyoruz. Javascript type safe bir dil değildir. O yüzden bu tarz konularda manipüle etmeye müsait. Type safe yapmak adına Typescript dili geliştirilmiştir.