JavaScript ES6, ReactJS ve Redux

Merhaba!

JavaScript ES6/ES7, ReactJS ve Redux konu başlığı üzerine bu satırları yazmak için çok bekledim. Karşıma yazmak ve içerik üretmek için elbette birçok serbest zaman dilimleri çıktı fakat yine de kendimde bu motivasyonu bulamadım. Bu içerik biraz uzun olacak, bunun için bir “Akış” tablosu ekledim, bu tablo üzerinden içeriği daha rahat kontrol edebilirsiniz. Şunu da belirtmekte fayda görüyorum başlıkları ve bazı terimleri varsayılan ifadesi ile kullanmayı seçtim. Bunun en büyük nedeni süphesiz araştırma yaparken elinizde bilinen global bir anahtar kelime olmasını sağlamak. Bu içerik bizim uzun girizgahımız olsun, devamında örnek çalışmalarla devam edelim. Güzel bir seri yakalayalım.

JavaScript ES6/ES7

JavaScript başlığı altında giriş yapmamın nedeni ReactJS projelerimizde JavaScript ve ES6 ile gelen özellikleri çok sık kullanacağız. Bu durum sizi ürkütmesin! Dan Abramov‘un da belirttiği üzere, ReactJS’i öğrenirken ilk aşamada senior bir JavaScript bilgisine ihtiyacınız yok. ReactJS’in ekosistemi sizi zaten yönlendirecek ve bir süre sonra JavaScript’i öğrenmiş, tüm gücünü kullanıyor olacaksınız.

Const and Let

const ve let, JavaScript ES6 ile birlikte deklare edilmiş değişken tanımlayıcılarıdır.

ES6 öncesinde variable kısaltılmışı olan var ı kullanıyorduk. Bu ise bizlere bazı sorunlar yaratıyordu. Bunun en önemli nedeni ise var’ın function scope üzerine kurulu olmasıdır. ES6 ile birlikte block scope davranışlarını kullanmaya başlıyoruz. Bu durum bize sadece{} içerisinde kullanılan  bloğa dayalı bir kod yazmamıza imkan sağlamaktadır.

Const, çok güçlü bir özelliktir aslına bakarsanız. Bunun için immutable veriable kavramı da kullanılsa da bazı kesimlerce bunun çok da doğru olmadığı kanıtlanmıştır. Const, değiştirilemez değil yeniden tanımlanamaz bir değişken tanımlayacıdır. Kavramları doğru öğrenirsek süreci daha rahat ilerletebiliriz. Bunun yanı sıra Let ise yeniden tanımlanabilir ve yeni değer alabilir. Const ve Let’in birbiri ile kesiştiği tek nokta ise ikisinin de içerisinde bulunduğu scope’a dayalı çalışmasıdır.

MDN üzerinden örneklerle devam edelim. Bu örnekte let’in davranışlarını izleyelim.

