Javascript Dinamik if Koşulu Oluşturma

21 Temmuz 2022
Javascript
Javascript Dinamik if Koşulu Oluşturma

Merhaba, bu yazımda sizlere Javascript ile nasıl dinamik if kontrolü yapabileceğinizi anlatacağım ve birlikte örnek bir kullanım yapacağız.

Başlamadan önce bilmeniz gerekenler:

  • Fonksiyonlar
  • Switch Case
  • Döngüler: for & if

Yazı İçeriği

Javascript Operatörler

+Toplama
–Çıkarma
*Çarpma
**Üst Alma
/Bölme
%Mod Alma
++Arttırma
—Azaltma
Aritmetik Operatörler

==Eşitlik (Value)
===Eşitlik (Value & Type)
!=Eşit Değil (Value)
!==Eşit Değil (Value & Type)
>Büyüktür
<Küçüktür
<=Küçük Eşittir
>=Büyük Eşittir
?Üçlü Operatör (Kullanım Yerine Göre Değişkendir)
Karşılaştırma Operatörleri

&&Ve
||Veya
!Hayır / Değil
Mantıksal Operatörler

Bununla birlikte if döngüsü için kullanabileceğimiz operatörlerin tümününün üzerinden geçmiş olduk.

Öncelikle sizlerle standart bir if koşulu oluşturalım.

if Koşulu Oluşturulması

Öncelikle if nedir bundan bahsedelim. “if” aslında programlama dillerinin çoğunda bulunan bir koşul ifadesidir. Türkçe ile karışaltırmak gerekirse “eğer” sözcüğü ile ifade etmek doğru olacaktır.

Örneğin: Eğer top mavi ise elbise de mavi olsun.

Bunu javascript kullanarak kodla oluşturmak istersek eğer;

if(top == 'mavi'){
    elbise = 'mavi';
}

şeklinde yazılabilir, eğer bu koşul sağlanmaz ise başka bir koşulun kontrol edilmesini sağlayabilir yada koşula bakılmaksızın gerçekleşmesi için bir atama oluşturabiliriz.

Örneğin: Eğer top mavi değilde yeşil ise elbise yeşil olsun. Eğer top yeşil de değil ise elbise pembe olsun.

if(top == 'mavi'){
    elbise = 'mavi';
}else if(top == 'yeşil'){
    elbise = 'yeşil';
}else{
    elbise = 'pembe';
}

şeklinde yazılabilir.

Switch Case

Yapı olarak if koşul ifadesine oldukça benzer yapıdadır, if ve switch-case yapısının farklı ise, if: 2 farklı ifadeyi karşılaştırmak için kullanılırken switch-case ise karşıdan gelen ifadeye göre çalıştırılması istenen kod bloklarını barındırır.Yani 2 ifade arasında karşılaştırma işlemi yapmaz.

Örneğin: Sadece haftasonu günlerini konsolda bize gösteren bir switch-case yapısı kuralım ve eğer haftasonu değilse bile bunu bize konsolda bildirmesini isteyelim.

var tarih = new Date();
  var gun = tarih.getDay();
  switch(gun) {
    case 0:
      alert("pazar");
    break;
    case 6:
      alert("cumartesi");
    break;
    default:
      alert("henüz hafta sonu değil");
  }

Evet, if koşul ifadesinin ve switch-case koşul ifadesinin nasıl işlediğini anladıysak bir sonraki aşamaya geçebiliriz.
Bu konu içerisinde sizlere fonksiyonların ne olduğunu nasıl çalıştığını ve yapısını anlatmayacağım, zira bu blog yazımızı bir hayli uzatacaktır. Eğer fonksiyonların ne olduğunu, nasıl çalıştıklarını ve nasıl oluşturulduklarını bilmiyorsanız lütfen blog yazımızı okumaya burada bir ara verin ve önce bu konuyu iyice anladığınızdan emin olun.

Fonksiyonun Yazılması

Fonksiyonumuz switch-case yapısı içerisinde bir karşılaştırma yapacak ve bize ‘true’ veya ‘false’ değeri döndürecek.

Not: Karşılaştırmayı switch-case değil içerisine yazacağımız aritmetik operatörleri kullanarak yapacağız.

