Function/Function Expression-Declaration And Arrow Function JavaScript

Genel Tanımı ;

“Fonksiyonlar, JavaScript’in temel yapı taşlarından biridir. JavaScript’teki bir işlev, bir yordama benzer; bir görevi gerçekleştiren veya bir değer hesaplayan bir ifadeler dizisidir; ancak bir yordamın işlev olarak nitelendirilebilmesi için, bir miktar girdi alması ve aralarında açık bir ilişki olduğu durumlarda bir çıktı döndürmesi gerekir. giriş ve çıkış. Bir işlevi kullanmak için, onu çağırmak istediğiniz kapsamda bir yerde tanımlamanız gerekir.

Temel Bir Örnek Olarak;

function sum(a,b){
  return a+b; // return anahtar kelimesine olmadan değerleri alamam.
}
console.log(sum(5,7)) // fonksiyonu çalıştırmak olarak adlandırılır.

Temel bir örnek olarak verilebilir fakat işler bunlarla sınırlı değildir. Şimdi bilmemiz gereken kurallara ve Fonksiyon çeşitlerine göz atalım.

Kurallar Ve Dikkat Edilmesi Gerekenler;

1. Fonksiyonlar birden fazla değişkeni içerisinde tutabilirler.
2. Fonksiyonların kendi scobu vardır, globalde olan değişkenlere fonksiyon içerisinde erişilebilirken, fonksiyon içerisindeki değişkenlere globalde erişmem mümkün değildir.
3. Fonksiyonlar return anahtar kelimesine ihtiyaç duyarlar aksi halde çalışmazlar ve değerleri undefined’dir. return’ a erişilince fonksiyon çalışmayı durdurur ve dikkat edilmesi gereken yapılmak istenilen işlem ile return anahtar kelimesi aynı satırda olmasıdır aksi halde çalışmayacaktır.
4. Fonksiyonlar oluşturuldukları isimle çağırılmadığı halde içerisinde yapılan işlemi çalıştıramazlar . Fonksiyon İsmi() olarak çağırılır.
5. Süslü parantez ({}) fonksiyonun gövdesidir.
6. Parametre ve Argüman olarak iki değer alırlar. Parametreler sözde isimler ve yer tutuculardır ve istenilen isimlendirme yapılabilirken, Argümanlar asıl değerlerimdir.

function showMessage(){
    let message= "Selam" // sadece bu fonksiyon içinde yaşadığı için LOCAL VARİABLE diye adlandırılır.
    console.log("Merhaba Millet"); 
    console.log(message) // "Selam"
} //süslü parantezin kendi dünyası vardır süslü pazantez dışında göremeyebiliriz. o yüzden let=message süslü parantez dışında görülmez.
showMessage()
console.log(message) //message is not defined (Fonksiyon içerisindeki değişkene globalden erişilemez)

Global scopta olan bir değişkenime fonksiyon içinde erişebilme ve değişkenimin içeriğini değiştirebilme konusunda ne yapmalıyız kod üzerinden buna bakalım.

let message = "İstanbul'da bugün hava yağmurlu"

function showMessage(){
message = "İstanbul'da bugün hava güneşli"
console.log(message) //"İstanbul'da bugün hava güneşli"
}
showMessage()
console.log(message) //"İstanbul'da bugün hava güneşli"

Burada dikkat edilmesi gereken nokta globalde bulunan değişkenimin “let” olması ve fonksiyon içerisinde değişkensiz şekilde sadece değerimin adını yazmamız gerektiğini söyleyebiliriz. Böylelikle fonksiyon çalıştırıldığında dışarıda tanımlanması yapılan değişkenimin içeriği de değişecektir.

Peki tam tersi durumda ne olacaktı birde ona bakalım;

let message = "İstanbul'da bugün hava yağmurlu"

function showMessage(){
let message = "İstanbul'da bugün hava güneşli"
console.log(message) //İstanbul'da bugün hava güneşli
}
showMessage()
console.log(message) //"İstanbul'da bugün hava yağmurlu"

Fonksiyonların kendi dünyası vardır ve fonksiyon içerisinde tanımlanan “let message” ile globalde tanımlanan “let message” arasında herhangi bir bağ yoktur. Fonksiyon içerisinde tanımlanan değişkenlere globalden erişilemeyeceği unutulmamalıdır.

Fonksiyonun Çalıştırılacağı Zaman Dikkat Edilmesi Gerekenler;

let userName = "Namık"
function showMessage(){
    userName = "Engin" // burada yeniden atama yapıldı Engin => Namık oldu.
    let message = "Selam" + userName
    console.log(message);
}
console.log(userName);
showMessage() //bu yazılmadan çalışmaz. eğer çalıştırmasaydım "Namık" gelecekti
console.log(userName);

Önceki örneklerde globalde olan değişkeni fonksiyon içinde tanımlamayı öğrenmiştik. Şimdi burada dikkat edilmesi gereken nokta; fonksiyon çalıştırılmadığında “let userName” değişkenim “Namık” değerini tutmaktadır. Sadece fonksiyon çalıştırıldığı zaman “let userName” değişkenime yapmış olduğum değiştirme işlemine erişebilirim.

Parametre Ve Argüman

Parametre: Parametrelerim sözde isimlerim ve yer tutucularımdır istenilen isimlendirme yapılabilir.

