Sıkça Sorulan JavaScript Mülakat Soruları ve Cevapları

Yayınlanan: 2023-01-13

Portföyünüzde JavaScript olması, yazılım geliştirici rolü alma şansınızı artırır. Bununla birlikte, sık sorulan JavaScript mülakat sorularına göz atalım.

JavaScript, web geliştirmede en çok kullanılan dillerden biridir. Artık neredeyse her tür uygulamayı geliştirmek için kullanılıyor.

Mülakat sorularına geçmeden önce, JavaScript öğrenmenin avantajlarına bir göz atalım.

JavaScript

JavaScript hafif, yorumlanmış veya tam zamanında derlenmiş bir programlama dilidir. World Wide Web'in temel dillerinden biridir. www'nin diğer iki temel dilini biliyorsunuz. Aramazsan onları arasan iyi olur.

JavaScript esas olarak web için oluşturulur. Ama artık sadece web için değil. Node, Deno vb. ortamların yardımıyla hemen hemen her platformda çalıştırabiliriz.

Bunun bazı avantajlarına göz atalım.

JavaScript'in Avantajları

  1. Başlaması kolay. Herhangi bir kodlama bilginiz olmadan da öğrenebilirsiniz.
  2. Etrafında büyük topluluk. Herhangi bir yerde takılırsanız, istediğiniz tüm yardımı alacaksınız.
  3. Uygulamaları daha hızlı geliştirmeye yardımcı olan JavaScript kullanılarak oluşturulmuş birçok kitaplık/çerçeve vardır.
  4. Javascript ile frontend, backend, android, ios vb. uygulamalar geliştirebiliriz. Bununla hemen hemen her tür uygulamayı oluşturabiliriz. Ancak, web geliştirmede daha sağlamdır.

JavaScript'teki veri türleri nelerdir?

Veri türleri, farklı veri türlerini depolamak için kullanılır. Veri türleri bir programlama dilinden diğerine farklılık gösterecektir. JavaScript'te 8 veri tipimiz var. Onları tek tek görelim.

  • Sayı
  • Sicim
  • boole
  • Tanımsız
  • Boş
  • BigInt
  • Sembol
  • Nesne

Object dışındaki tüm veri türleri ilkel değerler olarak adlandırılır. Ve değişmezler.

JavaScript'teki yerleşik yöntemler nelerdir?

JavaScript'teki yerleşik yöntemler, her veri türü için farklıdır. İlgili veri türünü kullanarak bu yerleşik yöntemlere erişebiliriz. Farklı veri türleri ve veri yapıları için bazı yerleşik yöntemleri görelim.

  1. Sayı
    • tamir edildi
    • toString
    • …
  2. Sicim
    • küçük harf
    • ile başlar
    • grafikAt
    • …
  3. Dizi
    • filtre
    • harita
    • her biri için
    • …

Her veri türü için birçok yerleşik yöntem vardır. Farklı veri türlerinin ve veri yapılarının tüm yerleşik yöntemleri için referansları kontrol edebilirsiniz.

JavaScript'te bir dizi nasıl oluşturulur?

Diziler, JavaScript'teki temel veri yapılarından biridir. Diziler, JavaScript dinamik olduğu için içlerinde her türlü veriyi içerebilir. JavaScript'te dizilerin nasıl oluşturulacağını görelim.

Köşeli parantez [] kullanarak bir dizi oluşturabiliriz. Nesneleri oluşturmak basit ve hızlıdır

 // Empty array const arr = []; // Array with some random values const randomArr = [1, "One", true]; console.log(arr, randomArr);

Array yapıcısını kullanarak bir dizi oluşturabiliriz. İnsanlar, genel projelerde diziler oluşturmak için yapıcıyı nadiren kullanır.

 // Empty array const arr = new Array(); // Array with some random values const randomArr = new Array(1, "One", true); console.log(arr, randomArr);

JavaScript dizileri değişkendir, yani onları oluşturduktan sonra istediğimiz gibi değiştirebiliriz.

JavaScript'te bir nesne nasıl oluşturulur?

Dizinin yanı sıra, nesne, JavaScript'teki başka bir temel veri yapısıdır. Nesneler, anahtar/değer çiftlerini depoluyor. Anahtar değişmez bir değer olmalıdır, oysa değer herhangi bir şey olabilir. JavaScript'te nesnelerin nasıl oluşturulacağını görelim.

Süslü parantez {} kullanarak nesneler oluşturabiliriz. Nesneleri oluşturmak basit ve hızlıdır.

 // Empty object const object = {}; // Object with some random values const randomObject = { 1: 2, one: "Two", true: false }; console.log(object, randomObject);

Object yapıcısını kullanarak nesneler oluşturabiliriz. İnsanlar bunu genel projelerde nadiren kullanır.

 // Empty object const object = new Object(); // Object with some random values const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);

JavaScript nesneleri değişkendir yani 2. örnekte gördüğünüz gibi oluşturduktan sonra değiştirebiliriz.

JavaScript kodunda nasıl hata ayıklarsınız?

Hata ayıklama kodu kolay değildir. Ve bir programlama dilinden diğerine, bir projeden diğerine, vs..; JavaScript'te hata ayıklamak için kullanılan yaygın şeyleri görelim.

1 numara. Kerestecilik

Hatayı tanımlamak için console.log deyimlerini kodumuzun birden çok yerinde kullanabiliriz. Önceki satırda bir hata olduğunda kod, sonraki kod satırlarını çalıştırmayı durduracaktır.

Günlüğe kaydetme, küçük projeler için oldukça etkili olan eski hata ayıklama yöntemlerinden biridir. Herhangi bir programlama dili için yaygın bir hata ayıklama tekniğidir.

2 numara. Geliştirici Araçları

JavaScript çoğunlukla web uygulamaları geliştirmek için kullanılır. Bu nedenle, neredeyse tüm tarayıcılarda artık JavaScript kodunda hata ayıklamaya yardımcı olan geliştirici araçları bulunmaktadır.

En çok kullanılan hata ayıklama yöntemlerinden biri, geliştirici araçlarında kesme noktaları ayarlamaktır. Kesme noktaları, JavaScript'in yürütülmesini durdurur ve o anda yürütmeyle ilgili tüm bilgileri verir.

Hata aldığımız yerde birden fazla kesme noktası belirleyebilir ve buna neyin sebep olduğunu görebiliriz. JavaScript web uygulamalarında hata ayıklamanın en etkili yolu budur.

#3. IDE'ler

JavaScript'te hata ayıklamak için IDE'leri kullanabiliriz. VS Code, kesme noktalarıyla hata ayıklamayı destekler. Hata ayıklama özelliği, kullandığınız IDE'ye göre farklılık gösterebilir. Ancak, IDE'lerin çoğu bu özelliğe sahip olacaktır.

Bir HTML dosyasına JavaScript kodu nasıl eklenir?

JavaScript HTML dosyasını script etiketini kullanarak ekleyebiliriz. Aşağıdaki örneği inceleyebilirsiniz.

 <!DOCTYPE html> <html lang="en"> <head> <title>Geekflare</title> </head> <body> <h1>Geekflare</h1> <script> // JavaScript code goes here console.log("This is JavaScript code"); </script> </body> </html>

Çerezler nedir?

Çerezler, küçük bilgileri depolamak için kullanılan anahtar-değer çiftleridir. Bilgi herhangi bir şey olabilir. Çerezlerin geçerlilik süresi sona erdikten sonra silinecek olan süreyi belirleyebiliriz. Bunlar, kullanıcıların bilgilerini depolamak için yaygın olarak kullanılır.

Çerezler, biz onları silene veya süresi dolana kadar sayfayı yenilesek bile temizlenmez. Geliştirici araçlarını açarak herhangi bir web uygulamasının/web sayfasının çerezlerini herhangi bir tarayıcıda kontrol edebilirsiniz.

Çerez nasıl okunur?

document.cookie kullanarak çerezi JavaScript'te okuyabiliriz. Oluşturduğumuz tüm tanımlama bilgilerini döndürür.

 console.log("All cookies", document.cookie);

