JavaScript

Modern JavaScript, web geliştirme dünyasında son yıllarda ortaya çıkan ve hızla yaygınlaşan bir kavramdır. Bu kavram, JavaScript dili için son zamanlarda ortaya çıkan özellikler, araçlar ve kütüphanelerle ilgilidir.<h3>Modern JavaScript konuları arasında öne çıkanlar şunlardır:</h3><h2>Arrow Function</h2>JavaScript dili için yayınlanan ES6 sürümü ile birlikte, kodların yazılması ve okunması daha kolay hale gelmiştir. Bunlardan biri de arrow fonksiyonlarıdır. Arrow fonksiyonlar, kodların daha okunaklı ve anlaşılır olmasını sağlar.Öncelikle, eski JavaScript sürümlerinde fonksiyonları tanımlarken kullandığımız "function" anahtar kelimesi, arrow fonksiyonlar ile "=&gt;" şeklinde tanımlanır. Aşağıdaki örnekte, arrow fonksiyon ile "hello" yazdıran bir fonksiyon tanımlanmıştır:<pre><code>const sayHello = () =&gt; {
 console.log("hello");
}</code></pre>Bu kod, eski JavaScript sürümlerinde şöyle yazılabilirdi:<pre><code>const sayHello = function() {
 console.log("hello");
}</code></pre>Arrow fonksiyonlar, tek bir ifade içeren fonksiyonlar için daha da kısa yazılım sunar. Örneğin, yukarıdaki örnekte "console.log("hello");" ifadesi tek bir satırda yazılabilir. Bu durumda, fonksiyon tanımı şöyle olur:<pre><code>const sayHello = () =&gt; console.log("hello");</code></pre>Arrow fonksiyonlar, parametre alan fonksiyonlar için de kullanılabilir. Örneğin, aşağıdaki örnekte, "name" parametresi alan ve "Hello, [name]" yazdıran bir fonksiyon tanımlanmıştır:<pre><code>const sayHello = (name) =&gt; {
 console.log(`Hello, ${name}`);
}</code></pre>Bu kod, eski JavaScript sürümlerinde şöyle yazılabilirdi:<pre><code>const sayHello = function(name) {
 console.log(`Hello, ${name}`);
}</code></pre>Arrow fonksiyonlar, kodların okunması ve yazılması açısından daha anlaşılır ve kolay hale getirir. Ayrıca, this anahtar kelimesi için de kolay kullanım sağlar. Bu nedenle, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır.<h2>Array Methods</h2>Modern JavaScript ile birlikte, birçok yeni ve kullanışlı array methodları ortaya çıkmıştır. Bu methodlar, array işlemlerini daha kolay ve hızlı hale getirir. Aşağıda, en yaygın kullanılan bazı array methodlarının örnekleri verilmektedir:<ol><li>map() : Bu method, array içindeki her eleman için belirli bir işlem yapar. Örneğin, aşağıdaki örnekte, array içindeki sayıların karesini alan bir fonksiyon tanımlanmıştır:<pre><code>const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(x =&gt; x * x);
console.log(squares); // [1, 4, 9, 16, 25]</code></pre></li><li>filter() : Bu method, array içinde belirli kriterlere uyan elemanları seçer. Örneğin, aşağıdaki örnekte, array içindeki çift sayıları seçen bir fonksiyon tanımlanmıştır:<pre><code>const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(x =&gt; x % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]</code></pre></li><li>reduce() : Bu method, array içindeki elemanları tek bir değere dönüştürür. Örneğin, aşağıdaki örnekte, array içindeki sayıların toplamını alan bir fonksiyon tanımlanmıştır:<pre><code>const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, x) =&gt; acc + x, 0);
console.log(sum); // 15</code></pre></li><li>find() : Bu method, array içinde ilk kriterlere uyan elemanı döndürür. Örneğin, aşağıdaki örnekte, array içinde ilk çift sayıyı döndüren bir fonksiyon tanımlanmıştır:<pre><code>const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const firstEvenNumber = numbers.find(x =&gt; x % 2 === 0);
console.log(firstEvenNumber); // 2</code></pre></li><li>some() : Bu method, array içinde belirli bir kriterle uyan eleman var mı yok mu kontrol eder. Örneğin, aşağıdaki örnekte, array içinde 10'dan yüksek bir sayı var mı kontrol eden bir fonksiyon tanımlanmıştır:<pre><code>const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const isBigNumberExist = numbers.some(x =&gt; x &gt; 10);
console.log(isBigNumberExist); // false</code></pre></li><li>every() : Bu method, array içindeki tüm elemanların belirli bir kriterle uyup uymadığını kontrol eder. Örneğin, aşağıdaki örnekte, array içindeki tüm sayıların çift olup olmadığını kontrol eden bir fonksiyon tanımlanmıştır:<pre><code>const numbers = [2, 4, 6, 8, 10];
const isAllEven = numbers.every(x =&gt; x % 2 === 0);
console.log(isAllEven); // true</code></pre></li></ol>Bu örnekler, modern JavaScript ile gelen array methodlarının nasıl kullanılabileceğini göstermektedir. Bu methodlar, array işlemlerini daha kolay ve hızlı hale getirir ve kodların daha okunaklı ve anlaşılır olmasını sağlar.<h2>Spread operator</h2>Spread operator, array veya object içindeki elemanların başka bir array veya object içine kopyalanmasını sağlar. Örneğin, aşağıdaki örnekte, bir array içindeki elemanlar başka bir array içine kopyalanmıştır:<pre><code>const numbers1 = [1, 2, 3];
const numbers2 = [...numbers1, 4, 5, 6];
console.log(numbers2); // [1, 2, 3, 4, 5, 6]</code></pre>Ayrıca, spread operator ile bir arrayin elemanlarını bir fonksiyona veya metoda parametre olarak geçirmek için kullanılabilir. Örneğin, aşağıdaki örnekte, bir array içindeki elemanlar bir fonksiyonun parametreleri olarak geçirilmiştir:<pre><code>const numbers = [1, 2, 3];
const add = (x, y, z) =&gt; x + y + z;
console.log(add(...numbers)); // 6</code></pre>Spread operator ile bir objectin içindeki key-value pair'larının başka bir object içine kopyalanmasını sağlar. Örneğin, aşağıdaki örnekte, bir object içindeki key-value pair'lar başka bir object içine kopyalanmıştır:<pre><code>const obj1 = {name: "John", age: 30};
const obj2 = {...obj1, job: "Developer"};
console.log(obj2); // { name: "John", age: 30, job: "Developer" }</code></pre>Spread operator ile bir objectin içindeki key-value pair'larının başka bir object içine kopyalanmasını sağlar. Örneğin, aşağıdaki örnekte, obj1 içindeki key-value pair'lar obj2 içine kopyalanmıştır. obj2 içinde aynı key'lere sahip key-value pair'ların üstüne yazılmıştır.<pre><code>const obj1 = {name: "John", age: 30};
const obj2 = {name: "Mike", job: "Developer", ...obj1};
console.log(obj2); // { name: "John", job: "Developer", age: 30 }</code></pre>Spread operator, array ve object manipülasyonlarını daha kolay hale getirir ve kodların daha okunaklı ve anlaşılır olmasını sağlar. Bu nedenle, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır. Ayrıca spread operator, destructuring ile birlikte kullanıldığında daha da güçlü hale gelir. Örneğin, aşağıdaki örnekte, bir object içindeki belirli key-value pair'ların destructuring ile çıkarılması ve başka bir object içine kopyalanması işlemi gerçekleştirilmiştir:<pre><code>const obj = {name: "John", age: 30, job: "Developer"};
const {name, age} = obj;
const newObj = {name, age, location: "New York"};
console.log(newObj); // { name: "John", age: 30, location: "New York" }</code></pre>Bu örnekler, spread operatorun nasıl kullanılabileceğini ve array ve object manipülasyonlarını nasıl kolaylaştırdığını göstermektedir. Bu nedenle, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır.<h2>Destructuring</h2>Modern JavaScript ile birlikte, destructuring özellikle object ve array içindeki verilerin çekilmesi ve kullanılması için çok kullanışlı bir araç haline gelmiştir.Destructuring, object içindeki belirli key-value pair'ların çekilmesini ve değişkenlere atanmasını sağlar. Örneğin, aşağıdaki örnekte, bir object içindeki "name" ve "age" key'lerinin değerleri değişkenlere atanmıştır:<pre><code>const obj = {name: "John", age: 30};
const {name, age} = obj;
console.log(name); // "John"
console.log(age); // 30</code></pre>Ayrıca, destructuring ile object içindeki key'lere değişik isimler verebiliriz. Örneğin, aşağıdaki örnekte, obj içindeki "name" key'inin değeri "firstName" değişkenine atanmıştır.<pre><code>const obj = {name: "John", age: 30};
const {name: firstName} = obj;
console.log(firstName); // "John"</code></pre>Destructuring, array içindeki elemanların çekilmesini ve değişkenlere atanmasını sağlar. Örneğin, aşağıdaki örnekte, bir array içindeki ilk ve son elemanlar değişkenlere atanmıştır:<pre><code>const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]</code></pre>Destructuring, object ve array içindeki verilerin çekilmesini ve kullanılmasını kolaylaştırır ve kodların daha okunaklı ve anlaşılır olmasını sağlar. Bu nedenle, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır.Ayrıca destructuring ile spread operator birlikte kullanıldığında daha güçlü hale gelir. Örneğin, aşağıdaki örnekte, bir object içindeki belirli key-value pair'ların destructuring ile çıkarılması ve başka bir object içine kopyalanması işlemi gerçekleştirilmiştir:<pre><code>const obj = {name: "John", age: 30, job: "Developer"};
const {name, age} = obj;
const newObj = {name, age, location: "New York", ...obj};
console.log(newObj); // { name: "John", age: 30, location: "New York", job: "Developer" }</code></pre>Bu örnekte, obj içindeki "name" ve "age" key-value pair'ları destructuring ile çıkarılmış ve newObj içine kopyalanmıştır. Aynı zamanda spread operator kullanarak obj'nin geri kalan key-value pair'ları da newObj içine kopyalanmıştır. Bu şekilde, object içindeki verilerin çekilmesi ve kullanılması daha kolay hale gelir.Destructuring ve spread operator, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır ve kodların daha okunaklı ve anlaşılır olmasını sağlar. Bu yüzden, bu özelliklerin öğrenilmesi ve uygulanması önerilir.<h2>Maps</h2>Modern JavaScript ile birlikte, Map yapısı özellikle verilerin saklanması ve erişilmesi için çok kullanışlı bir araç haline gelmiştir. Map yapısı, key-value pair'ları saklar ve bu pair'ları hızlı bir şekilde erişebilir.Map yapısını oluşturmak için <code>new Map()</code> kullanılır. Örneğin, aşağıdaki örnekte, bir Map yapısı oluşturulmuş ve key-value pair'ları eklenmiştir:<pre><code>const map = new Map();
map.set("name", "John");
map.set("age", 30);
map.set("job", "Developer");</code></pre>Map yapısındaki verileri erişmek için <code>get()</code> methodu kullanılır. Örneğin, aşağıdaki örnekte, "name" key'inin değeri erişilmiştir:<pre><code>console.log(map.get("name")); // "John"</code></pre>Map yapısındaki verileri silmek için <code>delete()</code> methodu kullanılır. Örneğin, aşağıdaki örnekte, "job" key'inin değeri silinmiştir:<pre><code>map.delete("job");
console.log(map); // Map { 'name' =&gt; 'John', 'age' =&gt; 30 }</code></pre>Map yapısındaki verileri iterate etmek için <code>forEach()</code> methodu kullanılır. Örneğin, aşağıdaki örnekte, map içindeki tüm key-value pair'lar yazdırılmıştır:<pre><code>map.forEach((value, key) =&gt; console.log(`${key}: ${value}`));</code></pre>Map yapısı, verilerin saklanması ve erişilmesi için daha kolay ve hızlı bir yol sunar. Ayrıca, Map yapısı ile key-value pair'ların değerleri değiştirilebilir ve silinebilir. Bu nedenle, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır.<h2>Sets</h2>Modern JavaScript ile birlikte, Set yapısı özellikle unique değerlerin saklanması ve erişilmesi için çok kullanışlı bir araç haline gelmiştir. Set yapısı, unique değerleri saklar ve bu değerlere hızlı bir şekilde erişebilir.Set yapısını oluşturmak için <code>new Set()</code> kullanılır. Örneğin, aşağıdaki örnekte, bir Set yapısı oluşturulmuş ve değerler eklenmiştir:<pre><code>const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(3); // duplicate value will not be added</code></pre>Set yapısındaki verileri erişmek için <code>has()</code> methodu kullanılır. Örneğin, aşağıdaki örnekte, 2 değerinin set içinde olup olmadığı kontrol edilmiştir:<pre><code>console.log(set.has(2)); // true
console.log(set.has(4)); // false</code></pre>Set yapısındaki verileri silmek için <code>delete()</code> methodu kullanılır. Örneğin, aşağıdaki örnekte, 2 değeri silinmiştir:<pre><code>set.delete(2);
console.log(set); // Set { 1, 3 }</code></pre>Set yapısındaki verileri iterate etmek için <code>forEach()</code> methodu kullanılır. Örneğin, aşağıdaki örnekte, set içindeki tüm değerler yazdırılmıştır:<pre><code>set.forEach(value =&gt; console.log(value));</code></pre>Set yapısı, unique değerlerin saklanması ve erişilmesi için daha kolay ve hızlı bir yol sunar. Ayrıca, Set yapısı ile değerlerin kontrolü ve silinmesi daha kolay hale gelir.<h2>Class</h2>Modern JavaScript ile birlikte, Class yapısı özellikle object-oriented programlama konseptlerinin uygulanması için çok kullanışlı bir araç haline gelmiştir. Class yapısı, object'lerin oluşturulması, inheritance ve polymorphism gibi temel OOP konseptlerini destekler.Class yapısını oluşturmak için <code>class</code> anahtar kelimesi kullanılır. Örneğin, aşağıdaki örnekte, "Person" sınıfı oluşturulmuş ve "name" ve "age" değişkenleri tanımlanmıştır:<pre><code>class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}</code></pre>Class yapısından object'ler oluşturmak için <code>new</code> anahtar kelimesi kullanılır. Örneğin, aşağıdaki örnekte, "Person" sınıfından "john" isimli bir object oluşturulmuştur:<pre><code>const john = new Person("John", 30);
console.log(john.name); // "John"
console.log(john.age); // 30</code></pre>Class yapısı içinde methodlar tanımlanabilir. Örneğin, aşağıdaki örnekte, "Person" sınıfına "greet" methodu eklenmiştir:<pre><code>class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
 greet() {
 console.log(`Hello, my name is ${this.name}`);
 }
}
const john = new Person("John", 30);
john.greet(); // "Hello, my name is John"</code></pre>Class yapısı, object-oriented programlama konseptlerinin uygulanmasını kolaylaştırır. Ayrıca, inheritance ve polymorphism gibi temel OOP konseptlerini destekler. Bu nedenle, modern JavaScript geliştirmelerinde sıklıkla kullanılmaktadır.Modern JavaScript, sürekli gelişen ve evrim geçiren bir dildir. Bu saydıklarımız şu an için kullanılan özelliklerdir.

