JavaScript Arrow Function Kullanımı

Arrow Function, ES6 ile sunulan özelliklerden biridir. Arrow Function özelliğinin temel amacı JavaScript'te kullanılan fonksiyon tanımlama yöntemini kısaltmak ve prartik bir kullanım sağlamaktır.

JavaScript Arrow Function Kullanımı

Örnekler üzerinden gidelim. Diyelim ki sitenizi ziyaret eden kullanıcıya "Hoşgeldin" mesajı veren bir fonksiyon tanımlamak istiyorsunuz. Normal kullanım aşağıdaki gibidir;

function hosgeldin()
{
    return "Sitemize Hoş Geldiniz";
}

console.log(hosgeldin());
JavaScript

Aynı fonksiyonu aşağıdaki gibi tanımlamak da mümkündür.

var hosgeldin = function()
{
    return "Sitemize Hoş Geldiniz";
}

console.log(hosgeldin());
JavaScript

İşte Arrow Function özelliği bundan sonra devreye giriyor. Bu örnekte yer alan function ifadesini silip parametreleri yazacağımı parantez aç kapadan hemen sonra => işaretlerini koyarak bu tanımlamayı Arrow Function haline getirebiliriz.

var hosgeldin = () =>
{
    return "Sitemize Hoş Geldiniz";
}

console.log(hosgeldin());
JavaScript

Hızımızı düşürmeden devam edelim. Yukarıdaki fonksiyonda sadece bir durum vardır ve hoş geldiniz ifadesi döndürmektedir. İşte bu tür durumlarda fonksiyon yazımını biraz daha kısaltmak mümkündür.

var hosgeldin = () => "Sitemize Hoş Geldiniz";

console.log(hosgeldin());
JavaScript

"Allah Allah nasıl oldu ya :)" dediğinizi duyar gibiyim. Normalde 3-4 satırda tanımlanan bir fonksiyonu tek satırda halletmiş olduk. 

Peki parametre kullanırsak nasıl olur. Buna da farklı bir örnek üzerinden bakalım. Normal kullanım aşağıdaki gibidir.

function merhaba(isim){
    return "Merhabalar Sayın," + isim
}

console.log(merhaba("Celil Sağır"));
JavaScript

Bu kodların ekran çıktısı "Merhabalar, Sayın Celil Sağır" olacaktır. Yani fonksiyona bir isim göndermiş ve fonksiyon içinde kullanmış olduk. Aynı fonksiyonu Arrow Function şeklinde yazalım.

var merhaba = (isim) => {
    return "Merhabalar Sayın," + isim;
}

console.log(merhaba("Celil Sağır"));
JavaScript

Önceki örnekte yaptığımız gibi, tek bir durum olduğu için biraz daha kısaltabiliriz.

var merhaba = (isim) => "Merhabalar Sayın," + isim; 

console.log(merhaba("Celil Sağır"));
JavaScript

Gelelim Arrow Function'ların yeni bir özelliğine, yukarıdaki örnekte gördüğünüz gibi fonksiyona sadece bir parametre gönderdik, o da "isim" parametresi. İşte bu örnekte olduğu gibi eğer fonksiyona sadece bir parametre geliyorsa, bu parametreyi yazarken parantez aç kapa () yapmak zorunda değiliz. Yani aşağıdaki gibi daha da kısaltabiliriz. 

var merhaba = isim => "Merhabalar Sayın," + isim; 

console.log(merhaba("Celil Sağır"));
JavaScript

Gördüğünüz gibi Arrow Function'lar bize fonksiyon tanımlama işlemlerinde oldukça büyük kolaylık sağlamaktadır. Ancak bir projede Arrow Function kullanacaksanız tarayıcı desteğini mutlaka göz önünde bulundurunuz. Her ne kadar modern tarayıcılar desteklese de dinozorlar çağında kalma Internet Explorer'da sorun yaşabilirsiniz. Çünkü JavaScript bir front-end teknolojisidir yani tarayıcı tabanlı çalışır. 

