ES6, ES7, ES8 ve ES.Next nedir? Eski Javascript’ten farkı nedir?
ES6, ES7, ES8 Javascript’in çekirdeğini oluşturan ECMAScript in yeni versiyonlarının isimleridir. ECMAScript bir yazılım dili standardıdır. JavaScript ise bu standartların uygulanmış olduğu en popüler programlama dilidir. Bu versiyonlarla gelen yeni özelliklerin bazılarını aşağıda belirteceğim.
ES6 (2015)
Arrows
Arrow fonksiyonlar mutlaka geriye bir değer döndürmelidir. Arrow fonksiyonlarda normal fonksiyonların aksine bulundukları scope daki this kodunu kullanabilirsiniz.
map ile kullanım örneği;
var odds = evens.map(v => v + 1);
forEach ile kullanım örneği;
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
Classes
Object oriented class desteği.
class SkinnedMesh extends THREE.Mesh {
constructor(props) {
super(props);
//...
}
update() {
//...
}
get articleCount() {
//...
}
set articleType(articleType) {
//...
}
static defaultArticle() {
//...
}
}
Template Strings
Template enginlerinde olduğu gibi string içerisine değişken paslama işlemi.
const name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
Object Destructuring
React app geliştirirken Eslint airbnb preset zorlaması ile alıştığım bir özellik.
// Object Destructuring
const {op, lhs, rhs} = this.props;// Normal
const op = this.props.op;
const lhs = this.props.lhs;
const rhs= this.props.rhs;
Let ve Const
Javascript’te değişken tanımlarken kullanılan var yerine getirilmiş iki özellik let ile oluşturulan değişkenler sonradan değişebilir ken const ile oluşturulan değişkenlerin 2. bir değer ataması yapılmaması üzerine kurgulanmıştır.
const x = "değişmez.";
let y = "değişebilir.";
Modules
JavaScript module yükleyicileri kod kalıpları (AMD, CommonJS).
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
Promises
Eşzamanlı olmayan programlama ile bir işlemin bitip diğerinin başlaması sağlanır. Normal javascript’te olduğu gibi diğer kodların çalıştırılması için bu işlemlerin bitmesi beklenmez.
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})
Spread syntax
Array içindeki elemanların hepsini yanyana dışarıya akarmak olarak söylenebilir.
var arr = [2, 4, 8, 6, 0];
var max = Math.max(…arr);
// max will be 8
ES7 (2016)
2015'ten itibaren ECMAScript her sene düzenli olarak yeni versiyon çıkarmaya karar verdiklerinden dolayı ES7'de ES6'da olduğu kadar çok özellik bulunmamakta.
ES8 (2017)
Async functions
Fonksiyonların artık asenkron çalışabiliyorlar. async
fonksiyonların içinde mutlaka await
bulunması gerekiyor.
async function fetchJson(url) {
try {
let request = await fetch(url);
let text = await request.text();
return JSON.parse(text);
}
catch (error) {
console.log(`ERROR: ${error.stack}`);
}
}
Evet benim sıkça kullandığım özellikler bunlar bunların dışında tonla özellik bulunmakta. bunlara aşağıdaki linkten ulaşabilirsiniz.
http://kangax.github.io/compat-table/es6/
Son olarak bu özelliklerin ve diğer özelliklerin çoğu tarayıcılar tarafından desteklenmemekte bu yüzden yazılan kodların çalıştırılmadan önce Babel.js ile compile edilmesi gerekli. Bu konuyu başka bir makalede detaylı olarak anlatacağım.