Frontend Developer için Mülakat Soruları

19 min readJan 25, 2023

Merhabalar! 🖖

Geçen hafta Murat Can Şahin ‘in mülakat soruları medium yazısını Twitter’da görünce, soruların cevaplarını merak edip, çalışmaya başladım. Hem notlarıma tek linkle ulaşayım, hem de bir katkı da benden olsun diye, araştırdığım cevapları ben de paylaşmak istedim. Junior olduğum için eksik veya hatalı cevabım olabilir, böyle bir durumda geri dönüşlerinizden mutluluk duyarım.

Mülakat deneyimlerini ve karşılaştığı soruları bizlerle paylaştığı için de Murat’a kendi adıma ayrıca teşekkür etmek istiyorum.

“Ocak başında frontend developer olarak ilk iş değişikliğimi yaptım. Bu süre esnasında 20–30 arası şirketle görüştüm, yaklaşık 10 tane de teknik mülakata girdim. Teknik mülakatlar genelde soru cevap şeklinde geçti. Elde edindiğim mülakat tecrübeleri sonucunda, karşılaştığım sorular da, ilk medium yazımın konusunu oluşturdu.” Murat Can Şahin

Şimdi sorular ve cevaplar! 57 soru var, iyi okumalar… 🤖

1. HTML dosyası içerisine js çağırma yöntemleri nelerdir ve nerede çağırmalıyız?

— Bunun için 2 yöntem var. İlki; JavaScript kodları, HTML içerisine <script> etiketi ile eklenebilir.

<!DOCTYPE HTML>
<html>
  <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  
    <script>
        alert( 'Hello, world!' );  // alert(): JavaScript Popup Kodu
    </script>

  </body>
</html>

Diğer yöntem ise, aşağıdaki örnekte olduğu gibi kod dosyaları ile oluşturulur.

<script src="/kod/yolu/ana.js"></script>

Buradaki /kod/yolu/ana.js site ana dizininden itibaren kesin (absolute) yol belirtir.

Tabi göreceli (relative) yol belirtmek de mümkündür. Örneğin src="script.js" HTML dosyasının kayıt edildiği klasördeki "script.js"'yi al anlamına gelir

2. Semantic HTML nedir?

— Semantic HTML, HTML etiketlerinin anlamlarını içeriklerine göre kullanarak, web sayfalarının anlamlı ve daha anlaşılır hale getirilmesi için kullanılan bir yöntemdir. Örneğin, bir başlık için <h1> etiketi, bir paragraf için <p> etiketi, bir resim için <img> etiketi kullanılır. Bu sayede, web sayfalarının taranması ve erişilebilirliği iyileştirilir.

HTML5 ile gelen HTML5 anlamsal etiketler yani semantic etiketleri kullanmamız arama motorları açısından büyük önem taşımaktadır. Çünkü oluşturduğumuz içerikleri html semantik etiketler içinde sunuyor olmamız, sitemizi indeksleyen arama motorlarına içerik ile alakalı daha anlamsal bilgi sunduğumuzdan dolayı ziyaretçi sayımızı olumlu etkileyecektir. Ayrıca kodun okunmasını da kolaylaştıracaktır.

Site tasarımı yaparken, en çok kullandığımız ve sayfamızın ana ögelerini temsil edecek olan bazı semantik etiketler aşağıdaki gibidir.

<header>
<nav>
<section>
<article>
<aside>
<figure>
<figcaption>
<footer>

Aşağıdaki resimlerde semantik etiketlerin karşılığı olan <div> kullanım örneklerini inceleyiniz.

3. Const — let — var farkları nelerdir?

— Bunu ilk yazımda yazmıştım ordan almak istiyorum: Değişkenler, programınızda verilerinizi saklamanızı ve değerlerini değiştirmenizi sağlar. Değişkenler, bir değer atamak için var veya let anahtar kelimelerini kullanarak tanımlanır. Ancak var tanımlaması, kapsamı dışında da çalışabildiğinden, ES6 standartlarından sonra let kullanımı yaygınlaştı. Değerinin değişmesini istemediğimiz değişkenlerimiz için ise (örneğin kullanıcı kimlik numaraları) const anahtar kelimesini kullanırsanız. Örneklerle incelersek:

let x;  // x değişkeni tanımlanır
x = 5;  // x değişkenine 5 değeri atanır

Değişkenleri aynı anda tanımlamak ve değer atamak için de şu şekilde kullanabilirsiniz:

let y = 10;  // y değişkeni tanımlanır ve 10 değeri atanır

4. JavaScript’te hangi veri tipleri kullanılır?

(4. ve 5. soru için de geçen hafta bir blog yazmıştım linkten bakabilirsiniz. )

— JavaScript veri tiplerini 2'ye ayırırız; bunlar, İlkel (Primitive) Veri Tipleri ve İlkel Olmayan (Reference) Veri Tipleridir.

Primitive Data Types: Numbers, String, Boolean, Null, Undefined, Symbol, BigInt

Reference Data Types: Object

5. Primitive Type ile Reference Type farkları nelerdir?

— JavaScript, dinamik olarak yazılan bir dildir. Bu, bir değişkenin farklı türlerde değer tutabildiği anlamına gelir. Bilgisayar, verinin saklanacağı bellek alanını, değişkenin türüne göre ayırır. Bu değerler, RAM’de ya Stack’te ya da Heap’te depolanır. Bunlar arasındaki fark da, depolama yönteminin farkından dolayı oluşuyor. Primitive değerler, Stact’te saklanırken, Referance değerler Heap’de depolanır.