Modern JavaScript

JavaScript, bir nesne yönelimli programlama (OOP) dili olarak kullanılabilir. OOP, bir programlama yöntemi olarak, gerçek dünya nesnelerinin benzetimini kullanarak, kod yazmayı kolaylaştırır. Bu yazıda, JavaScript'te OOP temellerini inceleyeceğiz.JavaScript'te temel nesne yönelimli programlama (OOP) terimleri şunlardır:<h2>Object</h2>JavaScript'te her şey bir nesnedir. Nesneler, anahtar-değer çiftleri olarak tanımlanır ve özellikleri ve metotları içerebilir. Örneğin, aşağıdaki kod, bir "Araba" nesnesi oluşturur ve "renk" ve "hız" özelliklerini ve "hızlandır" metodunu içerebilir<pre><code>let araba = {
 renk: "siyah",
 hız: 0,
};
console.log(araba.renk); // "siyah"
console.log(araba.hız); // 0
console.log(araba.hız); // 10</code></pre>Bu kod bloğunda, nesne literaller kullanılarak oluşturuldu. Bu nesnenin özellikleri (renk, hız) anahtar-değer çiftleri olarak tanımlandı. Özellikleri kullanarak nesnenin durumunu sorgulayabilir ve metotları çağırarak nesnenin davranışlarını değiştirebiliriz. Bu kod bloğunda, araba adında bir nesne oluşturuldu. Bu nesnenin renk özelliği "siyah" ve hız özelliği 0'dır.<h2>Property (Özellik)</h2>JavaScript'te nesneler içinde bulunan özelliklere "property" denir. Propertyler, nesnenin özellikleri, bilgileri, durumları gibi bilgileri saklar. Örnek olarak;<pre><code>let araba = {
 renk: "siyah",
 hız: 0,
};
console.log(araba.renk); // "siyah"
console.log(araba.hız); // 0</code></pre>Bu örnekte, araba nesnesinin içinde "renk" ve "hız" adında iki property tanımlanmıştır. Bu propertyler araba nesnenin rengini ve hızını saklamaktadır. Örnekte gösterildiği gibi console.log(araba.renk) ve console.log(araba.hız) ile bu propertylerin değerlerine erişebiliriz. Bu örnekte gösterildiği gibi, propertyler nesnelerin içinde bulunan özelliklerdir ve nesnelerin özellikleri, bilgileri, durumları gibi bilgileri saklamak için kullanılır.<h2>Method</h2>Nesnelerin içinde bulunan işlevlerdir. Methodlar, nesnenin özellikleri ile etkileşim kurabilecek ve nesnenin davranışlarını belirleyebilecektir. Örnek olarak;<pre><code>let araba = {
 renk: "siyah",
 hız: 0,
 hızlandır: function() {
 this.hız += 10;
 }
};
araba.hızlandır();
console.log(araba.hız); // 10</code></pre>Bu örnekte, araba nesnesinin içinde "hızlandır" adında bir method tanımlanmıştır. Bu method, araba nesnenin "hız" özelliğini artırmak için kullanılmıştır. araba.hızlandır() methodunun çağrılması sonucunda araba nesnenin hızı 10 arttırılmıştır. Bu örnekte gösterildiği gibi, methodlar nesnelerin özellikleri ile etkileşim kurarak nesnenin davranışlarını belirleyebilir. Methodlar nesnelerin içinde bulunan işlevlerdir ve nesnelerin davranışlarını belirleyebilmek için kullanılır.<h3>Constructor</h3>JavaScript'de Constructor, bir sınıfın yeni bir örneği oluşturulduğunda çağırılan bir metoddur. Constructor metodu, nesnenin özelliklerinin veya diğer özelliklerinin başlangıç değerlerini ayarlar.JavaScript'te ES5 versiyonunda sınıflar function ve prototype kullanarak tanımlanır. Constructor fonksiyonu, sınıfın tanımlandığı function içerisinde tanımlanır. Örnek olarak :<pre><code>function Araba(renk) {
 this.renk = renk;
 this.hız = 0;
}

