JavaScript Temelleri

Bu makale, JavaScript'in temellerini açıklıyor.

YouTube Video

Hello World! ifadesini çalıştırma

JavaScript Genel Bakış

JavaScript, web geliştirmede en yaygın kullanılan programlama dillerinden biridir. Temel olarak, web sayfalarına dinamik öğeler eklemek, kullanıcı arayüzü manipülasyonu, veri aktarımı ve animasyon oluşturma için kullanılır. Tarayıcı gibi istemci tarafında ve Node.js gibi teknolojilerle sunucu tarafında çalışabilir. Basitliği ve esnekliği nedeniyle, yeni başlayanlar için öğrenmesi kolaydır ve profesyonel geliştiriciler tarafından yaygın olarak kullanılır.

JavaScript'te Değişkenler

JavaScript'teki değişkenler, verileri depolamak ve yeniden kullanmak için kullanılan konteynerler gibidir. Değişkenleri kullanarak programınızda değerleri koruyabilir ve değiştirebilirsiniz.

Değişken Tanımlama

JavaScript'te değişken tanımlamak için üç anahtar kelime vardır.

• var: Değişkenleri tanımlamak için eski bir yöntemdir, ancak kapsamını yönetmek karmaşıktır ve dikkatli olunmasını gerektirir. Fonksiyon kapsamına dayalıdır.

1var x = 10;

• let: ES6 ile tanıtıldı, blok kapsamına sahip değişkenler tanımlamak için bir yöntemdir. Yeniden atanabilir ancak aynı kapsamda yeniden tanımlanamaz.

1let y = 20;

• const: Değiştirilemez (sabit) değişkenleri tanımlamak için kullanılır. Blok kapsamına sahiptir ve tanımlamadan sonra yeniden atanamaz veya yeniden tanımlanamaz.

1const z = 30;

Kapsam

Değişkenler kapsam kavramına sahiptir.

Global Kapsam

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Global kapsam değişkenleri her yerden erişilebilir durumdadır. var ile tanımlanan değişkenlerin global veya fonksiyonel kapsamı vardır, ancak let ve const blok kapsamına sahiptir.

Blok Kapsamı

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Blok kapsamı: let veya const ile tanımlanan değişkenler yalnızca {} (kıvırcık parantez) içinde geçerlidir.

• {} (küçük parantezler) dışından erişim sırasında bir hata oluşur.

Fonksiyon Kapsamı

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Fonksiyon kapsamı: Bir fonksiyon içinde tanımlanan değişkenler ve fonksiyonlara, fonksiyonun dışından erişilemez. var ile bir fonksiyon içinde tanımlanan değişkenler bu kapsama aittir.

• Bu örnekte, functionVar değişkeni, fonksiyon kapsamı içinde olduğu sürece {} (küçük ayraçlar) dışından erişilebilir. Öte yandan, functionScoped değişkenine fonksiyon kapsamı dışından erişmeye çalışmak bir hataya yol açar.

Bu nedenle, var ile tanımlanan değişkenler yalnızca fonksiyon kapsamına sahiptir ve blok kapsamına sahip değildir, bu da beklenmedik alanlarda kullanılma riskini doğurur. Değişmeyen değişkenler için const kullanılması tercih edilir ve genellikle let kullanılır, mümkün olduğunca var kullanmaktan kaçınılır.

Veri Türleri

JavaScript değişkenleri çeşitli veri türlerinde değerler saklayabilir. Metinleri işlemek için string ve sayısal değerleri işlemek için number bulunur.

Ana veri türleri aşağıdaki gibidir:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Basit Türler:
  • number: Sayısal değerleri işler (tamsayılar ve kayan noktalı sayılar).
  • string: Karakter dizilerini işler.
  • boolean: Boolean değerleri true veya false işlemek için kullanılır.
  • null: Açık bir şekilde 'hiçbir şey' değerini temsil eder.
  • undefined: Başlatılmamış değişkenlere otomatik olarak atanan bir değer.
  • Symbol: Benzersiz değerler oluşturmak için kullanılan bir veri türü.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Nesne Türleri:
  • Object: Birden fazla özelliğe sahip bir veri yapısı.
  • Array: Birden fazla değer içeren bir liste.
  • Function: Bir fonksiyon nesnesi.

Değişkenlere Atama ve Yeniden Atama

let veya var ile tanımlanan değişkenler yeniden atanabilir, ancak const tanımlandıktan sonra yeniden atanamaz.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Değişken Yükselmesi (Hoisting)

JavaScript'te değişken tanımlamalarının kapsamlarının en üstüne 'yükseltildiği' bir olgu vardır. var ile tanımlanan değişkenler yükseltilir, ancak let veya const'ı tanımlamadan önce kullanmak bir hata oluşturur.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• Bu durumda, var ile tanımlanan değişkenler kaldırılır ve değerleri çıktı olarak gösterilir.

1console.log(b); // ReferenceError
2let b = 20;

• let ile tanımlanan değişkenler kaldırılmaz, bu da bir hataya neden olur.

Değişkenlerin Doğru Kullanımı

Değişkenlerin doğru kullanımı için aşağıdaki noktaları göz önünde bulundurun.