Çerez yoksa boş bir dize döndürür.

Çerez nasıl oluşturulur ve silinir?

Anahtar-değer çiftini document.cookie olarak ayarlayarak çerezleri oluşturabiliriz. Bir örnek görelim.

 document.cookie = "one=One;";

Yukarıdaki sözdiziminde, one çerez anahtarı ve One onun değeridir. Tanımlama bilgisine etki alanı, yol, son kullanma tarihi vb. gibi daha fazla özellik ekleyebiliriz.; her biri noktalı virgülle (;) ayrılmalıdır. Tüm özellikler isteğe bağlıdır.

Öznitelikleri olan bir örnek görelim.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;";

Yukarıdaki kodda, çerezin son kullanma tarihini ve yolunu ekledik. Son kullanma tarihi belirtilmezse, çerez oturumdan sonra silinir. Varsayılan yol, dosya yolu olacaktır. Son kullanma tarihi formatı GMT olmalıdır.

Birden çok çerezin nasıl oluşturulacağını görelim.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

Birden çok tanımlama bilgisi ayarlanırken anahtar veya yol farklıysa tanımlama bilgilerinin üzerine yazılmaz. Anahtar ve yol aynıysa, önceki çerezin üzerine yazacaktır. Önceki ayarlanmış çerezin üzerine yazacak olan aşağıdaki örneğe göz atın.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "one=Two;path=/;";

Son kullanma tarihini çerezden kaldırdık ve değeri değiştirdik.

Kodun düzgün çalışması için test ederken son kullanma tarihini gelecekteki bir tarih olarak kullanın. 31 Ocak 2023 tarihinden sonra bile 31 Ocak 2023 tarihini korursanız çerezler oluşturulmaz.

Çerezlerin nasıl oluşturulacağını ve güncelleneceğini gördük. Çerezlerin nasıl silineceğini görelim.

Çerezleri silmek kolaydır. Çerezin son kullanma tarihini herhangi bir geçmiş tarihle değiştirmeniz yeterlidir. Aşağıdaki örneği kontrol edin.

 // Creating cookies document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;"; // Deleting the last cookie document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

Kodun son satırında silindiği için son çerezi çerezlerde bulamazsınız. Minimum çerez eğitimi için bu kadar.

Farklı JavaScript çerçeveleri nelerdir?

Dışarıda birçok JavaScript çerçevesi var. UI geliştirme için React, Vue, Angular, vb. Sunucu taraflı geliştirme için Express, Koa, Nest vb. Statik site üretimi için NextJS, Gatsby, vb. Mobil uygulama geliştirme için React Native, Ionic, etc.. Burada bazı JavaScript çerçevelerinden bahsettik. Keşfedilmesi çok zaman alacak daha fazla çerçeve bulabilirsiniz. İhtiyacınız olduğunda keşfedin.

JavaScript'teki kapanışlar

