Modern Javascript'e [ES6] Giriş - Part 3

Ismet BALAT -

Modern Javascript, ES6, serisinde son derse gelmiş bulunuyoruz. Bu dersi de tamamladıktan sonra artık React derslerine rahatça başlamış olacağız.

Daha önceki Modern Javascript'e ES6 Giriş - Part 1 ve Modern Javascript'e ES6 Giriş - Part 2 derslerinin ardından üçüncü ve son bölüm olan bu derste işleyeceğimiz konular şunlar olacak:

  1. Array map
  2. Array filter
  3. Array reduce
  4. Template literals
  5. Imports and exports
  6. Destructuring objects and arrays
  7. Extend and super

Array Map

Map operatörü, bir dizinin tüm öğeleri üzerinde belirli bir işlem yapmak için kullanılır ve değiştirilmiş öğeleri olan bir dizi döndürür.

Uygulanması çok kolaydır. Bir örnek görelim.

let arr = [1,2,3,4,5];

let modifiedArr = arr.map(function(element, index, arr) {
  return element * 10;
});
console.log(modifiedArr);

Çıktısı şu şekilde olacaktır:

[10, 20, 30, 40, 50]

Gördüğünüz gibi map üç parametreli bir fonksiyon alıyor.

  1. İlk parametre, her bir dizi elemanını ifade eder.
  2. İkinci parametre, elemanın indeksidir.
  3. Üçüncü parametre tüm dizidir.

Ayrıca, sonunda bir değer döndürmemiz gerektiğini de unutmayın. Çünkü bu return değeri öğenin değiştirilmiş değeri olacaktır. Hiçbir şey döndürmediyseniz, belirli öğe tanımsız olacaktır.

Bu arada ikinci ve üçüncü parametrenin yalnızca isteğe bağlıdır. Yalnızca ilk parametre zorunludur.

let modifiedArr = arr.map(function(element) {
  return element * 10;
});

Gördüğünüz gibi map tek parametre ile fonksiyon alıyor.

Şimdi map operatörünü arrow function ile yazmaya çalışalım.

let modifiedArr = arr.map((element, index) => {
  console.log("index "+index);
  return element * 10;
});
console.log(modifiedArr);

Çıktısı:

index 0
index 1
index 2
index 3
index 4
[10, 20, 30, 40, 50]

Son bir örneğe bakalım.

let modifiedArr = arr.map(element => element * 10);
console.log(modifiedArr);

Oldukça basit ve clean oldu :)

Arrow işlevlerini iyi biliyorsanız, anlaşılması kolay olmalıdır. Ama anlamadıysanız anlatmaya çalışacağım.

Burada açıklanacak iki şey var.

  1. Tek parametreli bir fonksiyonunuz varsa, ()'ye ihtiyacınız yoktur. Bizim durumumuzda element parametredir.
  2. Ve fonksiyonun gövdesi olarak tek satırınız varsa, {}'a ihtiyacınız yoktur ve ayrıca JS, fonksiyonu yürüttükten sonra değeri kesin olarak döndürür. return anahtar sözcüğünü kullanmak zorunda değilsiniz.

Array Filter

Array Filter, tüm diziyi bazı koşullara göre filtrelemek için kullanılır. Dizi filtresi, bir dizinin her öğesini alır ve verilen koşulla kontrol eder. Öğe koşulu geçerse, öğeyi dizide tutar, aksi takdirde öğeyi kaldırır.

Bir örnek görelim.

let arr = [1, 2, 3, 4, 5, 6]
let modifiedArr = arr.filter(function(element, index, array) {
  return element % 2 == 0
});
console.log(modifiedArr);

Çıktısı:

[2, 4, 6]

Yukarıdaki örnekte de görebileceğiniz gibi, filter aynı map gibi üç parametre alır. Ve dizinin her elemanı için bir boolean değeri döndürmemiz gerekiyor. Sonunda herhangi bir boolean değeri döndürmezseniz, filtre bunu false olarak alır ve öğeyi siler.

Arrow fonksiyonunda deneyelim.

let modifiedAarr = arr.filter((element, index) => element%2 == 0)

Umarım bu örnekler yeterlidir. Ve dikkat etmeyi unutmayın, sadece ilk parametre zorunludur. Diğer iki parametre isteğe bağlıdır.

Array Reduce

Array Reduce, bir dizinin tüm öğelerini toplamak ve tek bir değer döndürmek için kullanılır.

Biraz örnek görelim

let arr = [1,2,3,4,5,6]
let total= arr.reduce(function(sum, element, index, array) {
  return sum + element;
},0);
console.log("total is "+total);

Çıktısı:

total is 21

Filter ve map'ten farklı olarak, reduce, dört parametreli bir fonksiyon ve ayrıca ek bir parametre alır. Bizim durumumuzda 0.