let x = 1;
if (x === 1) {
let x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 1

Tanımlanan x’in ilk değeri 1, bir if statement’e girmekte ve 1’e denkliği sorgulanmaktadır. Bunun sonucunda, true dönerse let ile x’i mutate ederek değerini 2 yapmaktadır. Bu durumda, ilgili scope yani {} içerisinde x’in konsola basılan değerinin 2 olmasını bekleriz. Fakat, scope dışarısına çıkıldığında değerinin 1 olması bizi asıl mutlu eden mevzudur.

Bunu var kullanarak yapsak sonuç nasıl olurdu?

var x = 1;
if (x === 1) {
var x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 2

Burada beklenildiği gibi, if statement’in içerisinde mutate olan x değişkeni, alanı dışına çıktığında varlığını koruyamamış ve yoluna değeri 2 olarak devam etmiştir.

Bir de const’a bakalım.

const number = 42;
try {
number = 99;
} catch(err) {
console.log(err);
// expected output: TypeError: invalid assignment to const `number'
// Note - error messages will vary depending on browser
}
console.log(number);
// expected output: 42

Yukarıda da belirttiğimiz üzere, let gibi block-scope içerisinde değerini korumuş fakat yeniden tanımlanmasına izin vermemiştir.

Arrow Function

Arrow fonksiyon ifadeleri, standart fonksiyon ifadelerine göre daha okunabilir ve kısa yazım kolaylığına sahiptir. map, filter ve reduce gibi fonksiyonlarımızı yazarken sıkça kullanacağız.

var elements = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
elements.map(function(element ) { 
return element.length; 
}); // [8, 6, 7, 9]
elements.map(element => {
return element.length;
}); // [8, 6, 7, 9]
elements.map(({ length }) => length); // [8, 6, 7, 9]

Yukarıdaki örnek gösterimde, üç farkı kullanım yer almaktadır. ES6’dan önce kullandığımız standart function express, arrow function express ile return’u scope içerisinde tanımlayan bir örnek ve son olarak da tek bir satırda olmak koşulu ile direkt return eden bir örnek.

Template Literals

ES6’da bu özelliğe “Template Literals” ya da “Template String” denmektedir. Temel amacı, string olarak yazılan bir ifadenin içerisinde okunabilirliği arttırılmış bir şekilde değişken yazmamıza imkan sağlamasıdır.

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

Yukarıdaki örnekte her iki kullanımı da görebilirsiniz.

Default Parameters

ES6 ile gelen özelliklerden birisi de default parameters. ES6 ile birlikte, fonksiyonlar varsayılan değerler alabilir ve varsayılan değerlerle çalışmaya başlayabilir. Bir argümanın her koşulda tanımlanacağından emin değilseniz, varsayılan olarak değer atayabilirsiniz. Ayrıca bu varsayılan parametreler, dışarıdan farklı bir fonksiyonu da çağırabilir.

function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2));
// expected output: 10
console.log(multiply(5));
// expected output: 5

Yukarıda basit bir örnek gösterilime yer verilmiştir. multiply fonksiyonunda, b argümanı tanımlanmasa bile varsayılan değer sayesinde undefined almadan başarılı bir şekilde çalışmaktadır.

Destructing Assignment

Türkçe ifadesini bulmakta en çok zorlandığım terim bu oldu sanırım: “Destructing Assignment” ES6’da bir dizi ya da objenin farklı değişkenlere atanması işini kolaylaştıran bir özellik.

Array Destructing

var foo = ['one', 'two', 'three'];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

Object Destructing

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

Yukarıda yer alan örneklerde dizi ve objelerde kullanılan söz dizimine dair gösterimlere yer verdim.

Export and Import

Export

export ifadesi JavaScript modülleri oluştururken fonksiyonların, nesnelerin ve temel değerlerin dışarı aktarılmasını sağlayarak, diğer programlar tarafından import ifadesiyle kullanılmasını sağlar. Şu an varsayılan olarak Safari’de desteklense de kullanacağız basit bir transpiler ile her tarayıcıda desteklenmesinin önünü açabilirsiniz.

İsimlendirilmiş Dışa Aktarım

// modül "benim-modulum.js"
function kup(x) {
return x * x * x;
}
const deger = Math.PI + Math.SQRT2;
export { kup, deger };

Import ile kullanımı:

import { kup, deger } from 'benim-modulum';
console.log(kup(3)); // 27
console.log(deger); // 4.555806215962888

Varsayılanın dışa aktarımının kullanılması

// modül "benim-modulum.js"
export default function kup(x) {
return x * x * x;
}

Sonra, başka bir kod içerisinde, varsayılan dışa aktarımı içe aktarmak anlaşılır olacaktır:

import kup from 'benim-modulum';
console.log(kup(3)); // 27

Import

 

Kaynak ve İleri Okuma

  • https://medium.freecodecamp.org/write-less-do-more-with-javascript-es6-5fd4a8e50ee2
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.