Arrow Function tarayıcı desteği şu şekildedir: 
Chrome 45 ve üzeri versiyon (2015'ten beri)
Internet Exploer / Edge 12 ve üzeri versiyon (2015'ten beri)
Firefox 22 ve üzeri versiyon (2013'ten beri)
Safari 10 ve üzeri versiyon (2016'tan beri)
Opera 32 ve üzeri versiyon (2015'ten beri)

Soru, görüş ve önerilerinizi yorum olarak belirtebilirsiniz. Bir sonraki yazımızda görüşmek üzere İnşallah. Hayırlı çalışmalar dilerim.

Kaynak

 

3 Okunma Henüz yorum yapılmamış 15/10/2024 21:54:43 15/10/2024 21:55:18

Yorumunuzu Ekleyin
Görsel Liste


Javascriptte Fonksiyonlar Değer Döndüren Ve Değer Döndürmeyen Fonksiyonlar

Fonksiyonlar, functions

58,408 okuma,

Javascriptte Fonksiyonlar Değer Döndüren Ve Değer Döndürmeyen Fonksiyonlar
Degişken Tanımlama Ve Operatörler

Degişken tanımlama ,operatörler vb...

54,841 okuma,

Degişken Tanımlama Ve Operatörler
Javascript Nedir?

Javascripte başlamadan önce bilinmesi gerekenler, java ve javascript aynı mıdır?, javascript ne yapabilir, javascriptin tarihçesi, javascript harf duyarlı mıdır?

47,388 okuma, 20/05/2013

Javascript Nedir?
Alert Confirm Ve Promt

Alert confirm ve promt

46,900 okuma,

Alert Confirm Ve Promt
If, Else If , Kısa Karşılaştırma Operatörü

41,971 okuma,

If, Else If , Kısa Karşılaştırma Operatörü
Alert, Confirm, Prompt

Alert, confirm, prompt

40,361 okuma,

Alert, Confirm, Prompt
Javascriptin Html İçine Yazılış Biçimleri

Javascriptin html içine yazılış biçimleri

40,293 okuma, 11/01/2019

Javascriptin Html İçine Yazılış Biçimleri
Switch - Case Yapısı

Switch - case yapısı

34,643 okuma,

Switch - Case Yapısı
Düzenli İfadeler Ve Regexp Nesnesi

Düzenli ifadeler, karakter dizilerini karşılaştırmak, ayırmak/bölmek, sıralamak ve biçimlendirmek gibi işlemler için kullanılan kurallı stenografik sistemlerdir.

33,887 okuma,

Düzenli İfadeler Ve Regexp Nesnesi
Alert, Confirm, Prompt

Alert,confirm,prompt

31,248 okuma,

Alert, Confirm, Prompt
Javascriptte Döngüler For, While, Do-while, Break, Continue, For-in

Javascriptte döngüler for, while, do-while, break, continue, for-in

30,374 okuma,

Javascriptte Döngüler For, While, Do-while, Break, Continue, For-in
Javascriptte Döngüler For, While, Do-while, Break, Continue, For-in

Javascriptte döngüler for, while, do-while, break, continue, for-in

29,495 okuma,

Javascriptte Döngüler For, While, Do-while, Break, Continue, For-in
Tarih-saat İşlemleri

Bu sayfada zaman yöntem kodları üzerinde duracağız. Bu kodlar zaman birimlerini ifade etmekte, nesneleri zamana göre sıralamakta ve sorgulamakta kullanılır

28,703 okuma,

Tarih-saat İşlemleri
The Event Object

The event object is a very useful addition to the dom (document object model). The dom contains many objects that store a variety of information about the browser, the computer running the browser, visited urls, and so on. The event object stores data about events.

27,624 okuma,

The Event Object
İf, Else İf , Kısa Karşılaştırma Operatörü

İf, else if , kısa karşılaştırma operatörü

26,942 okuma,

İf, Else İf , Kısa Karşılaştırma Operatörü
Değişken Tanımlamaları, Operatörler

Değişken tanımlamaları, operatörler

25,723 okuma,

Değişken Tanımlamaları, Operatörler
Regular Expression - Düzenli ?fadeler

DÜzenli ifadeler (regular expressions veya kIsaca RegExp) herhangi bir karakter diziliminin yapIsInI yani iÇerdi?i karakterlerin neler oldu?u ile bunlarIn dizili? sIrasI (konumlarI) ve biÇimlerinin Önceden tanImlanan belli bir biÇime uyumunun denetlenmesi/sInanmasI sIrasInda kullanIlan standart gÖsterim biÇimleri ya da denetim ?ablonlarIdIr. DÜzenli ifadelerin kullanIlmasI ile sa?lanan en Önemli kolaylIk karakter dizimlerinde bulunan karakterlerin Önceden bilinen belli bir desenine uygun olup olmadI?InI sInama/deneme yetene?inden gelmektedir

24,980 okuma,

Regular Expression - Düzenli ?fadeler
Düğüm ( Node )

Düğüm, dom içindeki en temel nesne tipidir. Aslında, bu makalenin sonraki kısımlarında da göreceğiniz gibi, dom ile tanımlanan neredeyse her nesne düğüm nesnesini genişletir. Ancak, semantikle ilgili daha ileri aşamalara geçmeden önce, bir düğümün temsil ettiği kavramı anlamanız gerekir; daha sonra, düğümün gerçek özelliklerini ve yöntemlerini öğrenmek sizin için çok kolay olacaktır.

24,877 okuma,

Düğüm ( Node )
Switch-case

Switch-case yapısı ve örenekte kullanımı.

24,717 okuma,

Switch-case
Javascript String Object Reference

Javascript string object reference

23,689 okuma,

Javascript String Object Reference
Javascript Nedir?

23,228 okuma,

Javascript Nedir?
Javascriptte Döngüler

For, while, do-while, break, continue, for-in

23,214 okuma,

Javascriptte Döngüler
Javascript Dates-the Complete Reference

Of all the core javascript objects, ı find dates to be the most fascinating. Once you learn a few small tricks everything about javascript dates just seem to fall into place and you find that there's really nothing at all that you can't do with them, quickly, and easily. This reference will cover the javascript date object, how it stores dates, how you can manipulate them, create calendars, countdown timers, prototype them to add your own functionality, as well as provide a complete method reference.

23,041 okuma,

Javascript Dates-the Complete Reference
Javascript ile Nesne Yönelimli Programlama (OOP with JS)

Bu makalede Javascript'le ilgili olarak JSON, function pointer ve OOP konuları ele alınıyor

22,886 okuma,

Javascript ile Nesne Yönelimli Programlama (OOP with JS)
Event Fonksiyonu

JavaScript ile bir fonksiyon yazdım ve başka yerlerden bu fonsiyonu çağırdım. Ancak, fonksiyona gelen isteğin, hangi nesneden geldiğini öğrenmek için, yeni bir parametre tanımlamak zorunda kaldım

22,427 okuma,

Event Fonksiyonu
Try - Catch Yapısı

22,396 okuma,

Try - Catch Yapısı
Object-Oriented Javascript

Nesne Tabanlı Javascript mantığını anlatan ingilizce bir makale

22,114 okuma,

Object-Oriented Javascript
Try Catch Yapısında Throw Durumu

Try catch yapısında throw durumu

21,921 okuma,

Try Catch Yapısında Throw Durumu
Javascriptte Olaylar (events) ve Örnekler

Desteklenen olaylar listesi

21,158 okuma, 15/10/2024

Javascriptte Olaylar (events) ve Örnekler
Javascriptte Olaylar Events Desteklenen Olaylar Listesi

Javascriptte olaylar events desteklenen olaylar listesi

20,830 okuma,

Javascriptte Olaylar Events Desteklenen Olaylar Listesi
Yükleniyor...
Yükleniyor...