• const kullanmayı tercih edin ve var kullanımından kaçının.
• Değişken adlandırma kurallarına uyun.
  • camelCase kullanın, örneğin userName veya totalPrice.
  • data veya value gibi belirsiz adlardan kaçının ve okunabilirliği artırmak için anlamlı adlar kullanın.
  • Bir değişken adı bir sayı ile başlayamaz, bu nedenle 1variable gibi adlara izin verilmez.
• Global değişkenlerin aşırı kullanımı kapsam karışıklığına ve hatalara yol açabilir, bu nedenle mümkün olduğunca kullanmaktan kaçının.

Özet

• var: Fonksiyon kapsamına sahip eski bir değişken tanımlama yöntemi.
• let: Yeniden atanabilir, blok kapsamına sahip bir değişken.
• const: Yeniden atanamaz (sabit), blok kapsamına sahip bir değişken.
• Değişkenleri veri türlerine göre kullanmak ve kapsamlarına dikkat etmek önemlidir.

JavaScript'te kaçış karakterleri nedir?

Kaçış karakterleri, normal string literallerinde özel anlamlara sahip karakterleri temsil etmek için kullanılan bir yöntemdir. JavaScript'te kaçış karakterleri, bir string'e özel efektler kazandırmak veya kontrol karakterlerini dahil etmek için ters eğik çizgi \ ile tanıtılır. Kaçış karakterleri, bir string içine yeni satırlar, sekmeler veya tırnak işaretleri gibi öğeleri dahil etmek için kullanışlıdır.

Kaçış karakterlerini kullanma örnekleri

Aşağıda kaçış karakterlerini kullanan bazı örnek kodlar bulunmaktadır.

Çift ve tek tırnakların kaçış karakteri ile kullanımı

Bir string içinde çift veya tek tırnakları temsil etmek için kaçış karakterlerini kullanın.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Ters eğik çizgilerin kaçış karakteri ile kullanımı

Bir string içinde ters eğik çizgiyi dahil etmek için \ ile kaçış karakteri kullanın.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Yeni satır ve sekmelerin kaçış karakteri ile kullanımı

Uzun string'leri daha okunabilir hale getirmek için yeni satır ve sekmeler ekleyebilirsiniz.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Unicode karakterlerinin kaçış karakteri ile kullanımı

Unicode kaçış dizilerini kullanmak, belirli karakterleri onaltılık kodlarla temsil etmenize olanak tanır.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notlar

Kaçış karakterlerinin aşırı kullanımı okunabilirliğe zarar verebilir

Kaçış karakterlerinin aşırı kullanımı, kodunuzun okunabilirliğini azaltabilir. Kaçış karakterlerini uzun string'lerde dikkatli bir şekilde kullanmak özellikle önemlidir.

Şablon dizgiler kullanmayı düşünün

JavaScript'te geri tırnak kullanan şablon dizgiler, kaçış karakterlerine ihtiyaç duymadan yeni satırları veya gömülü ifadeleri dahil etmenizi sağlar.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Özet

Kaçış karakterleri, string'lerde özel veya kontrol karakterlerini temsil etmek için gereklidir. Tek veya çift tırnakları kaçış karakteriyle kullanarak ve yeni satırlar veya sekmeler ekleyerek daha esnek string'ler oluşturabilirsiniz. Ancak, kaçış karakterlerinin aşırı kullanımı kodu okunması zor hale getirebilir, bu nedenle uygun olduğunda şablon dizgiler kullanmayı düşünün.

JavaScript Sürümleri

JavaScript'in, ECMAScript (ES) adında standart bir spesifikasyonu vardır. JavaScript bu standart temelinde gelişmiştir. Aşağıda, başlıca sürümlerinin kısa bir açıklaması verilmiştir.

• ES3 (1999)

  İlk yaygın olarak benimsenen sürüm. Temel sözdizimi ve özellikler belirlendi.

• ES5 (2009)

  strict mode tanıtıldı ve Array.prototype.forEach, Object.keys gibi yeni özellikler eklendi.

• ES6 / ES2015 (2015)

  JavaScript için büyük bir güncelleme yapıldı. Modern JavaScript'in temelini oluşturan birçok özellik, let, const, arrow functions, classes, promises, modules gibi, tanıtıldı.

• ES7 / ES2016 (2016)

  Array.prototype.includes ve Üs Operatörü (**) eklendi.

• ES8 / ES2017 (2017)

  async/await tanıtıldı, bu da asenkron işlemleri yazmayı daha kolay hale getirdi.

• ES9 / ES2018 (2018)

  Asenkron iteratorler ve Rest/Spread Özellikleri eklendi.

• ES10 / ES2019 (2019)

  flatMap ve Object.fromEntries eklendi.

• ES11 / ES2020 (2020)

  Optional Chaining (?.) ve Nullish Coalescing Operator (??) eklendi, bu da kodun daha basit ve güvenli bir şekilde yazılmasını sağladı.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll ve Promise.any gibi özellikler eklendi.

• ES13 / ES2022 (2022)

  Array.prototype.at ve sınıf private alanları (#field) gibi özellikler eklendi.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted ve Symbol.prototype.description gibi özellikler eklendi.

• ES15 / ES2024 (2024)

  Daha kolay Promise yönetimi için Promise.withResolvers ve boyutu değiştirilebilir ArrayBuffer gibi özellikler eklendi.

JavaScript her yıl güncelleniyor ve en son sürümde bile yeni özellikler ekleniyor.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video