İlginizi Çekebilir
  1. Ana Sayfa
  2. Yazılım

JavaScript ES6 — Yeni Başlayanlar için Rehber

JavaScript ES6 — Yeni Başlayanlar için Rehber
javascript-es6-nedir
+ - 0

JavaScript ES6 Nedir?

JavaScript ES6, JavaScript’in standartlaştırılmış adı olan ECMAScript sürüm 6’yı ifade eder. 2015’te piyasaya sürülen ES6, dille ilgili birkaç yeni kavram ve güncelleme getirdi. ECMAScript 2015 veya ES2015, JavaScript programlama dili için önemli bir güncellemedir. 2009’da standartlaştırılan ES5’ten bu yana dilde yapılan ilk büyük güncellemedir. Bu nedenle ES2015’e genellikle ES6 denir.

javascript es6

Arrow Functions

Bir arrow function yaratmanın sözdizimi, birkaç farkla normal bir işlevin sözdizimine benzer.

İlk fark, ‘function’ anahtar kelimesine artık ihtiyaç duyulmamasıdır.
İkinci fark, argümanlar ve işlev gövdesi arasına “=>” okunun eklenmesidir.

Örnek:

const printMyName = (name) => {return `My name is ${name}`}
console.log(printMyName('webolog')) // çıktı webolog

Ok fonksiyonu için kısa sözdizimi var burada fonksiyon tanımından köşeli ayraçları kaldırıyoruz.
Daha sonra dönmek istediğimiz ifadeyi okun hemen arkasına koyuyoruz.
Eklediğimiz ifade örtük olarak döndürüldüğü için return anahtar kelimesine gerek yoktur.

Yukarıdaki kodu kısa sözdizimi ile yapalım,

const printMyName = name => `My name is ${name}`
console.log(printMyName('webolog')) // çıktısı "webolog"

Promises

Promise türkçe karşılığı söz vermek olarak anlamlandırılabilir. Promise ile yapmak istediğimiz işlemin sonucunu bize bildiriyor. Bu işlem olumlu yada olumsuz olsun promise ile biz bunun nasıl sonuçlandığını görebiliyoruz.

new operatörü kullanarak bir promise oluşturabilirsiniz. reslove and reject adında iki parametre alır.

Bir promise üç durumdan birine sahip olabilir;

1.pending
2.fulfilled
3.rejected

const myPromise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Example data')}, 2000)})

Benzer şekilde, bizde fetch söze dayalı olan, herhangi bir API’ye erişmek için kullanılır, ondan döndürülen verilere erişilebilir ve bir söz verdiği için diğer vaatlerle daha fazla işlenebilir.

// Using myPromise from above
myPromise.then((data) => {console.log(data) // prints "Example data"}, (err) => {console.log(err)})

Generators

Generators, kendini duraklatma ve daha sonra devam ettirme, bu arada diğer kodların çalışmasına izin verme yeteneğine sahip özel bir işlev türüdür.

Bu işlev, kendisinin çalışmasını durdurabilir ve diğer işlevlerin geri arama kuyruğunda çalışmasına veya yürütülmesine izin verebilir.

Bütün bunlar tek bir anahtar kelime ile yapılır: yield. Bir üreteç bu anahtar kelimeyi içerdiğinde, yürütme durdurulur.

Bir jeneratör birçok yield içerebilir anahtar kelimeler, böylece kendisini birden çok kez durdurur ve tarafından tanımlanır *function anahtar kelime.

let ve const

var geleneksel olarak işlev kapsamındadır .Function scope’tur. Function scope olduğu için if-for tanımlanan değişkenlere dışarıdan erişebilirsiniz.

let değişkenin değeri sonradan değiştirilebilir. let sadece bir kez tanımlanabilir. let block scope’tur.

const constant’ kelimesinden gelir ve ‘sabit’ anlamındadır. Değişkenin değerini sonradan değiştiremezsiniz. Yani değişkenin değeri sabittir. const block scope’tur. Yani sadece tanımlandığı { } süslü parantez içerisinden erişilebilir.

let const

Template Literals

Template Literals kullanmak çok kolaydır ve dizelerinizi veya javaScript kodunuzu birleştirmek için ‘+’ işaretiyle uğraşmanızı önler.

Bir Template Literals başlatmak için geri tepmeler kullanırız ve ne zaman JS yazmak istersek ${javaScript code} sözdizimini kullanırız.

Örnek;

// Using myPromise from above
//function with no template literalsconst myHobby = () => {
let name = "Bhavishya"
let hobby = "Travelling"
return name + ' ' + 'loves' + ' ' + hobby
}myHobby() // "Bhavishya loves travelling"

Şimdi aynı işlevi Template Literals ile görelim,

// Using myPromise from above
//function with no template literalsconst myHobby = () => {
//function with template literalsconst myHobby = () => {
let name = "Bhavishya"
let hobby = "Travelling"
return `${name} loves ${hobby}`
}myHobby() // "Bhavishya loves travelling"

