JavaScript görmeyeli çok değişmiş – React Öğreniyorum #1

React öğrenmeye karar verdim. Fark ettim ki JavaScript görmeyeli çok değişmiş, "bu değişiklikleri öğrenmeden React'e başlarsam pek işe yaramaz" diyerek bu yazıda paylaşacağım bilgileri öğrendim.

Web tasarımının gittikçe “yazılımcı işi” olduğu, komut satırı ve derleyici gibi kavramlarla tanışıldığı, her gün yeni bir kütüphanenin ortaya çıktığı bir dönemden geçiyoruz. Öğrenecek yöntemler acımasızca çoğalıyor ve birbirini kapsayacak şekilde gelişiyor, ne var ki çok azı örneğin jQuery gibi popüler olup standarda oturuyor. React de son yıllarda adı çokça bahsedilen kütüphanelerden biri. Öğrenmeye karar verdim, öğrenirken notlarımı bu seri dahilinde paylaşacağım. JavaScript’i biraz bilerek takip edenler için faydalı olur umarım.

İlk önce Codecademy adlı sitenin etkileşimli eğitiminden başladım, yarısına kadar geldim. Sonra vaktiyle satın aldığım bi e-kitaba göz gezdireyim dedim, başladım. Fark ettim ki JavaScript görmeyeli çok değişmiş, “bu değişiklikleri öğrenmeden React’e başlarsam pek işe yaramaz” diyerek bu yazıda paylaşacağım bilgileri öğrendim.

Kendime not: Yani yine “yöntem”in kendisini öğrenmek yerine, bütün yöntemlere hükmedecek üst-yöntemi, “yöntemler yöntemini” öğrenmeye kalkıştım.

Öncelikle üzerinden çalıştığım kitabın ismini paylaşayım:

Banks, A. and Porcello, E. (2017). Learning React: Functional Web Development with React and Redux. Sebastopol, CA: O’Reilly Media, Inc.

Deniyor ki, JavaScript dediğimiz şey ECMA tarafından belirlenen standartlara göre oluşturulan bir programlama dili. Bu standartlar 2015’e kadar birkaç yılda bir yenilenirmiş. Her bir versiyon böyle uzun süreçlerde güncellendiği için yeni özellik ve yazımların Internet Explorer gibi tarayıcılar nezdinde desteklenmesi problem edilmezmiş. 2015’te ECMAScript 6’nın çıkmasıyla birlikte yıllık güncellemeye geçilmiş. Artık ES1 ES2 … ES6 gibi kısaltmalar yerine ES2017 gibi yıl içeren isimler konmuş. Üstelik tarayıcıların güncellenme hızı muhtemelen ES’nin yıllık güncelleme periyoduna yetişemeyeceği için derlemeye benzer bi “transpile” işleminden geçmesi, böylece yeni usül kodun eski usül koda çevrilmesi gerekliymiş. Peki bunca durumdan sonra aklımda kalan soru; JavaScript ve ECMAScript denen şey aynı şey mi? Galiba.

Kitapta React’e geçmeden önce ES2017 ile birlikte gelen yenilikler özetleniyor. Değişken tanımlamanın farklı yolları ve fonksiyon tanımlamada pratik yollar bu yazının konusu.

Değişmeyen değişken

Normalde bir değişken tanımlarken yazdığımız var kelimesinin yerine const yazarak bir sabit tanımlayabiliyoruz. Ondan sonra o sabitin değerini = operatörüyle güncellemek mümkün olmuyor. Fizik formülleri dışında ne işe yaradığını düşünemiyorum ama diğer programlama dillerinde olup da JavaScript’te olmaması ayıbı giderilmiş.

Bir diğer değişken kelimesi ise let. Uzuncası lexical variable scoping olan bu kelime, fonksiyonlarda bildiğimiz yerel değişken / global değişken ikilemini süslü parantez {} kullanan if ve for gibi bloklara da taşıyor. Hemen örnekte gösteriyoruz:

var topic = "JavaScript"

if (topic) {
let topic = "React"
console.log("block", topic)
}

console.log("global", topic)

Yukarıdaki koda göre ilk console.log “block React”, ikinci console.log ise “global JavaScript” değerini verecek. Eğer let yerine var kullansaydık her iki sonuç da topic değişkenini “React” alacak, “block React” ve “global React” sonuçlarını üretecekti.

Bunlara ek olarak, örneğin cümle içerisinde birden fazla değişken kullanacağımız zaman o cümleyi tırnak işaretleriyle artılarla bölmek artık sona erdi. Yazımı karman çorman hale getiren bu alışkanlık yerine benim “kaçış operatörü” adını verdiğim ${} ifadesini kullanarak yekpare bir cümle yazabiliyoruz. Bu dediğimi anlamak için string veri tipini bildiğinizi var saydım. İlk örnek eski yazım, ikinci örnek ise yeni yazım:

console.log( "Benim adım " + name + ", soyadım " + surName + "." )

console.log( "Benim adım ${name}, soyadım ${surName}." )

Sonra, dikkat ettiyseniz satır sonlarında hiç noktalı virgül kullanmadım. Satır satır yazdığımız zaman ES6 ve sonrasında değişen bir şey olmuyor. Muhtemelen transpile aşamasında noktalı virgüller oraya ekleniyor.

Son olarak, unutmadan, fonksiyon parametrelerine artık varsayılan değer atamak mümkün. Mesela: function aktiviteYaz(isim = “Adnan Alper Demirci”, aktivite = “Yürüyüş”)

Aydın havalı fonksiyon

Fonksiyon tanımlama işlemi, if ifadesinin (ternary de denen) kısaltmasını andırır şekilde kısaltılmış. Sadece bir ok işareti => operatörüyle fonksiyon tanımlamak mümkün olmuş, adına da literatürde “Arrow Functions” denmiş. Eski usül:

var ilceSoyle = function( ilceAdi ) {
return "İzmir'in ${ilceAdi} ilçesi"
}

Yeni usül:

var ilceSoyle = ilceAdi => "İzmir'in ${ilceAdi} ilçesi"

İki parametresi olsa:

var ikiIlceSoyle = (ilceAdi1, ilceAdi2) => "İzmir'in ${ilceAdi1} ve ${ilceAdi2} ilçeleri"

Bu Arrow Function ile this anahtar kelimesinin kullanımında this‘in hangi isme işaret gösterdiği konusu karışabiliyormuş. Pek anlamadığım için buraya taşımak istemedim. Fonksiyon içerisinde this kullanacak kadar ilerleyince hep birlikte anlayacağız sanıyorum.

Transpile süreci

Bu kısmı kitaptan kopyalayıp yapıştıracağım, tek satırda yazdığımız ES6 kodunun ES5’te kaç satır haline geldiğini kendi gözlerinizle görün:

const add = (x=5, y=10) => console.log(x+y);

Transpile ettikten sonra:

"use strict";
var add = function add() { var x = arguments.length <= 0 || arguments[0] === undefined ? 5 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 10 : arguments[1]; return console.log(x + y); };

Bu yine iyi, if ifadelerini uzun uzun da yazabilirdi.

Sonuç

Bu yazıyı yazana kadar kitaptan bu kadarlık yeri çalıştım. Biraz daha çalışayım, öğrendiklerimi yeni notlarla burada yazarak tazeleyeceğim.

1 yorum var

Bir Cevap Yazın