Nasıl çalıştığını görelim.

İlk parametre toplayıcı öğedir. Herhangi bir noktadaki elemanların toplamına sahiptir. Ve başlangıç ​​değeri ek eleman olarak tanımlanır. Yani bizim örneğimizde verdiğimiz 0 değerli parametre.

Daha sonra ikinci, üçüncü ve dördüncü parametre filter ve map ile aynıdır. Ve yine filter ve map gibi, sonucu döndürmeniz gerekir.

Başka bir örnek görelim.

let arr = [1,2,3,4,5,6];
let totalSum = arr.reduce(function(sum, element, index, array) {
  console.log(sum+"+"+element+"="+sum+element);
  return sum + element;
}, 10);
console.log("Total sum is "+ totalSum);

Çıktısı:

10 + 1 = 11
11 + 2 = 13
13 + 3 = 16
16 + 4 = 20
20 + 5 = 25
25 + 6 = 31
Total sum is 31

Umarım örnek anlaşılmıştır. Toplayıcı parametrenin başlangıç ​​değerini başlangıçta 10 olarak ayarladığımı unutmayın.

Filter ve map'ten farklı olarak, ilk iki parametre zorunludur. Diğer ikisi isteğe bağlıdır.

Template Literals

Ruby, python gibi diğer betik dillerini biliyorsanız bu başlık sizin için yeni bir konu olmayacaktır. Template Literals, ifade eklemeyi kolaylaştırmak için daha yeni sözdizimidir.

Template Literals, ifade eklemeyi kolaylaştırmak için daha yeni syntaxdır ve herhangi bir JS expressionu yürütmek için kullanılır.

Biraz örnek görelim

let name = "Jon Snow";
let msg = `My name is ${name}`;
console.log(msg);

let name = "Blog";
let msg = `Kerteriz ${name}`;
console.log(msg);

Çıktısı:

Kereriz Blog

Ayrıca çok satırlı dizeleriniz de olabilir.

let msg = `My name
is ${name}`;
console.log(msg);

Çıktısı:

My name
is Jon Snow

Diğer örneğe bakalım

let name = "Ismet";
let languages = () => {return "Ruby, Js, Java, Python"}
let msg = `My name is ${name}
My age is ${20+6}
And I code in ${languages()}`

Çıktısı:

My name is Ismet
My age is 26
And I code in Ruby, Js, Java, Python

Herhangi bir ifadeyi ve ayrıca çok satırlı dizeleri kolayca ekleyebilirsiniz.

Imports and Exports

ES6'daki modülleri import ve export etme, modern frontend kütüphanelerinde göreceğiniz kullanışlı özelliklerden biridir.

Peki ES6'da import ve export nasıl çalışır?

Exports, bazı değişkenleri, fonksiyonları veya sınıfları açıkça dışa aktarmak için modüllerde kullanılır. Yani bir değişkeni dışa aktarırsanız, diğer modüllerde kullanılabilir.

Imports, diğer modüllerden değişkenleri, işlevleri, sınıfları içe aktarmak için kullanılır.

Bir örnek görelim.

app.js

export let name = "Jon"
export let age = 23

index.js

import {name, age} from './app'
console.log(name);
console.log(age);

index.html

<script src="./index.js"></script>

Çıktısı:

Jon
23

Yukarıdaki örnekte name ve age olarak iki değişken tanımladık ve bunu dışa aktardık. Başka bir dosyada değişkenleri içe aktardık ve değerlerine eriştik.

Daha derine inelim:

app.js

export default const name = "Jon"

index.js

import name from './app.js'
console.log(name);

Çıktısı:

Jon

Yukarıdaki kodda, yeni bir default anahtar kelime kullandığımızı görebilirsiniz. Default değerler çoğunlukla, bir modülden tek bir değeri veya işlevi veya nesneyi dışa aktarmanız gerektiğinde kullanılır. Ve bir modülde yalnızca bir default değer olabilir.

Default değerler hakkında bir şey daha var. Bir modülde yalnızca bir default değer olacağından, import sırasında herhangi bir adı referans olarak kullanabilirsiniz.

Örneğin

import n from './app.js'
console.log(n);

Gördüğünüz gibi burada default değeri n olarak referans aldık.

Daha da derine inelim.

app.js

let a = 10;
let b = 2;
let sum = () => a+b;
export {a,b}
export default sum

index.js

import * as variables from './app'
import addition from './app' // default value
console.log(variables.a);
console.log(variables.b);
console.log(addition());

Çıktısı:

10
2
12

Yukarıdaki örnekte, iki değişkeni ve bir fonksiyonu dışa aktardığımızı görebilirsiniz. Ve tüm değişkenleri * kullanarak içe aktardık.

