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

 

196 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,654 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...

55,112 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,744 okuma, 19/11/2024

Javascript Nedir?
Alert Confirm Ve Promt

Alert confirm ve promt

47,189 okuma,

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

42,272 okuma,

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

Alert, confirm, prompt

40,635 okuma,

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

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

40,537 okuma, 11/01/2019

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

Switch - case yapısı

34,892 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,184 okuma,

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

Alert,confirm,prompt

31,511 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,620 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,734 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

29,034 okuma, 10/12/2024

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,874 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,175 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,962 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,239 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,164 okuma,

Düğüm ( Node )
Switch-case

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

24,973 okuma,

Switch-case
Javascript String Object Reference

Javascript string object reference

23,951 okuma,

Javascript String Object Reference
Javascript Nedir?

23,462 okuma,

Javascript Nedir?
Javascriptte Döngüler

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

23,455 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,290 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,139 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,654 okuma,

Event Fonksiyonu
Try - Catch Yapısı

22,619 okuma,

Try - Catch Yapısı
Object-Oriented Javascript

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

22,344 okuma,

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

Try catch yapısında throw durumu

22,176 okuma,

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

Desteklenen olaylar listesi

21,676 okuma, 15/10/2024

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

Javascriptte olaylar events desteklenen olaylar listesi

21,058 okuma,

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