Stack’te oluşturulan bir değişkene değer atandığında ve sonradan aynı değer stack’de bulunan farklı bir değişkene atandığında dinamik oluşamayacağı için birbirinden habersiz iki farklı değişken mantığında çalışır. Fakat Heap alanında ise, bir obje oluşturulduğunda ve daha sonradan aynı değere sahip farklı bir obje oluşturulduğunda heap alanı, zaten böyle bir obje mevcut diyerek, bellekteki mevcut objeyi referans eder.

6. JavaScript MultiThread bir dil midir Single Thread bir dil midir?

— Single-thread, tek iş parçacıklı olarak tanımlanır. Bu, bir programın sadece bir işlemi aynı anda yürütebildiği anlamına gelir. Tek iş parçacıklı dillerde, program sadece bir işlemi yerine getirirken diğer işlemler beklemek zorundadır. Bu, programın çalışma hızını yavaşlatabilir ancak yapılandırması daha kolaydır.

Multithreading, çoklu iş parçacıklı olarak tanımlanır. Bu, bir programın birden fazla işlemi aynı anda yürütebildiği anlamına gelir. Çoklu iş parçacıklı dillerde, program birden fazla işlemi aynı anda yürütebilir ve bu işlemler arasında geçiş yapabilir. Bu, programın çalışma hızını arttırır ancak yapılandırması daha zor olabilir.

JavaScript, single-thread bir programlama dilidir. Bu, sadece bir komutu aynı anda işleyebildiği anlamına gelir. Ancak, JavaScript, kullanıcı girişi ve ağ istekleri gibi asenkron görevleri non-blocking ve callback fonksiyonları aracılığıyla ele alabilir. Ayrıca, Web Workers ve async/await sözdiziminin daha yeni sürümlerinde JavaScript gibi yeni özellikler, belirli görevlerin paralel olarak çalışmasını mümkün kılar, ancak tam bir çoklu iş parçacıklı dil değildir.

Bununla ilgili daha detaylı iki medium yazısı : Blog-1, Blog-2

7. == ve === farkı nedir?

— Bunlar JavaScript karşılaştırma operatörlerindendir. == operatörü ile iki değişken karşılaştırıldığında, değişkenlerin türleri farklı ama değerleri aynı demektir. Karşılaştırma, === operatörü ile yapılırsa iki değişkenin hem türü hem de değeri aynı sonuç demektir.

8. { } === { } ne döner?

9. { } == { } ne döner?

10. [ ] === [ ] ne döner?

11. [ ] == [ ] ne döner?

— 8, 9, 10 ve 11'in cevabı için Chrome DevTools’a yazabiliriz.

Eşitlik karşılaştırmalarını daha detaylı öğrenmek isterseniz MDN Web Docs çok detaylı anlatmış durumda. Ordaki tabloyu da incelemek isterseniz:

12. Javascript ile DOM elementlerine erişim metodları nelerdir?

— JavaScript ile DOM (Document Object Model) elementlerine erişim için kullanabileceğiniz birkaç yöntem şunlardır:

getElementById(): ID'si verilen elementi döndürür.
getElementsByTagName(): Etiket adına göre elementleri döndürür.
getElementsByClassName(): Sınıf adına göre elementleri döndürür.
querySelector(): CSS seçicileri kullanarak ilk eşleşen elementi döndürür.
querySelectorAll(): CSS seçicileri kullanarak tüm eşleşen elementleri döndürür.
querySelector() and querySelectorAll() : class, id, attribute gibi css selectors ile bir öğe seçebilir.

Ayrıca, elementin children, parentNode, nextSibling, previousSibling gibi özellikleri de kullanılarak DOM ağacında gezinebilirsiniz.

13. ES-6 ile JavaScript’e gelen özellikler nelerdir?

— ES6 (ECMAScript 6), JavaSript dilinin 6. sürümüdür. ES6 ile JavaSript’e gelen özellikler arasında:

let ve const değişken tanımlama
Destructuring (yığma)
Arrow functions
Modüller
Class yapıları
Promises (sözler)
Generators
Template literals
Iterators
Symbol
Spread ve Rest Operators
Default parametreler
Object literals
Array methods (map, filter, reduce vb.)

gibi özellikler yer almaktadır.

14. Break ve Continue kavramları nedir?

— JavaScript’te “break” ve “continue” kavramları döngüler içinde kullanılan anahtar kelimelerdir. “break” döngüyü sonlandırır, yani döngünün geri kalanını atlar. “continue” ise döngünün geri kalanını atlar ve döngünün sonraki iterasyonuna geçer.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

Bu kod bloğu 0 ile 4 arasındaki sayıları ekrana yazdırır ve i değişkeninin 5 olduğu an döngüyü sonlandırır.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

Bu kod bloğu 1, 3, 5, 7 ve 9 sayılarını ekrana yazdırır. Çünkü döngü içinde i değişkeni 2'nin katı olduğunda döngünün geri kalanı atlanır ve sonraki iterasyonuna geçilir.

15. Hoisting kavramını açıklayın.

— JavaScript’de, hoisting, değişkenlerin (variables) veya fonksiyonların bellekte üst seviyede tanımlanması anlamına gelir. Bu, tanımlanan değerlerin, kodun herhangi bir yerinde kullanılmasına izin verir, ancak değerlerinin sadece tanımlandıkları koddan sonra erişilebilir olmasıdır. Örneğin, bir değişkenin tanımlandığı yerden önce kullanılması, undefined değerini döndürür. Aynı şekilde, bir fonksiyonun tanımlandığı yerden önce çağrılması, hata oluşturur. Örneğin:

console.log(x); // undefined
var x = 5;  //çünkü x sonradan tanımlanmış.

