ReactJS Kodunda Refactor — Saf(Pure) Fonksiyon Kullanımı

İbrahim Kürce
Aug 26, 2017 · 2 min read

Çalıştığımız projelerde sıklıkla karşılaştığımız ve test yazmamızı da çok zorlaştıran, saf olmayan fonksiyonların kullanımını ve bunları nasıl saf hale çevireceğimizden bahsedeceğim.

Günümüzde artık saf(pure) fonksiyonlar yazmak çok elzem bir hale gelmiştir. Saf fonksiyonlar yazmak nedir ve faydaları nelerdir biraz bunlara bakalım.

Saf Fonksiyon Nedir?

Aynı girdiler için her zaman aynı çıktıları üreten fonksiyonlara saf fonksiyonlar denir. Parametre olarak gelen girdiler üzerinde herhangi bir değişiklik yapılmaz, yani fonksiyonun yan etkileri yoktur.

Yukarıdaki toplam alan fonksiyon saf bir fonksiyondur.

Şurada bu konunun detayı ile ilgili güzel bir yazı vardır.

Saf Fonksiyonun Faydaları Nelerdir?

Peki, böyle fonksiyonlar kullanmanın bize ne gibi faydaları vardır. Başlıcaları şunlar diyebiliriz;

  • Saf fonksiyonlarda verilen parametrelerin değiştirilmediğinden eminsindir. Bununla ilgili bir çekincen olmaz.
  • Anlaşılması kolaydır. Bütün olay fonksiyonun içinde olup biter, dış bağlantıları yoktur.
  • Belki de en önemlisi test etmek inanılmaz derecede kolaylaşır. Sadece girdilerini değiştirerek fonksiyonunun farklı senaryolarını kolayca test yapabilirsin.

İlk önce şöyle bir örneğe bakalım, UserComponent adında bir sınıfımızın olduğunu varsayalım,

Burada UserComponent sınıfıda ayrıca sınıf yerine fonksiyon haline getirebiliriz ama bu sınıfın daha karmaşık olduğunu düşünün. Ben şimdilik sadece fonksiyonu nasıl saf hale getirmekten bahsedeceğim.

Dikkat ederseniz, renderUsers fonksiyonu sadece girdilerine göre şekillenmiyor ayrıca sınıfın props’ları da bu fonksiyonun şekillenmesine etki ediyor.

renderUsers fonksiyonu test etmek istediğimizde, örneğin Enzyme/Jest kütüphanelerinden birini kullanıyorsak, ya tekrar componenti mount fonksiyonu ile oluşturmamız, ya da setProps fonksiyonu ile yeni props set etmemiz gerekiyor. Bu da zahmetli bir işlemdir. Jest kütüphanesi detayına şuradan bakabilirsiniz.

Halbuki, renderUsers fonksiyonun aşağıdaki gibi saf hale getirmiş olsaydık,

renderUsers fonksiyonunu istersek sınıftan farklı bir yere dahi taşıyabiliriz. Böylece sınıfın karmaşıklığını azaltmış oluruz ve kod bakımını da daha kolay yapabiliriz ama sınıfın içinde durmasında da bir sakınca yoktur.

Diğer önemli nokta da, renderUsers fonksiyonunun testini yazmak çocuk oyuncağı haline gelir. Girdilere göre istenilen çıktıyı veriyor mu bakmak yeterli olur. Farklı bir if-else koşulu varsa ona göre girdi ver, istenilen koşula giriyor mu diye kontrol et sadece. mount etmek yok, setProps kullanmak yok.

Bu işlem büyük componentleri sadeleştirmede çok faydalıdır. İsterseniz renderUsers fonksiyonunu başka bir component haline de getirebilirsiniz. Bu da componentlere bölerek projenin yönetimini kolaylaştırır. renderUsers fonksiyonunu illa render edilecek bir fonksiyon olarak düşünmeyin, çok farklı nesneler üzerinde hesaplama yapıp, yeni nesneler ürettiğiniz fonksiyonlarda bu kapsama girebilir. Saf fonksiyonların kapsamı geniş tutabiliriz.

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

Bilişim Hareketi

Türkiye'nin bilişim alanında gelişmesi için bir katkı

)

İbrahim Kürce

Written by

Developer and father.

Bilişim Hareketi

Türkiye'nin bilişim alanında gelişmesi için bir katkı

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade