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());

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

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

İş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());

 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());

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"));

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"));
  

Ö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"));
  

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. 

 Örnek

var merhaba = isim => "Merhabalar Sayın," + isim;
console.log(merhaba("Celil Sağır"));

 Örnek

function NormalKupal(a) {  //normal fonksiyon
    return a*a*a;
}

OkluKupal = (a) => { //oklu fonksiyon
    return a*a*a;
}

alert(NormalKupal(5));
alert(OkluKupal(5));

 

Örnek

let hello = "";

MerhabaDe = (deger) => deger + " nasılsın?";

//tek degisken varsa
MerhabaDe2 = deger => deger + " nasılsın?"; //function, return kelimesi yok, parantez yok


//document.getElementById("demo").innerHTML = MerhabaDe("Tüm evren");
document.getElementById("demo").innerHTML = MerhabaDe2("Tüm evren");

 

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.

Kaynak

 

106 Okunma Henüz yorum yapılmamış 15/10/2024 21:54:43 19/11/2024 13:43:40

Yorumunuzu Ekleyin
Görsel Liste


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

Fonksiyonlar, functions

58,532 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,975 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,534 okuma, 19/11/2024

Javascript Nedir?
Alert Confirm Ve Promt

Alert confirm ve promt

47,047 okuma,

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

42,143 okuma,

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

Alert, confirm, prompt

40,494 okuma,

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

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

40,426 okuma, 11/01/2019

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

Switch - case yapısı

34,786 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.

34,033 okuma,

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

Alert,confirm,prompt

31,382 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,509 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,623 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,846 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,752 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ü

27,067 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,858 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

25,138 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.

25,030 okuma,

Düğüm ( Node )
Switch-case

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

24,846 okuma,

Switch-case
Javascript String Object Reference

Javascript string object reference

23,825 okuma,

Javascript String Object Reference
Javascript Nedir?

23,358 okuma,

Javascript Nedir?
Javascriptte Döngüler

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

23,349 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,174 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

23,032 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,557 okuma,

Event Fonksiyonu
Try - Catch Yapısı

22,519 okuma,

Try - Catch Yapısı
Object-Oriented Javascript

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

22,231 okuma,

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

Try catch yapısında throw durumu

22,055 okuma,

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

Desteklenen olaylar listesi

21,485 okuma, 15/10/2024

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

Javascriptte olaylar events desteklenen olaylar listesi

20,959 okuma,

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