Bu derse başlamak veya ilerlemenizi kaydetmek için lütfen giriş yapın veya kayıt olun.

Ders İçeriği

Değişkenler Nedir?

Değişkenler, verileri depolamak ve onlara bir isim vermek için kullanılan "konteynerler" olarak düşünülebilir. Bir değişken tanımladığınızda, bilgisayarın belleğinde bir alan ayrılır ve bu alana bir isim verilir. Daha sonra bu ismi kullanarak, depolanan veriye erişebilir ve değiştirebilirsiniz.

JavaScript'te değişken tanımlamak için üç farklı anahtar kelime kullanılabilir: var, let ve const. Her birinin farklı özellikleri ve kullanım alanları vardır.


var, let ve const Arasındaki Farklar

1. var

var, JavaScript'in orijinal değişken tanımlama anahtar kelimesidir. ES6 (ECMAScript 2015) öncesinde, değişken tanımlamak için kullanılan tek yöntemdi.

var örneği
// var ile değişken tanımlama
var isim = "JavaScript";
console.log(isim); // "JavaScript"

// var ile tanımlanan değişkenler yeniden tanımlanabilir
var isim = "JS";
console.log(isim); // "JS"

// var ile tanımlanan değişkenler değiştirilebilir
isim = "ECMAScript";
console.log(isim); // "ECMAScript"

var'ın özellikleri:

  • Fonksiyon kapsamına (function scope) sahiptir
  • Aynı isimle yeniden tanımlanabilir
  • Değeri değiştirilebilir
  • Hoisting (yukarı çekme) özelliğine sahiptir (değişken tanımlanmadan önce kullanılabilir, ancak değeri undefined olur)

2. let

let, ES6 ile birlikte gelen bir değişken tanımlama anahtar kelimesidir ve var'a göre daha modern ve güvenli bir alternatiftir.

let örneği
// let ile değişken tanımlama
let yas = 25;
console.log(yas); // 25

// let ile tanımlanan değişkenler aynı kapsamda yeniden tanımlanamaz
// let yas = 30; // SyntaxError: Identifier 'yas' has already been declared

// let ile tanımlanan değişkenler değiştirilebilir
yas = 30;
console.log(yas); // 30

let'in özellikleri:

  • Blok kapsamına (block scope) sahiptir
  • Aynı kapsamda aynı isimle yeniden tanımlanamaz
  • Değeri değiştirilebilir
  • Hoisting özelliğine sahiptir, ancak "temporal dead zone" nedeniyle tanımlanmadan önce kullanılamaz

3. const

const, ES6 ile birlikte gelen ve sabit değerler tanımlamak için kullanılan bir anahtar kelimedir.

const örneği
// const ile değişken tanımlama
const PI = 3.14;
console.log(PI); // 3.14

// const ile tanımlanan değişkenler aynı kapsamda yeniden tanımlanamaz
// const PI = 3.14159; // SyntaxError: Identifier 'PI' has already been declared

// const ile tanımlanan değişkenlerin değeri değiştirilemez
// PI = 3.14159; // TypeError: Assignment to constant variable

const'un özellikleri:

  • Blok kapsamına (block scope) sahiptir
  • Aynı kapsamda aynı isimle yeniden tanımlanamaz
  • İlkel veri tipleri için değeri değiştirilemez
  • Nesneler ve diziler için referans değiştirilemez, ancak içerik değiştirilebilir
  • Hoisting özelliğine sahiptir, ancak "temporal dead zone" nedeniyle tanımlanmadan önce kullanılamaz

Not: const ile tanımlanan bir nesne veya dizinin içeriği değiştirilebilir, çünkü const sadece değişkenin referansını sabit tutar, içeriğini değil.

const ile nesneler
// const ile nesne tanımlama
const kisi = {
    isim: "Ahmet",
    yas: 30
};

// Nesnenin özelliği değiştirilebilir
kisi.yas = 31;
console.log(kisi); // {isim: "Ahmet", yas: 31}

// Ancak nesnenin kendisi değiştirilemez
// kisi = { isim: "Mehmet", yas: 25 }; // TypeError: Assignment to constant variable

Hangisini Kullanmalıyım?

Modern JavaScript geliştirmede, genellikle şu kurallar önerilir:

  • const: Değeri değişmeyecek değişkenler için (varsayılan seçenek)
  • let: Değeri değişecek değişkenler için
  • var: Eski tarayıcı uyumluluğu gerekmedikçe kullanmaktan kaçının

İpucu: Bir değişken tanımlarken, önce const kullanmayı deneyin. Eğer daha sonra değişkenin değerini değiştirmeniz gerekirse, let'e geçebilirsiniz. Bu yaklaşım, kodunuzu daha güvenli ve öngörülebilir hale getirir.

İlkel Veri Tipleri (Primitive Data Types)

JavaScript'te yedi ilkel veri tipi vardır. Bunlar, doğrudan değerleri temsil eden ve nesne olmayan veri tipleridir.

Veri TipiAçıklamaÖrnek
StringMetin verisi"Merhaba"'Dünya'`JavaScript`
NumberSayısal değerler (tam sayılar ve ondalıklı sayılar)423.14-10
BooleanMantıksal değerlertruefalse
NullKasıtlı olarak değer atanmamışnull
UndefinedTanımlanmamış değerundefined
SymbolBenzersiz ve değiştirilemez değer (ES6)Symbol('id')
BigIntÇok büyük tam sayılar (ES2020)9007199254740991n

Bu derste, en sık kullanılan beş ilkel veri tipine (String, Number, Boolean, Null ve Undefined) odaklanacağız.

1. String

String, metin verilerini temsil eder. JavaScript'te stringler, tek tırnak ('), çift tırnak (") veya backtick (`) içinde yazılabilir.

String örnekleri
// String tanımlama
let isim = "Ahmet";
let soyisim = 'Yılmaz';
let tamIsim = `${isim} ${soyisim}`; // Template literal (ES6)

console.log(isim); // "Ahmet"
console.log(soyisim); // "Yılmaz"
console.log(tamIsim); // "Ahmet Yılmaz"

// String uzunluğu
console.log(isim.length); // 5

// String metodları
console.log(isim.toUpperCase()); // "AHMET"
console.log(isim.toLowerCase()); // "ahmet"
console.log(isim.charAt(0)); // "A"
console.log(isim.indexOf("m")); // 2
console.log(isim.substring(1, 3)); // "hm"

2. Number

Number, hem tam sayıları hem de ondalıklı sayıları temsil eder. JavaScript'te tüm sayılar 64-bit kayan noktalı sayılar olarak temsil edilir.

Number örnekleri
// Number tanımlama
let tamSayi = 42;
let ondalikliSayi = 3.14;
let negatifSayi = -10;

console.log(tamSayi); // 42
console.log(ondalikliSayi); // 3.14
console.log(negatifSayi); // -10

// Matematiksel işlemler
console.log(tamSayi + ondalikliSayi); // 45.14
console.log(tamSayi - negatifSayi); // 52
console.log(tamSayi * 2); // 84
console.log(tamSayi / 2); // 21

// Özel sayısal değerler
console.log(Infinity); // Infinity
console.log(-Infinity); // -Infinity
console.log(NaN); // NaN (Not a Number)

// Number metodları
console.log(ondalikliSayi.toFixed(1)); // "3.1"
console.log(Number.isInteger(tamSayi)); // true
console.log(Number.isInteger(ondalikliSayi)); // false

3. Boolean

Boolean, mantıksal değerleri (true veya false) temsil eder. Genellikle karşılaştırma işlemlerinde ve koşullu ifadelerde kullanılır.

Boolean örnekleri
// Boolean tanımlama
let dogruMu = true;
let yanlisMi = false;

console.log(dogruMu); // true
console.log(yanlisMi); // false

// Karşılaştırma işlemleri
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 === 5); // true
console.log(5 !== 5); // false

// Mantıksal operatörler
console.log(true && true); // true (VE operatörü)
console.log(true && false); // false
console.log(true || false); // true (VEYA operatörü)
console.log(!true); // false (DEĞİL operatörü)

4. Null

Null, kasıtlı olarak "değer yok" veya "boş değer" anlamına gelir. Bir değişkene bilinçli olarak boş bir değer atamak istediğinizde kullanılır.

Null örneği
// Null tanımlama
let bos = null;

console.log(bos); // null
console.log(typeof bos); // "object" (Bu bir JavaScript hatasıdır)

// Null kontrolü
console.log(bos === null); // true

Uyarı: typeof null ifadesi "object" döndürür, bu JavaScript'in bilinen bir hatasıdır. Null değerini kontrol etmek için === operatörünü kullanın.

5. Undefined

Undefined, bir değişkenin tanımlandığını ancak henüz bir değer atanmadığını gösterir. Ayrıca, bir fonksiyonun açıkça bir değer döndürmediği durumlarda da undefined döndürülür.

Undefined örneği
// Undefined tanımlama
let tanimsiz;

console.log(tanimsiz); // undefined
console.log(typeof tanimsiz); // "undefined"

// Fonksiyon örneği
function selamla() {
    // Değer döndürmeyen fonksiyon
}

console.log(selamla()); // undefined


Tip Dönüşümleri