function compare(value1, operator, value2) {
  switch (operator) {
    case '>':   return value1 > value2;
    case '<':   return value1 < value2;
    case '>=':  return value1 >= value2;
    case '<=':  return value1 <= value2;
    case '==':  return value1 == value2;
    case '!=':  return value1 != value2;
    case '===': return value1 === value2;
    case '!==': return value1 !== value2;
  }

Evet, yukarıdaki fonksiyon aslında şu şekilde çalışıyor;

Biz fonksiyonu çağırırken “value1” , “operator” , “value2” olmak üzere 3 değer gönderiyoruz ve gönderdiğimiz aritmetik operatör switch-case yapısında kontrol edilerek uygun kod bloğunun çalışması sağlanıyor.
Fonksiyonun çağırılması:

compare(25,random, '<', 45);

25 sayısının 45 ‘den küçük olup olmasığını sorduk ve fonksiyon veriyi işledikten sonra bize, “true” olarak bir cevap döndürecektir. Sizlerde bu fonksiyonu kullanarak dinamik if koşulları oluşturabilirsiniz. Hadi birlikte örnek bir kullanım gerçekleştirelim, bu haliyle pek anlaşılır durmuyor.

Dinamik if Koşulu Kullanımı (Örnek)

Bu örnekte sizlerle birlikte kullanıcıya otomatik olarak bir kupon kodu veren bir sistem hazırlayacağız. Bu kodlar için virgül ile ayrılacak biçimde bir düzenleme yaptım ve istediğimiz sayıda ve kazanma oranlarınıda istediğimiz şekilde ayarlayabiliriz.

Koşullar: Kazanma oranları küçükten büyüğe doğru yazılmalıdır ve oranların toplamı 100’ü geçemez.

// Dinamik if koşulu fonksiyonumuzu projemize ekliyoruz
function compare(text,value1, operator, value2) {
  switch (operator) {
    case '>':   return value1 > value2;
    case '<':   return value1 < value2;
    case '>=':  return value1 >= value2;
    case '<=':  return value1 <= value2;
    case '==':  return value1 == value2;
    case '!=':  return value1 != value2;
    case '===': return value1 === value2;
    case '!==': return value1 !== value2;
  }
}
//Bu fonksiyon rastgele sayı üretmek içindir.
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}


var getData,
      data,
      limitText="",
      limits,
      codeText="",
      codes,
      breaking = 0,
      selected_campaign = 'none';
// Rastgele 0-100 arasında bir sayı üretiyoruz.
const random = randomInt(0, 100);

//Döngüde kullanmak için ihtiyacımız olan veriyi alıyoruz.

 getData= "1_kupon_kodu,10,2_kupon_kodu,20,3_kupon_kodu,30";

// Aldığımız bu data'da 2 tip veri bulunuyor bunları birbirinden ayırıyoruz. 
 data = getData.split(',');

 for (let index = 0; index < data.length; index++) {
    
    if (index %2 == 0){
        codeText = codeText + data[index]+',';
    }else if (index % 2 == 1) {
        limitText = limitText+data[index]+','; 
    }
}

limitText=limitText.slice(0,-1);
limits = limitText.split(',');

for (let index = 0; index < limits.length; index++) {
    limits[index] = parseInt(limits[index]);
    if(index == 0){
        limits[index] = limits[index];
    }else{
    limits[index] =limits[index-1] + limits[index];
    }
}

codeText=codeText.slice(0,-1);
codes = codeText.split(',');

//Elimizdeki veri sayısı kadar fonksiyonumuzu çağırabileceğimiz bir "for" döngüsü oluşturuyoruz.
for (let index = 0; index < codes.length; index++) {

if(compare(codes[index],random, '<=', limits[index]) == true && breaking <= 0 && index == 0 ){
    selected_campaign = codes[index];
    console.log(selected_campaign);
    breaking++;
}else if(compare(codes[index],random, '<=', limits[index]) == true && breaking <= 0 && index != 0 && compare(codes[index],random, '>', limits[index-1]) == true ){
    selected_campaign = codes[index];
    console.log(selected_campaign);
    breaking++;


}else if(random > limits[limits.length-1] && breaking <= 0 ){
    
    selected_campaign = 'Kazanamadınız...';
    console.log(selected_campaign);
    breaking++;
}
    
}

Örnek Konsol Çıktısı

// Random değerin 99 geldiği senaryo:

Kazanamadınız...

Bununla birlikte artık kendi dinamil if koşullarınızı oluşturabilir ve projelerinizde kullanabilirsiniz. Buraya kadar okuduğunuz için teşekkür ederim.

Örnek projenin tam haline github üzerinden erişebilirsiniz.
Github