Bu kod parçasında, değişken x tanımlanmadan önce kullanıldı. Ancak JavaScript hoisting sayesinde, değişken tanımı kodun en üstüne taşındığından, değişken undefined olarak kabul edilir ve konsola yazdırılır. Aynı şekilde bir fonksiyon için de geçerlidir:

someFunction(); // "I am a hoisted function!"

function someFunction() {
  console.log("I am a hoisted function!");
}

someFunction tanımı kodun en üstüne taşındığından dolayı, someFunction fonksiyonu tanımlanmadan önce çağrılabilir. Bu yüzden JavaScript’de değişkenlerin tanımlanması yapılmadan önce oluştuğundan emin olunmalıdır.

16. Local Storage ve session storage kavramlarını açıklayın.

— Local storage ve session storage, web tarayıcıları tarafından kullanılan veri depolama alanlarıdır.

Local Storage, JavaScript sitelerinin ve uygulamalarının key/value çiftlerini bitiş tarihi olmadan bir web tarayıcısında kaydetmesine olanak sağlayan bir özelliktir. Local storage, tarayıcının kapatılmasına rağmen verilerin saklanmaya devam eder. Bu veriler, kullanıcı tarafından silinmedikçe tarayıcının kapatılması ya da tarayıcının önbelleğinin temizlenmesine rağmen sürekli olarak saklanır.

Session Storage, Local Storage’ın aksine verileri kısıtlı bir süre için depolar. Kullanıcı, tarayıcı penceresini kapattığında veriler temizlenecektir. Veriler asla sunucuya gönderilmeyecektir. Bu veriler, kullanıcı tarafından silinmedikçe sadece o anki oturumda kullanılabilir.

Her iki depolama mekanizması da JavaScript ile erişilebilir ve kullanılabilir. Ancak, local storage daha geniş bir kullanım alanına sahiptir çünkü veriler daha uzun süre saklanabilir.

17. Local Storage’da hangi tür veri tutabiliriz? Eğer elimizdeki veri uygun değilse ne yapabiliriz?

— Web tarayıcılarının Local Storage özelliği, JavaScript kodları tarafından kullanılabildiğinden, sadece metin tipinde verileri saklayabilirsiniz. Ancak, veriler JSON formatında serileştirilerek saklanabilir ve daha sonra tekrar deserileştirilerek kullanılabilir. Bu sayede, JavaScript nesnelerini ve dizilerini de Local Storage’da saklayabilirsiniz. Örneklendirecek olursak; JavaScript kodu, Local Storage’a bir değer ataması yapar ve sonra bu değeri okur:

// Local Storage'a bir değer ataması yapmak:
localStorage.setItem("isim", "Ruken Erpolat");

// Local Storage'dan bir değeri okumak:

var storedName = localStorage.getItem("isim");
console.log(storedName); // "Ruken Erpolat" yazdırır.

Aynı şeyi bir JSON nesnesi için yapmak isterseniz:

// Local Storage'a bir json nesnesi ataması yapmak:

let jsonObj = {name: "Ruken Erpolat", city: "Ankara" };
localStorage.setItem("person", JSON.stringify(jsonObj));

// Local Storage'dan bir json nesnesi okumak:

let storedPerson = JSON.parse(localStorage.getItem("person"));
console.log(storedPerson); 
// {name: "Ruken Erpolat", city: "Ankara"} yazdırır.

Bu örneklerde, Local Storage’a “isim” ve “person” anahtarları ile sakladığımız verileri okuduk.

Elimizdeki verinin uygunluğunu kontrol etmek için birkaç yöntem vardır. Örneğin:

Verinin tipini kontrol etmek: Örneğin, bir sayı değerinin sayı tipinde olmasını bekliyorsak, typeof operatorü kullanarak verinin tipini kontrol edebiliriz.
Verinin aralığını kontrol etmek: Örneğin, bir sayının belirli bir aralıkta olmasını bekliyorsak, veriyi bu aralığa göre kontrol edebiliriz.
Verinin formatını kontrol etmek: Örneğin, bir e-posta adresinin geçerli bir formatda olmasını bekliyorsak, veriyi regex (regular expression) ile kontrol edebiliriz.
Verinin geçerli olmasını kontrol etmek: Örneğin, bir adresin geçerli olup olmadığını kontrol etmek için veriyi bir adres doğrulama servisi ile kontrol edebilirsiniz.

Eğer veri uygun değilse, kullanıcıya uygun bir hata mesajı gösterebilir veya uygun bir şekilde işlem yapmadan önce veriyi düzeltmelerini isteyebilirsiniz. Örneğin, e-posta adresinin geçerli bir formatda olmadığını tespit ettiğinizde kullanıcıya “Lütfen geçerli bir e-posta adresi girin” gibi bir hata mesajı gösterebilirsiniz.

18. for ve forEach kavramlarını açıklayın.

— "for” ve “forEach” kavramları JavaScript’de döngüleri (loops) yazmak için kullanılan fonksiyonlardır. “for” ve “forEach” komutlarının temel farkı, döngülerin nasıl yazıldığıdır. “for” döngüsü, belirli bir koşulu sağladığı sürece belli bir kod bloğunu tekrar ederken, “forEach” metodu dizi elemanlarını tek tek gezmek için kullanılır.

“for” döngüsü, dizi boyutunu veya başka bir koşulu kontrol etmek için kullanılabilir. Örneğin, sadece dizinin ilk 10 elemanını yazdırmak isteyebilirsiniz. “forEach” metodu ise, dizi elemanlarını sadece tek tek gezmek için kullanılır.

