Merhabalar.
Bu yazıyı eğitim boyunca bahsedeceğimiz kavramları kısaca ele aldığımız bir sözlük olarak oluşturdum. Bu yazı sürekli güncellenecektir. Eğitim boyunca her yeni kavram öğrendiğimizde burada bahsedilmeye değer görürsem eklemeye çalışacağım. Burada doğrudan bir sıra gütmeyeceğim aklıma geldikçe kavramları buraya eklemeye çalışacağım.
1. var – let – const Değişken Tanımlama Yöntemleri
var:
- Global veya fonksiyon kapsamında tanımlanan değişkenlerdir.Hoisting özelliği vardır, yani değişken tanımlamaları, kapsamın başına taşınır.Aynı isimde birden fazla var değişkeni tanımlanabilir.
function exampleVar() {
if (true) {
var x = 10;
console.log(x); // 10
}
console.log(x); // 10
}let:
- Blok kapsamında tanımlanan değişkenlerdir.Hoisting özelliği vardır, ancak değişkenin tanımlandığı satıra kadar erişilemez.Aynı isimde bir değişken tekrar let ile tanımlanamaz.
function exampleLet() {
if (true) {
let y = 20;
console.log(y); // 20
}
// console.log(y); // Hata: y is not defined
}const:
- Blok kapsamında tanımlanan sabit (değiştirilemeyen) değişkenlerdir.Hoisting özelliği vardır, ancak let gibi tanımlandığı satıra kadar erişilemez.Bir kez değer atandıktan sonra değiştirilemez.
function exampleConst() {
const z = 30;
// z = 40; // Hata: Assignment to constant variable
console.log(z); // 30
}Hangi değişken tanımlama türünü kullanacağınıza karar verirken, kapsam ve değişkenin değiştirilebilirliği gibi faktörleri göz önünde bulundurmalısınız.
2. Arrow Function
Arrow function (ok fonksiyonları), JavaScript’te fonksiyonları daha kısa ve okunabilir bir şekilde tanımlamak için kullanılan bir özelliktir. İşte arrow function’ların genel yapısı ve örnekleri:
Genel Yapı:
function exampleConst() {
const z = 30;
// z = 40; // Hata: Assignment to constant variable
console.log(z); // 30
// Normal fonksiyon
function add(x, y) {
return x + y;
}
// Arrow function
const addArrow = (x, y) => x + y;Neden Var ve Avantajları:
Kısa ve Temiz Sözdizimi: Arrow function’lar daha kısa bir sözdizimine sahiptir, bu da kodun daha temiz ve okunabilir olmasını sağlar.
// Normal fonksiyon
const multiply = function(x, y) {
return x * y;
}
// Arrow function
const multiplyArrow = (x, y) => x * y;
this Bağlamı: Arrow function’lar, kendi this bağlamını oluşturmadıkları için, genellikle olay dinleyicileri veya nesne metotları gibi durumlarda daha öngörülebilir bir davranış sergiler.
// Normal fonksiyon
const obj = {
value: 10,
getValue: function() {
return this.value;
}
};
// Arrow function
const objArrow = {
value: 10,
getValue: function() {
return this.value;
}
};Normal fonksiyonun this bağlamı, fonksiyon hangi nesne üzerinde çağrılıyorsa o nesneyi referans alır. Ancak arrow function, kendi this bağlamını oluşturmadığı için, bulunduğu kapsamın this‘ini alır.
Örnekler:
Arrow function ile basit bir toplama işlemi:
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
Arrow function kullanarak bir dizi elemanlarını iki katına çıkarma:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
Arrow function ve this bağlamı:
function Counter() {
this.value = 0;
this.increment = () => {
this.value++;
console.log(this.value);
};
}
const counter = new Counter();
counter.increment(); // 1
Arrow function’lar, daha kompakt bir sözdizimi ve this bağlamı konusundaki davranışları nedeniyle özellikle modern JavaScript kodlarında sıkça kullanılır.
3. Class
JavaScript’te class ifadesi, nesne yönelimli programlamayı (OOP) desteklemek için kullanılan bir yapıdır. Sınıflar, bir nesne tipini tanımlamak için kullanılır ve bu nesnelerin özelliklerini ve davranışlarını içerir. İşte class‘ın temel yapısı ve kullanımıyla ilgili birkaç örnek:
Sınıf Tanımlama:
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
makeSound() {
console.log("Some generic sound");
}
}Bu örnekte, Animal adında bir sınıf tanımlıyoruz. Sınıfın yapıcı metodu (constructor) sınıf örnekleri oluşturulurken çağrılacak ve name ve age parametrelerini alarak sınıfın özelliklerini (property) ayarlar. Ayrıca, makeSound adında bir metot ekledik.
Sınıf Kullanımı:
const cat = new Animal("Whiskers", 3);
console.log(cat.name); // Whiskers
console.log(cat.age); // 3
cat.makeSound(); // Some generic soundBu örnekte, Animal sınıfından bir örnek (cat) oluşturuyoruz ve sınıfın özelliklerine ve metotlarına erişiyoruz.
4. Export – Import
Export ve Import; JavaScript’te modül tabanlı programlamayı desteklemek için kullanılan yapıları temsil eder. Modüller, kodu küçük, bağımsız, tekrar kullanılabilir parçalara ayırmak ve daha iyi organizasyon sağlamak için kullanılır.
export Kullanımı:
export ifadesi, bir dosyadaki değişkenleri, fonksiyonları veya sınıfları diğer dosyalarda kullanılabilir hale getirir.
// person.js
export const name = "John";
export function sayHello() {
console.log("Hello!");
}Bu örnekte, person.js dosyasında name adlı bir değişken ve sayHello adlı bir fonksiyon export ediliyor.
import Kullanımı:
import ifadesi, başka bir dosyadan export edilen değişkenleri, fonksiyonları veya sınıfları içe aktarır.
// main.js
import { name, sayHello } from "./person";
console.log(name); // John
sayHello(); // Hello!Bu örnekte, main.js dosyasında person.js dosyasından name değişkenini ve sayHello fonksiyonunu içe aktarıyoruz.
İsim Değiştirme (Renaming):
import ve export ifadelerinde, farklı isimlerle içe veya dışa aktarma yapabilirsiniz.
// person.js
const internalName = "Jane";
export { internalName as publicName };Bu örnekte, person.js dosyasında internalName değişkenini publicName olarak dışa aktarıyoruz.
Her Şeyi İçe Aktarma (Import Everything):
Bir dosyadaki tüm export ifadelerini içe aktarmak için * as kullanabilirsiniz.
// utilities.js
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}// main.js
import * as utils from "./utilities";
console.log(utils.add(5, 3)); // 8
console.log(utils.subtract(10, 4)); // 6Bu örnekte, main.js dosyasında utilities.js dosyasındaki tüm fonksiyonları içe aktarıyoruz ve utils adı altında kullanıyoruz.
JavaScript modüllerini kullanmak, kodunuzu daha düzenli ve sürdürülebilir hale getirmenin yanı sıra, paralel geliştirme ve işbirliği için de büyük avantajlar sağlar.
5. Spread Operatörü
Spread operatörü (...), JavaScript’te bir dizi veya nesnenin elemanlarını ayrıştırmak veya başka bir dizi/nesne içine eklemek için kullanılan bir yapıdır. Bu operatörün kullanımı, kodu daha temiz ve esnek hale getirir. İşte spread operatörünün kullanımı ve örnekleri:
Dizi Elemanlarını Ayrıştırmak:
Spread operatörü, bir dizinin elemanlarını ayrıştırarak başka bir dizi içine eklemenizi sağlar.
Örnek:
const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5];
console.log(newArray); // [1, 2, 3, 4, 5]
Bu örnekte, ...numbers ifadesi, numbers dizisinin elemanlarını ayrıştırarak yeni bir diziye ekler.
Dizi Elemanlarını Birleştirmek:
Spread operatörü, iki veya daha fazla diziyi birleştirmek için kullanılabilir.
Örnek:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]
Nesne Özelliklerini Ayrıştırmak:
Spread operatörü, nesne özelliklerini ayrıştırarak başka bir nesneye eklemenizi sağlar.
Örnek:
const person = { name: "John", age: 30 };
const newPerson = { ...person, city: "New York" };
console.log(newPerson);
// { name: "John", age: 30, city: "New York" }
Fonksiyonlarda Kullanımı:
Spread operatörü, fonksiyonlara argüman olarak kullanılabilir.
Örnek:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
Bu örnekte, sum fonksiyonuna spread operatörü ile bir dizi içindeki elemanlar ayrıştırılarak argüman olarak verilmiştir.
Klonlama:
Spread operatörü, bir nesneyi veya diziyi klonlamak için kullanılabilir.
Örnek:
const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // [1, 2, 3]
console.log(originalArray === clonedArray); // false
Bu örnekte, originalArray dizisinin elemanları ayrıştırılarak clonedArray adlı yeni bir dizi oluşturulmuştur.
Spread operatörü, genellikle bir nesnenin veya dizinin kopyasını oluşturmak, elemanları birleştirmek veya ayrıştırmak için kullanılır. Bu operatör, kodunuzu daha esnek ve okunabilir hale getirmenin yanı sıra, bazı durumlarda performans avantajları da sağlayabilir.
6. rest Operatörü
Rest operatörü (...) de spread operatörüne benzer şekilde kullanılır, ancak farklı bir amaç taşır. Rest operatörü, fonksiyon parametrelerinde veya destructuring işlemlerinde kullanılarak, değişken sayıda argümanları bir diziye toplamak veya belirli özellikleri içeren bir nesneyi toplamak için kullanılır. İşte rest operatörünün kullanımı ve örnekleri:
Fonksiyon Parametrelerinde Rest Operatörü:
Fonksiyon parametrelerinde rest operatörü, değişken sayıda argümanları bir diziye toplamak için kullanılır.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
Bu örnekte, ...numbers ifadesi, fonksiyona geçilen tüm argümanları bir diziye toplar.
Nesne Destructuring İşlemlerinde Rest Operatörü:
Destructuring işlemlerinde rest operatörü, belirli özellikleri içeren bir nesneyi toplamak için kullanılır.
const person = { name: "John", age: 30, city: "New York" };
const { name, ...rest } = person;
console.log(name); // John
console.log(rest);
// { age: 30, city: "New York" }Bu örnekte, name değişkenine ilk özellik atanırken, geri kalan özellikler rest adlı bir nesneye toplanır.
Rest Operatörü ile Dizi Birleştirme:
Rest operatörü, spread operatörü gibi kullanılarak dizileri birleştirmek için de kullanılabilir.
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const combined = [...numbers1, ...numbers2];
console.log(combined); // [1, 2, 3, 4, 5, 6]Rest Operatörü ile Dizi Sondan Elemanları Alma:
Rest operatörü, dizinin belirli elemanlarını alma işlemlerinde de kullanılabilir.
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]Rest operatörü, destructuring işlemlerinde belirli özellikleri veya elemanları almak için kullanıldığında oldukça güçlüdür. Bu operatör, özellikle fonksiyon parametrelerinde değişken sayıda argümanları işlemek veya nesne ve dizileri manipüle etmek için kullanışlıdır.
7. Destructuring
JavaScript’te bir nesnenin veya dizinin içindeki değerlere kolay erişim sağlayan bir özelliktir. Bu özellik, nesne veya dizi içindeki öğeleri çıkararak, bu öğelere ayrı değişkenler üzerinden erişim imkanı tanır. Destructuring, kodu daha temiz ve okunabilir hale getirmenin yanı sıra, belirli durumlarda daha kısa sözdizim sağlar.
Nesne Destructuring:
Nesne destructuring, bir nesnenin özelliklerini çıkararak değişkenlere atama yapma işlemidir.
const person = { name: "John", age: 30, city: "New York" };
const { name, age, city } = person;
console.log(name); // John
console.log(age); // 30
console.log(city); // New York
Bu örnekte, person nesnesinin name, age, ve city özellikleri, destructuring kullanılarak ayrı değişkenlere atanmıştır.
Dizi Destructuring:
Dizi destructuring, bir dizinin elemanlarına erişim sağlama işlemidir.
const numbers = [1, 2, 3, 4, 5];
const [first, second, third] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
Bu örnekte, numbers dizisinin ilk üç elemanı, destructuring kullanılarak ayrı değişkenlere atanmıştır.
Fonksiyon Parametrelerinde Destructuring:
Fonksiyon parametrelerinde de destructuring kullanabilirsiniz.
function printPersonInfo({ name, age, city }) {
console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}
const person = { name: "Alice", age: 25, city: "London" };
printPersonInfo(person);
// Name: Alice, Age: 25, City: London
Bu örnekte, printPersonInfo fonksiyonu, bir nesne parametresi alır ve bu parametrenin özelliklerine erişim sağlar.
Destructuring, özellikle karmaşık nesne veya dizilerle çalışırken, kodunuzu daha anlaşılır hale getirmek için kullanışlıdır. Ayrıca, belirli özelliklere kolay erişim sağlamak veya fonksiyon parametrelerini düzenlemek için de sıkça kullanılır.
Bir sonraki yazımda görüşmek üzere.