JavaScript, dinamik tipli bir dil olduğundan, değişkenlerin tipleri otomatik olarak dönüştürülebilir. Ancak, bazen manuel olarak tip dönüşümü yapmak isteyebilirsiniz.

1. Otomatik Tip Dönüşümü (Type Coercion)

JavaScript, işlem yaparken otomatik olarak veri tiplerini dönüştürebilir. Bu özellik bazen beklenmedik sonuçlara yol açabilir.

Otomatik tip dönüşümü örnekleri
// String ve Number
console.log("5" + 3); // "53" (Number, String'e dönüştürülür)
console.log("5" - 3); // 2 (String, Number'a dönüştürülür)
console.log("5" * 3); // 15 (String, Number'a dönüştürülür)

// Boolean dönüşümleri
console.log(5 + true); // 6 (true, 1'e dönüştürülür)
console.log(5 + false); // 5 (false, 0'a dönüştürülür)

// Null ve Undefined
console.log(5 + null); // 5 (null, 0'a dönüştürülür)
console.log(5 + undefined); // NaN (undefined, NaN'a dönüştürülür)

Uyarı: Otomatik tip dönüşümü, kodunuzun anlaşılmasını zorlaştırabilir ve hatalara yol açabilir. Mümkün olduğunca açık ve net tip dönüşümleri yapmak daha iyidir.

2. Manuel Tip Dönüşümü

JavaScript'te manuel tip dönüşümü yapmak için çeşitli yöntemler vardır:

String'e Dönüştürme

String'e dönüştürme
// String() fonksiyonu
console.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"

// toString() metodu
console.log((123).toString()); // "123"
console.log((true).toString()); // "true"
// console.log(null.toString()); // TypeError: Cannot read property 'toString' of null

// String birleştirme
console.log(123 + ""); // "123"

Number'a Dönüştürme

Number'a dönüştürme
// Number() fonksiyonu
console.log(Number("123")); // 123
console.log(Number("123.45")); // 123.45
console.log(Number("123abc")); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

// parseInt() ve parseFloat()
console.log(parseInt("123")); // 123
console.log(parseInt("123.45")); // 123
console.log(parseFloat("123.45")); // 123.45
console.log(parseInt("123abc")); // 123 (sayısal olmayan karakterlerde durur)

// Matematiksel operatörler
console.log(+"123"); // 123
console.log(+"123.45"); // 123.45
console.log(+"123abc"); // NaN

Boolean'a Dönüştürme

Boolean'a dönüştürme
// Boolean() fonksiyonu
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("hello")); // true
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

// Çift ünlem işareti (!!)
console.log(!!1); // true
console.log(!!0); // false
console.log(!!"hello"); // true
console.log(!!""); // false

Not: JavaScript'te "falsy" (yanlış gibi değerlendirilen) değerler şunlardır: false0"" (boş string), nullundefined ve NaN. Bunların dışındaki tüm değerler "truthy" (doğru gibi değerlendirilen) olarak kabul edilir.


Template Literals (Şablon Dizgileri)

