DEV Community: Pınar Suvaçoğlu

Cracking JavaScript: My Notes from LeetCode’s 30-Day Challenge

Pınar Suvaçoğlu — Thu, 03 Apr 2025 22:05:21 +0000

I have compiled my notes while working on LeetCode's 30 Days of JavaScript exercises. This study covers key aspects of JavaScript and explains concepts we frequently use but may not fully understand. I believe it will also be very useful for interview preparation.

Resources I use:

I refer to ChatGPT for examples and explanations
I use Test Your JavaScript Knowledge by Lydia Hallie on Frontend Masters
I also follow 30 Days of JavaScript

Part1: Closures

Closures are a fundamental concept in JavaScript that allow functions to retain access to their lexical scope even after the outer function has finished executing. This is possible because functions in JavaScript "capture" the variables they reference from their surrounding scope.

Closures occur when:

A function is defined inside another function.
The inner function uses variables from the outer function’s scope.
The outer function returns the inner function, and the inner function is later executed elsewhere.

A closure is when a function remembers its own lexical scope even if it is called by another function’s lexical scope.
If a function uses a variable outside of its own scope, it still has access to that variable even when executed from a different scope.

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

Why Are Closures Useful?

Data Encapsulation: Closures allow private variables by keeping them accessible only within a function.
Maintaining State in Callbacks and Event Handlers: Used in setTimeout, event listeners, or asynchronous operations.
Avoiding Global Variables: Helps prevent polluting the global scope.

Part2: Basic Array Transformations

Question: What Is the Performance Difference Between the ForEach Method and the For Loop?

For Loop

The for loop is faster and can be optimized, but it requires more manual work. Its readability is lower.
Since it involves less abstraction, it is easier for the JavaScript engine (e.g., V8) to optimize.
Direct access: In a for loop, array elements are accessed directly using arr[i] in each iteration. This is faster compared to calling an internal function like forEach.
Disadvantage: Lower abstraction means writing more code, which reduces readability.

ForEach Method

forEach provides abstraction for looping over an array. While it makes the code cleaner and more understandable, it comes with a performance cost. This is because a callback function is invoked in each iteration.

Part3: Function Transformations

Functional Programming

1. Pure Functions:

Pure functions are functions that always produce the same output for the same input and have no side effects.

// Pure function example
function add(a, b) {
  return a + b;  // Always returns the same output for the same input
}
console.log(add(2, 3));  // Output: 5

2. Immutability:

In functional programming, data should be immutable. This means that once a data structure is created, it should not be changed; instead, a new data structure should be created.

// Immutability example
const arr = [1, 2, 3];
const newArr = [...arr, 4];  // Instead of modifying the original array, we create a new one
console.log(arr);     // Output: [1, 2, 3]
console.log(newArr);  // Output: [1, 2, 3, 4]

3. High-Order Functions:

High-order functions are functions that can take other functions as arguments or return a function (e.g., map, filter, reduce).

// High-order function example
const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);  // 'map' is a high-order function
console.log(doubled);  // Output: [2, 4, 6, 8]

4. Function Composition:

Function composition is the process of combining multiple functions to create more complex functions.

// Function composition example
const add5 = x => x + 5;
const multiplyBy2 = x => x * 2;

const composedFunction = x => multiplyBy2(add5(x));  // Compose functions

console.log(composedFunction(3));  // Output: 16 (3 + 5 = 8, 8 * 2 = 16)

5. First-Class Functions:

Functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

// First-class function example
const greet = name => `Hello, ${name}!`;

const sayHello = greet;  // Assigning a function to a variable
console.log(sayHello("Alice"));  // Output: Hello, Alice!

6. Declarative Programming:

Declarative programming focuses on what needs to be done, rather than how it is done. For example, using reduce instead of a for loop.

// Declarative programming example using reduce
const numbers = [1, 2, 3, 4];

// Using reduce to sum the numbers (declarative)
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // Output: 10

7. Recursion:

Recursion is a technique where a function calls itself instead of using traditional loops.

// Recursion example
function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);  // Recursive call
}

console.log(factorial(5));  // Output: 120 (5 * 4 * 3 * 2 * 1)

Using Memoize to cache Javascript function results and speed up your code!

Memoization improves performance by storing the results of expensive function calls in a cache. When the function is called again with the same inputs, it retrieves the result from the cache instead of recomputing it, making execution faster.

A common example of memoization is optimizing recursive Fibonacci calculations:

function memoize(fn) {
  const cache = {};  // Stores computed results
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      console.log("Fetching from cache:", key);
      return cache[key];
    }
    console.log("Computing result for:", key);
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

// Expensive Fibonacci function
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Memoized Fibonacci function
const memoizedFibonacci = memoize(fibonacci);