Burada import ederken hatırlanması gereken iki şey var.

  1. Değerleri import etmek için ***** kullanıyorsanız, içe aktarılan değerlere atıfta bulunacak bir alias isim kullanmanız gerekir. Örneğimizde variables ismini alias olarak kullandık.
  2. Değerleri import etmek için ***** kullanılması, default değeri içe aktarmaz. Ayrı olarak import etmeniz gerekir.
import addition, * as variables from './app'

Tek bir satırda default değeri ve diğer değerleri içe aktarmanız gerekiyorsa, yukarıdaki sözdizimini kullanabilirsiniz.

Destructuring Objects and Arrays


Destructuring , ES6'daki kullanışlı özelliklerden biridir. Ve kullanımı çok basittir.

Hadi bir örnek görelim.

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, lastName, age} = person

console.log(firstName);
console.log(lastName);
console.log(age);

Çıktısı:

Jon
Snow
23

Yukarıdaki kodda, birden fazla keye sahip bir nesne kişimiz olduğunu görebilirsiniz. Ve nesnenin kendisinden firstName, lastName, age (nesne anahtarlarıyla aynı olan) üç değişken oluşturduk. Basit bir deyişle, nesneden anahtarları çıkararak üç değişken oluşturduk.

Başka bir örnek görelim:

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName} = person

console.log(firstName);

Çıktısı:

Jon

Yukarıdaki örnekte, nesneden yalnızca gerekli değerleri çıkardığımızı görebilirsiniz.

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName: name, age} = person

console.log(name);
console.log(age);

Çıktısı:

Jon
23

Yukarıdaki örnekte, yeni bir name isimli değişken tanımladığımızı ve buna firstName atandığını görebilirsiniz.

Şimdide diziyi nasıl yok destruct edeceğimizi görelim.

let arr [1, 2, 3, 4]
const [a, b, c, d] = arr;

Umarım yukarıdaki kodu almışsınızdır. Oldukça basit. Bir dizinin her elemanını bir değişkene atadık.

Başka bir örnek görelim.

let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr

console.log(a);
console.log(b);
console.log(d);
console.log(e);

Çıktısı:

1
2
4
5

Yukarıdaki kodda dizinin üçüncü öğesini atladığımızı görebilirsiniz. Bunun dışında her şey önceki örnekle aynı.

Başka bir örnek daha görelim.

let person = {firstName: "Jon", lastName: "Snow", age: 23}
let displayName = ({firstName, lastName:last}) => {
  console.log(`${firstName} - ${last}`);
}

displayName(person);

Çıktısı:

Jon - Snow

İşte bu kadar basit bir başlıktı.

Extend and Super

OOP'da kodlama deneyiminiz varsa, extend ve super sizin için yeni konular değildir.

Extend, ana sınıftan alt sınıf oluşturmak için kullanılır. Alt sınıf, ana sınıfın tüm özelliklerini devralır ve ana sınıfın özelliklerini de değiştirebilir.

class Person{
 constructor(firstName, lastName, age) {
   this.firstName = firstName;
   this.lastName = lastName;
   this.age = age;
 }
 displayName() {
  return `${this.firstName} - ${this.lastName}`;
 }
}

class Employee extends Person {
 constructor(firstName, lastName, age, salary) {
  super(firstName, lastName, age);
  this.salary = salary;
 }
 displaySalary() {
  return `${this.salary}`;
 }
 displayName() {
  return super.displayName();
 }
 displayAge() {
  return this.age;
 }
}

let manager = new Employee("Jon", "Snow", 23, 100);
console.log(manager.displaySalary());
console.log(manager.displayName());
console.log(manager.displayAge());

Çıktısı:

100
Jon Snow
23

Yukarıdaki kodda, bir constructor ve basit bir fonksiyonla bir Person sınıfı tanımladığımızı görebilirsiniz.

Daha sonra Person'dan miras alınan bir alt sınıf olan başka bir Employee sınıfını tanımladık. Bunu başarmak için extend kullandık. Ve sonra üst sınıfın constructor'ını çağırmak için super anahtar sözcüğünü kullandık. Ayrıca üst sınıfta belirtilen yöntemi super kullanarak çağırdık.

Not: this anahtar kelimesini sadece super çağırdıktan sonra alt sınıfta kullanabilirsiniz. this anahtar kelimesini alt sınıfta super çağırmadan önce kullanırsanız, ReferenceError alırsınız.

Yani, yukarıdaki kodda üç şeyi başardık

  1. Ana sınıftan bir alt sınıf oluşturmak için extend kullandık.
  2. Üst sınıfın yapıcısını çağırmak için super kullandık.
  3. Üst sınıfta tanımlanan yöntemi çağırmak için super kullandık.

Böylece modern Javascript'e giriş derslerimizi tamamlamış bulunuyoruz. Bundan sonra React dersleriyle devam edeceğiz. Siz de blogu takipte kalarak derslerden haberdar olabilirsiniz.