Argüman: Argümanlarım asıl değerlerimdir, iletmek istenilen değerler olarak tanımlanabilir.

function showMessage( send,text){ // send ve text parametrelerim
// let send = "Hello" değerini tuttu.
// let text = "World" değerini tutar.    
    console.log( send + ":" + text );
}
showMessage("Hello","World") // Argümanlarım

! Parametrelerime bir argüman iletilmediğinde değerleri “undefined” dir. Argümanı olmayan bir parametreyi “undefined” değerinden nasıl kurtarabileceğimize bakalım. Bu yeteneğim varsayılan değeri değiştirerek kendi seçtiğim değeri bir parametre iletilene kadar görmemi sağlar.

function showMessage(post,text = "Metin Girilmedi"){ //Undefined değerini görmek istemediğim için değiştirdim bu değişiklik argüman eklenene kadar devam edecektir.
    // let post 
    // let text 
    console.log( post + ":" + text); 
}
let postedBy = "İstanbul" 
showMessage(postedBy) // "İstanbul:Metin Girilmedi"

Function Declaration:

Fonksiyon (function) anahtar kelimesiyle başlıyorsa Function Declaration olarak adlandırılır.

Get Hakan Yigit Ozen’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Bir değişkene atanmadan kullanılır.

Fuction Expression’ dan daha esnektir. Fonksiyona yazıldığı satırdan öncesinde erişebilir.

Function Declaration Örnek;

function sum( numberA , numberB){
    return numberA + numberB
}
sum( 2 , 3)

let age = prompt("Kaç Yaşındasın")

if( age < 18){
    welcome() // burada yazarsam değer görürüm çünkü parantez dünyasına yazdım. fonksiyon üstüne yazmam bir şey değiştimez çünkü js ilk functionları okumaktan baslar. Declaration oldugu icin declaration biraz daha esnektir.buradaki yazım else deki fonksiyonu çalıştırmaz.
    function welcome(){
        console.log("merhaba");
    }
}else {
    function welcome(){
        console.log("naber");
    }
    welcome() // else için tekrar yazdım yoksa console gözükmez.
}
welcome() // genelde çağırım yaptığım için süslü parantez içine giremediği için değer görmemem (error)

Function Expression:

1. Bir fonksiyon bir değişken içinde tanımlanıyorsa bu bir Funciton Expression’dur.
2. Function Expression kullanıldığı yerden sonrasında kullanıma açılır,erişilir hale gelir.
3. Bir fonksiyon diğer bir fonksiyon içine yazılabilir.

Function Expression Örnek;

let age = prompt("Kaç Yaşındasın")
let welcome 

if( age < 18){
    
    welcome = function(){
        console.log("merhaba");
    }
}else {
    welcome = function(){
        console.log("naber");
    }
}
welcome() ////burada kullanabildim cünkü bu bir Function EXPRESSİON örnektir. tanımlanıldıgı yerden sonrasında calısır.

Ternary Function Expression Örnek:

let age = prompt( "Kaç yaşındasın" )

let welcome = age < 18 ? function() { console.log("merhaba");} : function(){console.log("Naber");}
welcome()

Arrow Function:

1. Arrow Functionlar bir Function Expressiondur.
2. Tek satırlık kodlarda süslü parantez ve return anahtar kelimesine ihtiyaç duymazlar.

Arrow Function Örnekler:

let sum = (a,b) => a+b
console.log(sum(5,6));

let double = n => n*2 // tek argümanda parantez olmasına gerek yok
console.log(double(5));

let sum = (a,b) =>{
    let result = a+b
    return result
}
console.log(sum(1,2))

Ternary Arrow Function Örnek:

let age = prompt("Kaç yaşındasın")

let welcome = age < 18 ? ()=> console.log("merhaba") : () => console.log("naber");
welcome()

İç İçe Çağırılan Fonksiyonlar:

function cutPieces(ingredients){
    return ingredients * 8 
}
function recipe( muz ,yumurta ){ // Parametre
    // let muz = 2
    // let yumurta = 3
    const bananaPieces = cutPieces(muz) //16
    const eggPieces = cutPieces(yumurta) //24
    const bananaBread =  `${bananaPieces} muz parçası ve ${eggPieces} yumurta parçası.`
    return bananaBread
}
console.log(recipe(2,3)) // muz :2 ve yumurta: 3' e eşittir. Argüman

Burada dikkat edilmesi gereken husus “cutPieces” adlı fonksiyonum bana merkezi yerden kontrol yeteneği sağlamaktadır. “cutPieces” fonksiyonunun return ettiği değer değiştirilerek sonuçlarımın değişmesini sağlar bu yetenek bana kolay ve rahat değişiklik yapabilme hakkını sunmaktadır, çünkü kod satırı arttığı zaman işlemleri tek tek değiştirmek yerine tek bir yerden kontrol edebilirim. Bu benim için daha az kod satırı demektir.

Fonksiyonlar hakkında bildiğim ve sizlerinde dikkat etmesi gerektiği noktaları paylaşmaya çalıştım. Görüşlerinizi ve eksik olduğunu düşündüğünüz yerler için beni uyarabilirsiniz.

Linkedin hesabımdan bağlantı kurabilirsiniz..