“for” döngüsü, dizilerin yanı sıra diğer nesneler üzerinde de kullanılabilirken, “forEach” metodu sadece dizi elemanları üzerinde kullanılabilir.

Ayrıca, “forEach” metodunda, döngü içinde index değerine erişim yoktur ve döngü içerisinde return ile döngüyü kesebilirsiniz.

“for” döngüsüne örnek olarak, bir dizi içindeki tüm elemanları yazdırmak için kullanabiliriz:

// for döngüsü:

var myArray = [1, 2, 3, 4, 5];

for (var i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

// forEach döngüsü:

var myArray = [1, 2, 3, 4, 5];
myArray.forEach(function(element) {
  console.log(element);
});

19. Javascript’te hata yönetimi nasıl yapılır?

— JavaScript’te hata yönetimi “try-catch” bloğu ile yapılır. “try” bloğu içerisinde potansiyel olarak hata oluşabilecek kod parçası yer alır, ve eğer hata oluşursa “catch” bloğu çalışır ve hata ile ilgili bilgileri içerir. Örnek olarak:

try {
    // Potansiyel hata oluşabilecek kod
} catch (error) {
    // Hata ile ilgili işlemler(örneğin, hata mesajının ekrana yazdırılması)
}

“try-catch” bloğu, hata oluştuğunda kodun çalışmasını durdurmadan hata ile ilgili işlemleri gerçekleştirmenizi sağlar.

Ayrıca bununla ilgili Google bilgilerinin derli toplu hali şu blogta güzel özetlenmiş: link

20. String’i Number’a nasıl çevirebiliriz?

— JavaScript’te bir String’i sayıya çevirmek için Number() veya parseInt() veya parseFloat() fonksiyonlarını kullanabilirsiniz. Örneğin:

let num = Number("123"); // num değişkeni 123 olarak atanır
let num = parseInt("123"); // num değişkeni 123 olarak atanır
let decimal = parseFloat("3.14"); // decimal değişkeni 3.14 olarak atanır

Number() sayıların tam sayılarını veya ondalıklı sayıları döndürürken, parseInt() sadece tam sayıları döndürür ve parseFloat() ondalıklı sayıları döndürür. Eğer string değeri, geçerli bir sayı değilse, bu fonksiyonlar NaN (Not a Number) döndürür.

Ayrıca başka bir yöntem de, string ifadesinin başına “+” ekleyerek number elde edebiliriz:

const string = "5";

console.log(string); // '5' 
console.log(+string); // 5  (şeklinde number'a dönüştürebiliyoruz.)


const quantity = "12.99";

console.log(+quantity); // 12.99

// String değeri bir sayıya dönüştürülemezse sonuç NaN olur:

const quantity = "awesome";

console.log(+quantity); // NaN

Buna Ek olarak bir sayıyı string’e çevirmek için toString() fonksiyonunu kullanabiliriz veyaString() fonksiyonunu da kullanabilirsiniz. Örneğin:

let str = (123).toString(); // str değişkeni "123" olarak atanır
let str = (3.14).toString(); // str değişkeni "3.14" olarak atanır


let str = String(123); // str değişkeni "123" olarak atanır
let str = String(3.14); // str değişkeni "3.14" olarak atanır

21. Arrow function nedir, sağladığı kolaylıklar nelerdir?

— Arrow function, JavaScript’te bir fonksiyon tanımlamak için kullanılan bir yöntemdir. Arrow function, ES6 (ECMAScript 6) ile birlikte gelmiştir ve klasik function tanımlamasına göre daha kısa ve anlaşılır bir syntax’a (yazım şekline) sahiptir. Özellikle kodun okunabilirliğini arttırmak ve kodun daha az yer kaplamasını sağlamak amacıyla kullanılır. Arrow function ile klasik function tanımlaması arasındaki farklar şöyle sıralanabilir:

Arrow function, kullanımı daha kısa ve anlaşılır bir syntax’a sahiptir. Örneğin, aşağıdaki iki kod parçacığı aynı işi yapmaktadır:

const add = (a, b) => a + b;

function add(a, b) {
  return a + b;
}

Arrow function, this anahtar kelimesini kapsamına dahil etmez. Bu, kod yazarken this anahtar kelimesi ile ilgili olabilecek problemleri ortadan kaldırır.
Arrow function, return anahtar kelimesini otomatik olarak içermektedir. Bu, kod yazarken return anahtar kelimesini kullanmak zorunda kalmazsınız.
Arrow function, kullanımı sadece tek satırdan oluşan fonksiyonlar için uygundur. Çok satırlı fonksiyonlar için klasik function tanımlaması kullanılmalıdır.

22. Higher order function’lar nedir, nerelerde kullanırız?

—Higher-order fonksiyonlar, bir veya daha fazla fonksiyonu argüman olarak alan ve/veya sonucu olarak bir fonksiyon döndüren fonksiyonlardır. Bu, daha soyut ve tekrar kullanılabilir kod yaratmaya olanak tanır ve fonksiyonel programlama için önemli bir kavramdır. Bunlar, aşağıdaki durumlar gibi birçok bağlamda kullanılabilir:

Bir listedeki her bir öğeyi bir fonksiyon uygulamak, map() fonksiyonu gibi
Bir koşula dayalı olarak bir listeyi filtrelemek, filter() fonksiyonu gibi
Bir listedeki öğeleri belirli bir şekilde birleştirmek, reduce() fonksiyonu gibi
Yeni kontrol akış yapıları oluşturmak, compose() veya pipe() fonksiyonları gibi
Kapatıcılar oluşturmak, yani içerisinde oldukları scope’da olan değişkenlerin değerlerini hatırlayan fonksiyonlar.

23. Call stack kavramını açıklayın.

— Call stack, JavaScript programlama dillerinde çalışan bir işlemler yığınıdır. Program çalışırken, fonksiyon çağrıları yığına eklenir ve her çağrı işlemi bittiğinde yığından çıkarılır. En üstteki fonksiyon çağrısı, programın şu anda çalıştığı fonksiyondur. Eğer bir hata oluşursa, JavaScript tarayıcısı call stack’i kullanarak hatanın nerede oluştuğunu takip eder ve hata mesajını gösterir.

function function1() {
  function2();
}

function function2() {
  function3();
}

function function3() {
  // some code that causes an error
}

function1();

Bu örnekte, function1 çağrılır ve içerisinde function2 çağrılır. function2 içerisinde function3 çağrılır. Eğer function3 içerisinde bir hata oluşursa, JavaScript tarayıcısı call stack kullanarak hatanın nerede oluştuğunu takip eder ve hata mesajını gösterir:

Error: some error message
    at function3 (index.js:8)
    at function2 (index.js:4)
    at function1 (index.js:1)

Bu hata mesajı, hatanın function3 içinde oluştuğunu, function3'ün function2 tarafından çağrıldığını ve function2'nin function1 tarafından çağrıldığını gösterir.

24. Heap, stack, event loop, callback queue nedir?

Heap: Bir programda bellekte yer alan ve programcı tarafından kullanılan verilerin saklandığı alandır. Heap, bellekte rastgele yerleşebilen nesneler için kullanılır ve genellikle daha büyük boyutlu nesneler için kullanılır.

Stack: Bir programda bellekte yer alan ve fonksiyon çağrıları, değişkenler ve diğer verilerin saklandığı alandır. Stack, bellekte sıralı olarak yerleşen nesneler için kullanılır ve genellikle daha küçük boyutlu nesneler için kullanılır.

Event Loop: Bir JavaScript uygulamasında, tarayıcı veya Node.js gibi bir ortamda olayların işlenmesi için kullanılan bir yapıdır. Event loop, kullanıcının etkileşimleri, ağ istekleri ve diğer olayları algılar ve bunları işlemek için kullanılır.

Callback Queue: Bir JavaScript uygulamasında, event loop tarafından işlenmesi bekleyen olayların saklandığı kuyruktur. Event loop, callback queue’yu kontrol eder ve işlenmesi gereken olayları işler.

25. Data fetching yöntemleri nelerdir?

JavaScript’te veri alma yöntemleri arasında şunlar yer alır:

XMLHttpRequest veya fetch API kullanarak AJAX istekleri yapmak
JSONP (JSON with padding) ile veri çekmek
Server-side JavaScript (örneğin, Node.js) kullanarak veritabanından sorgulama yapmak
Web scraping kütüphaneleri (örneğin, cheerio veya puppeteer) kullanarak verileri web sayfalarından çekmek
Sosyal medya platformları veya diğer hizmetlerin JavaScript SDK’larını kullanarak veri çekme.

26. JavaScript’te işlemler asenkron bir şekilde mi ilerler?

— Evet, JavaScript işlemleri asenkron bir şekilde ilerler. JavaScript, bir web tarayıcısının çalışmasını etkileyebilecek herhangi bir işlemi arka planda yapar ve kullanıcının tarayıcıda yaptığı diğer işlemlere devam etmesine izin verir. Bu nedenle, JavaScript işlemleri arka planda yürütülür ve kullanıcının işlem yapmasına izin verilir. Bu asenkron çalışma, JavaScript’te özellikle kullanıcı arayüzü (UI) işlemleri ve veri işlemleri için önemlidir. Örneğin, bir web sayfasında bir formun gönderilmesi için bir butona tıklandığında, JavaScript kodu arka planda veri gönderirken, kullanıcının tarayıcıda yaptığı diğer işlemlere devam etmesine izin verir. Bu işlemler için JavaScript’de callback, promise ve async/await gibi mekanizmalar kullanılabilir.

27. Bir fonksiyonu düzenli aralıklarla çalıştırmamızı sağlayan fonksiyonun adı nedir?

(cevabı 28'in cevabında)

28. Bir fonksiyonu belirli bir gecikmeden sonra çalıştırmamızı sağlayan fonksiyonun adı nedir?

setTimeout fonksiyonu belirli bir zaman sonra çalıştırmaya yarar.
setInterval fonksiyonun belirli aralıklar ile sürekli çalışmasını sağlar.

kaynak: link

29. Constructor nedir?

Constructor’lar, class’dan türetilecek object’lerin özelliklerine ilk değer atamalarını yapmak için kullanılır. Yani constructor’lar object’leri ilk kullanıma hazırlamaktadır. Bu açıdan Javascript’te class yapısını tanımlamak için oluşturduğumuz fonksiyonlar, aynı zamanda constructor olarak çalışmaktadırlar. Yani JavaScript constructor, bir sınıfın yeni bir örneğini oluşturmak için kullanılan bir fonksiyondur. Örneğin, bir “Person” sınıfı oluşturalım ve bu sınıfın bir constructor fonksiyonu olsun. Bu fonksiyon, yeni bir “Person” nesnesi oluştururken isim ve yaş bilgilerini alır ve bu bilgileri nesnenin özelliklerine atar.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person1 = new Person("John", 30);
console.log(person1.name); // "John"
console.log(person1.age); // 30

JavaScript içerisinde class yapısı ile çalışmak yerine constructor functionların kullanımı ile de benzer şeyler yapılabilir.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person("John", 30);
console.log(person1.name); // "John"
console.log(person1.age); // 30

Bu iki kod bloğunda yapılan işlemler aynıdır.

30. New keywordu ne işe yarar?

JavaScript’te “new” anahtar kelimesi, bir nesnenin yeni bir örneğini oluşturmak veya bir yapıcı işlevi çağırmak için kullanılır. “New” anahtar kelimesi yapıcı işlev öncesinde kullanıldığında, yeni bir nesne oluşturur ve işlev içindeki “this” değerini yeni nesneye atar. Ayrıca, yapıcının “prototype” özelliğinin değerine gizli bir bağlantıya sahip yeni bir nesne oluşur, bu da yeni nesnenin yapıcının prototype’dan özellikleri ve yöntemleri miras almasına izin verir.

31. This, global this kavramlarını açıklayın?

JavaScript’te “this”, mevcut işlevin bir yöntemi olduğu nesnenin referansını verir. “this” değeri, işlevin nasıl çağrıldığına göre belirlenir.

Örneğin, bir işlev bir nesnenin yöntemi olarak çağrıldığında, “this” nesneye referans verir.

let myObject = {
  name: "My Object",
  sayName: function() {
    console.log(this.name);
  }
};
myObject.sayName(); // Output: "My Object"

Yukarıdaki örnekte, sayName işlevi içindeki “this” myObject’e referans verir, bu nedenle this.name çağrısı myObject'in name özelliğinin değerini döndürür.

Global ö scope içinde, this global nesneye referans verir, web tarayıcısında window nesnesi ve Node.js içinde global nesnesidir.

console.log(this); // window (web tarayıcısında) veya global (Node.js içinde)

Bir işlev bağımsız bir işlev olarak çağrıldığında, “this” global nesneye referans verir.

function sayName() {
  console.log(this.name);
}
name = "Global Object";
sayName(); // Output: "Global Object"

this değerinin call, apply veya bind yöntemleri kullanılarak değiştirilebildiğinin unutulmaması önemlidir.

32. Classlarda kullanılan super methodu ne işe yarar?

— JavaScript’te “super” anahtar kelimesi, bir sınıfın yapıcı yöntemi veya bir sınıfın bir yöntemi içinde kullanılır ve üst sınıfın yapıcısını veya yöntemini çağırmak için kullanılır.

Bir sınıf başka bir sınıfın (üst sınıf) alt sınıfı (ya da alt sınıf) olarak tanımlanırsa, üst sınıfın özelliklerini ve yöntemlerini kullanabilir ve erişebilir. Ancak, bazen alt sınıf üst sınıfın bir yönteminin özelliklerini geçersiz kılmak veya genişletmek isteyebilir. “Super” anahtar kelimesi, üst sınıfın yöntemini değiştirmeden önce veya sonra çağırmak için kullanılabilir ve üst sınıfın işlevselliğini korurken aynı zamanda yeni işlevsellik ekler. örnekler için bu kaynağı inceledim: link

33. Call, apply, bind kavramlarını açıklayınız?

— JavaScript’de, “call”, “apply” ve “bind” metotları, bir fonksiyonun nasıl çağrılacağını ve hangi değişkenlerin kullanılacağını belirlemek için kullanılır.

“call” metodu, fonksiyonu çağırmak için kullanılır ve ilk argüman olarak fonksiyonun “this” değişkenini belirler. Diğer argümanlar fonksiyonun parametreleridir. Örnek: “myFunction.call(thisArg, arg1, arg2, …);”
“apply” metodu, “call” metoduna benzer şekilde çalışır, ancak argümanlar bir dizi olarak geçirilir. Örnek: “myFunction.apply(thisArg, [arg1, arg2, …]);”
“bind” metodu, bir fonksiyonun “this” değişkenini ve başka argümanları sabitleyerek, fonksiyonun daha sonra çağrılmasını sağlar. Örnek: “var boundFunction = myFunction.bind(thisArg, arg1, arg2, …);”

Not: “this” keyword’ü javascript için dinamik bir keyword olduğu için bağlamına göre değişir ve call, apply ve bind metodları ile birlikte kullanılırsa kontrol edebilirsiniz.

34. Babel nedir, kullanmanın bize sağladığı avantajlar nelerdir?

— Babel, JavaScript kodunuzu eski tarayıcılar veya platformlar tarafından desteklenmeyen yeni JavaScript özelliklerini kullanarak yazdığınızda, bu özellikleri eski tarayıcılar veya platformlar tarafından anlaşılabilir hale getirmek için kullanabileceğiniz bir araçtır. Bu, özellikle web geliştiriciler için önemlidir çünkü tüm kullanıcıların aynı özellikleri kullanabildiğinden emin olmak isterler. Babel’in kullanmanın sağladığı avantajlar arasında:

Eski tarayıcılar ve platformlar tarafından desteklenmeyen yeni JavaScript özelliklerini kullanmanıza izin verir.
Kodunuzu daha okunaklı ve anlaşılır hale getirmenizi sağlar.
Kodunuzu daha verimli hale getirmenizi sağlar.
Kodunuzun ölçeklenebilir olmasını sağlar.
Kodunuzun test edilebilir olmasını sağlar.

35. React’ın avantajları ve dezavantajları nelerdir?

— React, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir ve web uygulamaları için kullanılır. Avantajları arasında:

Performans: React, Virtual DOM (Sanal Doküman Ağacı) teknolojisi kullanarak uygulamanın sadece değişen kısımlarını yeniden oluşturur, böylece uygulama hızlı ve verimli çalışır.
Esneklik: React, farklı platformlar ve frameworkler ile birlikte kullanılabilir ve kodunuzu farklı projelerde kullanabilirsiniz.
Ekip çalışması: React, büyük ekip çalışmaları için uygun bir seçenektir çünkü kodunuzu daha okunaklı ve anlaşılır hale getirmenize olanak tanır.

Dezavantajları arasında ise:

Öğrenme eğrisi: React öğrenmek için biraz zaman ve çaba gerektirebilir, özellikle JavaScript ve web geliştirme deneyimi olmayan kişiler için.
Yapısal değişiklikler: React, uygulamanızın büyüdükçe yapısını değiştirmeniz gerektiğinde zorluklar oluşturabilir.
JSX: React kullanırken JSX adlı bir sözdizimi kullanmanız gerekir, bu da bazı kişiler için alışılmadık olabilir.

36. Dom ve virtual dom kavramlarını açıklayın.

Dom (Document Object Model) ve Virtual DOM, web sayfalarının yapısını ve işlevini tanımlamak için kullanılan kavramlardır.

Dom, bir web sayfasının HTML, CSS ve JavaScript kodlarından oluşan yapısını tanımlar ve bu yapıyı programlama dillerine göre kullanılabilir hale getirir. Bu sayede, web sayfasının içeriğini ve özelliklerini JavaScript kodları ile manipüle etmek mümkün hale gelir.

Virtual DOM ise, dom yapısının yavaş ve zahmetli işlemlerini hızlandırmak için kullanılan bir yapıdır. Virtual DOM, gerçek DOM yapısının bir kopyasıdır ve bu kopya üzerinde yapılan değişiklikler gerçek DOM yapısına uygulanmadan önce öncelikle Virtual DOM üzerinde işlenir. Bu sayede gerçek DOM yapısına uygulanması gereken değişiklikler önceden hesaplanarak gerçekleştirilir ve böylece web sayfasının performansı arttırılır.

37. JSX sözdizimi nedir?

JSX, JavaScript eklentisi olarak tanımlanabilir. Bu sözdizimi, JavaScript kodunda HTML tarzı bir sözdizimi kullanmanıza olanak tanır. Bu, React ve diğer bazı JavaScript kütüphanelerinde kullanılan bir sözdizimidir. JSX, JavaScript nesnelerine dönüştürüldükten sonra tarayıcı tarafında çalışır.

daha detaylı bilgi: link

38. Prop ve component kavramlarını açıklayın.

Prop ve component, React JavaScript kütüphanesinde kullanılan iki önemli kavramdır.

Props: Props, bir React component’in diğer component’lerden veya uygulamanın diğer bölümlerinden alabileceği verileri ifade eder. Props, component’in dışarıdan veri almasını sağlar ve component’in özelliklerini dinamik olarak değiştirmesine olanak tanır.
Component: Component, React uygulamalarının temel yapı taşlarıdır. Bir component, bir HTML elementi veya bir grup elementi temsil eder ve bu elementlerin görünümünü ve davranışlarını tanımlar. Componentler, kendilerine verilen props’ları kullanarak içeriklerini oluşturur ve diğer componentlerle birlikte kullanılarak daha büyük ve daha karmaşık uygulamalar oluşturulabilir.

39. Prop drilling nedir?

“Prop drilling” veya “prop passing,” bir React uygulamasında bileşen hiyerarşisinin birden fazla seviyesinde props’ları (veri ve işlevleri) geçirmek olarak tanımlanır. Bileşenlerin ve hiyerarşinin sayısı arttıkça, bu pratik zor hale gelebilir ve yönetmek zor olabilir. Prop drilling alternatifleri arasında, Redux gibi bir durum yönetim kütüphanesi kullanmak veya yeni React içerik API’sini kullanmak sayılabilir.

40. Class component ve functional component arasındaki farklar nelerdir?

Class componentler, React’de kullanılan eski bir yöntemdir ve JavaScript sınıflarını kullanır. Class componentler, state ve lifecycle methodlarını barındırabilir. Örneğin, componentDidMount gibi lifecycle methodları sadece class componentlerde mevcuttur.

Functional componentler ise, React’de daha yeni bir yöntemdir ve JavaScript fonksiyonlarını kullanır. Functional componentler, state veya lifecycle methodları barındırmaz, ancak props alabilirler. Functional componentler daha hafif ve kolay okunur olmaları sebebiyle tercih edilir.

Özetle, class componentler state ve lifecycle methodları barındırırken, functional componentler sadece props alır ve lifecycle methodlarına sahip değildir.

41. Hangi hook’ları kullandınız?

Hangi hook’ları kullandınız? 👽

Hooks, React.js için tasarlanmış bir yapıdır. Hooks, uygulamanızdaki state ve diğer React özelliklerini kullanmanıza olanak tanır, ancak yine de sıradan JavaScript fonksiyonları olarak yazmanıza izin verir. Bu, uygulamanızda daha esnek ve kolay okunabilir kod yazmanıza olanak tanır.

React tarafından sağlanan bazı önemli Hook’lar:

useState: bir component içinde state kullanmak için kullanılır.
useEffect: bir component’ın mount veya update edilmesi sırasındaki efektleri yönetmek için kullanılır. (örneğin API çağrıları, event listeners)
useContext: bir component içinde global context değerlerini kullanmak için kullanılır.
useReducer: bir component içinde reducer’lar kullanmak için kullanılır.
useCallback: bir component içinde performans iyileştirmeleri sağlamak için kullanılır.
useMemo: bir component içinde performans iyileştirmeleri sağlamak için kullanılır.

Bu sadece bazı örneklerdir, React Hooks API’sinde daha pek çok Hook mevcut.

42. React’ta lifecycle methodlarını açıklayınız?

React için lifecycle methodlar, bir component’in oluşturulduğu, güncellendiği ve kaldırıldığı anlarda çağrılan fonksiyonlardır. Önemli lifecycle methodlar şunlardır:

componentDidMount(): Component ilk olarak ekrana render edildiğinde çağrılır.
componentDidUpdate(): Component güncellendiğinde (props veya state değiştiğinde) çağrılır.
componentWillUnmount(): Component kaldırıldığında çağrılır.

Ayrıca, React 17'den önce kullanılan lifecycle methodları arasında:

componentWillMount(): Component ilk olarak ekrana render edilmeden önce çağrılır.
componentWillReceiveProps(): Component yeni props almadan önce çağrılır.
shouldComponentUpdate(): Component güncellenmeden önce çağrılır ve true/false döndürür. Bu fonksiyon, componentin güncellenip güncellenmeyeceğini belirler.

React 17 ile birlikte, bunların yerine getDerivedStateFromProps() ve getSnapshotBeforeUpdate() gibi fonksiyonlar kullanabilirsiniz.

43. Neden hook’lar component’in en yukarısında çağırılır?

Hook’lar component’in en yukarısında çağırılması, component’in her render edildiğinde aynı state ve effect’leri kullanmasını sağlar. Bu, component’in daha prensipli bir şekilde yazılmasına ve daha az hata oluşmasına neden olur. Aynı zamanda, component’in her render edildiğinde hook’ların yeniden çalışmasının state ve effect’leri güncel tutmasını sağlar.

44. Syntetic Events nedir?

React Synthetic Events, React tarafından sağlanan JavaScript olaylarının (event) bir kapsamıdır. Bu olaylar, React tarafından yönetilen DOM ile JavaScript olayları arasında köprü görevi görür. Bu sayede, React kullanıcı arayüzündeki olayları (örneğin tıklama, girdi değişimi) daha kolayca işleyebilir ve uygulamanızda daha yüksek performans elde edebilirsiniz. detaylı link

45. Higher order componentler nedir, nerelerde kullanılır?

Higher order component (HOC) React.js için bir tasarım desenidir. HOC, bir componenti alır ve bunu daha geniş bir component olarak geri döndürür. Bu, componentin özelliklerini ve davranışlarını genişletmek için kullanılabilir. Örneğin, bir HOC kullanarak bir component’e oturum yönetimi veya veri erişim fonksiyonları ekleyebilirsiniz. HOC’lar ayrıca componentler arasında kod tekrar kullanımını sağlamak için kullanılabilir. detaylı link

46. Build almak ne anlama gelir, build işlemi esnasında neler olur?

JavaScript’ta “Build” işlemi, kaynak kodların derlenerek üretilen dosyaların oluşturulmasını veya birleştirilmesini içerebilir. Bu işlem, kaynak kodların optimize edilmesi, minify edilmesi, modül sistemi kullanılması veya diğer işlemleri içerebilir. Bu işlemler, JavaScript uygulamalarının daha hızlı ve daha az bellek kullanarak çalışmasını sağlamak için yapılır.

47. Webpack nedir?

Webpack, JavaScript uygulamalarının yapılandırmasını ve optimize edilmesini sağlamak için kullanılan bir araçtır. Bu araç, JavaScript dosyalarını ve diğer statik dosyaları (resimler, CSS dosyaları, vb.) modül olarak işler ve bunları tek bir veya birden fazla çalıştırılabilir dosyaya paketler. Bu, uygulamanın hızlı ve optimize edilmiş bir şekilde çalışmasını sağlar.

48. React memo, usememo, usecallback hooklarını açıklayınız?

React memo fonksiyonu, bir componentin re-render edilmesini önlemek için kullanılır. Bu fonksiyon, componentin props değiştiğinde bile render edilmemesini sağlar. memo ile birlikte kullanılan bir başka fonksiyon ise useMemodur. useMemo fonksiyonu, bir değerin değiştiğinde yeniden hesaplanmasını sağlar.

useCallback hook'u ise, bir fonksiyonun değişmediğinde yeniden oluşturulmamasını sağlar. Bu hook, özellikle performans için önemlidir çünkü componentler arasında fonksiyonların tekrar tekrar oluşmasını önler.

_______________________________________________________

Aşağıdaki soruları da başka bir blog’da devam edeceğim.

49. Hiç custom hook yazdın mı yazdıysan ne amaçla yazdın?

50. State management yöntemleri nelerdir?

51. Context api ve redux nedir ,farkları nelerdir?

52. Linter nedir?

53. Redux thunk ne amaçla kullanılır?

54. Git flow ne amaçla kullanılır?

55. Hangi UI librarylerini kullandın?

56. Next Js’in bize sağladığı avantajlar nelerdir?

57. SSR, CSR, SSG kavramlarını açıklayın?

“İşe giriş sürecinde bana yöneltilen teknik soruları elimden geldiğinde derlemeye çalıştım. Bu soruların cevaplarının hepsini ben de bilmiyordum. İşe girdiğim şirket ile olan mülakatımda da teknik olan tüm soruları cevaplayamamıştım. Zaten sizin seviyenize göre mülakatı yapan kişi soruların ağırlığını azaltıp, artırıyor.” Murat Can Şahin

Bu anlamda ben de elimden geldiğince cevapları araştırmaya çalıştım. Benim de bilmediğim çok şey vardı, bu sayede öğrenmiş oldum. Mülakatlarınıza ufak bir katkısı bile olursa ne mutlu…

Okuduğunuz için teşekkür ederim, iyi çalışmalar! :)