Araba.prototype.hızlandır = function() {
 this.hız += 10;
};

let araba = new Araba("siyah");
console.log(araba.renk); // "siyah"
console.log(araba.hız); // 0
</code></pre>Bu örnekte, Araba sınıfının constructor fonksiyonu ile renk ve hız özellikleri tanımlanmıştır. Sonrasında <code>Araba.prototype.hızlandır = function() { this.hız += 10;}</code> ile hızlandır metodu sınıfın prototype'ına eklenmiştir.Son olarak <code>let araba = new Araba("siyah");</code> ile nesne oluşturuldu. Bu nesnenin renk özelliği siyah ve hız özelliği 0 olarak tanımlanmıştır.JavaScript'te ES6 versiyonunda class yapısı kullanılarak oluşturulduğunda, constructor metodu ilk olarak çalışır. Constructor metodu, sınıf içerisinde nesnenin özelliklerinin tanımlanmasını sağlar. Örneğin, aşağıdaki kod bloğunda "Araba" sınıfının constructor metodu ile renk özelliği tanımlanmıştır:<pre><code>class Araba {
 constructor(renk) {
 this.renk = renk;
 }
}
let araba = new Araba("siyah");
console.log(araba.renk); // "siyah"</code></pre><h2>Class</h2>ES6 ile gelen bir yapıdır. Sınıflar, nesnelerin oluşturulması için kullanılan bir şablon olarak düşünülebilir. Sınıflar, özellikleri ve metotları içerebilir ve nesneler oluşturulduğunda bu özellikleri ve metotları kullanır. Aşağıdaki kod, bir "Araba" sınıfı oluşturur ve "hızlandır" metodunu sınıfa ekler:<pre><code>class Araba {
 constructor(renk) {
 this.renk = renk;
 this.hız = 0;
 }

 hızlandır() {
 this.hız += 10;
 }
}
let araba = new Araba("siyah");
console.log(araba.renk); // "siyah"
console.log(araba.hız); // 0
araba.hızlandır();
console.log(araba.hız); // 10</code></pre>Bu kod bloğunda, "Araba" sınıfı class anahtar sözcüğü ile tanımlanmıştır. Sınıf içerisinde constructor metodu ile renk ve hız özellikleri tanımlanmıştır ve hızlandır metodu ile hız özelliğine 10 eklenir. Ayrıca bir araba nesnesi oluşturuldu ve "siyah" renk değeri ile başlatıldı. Oluşturulduğunda, araba nesnesi "Araba" sınıfının metotlarını ve özelliklerini kullanabilecektir. Bu örnekte, sınıf yapısı kullanılarak Araba nesnesi oluşturuldu. Bu nesnenin renk ve hız özellikleri tanımlandı ve hızlandır metodu ile hız özelliğine 10 eklendi.Bu örnekte class yapısı kullanılarak oluştuturulan nesnenin özellikleri ve metotları kullanılabilir hale getirildi.<h3></h3>Bu örnekte, Araba nesnesi oluşturulduğunda constructor metodu çalıştı ve "siyah" renk değeri ile araba nesnesinin renk özelliği tanımlandı. Constructor metodu, sınıf içerisinde nesnenin özelliklerinin tanımlanmasını sağlar ve nesnenin oluşturulduğunda ilk olarak çalışır. Bu sayede nesnenin özellikleri tanımlanmış ve kullanılabilir hale gelir.<h2>Instantiation (Örnekleme)</h2>JavaScript'te bir sınıfın bir nesnesi olarak oluşturulmasına "instantiation" denir. Instantiation ile sınıfın özellikleri ve metotları kullanılabilir hale gelir. Örnek olarak;<pre><code>class Araba {
 constructor(renk) {
 this.renk = renk;
 this.hız = 0;
 }
 hızlandır() {
 this.hız += 10;
 }
}
let araba = new Araba("siyah");
console.log(araba.renk); // "siyah"
console.log(araba.hız); // 0
araba.hızlandır();
console.log(araba.hız); // 10</code></pre>Bu örnekte, Araba sınıfı tanımlanmıştır. Bu sınıfın constructor metodu ile renk özelliği tanımlanmıştır. Ve hızlandır() methodu ile hız özelliği arttırılmıştır. Sonrasında let araba = new Araba("siyah"); ile nesne oluşturuldu. Bu nesnenin renk özelliği siyah ve hız özelliği 0 olarak tanımlanmıştır.Bu örnekte gösterildiği gibi, instantiation ile bir sınıfın bir nesnesi oluşturuldu. Bu nesne kullanılarak sınıfın özellikleri ve metotları kullanılabilir hale geldi.<h2>Inheritance (Kalıtım)</h2>Bir sınıfın başka bir sınıftan kalıtım almasıdır. Bu sayede sınıf, kalıtım aldığı sınıfın metotlarını ve özelliklerini kullanabilir. JavaScript'te class yapısı ile kalıtım yapmak için "extends" anahtar sözcüğü kullanılır. Örneğin, aşağıdaki kod bloğunda "Araba" sınıfı "MotorluAraba" sınıfından kalıtım almıştır ve "motor" özelliği eklenmiştir:<pre><code>class Araba {
 constructor(renk) {
 this.renk = renk;
 }
}
class MotorluAraba extends Araba {
 constructor(renk, motor) {
 super(renk);
 this.motor = motor;
 }
}
let araba = new MotorluAraba("siyah", "V8");
console.log(araba.renk); // "siyah"
console.log(araba.motor); // "V8"</code></pre>Bu kod bloğunda, "MotorluAraba" sınıfı "Araba" sınıfından kalıtım almıştır ve "motor" özelliği eklenmiştir. "Araba" sınıfının özellikleri ve metotları "MotorluAraba" sınıfı tarafından kullanılabilir hale gelir. Bu sayede "Araba" sınıfının yazılması ve bakımı daha kolay hale gelir. Ayrıca "super" anahtar sözcüğü ile kalıtım alınan sınıfın constructor metodu çağırılır ve kalıtım alınan sınıfın özellikleri tanımlanabilir.Bu örnekte, Araba sınıfı tanımlanmış ve MotorluAraba sınıfı Araba sınıfından kalıtım almıştır. Bu sayede MotorluAraba sınıfı Araba sınıfının özelliklerini ve metotlarını kullanabildi. Ayrıca MotorluAraba sınıfına motor özelliği eklendi. Bu kalıtım sayesinde MotorluAraba sınıfının yazılması ve bakımı daha kolay hale geldi.<h2>Encapsulation (Kapsülleme)</h2>Nesnelerin özelliklerinin ve metotlarının dışarıdan erişilmemesi için kullanılan yapıdır. Bu sayede nesnenin özellikleri ve metotları güvenli bir şekilde kullanılabilir. JavaScript'te encapsulation, "private" ve "public" anahtar sözcükleri ile uygulanabilir. Örneğin, aşağıdaki kod bloğunda "Araba" sınıfı "renk" özelliği için "private" ve "hızlandır" metodu için "public" tanımlaması yapılmıştır:<pre><code>class Araba {
 #renk;
 constructor(renk) {
 this.#renk = renk;
 }
 getRenk() {
 return this.#renk;
 }
 setRenk(renk) {
 this.#renk = renk;
 }
 hızlandır() {
 this.hız += 10;
 }
}
let araba = new Araba("siyah");
console.log(araba.getRenk()); // "siyah"
araba.setRenk("kırmızı");
console.log(araba.getRenk()); // "kırmızı"
araba.hızlandır();</code></pre>Bu örnekte, Araba sınıfı oluşturuldu ve renk özelliği için private tanımlaması yapıldı. Bu sayede renk özelliği sadece sınıf içerisinde kullanılabilir hale geldi. Ayrıca hızlandır metodu public tanımlandı ve dışarıdan erişilebilir hale geldi. Bu encapsulation yapısı ile nesnenin özellikleri ve metotları güvenli bir şekilde kullanılabilir ve dışarıdan erişilmesi engellenir.<h2>Polymorphism (Çok Biçimlilik)</h2>JavaScript'de Polymorphism (çok biçimlilik), aynı metodun farklı tipte nesneler için farklı işlevler yerine getirebildiği bir kavramdır. Bu sayede, kodun daha esnek ve genel olarak kullanılabilir hale gelmesi sağlanır.JavaScript'de polymorphism için "overriding" ve "overloading" gibi yöntemler kullanılabilir.<ul><li>Overriding: Bir sınıfın alt sınıfı, alt sınıfın ihtiyacına göre aynı isimli bir metodu farklı bir şekilde tanımlayabilir. Bu sayede, alt sınıfın metodu üst sınıfın metodunu geçersiz kılar ve kullanıcının beklentilerine göre daha uygun bir işlev yerine getirir.</li></ul><pre><code>class Shape {
 draw() {
 console.log("Şekil çiziliyor.");
 }
}
class Circle extends Shape {
 draw(radius) {
 console.log(`${radius} radiuslu bir daire çiziliyor.`);
 }
}
let shape = new Shape();
let circle = new Circle();
shape.draw(); // "Şekil çiziliyor."
circle.draw(5); // "5 radiuslu bir daire çiziliyor."</code></pre><ul><li>Overloading: Aynı metod adı ile farklı parametre sayısı veya tipi ile metodlar tanımlanabilir. Bu sayede metodun farklı ihtiyaçlar için farklı işlevler yerine getirebildiği gibi, kodun daha okunaklı ve anlaşılır hale gelir. JavaScript dilinde bu özellik yer almaz ancak yazılımcılar kendileri bu yöntemi kullanabilir. Örnek olarak:</li></ul><pre><code>class Calculator {
 add(a, b) {
 return a + b;
 }
 add(a, b, c) {
 return a + b + c;
 }
}

let calculator = new Calculator();
console.log(calculator.add(1, 2)); // Output: 3
console.log(calculator.add(1, 2, 3)); // Output: 6</code></pre>JavaScript polymorphism özellikleri ile, kodun daha esnek ve genel olarak kullanılabilir hale gelmesi sağlanır. Bu sayede kodun okunaklılığı ve anlaşılırlığı arttırılır.<h2>Abstraction (Soyutlama)</h2>Sınıfların, nesnelerin oluşturulduğu sınıfın sadece gerekli olan özelliklerini ve metotlarını göstermesidir. Örnek olarak;<pre><code>class Database {
 constructor(data) {
 this._data = data;
 }
 getData() {
 return this._data;
 }
 setData(value) {
 this._data = value;
 }
}

class DataController extends Database {
 constructor(data) {
 super(data);
 }
 getData() {
 return "Data: " + super.getData();
 }
}

let dataController = new DataController("Database Data");
console.log(dataController.getData()); // "Data: Database Data"</code></pre>Bu örnekte, Database sınıfı içerisinde sadece _data özelliği ve getData ve setData metotları tanımlanmıştır. DataController sınıfı ise bu sınıftan kalıtım almıştır ve sadece getData metodunu kendine özgü olarak tanımlamıştır. Bu özellikle, sadece gerekli olan özellikleri ve metotları göstererek sınıflar arasındaki bağımlılığı azaltmıştır.Abstraction, sınıfların sadece gerekli olan özelliklerini ve metotlarını göstermesi ile elde edilen bir yapıdır. Bu sayede kodun okunabilirliği ve anlaşılabilirliği arttırılır. Bu yapı ile sınıflar arasında daha az bağımlılık oluşur ve sadece gerekli olan özellikler ve metotlar kullanılır.Bu terimler JavaScript'te OOP kavramlarının temelini oluşturur ve nesne yönelimli programlamada sıklıkla kullanılır.<div data-youtube-video=""><iframe class="mx-auto w-full rounded" width="840" height="472.5" allowfullscreen="true" autoplay="false" disablekbcontrols="false" enableiframeapi="false" endtime="0" ivloadpolicy="0" loop="false" modestbranding="false" origin="" playlist="" src="https://www.youtube.com/embed/dNBEOFXAlbI" start="0"></iframe></div>

JavaScript'te Nesne Yönelimli Programlama

Asenkron Javascript programlama, işlemlerin tamamlanması için beklemek yerine, işlemler sırasında diğer işlemlerin devam etmesine izin veren bir programlama yaklaşımıdır. Bu yaklaşım, özellikle web uygulamaları gibi işlemlerinin uzun sürebileceği durumlarda kullanıcı deneyimini geliştirmek için sıkça kullanılır.Asenkron Javascript'de callback fonksiyonları, işlem tamamlandığında çağrılan fonksiyonlardır. Bir işlem tamamlandığında, geri arama fonksiyonu otomatik olarak çağrılır ve işlem sonucu geri döndürülür. Bu sayede, işlem sırasında diğer işlemler devam ederken, tamamlanan işlemin sonucu diğer işlemler tarafından kullanılabilir.Callback fonksiyonları, işlemleri bir sonraki adıma devretmek için kullanılır. Örneğin, bir dosyanın okunması gibi işlemler, işlem tamamlandığında geri arama fonksiyonu çağrılarak sonucun işlenmesini sağlar.Aşağıdaki örnek, bir callback fonksiyonunun nasıl kullanılabileceğini göstermektedir.<pre><code>function sayHello(name, callback) {
 console.log(`Merhaba, ${name}!`);
 callback();
}

function goodbye() {
 console.log('Görüşmek üzere!');
}

sayHello('Ahmet', goodbye);</code></pre>Bu örnekte, <code>sayHello</code> fonksiyonu <code>name</code> adında bir parametre alır ve bu parametreyi kullanarak bir "Merhaba" mesajı yazdırır. Ardından, <code>callback</code> parametresi aracılığıyla bir fonksiyon çağrılır.<code>goodbye</code> fonksiyonu, <code>callback</code> parametresi aracılığıyla <code>sayHello</code> fonksiyonuna geçirilir ve <code>sayHello</code> fonksiyonu içinde çağrılır. <code>goodbye</code> fonksiyonu, "Görüşmek üzere!" mesajını yazdırır.Bu örnekte, <code>goodbye</code> fonksiyonu bir callback fonksiyonudur. <code>sayHello</code> fonksiyonu, işlem tamamlandığında çağrılacak bir fonksiyonu almak için bir parametre kullanır. Bu sayede, <code>sayHello</code> fonksiyonu tamamlandığında <code>goodbye</code> fonksiyonu otomatik olarak çağrılır ve "Görüşmek üzere!" mesajı yazdırılır.Özetle, callback fonksiyonları, bir işlem tamamlandığında otomatik olarak çağrılan fonksiyonlardır ve işlem sırasında diğer işlemler devam ederken işlem sonucunu işlemek için kullanılır.<h2>Ajax ve Http İstekleri</h2>Web uygulamaları, sayfayı yenilemeden arka planda veri göndermek ve almak için Ajax kullanır. Ajax, Asenkron Javascript ve XML (Extensible Markup Language) olarak adlandırılan teknolojilerin birleşimidir. Ajax, web sayfalarının daha dinamik hale gelmesini sağlar ve kullanıcıların sayfayı yenilemeden veri gönderip almasına izin verir.Ajax, HTTP(S) isteklerini kullanarak veri gönderip alır. HTTPS, Hyper Text Transfer Protocol Secure'in kısaltmasıdır ve web uygulamalarında güvenli iletişim için kullanılır. HTTPS, verilerin şifrelenerek gönderilmesini sağlar ve kullanıcıların verilerinin güvenli bir şekilde gönderilip alınmasını sağlar.Ajax, web uygulamalarında kullanılan birçok farklı HTTP(S) isteği türü vardır. Bunlar arasında GET, POST, PUT ve DELETE istekleri bulunur.<ul><li>GET: Sunucudan veri almak için kullanılır.</li><li>POST: Sunucuya veri göndermek için kullanılır.</li><li>PUT: Sunucudaki mevcut verileri güncellemek için kullanılır.</li><li>DELETE: Sunucudan veri silmek için kullanılır.</li></ul>Ajax istekleri, callback fonksiyonları kullanılarak işlenir. Ajax isteği gönderildiğinde, sunucudan yanıt alınana kadar diğer işlemler devam eder. Yanıt alındığında, belirtilen bir geri arama fonksiyonu otomatik olarak çağrılır ve yanıtın işlenmesine izin verir.Örneğin, aşağıdaki kod XMLHttpRequest nesnesi oluşturur ve sunucuya bir GET isteği yapar:<pre><code>const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.onload = function() {
 if (xhr.status === 200) {
 console.log(xhr.responseText);
 } else {
 console.log('Hata oluştu: ' + xhr.status);
 }
};
xhr.send();</code></pre>Bu örnekte, XMLHttpRequest nesnesi oluşturulur ve sunucuya bir GET isteği yapmak için <code>open</code> fonksiyonu kullanılır. İsteğin gönderildikten sonra, sunucudan yanıt gelene kadar diğer işlemler devam eder. Yanıt geldiğinde, <code>onload</code> fonksiyonu otomatik olarak çağrılır ve yanıtın işlenmesine izin verir.Örneğin, yukarıdaki örnekte, yanıtın durumu kontrol edilir ve <code>200</code> durum kodu alındıysa, yanıtın içeriği <code>xhr.responseText</code> aracılığıyla alınır ve konsola yazdırılır. Aksi takdirde, bir hata mesajı yazdırılır.Ajax istekleri sırasında hatalar oluşabilir. Örneğin, sunucu erişilemez olduğunda veya yanıtta hatalar olduğunda hatalar oluşabilir. Bu hataları yakalamak için, <code>onerror</code> fonksiyonu kullanılabilir:<pre><code>xhr.onerror = function() {
 console.log('İstek hatası');
};</code></pre>HTTPS istekleri, XMLHttpRequest nesnesinin <code>open</code> fonksiyonuna HTTPS URL'si vererek yapılabilir:<pre><code>xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');</code></pre>Özetle, Ajax ve HTTPS istekleri, XMLHttpRequest nesnesi kullanılarak gönderilir ve sunucudan yanıt alındığında, geri arama fonksiyonları kullanılarak yanıtın işlenmesi sağlanır.<h2>JSON Nedir?</h2>JSON (JavaScript Object Notation), web uygulamaları arasında veri alışverişi yapmak için kullanılan bir veri biçimidir. JSON, kolay okunabilir, hafif ve kolayca işlenebilir bir metin biçimidir. Bu nedenle, modern web uygulamalarında sıkça kullanılmaktadır.JSON, JavaScript nesneleri ve dizileri temel alınarak oluşturulmuştur. JSON verileri, anahtar-değer çiftleri (key-value pairs) kullanılarak yapılandırılır. Veriler, bir JSON nesnesi olarak adlandırılan süslü parantezlerle ({}) veya bir JSON dizi olarak adlandırılan köşeli parantezlerle ([]) çevrelenir.Örneğin, aşağıdaki JSON verisi, bir kitap hakkında bilgi içerir:<pre><code>{
 "title": "JavaScript: The Good Parts",
 "author": "Douglas Crockford",
 "price": 15.99,
 "tags": ["JavaScript", "Programming", "Web Development"],
 "published": true
}</code></pre>Bu örnekte, JSON nesnesi, kitapla ilgili anahtar-değer çiftleri içerir. <code>"title"</code> anahtarına karşılık gelen değer, kitabın başlığıdır. <code>"author"</code> anahtarına karşılık gelen değer, kitabın yazarının adıdır. <code>"price"</code> anahtarına karşılık gelen değer, kitabın fiyatıdır. <code>"tags"</code> anahtarına karşılık gelen değer, kitapla ilgili etiketleri içeren bir JSON dizisidir. <code>"published"</code> anahtarına karşılık gelen değer, kitabın yayımlandığına dair bir boolean değerdir.JavaScript, JSON verilerini işlemek için <code>JSON.parse()</code> ve <code>JSON.stringify()</code> fonksiyonlarını sağlar. <code>JSON.parse()</code> fonksiyonu, JSON metnini JavaScript nesnelerine dönüştürür. <code>JSON.stringify()</code> fonksiyonu ise JavaScript nesnelerini JSON metnine dönüştürür.Örneğin, aşağıdaki kod, JSON metnini bir JavaScript nesnesine dönüştürür:<pre><code>const jsonText = '{"name":"John Doe","age":30}';
const person = JSON.parse(jsonText);
console.log(person.name); // John Doe
console.log(person.age); // 30</code></pre>Bu örnekte, <code>JSON.parse()</code> fonksiyonu kullanılarak JSON metni, <code>person</code> adlı bir JavaScript nesnesine dönüştürülür. Daha sonra, <code>console.log()</code> fonksiyonu kullanılarak nesnenin özellikleri konsola yazdırılır.Aşağıdaki kod ise bir JavaScript nesnesini JSON metnine dönüştürür:<pre><code>const person = { name: 'John Doe', age: 30 };
const jsonText = JSON.stringify(person);
console.log(jsonText); // {"name":"John Doe","age":30}</code></pre>Bu örnekte, <code>JSON.stringify()</code> fonksiyonu kullanılarak <code>person</code> adlı JavaScript nesne, JSON metnine dönüştürülür ve <code>jsonText</code> adlı değişkende saklanır. Daha sonra, <code>console.log()</code> fonksiyonu kullanılarak JSON metni konsola yazdırılır.JSON verileri, web uygulamalarında yaygın olarak kullanılmaktadır. Örneğin, bir REST API, JSON veri biçimini kullanarak verilerin transferini sağlayabilir. Ajax (Asynchronous JavaScript and XML) ile yapılan HTTP istekleri de genellikle JSON verileriyle yapılandırılır.Aşağıdaki örnekte, JavaScript Fetch API kullanılarak bir REST API'dan JSON veri alınır ve ekranda gösterilir:<pre><code>fetch('https://jsonplaceholder.typicode.com/posts/1')
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 document.getElementById('result').innerHTML = JSON.stringify(data);
 })
 .catch(error =&gt; console.error(error));</code></pre>Bu örnekte, <code>fetch()</code> fonksiyonu kullanılarak bir HTTP GET isteği yapılır ve API'nin cevabı <code>response</code> adlı bir nesnede saklanır. <code>response.json()</code> fonksiyonu kullanılarak cevap JSON metnine dönüştürülür ve <code>data</code> adlı bir nesnede saklanır. Daha sonra, <code>console.log()</code> fonksiyonu kullanılarak <code>data</code> nesnesi konsola yazdırılır ve HTML'deki <code>result</code> adlı elemente JSON metni yazdırılır.JSON, modern web uygulamaları için önemli bir veri biçimidir. JavaScript ile birlikte kullanılarak, veri transferi ve işleme işlemleri kolaylaştırılabilir.<h2>Promise Nedir?</h2>Promise, JavaScript'te kullanılan bir nesnedir ve asenkron işlemler için kullanılır. Bir işlemin başlatılması ve tamamlanması aşamasında oluşan durumları temsil eder. İşlem tamamlandığında, bir sonuç veya hata döndürür.Promise'ın temel yapısı, bir işlevin bir değer döndürmek yerine bir Promise nesnesi döndürmesidir. Bu Promise nesnesi, işlem tamamlandığında çözümlenecek bir değer veya hata içerebilir. İşlem tamamlandığında, Promise nesnesi bir <code>resolve</code> veya <code>reject</code> durumunda çözümlenir.Bir Promise nesnesi, üç duruma sahip olabilir:<ul><li>Bekleme durumu: İşlem henüz tamamlanmamıştır.</li><li>Çözülmüş durum: İşlem tamamlandı ve bir değer döndürdü.</li><li>Reddedilmiş durum: İşlem tamamlandı ve bir hata oluştu.</li></ul>Promise nesneleri, <code>.then()</code> ve <code>.catch()</code> adlı iki yöntemle işlem sonuçlarını ele alır. <code>.then()</code> yöntemi, bir işlem çözümlendiğinde gerçekleştirilecek eylemleri tanımlamak için kullanılır. <code>.catch()</code> yöntemi ise bir işlem reddedildiğinde gerçekleştirilecek eylemleri tanımlamak için kullanılır.Aşağıdaki örnek, bir Promise nesnesi kullanarak bir asenkron işlemin sonucunu döndürür:<pre><code>function getRandomNumber() {
 return new Promise((resolve, reject) =&gt; {
 setTimeout(() =&gt; {
 const number = Math.floor(Math.random() * 10);
 if (number % 2 === 0) {
 resolve(number);
 } else {
 reject('Hata: Tek sayı döndü');
 }
 }, 1000);
 });
}

getRandomNumber()
 .then(number =&gt; console.log(`Çözümlendi: ${number}`))
 .catch(error =&gt; console.error(error));</code></pre>Bu örnekte, <code>getRandomNumber()</code> adlı bir fonksiyon tanımlanır. Bu fonksiyon, 1 saniye gecikmeyle bir rastgele sayı oluşturur ve bu sayının çift sayı olup olmadığını kontrol eder. Eğer sayı çiftse, <code>resolve</code> durumunda çözümlenir ve sayı değeri döndürülür. Eğer sayı tekse, <code>reject</code> durumunda reddedilir ve bir hata mesajı döndürülür.<code>getRandomNumber()</code> fonksiyonu çağrıldığında, <code>.then()</code> yöntemi, sayı değeri <code>resolve</code> durumunda çözümlenirse gerçekleştirilecek eylemleri tanımlar. <code>.catch()</code> yöntemi ise sayı değeri <code>reject</code> durumunda reddedilirse gerçekleştirilecek eylemleri tanımlar.Promise, modern web uygulamalarında sıklıkla kullanılan bir yapıdır ve özellikle asenkron işlemlerde kullanılan bir yapıdır. Promise, bir işlemin tamamlanıp tamamlanmadığını takip etmek ve sonucunu almak için kullanılır.<h2>Promise ve Fetch</h2>Promise, asenkron JavaScript işlemleri için kullanılan bir nesnedir. Bir işlemi tamamlanmadan önce başka bir işlemin gerçekleştirilmesine izin verir. Bu sayede, web sayfalarındaki isteklerin doğru sırayla yapılmasını sağlar.Fetch API, web sayfalarındaki verileri yükleme işlemleri için kullanılan modern bir arayüzdür. Fetch API, Promise nesnelerini kullanarak HTTP isteklerini kolayca gerçekleştirmenizi sağlar.Örneğin, aşağıdaki kod, Fetch API kullanarak bir JSON dosyasından veri alır:<pre><code>fetch('https://jsonplaceholder.typicode.com/posts')
 .then(response =&gt; response.json())
 .then(data =&gt; console.log(data))
 .catch(error =&gt; console.error(error));</code></pre>Bu örnekte, <code>fetch</code> fonksiyonu kullanarak veri alınır ve Promise nesnesi döndürülür. Promise nesnesi, <code>then</code> fonksiyonları kullanarak verinin işlenmesine izin verir. İlk <code>then</code> fonksiyonu, yanıtı JSON veri olarak çözümler. İkinci <code>then</code> fonksiyonu, çözümlenen veriyi konsola yazdırır. <code>catch</code> fonksiyonu, bir hata oluştuğunda çağrılır.Fetch API aynı zamanda, HTTP isteklerini yapılandırmanıza ve istekleri farklı yöntemlerle (GET, POST, PUT, DELETE) gerçekleştirmenize izin verir. Örneğin, aşağıdaki kod, bir HTTP POST isteği yapar:<pre><code>fetch('https://jsonplaceholder.typicode.com/posts', {
 method: 'POST',
 body: JSON.stringify({
 title: 'Başlık',
 body: 'İçerik',
 userId: 1
 }),
 headers: {
 'Content-type': 'application/json; charset=UTF-8'
 }
})
.then(response =&gt; response.json())
.then(data =&gt; console.log(data))
.catch(error =&gt; console.error(error));</code></pre>Bu örnekte, <code>fetch</code> fonksiyonuna URL ve yapılandırma seçenekleri verilir. <code>method</code> seçeneği <code>POST</code> olarak ayarlanır ve <code>body</code> seçeneği JSON veri olarak ayarlanır. <code>headers</code> seçeneği, gönderilen verilerin türünü belirtir. Veriler gönderildikten sonra, yanıt JSON olarak çözümlenir ve konsola yazdırılır.Promise nesneleri ve Fetch API, web sayfalarındaki verilerin alınması ve gönderilmesi işlemlerini daha kolay hale getirir. Bu araçlar sayesinde, web uygulamalarının daha dinamik ve etkileşimli hale gelmesi sağlanır.<h2>Async ve Await Nedir?</h2>Asenkron programlama, modern web uygulamalarının olmazsa olmaz bir parçasıdır. Asenkron işlemlerle çalışmak, kullanıcı deneyimini artırır ve uygulamanın performansını iyileştirir. Bu amaçla JavaScript diline, Promise nesnesi eklenmiştir. Promise, asenkron işlemleri yönetmek için kullanılan bir nesnedir. Ancak, Promise nesnesi de bazen zorlu olabilir. İşte bu noktada, async ve await anahtar kelimeleri devreye girer.Async ve await, ECMAScript 2017 (ES8) sürümü ile birlikte JavaScript diline eklenen anahtar kelimelerdir. Bu anahtar kelimeler, asenkron işlemleri yönetmek için kullanılır. Async, bir fonksiyonun asenkron olduğunu belirtmek için kullanılır. Await ise, bir asenkron fonksiyondan dönen değeri beklemek için kullanılır.<h3>Async Fonksiyonlar</h3>Async anahtar kelimesi, bir fonksiyonun asenkron olduğunu belirtmek için kullanılır. Async fonksiyonlar, Promise nesnesi döndürürler ve bu nesne, fonksiyonun işlemi tamamlanana kadar beklemeyi sağlar.Örneğin:<pre><code>async function myFunction() {
 return 1;
}</code></pre>Yukarıdaki örnekte, myFunction() adlı bir async fonksiyonu tanımlıyoruz. Bu fonksiyon, 1 değerini Promise nesnesi olarak döndürür.<h3>Await Anahtar Kelimesi</h3>Await anahtar kelimesi, bir asenkron fonksiyondan dönen değeri beklemek için kullanılır. Await, sadece async fonksiyonlar içinde kullanılabilir.Örneğin:<pre><code>async function myFunction() {
 let result = await someAsyncFunction();
 console.log(result);
}</code></pre>Yukarıdaki örnekte, myFunction() adlı bir async fonksiyonu tanımlıyoruz. Bu fonksiyon, someAsyncFunction() adlı bir asenkron fonksiyonu çağırır ve bu fonksiyondan dönen değeri result değişkeninde saklar. Sonrasında, result değişkeninin değeri konsola yazdırılır.Async ve Await Kullanarak Bir HTTP İsteği YapmakAsync ve await anahtar kelimelerini kullanarak bir HTTP isteği yapabiliriz. Bu işlem için, fetch() fonksiyonu kullanılır. fetch(), bir HTTP isteği yapar ve bir Promise nesnesi döndürür. Biz de bu Promise nesnesini, await anahtar kelimesiyle bekleyebiliriz.Örneğin:<pre><code>async function myFunction() {
 let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
 let data = await response.json();
 console.log(data);
}</code></pre>Yukarıdaki örnekte, myFunction() adlı bir async fonksiyonu tanımlıyoruz. Bu fonksiyon, fetch() fonksiyonu kullanarak bir HTTP isteği, async ve await ile birlikte kullanıldığında, fetch() işlemi daha kolay ve okunaklı hale gelir. Örneğin:<pre><code>async function fetchUsers() {
 try {
 const response = await fetch('https://jsonplaceholder.typicode.com/users');
 const data = await response.json();
 console.log(data);
 } catch (error) {
 console.log(error);
 }
}

fetchUsers();</code></pre>Bu örnekte, fetchUsers() adlı bir async fonksiyonu tanımlarız. Bu fonksiyon, try-catch bloğu içinde fetch() fonksiyonu çağrısı yapar. await anahtar kelimesi, fetch() işleminin tamamlanmasını bekler ve sonucu response değişkeninde saklar.Sonra, response.json() metoduyla, aldığımız verileri JSON formatında ayrıştırarak data değişkeninde saklarız. Bu değişkeni console.log() ile yazdırarak konsol penceresinde kullanıcıların verilerini görüntüleyebiliriz.Eğer herhangi bir hata olursa, catch bloğu çalışır ve hata mesajı konsol penceresinde görüntülenir.Kısacası, async ve await kullanarak fetch() fonksiyonu ile asenkron HTTP istekleri yapabilir ve bu isteklerin sonuçlarını kolayca yönetebiliriz. Bu yaklaşım, modern web uygulamalarında çok sık kullanılan bir yöntemdir.

JavaScript

JavaScript

Modern JavaScript

JavaScript

JavaScript'te Nesne Yönelimli Programlama

JavaScript

Asenkron JavaScript ve API