Kapanış, sözcüksel kapsamı ve üst sözcüksel ortamıyla birlikte paketlenmiş bir işlevdir. Kapatmalar ile dış kapsam verilerine erişebiliriz. Kapaklar, fonksiyonlar oluşturulduğunda oluşturulur.

 function outer() { const a = 1; function inner() { // We can access all the data from the outer function scope here // The data will be available even if we execute this function outside the outer function // as inners' closure formed while creating it console.log("Accessing a inside inner", a); } return inner; } const innerFn = outer(); innerFn();

Kapatmalar, JavaScript uygulamalarında yaygın olarak kullanılmaktadır. Kapatma olduklarını fark etmeden onları daha önce kullanmış olabilirsiniz. Kapanışlar hakkında öğrenilecek bundan çok daha fazlası var. Bu kavramı tamamen öğrendiğinizden emin olun.

JavaScript'te kaldırma

Kaldırma, JavaScript'te değişkenlerin, işlevlerin ve sınıfların bildiriminin kodu yürütmeden önce kapsamın en üstüne taşındığı bir işlemdir.

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` var name = "Geekflare";

Yukarıdaki kodu çalıştırırsanız herhangi bir hata görmezsiniz. Ancak çoğu dilde hatayı alırsınız. Kaldırma yalnızca bildirimleri en üste taşıdığından ve 3. satıra kadar başlatmadığından çıktı undefined olacaktır.

var aşağıdaki gibi let veya const olarak değiştirin ve kodu yeniden çalıştırın.

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` const name = "Geekflare";

Şimdi, başlatmadan önce değişkene erişemeyeceğimizi söyleyen bir referans hatası alacaksınız.

 ReferenceError: Cannot access 'name' before initialization

Böylece, burada, hatadan da anlaşılacağı gibi, başlatılmadan önce erişilemeyen ES6'da let ve const tanıtıldı. Bunun nedeni, let veya const ile bildirilen değişkenlerin, başlatıldığı satıra kadar Geçici Ölü Bölge'de (TDZ) olacak olmasıdır. TDZ'den değişkenlere erişemiyoruz.

JavaScript'te körleme

Currying, birçok parametreye sahip fonksiyonları birden fazla çağrılabilir parametreye sahip daha az parametreye dönüştürmek için kullanılan bir tekniktir. Bununla, çağrılabilir add(a, b, c, d) işlevini add(a)(b)(c)(d) çağrılabilir fonksiyona dönüştürebiliriz. Nasıl yapılacağına dair bir örnek görelim.

 function getCurryCallback(callback) { return function (a) { return function (b) { return function (c) { return function (d) { return callback(a, b, c, d); }; }; }; }; } function add(a, b, c, d) { return a + b + c + d; } const curriedAdd = getCurryCallback(add); // Calling the curriedAdd console.log(curriedAdd(1)(2)(3)(4));

GetCurryCallback'i, farklı işlevler için kullanılacak olan işlevi getCurryCallback çağrılabilirlere dönüştürmek için genelleştirebiliriz. Bununla ilgili daha fazla ayrıntı için JavaScript Bilgisine başvurabilirsiniz.

Belge ve pencere arasındaki fark

window , tarayıcıdaki en üstteki nesnedir. Geçmiş, konum, gezgin vb. gibi tarayıcı penceresiyle ilgili tüm bilgileri içerir; JavaScript'te dünya çapında mevcuttur. Herhangi bir import yapmadan doğrudan kodumuzda kullanabiliriz. Pencere nesnesinin özelliklerine ve yöntemlerine window erişebiliriz window.

document , window nesnesinin parçasıdır. Web sayfasına yüklenen tüm HTML, belge nesnesine dönüştürülür. Document nesnesi, tüm HTML öğeleri gibi farklı özelliklere ve yöntemlere sahip olacak özel HTMLDocument öğesini ifade eder.

window , nesnenin tarayıcı penceresini temsil eder ve document , o tarayıcı penceresine yüklenen HTML belgesini temsil eder.

İstemci tarafı ile sunucu tarafı arasındaki fark

İstemci tarafı, uygulamayı kullanan son kullanıcıyı ifade eder. Sunucu tarafı, uygulamanın konuşlandırıldığı web sunucusunu ifade eder.

Frontend terminolojisinde client tarafı olarak kullanıcıların bilgisayarlarında browser, server tarafı olarak cloud servisleri diyebiliriz.

innerHTML ve innerText arasındaki fark

Hem innerHTML hem de innerText , HTML öğelerinin özellikleridir. Bu özellikleri kullanarak bir HTML öğesinin içeriğini değiştirebiliriz.

HTML dizesini innerHTML normal HTML gibi işlenen bir özellik atayabiliriz. Aşağıdaki örneği kontrol edin.

 const titleEl = document.getElementById("title"); titleEl.innerHTML = '<span style="color:orange;">Geekflare</span>';

HTML'nize id title sahip bir öğe ekleyin ve yukarıdaki komut dosyasını JavaScript dosyasına ekleyin. Kodu çalıştırın ve çıktıyı görün. Turuncu renkte Geekflare . Elemanı incelerseniz, span etiketinin içinde olacaktır. Böylece innerHTML , HTML dizesini alacak ve onu normal HTML olarak işleyecektir.

Diğer taraftaki innerText normal bir dize alacak ve onu olduğu gibi gösterecektir. innerHTML gibi herhangi bir HTML oluşturmaz. Yukarıdaki kodda innerHTML innerText olarak değiştirin ve çıktıyı kontrol edin.

 const titleEl = document.getElementById("title"); titleEl.innerText = '<span style="color:orange;">Geekflare</span>';

Şimdi, web sayfasında sağladığımız tam dizeyi göreceksiniz.

let ve var arasındaki fark

JavaScript'te değişken oluşturmak için let ve var anahtar sözcükleri kullanılır. let anahtar sözcüğü ES6'da tanıtıldı.

let blok kapsamlıdır ve var işlev kapsamlıdır.

 { let a = 2; console.log("Inside block", a); } console.log("Outside block", a);

Yukarıdaki kodu çalıştırın. Blok kapsamli oldugundan let a a'ya blok disina ulasamadigimiz için son satirda hata alirsiniz. Şimdi, onu var olarak değiştirin ve tekrar çalıştırın.

 { var a = 2; console.log("Inside block", a); } console.log("Outside block", a);

a değişkenine blok dışından da erişebildiğimiz için herhangi bir hata almazsınız. Şimdi bloğu bir fonksiyonla değiştirelim.

 function sample() { var a = 2; console.log("Inside function", a); } sample(); console.log("Outside function", a);

İşlev kapsamlı olduğu için var a a'ya işlevin dışında erişemeyeceğimiz için yukarıdaki kodu çalıştırırsanız bir referans hatası alırsınız.

Değişkenleri var anahtar sözcüğünü kullanarak yeniden tanımlayabiliriz, ancak değişkenleri let anahtar sözcüğünü kullanarak yeniden tanımlayamayız. Bir örnek görelim.

 var a = "Geekflare"; var a = "Chandan"; console.log(a);
 let a = "Geekflare"; let a = "Chandan"; console.log(a);

İlk kod parçası herhangi bir hata vermeyecektir ve a değeri en son atanan değere değiştirilecektir. 2. kod parçası, let kullanarak değişkenleri yeniden tanımlayamayacağımız için bir hata verecektir.

Oturum depolama ve yerel depolama arasındaki fark

Oturum depolama ve yerel depolama, kullanıcıların internet olmadan erişilebilen bilgisayarlarında bilgi depolamak için kullanılır. Anahtar/değer çiftlerini hem oturum depolamada hem de yerel depolamada saklayabiliriz. Başka bir veri türü veya veri yapısı sağlarsanız, hem anahtar hem de değer dizelere dönüştürülür.

Oturum belleği, oturum sona erdikten sonra (tarayıcı kapatıldığında) temizlenecektir. Konum deposu, biz temizleyene kadar temizlenmez.

Sırasıyla sessionStorage ve localStorage nesneleri ile oturum depolamasına ve konum depolamasına erişebilir, bunları güncelleyebilir ve silebiliriz.

JavaScript'te NaN nedir?

NaN , Sayı Değil olarak kısaltılır. Bir şeyin JavaScript'te yasal/geçerli bir sayı olmadığını gösterir. 0/0 , undefined * 2 , 1 + undefined , null * undefined vb. gibi çıktı olarak NaN alacağımız bazı durumlar vardır.

Sözlüksel kapsam belirleme nedir?

Sözlüksel kapsam, değişkenlere ebeveynlerinin kapsamından erişmeyi ifade eder. Diyelim ki iki iç fonksiyona sahip bir fonksiyonumuz var. En içteki işlev, iki üst işlevinin kapsam değişkenlerine erişebilir. Benzer şekilde, 2. düzey işlev, en dıştaki işlev kapsamına erişebilir. Bir örnekte görelim.

 function outermost() { let a = 1; console.log(a); function middle() { let b = 2; // `a` are accessible here console.log(a, b); function innermost() { let c = 3; // both `a` and `b` are accessible here console.log(a, b, c); } innermost(); } middle(); } outermost();

JavaScript, kodda bir yere erişirken değişkeni bulmak için bir kapsam zinciri kullanır. İlk olarak, geçerli kapsamdaki değişkeni ve ardından global kapsama kadar ana kapsamı kontrol edecektir.

Değere göre iletilen ve referansa göre iletilen nedir?

Değere göre geçiş ve referansa göre geçiş, bağımsız değişkenleri JavaScript'teki bir işleve iletmenin iki yoludur.

Değere göre geçir: orijinal verinin bir kopyasını oluşturur ve işleve iletir. Bu nedenle, işlevde herhangi bir değişiklik yaptığımızda, orijinal verileri etkilemeyecektir. Aşağıdaki örneği kontrol edin.

 function sample(a) { // changing the value of `a` a = 5; console.log("Inside function", a); } let a = 3; sample(a); console.log("Outside function", a);

İşlev içinde değiştirdiğimiz halde a orijinal değerinin değişmediğini göreceksiniz.

Referansla geçir: Verinin referansını işleve iletir. Böylece, fonksiyonda herhangi bir değişiklik yaptığımızda, orijinal verileri de değiştirecektir.

 function sample(arr) { // adding a new value to the array arr.push(3); console.log("Inside function", arr); } let arr = [1, 2]; sample(arr); console.log("Outside function", arr);

Fonksiyon içerisinde değiştirdiğimizde arr orijinal değerinin değiştiğini göreceksiniz.

Not: tüm ilkel veri türleri değere göre iletilir ve ilkel olmayanlar referansa göre iletilir.

memoizasyon nedir?

Memoization, hesaplanan değerleri önbelleklerde saklayan ve tekrar ihtiyaç duyduğumuzda tekrar hesaplamadan kullanan bir tekniktir. Hesaplama çok ağırsa, kodun yürütülmesini hızlandıracaktır. Zamana kıyasla büyük bir sorun olmayan bir depolama değiş tokuşu var.

 const memo = {}; function add(a, b) { const key = `${a}-${b}`; // checking whether we computed the value already or not if (memo[key]) { console.log("Not computing again"); return memo[key]; } // adding the newly computed value to cache // here cache is a simple global object memo[key] = a + b; return memo[key]; } console.log(add(1, 2)); console.log(add(2, 3)); console.log(add(1, 2));

Not almayı gösteren basit bir örnek. Burada, iki sayıyı toplamak zor bir hesaplama değildir. Sadece demo içindir.

dinlenme parametresi nedir?

Rest parametresi, bir işlevde kalan tüm parametreleri toplamak için kullanılır. Diyelim ki minimum 2 argüman kabul edecek ve maksimum herhangi bir sayıda parametre kabul edebilecek bir fonksiyonumuz var. Maksimum argüman sayısına sahip olmadığımız için, rest operatörünü kullanarak ilk 2 parametreyi normal değişkenlerle ve diğerlerini rest parametresiyle toplayabiliriz.

 function sample(a, b, ...rest) { console.log("Rest parameter", rest); } sample(1, 2, 3, 4, 5);

rest parametresi , yukarıdaki örnekteki son üç bağımsız değişkenin dizisi olacaktır. Bununla, bir fonksiyon için herhangi bir sayıda parametreye sahip olabiliriz.

Bir fonksiyon sadece bir rest parametresine sahip olabilir. Ve rest parametresi, parametrelerin sırasına göre sonuncusu olmalıdır.

Nesne yok etme nedir?

Nesne yok etme, nesneden değişkenlere erişmek ve bunları nesne anahtarlarıyla aynı ada sahip değişkenlere atamak için kullanılır. Bir örnek görelim.

 const object = { a: 1, b: 2, c: 3 }; // Object destructuring const { a, b, c } = object; // Now, a, b, c will be used as normal variables console.log(a, b, c);

Destructured değişkenlerin değişkenlerini aynı satırda aşağıdaki gibi değiştirebiliriz.

 const object = { a: 1, b: 2, c: 3 }; // Changing the names of `a` and `b` const { a: changedA, b: changedB, c } = object; // Now, changedA, changedB, c will be used as normal variables console.log(changedA, changedB, c);

Dizi yapısı bozma nedir?

Dizi yıkımı, dizideki değişkenlere erişmek ve bunları değişkenlere atamak için kullanılır. Bir örnek görelim.

 const array = [1, 2, 3]; // Array destructuring // It's based on the index of the array const [a, b, c] = array; // Now, we can use a, b, c as normal variables console.log(a, b, c);

Olay yakalama ve olay köpürtme nedir?

Olay yakalama ve olay köpürtme , HTML DOM'da olay yaymanın iki yoludur. Diyelim ki iç içe iki HTML öğesi var. Ve iç elemanda bir olay meydana gelir. Şimdi, olay yayma modu, bu olayların yürütülme sırasına karar verecektir.

Olay köpürmesi: önce öğede olay işleyiciyi çalıştırır, sonra kendi öğesinde ve ardından en üstteki öğeye kadar gider. Bu, tüm olayların varsayılan davranışıdır.

Olay yakalama: Bu tür olay yayılımını kullanmamız gerektiğini olayda belirtmemiz gerekir. Olay dinleyicisini eklerken belirtebiliriz. Olay yakalamayı etkinleştirirsek, olaylar aşağıdaki sırayla yürütülür.

  1. Olaylar, en üstteki öğeden hedef öğeye kadar yürütülmeye başlar.
  2. Hedef öğedeki olay yeniden yürütülür.
  3. En üstteki öğe yukarı çıkana kadar köpüren olay yayılımı tekrar gerçekleşecektir.

Olay işleyicisinde event.stopPropogation yöntemini çağırarak olay yayılımını durdurabiliriz.

JavaScript'teki Vaatler Nelerdir?

Promise nesnesi, gelecekte bir başarı veya başarısızlık durumuyla tamamlanacak olan eşzamansız işlemler için kullanılır.

Bir Promise aşağıdaki durumlardan birinde olabilir.

  1. pending – işlem devam ederken.
  2. fulfilled - işlem başarıyla tamamlandığında. Başarı durumunda sonuçlarımız (varsa) olacaktır.
  3. rejected – işlem bir başarısızlıkla tamamlandığında. Başarısız olmasının nedenini (hatasını) alacağız.

Başarı ve başarısızlık durumlarına ilişkin iki örnek görelim.

 // Promise which will complete successfully const successPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve({ message: "Completed successfully" }); }, 300); }); successPromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }); // Promise which will complete with failure state const failurePromise = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error("Failing the promise for testing")); }, 300); }); failurePromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); });

Gerekirse birden fazla then yapabilirsiniz. Daha önce döndürülen veriler bir then geri aramada kabul edilecektir.

JavaScript'teki farklı kapsam türlerini açıklama

JavaScript'te iki tür kapsam vardır. Küresel kapsam ve yerel kapsam .

İşlev kapsamını ve blok kapsamını da duymuş olabilirsiniz. Sırasıyla var ve let , const için yerel kapsamlardır.

Kendini çağıran işlevler nelerdir?

Kendini çağıran işlevler, oluşturulduktan hemen sonra yürütülecek isimsiz işlevlerdir. Hadi bazı örneklere bakalım.

 // Without any parameters (function sayHello() { console.log("Hello, World!"); })(); // With parameters (function add(a, b) { console.log("Sum", a + b); })(1, 2);

Örnekte gördüğünüz gibi argümanları kendi kendini çağıran fonksiyonlara bile iletebiliriz.

Ok işlevleri nelerdir?

Ok işlevi, bazı değişikliklerle normal işleve sözdizimsel şekerdir. Genel kullanım durumlarında normal işlevler gibi davranırlar. Geri arama yapmamız gerektiğinde ok işlevleri işe yarar. Sözdizimini görelim.

 // arrow functions will return by default if it doesn't have any brackets let add = (a, b) => a + b; console.log(add(1, 2));

Ok işlevleri ile normal işlevler arasında bazı farklılıklar vardır.

  • Arrow fonksiyonlarının kendilerine ait this bağlamaları yoktur. Ok işlevinin içindeki this anahtar sözcüğü, this üst kapsamına atıfta bulunur.
  • Ok işlevleri, yapıcı işlevler olarak kullanılamaz

Geri arama nedir?

Geri arama, o işlev içinde çağrılan başka bir işleve iletilen bir işlevdir. Geri aramaları kullanmak, JavaScript'te yaygın bir şeydir. Bir örnek görelim.

 function sample(a, b, callback) { const result = a + b; callback(result); } function finished(result) { console.log("Finished with", result); } sample(1, 2, finished);

sample finished geri arama olarak iletilir. finished işlev, bazı eylemler gerçekleştirildikten sonra sonuçla birlikte çağrılır. Geri arama kullanımını çoğunlukla Proms, setTimeout gibi asenkron işlemlerde göreceksiniz.

Farklı hata türleri nelerdir?

JavaScript'teki bazı hataları kontrol edelim.

ReferenceError : Eriştiğimiz değişken mevcutsa bu hata oluşur.

TypeError: Hata, diğer hata türleriyle eşleşmiyorsa, JavaScript bu hatayı atar. Verilerle uyumlu olmayan bir eylem gerçekleştirmeye çalıştığımızda da ortaya çıkacaktır.

SyntaxError: JavaScript sözdizimi doğru değilse bu hata oluşur.

Başka bazı hata türleri de vardır. Ancak bunlar, JavaScript'teki yaygın hata türleridir.

JavaScript'teki farklı değişken kapsamları nelerdir?

JavaScript'te iki değişken kapsamı vardır. var anahtar kelimesi kullanılarak bildirilen değişkenler işlev kapsamına sahip olacak ve let ve const ile bildirilen değişkenler blok kapsamına sahip olacaktır.

Bu değişkenlerin kapsamı hakkında daha fazla ayrıntı için 17. soruya bakın.

JavaScript'teki kaçış karakterleri nelerdir?

Ters eğik çizgi, JavaScript'teki kaçış karakteridir. Genel olarak yazdıramadığımız bazı özel karakterleri yazdırmak için kullanılır. Diyelim ki, dizi ikinci kesme işaretiyle biteceği için normalde yapamadığımız bir dizenin içine apostrophe (') yazdırmak istiyoruz. Bu durumda, diziyi o noktada bitirmekten kaçınmak için escape karakterini kullanacağız.

 const message = 'Hi, I\'m Geekflare'; console.log(message);

Dıştaki tek kesme işaretlerini çift kesme işaretiyle değiştirerek yukarıdaki çıktıyı escape karakteri kullanmadan elde edebiliriz. Ama bu sadece bir kaçış karakterinin nasıl kullanılacağına dair bir örnek. Kesinlikle kaçış karakterine ihtiyacımız olan \n , \t , \\ vb. gibi başka karakterler de var.

BOM ve DOM nedir?

Tarayıcı Nesne Modeli (BOM): tüm tarayıcılarda geçerli tarayıcı penceresini temsil eden BOM bulunur. Tarayıcı penceresini değiştirmek için kullanılan en üstteki pencere nesnemizi içerir.

Belge Nesne Modeli (DOM): Tarayıcılar, HTML ağaç yapısına yüklendiğinde DOM'u oluşturur. DOM API kullanarak HTML öğelerini manipüle edebiliriz.

Ekran nesnesi nedir?

Ekran nesnesi, genel pencere nesnesinin özelliklerinden biridir. Geçerli tarayıcı penceresinin işlendiği ekranın farklı özelliklerini içerir. Özelliklerden bazıları, genişlik , yükseklik , yön , pikselDepth vb.

Çözüm

Yukarıdaki tüm sorular için takip soruları olabilir. Bu nedenle, kavramları yukarıdaki tüm sorular etrafında hazırlamanız gerekir.

Ayrıca bazı sık sorulan Java mülakat sorularını ve cevaplarını keşfedebilirsiniz.

Mutlu Öğrenme