JavaScript ile Fonksiyonel Programlama — 2

Published in

Kodcular

3 min readJun 14, 2019

Imperative vs Declarative

Programlama paradigması; problemlere üretilen çözümlerin nasıl formüle edileceğiyle alakalı olan temel programlama stilidir. Programlama paradigmaları hangi yollarla çözümlere ulaştıklarının yanısıra hangi yolları yasakladıklarıyla da bilinirler. Örneğin fonksiyonel paradigmayı esas alan bir yöntem, yan etkilerin kullanılmasını da yasaklar (önceki konularda bahsetmiştik.)

Fonksiyonel programlama daha büyük bir programlama paradigmasının bir parçasıdır:declarative programlama. Declarative programlama, uygulamaların nasıl olması gerektiğini tanımlamak yerine, ne olması gerektiğini açıklamaya öncelik verecek şekilde yapıladırıldığı bir programlama stilidir. Declarative programlamayı anlamak için, imperative programlama stili ile karşılaşırız. Imperative (zorunlu) programlama, bir durum ve bu durumu değiştiren komutlar üzerine kuruludur. Bilgisayarın gerçekleştireceği sıralı komutlardır. Hesaplamanın “nasıl?” yapılacağı önemlidir.

Şimdi ortak bir görev düşünelim: URL dizesini URL uyumlu hale getirmek. Tipik olarak, bu, bir dizgideki tüm boşlukları tirelerle değiştirerek gerçekleştirilebilir, çünkü boşluklar URL uyumlu değildir. İlk önce, bu görevi imperative bir yaklaşımla inceleyelim:

var string = "This is the midday show with Cheryl Waters";
var urlFriendly = "";for (var i=0; i<string.length; i++) {
  if (string[i] === " ") {
    urlFriendly += "-"; 
  }else{
    urlFriendly += string[i];
  }
}console.log(urlFriendly);

Bu örnekte, cümledeki her karakter arasında döngü kurar ve boşlukları oldukları gibi değiştiririz. Bu programın yapısı sadece böyle bir görevin nasıl başarılabileceği ile ilgilidir. Bir for döngüsü ve bir if ifadesi kullanıyoruz ve değerleri bir eşitlik operatörüyle ayarlıyoruz. Sadece koda tek başına bakmak bize pek bir şey ifade etmiyor, neler olduğunu anlamak için birçok yorum gerektirir.

Şimdi aynı soruna declarative yaklaşımla bakalım:

const string = "This is the mid day show with Cheryl Waters"
const urlFriendly = string.replace(/ /g, "-")
console.log(urlFriendly)

Burada, tüm boşluk örneklerini tirelerle değiştirmek için string.replace komutunu düzenli bir ifadeyle birlikte kullanıyoruz. String.replace kullanmak, ne olması gerektiğini açıklamanın bir yoludur: string’deki boşluklar değiştirilmelidir. Boşlukların nasıl ele alındığına dair detaylar replace fonksiyonunun içinde soyutlanır.

Declarative programlarının nedenleri kolaydır, çünkü kodun ne olduğunu açıklar. Örneğin, aşağıdaki örnekte sözdizimini okuyun; üyeler bir API’den yüklendikten sonra ne olacağını ayrıntılarıyla anlatır:

const loadAndMapMembers = compose(
  combineWith(sessionStorage, "members"),
  save(sessionStorage, "members"),
  scopeMembers(window),
  logMemberInfoToConsole,
  logFieldsToConsole("name.first"),
  countMembersBy("location.state"),
  prepStatesForMapping,
  save(sessionStorage, "map"),
  renderUSMap
);getFakeMembers(100).then(loadAndMapMembers);

Declarative yaklaşım daha okunaklıdır ve bu nedenle akla gelmesi kolaydır.

Bu fonksiyonların her birinin nasıl uygulandığına dair detaylar açıklanmıştır. Bu küçük işlevler, iyi adlandırılmış ve üye verilerinin bir haritaya nasıl yüklenip basılacağını gösteren bir şekilde birleştirilmiştir ve bu yaklaşım çok fazla yorum gerektirmez. Temel olarak, declarative programlama, uygulamanın üzerinde düşünülmesi ve anlaşılması daha kolay olduğundan, uygulamanın ölçeklendirilmesi de daha kolay olan uygulamalar üretir.

Şimdi bir belge nesnesi modeli veya DOM oluşturma görevini ele alalım. Imperative bir yaklaşım, DOM’un nasıl inşa edildiğiyle ilgilenecektir:

var target = document.getElementById('target');
var wrapper = document.createElement('div');
var headline = document.createElement('h1');wrapper.id = "welcome";
headline.innerText = "Hello World";wrapper.appendChild(headline);
target.appendChild(wrapper);

Bu kod, eleman oluşturma, eleman ayarlama ve belgeye eklemeyle ilgilidir. DOM’nin zorunlu olarak oluşturulduğu yerlerde değişiklik yapmak, özellik eklemek veya 10.000 kod satırını ölçeklemek çok zor olurdu.

Şimdi bir React bileşenini kullanarak declarative yöntemle bir DOM’yi nasıl oluşturabileceğimize bakalım:

const { render } = ReactDOMconst Welcome = () => (
  <div id="welcome">
    <h1>Hello World</h1>
  </div>
)
render(
  <Welcome />,
  document.getElementById('target')
)

React declarative’dir. Burada, Welcome bileşeni işlenmesi gereken DOM’yi açıklar. Render işlevi, DOM’un nasıl işlendiğinin ayrıntılarını kaldırarak DOM oluşturmak için bileşendeki bildirilen talimatları kullanır. Welcome bileşenimizi, ‘target’ kimliğiyle öğeye dönüştürmek istediğimizi açıkça görebiliyoruz.

Bir sonraki yazıda görüşmek üzere…

Kaynaklar:

JavaScript ile Fonksiyonel Programlama — 2

Imperative vs Declarative

Written by Emre Acar