JavaScript Notları ve İpuçları

İçindekiler

1. Değişkenler ve Veri Türleri
2. Operatörler
3. Kontrol Akışı
4. Fonksiyonlar
5. Diziler
6. Nesneler
7. ES6+ Özellikleri
8. DOM Manipülasyonu
9. Asenkron JavaScript
10. Hata Yönetimi

Değişkenler ve Veri Türleri

Değişken Tanımlama

// var kullanımı (fonksiyon kapsamlı)
var x = 5;

// let kullanımı (blok kapsamlı)
let y = 10;

// const kullanımı (blok kapsamlı, tekrar atanamaz)
const PI = 3.14159;

Veri Türleri

// Sayı
let num = 42;
let float = 3.14;

// Dize
let str = "Merhaba, Dünya!";

// Boolean
let isTrue = true;
let isFalse = false;

// Tanımsız
let undefinedVar;

// Null
let nullVar = null;

// Simge
let sym = Symbol("benzersiz");

// BigInt
let bigInt = 1234567890123456789012345678901234567890n;

// Nesne
let obj = {isim: "John", yaş: 30};

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

Tür Kontrolü

console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (bu JavaScript'te bilinen bir hata)
console.log(typeof Symbol());    // "symbol"
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

Operatörler

Aritmetik Operatörler

let a = 10, b = 5;

console.log(a + b);  // Toplama: 15
console.log(a - b);  // Çıkarma: 5
console.log(a * b);  // Çarpma: 50
console.log(a / b);  // Bölme: 2
console.log(a % b);  // Modül: 0
console.log(a ** b); // Üs Alma: 100000

// Artış ve Azalış
let c = 5;
console.log(c++);    // 5 (post-artış)
console.log(++c);    // 7 (pre-artış)
console.log(c--);    // 7 (post-azalış)
console.log(--c);    // 5 (pre-azalış)

Karşılaştırma Operatörleri

let x = 5, y = '5';

console.log(x == y);   // true (gevşek eşitlik)
console.log(x === y);  // false (katı eşitlik)
console.log(x != y);   // false (gevşek eşitsizlik)
console.log(x !== y);  // true (katı eşitsizlik)
console.log(x > 3);    // true
console.log(x < 3);    // false
console.log(x >= 5);   // true
console.log(x <= 5);   // true

Mantıksal Operatörler

let a = true, b = false;

console.log(a && b);  // false (VE)
console.log(a || b);  // true (VEYA)
console.log(!a);      // false (DEĞİL)

// Kısa devre değerlendirme
console.log(true && 'Merhaba');   // 'Merhaba'
console.log(false && 'Merhaba');  // false
console.log(true || 'Merhaba');   // true
console.log(false || 'Merhaba');  // 'Merhaba'

Atama Operatörleri

let x = 10;

x += 5;  // x = x + 5
console.log(x);  // 15

x -= 3;  // x = x - 3
console.log(x);  // 12

x *= 2;  // x = x * 2
console.log(x);  // 24

x /= 4;  // x = x / 4
console.log(x);  // 6

x %= 4;  // x = x % 4
console.log(x);  // 2

x **= 3; // x = x ** 3
console.log(x);  // 8

Kontrol Akışı

If-Else İfadesi

let age = 18;

if (age >= 18) {
    console.log("Yetişkinsiniz");
} else if (age >= 13) {
    console.log("Gençsiniz");
} else {
    console.log("Çocuksunuz");
}

Switch İfadesi

let day = "Pazartesi";

switch (day) {
    case "Pazartesi":
        console.log("İş haftasının başlangıcı");
        break;
    case "Cuma":
        console.log("İş haftasının sonu");
        break;
    case "Cumartesi":
    case "Pazar":
        console.log("Hafta sonu");
        break;
    default:
        console.log("Hafta ortası");
}

For Döngüsü

for (let i = 0; i < 5; i++) {
    console.log(i);
}

// Çıktı: 0, 1, 2, 3, 4

While Döngüsü

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// Çıktı: 0, 1, 2, 3, 4

Do-While Döngüsü

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

// Çıktı: 0, 1, 2, 3, 4

For...of Döngüsü (iterable'lar için)

let arr = ['a', 'b', 'c'];
for (let item of arr) {
    console.log(item);
}

// Çıktı: 'a', 'b', 'c'

For...in Döngüsü (nesne özellikleri için)

let obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
    console.log(prop + ': ' + obj[prop]);
}

// Çıktı: 'a: 1', 'b: 2', 'c: 3'

Fonksiyonlar

Fonksiyon Deklarasyonu

function greet(name) {
    return "Merhaba, " + name + "!";
}

console.log(greet("John"));  // Çıktı: "Merhaba, John!"

Fonksiyon İfadesi

const greet = function(name) {
    return "Merhaba, " + name + "!";
};

console.log(greet("Jane"));  // Çıktı: "Merhaba, Jane!"

Okunaklı Fonksiyon

const greet = (name) => {
    return "Merhaba, " + name + "!";
};

// Tek bir ifade için daha kısa sözdizimi
const greetShort = name => "Merhaba, " + name + "!";

console.log(greetShort("Alice"));  // Çıktı: "Merhaba, Alice!"

Varsayılan Parametreler

function greet(name = "Misafir") {
    return "Merhaba, " + name + "!";
}

console.log(greet());  // Çıktı: "Merhaba, Misafir!"
console.log(greet("Bob"));  // Çıktı: "Merhaba, Bob!"

Rest Parametreleri

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5));  // Çıktı: 15

