ES6+ İle Değişen Kullanımı

Adı : ES6+ İle Değişen Kullanımı

ES6+ İle Değişen Kullanımı
ES6+ (Ecmascript 6), javascipt dilinin son sürümüdür. Geliştiriciler için oldukça önemli bir açılım olan ES6+, javascript dilinde birçok değişikliği de beraberinde getirdi. Bu değişikliklerle birlikte, javascript dilinin okunaklılığı, anlaşılabilirliği ve yazım kolaylığı önemli ölçüde arttı. ES6+’ın getirdiği yenilikleri teker teker ele alalım:
1) Let and Const Anahtar Kelimeleri:
ES6+’ın en önemli değişikliklerinden biri, let and const anahtar kelimelerinin getirilmesidir. Var keyword’ü ile tanımlanan değişkenlerin değiştirilmesi, başka bir scope’a atılması ve hatta silinmesi bile mümkündü. Ancak, let and const keyword’leriyle tanımlanan değişkenlerin güvence altına alınması söz konusudur. Let keyword’ü ile tanımlanan değişkenler, aynı scope içerisinde bir kereye mahsus tanımlanabilir ve değiştirilebilirler. Buna karşın, const keyword’ü ile tanımlanan değişkenler ise bir kere tanımlanır ve değiştirilemezler. Bu özelliğiyle, programların daha hatasız bir şekilde çalışması sağlanmıştır.
Örnek:
```
let a = 5;
a = 10;
console.log(a); // Output: 10
```
```
const b = 7;
b = 20; // TypeError: Assignment to constant variable.
console.log(b);
```
2) Arrow Functions:
ES6+ ile birlikte, arrow functions (ok fonksiyonları) kullanımı mümkün hale geldi. Ok fonksiyonlarının en önemli özelliği, daha okunaklı bir kod stilinin benimsenmesidir. Özellikle birden fazla fonksiyonun parametre olarak kullanılması gerektiğinde büyük kolaylık sağlar.
Örnek:
```
const list = [1, 2, 3, 4, 5];
const oddNumbers = list.filter(number => number % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]
```
3) Destructuring:
Destructuring, javascript dilindeki bir nesnenin veya dizinin içindeki özellikleri veya elemanları tek tek çıkarıp, değişkene atama işlemidir. ES6+ ile birlikte, destructuring kullanımı da mümkün hale geldi. Destructuring, ya nesne ya da dizi üzerinden yapılabilir.
a) Nesne Destructuring:
Örnek:
```
const user = {name: 'John Doe', age: 28};
const {name, age} = user;
console.log(`Name: ${name}, Age: ${age}`); // Output: Name: John Doe, Age: 28
```
b) Dizi Destructuring:
Örnek:
```
const list = [1, 2, 3, 4, 5];
const [firstNumber, secondNumber, ...remaining] = list;
console.log(`First Number: ${firstNumber}, Second Number: ${secondNumber}, Remaining: ${remaining}`); // Output: First Number: 1, Second Number: 2, Remaining: [3, 4, 5]
```
4) Spred Operators:
ES6+ ile birlikte spred operatorleri kullanımı da mümkün hale geldi. Spred operatorleri, nokta üç nokta (…) işareti olarak gösterilirler ve dizileri ve nesneleri genişletmek için kullanılırlar.
a) Dizi Spred Operatorleri:
Örnek:
```
const firstArray = [1, 2, 3];
const secondArray = [4, 5, 6];
const mergedArray = [...firstArray, ...secondArray];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
```
b) Nesne Spred Operatorleri:
Örnek:
```
const firstObject = {name: \"John\", age: 25};
const secondObject = {job: \"Programmer\", language: \"Javascript\"};
const mergedObject = {...firstObject, ...secondObject};
console.log(mergedObject); // Output: {name: \"John\", age: 25, job: \"Programmer\", language: \"Javascript\"}
```
5) String Template Literals:
ES6+ ile birlikte, backtick (`) (ters tırnak) kullanılarak, string template literaller kullanımı mümkün hale geldi. Bu özellik, stringlerde değişkenlerin kullanımını oldukça kolaylaştırdı.
Örnek:
```
const name = \"John\";
const age = 25;
console.log(`My name is ${name} and I'm ${age} years old.`); // Output: My name is John and I'm 25 years old.
```
Sık Sorulan Sorular:
1) ES6+ Nedir?
ES6+, javascipt dilinin son sürümüdür ve daha okunaklı bir kod sütili kazandırmıştır. Daha önce bulunan syntax’larda yapılması gereken işlemleri daha kısa ve anlaşılır şekilde yapılmasını sağlamıştır.
2) Arrow Functions Nedir?
Arrow functions, ES6+ ile gelen yapısal bir değişikliktir. Bu değişiklik sayesinde daha okunaklı ve kısa bir kod yazım şekli sunulmuştur.
3) Destructuring Nedir?
Destructuring, javascript dilindeki bir nesnenin veya dizinin içindeki özellikleri veya elemanları tek tek çıkarıp, değişkene atama işlemidir.
4) Spred Operators Nedir?
Spred operatorleri, nokta üç nokta (…) işareti olarak gösterilirler ve dizileri ve nesneleri genişletmek için kullanılırlar.
5) String Template Literals Nedir?
String template literaller, backtick (`) (ters tırnak) kullanılarak kullanılan bir string yapısıdır. Bu yapı stringlerde değişkenlerin kullanımını oldukça kolaylaştırmaktadır.