console.log(memoizedFibonacci(10)); // Computed
console.log(memoizedFibonacci(10)); // Retrieved from cache

Final Summary:

The memoize function takes a function as an argument and returns a new function that caches the results. When called with the same arguments, it retrieves the result from the cache instead of recomputing it.
This improves performance, especially for functions that take a long time to compute or are frequently called with the same arguments.
How It Works:
The memoize function returns an inner function. This inner function takes a rest parameter (...args), allowing it to accept any number of arguments.

Part 4: Promises and Time In Javascript

`Promise.all()` Method

The Promise.all() method takes multiple promises as an array, executes them simultaneously, and waits for all of them to resolve successfully.

If all promises succeed, it returns an array containing their results.

If any promise rejects, even if others have already resolved, the first rejected promise is caught, and the execution moves to the catch block.

Common Interview Question on setTimeout & clearTimeout

Question:
What will be the output of the following code, and why?

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

console.log("End");

Answer:
The output will be

Start  
End  
Timeout

Explanation:

JavaScript is single-threaded and uses an event loop.

Even though the timeout is set to 0 milliseconds, the callback is placed in the task queue and waits for the call stack to be empty.

Since console.log("End") is in the main execution thread, it runs before the timeout callback.

This question will lead us to the Event Loop and Task Queue concepts.

Event Loop and Task Queue

Web APIs are managed by the Event Loop and add tasks to the appropriate Task Queue when the Call Stack is empty.

The Microtask Queue executes before the Macro Task Queue.

*setTimeout, setInterval, DOM Events, and WebSockets belong to the Macro Task Queue.

*fetch().then(), Promise.then() belong to the Microtask Queue.

*The Event Loop processes the Microtask Queue first, then the Macro Task Queue in each cycle.

Tricky situations :)

new Promise(() => console.log(5));
Here are the steps that occur:

When new Promise() is called, the following steps occur:

A Promise is created, and the executor function inside the constructor is executed immediately.
console.log(5) runs immediately in the Call Stack.
This operation does not go to the Web API or Task Queue because a Promise’s executor function runs synchronously.
If resolve() or reject() is called inside the executor, these calls are asynchronous and are added to the Microtask Queue.

Summary: How to Determine if a Task is a Microtask or a Macrotask?
You can use the following logic to identify whether an operation is a Microtask or a Macrotask:

Asynchronous operations managed by JavaScript itself (Promises, async operations, queueMicrotask) → Added to the Microtask Queue.

Promise-based tasks are the highest-priority asynchronous operations.

The Microtask Queue runs immediately after the Call Stack is cleared.

2.
Operations managed by browser APIs (setTimeout, setInterval, DOM Events, WebSockets) → Added to the Macrotask Queue.

The Macrotask Queue is processed in the next Event Loop cycle.

It runs after all Microtasks are completed.

3.
General Rule:

Tasks that require an immediate response are placed in the Microtask Queue (Promises, queueMicrotask, MutationObserver).

Larger or scheduled operations are placed in the Macrotask Queue (setTimeout, DOM events, WebSockets, setInterval).

What is `Promise.race()`?

Promise.race() is a JavaScript method that takes multiple Promises and returns the first one that settles (either resolves or rejects). It "races" the Promises against each other and immediately returns the result of the first one that completes.

const p1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const p2 = new Promise((resolve) => setTimeout(resolve, 50, 'Second'));

Promise.race([p1, p2])
  .then(result => console.log(result)); // Output: 'Second'

What is Debounce?

Debounce is a programming technique used to limit the number of times a function is executed. It ensures that a function is only called once after a specified delay and prevents it from being called too frequently within that time frame.

Common Use Cases:
Preventing multiple API calls when a user types in a search box (e.g., live search)
Reducing excessive button clicks (e.g., a "Submit" button)
Optimizing window resize or scroll event listeners

How Does Debounce Work?

When an event (like keypress, scroll, or resize) occurs, debounce waits for a defined time (delay) before executing the function.
If the event happens again within that time, the timer resets.
The function executes only after the delay has fully elapsed without further interruptions.

function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId); // Clear the previous timeout
        timeoutId = setTimeout(() => func(...args), delay); // Set a new timeout
    };
}

// Example Usage
const searchInput = document.getElementById("search");

function fetchResults(query) {
    console.log(`Fetching results for: ${query}`);
}

const debouncedSearch = debounce(fetchResults, 500);

searchInput.addEventListener("input", (event) => {
    debouncedSearch(event.target.value);
});

I know this isn’t an all-encompassing guide, but rather a collection of notes highlighting the key points I found important. Happy coding ^_^

Windows üzerinde geliştirme ortamı kurulumu

Pınar Suvaçoğlu — Mon, 20 Feb 2023 20:27:24 +0000

Windows Üzerinde Geliştirme Ortamı Kurulumu

Yeni yazılım öğrenmeye başlayan, ilk kurulumları nasıl yapacağını düşünenler için git, github'da proje oluşturma, ssh key ekleme, PHP için laragon kurulumu, composer kurulumu gibi konuları kısaca yazdım.

Windows üzerinde git kurulumu ve git bash ile unix command line kullanımı

https://gitforwindows.org/ sayfasından git için gerekli kurulum dosyasını indiriyoruz ve çalıştırıyoruz. Herhangi bir değişiklik yapmadan ilerleyerek kurulum yapabilirsiniz.
Terminal'de unix command line kullanımı için git bash kullanılabileceği gibi, ben windows üzerinde terminal olarak "Hyper Terminal" tercih ediyorum.
Hyper Terminal kurulumu için, Git bash kurulumundan sonra https://hyper.is 'den windows için kurulumu indirin, setup dosyasını çalıştırın.
Kurulum tamamlandığında hyper'a girin ve sol üstten edit > preference içerisine girin, içindekilerin hepsini silip bu linkteki repository'den ayarları kopyalayıp yapıştırın ve kayıt edin. Hyper terminali kapatıp açın, artık unix komutlarını hyper terminalde kullanabilirsiniz. 🎉
Hyper terminal , çokça teması olan, ekleyebileceğiniz bir sürü pluginler, bulunan, kendinize göre özelleştirebildiğiniz bir terminal.

Git ile local repository oluşturmak.

Terminalde projenizin ana dizininde iken > git init.

komutunu çalıştırarak projenize git versiyon kontrol sistemini eklemiş oluyorsunuz.

git add .

komutu ile projenizin içerisindeki tüm dosyaları staging area(Git klasörünüzde bulunan ve bir sonraki kayıt işlemine dahil olacak olan kodları tutan dosya). Eğer spesifik bir dosyayı eklemek istiyorsak ilgili dosyanın adını uzantısı ile birlikte yazarak ekleyebiliriz

git add deneme.txt

staging area'daki kaydedilen kodları bu komutun yazıldığı andaki hali ile kayıt etmek için aşağıdaki komutu çalıştırıyoruz ve yaptığımız değişiklikler local repository'mize kayıt edilmiş oluyor.

git commit -m "initial commit"

Github ile remote repository oluşturmak.

- Github 'ın ana sayfasından eğer üyeliğimiz yok ise "signup" ile kayıt oluyoruz. Kayıt formunu doldurup hızlıca üye olabilirsiniz.

Github'a üye olduktan sonra, sağ üstte + simgesine basarak "new repository" ye giriyoruz.
Açılan sayfadan, projemizin ismini ve açıklamalarını giriyoruz. Hali hazırda olan bir projenizi ekleyecekseniz zaten içerisinde mevcut readme ve gitignore dosyaları olacağı için burada oluşturmak zorunda değilsiniz. Projeniz ile birlikte de oluşturabilirsiniz.
Yukarıda oluşturduğumuz local repository'i şimdi buradaki komutlar ile remote repository'e göndereceğiz.

Görselde ikinci kısımdaki > git remote add origin https://github.com/Katjulidis/my-laravel-project.git

komut satırını çalıştırıyoruz. Böylece localde commitlediğimiz repository'i remote olarak stage'e eklemiş oluyoruz.

git branch -M main

burada main yerine başka bir isim de verebilirsiniz. Ancak genel olarak ana branch için "main" ya da "master" isimlendirilmeleri yapılır.

git push -u origin main

komutu ile local repository, remote repository'e kopyalanmış olur.

Github hesabına ssh key eklenmesi

SSH key, güvenli parola doğrulanmasını sağlamak için kullanılan anahtardır.*ssh key nedir?

