JavaScript Mülakat Soruları ve Cevapları
Herkese merhaba, daha önce JavaScript ile ilgili kendimce önem verdiğim konulara değinmiştim. Mülakatlara hazırlanırken kendi kendime aldığım notları bir araya getirip sizlerle de paylaşmak istedim. Umarım birilerine faydalı olur, farklı bir bakış açısı kazandırır. Şimdiden teşekkürler.
1) JavaScript nedir?
JavaScript, web sayfalarını dinamikleştirmek ve etkileşimli hale getirmek için kullanılan bir programlama dilidir. Genellikle tarayıcı tarafında çalışır ve HTML ve CSS ile birlikte kullanılarak web uygulamaları geliştirmek için kullanılır. Yukarıda “Genellikle tarayıcı” tarafında dedik çünkü, 2009 yılında büyük ölçüde Node.js ile beraber JavaScript artık tarayıcı ortamından çıkarılıp sunucu tarafında da çalıştırılabilir hale getirildi.
2) == ve === arasındaki fark nedir?
== (loose equality): İki değeri karşılaştırırken, veri türlerini dönüştürerek karşılaştırma yapar. Örneğin 1=='1'
ifadesi true döner çünkü JavaScript, string olan 1'i otomatik olarak sayısal bir değere dönüştürür ve ardından karşılaştırır.
=== (strict equality): İki değeri karşılaştırırken, sadece değerleri değil aynı zamanda veri türlerini de kontrol eder. 1==='1'
ifadesi false döner çünkü veri türleri farklıdır.
Genel olarak === operatörü daha güvenlidir çünkü veri türlerini de dikkate alarak karşılaştırma yapar. Bu nedenle olası tür dönüşüm hatalarını önler ve daha tutarlı davranış sağlar.
3) Scope nedir?
Scope, bir program içinde tanımladığımız değişken, fonksiyon, objectlerin görünürlük ve erişebilirlik durumlarını belirler diyebiliriz. Başka bir deyişle, değişkenlerin izole edildiği ve hangi kod parçacıklarının bu değişkenlere erişebileceğini belirleyen bir kavramdır. Peki değişkenlerin görünürlüğünü sınırlandırmamızın ve her yerden erişemememizin amacı nedir ? Bunun bize en büyük getirisi güvenliktir. Bunun yanı sıra programlarımızın daha düzenli ve anlaşılır olmasını sağlar. Değişkenlerin nerede tanımlandığı ve nerede kullanıldığı hakkında net kurallar koymak, kodumuzun hatalarını ve sorunlarımızı azaltmamıza yardımcı olur. Scope ile ilgili daha detaylı bilgiyi aşağıdaki yazıdan bulabilirsiniz.
4) JavaScript’te hangi veri tipleri kullanılır?
a) String: Metin verilerini temsil eder.
b) Number: Tamsayılar ve ondalık sayılar gibi sayısal verileri temsil eder.
c) Boolean: Bir durumun ‘true’ veya ‘false’ gibi iki farklı değer döndüren mantıksal veri tipidir.
d) Object: Karmaşık veri yapılarını key-value şeklinde temsil eder.
e) Array: Birden çok değeri bir arada tutmak için kullanılır.
f) Null: “null” değerini temsil eder. Bir değişken değerinin bilinmediğini veya atanmadığını belirtmek için kullanılır.
g) Undefined: Değer atanmamış veya tanımsız bir değişkeni temsil eder.
h) Symbol: JavaScript’te benzersiz ve değiştirilemez değerlerdir.
5) JavaScript ile DOM elementlerine erişim metotları nelerdir?
a) getElementById: Belirli bir id değerine sahip bir DOM öğesini seçmek için kullanılır. Örneğin;
const element = document.getElementById('myElement');
b) getElementsByClassName: Belirli bir sınıfa sahip tüm DOM öğelerini seçmek için kullanılır. Örneğin;
const elements = document.getElementsByClassName('myClass');
c) getElementsByTagName: Belirli bir etikete sahip tüm DOM öğelerini seçmek için kullanılır. Örneğin;
const elements = document.getElementsByTagName('div');
d) querySelector: CSS seçicilerini kullanarak belirli bir DOM öğesini seçmek için kullanılır. İlk eşleşen öğeyi seçer. Örneğin;
const element = document.querySelector('#myElement');
e) querySelectorAll: CSS seçicilerini kullanarak tüm eşleşen DOM öğelerini seçmek için kullanılır. Örneğin;
const elements = document.querySelectorAll('.myClass');
6) JavaScript’te string’i number’a nasıl çeviririz?
parseInt: Bir string’i tam sayıya dönüştürmek için kullanılır. Örneğin;
const str = '123';
const number = parseInt(str);
console.log(number); // Output: 123
parseFloat: Bir string’i ondalıklı sayıya dönüştürmek için kullanılır. Örneğin;
const str = '3.14';
const number = parseFloat(str);
console.log(number); // Output: 3.14
Her iki fonksiyon da string içeriği sayısal olmayan karakterlerle karşılaşana kadar okur ve dönüştürme işlemini gerçekleştirir. Ancak, parseInt()
sadece tam sayılarla çalışırken, parseFloat()
ondalıklı sayılarla da çalışabilir.
7) For, forEach ve for…in kavramlarını açıklayın.
JavaScript’te for, forEach ve for…in döngüleri kullanmak için kullanılan kavramlardır.
a) for: Bir bloğu belirli bir koşul doğru olduğu sürece veya belirli bir aralıkta (örneği bir dizi boyunca) tekrarlamak için kullanılır. Örneğin;
for (let i = 0; i < 5; i++) {
console.log(i); // Output: 0, 1, 2, 3, 4
}
b) forEach: Bir dizi metodu olarak kabul edilir. Dizi içindeki her bir eleman üzerinde işlem yapmak için kullanılır. Her bir eleman için belirtilen bir fonksiyonu çağırarak döngü oluşturur. Örneğin;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number); // Output: 1, 2, 3, 4, 5
});
c) for…in: Bir nesnedeki (obje veya dizi gibi) özelliklerin (properties) üzerinde dolaşmak için kullanılır. Bu döngü, genellikle nesne özellikleri üzerinde gezinmek veya nesnenin özelliklerine belirli bir işlem uygulamak için kullanılır.
const person = {
name: 'John',
age: 30,
city: 'New York'
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Output;
// name: John
// age: 30
// city: New York
8) JavaScript’te break ve continue kavramları nelerdir?
JavaScript’te break ve continue ifadeleri, döngülerin kontrolünü sağlayan keywordlerdir.
a) break: Bir döngüyü tamamen sonlandırmak için kullanılır. Herhangi bir döngü içinde break ifadesi kullanıldığında, döngü hemen sona erer ve döngü dışındaki kod satırından devam edilir. Örneğin;
for (let i = 0; i < 5; i++) {
if (i === 3) {
break;
}
console.log(i);
}
// Output : 0, 1, 2
b) continue: Bir döngünün mevcut yineleme (iteration) adımını atlamak ve bir sonraki yineleme adımına geçmek için kullanılır. Döngüde continue ifadesi kullanıldığında, döngünün geri kalan kısmı atlanır ve bir sonraki yineleme adımıyla devam edilir. Örneğin;
for (let i = 0; i < 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
// Output: 0, 1, 2, 4
9) Babel nedir, avantajları nelerdir?
Babel, JavaScript kodumuzu farklı tarayıcılarda ve ortamlarda çalıştırmak için kullanılan bir JavaScript derleyicisidir. Genellikle modern JavaScript özelliklerini desteklemeyen tarayıcılar için kullanılır ve kodun geriye dönük uyumluluğunu sağlar. Avantajları;
a) JavaScript özelliklerini kullanmamıza imkan tanır, bu sayede daha okunaklı, verimli ve güçlü JavaScript kodu yazabiliriz.
b) Yazdığımız modern JavaScript kodumuzu eski tarayıcılarda da çalıştırılabilir hale getirir.
c) Babel, JavaScript kodunu kaynak kodundan başka bir formata dönüştürebilir. Örneğin, JSX’i (React bileşenlerinde sıkça kullanılan bir syntax) JavaScript’e dönüştürebilir veya TypeScript’i JavaScript’e dönüştürebilir.
d) ECMAScript modülerliği destekler. Bu sayede kodumuzu modüler parçalara bölebilir, daha iyi organizasyon sağlayabilir ve yeniden kullanılabilir bileşenler oluşturabiliriz.
10) Webpack nedir, avantajları nelerdir?
Webpack, Node.js tabanlı modern JavaScript uygulamalarının geliştirilmesinde sıkça kullanılan bir statik modül paketleme aracıdır. Temel olarak, projemizdeki çeşitli kaynak dosyalarını (JavaScript ve CSS dosyaları, görseller vb.) bir veya daha fazla paket halinde birleştirir ve bu paketleri optimize eder. Özetle Webpack bir modül paketleyicisidir. Avantajları;
a) Projemizdeki farklı kaynak dosyalarını modüllere böler ve bunları birleştirerek bir veya daha fazla paket oluşturur. Böylece, karmaşık projelerimizi daha yönetilebilir parçalara böler ve modüler bir yapı oluşturmamıza olanak sağlar.
b) Projemizdeki kaynak dosyalarını paketler halinde birleştirerek sayfa yüklemesi süresini azaltır. Böylece, sayfa yükleme performansını artırır ve kullanıcı deneyimini iyileştirir.
c) Projemizi parçalara ayırarak yalnızca gerekli kod parçalarını yüklememize olanak tanır. Bu, sayfa yükleme süresini daha da azaltır ve kullanıcının sadece ihtiyaç duyduğu kodu almasını sağlar.
d) Modüler geliştirme için destek sağlar ve hızlı geri bildirim döngüsü ile kodumuzu daha hızlı test etmemizi sağlar.
11) JavaScript’in öne çıkan özellikleri nelerdir?
a) Esneklik: JavaScript, farklı platformlarda (tarayıcı, sunucu, mobil vb.) kullanılabilen çok amaçlı bir programlama dilidir.
b) Hafiflik: Tarayıcılarda hızlı yüklenir ve çalışır, bu nedenle web uygulamaları için idealdir.
c) Asenkron Programlama: JavaScript, asenkron işlemleri yönetmek için kullanılan bir dizi API sağlar. Bu, web uygulamalarımızda kullanıcı etkileşimine yanıt verirken beklemeyi önler.
d) Nesne Tabanlı Programlama: JavaScript, nesne tabanlı bir programlama dilidir. Bu, kodun organizasyonunu ve kullanılabilirliğini artırır.
e) Fonksiyonel Programlama Desteği: JavaScript, fonksiyonları first class fonkisyon olarak ele alır. Bu fonksiyonların diğer fonksiyonlara parametre olarak geçirilmesini, döndürülmesini ve değişkenlere atanmasını sağlar.
f) Açık Kaynak ve Topluluk Desteği: JavaScript, açık kaynak bir platformdur ve geniş bir geliştirici topluluğu tarafından desteklenmektedir. Bu, sorunlarla karşılaştığımızda veya bilgiye ihtiyacımız olduğunda yardım alabileğimiz anlamına gelir.
12) JavaScript otomatik tür dönüştürmeyi destekler mi?
Evet, JavaScript otomatik tür dönüştürme özelliğine sahiptir. Bu özellik, farklı veri tipleri arasında geçiş yaparken JavaScript’in esnekliğini sağlar. Bu özellik bazen de beklenmedik sonuçlara neden olabilir, bu nedenle JavaScript kodunu yazarken dönüştürmelerin bilinçli bir şekilde gerçekleştiğinden emin olmak önemlidir. Örneğin;
const number = 10;
const text = "Sayı: " + number; // Otomatik olarak sayıyı metne dönüştürür
console.log(text); // Output: "Sayı: 10"
const total = "10" + 5; // Otomatik olarak sayıyı metne dönüştürür ve birleştirir
console.log(total); // Output: "105"
const result = "20" - 5; // Otomatik olarak metni sayıya dönüştürür
console.log(result); // Output: 15
13) JavaScript’te hata yönetimi nasıl yapılır?
JavaScript’te hata yönetimi genellikle try-catch blokları kullanılarak yapılır. Temel olarak JavaScript’te hata yönetimi için kullanılan yöntemler;
a) Try-catch Blokları: try-catch blokları, potansiyel olarak hata üretebilecek kod bloklarını saran ve bu hataları yakalayan bir yapıdır. Try bloğu içindeki kod çalıştırılır ve eğer bir hata oluşursa catch bloğu çalıştırılır ve hata yakalanır. Örneğin;
try {
// Potansiyel olarak hata üretebilecek kodlar buraya yazılır
} catch (error) {
// Hata yakalandığında çalışacak kodlar buraya yazılır
}
b) Throw İfadesi: Kodumuzda özel bir hatayı belirtmek istersek throw ifadesini kullanabiliriz. Bu, bir hata oluşturur ve programın işleyişini durdurur. Örneğin;
throw new Error('Bu bir özel hata mesajıdır');
c) Global Error Handler (window.onerror): Tarayıcı ortamında, window.onerror olayı kullanılarak global bir hata işleyicisi tanımlayabiliriz. Bu, sayfa genelinde hata yakalama ve işleme yeteneği sağlar. Örneğin;
window.onerror = function(message, source, lineno, colno, error) {
// Hata ile ilgili işlemler burada yapılır
};
14) JavaScript’te escape karakterleri nelerdir?
JavaScript’te yaygın olarak kullanılan kaçış karakterleri şunlardır;
1) \n: Yeni satır karakterini temsil eder
2) \t: Sekme karakterini temsil eder.
3) \r: Satır başı karakterini temsil eder.
4) \b: Geriye dönüş karakterini temsil eder.
5) \f: Form besleme karakterini temsil eder.
6) \v: Dikey sekme karakterini temsil eder.
7)\O: Null karakterini temsil eder.
15) JavaScript’te çıktı nasıl görülür?
JavaScript’te çıktıyı görmek için genellikle console.log()
fonksiyonu kullanılır. Bu fonksiyon belirtilen değerleri console’a yazdırır. Örneğin;
console.log("Hello, world!");
16) Strict mode nedir ve nasıl etkinleştirilir?
JavaScript’in strict mode’u, daha katı bir JavaScript yürütme modudur ve bazı hatalı kullanımları veya hatalı davranışları önler. Bu mode, daha güvenli ve daha temiz kod yazmamıza yardımcı olur. Bazı özellikleri ve avantajları şunlardır;
a) Daha sıkı hata denetimi: Bazı hatalı kullanımları belirtir ve bunlara izin vermez. Örneğin, belirtilmemiş değişkenleri kullanma veya değiştirilemez özelliklere atama yapma gibi hataları belirtir.
b) Geliştirme hatalarını azaltır: Sıkça yapılan hataları önlemek için kodumuzu daha sıkı bir şekilde denetler. Bu, geliştirme sırasında hataları erken tespit etmemize yardımcı olur.
c) Performans iyileştirmeleri: Bazı durumlarda, kodumuzu daha hızlı çalıştırabilir. Çünkü bazı kısıtlamalar nedeniyle JavaScript motorunun daha etkili optimizasyonlar yapmasına izin verir.
Strict mode’u etkinleştirmek için, JavaScript dosyasının veya kod bloğunu başına “use strict” ifadesi ekleyebiliriz. Örneğin;
"use strict";
// Buradan itibaren kodunuz strict mode'da çalışacak
Ayrıca, fonksiyonlar veya dosya içindeki özel bir alan için de strict mode’u etkinleştirebiliriz. Örneğin;
function myFunction() {
"use strict";
// Bu fonksiyon strict mode'da çalışacak
}
17) JavaScript büyük küçük harfe duyarlı mıdır?
Evet, JavaScript büyük küçük harfe duyarlıdır. Yani büyük harfle yazılan bir kelime küçük harfle yazılan bir kelimeyle aynı değildir. Örneğin;
var x = 5;
var X = 10;
console.log(x); // Çıktı: 5
console.log(X); // Çıktı: 10
18) JavaScript kullanarak nasıl form gönderilir?
JavaScript kullanarak bir form göndermek için genellikle iki yaygın yöntem kullanılır. Bunlar;
a) Form Elemanlarını Kullanarak: HTML form elemanlarını kullanarak ve bir submit event handler ekleyerek formu gönderebiliriz. Örneğin;
<form id="myForm">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event){
event.preventDefault(); // Formun otomatik gönderilmesini önler
var formData = new FormData(this); // Form verilerini alır
// Form verilerini işleyebilir veya gönderebilirsiniz
console.log(formData.get('username'));
console.log(formData.get('password'));
// Örneğin, formu bir API'ye gönderebilirsiniz
});
</script>
b) XMLHttpRequest veya Fetch API Kullanarak: XMLHttpRequest veya Fetch API kullanarak doğrudan form verilerini bir sunucuya gönderebiliriz. Örneğin;
<form id="myForm">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="button" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
var formData = new FormData(document.getElementById('myForm'));
fetch('submit.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
// Sunucudan gelen yanıtı işleyebilirsiniz
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
19) JavaScript’te bir elementin style veya class’ı nasıl değiştirilir?
JavaScript’te bir HTML elementinin stilini veya sınıfını değiştirmek için iki temel yöntem bulunmaktadır. Bunlar,style
ve classList
özelliğidir.
a) Style Özelliği Kullanarak:
// Bir elementin stilini doğrudan değiştirme
document.getElementById("elementId").style.color = "red";
document.getElementById("elementId").style.fontSize = "20px";
// Birden fazla stil özelliği ayarlama
document.getElementById("elementId").style.cssText = "color: red; font-size: 20px;";
// Alternatif olarak, bir elementin stil özelliğini bir değişkene atayarak değiştirebilirsiniz
var element = document.getElementById("elementId");
element.style.color = "red";
element.style.fontSize = "20px";
b) ClassList Özelliği Kullanarak:
// Bir elementin sınıfını eklemek
document.getElementById("elementId").classList.add("newClass");
// Bir elementin sınıfını kaldırmak
document.getElementById("elementId").classList.remove("oldClass");
// Bir elementin sınıfını değiştirmek
document.getElementById("elementId").classList.replace("oldClass", "newClass");
// Bir elementin sınıflarını kontrol etmek
var element = document.getElementById("elementId");
if (element.classList.contains("className")) {
// Sınıf varsa yapılacak işlemler
}
20) Local storage ve session storage kavramları nedir?
Local storage ve session storage, web tarayıcılarında kullanılan yerel depolama mekanizmalarıdır ve JavaScript kullanılarak tarayıcıda veri depolamak için kullanılırlar. Bunlar tarayıcıda bulunan key-value şeklinde veri depolarlar.
a) Local Storage: Veriler, tarayıcı kapandığında veya bilinçli bir şekilde silinmediği sürece kalır. Aynı origin (protokol, domain, port) altında çalışan tüm sayfalar tarafından erişilebilir. Kullanımı için localStorage
nesnesini kullanarak key-value çiftlerini depolayabilir ve alabiliriz. Örneğin;
// localStorage'a veri eklemek
localStorage.setItem('key', 'value');
// localStorage'dan veri almak
var value = localStorage.getItem('key');
// localStorage'dan bir anahtarı silmek
localStorage.removeItem('key');
// Tüm localStorage verilerini temizlemek
localStorage.clear();
b) Session Storage: Tarayıcının tek bir oturum boyunca veri depolamak için kullanılır. Oturum sona erdiğinde veya tarayıcı kapatıldığında, depolanan veriler otomatik olarak temizlenir. Yalnızca aynı sekme veya pencere içindeki sayfalar tarafından erişilebilir. Kullanımı local storage’a benzerdir ancak veriler oturumun sonlanmasıyla birlikte otomatik olarak temizlenir. Örneğin;
// sessionStorage'a veri eklemek
sessionStorage.setItem('key', 'value');
// sessionStorage'dan veri almak
var value = sessionStorage.getItem('key');
// sessionStorage'dan bir anahtarı silmek
sessionStorage.removeItem('key');
// Tüm sessionStorage verilerini temizlemek
sessionStorage.clear();
Son olarak hassas verilerin depolanması veya güvenlik gereksinimleri olan durumlarda dikkatli kullanılmalıdır.
21) Local storage’de hangi tür veri tutarız? Elimizdeki veri uygun değilse ne yaparız?
Local Storage’da genellikle string verileri tutarız. Ancak, JSON formatında serileştirilmiş nesneleri de saklamak mümkündür. Örneğin; kullanıcı tercihleri, oturum bilgileri, kullanıcı profili gibi verileri saklayabiliriz.
Eğer elimizdeki veri uygun değilse öncelikle veriyi uygun formata dönüştürmek gerekir. String dışındaki veri türlerini (nesne, dizi, number) saklamak için genellikle JSON.stringify()
ve JSON.parse()
metotlarından yararlanırız. Bu yöntemler sayesinde nesneleri JSON formatına dönüştürebilir ve saklayabiliriz. Örneğin;
// Nesne örneği
var user = { name: 'John', age: 30 };
// JSON.stringify() kullanarak nesneyi JSON formatına dönüştürüp localStorage'a eklemek
localStorage.setItem('user', JSON.stringify(user));
// JSON.parse() kullanarak localStorage'dan nesneyi geri almak
var retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser); // { name: 'John', age: 30 }
22) ES6 ile JavaScript’e gelen özellikler nelerdir?
ES6, (ECMAScript 2015) JavaScript diline bir dizi yeni özellikler ekleyen bir standarttır. İşte ES6 ile gelen bazı önemli özellikler;
a) Arrow Fonksiyonlar: Kısa ve okunabilir fonksiyon tanımlamak için kullanılır. Örneğin;
// ES5
function add(a, b) {
return a + b;
}
// ES6 (Arrow Function)
const add = (a, b) => a + b;
b) Let ve Const Değişkenleri: Let ve const ile block kapsamlı değişkenler tanımlanabilir.
c) Template Literals: String ifadeleri içinde değişkenleri ve ifadeleri daha okuabilir bir şekilde birleştirmek için kullanılır. Örneğin;
// ES5
var name = "John";
console.log("Hello, " + name + "!");
// ES6
const name = "John";
console.log(`Hello, ${name}!`);
d) Destructuring: Nesneleri veya dizileri parçalara ayırmak için kullanılır. Örneğin;
// ES5
var person = { name: "John", age: 30 };
var name = person.name;
var age = person.age;
// ES6
const person = { name: "John", age: 30 };
const { name, age } = person;
e) Spread ve Rest: Dizileri veya nesneleri açmak veya toplamak için kullanılır. Örneğin;
// ES6 (Spread Operator)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// ES6 (Rest Operator)
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
f) Class: Nesne tabanlı programlamada sınıfları tanımlamak için kullanılır. Örneğin;
// ES5
function Person(name, age) {
this.name = name;
this.age = age;
}
// ES6 (Class)
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
23) JavaScript’te data fetching yöntemleri nelerdir?
JavaScript’te veri alma yöntemleri çeşitlidir ve uygulamamızın gereksinimlerine bağlı olarak farklı yöntemleri kullanabiliriz. Bunlardan birkaç tanesini örnek vermek gerekirse;
a) XMLHttpRequest: Bu eski bir yöntemdir ancak hala kullanılmaktadır. XMLHttpRequest nesnesi kullanılarak sunucudan veri alınabilir. Örneğin;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("GET", "https://example.com/data", true);
xhttp.send();
b) Fetch API: Fetch API, modern tarayıcılarda kullanılan bir yöntemdir. Promise tabanlıdır ve daha kolay bir kullanım sunar. Örneğin;
fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
c) Axios: Axios, basit ve güçlü bir HTTP istemci kütüphanesidir. Fetch API’a benzer bir kullanıma sahiptir ancak daha fazla özellik sunar ve geniş tarayıcı desteğine sahiptir. Örneğin;
axios.get('https://example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Error fetching data:', error));
d) Async/Await ile Fetch: Fetch API’i async ve await keywordleri ile birlikte kullanarak daha okunaklı ve yönetilebilir bir şekilde kullanabiliriz. Örneğin;
async function fetchData() {
try {
const response = await fetch('https://example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
24) JavaScript’te fonksiyon türleri nelerdir?
Öncelikle fonksiyonlar, bir işlevi yerine getirmek için tasarlanmış olan kod blokları olarak düşünebiliriz. 3 çeşit fonksiyon vardır, bunlar;
a) Function Declaration: JavaScript’te fonksiyon tanımlamanın en temel yoludur. Diğer ismiyle function statement olarak da bilinir. Bu fonksiyon, dosyanın herhangi bir yerinde tanımlanabilir ve çağrılabilir. Örneğin;
function greet(name) {
console.log("Hello, " + name + "!");
}
b) Function Expression: Bir fonksiyonun bir değişkene atanmasına ve daha sonra bu değişkenin fonksiyon olarak kullanılmasına izin verir. Örneğin;
const add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // Output: 5
c) Arrow Function: ES6 ile birlikte gelen bir JavaScript syntaxıdır. Arrow fonksiyonlar geleneksel fonksiyon ifadelerine benzer bir şekilde işlevsellik sağlar. Ek olarak daha kısa bir syntax sağlar ancak en önemli özelliği this ile olan ilişkisidir. Basit bir örnek vermek gerekirse;
const add = (a, b) => {
return a + b;
};
console.log(add(2, 3)); // Output: 5
Fonksiyonlar ile ilgili daha detaylı bilgiyi aşağıdaki yazıdan bulabilirsiniz.
25) JavaScript’te callback fonksiyon nedir?
Callback fonksiyonlar, bir fonksiyonun diğer bir fonksiyona parametre olarak geçirilmesi ve ardından çağrılması işlemidir. Bu JavaScript’te fonksiyonların first class function olduğunu gösterir. Callback fonksiyonların temel amacı, bir fonksiyonun tamamlandığında veya belirli bir olay gerçekleştiğinde çağrılacak olan bir fonksiyonu belirtmektedir. Asenkron işlemler ve eventlar gibi durumlarda callback fonksiyon kullanılır. Örneğin;
// Basit bir callback fonksiyonu tanımlayalım
function sayHello(name, callback) {
console.log("Hello, " + name + "!");
// Callback fonksiyonunu çağıralım
callback();
}
// Callback olarak kullanılacak olan fonksiyon
function greetAgain() {
console.log("Nice to see you again!");
}
// sayHello fonksiyonunu çağırırken callback olarak greetAgain fonksiyonunu kullanalım
sayHello("John", greetAgain);
26) JavaScript’te first class functions nedir?
First class functions, bir programlama dilinde fonksiyonları diğer veri türleri gibi kullanılabilir hale getiren bir özelliktir. Bu durum; fonksiyonları değişkenlere atayabilme, diğer fonksiyonlara parametre olarak geçebilme ve bir fonksiyonun başka bir fonksiyonun return etmesine olanak sağlar. JavaScript, first class funcitons özelliğini destekleyen bir dildir.
a) Fonksiyonlar değişkenlere atanabilir;
const greet = function() {
console.log("Hello!");
};
const sayHello = greet;
sayHello(); // "Hello!" çıktısını verir
b) Fonksiyonlar bir başka fonksiyonun içine yerleştirilebilir;
function greet() {
return function() {
console.log("Hello!");
};
}
const sayHello = greet();
sayHello(); // "Hello!" çıktısını verir
c) Fonksiyonlar diğer fonksiyonlara parametre olarak geçilebilir;
function greet(callback) {
callback();
}
function sayHello() {
console.log("Hello!");
}
greet(sayHello); // "Hello!" çıktısını verir
d) Bir fonksiyon, başka bir fonksiyonu return edebilir;
function createGreeting() {
return function() {
console.log("Hello!");
};
}
const sayHello = createGreeting();
sayHello(); // "Hello!" çıktısını verir
Bu özellikler, JavaScript’te fonksiyonların esnek bir şekilde kullanılmasını sağlar ve fonksiyonların işlevselliğinin daha geniş bir şekilde kullanılmasına imkan tanır.
27) JavaScript’te promise nedir?
JavaScript’te Promise, asenkron işlemleri temsil eden ve gelecekte tamamlanacak bir işlemin nihai sonucunu temsil eden bir nesnedir. JavaScript’te asenkron kodun daha okunabilir, yönetilebilir ve daha az karmaşık olmasını sağlar. Promiseler, callbacklerin yerini alarak daha düzenli, okunabilir ve yönetilebilir bir asenkron işlem yönetimi sağlar. Örneğin;
// Bir asenkron işlemi temsil eden bir Promise oluşturma
const myPromise = new Promise((resolve, reject) => {
// Bir süre sonra işlemi başarılı bir şekilde tamamla (resolve)
setTimeout(() => {
resolve("İşlem başarıyla tamamlandı!");
}, 2000);
});
// Promise'in sonucunu bekleyen ve işlem tamamlandığında çalışacak kod bloğu
myPromise.then((result) => {
console.log(result); // İşlem başarıyla tamamlandı!
}).catch((error) => {
console.error(error); // Hata durumunda çalışacak kod bloğu
});
28) Arrow fonksiyonun sağladığı kolaylıklar nelerdir?
a) Kısa ve Net Syntax: Arrow fonksiyonlar, daha kısa bri syntax’a sahip oldukları için kodun daha net ve okunabilir olmasını sağlar.
a) this Bağlamı: Arrow fonksiyonların kendilerine ait bir this bağlamı oluşturmazlar. Bu nedenle, bir objenin içinde kullanıldığında bile, kapsayıcı olanı miras alırlar. Böylece bind, call ve apply gibi yöntemlerle this bağlamını ayarlamak için kullanım ihtiyacını azaltır. Arrow fonksiyonun belki de en önemli özelliği this ile olan ilişkisidir.
a) Fonksiyon Dönüşü (return): Arrow fonksiyonların tek bir ifadeyi return olmaksızın otomatik olarak döndürmesi anlamına gelir. Geleneksel fonksiyon ifadelerinden return keywordü kullanmak gerekir ancak arrow fonksiyonları, tek bir ifadeyi doğrudan yazdığımızda bu ifadeyi otomatik olarak return eder.
29) Higher-order function nedir, nerelerde kullanılır?
Higher-order function, en az bir fonksiyonu parametre olarak alan veya bir fonksiyonu döndüren fonksiyondur. Yani, higher-order functions, diğer fonksiyonları manipüle eden veya onlarla çalışan fonksiyonlardır.
Higher-order functions genellikle şu durumlarda kullanılır;
a) Callback fonksiyonlar: Bir fonksiyon, diğer bir fonksiyonu argüman olarak alır ve bu fonksiyonu bir yerde çağırır. Bu, özellikle asenkron işlemler ve event handler’lar gibi durumlarda yaygın olarak kullanılır.
// Callback fonksiyon örneği
function processArray(array, callback) {
array.forEach(callback);
}
const myArray = [1, 2, 3, 4, 5];
processArray(myArray, (item) => console.log(item * 2)); // Her elemanı ikiyle çarp
b) Fonksiyonel programlama: Higher-order functions, fonksiyonel programlama paradigmasıyla uyumludur ve fonksiyonel programlamanın temel bir parçasıdır. Bu paradigmada, fonksiyonlar first class function olarak kabul edilir ve higher-order functions, kodun daha modüler, esnek ve okunabilir olmasına olanak tanır.
// Fonksiyonel programlama örneği
const numbers = [1, 2, 3, 4, 5];
// Map fonksiyonu: Bir fonksiyonu her bir dizi öğesi için çağırır ve sonuçları yeni bir dizi olarak döndürür
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
// Filter fonksiyonu: Bir koşulu sağlayan her bir dizi öğesini yeni bir dizi olarak döndürür
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
c) Fonksiyonları manipüle etme: Higher-order functions, fonksiyonları oluşturmak, birleştirmek, dönüştürmek veya kısmen uygulamak gibi işlemleri gerçekleştirmek için kullanılabilir.
// Fonksiyonları manipüle etme örneği
function add(a, b) {
return a + b;
}
function partial(func, ...args) {
return function(...rest) {
return func.apply(null, args.concat(rest));
};
}
const add5 = partial(add, 5); // İlk argümanı 5 olan yeni bir fonksiyon oluştur
console.log(add5(3)); // 5 + 3 = 8
30) IIFE (Immediately Invoked Function Expression) nedir?
IIFE, JavaScript’te hemen çağrılan bir fonksiyon ifadesidir. Bu, bir fonksiyon tanımlandıktan hemen sonra çağrılarak çalıştırılmasını sağlar. Örneğin;
(function() {
console.log("Bu bir IIFE'dir.");
})();
31) Primitive ve reference type farkı nedir?
Primitive (ilkel) ve reference (referans) type arasındaki en temel fark, bellekte tutulma biçimleridir.
a) Primitif Tipler: Primitif veri tipleri, bellekte bir değeri doğrudan tutarlar. Yani birbiriyle ilişkilendiren bir değeri temsil eder ve bu değeri doğrudan belleğe yerleştirir. Ayrıca bu veri tipleri belleğin stack bölgesinde tutulur. JavaScript’te ilkel veri tipleri şunlardır; number, string, boolean, null, undefined ve symbol.
b) Referans Tipler: Referans veri tipleri, bellekte bir değeri gösteren bir referansı (adresi) saklarlar. Yani bellekte bir nesnenin verilerini ve yöntemlerini içerirler ve bu nesnelere erişim, referansları üzerinden yapılır. Ayrıca bu veri tipleri belleğin heap bölgesinde tutulur. JavaScript’te referans veri tipleri şunlardır; object, array, function vs.
Örnek verecek olursak bir sayı, (primitif tip) doğrudan bellekte saklanırken bir dizi, (referans tip) bellekte bir referans olarak saklanır ve bu referans dizinin gerçek değerine (elemanlarına) erişmek için kullanılır. Örneğin;
// Primitive tür örneği
let num1 = 10;
let num2 = num1; // num1'in değeri num2'ye kopyalanır
num1 = 20; // num1'i değiştirir
console.log(num1); // 20
console.log(num2); // 10 (num2, num1'in orijinal değerini korur)
// Referans tür örneği
let arr1 = [1, 2, 3];
let arr2 = arr1; // arr1'in referansı arr2'ye kopyalanır
arr1.push(4); // arr1'e bir eleman ekler
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]
// (arr1 ve arr2 aynı diziyi gösterir, bu yüzden değişiklikler her ikisini de etkiler)
32) Heap ve stack nedir?
Heap ve stack, bilgisayar belleğinin (RAM’in) iki farklı bölgesidir ve programların çalışması sırasında farklı amaçlar için kullanılırlar.
a) Stack: Verilerin sıralı bir şekilde saklandığı ve yönetildiği belleğin bir bölgesidir. Stack, LIFO yani son giren ilk çıkar mantığına dayanır. Genellikle programın çalışma zamanında ihtiyaç duyulan geçici verileri saklamak için kullanılır. Örneğin, fonksiyon çağrıları, fonksiyonların yerel değişkenleri, fonksiyon parametreleri ve geçici hesaplamalar gibi veriler stack’te saklanır. Stack, verilerin hızlı erişimine ve hızlı işlenmesine olanak tanır. Ancak, stack sabit bir boyuta sahiptir ve verilerin boyutu derleme zamanında belirlenir. Bu nedenle genellikle sabit boyutlu veri yapıları için kullanılır.
b) Heap: Dinamik olarak oluşturulan nesnelerin, dizilerin yanı sıra büyük veri yapılarının ve diğer karmaşık verilerin bellekte saklandığı bölgedir. Heap’te saklanan verilere doğrudan erişim yapılamaz. Bunu yerine değişken referansını kullanılır. Ayrıca heap, bellekte daha büyük alan kaplar ve bu sebepten daha yavaş erişim sağlar. Yani heap’de olan bir veriye erişmek stack’de olan bir veriye erişmeye göre daha maliyetlidir. Stack’ten diğer bir farkı ise stack’te veri hemen silinirken heap’deki veri garbage collector algoritmasına bağlıdır.
33) JavaScript multi-thread midir yoksa single-thread midir?
JavaScript özünde single-thread bir yapıya sahiptir, yalnızca tek bir iş parçacığını (thread) kullanarak çalışır. Yani tek bir işlemci çekirdeği kullanması anlamına gelir. Bu nedenle, JavaScript’te aynı anda birden fazla işlem gerçekleştirmek mümkün değildir. Örneğin, uzun süren bir hesaplama işlemi yapıldığında, tarayıcı diğer işlemleri yürütmeyi duraklatır ve arayüzün tepki vermemesine neden olabilir. Ancak tarayıcı ortamında, asenkron programlama teknikleri (callback fonksiyonlar, promise, async/await) kullanılarak çoklu görevler eş zamanlı olarak yönetilebilir. Bu, JavaScript’in single-thread olmasına rağmen, iş parçacıklarının bloke olmadan ve eş zamanlı olarak çalışmasını sağlar.
34) Hoisting kavramı nedir?
Öncelikle hoisting’in kelime anlamı “yukarı çekmek, kaldırmak” anlamına gelmektedir. Aslında kelimenin anlamı hoisting davranışını özetler nitelikte. JavaScript’in hoisting davranışı, yazdığımız kodlarda declarationları en tepeye çıkarmakta. Örnek verecek olursak var ile tanımladığımız bir değişken veya function declaration ile oluşturduğumuz bir fonksiyon, bunlarda hoisting davranışı geçerli olur. Örneğin;
// var x;
console.log(x); // undefined
var x = 5;
Yukarıdaki örneğe bakacak olursak x değişkeni ekrana yazdırılmadan önce tanımlanmış gibi davranır ve “undefined” olarak kabul edilir. Yani yorum satırı olarak yazdığım ifade varmış gibi bir davranış sergiliyor. Aynı şekilde bir de function declaration ile ilgili bir örnek verecek olursak;
sayHello(); // output -> Hello World.
function sayHello(){
console.log('Hello World.');
}
Yukarıdaki örnekte, sayHello
fonksiyonu tanımlanmadan önce çağrıldığı halde, kod sorunsuz bir şekilde çalışıyor. Çünkü function declaration’da da hoisting davranışı sergilenir.
35) Call Stack, Event Loop, Callback Queue kavramlarını açıklayın.
a)Call Stack: JavaScript’te fonksiyon çağrılarını depolamak ve yönetmek için LIFO mantığıyla çalışan bir veri yapısıdır. Daha kısa bir tanım yapacak olursak fonksiyonların çalışma sırasını gösterir. Çalışma mantığı ise şu şekildedir; Bir fonksiyon çağrıldığında, o fonksiyonun bilgileri (call frame) call stack’e eklenir. Bu bilgiler; fonksiyonun adı, parametreleri ve içinde bulunduğu kapsamdır. Fonksiyon çalışması bittiğinde ise bu bilgiler call stack’ten çıkarılır.
b)Event Loop: JavaScript’in asenkron programlama modelini yöneten ve iş parçacıklarını (tasks) işleyen bir mekanizmadır. JavaScript, tüm işlemleri tek bir iş parçacığı üzerinde yürütür yani single thread bir yapıya sahiptir. Ancak akıllı veri yapıları kullanarak, bize çoklu iş parçacığı gibi bir izlenim verir. Event loop, asenkron programlamanın temelini oluşturur ve sürekli olarak çalışan bir döngüdür. Ana görevi ise, program akışını yönetmek ve asenkron işlemleri kontrol etmektir. Bu görevi yerine getirirken, call stack ve callback queue gibi iki kritik mekanizmayla işbirliği yapar. Önreğin bir asenkron işlem tamamlandığında, ilgili callback function callback queue’e eklenir. Event loop, bu sırada call stack boşsa bu fonksiyonu hemen call stack’e ekler. Bu sayede asenkron işlemin sonucu doğrudan işlenir ve programın akışı bloklanmadan devam eder.
c)Callback Queue (Task Queue): JavaScript’in asenkron programlama modelinde kullanılan ve event loop ile birlikte çalışan bir veri yapısıdır. Bu kuyruk, işlemi tamamlanmış olan callback fonksiyonlarının bekletildiği sıralı bir yapıdır. Yani JavaScript tarafından çağrılmayı bekleyen callback fonksiyonlarının sıralı bir şekilde tutulduğu kuyruktur. FIFO (ilk giren ilk çıkar) prensibiyle çalışır. Özellikle tarayıcılar; dosya okuma, kullanıcı etkileşimleri, ağ istekleri veya zamanlayıcılar gibi işlemleri asenkron olarak yönetirken callback queue kullanır. Bu sayede, tarayıcı çalışmasını kesmeden diğer işlemlere devam edebilir ve callback queue’daki fonksiyonları sırayla çalıştırarak istenilen işlemleri gerçekleştirir. Aşağıdaki görselle daha iyi anlaşılacağını düşünüyorum.
36) JavaScript’te işler asenkron mu ilerler?
Hayır, JavaScript her zaman senkron çalışır yani kodlar yukarıdan aşağıya satır satır ilerler ve bir satırdaki işlem bitmeden diğerine geçilmez. Şunu hiçbir zaman unutmamak lazım, JavaScript single-thread ve senkron çalışır. Fakat asenkron işlemleri yönetmek için genellikle callback fonksiyon, promise ve async/await gibi yapılar kullanılır. Ayrıca bu asenkron yapıyı yöneten event loop, task queue’yu izler ve sırayla iş parçacıklarını alır, stack’teki fonksiyon çağrılarını beklerken uygun zamanda stack’e ekler. Bu sayede, asenkron işlemler sırayla işlenir ve programın akışı kesintiye uğramadan devam eder. Böylece bizlere asenkron izlenimi verir.
37) JavaScript’te event listener kavramını açıklayın.
JavaScript’te event listener, belirli bir olayın (event) gerçekleştiğini dinlemek ve bu olaya yanıt vermek için kullanılan bir yapıdır. Örneğin bir butona tıklama, bir klavye tuşuna basma vs. gibi bir olay gerçekleştiğinde event listener bu olayı algılar ve tanımlanan bir fonksiyonu çalıştırır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click me!</button>
<script>
// Butona bir event listener ekleyelim
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
</body>
</html>
Yukarıdaki örnekten de anlaşılacağı üzere event listener’lar, kullanıcı etkileşimlerine yanıt vermek ve web uygulamarındaki dinamik davranışları oluşturmak için yaygın olarak kullanılır.
38) Bir fonksiyonu düzenli aralıklarla çalıştırmamızı sağlayan fonksiyon hangisidir?
JavaScript’te belirli aralıklarla bir fonksiyonu çalıştırmak için setInterval()
fonksiyonu kullanılır. Bir saat veya sayaç güncellemesi gibi görevler için kullanılabilir. Örnek verecek olursak;
setInterval(function() {
// Buraya düzenli olarak çalıştırılmasını istediğimiz kodları yazabiliriz
console.log("Bu fonksiyon her saniyede bir çalışacak.");
}, 1000); // 1000 milisaniye = 1 saniye
39) Bir fonksiyonun belirli bir gecikmeden sonra çalıştırmamızı sağlayan fonksiyon hangisidir?
Belirli bir gecikmeden sonra bir fonksiyonu çalışturmak için JavaScript’te setTimeout()
fonksiyonu kullanılır. Bu fonksiyon, belirtilen süre geçtikten sonra bir fonksiyonu çağırır. Bir animasyonun başlaması veya kullanıcının bir işlemi onaylaması için beklenmesi gibi durumlarda kullanılır. Örnek verecek olursak;
setTimeout(function() {
// Belirli bir gecikmeden sonra çalışmasını istediğimiz kodlar.
console.log("Bu fonksiyon 2 saniye sonra çalışacak.");
}, 2000); // 2000 milisaniye = 2 saniye
40) JavaScript’te classlar nedir, neden ihtiyaç duyulmuştur?
ES6 ile birlikte gelen JavaScript’te classlar, nesne yönelimli programlama (OOP) konseptini desteklemek için kullanılan bir yapıdır. Yani OOP, properties ve fonksiyonları bir araya getirerek daha modüler, daha organize ve daha sürdürülebilir kod yazmamızı sağlar. Ayrıca class’lar, kalıtım (inheritance) gibi OOP kavramlarını destekler ve bir class’ın diğer class’lardan özelliklerini ve davranışlarını kalıtım yoluyla almasını sağlar. Böylece kodun yeniden kullanılabilirliğini artırır ve kodun daha az tekrar edilmesini sağlar. Şunu da unutmamalıyız ki JavaScript’te class’lar, özel bir fonksiyondur ve nesnelerin şablonu görevi görür.
41) Constructor nedir?
Consturctor, bir nesne oluşturulurken çağrılan özel bir fonksiyondur. Bu fonksiyon, bir classın veya bir nesne türünün örneklerini oluşturmak için kullanılır. Constructor fonksiyon, bir nesnenin properties ve metotlarını tanımlar. Ayrıca JavaScript’te, constructor fonksiyonlar new keywordü ile çağrılır. Son olarak constructor fonksiyonları, OOP yaklaşımında önemli bir rol oynarlar çünkü, bu sayede aynı özelliklere sahip birden fazla nesne oluşturabiliriz bu da kod tekrarını azaltır ve kodun daha düzenli ve yönetilebilir olmasını sağlar. Bir örnek verecek olursak;
function Person(name, age) {
this.name = name;
this.age = age;
}
// Person nesnesi oluşturmak için constructor fonksiyonunu çağırıyoruz
var person1 = new Person("John", 30);
console.log(person1.name); // Çıktı: John
console.log(person1.age); // Çıktı: 30
Yukarıdaki örneğe bakacak olursak, Person isminde bir constructor fonksiyonu tanımladık. Bu fonksiyon, name ve age adında iki parametre alıyor ve bu parametreleri this keywordü ile nesnenin özelliklerine atıyoruz. New keywordü ile person fonksiyonunu çağırdığımızda, bu fonksiyon bir person nesnesi oluşturur ve bu nesnenin name ve age özelliklerini belirledikten sonra döndürür.
42) New keywordü ne işe yarar?
JavaScript’te new keywordü ile bir nesne oluşturduğumuzda, aşağıdaki adımlar sırayla gerçekleşir.
a) Yeni boş nesne oluşturma: JavaScript’te, new keywordü ile bir nesne oluşturulmaya çalışıldığında öncelikle boş bir nesne oluşturur.
b) Constructor fonksiyonun çağrılması: Oluşturulan boş nesne, constructor fonksiyonuna parametre olarak geçirilir. Bu fonksiyon, nesnenin özelliklerini ve metotlarını tanımlar.
c) This keywordünün atanması: Constructor fonksiyonu içinde this keywordü, oluşturulan yeni nesneye referans verir. Bu sayede, constructor fonksiyonu içinde this kullanarak nesnenin özelliklerini ve metotlarını tanımlayabiliriz.
d) Nesnenin döndürülmesi: Constructor fonksiyonu tamamlandığında, JavaScript otomatik olarak oluşturulan nesneyi döndürür. Bu nesne, new keywordü ile çağrılan bir fonksiyonun sonucudur.
e) Nesnenin atanması: Döndürülen nesne, new keywordü ile çağrılan fonksiyonun sonucu olarak atanır. Bu sayede, oluşturulan nesneyi bir değişkene atayabiliriz.
Yukarıda anlatılanları bir örnek üzerinde görecek olursak;
function Person(name, age) {
this.name = name;
this.age = age;
}
var person1 = new Person("John", 30);
a) Boş bir person nesnesi oluşturulur.
b) Person consturctor fonksiyonu çağrılır ve name ve age özellikleri bu nesneye atanır.
c) This keywordü, oluşturulan person nesnesine referans verir.
d) Consturctor fonksiyonu tamamlandığında oluşturulan person nesnesi döndürülür.
e) Döndürülen person nesnesi, person1 değişkenine atanır.
43) This kavramını açıklayın.
This, bir fonksiyonun veya metodun çağrıldığı bağlamı (context) temsil eder. Bu bağlam, fonksiyonun çağrıldığı nesneyi veya genel bağlamı (global context) temsil eder. Yani bir fonksiyonun veya metodun nasıl çağrıldığına bağlı olarak değişen söz konusu nesnedir. Son olarak fonksiyonlar çalışmadan this’lik herhangi bir şey yok, fonksiyonlar çalıştıktan sonra karar veriyor. 2 konsepti vardır;
a) Objeye bağlı fonksiyon durumu ki biz bunlara metot diyoruz. Bu durumda çalıştırıldığı zaman this, o an ki söz konusu olan objeye referans verir.
b) Diğer hemen hemen tüm durumlarda global’e referans verir. (browser’da window, node.js’te ise global) Biz tarayıcıda çalıştığımız için window nesnesine referans verir.
This ile ilgili daha detaylı bilgiyi aşağıdaki yazıdan bulabilirsiniz.
44) Classlarda kullanılan super metodu ne işe yarar?
JavaScript’te super keywordu, class based programlama yaklaşımında önemli bir rol oynar. Super keywordu, bir alt classın (subclass) üst classını (superclass) çağırmak için kullanılır. Bu, alt classın üst classının metot ve özelliklerini miras almasını (inherit etmesini) sağlar. Bir örnekle verecek olursak;
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
constructor(name) {
super(name); // Üst sınıfın constructor fonksiyonunu çağırıyoruz
}
speak() {
console.log(this.name + ' barks.');
}
}
let dog = new Dog('Rex');
dog.speak(); // Rex barks.
45) Call, apply, bind kavramlarını açıklayın.
JavaScript’te call, apply ve bind metotlarına geçmeden önce this kavramının iyi anlaşılması gereklidir. Bir tanım yapacak olursak call, apply ve bind metotları, bir fonksiyonun this bağlamını ve parametrelerini nasıl yöneteceğimizi kontrol etmemize olanak tanır. Yani bu üç metot, fonksiyonları farklı contextlerde çağırmak veya yeni fonksiyonlar oluşturmak için kullanılır.
a)Call: Bir fonksiyonu belirli bir this değeri ve ayrı ayrı verilen parametrelerle anında çağırır. Yani bu metot, bir fonksiyonu çağırırken this bağlamını manuel olarak ayarlamamızı sağlar ve parametreleri tek tek, virgülle ayırarak geçmemize olanak tanır. Örneğin;
function greet(greeting, punctuation) {
console.log(greeting + ", " + this.name + punctuation);
}
const person = { name: "Alice" };
greet.call(person, "Hello", "!"); // Output: "Hello, Alice!"
greet.call(person, “Hello”, “!”) ifadesinde;
1)greet fonksiyonu person objesi bağlamında (this olarak) çalıştırılır.
2)greeting parametresi “Hello” olur.
3)punctuation parametresi “!” olur.
Bu durumda this.name ifadesi, person objesindeki name özelliğine (Alice) referans verir. Böylece console’da “Hello, Alice!” yazdırılır. Özetle call metodu, bir fonksiyonu anında çalıştırırken this bağlamını belirlemede ve parametreleri tek tek geçmede bize imkantanır.
b)Apply: Apply metodu, call metoduna çok benzer. Ancak call metodundan farklı olarak parametreleri bir dizi olarak alır. Bu, bir dizi parametreyi bir fonksiyona geçmeyi kolaylaştırır. Örneğin;
function greet(greeting, punctuation) {
console.log(greeting + ", " + this.name + punctuation);
}
const person = { name: "John" };
greet.apply(person, ["Hello", "!"]); // Output: "Hello, John!"
greet.apply(person, [“Hello”, “!”]) ifadesinde;
1)greet fonksiyonu, person objesi bağlamında (this olarak) çalıştırılır.
2)fonksiyona geçilen parametreler bir dizi içinde verilir. [“Hello”, “!”]
3)bu dizideki ilk eleman (“Hello”) greeting parametresine, ikinci eleman (“!”) ise punctuation parametresine karşılık gelir.
Özetle this.name ifadesi, person objesindeki name özelliğine (John) referans eder ve console’a “Hello, John!” yazdırılır. Özetle apply metodu, this’i hangi bağlamda çalıştırılacağını belirlememizi sağlar ve parametreleri (call metodundaki gibi tek tek değil) bir dizi içinde alır.
c)Bind: Bind metodu, this bağlamını belirleyerek bu bağlamla yeni bir fonksiyon oluşturmamızı sağlar. Ancak bu yeni fonksiyon hemen çalıştırılmaz. Daha sonra çalıştırılmak üzere saklanabilir. Örneğin;
const person = {
name: "Alice",
greet: function (greeting) {
console.log(greeting + ", " + this.name);
}
};
const greetAlice = person.greet.bind(person, "Hello");
greetAlice(); // Output: "Hello, Alice"
person.greet.bind(person, “Hello”) ifadesinde;
1)bind metodu, this bağlamını person objesi olarak belirler.
2)greeting parametresi olarak “Hello” değeri sabitlenir.
3)greetAlice fonksiyonu oluşturulur ve bu fonksiyon çağrıldığında greet fonksiyonu person objesi bağlamında çalışır ve “Hello, Alice” çıktısını verir.
Özetle bind, fonksiyonun this bağlamını ve parametreleri sabitlememize yardımcı olur. Ayrıca mevcut bir fonksiyonun değiştirilemez bir kopyasını oluşturur, böylece orijinal fonksiyonun davranışı değiştirilmez.
46) Prototype, prototype inheritance ve prototype chain kavramlarını açıklayın.
JavaScript’te prototype ve prototype inheritance kavramları, nesnelerin ve fonksiyonların nasıl çalıştığına ve birbirlerinden nasıl miras aldıklarına dair temel mekanizmaları oluşturur. Bu kavramlar, JavaScript’in nesne yönelimli programlamasını ve esnekliğini sağlar.
a) Prototype: Prototype, Javascript’te her fonksiyonun sahip olduğu bir özelliktir. Aslında bir objedir ve bu objeye, fonksiyonun oluşturduğu diğer tüm objeler (örneğin, constructor ile oluşturulan objeler) tarafından erişilebilir. Şimdi yukarıda hem özelliktir hem de objedir dedik. Bunu biraz daha açalım.
Öncelikle bir özellik (property) olarak prototype’ı açıklayacak olursak, her fonksiyonun (özellikle constructor fonksiyonlarının) bir prototype adında özel bir öelliği vardır. Bu özellik, fonksiyonun prototype’ını yani fonksiyondan türetilen objelerin kalıtım yoluyla erişebileceği şeyleri tanımlar. Örneğin, aşağıda Person.prototype, Person fonksiyonunun bir özelliğidir.
function Person(name) {
this.name = name;
}
console.log(Person.prototype); // Bu, `prototype` property’sine erişir.
Şimdi ise bir object olarak prototype’ı ele alalım. Bu durumda prototype property’sinin değeri aslında bir JavaScript objesidir. Yani, Person.prototype, bir obje olarak tanımlanmış ve diğer objelerin miras alabileceği özellikleri ve metotları barındıran bir nesnedir. Aşağıdaki örnekte Person.prototype bir obje olduğu için, bu objeye yeni özellik ve metotlar ekleyebiliriz.
Person.prototype.sayHello = function() {
console.log("Hello, my name is " + this.name);
};
Yukarıdaki örneğe bakacak olursak sayHello metodu prototype objesine eklenmiştir ve Person fonksiyonundan türetilen tüm objeler bu metoda erişebilir.
Özetle prototype bir property’dir, her fonksiyonun sahip olduğu bir özelliktir. Prototype bir objedir, bu property’nin değeri bir JavaScript objesidir ve diğer objeler tarafından miras alınabilir.
b) Prototype Inheritance: JavaScript’te bir objenin başka bir objeden özellikleri ve metotları miras almasını sağlayan bir mekanizmadır. Bu miras alma işlemi, objeler arasındaki prototype chain üzerinden gerçekleşir. Örneğin bir objede aranan bir özellik veya metod bulunamazsa JavaScript bu özelliği ya da metodu objenin prototype’ında aramaya devam eder. Bu süreç, prototype zinciri boyunca yukarı doğru devam eder.
c) Prototype Chain: JavaScript’te bir objenin kendi özellik veya metotlarını bulmak için kendi prototype’ından başlayarak yukarı doğru diğer prototype’larda arama yaptığı süreçtir. Bu zincirleme arama işlemi, özellik veya metodun tanımlı olduğu bir prototype bulana kadar devam eder. Bu zincirin en tepesinde ise Object.prototype bulunur ve eğer orada da bulunamazsa arama sona erer ve undefined döner.
Object, inheritance ve prototype ile ilgili daha detaylı bilgiyi aşağıdaki yazıdan bulabilirsiniz.
47) Cookie nedir, JavaScript’te cookie nasıl oluşturulur?
JavaScript’te bir cookie oluşturmak için document.cookie
özelliğini kullanabiliriz. Cookie’ler, web sunucu tarafından istemciye gönderilen küçük metin dosyalarıdır. Tarayıcı, bu cookie’leri kullanıcının bilgisayarında saklar ve sunucuya gönderir. Cookie’ler kullanıcı tercihlerini, oturum bilgilerini ve diğer bilgileri saklamak için kullanılır. Cookie oluşturmayı bir örnek ile görelim.
// Cookie oluşturma fonksiyonu
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Örnek: "username" adında bir çerez oluşturalım ve "John" değerini atayalım, 30 gün boyunca geçerli olsun
setCookie("username", "John", 30);
Yukarıdaki kodda setCookie adında bir fonksiyon tanımadık. Bu fonksiyon; name, value ve isteğe bağlı olarak days parametrelerini alır. Bu parametrelerle birlikte bir cookie oluşturulur. Cookine’nin geçerlilik süresi belirtilirse, bu süre boyunca tarayıcıda saklanır. Yani username isminde bir cookie oluşturduk ve John değerini atadık ve bu cookie’nin geçerlilik süresi 30 gün olarak belirledik. Bu basit bir cookie örneği, ancak gerçek uygulamalarda cookie güvenliği ve gizliliği dikkate alınmalıdır. Özellikle kullanıcıya ait özel bilgiler içeren cookie’lerin güvenliği sağlanmalıdır.
48) Undefined ve undeclared değişkenler nelerdir?
JavaScript’te undefined ve undeclared (tanımlanmamış) değişkenler, değişkenlerin tanımlanmamış olduğu durumları ifade eder. Ancak bu iki terim genellikle birbiriyle karıştırılır.
a) Undefined: Bir değişkenin değeri atanmadan önce veya değeri atanmamış bir değişkenin değeri olarak kullanılır. JavaScript, bir değişkenin değeri atanmadan önce bu değişkenin değerini undefined olarak ayarlar.
b) Undeclared: Değişkenler, tanımlanmamış bir değişkenin değerine erişmeye çalıştığımızda ortaya çıkan bir hata durumudur. Bu, genellikle bir değişkenin adını yanlış yazdığımızda veya değişkeni tanımlamadan önce kullanmaya çalıştığımızda meydana gelir.
let myVar;
console.log(myVar); // undefined
console.log(myUndeclaredVar); // ReferenceError: myUndeclaredVar is not defined
Yukarıdaki örnekten de anlaşılacağı üzere myVar değişkeni tanımlandı ancak hiçbir değer atanmadı. Bu nedenle undefined çıktısını aldık.
İkinci örnekte iste myUndeclaredVar adında bir değişken tanımlandığı için, bu değişkene erişmeye çalıştığımızda ReferenceError hatası aldık. Özetle bu iki terim, JavaScript’te değişkenlerin tanımlanmamış olduğu durumları ifade eder. Ancak undefined, bir değişkenin değeri atanmamış olduğunu undeclared ise değişkenin tanımlanmamış olduğunu gösterir.
49) JavaScript’te null ne demektir?
JavaScript’te null, özel bir değerdir ve bir değişkenin değerinin “hiçbir şey” veya “boş” olduğunu göstermek için kullanılır. Yani null değeri, bir değişkenin değerinin açıkça tanımlanmamış olduğunu veya bir değişkenin değerinin “boş” olduğunu göstermek için kullanılır. Özetle null değeri, bir değişkenin değerinin bir nesne, fonksiyon veya herhangi bir değer olmadığını gösterir. Son olarak null değeri, JavaScript’teki değerlerden biri olarak kabul edilir ve undefined ile karıştırılmamalıdır. Çünkü undefined değeri, bir değişkenin değeri atanmadan önce veya değeri atanmamış bir değişkenin değeri olarak kullanılır, null değeri ise bir değişkenin değerinin açıkça “boş” veya “hiçbir şey” olduğunu göstermek için kullanılır.
let myVar = null;
console.log(myVar); // null
let myVar2;
console.log(myVar2) // undefined
50) Alert ile confirm arasındaki fark nedir?
JavaScript’te alert ve confirm fonksiyonları, kullanıcıya mesaj göstermek ve kullanıcıdan bir onay almak için kullanılır. Ancak bu iki fonksiyon arasında önemli farklılıklar vardır ve her biri farklı amaçlar için kullanılır.
a) Alert: Bu fonksiyon, kullanıcıya bir mesaj gösterir ve kullanıcıya bir “Tamam” butonu sunar. Kullanıcı bu butona tıkladığında uyarı penceresi kapanır ve kullanıcıya bir değer döndürülmez. Özetle kullanıcıya bilgi vermek veya kullanıcıyı uyarmak için kullanılır.
b) Confirm: Bu fonksiyon, kullanıcıya bir mesaj gösterir ve kullanıcıya “tamam” ve “iptal” butonu sunar. Kullanıcı “tamam” butonuna tıkladığında, confirm fonksiyonu true değeri döndürür. Kullanıcı “iptal” butonuna tıkladığında, confirm fonksiyonu false değeri döndürür.
Özetle; alert fonksiyonu, kullanıcıya bilgi vermek veya kullanıcıyı uyarmak için kullanılırken confirm fonksiyonu, kullanıcıdan bir onay almak için kullanılır ve kullanıcının cevabına göre farklı işlemler gerçekleştirilir.
51) JavaScript’te nesne nasıl oluşturulur?
a) Object Literal: JavaScript’te nesne oluşturmanın en yaygın ve basit yollarından biridir. Nesneleri doğrudan tanımlamak ve kullanmak için hızlı ve kolay bir yöntemdir. Ayrıca nesneyi oluştururken o nesneye ait değerleri de veriyoruz. Örneğin;
const person = {
name: "John Doe",
age: 30,
greet: function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
};
console.log(person.name); // "John Doe" çıktısını verir
person.greet(); // "Hello, my name is John Doe and I am 30 years old." çıktısını verir
b) Constructor fonksiyonu yardımıyla nesne oluşturma: Constructor fonksiyonu yardımıyla doğrudan nesne oluşturmak mümkündür.
// Person sınıfı tanımlanır
function Person(name, age) {
// constructor fonksiyonu
this.name = name; // 'this' anahtar kelimesi, nesnenin özelliklerini belirtir
this.age = age; // 'this' anahtar kelimesi, nesnenin özelliklerini belirtir
}
// Person nesnesi oluşturulur
const john = new Person("John Doe", 30);
// Person nesnesinin özelliklerine erişilir
console.log(john.name); // "John Doe" çıktısını verir
console.log(john.age); // 30 çıktısını verir
52) JavaScript’te hata türleri nelerdir?
JavaScript’te hataları temsil etmek için çeşitli hata türleri vardır. JavaScript’teki hata türleri genellikle error nesnesinden türetilir ve bu nesnelerin alt sınıfları olarak adlandırılır.
a) Error: Error nesnesi, JavaScript’teki tüm hataların temel sınıfıdır.
throw new Error("Bir hata oluştu.");
b) EvalError: EvalError nesnesi, eval fonksiyonu ile ilgili hataları temsil eder.
try {
eval("2 * / 1");
} catch (e) {
if (e instanceof EvalError) {
console.log("EvalError: " + e.message);
}
}
c) RangeError: RangeError nesnesi, bir değerin izin verilen aralık dışında olduğunda oluşur. Örneğin bir dizi için geçersiz bir index veya bir sayısal değerin izin verilen aralık dışında olduğunda range error hatası alırız.
try {
let arr = new Array(-1);
} catch (e) {
if (e instanceof RangeError) {
console.log("RangeError: " + e.message);
}
}
d) ReferenceError: ReferenceError nesnesi, tanımlanmamış bir değişken veya fonksiyonu kullanmaya çalıştığımızda oluşur.
try {
console.log(nonExistentVariable);
} catch (e) {
if (e instanceof ReferenceError) {
console.log("ReferenceError: " + e.message);
}
}
e) SyntaxError: SyntaxError nesnesi, JavaScript sözdizimi hatası oluştuğunda oluşur.
try {
eval("function() { }");
} catch (e) {
if (e instanceof SyntaxError) {
console.log("SyntaxError: " + e.message);
}
}
f) TypeError: TypeError nesnesi, bir değişkenin beklenen türde olmadığında oluşur.
try {
let num = "123";
num.toUpperCase();
} catch (e) {
if (e instanceof TypeError) {
console.log("TypeError: " + e.message);
}
}
g) URIError: URIError nesnesi, encodeURI veya decodeURI fonksiyonları ile ilgili hataları temsil eder.
try {
decodeURI("%");
} catch (e) {
if (e instanceof URIError) {
console.log("URIError: " + e.message);
}
}
53) JavaScript’te dizi metotları nelerdir?
a) Push: Dizinin sonuna bir veya daha fazla eleman ekler ve yeni dizinin uzunluğunu döndürür.
let fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]
b) Pop: Dizinin son elemanını çıkarır ve çıkarılan bu elemanı döndürür.
let fruits = ["apple", "banana", "mango"];
let lastFruit = fruits.pop();
console.log(lastFruit); // "mango"
console.log(fruits); // ["apple", "banana"]
c) Shift: Dizinin ilk elemanını çıkarır ve çıkarılan bu elemanı döndürür.
let fruits = ["apple", "banana", "mango"];
let firstFruit = fruits.shift();
console.log(firstFruit); // "apple"
console.log(fruits); // ["banana", "mango"]
d) Unshift: Dizinin başına bir veya daha fazla eleman ekler ve yeni dizinin uzunluğunu döndürür.
let fruits = ["banana", "mango"];
fruits.unshift("apple");
console.log(fruits); // ["apple", "banana", "mango"]
e) Splice: Dizinin belirli bir başlangıç indexinden başlayarak belirli bir sayıda eleman kaldırır veya ekler.
let fruits = ["apple", "banana", "mango"];
fruits.splice(1, 1, "orange");
console.log(fruits); // ["apple", "orange", "mango"]
f) Slice: Dizinin belirli bir başlangıç ve bitiş indexleri arasındaki elemanları kopyalar ve yeni bir dizi döndürür.
let fruits = ["apple", "banana", "mango"];
let newFruits = fruits.slice(1, 3);
console.log(newFruits); // ["banana", "mango"]
g) Concat: İki veya daha fazla diziyi birleştirir ve yeni bir dizi döndürür.
let fruits = ["apple", "banana"];
let vegetables = ["carrot", "tomato"];
let food = fruits.concat(vegetables);
console.log(food); // ["apple", "banana", "carrot", "tomato"]
h) Join: Dizini tüm elemanlarını birleştirir ve bir string döndürür.
let fruits = ["apple", "banana", "mango"];
let fruitsString = fruits.join(", ");
console.log(fruitsString); // "apple, banana, mango"
i) Reverse: Dizinin elemanlarını tersine döndürür.
let fruits = ["apple", "banana", "mango"];
fruits.reverse();
console.log(fruits); // ["mango", "banana", "apple"]
j) Sort: Dizinin elemanlarını alfabetik bir şekilde sıralar.
let fruits = ["banana", "apple", "mango"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "mango"]
54) Window.onload ve DOMContentLoaded nedir?
Window.onload ve DOMContentLoaded web sayfaları yüklendikten sonra belirli işlemleri gerçekleştirmek için kullanılan iki farklı olaydır. Bu iki olay, sayfa yükleme sürecinde farklı anlarda tetiklenir ve genellikle hangi işlerin ne zaman yapılacağını kontrol etmek için kullanılır.
a)window.onload: Sayfanın tamamı (HTML, CSS, resimler, iframeler vs.) yüklendiğinde tetiklenen bir olaydır. Bu, sayfanın tamamen işlenmiş ve kullanıcı etkileşimine hazır hale geldiği zamandır. Örneğin sayfadaki tüm resimlerin yüklendiğinden emin olduktan sonra bir mesaj göstermek istiyoruz.
window.onload = function() {
console.log("Tüm sayfa ve kaynaklar yüklendi.");
alert("Tüm içerik yüklendi!"); // Tüm resimler ve dosyalar yüklendikten sonra gösterilir.
};
b)DOMContentLoaded: HTML belgesinin tamamen yüklendiğinde ve işlenmeye hazır olduğunda yani DOM ağacının tamamı oluşturulduğunda tetiklenen bir olaydır. Ancak bu olay tetiklendiğinde harici kaynaklar (resimler, CSS dosyaları vs.) henüz tam olarak yüklenmemiş olabilir. Örneğin DOM tamamen yüklendiğinde (resimler hariç) bir butonun metnini değiştirmek istiyoruz.
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM tamamen yüklendi.");
document.getElementById("myButton").innerText = "Sayfa Yüklendi!"; // DOM yüklendiğinde çalışır.
});
Son olarak DOMContentLoaded, window.onload’dan daha hızlı tetiklenir çünkü harici kaynakların yüklenmesini beklemez. Bu nedenle, sayfanın daha hızlı yüklenmesine ve kullanıcı etkileşimlerine daha erken cevap vermesine yardımcı olabilir.
55) JavaScript’te decodeURI ve encodeURI nedir?
JavaScript’te decodeURI ve encodeURI fonksiyonları, URI (Uniform Resource Identifier) dizelerini kodlamak ve kodunu çözmek için kullanılır. Böylece URI’ler web tarayıcıları ve sunucular arasından güvenli bir şekilde taşınabilir olabilir.
a) encodeURI: Bu fonksiyon, URI’deki özel karakterleri kodlamak için kullanılır, böylece URI’ler web tarayıcıları ve sunucular arasında güvenli bir şekilde taşınabilir olabilir. Bir örnek verecek olursak;
let uri = "https://example.com/hello world";
let encodedURI = encodeURI(uri);
console.log(encodedURI); // "https://example.com/hello%20world"
Yukarıdaki örnekte, encodeURI fonksiyonu, URI’deki boşluk karakterini %20 şeklinde kodlar ve kodlanmış URI’yi döndürür.
b) decodeURI: Bu fonksiyon, kodlanmış URI’deki özel karakterleri çözer ve bu çözülmüş URI’yi döndürür, böylece kodlanmış URI’lerin orijinal haliyle kullanılabilmesi için kullanılır. Bir örnek verecek olursak;
let encodedURI = "https://example.com/hello%20world";
let decodedURI = decodeURI(encodedURI);
console.log(decodedURI); // "https://example.com/hello world"
Yukarıdaki örnekte, decodeURI fonksiyonu, kodlanmış URI’deki %20 karakterini boşluk karakterine çözer ve çözülmüş URI’yi döndürür.
Özetle, encodeURI ve decodeURI fonksiyonları, JavaScript’te URI’lerdeki özel karakterleri kodlamak ve kodunu çözmek için kullanılır. Bu fonksiyonlar, URI’lerin web tarayıcıları ve sunucular arasında güvenli bir şekilde taşınabilmesi için önemlidir.
Evet arkadaşlar, bu yazıda elimden geldiği kadar JavaScript’te karşımıza çıkması muhtemel mülakat sorularını ve cevaplarını toparlamaya çalıştım. Cevapları her ne kadar kısa tutmaya çalışsam da bu kadar oldu. Umarım iş bulma ve mülakat serüveninde birilerine faydalı olur ve farklı bir bakış açısı kazanmasına yardımcı olur. İyi çalışmalar.