Template literals, ES6 ile gelen ve string oluşturmayı daha esnek ve okunabilir hale getiren bir özelliktir. Backtick (`) karakterleri arasında yazılır ve string içinde değişken kullanmayı, çok satırlı stringler oluşturmayı kolaylaştırır.

Temel Kullanım

Template literals örneği
// Değişkenler
const isim = "Ahmet";
const yas = 30;
const meslek = "Yazılım Geliştirici";

// Eski yöntem (string birleştirme)
const eskiYontem = "Merhaba, benim adım " + isim + ", " + yas + " yaşındayım ve " + meslek + " olarak çalışıyorum.";
console.log(eskiYontem);

// Template literals
const yeniYontem = `Merhaba, benim adım ${isim}, ${yas} yaşındayım ve ${meslek} olarak çalışıyorum.`;
console.log(yeniYontem);

// İfadeler kullanma
console.log(`${isim} 5 yıl sonra ${yas + 5} yaşında olacak.`);

// Çok satırlı stringler
const cokSatirli = `Bu bir
çok satırlı
string örneğidir.`;
console.log(cokSatirli);

Template Literals'ın Avantajları

  • String içinde değişken kullanımı daha kolay ve okunabilir
  • String içinde ifadeler kullanılabilir (örneğin, ${x + y})
  • Çok satırlı stringler oluşturmak için özel karakterlere gerek yok
  • Daha az yazım hatası riski


Değişken Kapsamı (Scope)

Değişken kapsamı, bir değişkenin kodun hangi bölümlerinde erişilebilir olduğunu belirler. JavaScript'te üç tür kapsam vardır:

1. Global Kapsam (Global Scope)

Global kapsamdaki değişkenler, kodun herhangi bir yerinden erişilebilir.

Global kapsam örneği
// Global değişken
var globalVar = "Ben global değişkenim";
let globalLet = "Ben de global değişkenim";
const globalConst = "Ben de global değişkenim";

function testFunction() {
    console.log(globalVar); // "Ben global değişkenim"
    console.log(globalLet); // "Ben de global değişkenim"
    console.log(globalConst); // "Ben de global değişkenim"
}

testFunction();

2. Fonksiyon Kapsamı (Function Scope)

Fonksiyon kapsamındaki değişkenler, sadece tanımlandıkları fonksiyon içinde erişilebilir. var ile tanımlanan değişkenler fonksiyon kapsamına sahiptir.

Fonksiyon kapsamı örneği
function testFunction() {
    // Fonksiyon kapsamındaki değişkenler
    var functionVar = "Ben fonksiyon kapsamındayım";
    let functionLet = "Ben de fonksiyon kapsamındayım";
    const functionConst = "Ben de fonksiyon kapsamındayım";
    
    console.log(functionVar); // "Ben fonksiyon kapsamındayım"
    console.log(functionLet); // "Ben de fonksiyon kapsamındayım"
    console.log(functionConst); // "Ben de fonksiyon kapsamındayım"
}

testFunction();

// Fonksiyon dışından erişmeye çalışmak
// console.log(functionVar); // ReferenceError: functionVar is not defined
// console.log(functionLet); // ReferenceError: functionLet is not defined
// console.log(functionConst); // ReferenceError: functionConst is not defined

3. Blok Kapsamı (Block Scope)

Blok kapsamındaki değişkenler, sadece tanımlandıkları blok içinde erişilebilir. let ve const ile tanımlanan değişkenler blok kapsamına sahiptir.

Blok kapsamı örneği
function testFunction() {
    // Fonksiyon kapsamı
    var functionVar = "Ben fonksiyon kapsamındayım";
    
    if (true) {
        // Blok kapsamı
        var blockVar = "Ben if bloğundayım ama fonksiyon kapsamındayım";
        let blockLet = "Ben sadece if bloğundayım";
        const blockConst = "Ben de sadece if bloğundayım";
        
        console.log(functionVar); // "Ben fonksiyon kapsamındayım"
        console.log(blockVar); // "Ben if bloğundayım ama fonksiyon kapsamındayım"
        console.log(blockLet); // "Ben sadece if bloğundayım"
        console.log(blockConst); // "Ben de sadece if bloğundayım"
    }
    
    console.log(functionVar); // "Ben fonksiyon kapsamındayım"
    console.log(blockVar); // "Ben if bloğundayım ama fonksiyon kapsamındayım"
    // console.log(blockLet); // ReferenceError: blockLet is not defined
    // console.log(blockConst); // ReferenceError: blockConst is not defined
}

testFunction();

Uyarı: var ile tanımlanan değişkenler blok kapsamına sahip değildir, fonksiyon kapsamına sahiptir. Bu, var ile tanımlanan bir değişkenin, tanımlandığı bloğun dışında da erişilebilir olduğu anlamına gelir. Bu durum, beklenmedik hatalara yol açabilir.

Kapsam Zinciri (Scope Chain)

JavaScript, bir değişkene erişmeye çalıştığında, önce mevcut kapsamda arar. Eğer bulamazsa, bir üst kapsamda aramaya devam eder. Bu süreç, değişken bulunana kadar veya global kapsama ulaşılana kadar devam eder.

Kapsam zinciri örneği
const global = "Ben global değişkenim";

function outerFunction() {
    const outer = "Ben dış fonksiyondayım";
    
    function innerFunction() {
        const inner = "Ben iç fonksiyondayım";
        
        console.log(inner); // "Ben iç fonksiyondayım" (kendi kapsamı)
        console.log(outer); // "Ben dış fonksiyondayım" (bir üst kapsam)
        console.log(global); // "Ben global değişkenim" (global kapsam)
    }
    
    innerFunction();
}

outerFunction();

Bu derste şunları öğrendik:

  • JavaScript'te değişken tanımlamak için varlet ve const anahtar kelimeleri kullanılır
  • JavaScript'te yedi ilkel veri tipi vardır: String, Number, Boolean, Null, Undefined, Symbol ve BigInt
  • JavaScript'te otomatik ve manuel tip dönüşümleri yapılabilir
  • Template literals, string oluşturmayı daha esnek ve okunabilir hale getirir
  • Değişken kapsamı, bir değişkenin kodun hangi bölümlerinde erişilebilir olduğunu belirler

Bir sonraki derste, JavaScript'te operatörler ve ifadeler konusunu inceleyeceğiz.