ES6, ES7, ES8 ve ES.Next nedir? Eski Javascript’ten farkı nedir?

Yunus Özcan
2 min readNov 23, 2018

--

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.

--

--

Yunus Özcan

Developer & Entrepreneur. Founder @appitr , Former founder @hackercancom