Default Parameters

Artık fonksiyonda iletilen argümanlara varsayılan parametreler atayabiliriz.

var myfun = (name = 'Bhavishya', age = 24) => {console.log(name,age)}myfun() 
// Bhavishya 24

Array and Object Destructing

Destructing dizilerin ve nesnelerin diğer değişkenlere atanmasını kolaylaştırır.

Eski Sözdizimi:

const obj = {
name:"Bhavishya",
age:24,
country:"India"
}let name = obj.name;
let age = obj.age;
let country = obj.countryconsole.log(name) // "Bhavishya"
console.log(age) // 24
console.log(country) // "India"

ES6 Sözdizimi ile:

const obj = {
name:"Bhavishya",
age:24,
country:"India"
}let {name,age,country} = objconsole.log(name) // "Bhavishya"
console.log(age) // 24
console.log(country) // "India"

Bu, sadece küme parantezlerini köşeli parantezlerle değiştirmek zorunda olan dizilere benzer.

const arr = ["Bhavishya",24,"India"];let [name,age,country] = arrconsole.log(name) // "Bhavishya"
console.log(age) //24
console.log(country) // "India"

Rest Parameter and Spread Operator

rest parametresi, bir dizinin argümanlarını almak veya bir fonksiyona başka argümanlar eklemek için kullanılır.

Aşağıdaki koda bakalım,

function myFun(a, b, ...manyMoreArgs) {  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); }

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

Buradaki fonksiyon myFun işleve iletilen parametreleri konsollar.
...manyMoreArgs geçtiği kadar argüman alabilir ve bir argüman dizisi olarak döndürülür.

Spread operatörü, rest parametresiyle aynı sözdizimine sahiptir, ancak spread operatörü, yalnızca bağımsız değişkenleri değil, Dizinin kendisini de alır. Bir Dizinin değerlerini almak için Spread parametresini kullanabiliriz.

const arr=['I','am','Bhavishya','Hi','Friends','How are you?'];

const Func=(...array)=>{
  return array;
}

console.log(Func(arr));

//output  ['I','am','Bhavishya','Hi','Friends','How are you?']

Classes

JavaScript Class, 2015 yılında JavaScript ile tanıştırıldı. Classlar, nesne yönelimli programlamanın (OOP) çekirdeğidir. Kodunuzu güvenli ve kapsüllü hale getirirler. Classları kullanmak, kodunuza güzel bir yapı verir ve onu düzenli tutar.

//Syntax
class myClass {
  constructor() {
  }
}

Örnek;

class react {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const vue = new react("Bhavishya", 24);
console.log(vue.name) // "Bhavishya"

class react {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  sayHi() {
    return `Hiii ${this.name} your age is ${this.age}`
  }
}

const callMe = new react('Bhavishya',24);
callMe.sayHi()  //"Hiii Bhavishya your age is 24"

Başka bir sınıftan miras almak için extends anahtar kelime ve ardından devralmak istediğiniz sınıfın adı.

const arr=['I','am','Bhavishya','Hi','Friends','How are you?'];
class react {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  sayHi(){
    return `Hii ${this.name} your age is ${this.age}`
  }
}

class vue extends react {
  myName(){
    console.log(this.name)
  }
}

const callMe = new vue('Bhavishya',24);
callMe.sayHi(); // Hii Bhavishya your age is 24
callMe.myName(); //"Bhavishya"

JavaScript ES6 konusu hakkında tamamen yüzeysel bilgileri sizlere sundum. Bu şekilde bir konunun olduğunu bilmeniz bile sizin için yeterli. Daha fazla araştırma yaparak ES6 hakkında daha detaylı bilgi sahibi olabilirsiniz.

Yazar Hakkında

Bu Yazıyı Yorumla