Photo by Antoine Dautry on Unsplash

JAVASCRIPT’IN TARIHÇESI

JS Operator

JS Operator dediğimizde ne anlıyoruz. Bunların bir önceliği var mı? JS Engine bu operatörleri nasıl ele alıyor. Yine bu yazıda biraz derinlere inerek * , / , +, ve >, <, <=, >=,===, ==, !=, &&, || operatörlerini anlatacağım.

Önceki yazılarımda aşağıdaki konuları anlatmıştım;

• JS Lexical Environment ve Execution Context konusunu
• JS EventLoop yapısını
• JS Type Coercion ve Truthy/Falsy kavramlarını

Bu yazıya başlamadan önce yukarıdaki yazılarımı okumanızı öneririm. Bu yazıda Operatörlerin yani JS satırlarının nasıl işletildiği üzerinde duracağız.

Operator tanımlanmış fonksiyonların farklı görsellikle çağrılmasıdır.

A. Operatör Türleri

A. 1. Matematiksel Operatörler

, / , +, — aslında, çarpma, bölme, toplama, çıkarma fonksiyonlarının özel karakterler ile yazılmasıdır

Örneğin + operatör incelersek

const result = 1+2 //iki sayıyı toplama görevini yapıyor
console.log(result) //3

Peki bizim arka planda topla metodumuz olduğunu düşünelim.