Diziler

Dizi Oluşturma ve Erişim

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

console.log(arr[0]);  // 1
console.log(arr.length);  // 5

Dizi Metotları

// Eleman Ekleme
arr.push(6);   // Dizi sonuna ekler
arr.unshift(0); // Dizi başına ekler

// Eleman Silme
arr.pop();    // Dizi sonundan çıkarır
arr.shift();  // Dizi başından çıkarır

// Eleman Bulma
console.log(arr.indexOf(3));   // 2

// Dizi Kopyalama
let newArr = arr.slice();  // Yeni bir kopyasını oluşturur

// Diziyi Dönüştürme
let str = arr.join(', ');  // "0, 1, 2, 3, 4, 5, 6"

// Diziyi Sıralama
arr.sort();    // Varsayılan olarak alfabetik sıralar

// Belirli pozisyonlara eleman ekleme/çıkarma
arr.splice(2, 0, 6, 7);  // 2. indekse 6 ve 7 ekler: [1, 2, 6, 7, 3, 4, 5]
arr.splice(3, 2);        // 3. indeksten başlayarak 2 eleman çıkarır: [1, 2, 6, 4, 5]

Nesneler

Nesne Oluşturma

let person = {
    name: "John",
    age: 30,
    greet() {
        return "Merhaba, ben " + this.name;
    }
};

console.log(person.name);  // "John"
console.log(person.greet());  // "Merhaba, ben John"

Nesne Metotları

// Nesne Özelliklerine Erişim
console.log(person['name']);  // "John"

// Özellik Güncelleme
person.age = 31;

// Yeni Özellik Ekleme
person.email = "john@example.com";

// Özellik Silme
delete person.email;

ES6+ Özellikleri

Template Literals

let name = "Alice";
let greeting = `Merhaba, ${name}!`;

console.log(greeting);  // "Merhaba, Alice!"

Destructuring Assignment

let arr = [1, 2, 3];
let [a, b] = arr;

console.log(a);  // 1
console.log(b);  // 2

let obj = {x: 10, y: 20};
let {x, y} = obj;

console.log(x);  // 10
console.log(y);  // 20

Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let mergedArr = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]

Arrow Functions

let add = (a, b) => a + b;
console.log(add(2, 3));  // 5

Promises

let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Başarı"), 1000);
});

promise.then(result => console.log(result));  // "Başarı"

DOM Manipülasyonu

Element Seçimi

let element = document.getElementById('myId');
let elements = document.getElementsByClassName('myClass');
let queryElement = document.querySelector('.myClass');
let queryAllElements = document.querySelectorAll('.myClass');

Element İçeriği ve Stilleri

let element = document.getElementById('myId');
element.innerHTML = "Yeni İçerik";
element.style.color = "red";

Olaylar

let button = document.getElementById('myButton');
button.addEventListener('click', () => {
    alert('Butona tıklandı!');
});

Asenkron JavaScript

Callbacks

function fetchData(callback) {
    setTimeout(() => {
        callback("Veri alındı");
    }, 1000);
}

fetchData(data => console.log(data));  // "Veri alındı"

Async/Await

async function fetchData() {
    return "Veri alındı";
}

fetchData().then(data => console.log(data));  // "Veri alındı"

async function fetchData() {
    let data = await new Promise(resolve => setTimeout(() => resolve("Veri alındı"), 1000));
    console.log(data);
}

fetchData();  // "Veri alındı"

Hata Yönetimi

Try...Catch

try {
    let result = riskyFunction();
} catch (error) {
    console.error("Hata oluştu: ", error);
} finally {
    console.log("Bu blok her durumda çalışır.");
}