Türkiye’nin en iyi yazılım kampını incelediniz mi?
Patika+
JavaScript, web geliştirme dünyasının en temel taşlarından biridir. Tarayıcı üzerinde çalışan dinamik bir programlama dili olan JavaScript, günümüzde yalnızca istemci tarafında değil, Node.js sayesinde sunucu tarafında da yaygın olarak kullanılmaktadır.
Eğer bir JavaScript geliştirici olarak bir mülakata hazırlanıyorsanız, temel ve ileri düzey konulara hâkim olmanız gerekir. ES6+ özellikleri, asenkron programlama, DOM manipülasyonu ve performans optimizasyonları gibi konular mülakatlarda sıklıkla sorulmaktadır.
Bu yazımızda, JavaScript ile ilgili en sık sorulan mülakat sorularını ve detaylı cevaplarını ele alacağız. Hem yeni başlayanlar hem de ileri seviye geliştiriciler için hazırlanmış bu rehber, mülakat süreçlerinde sizi bir adım öne taşıyacaktır.
Şimdi gelin, JavaScript mülakatlarında karşınıza çıkabilecek en yaygın sorulara ve cevaplarına birlikte göz atalım.
JavaScript, dinamik, nesne tabanlı (object-oriented) ve yüksek seviyeli bir programlama dili olup, en yaygın olarak web geliştirmede kullanılır. HTML ve CSS ile birlikte çalışarak sayfalara interaktif özellikler ekler.
Çalışma mantığı:
JavaScript’te var, let ve const değişken tanımlamak için kullanılır, ancak aralarında önemli farklar vardır. var, eski bir değişken tanımlama yöntemidir ve fonksiyon kapsamına sahiptir, yani bir fonksiyon içinde tanımlandığında yalnızca o fonksiyon içinde erişilebilir. Ayrıca, var ile tanımlanan değişkenler aynı kapsam içinde tekrar tanımlanabilir ve değişken tanımlanmadan önce kullanılabilir (hoisting özelliği). Ancak, let ve const ES6 ile birlikte gelen ve blok kapsamına sahip değişkenlerdir. let, yalnızca tanımlandığı blok içinde geçerli olup tekrar tanımlanamaz, ancak değeri değiştirilebilir. const ise sabit bir değişken tanımlamak için kullanılır ve bir kez değer atandıktan sonra tekrar değiştirilemez. Bu nedenle const, değişmeyecek veriler için tercih edilirken, let değiştirilebilir verilere uygun bir seçenektir. Genel olarak, modern JavaScript kodlarında var yerine let ve const kullanımı önerilmektedir, çünkü var'ın hoisting ve kapsamla ilgili bazı karışıklıklara yol açabilme ihtimali vardır.
Öneri: let ve const kullanımı daha güvenlidir, var yerine tercih edilmelidir.
JavaScript'te Primitive (ilkel) ve Reference (referans) olmak üzere iki ana veri türü vardır.
== ve === operatörleri, programlama dillerinde (özellikle JavaScript’te) karşılaştırma yapmak için kullanılır. == operatörü, yalnızca iki değerin eşit olup olmadığını kontrol eder ve tür dönüşümü yaparak karşılaştırma yapar. Örneğin, 5 == "5" ifadesi true döner çünkü JavaScript, "5" stringini otomatik olarak sayıya çevirerek kıyaslama yapar. Buna karşılık === operatörü, hem değerlerin hem de veri türlerinin eşit olup olmadığını kontrol eder. Yani, 5 === "5" ifadesi false döner çünkü biri sayı, diğeri string olduğu için veri türleri farklıdır. Bu nedenle, === operatörü daha güvenilir bir karşılaştırma yöntemi olarak kabul edilir, çünkü beklenmeyen tür dönüşümlerini engeller.
JavaScript'te bir değişkenin türü otomatik olarak başka bir türe çevrilebilir. Buna Type Coercion denir.
JavaScript’te null ve undefined birbirine benzeyen ancak farklı anlamlara gelen değerlerdir. undefined, bir değişkenin tanımlandığı ancak herhangi bir değer atanmadığı durumlarda ortaya çıkar. Örneğin, let x; ifadesinde x değişkeni oluşturulmuş ancak herhangi bir değer atanmamıştır, dolayısıyla değeri undefined olur. null ise bilinçli olarak atanmış bir boş değerdir. Yani, bir değişkenin kasıtlı olarak boş veya geçersiz olduğunu belirtmek için null atanır. Örneğin, let y = null; ifadesinde, y değişkenine bilerek boş bir değer atanmıştır. Kısacası, undefined JavaScript tarafından otomatik olarak verilen bir değerken, null geliştirici tarafından bilinçli olarak atanan bir boş değerdir.
Hoisting, JavaScript'in değişken ve fonksiyon tanımlarını kod çalışmadan önce belleğe almasıdır.
JavaScript bunu şu şekilde işler:
🔹 let ve const kullanıldığında hoisting olur ama değişkene erişmeden önce hata verir.
Closure, bir fonksiyonun kendi kapsamı dışındaki değişkenlere erişebilmesini sağlayan mekanizmadır.
Bu yapı veri gizliliği (data privacy) sağlamak için kullanılır.
Bu terimler DOM olaylarının nasıl yayıldığını açıklar.
Event Bubbling ve Event Capturing, JavaScript’te olayların (event) nasıl yayıldığını belirleyen iki farklı mekanizmadır.
Event Bubbling (Olay Kabarcıklanması), bir olayın en içteki (çocuk) elementten başlayarak dıştaki (ebeveyn) elementlere doğru yayılmasıdır. Örneğin, bir butona tıklarsanız, önce butonun kendisi olayı işler, ardından sırasıyla ebeveyn elementlerine (örn. <div>, <body>, <html>) doğru iletilir. Tarayıcılar varsayılan olarak event bubbling mekanizmasını kullanır.
Event Capturing (Olay Yakalama) ise tam tersidir. Olay, en dıştaki elementten başlayarak içteki hedef (target) elemente doğru ilerler. Yani olay önce üst seviyedeki elementlerde işlenir, ardından alt seviyedeki elementlere doğru akar. Bunu kullanmak için addEventListener fonksiyonunun üçüncü parametresi true olarak ayarlanmalıdır.
Özetle, event bubbling olayın içten dışa yayılmasını, event capturing ise dıştan içe doğru işlenmesini ifade eder. Hangisini kullanacağınızı belirlemek, projenizin gereksinimlerine bağlıdır.
Callback function, başka bir fonksiyona parametre olarak verilen ve belirli bir olaydan sonra çağrılan fonksiyondur.
🔹 Neden kullanılır?
Promise ve async/await, JavaScript’te asenkron işlemleri yönetmek için kullanılan yapılardır.
Bir işlemin sonucunu gelecekte döndüreceğini vaat eden bir nesnedir.
fetchData().then(data => console.log(data)).catch(error => console.log(error));
ES8 ile gelen async/await, Promise'lerin daha okunaklı kullanılmasını sağlar.
async function fetchData() {
try {
let data = await new Promise((resolve) => setTimeout(() => resolve("Veri yüklendi!"), 2000));
console.log(data);
} catch (error) {
console.log(error);
}
}
fetchData();
JavaScript’te Promise ve async/await yapıları, asenkron işlemleri yönetmek için kullanılır, ancak farklı çalışma prensiplerine sahiptirler. Promise, bir işlemin tamamlanıp tamamlanmadığını temsil eden bir nesnedir ve .then(), .catch() gibi metodlarla zincirleme şekilde işlenebilir. Örneğin, bir API çağrısının tamamlanmasını beklemek için Promise kullanılır ve ardından başarılıysa .then(), hata alındıysa .catch() blokları çalıştırılır. async/await ise Promise tabanlı işlemleri daha okunaklı ve senkron kod gibi yazmayı sağlar. async anahtar kelimesi bir fonksiyonun asenkron olduğunu belirtirken, await ifadesi, Promise’in tamamlanmasını bekleyerek kodun sırayla çalışmasını sağlar. Bu da hata yönetimini try/catch ile daha kolay hale getirir ve kodun daha anlaşılır olmasını sağlar. Kısacası, Promise daha fazla kontrol sunarken, async/await ise kodu daha okunaklı hale getirerek hata yönetimini kolaylaştırır.
this, JavaScript’te çağrıldığı bağlama (context) göre değişiklik gösteren özel bir değişkendir.
this, JavaScript’te çağrıldığı bağlama (context) göre değişiklik gösteren özel bir değişkendir.
JavaScript'te this anahtar kelimesinin kullanımı bağlama göre değişir. Global scope içinde kullanıldığında, tarayıcı ortamında this ifadesi window nesnesini referans eder. Bir nesne içinde kullanıldığında ise this, o nesnenin kendisini ifade eder. Fonksiyon içinde kullanıldığında, this genellikle window nesnesine bağlıdır, ancak strict mode aktifse undefined dönebilir. Arrow function'lar ise farklı bir davranış sergiler; this kelimesini kendi içinde bağlamaz, bunun yerine, tanımlandığı üst bağlamdaki this değerini referans alır.
const obj = {
name: "Ali",
sayHello: function() {
console.log(this.name); // "Ali"
}
};
obj.sayHello();
JavaScript'te normal fonksiyonlar ve arrow function'lar arasında önemli farklar bulunur. Normal fonksiyonlarda this bağlamı dinamik olup, fonksiyonun çağrıldığı yere göre değişir. Ayrıca, arguments nesnesi mevcuttur ve fonksiyon içindeki parametrelere erişim sağlar. Bu tür fonksiyonlar genel kullanım için uygundur. Arrow function'lar ise farklı bir yapıya sahiptir; this değerini kendi içinde bağlamaz, bunun yerine üst bağlamdan alır. Bunun yanı sıra, arguments nesnesine sahip değildir. Daha çok callback fonksiyonlar ve kısa fonksiyonlar gibi özel durumlarda kullanılır.
// Normal fonksiyon
function normalFunc() {
console.log(this); // Çağrıldığı bağlama bağlıdır
}
// Arrow fonksiyon
const arrowFunc = () => {
console.log(this); // Üst kapsamın `this`'ini kullanır
};
Prototype, JavaScript'in nesne tabanlı miras yapısını sağlayan mekanizmadır.
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log("Merhaba, " + this.name);
};
const ali = new Person("Ali");
ali.sayHello(); // "Merhaba, Ali"
JavaScript'te map() ve forEach() metodları, diziler üzerinde işlem yapmak için kullanılır ancak aralarında önemli farklar vardır. map() metodu, orijinal diziyi değiştirmez ve her eleman üzerinde işlem yaparak yeni bir dizi döndürür. Aynı zamanda chaining (zincirleme) işlemlerini destekler, yani başka metodlarla ardışık olarak kullanılabilir. forEach() metodu ise her eleman üzerinde işlem yapmasına rağmen geri dönüş değeri olarak undefined döner ve yeni bir dizi oluşturmaz. Orijinal diziyi değiştirmez ancak elemanları üzerinde doğrudan değişiklik yapabilir. Ayrıca zincirleme kullanımı desteklemez, bu yüzden genellikle işlemleri uygulayıp sonuçları direkt olarak kullanmak için tercih edilir.
let numbers = [1, 2, 3, 4];
let squared = numbers.map(num => num * num); // [1, 4, 9, 16]
numbers.forEach(num => console.log(num)); // Sadece ekrana yazdırır
JavaScript'te spread (...) ve rest (...) operatörleri benzer görünümlerine rağmen farklı amaçlar için kullanılır. Spread operatörü, bir dizi veya nesneyi açarak yaymak için kullanılır. Bu sayede dizileri veya nesneleri kolayca kopyalayabilir, birleştirebilir ve öğelerini farklı yapılara dağıtabilirsiniz. Rest operatörü ise fonksiyon parametrelerinde kullanılarak sınırsız sayıda argüman almayı sağlar. Fonksiyon içinde bir dizi olarak saklanan bu parametreler, dinamik veri işleme süreçlerinde oldukça kullanışlıdır.
// Spread
let arr = [1, 2, 3];
let newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]
// Rest
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6
JavaScript'te setTimeout() ve setInterval() fonksiyonları zamanlayıcı işlemleri gerçekleştirmek için kullanılır. setTimeout(), belirlenen süre sonunda yalnızca bir defa çalışır ve ardından durur. Genellikle gecikmeli işlemler yapmak için tercih edilir. setInterval() ise belirlenen zaman aralıklarında tekrar tekrar çalışır ve durdurulmadığı sürece sürekli olarak çalışmaya devam eder. Bu fonksiyon, belirli periyotlarla işlem gerçekleştirmek gerektiğinde kullanılır.
setTimeout(() => console.log("Bu bir kere çalışır"), 2000);
setInterval(() => console.log("Bu her 2 saniyede çalışır"), 2000);
JavaScript'te debounce ve throttle teknikleri, performansı artırmak için kullanılan fonksiyon kontrol yöntemleridir. Debounce, belirlenen süre içinde fonksiyon çağrılmazsa çalışmasını sağlar. Bu, özellikle arama kutuları gibi sürekli giriş yapılan alanlarda gereksiz işlem yükünü azaltmak için kullanılır. Örneğin, bir kullanıcı yazmayı bıraktığında belirli bir süre sonra arama işlemi başlatılabilir. Throttle ise fonksiyonun belirlenen sabit aralıklarla çalışmasını sağlar. Bu yöntem, özellikle scroll, resize gibi sürekli tetiklenen olaylarda gereksiz fonksiyon çağrılarını önleyerek performansı optimize etmek için kullanılır.
// Debounce
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
}
Event delegation, olayları dinlemek için ebeveyn bir öğeye olay bağlayarak performansı artırma tekniğidir.
document.getElementById("parent").addEventListener("click", function(event) {
if (event.target.classList.contains("child")) {
console.log("Tıklanan eleman:", event.target.innerText);
}
});
Web depolama yöntemleri olan localStorage, sessionStorage ve cookies, verileri tarayıcıda saklamak için kullanılır ancak farklı özelliklere sahiptir. localStorage, kalıcı bir depolama türüdür ve veriler manuel olarak silinmediği sürece tarayıcıda saklanır. 5MB kapasiteye sahiptir ve sunucuya otomatik olarak gönderilmez. sessionStorage ise geçici bir depolama alanıdır; sayfa kapatıldığında veriler otomatik olarak silinir. 5MB kapasiteye sahiptir ve sunucuya gönderilmez. Cookies, belirlenen bir süre boyunca saklanır ve genellikle 4KB gibi düşük bir kapasiteye sahiptir. Ancak diğer depolama türlerinden farklı olarak, sunucuya her istekle birlikte otomatik olarak gönderilir, bu nedenle kimlik doğrulama ve kullanıcı tercihlerini saklamak için yaygın olarak kullanılır.
localStorage.setItem("key", "value");
console.log(localStorage.getItem("key")); // "value"
JavaScript, web geliştirme dünyasında kritik bir rol oynayan güçlü bir programlama dilidir. Hem istemci tarafında hem de sunucu tarafında kullanılabilmesi, onu modern yazılım geliştirme süreçlerinde vazgeçilmez hale getirmiştir.
Bu yazımızda, JavaScript mülakatlarında sıkça karşılaşabileceğiniz önemli soruları ve bu sorulara verilebilecek en iyi cevapları detaylı bir şekilde inceledik. Temel veri yapıları, asenkron programlama, fonksiyonel farklılıklar, DOM manipülasyonu ve depolama mekanizmaları gibi konular, iyi bir JavaScript geliştiricisinin mutlaka hakim olması gereken alanlardır.
Eğer bir JavaScript mülakatına hazırlanıyorsanız:
✔ Temel ve ileri düzey JavaScript konularını öğrenin.
✔ Kod pratiği yaparak öğrendiklerinizi pekiştirin.
✔ Gerçek dünya projeleri üzerinde çalışarak deneyim kazanın.
Bu bilgiler sayesinde hem teknik bilginizi güçlendirebilir hem de JavaScript mülakatlarında rakiplerinizden bir adım önde olabilirsiniz.