function topla(a,b){ return ...//}
const result= topla(1,2);
console.log(result) //3

Bu durumda + ile topla fonksiyonunu çağırıyoruz gibi oluyor. Kodu aşağıdaki gibide yazabilirdik.

function +(a,b){ return ...//}
const result= +(1,2);
console.log(result) //3

burda + başta olması prefix çağrım özelliğidir. JS ise + işlemini ortada işletir buna infix denir, eğer sonda belirtirsek bunada postfix denir.

+(1,2)  //prefix 
(1+2)   //infix
(1,2)+  //postfix

Aşağıda Infix, Prefix, Postfix çağırım örneklerini görebilirsiniz. Bu durumda aslında operatör için özelleşmiş fonksiyonlardır diyebiliriz.

Infix, Prefix, Postfix

Benzer şekilde çarpma, çıkarma , bölme operatörleri de benzer şekilde özelleşmiş fonksiyonlardır. Bunun yanında

Reminder % bölünen değerden geriye kalan değeri verir.

console.log(7%3) //1

Bu fonksiyonların bazıları yeni gelen ES6 özellikleriyle gelmiştir. ** üst almanın(Exponentiation) kısa yöntemidir. Örneğin

console.log(2**4) //16 gibi

A.2. Increment/Decrement Operatörler

Zaten Increment ++ and Decrement — Operator her türlü yaklaşımla kullanılabilmektedir. Burda postfix işlem return döndükten sonra artırma işlemi yapıldığı için bu değişikliği alt satıra geçtiğinizde görebilirisiniz.

Increment / Decrement örneği

A.3. Karşılaştırma Operatörleri

Yukarıda matematiksel operatörlere bakmıştık peki aşağıdaki gibi > kullanırsak operatör 2 tarafındaki değeri karşılaştırmış oluruz ve sonuç sayısal değil bool(true/false) olarak döner

console.log(1>2) //false

> büyüktür, < küçüktür, >=büyük eşit, <=küçük eşit, ==eşit, != eşit değil, === tür ve değer eşit, !== tür ve değer eşit değil,

console.log("1>2", 1 > 2); //false
console.log("1<2", 1 < 2); //true
console.log("1<=2", 1 <= 2); //true
console.log("1>=2", 1 >= 2); //false
console.log("1!=2", 1 != 2); //true
console.log(`"1" !== 1`, "1" !== 1); //true
console.log(`"1" != 1`, "1" != 1); //false
console.log(`"1" === 1`,"1" === 1); //false
console.log(`1 === 1`,1 === 1); //true

in objenin içerisinde prop bulunuyor mu ? , instanceof bu değişken ilgili türde mi diye kontrol etmenizi sağlar

const obj = {x: 10, y: 20};
console.log("x" in obj); //true
console.log("z" in obj); //false
console.log(obj instanceof Object) //true

A.4. Logical ve Bitwise Operatörleri

Logical 2 tane bool değeri birbirleri ile etkileşime sokup sonuç çıkaran devrelerdir. && And Kapısı veya | OR Kapısı Burda

console.log(true && false); //false
console.log(true && true); //true
console.log(false || true); //true

Bitwise işlemleri integer değerlerini 2 lik sistemde oluşturup birbiri üzerinde işlem yapmak istersek o zaman & AND , | OR veya ^ XOR operatörlerini kullanabiliriz.

const a = 5;        // 00000000000000000000000000000101
const b = 3;        // 00000000000000000000000000000011

console.log(a & b); // 00000000000000000000000000000001
// expected output: 1

A.5. Assignment (Atama)Operatörleri

En bilinen atama yöntemi = ifadesidir. Sağ tarafta bulunan değeri sol tarafa atar.

let x=3;

gibisinden bu atamaları yaparken işlemlerde yaptırabilirsiniz. Bunun gibi bir çok örnek bulunuyor *= Değeri çarparak ata. **= Değeri üstü olarak hesaplayarak ata. /= Değeri bölerek ata vb…

A. 6 . Veride Oynama (Bitwise Shift Operatörleri)

Sayının değerini >> sağa doğru azaltabilir veya << sola doğru arttırabilirsiniz.

const a = 2;        // 000000000000010
console.log(2 << a); //8
console.log(a >> 1);// 1

A. 7 . Conditional (Durumsal) Operatörler

condition ? ifTrue : ifFalse şeklinde yazımla belli bir durumsal değerlendirme sonrasında ? işaretinden sonra durum geçerli ise işletilir aksi durumda : sonrası işletilir

.? değeri obj null ise ileriye gitmez..

const obj = {
    position: {x: 10}
}

console.log(obj.position.x) //10;
console.log(obj.pos.x) //Exception
console.log(obj.pos?.x) //undefined

?? check edilen değer null/undefined ise sağındaki değeri dönmesini sağlar.

const foo = null ?? ‘default string’;
console.log(foo);

A. 8. Fonksiyonel Programlama Operatörleri

arrow fonksiyon , fonksiyonel programlama da pure fonksiyon türleri tanımlamakta kullanılacak fonksiyonları tanımlamayı sağlar.

sum =(a,b) => a+b

pipe operator yine fonksiyonel programlama yaklaşımında fonksiyon chain daha okunaklı hale getiren bir yapı sağlar.

/* Bu örnek https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator
**/
const double = (n) => n * 2;
const increment = (n) => n + 1;

// without pipeline operator
const result0=double(increment(double(double(5)))); // 42
console.log(result0)

// with pipeline operator
const result1= 5 |> double |> double |> increment |> double; // 42
console.log(result1)

A. 9. Unary (Tek) Parametre Alan Operatörler

Bu operatörler tek bir parametre alarak bu değerden sonuç çıkarırlar.

delete Student.name  //prop siler
typeof xxx //değişkenin türüne döner
void
+ Number dönüştürerek ekleme yapar.  ilk değişken numeric ise..
- Number dönüştürerek çıkarma yapar. ilk değişken numeric ise..
~ Bitwise NOT operator.
! Not alır.  (boolean dönüştürür
!! Not Not alır. (boolean dönüştürür)

B. Operatör İşlenme Öncelikleri

Nedir bu operatör öncelikleri ? Aşağıdaki resimde görüleceği gibi Operatör öncelikleri sıralanmıştır Örneğin Grouping en öndedir.

console.log(3*3-2) //7;
console.log(3*(3-2)) //3 Grup en önce işletilir.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Gelin bu duruma göre size farklı gelebilecek bazı konuları inceleyelim.

3 Lü karşılaştırma

Bu durum nasıl böyle olabiliyor. 2side aynısı gibi görünüyor ve mantıken 2 sinin sonucu true çıkmalı. Ama öyle olmuyor neden acaba ?

console.log('3>2>1',3>2>1); //false
console.log('1<2<3',1<2<3); //true

Öncelikle JS sizin gözünüz gördüğü gibi kodu işletmiyor . Yukarıdaki tabloya bakıyor. Karşılaştırmalar Left to Right → şeklinde işletiliyor. ve aşağıdaki şekilde sıra ile işleterek Numeric → Bool, Bool → Numeric değişikliklerini ilerleterek gerçekleştiriyor.

//Adım 1
console.log('3>2>1',true>1);
console.log('1<2<3',true<3);

//Adım 2
console.log('3>2>1',1>1);
console.log('1<2<3',1<3);

//Adım 3
console.log('3>2>1',false);
console.log('1<2<3',true);

3 Lü Atama

Nasıl burada 1 yazıyor.

let a=3; a=5 c=1;
console.log(a=b=c); // 1

Assignment = Right to Left ← o zaman adımların nasıl gerçekleştiğine bakalım.

//Adım 1
b=c // b =1 return 1 döner
console.log(a=b); // 

//Adım 2
a=b // a =1 return 1 döner
console.log(1);

Not:
Bunun gibi çeşitleri çoğaltabiliriz. Önemli olan yukarıdaki tabloya göre operatörleri nasıl işleyeceğini hangi öncelikle Sağdan Sola mı, yoksa Soldan Sağa mı işletildiğini anlıyor olmanız gerekiyor.

Github Kod Örnekleri

• JS Operator Kod Örneği

Referanslar

• Javascript: Understanding the Weird Parts
• MDN Operator Precedence

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (JS Pratik Kullanımı)erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki diğer yazılara (JS Derinlemesine Öğren) erişmek için bu linke tıklayabilirsiniz.