İlk başta kurulumunu yaptığımız Hyper terminal ile git bash komutlarına ulaşabiliriz
Anahtar oluşturmaya başlamak için, aşağıdaki koda kendi github hesabınıza ait mail adresini ekleyerek terminale yazıyoruz. > ssh-keygen -t ed25519 -C "your_email@example.com"
"Enter a file in which to save the key" kısmını direk enter tuşuna basarak geçebilirsiniz, key'İ default olarak belirlediği directory'e kaydedicektir.
"Enter passphrase" kısmında, SSH anahtarlarınızı her kullandığınızda parolanızı yeniden girmek zorunda kalmamak için bir kimlik doğrulama aracısı yapılandırabilirsiniz. (passphrase yazarken terminalde yazdığınız harfler/rakamlar gözükmeyecektir, phassphrase'inizi iki kere girmenizi isteyeceği için tek seferde yazıp enter ile ilerleyerek sorunsuz geçebilirsiniz bu kısmı) Daha detaylı bilgi için
işlem tamamlandığında yukarıdaki gibi bir ekranla karşılaşmanız gerekiyor.
Github'da SSH key sekmesine aşağıdaki gibi ulaşabilirsiniz.
New SSH Key'e girdiğinizde aşağıdaki gibi bir ekran gelecek. En soldaki gibi .ssh klasörünün içerisindeki, sonu .pub ile biten dosyayı notepad ile açıp, içeriğini kopyalayın ve github'daki ilgili alana yapıştırıp "Add SSH key" ile keyinizi kayıt edin 🎉

Laragon Kurulumu

Laragon aynı xampp ve wamp gibi, localhost geliştirme ortamını sağlayan programdır.
git, phpmyadmin, Node.js/MongoDB, Python/Django/Flask/Postgres, Ruby, Java, Go için geliştirme ortamlarını destekler.

-Kurulum yaptıktan sonra sol alttaki start all ile mevcut yüklü programları çalıştırır.

İster laragon üzerinde her hangi bir yere sağ tıklayıp, ister windows simgelerinin olduğu yerden logosuna sağ tıklayarak, Tool > Quick Add ile kolayca istediğiniz ortamı ekleyebilirsiniz.
Geliştirme yapacağınız klasörleri Laragon > www klasörünün içine eklemelisiniz.
Laragon'u start ile başlattığınızdan emin olduktan sonra adres satırına localhost/proje-klasör-adı yazdığınızda çalışıyor olacaktır.
Henüz bir proje eklemediyseniz, laragonun test için eklediği index.php dosyası mevcut, adres satırına localhost yazdığınızda çalışıyor olduğunu göreceksiniz.

Composer Kurulumu

PHP'nin bağımlılık ve paket yöneticisi olan Composer kurulumu için buradan Composer-Setup.exe. 'yi indirip hızlıca kurulum yapabilirsiniz.
Laragonun terminalini açıp composer --version ile composer sürümünüzü kontrol edebilirsiniz.
Bağımlılıkları yüklemek için

composer require paket_adi
Paket kurulumu yapıldıktan sonra vendor klasörü içerisinde composer.json isimli dosyada kurduğunuz paketleri görebilirsiniz.
Hali hazırda mevcut composer.json dosyanız varsa, içerisindeki paketlerin kurulması için terminale aşağıdaki komutu girmeniz gerekiyor.

composer install
mevcut paketleri güncellemek için

composer update

Önemli Not: Windows üzerinde composer indirilirken, kurulum yapıldıktan sonra terminale aşağıdaki komut girilerek, windowsta olmayan php paketleri görmezden gelmesini sağlayarak, çıkacak hataların önüne geçmiş olursunuz.

composer install --ignore-platform-reqs

Npm Kurulumu

Npm uygulamanızda size kolaylık sağlayacak 3.parti yazılımları yüklemeyi ve bağımlılıkları yönetmeyi sağlayan paket yöneticisidir.
Npm package.json dosyası ile projede kullanılan tüm paket ve bağımlılıkları barındırır.
Npm kurulumu için Node.js kurulması gerekiyor, node.js'in sitesinden indirme işlemini yaptığınızda npm'de onunla birlikte kurulmuş olacak. Yüklemeden sonra terminale node -v yazdığınızda aşağıdaki gibi bir çıktı almanız gerekiyor. Tabii ki versiyonu yüklediğiniz güne göre değişiklik gösterebilir. Npm'i de aynı şekilde npm -v ile yüklendiğini kontrol edebilirsiniz.

package.json dosyasını oluşturmak için projenizin ana dizininde npm init komunu çalıştırmanız gerekiyor. Bu kısmı atlayıp daha sonra package.json üzerinden bu değişiklikleri yapmak istiyorsanız npm init -y ile bu kısmı geçebilirsiniz.
İçerisinde bağımlılıkları ve paketleri olan package.json dosyası aşağıdaki gibi görünecektir
Bu sayede projelerimizi github'a gönderirken .gitignore 'a node_modules klasörünü ekleriz ve büyük boyutlu bu paket dosyalarını göndermemiş oluruz. Projeyi bir başkası indirdiğinde ve ya bir başkasının projesini local'de çalıştırmak istediğinizde npm init komutu ile tüm tanımlı bağımlılıkları yükleyebilirsiniz.
Bir paket global olarak yüklenmek istendiğinde npm install <paket adı> -g --save-dev komutu kullanılır.
- Projeye özel olarak yüklenmekk istendiğinde sadece npm install <paket adı> --save-dev yazılması yeterlidir