
![Bubble Sort](/images/posts/bubble-sort.png)

Bubble sort algoritması bir listeyi en düşük değerden en yüksek değere doğru sıralayan bir algoritmadır.

Bu algoritma basit bir yapıya sahiptir ve karşılaştırma temelli bir algoritmadır. Çalışma prensibi; listedeki her bir elemanın yanındaki eleman ile karşılaştırılması ve ilk elemanın değeri, ikinci elemanın değerinden büyükse iki elemanın yer değiştirmesi şeklinde olmaktadır. Daha sonra ikinci ve üçüncü elemanların değerleri karşılaştırılır. İkinci elemanın değeri üçüncü elemanın değerinden büyükse bu iki eleman da yer değiştirir. Tüm dizi tamamen bitene dek bu işlem bu şekilde sürecektir. Tüm elemanlar teker teker hemen yanındaki elemanlar ile karşılaştırıldığından çok çalışan bir algoritma olduğu görüşü söz konusudur.

Bu algoritmayı insertion sort algoritmasından bariz şekilde ayıran özelliği küçük olarak tespit edilen elemanın araya giremiyor oluşudur. Yani örneklemek gerekirse üçüncü eleman 10 olsun ve ikinci eleman 15 olsun. Bu algoritma çalışırken 10 ile 15 kendi aralarında yer değiştirmektedirler. Küçük olan değer birince elemandan daha küçükse bile yanındakini ezip birinci elemana gidemeyecektir.

Dizideki tüm elemanlar birbirleri ile yer değiştirmiş olsa dahi dizi elemanları tamamen sıralanmamış olabilirler. Bu yüzden baştan yeni bir iterasyona başlanır ve aynı sıralama tekrar yapılır. Bu şekilde sonunda dizinin tamamı sıralanmış olur. Algoritmanın kaç iterasyonda kendisini bitirdiği de önemli bir ölçü olacaktır.

### Zaman Karmaşıklığı

Tüm elemanları tek tek ve birden fazla kez gezdiği için en kötü durum (Worst Case) `O(N^2)`, En iyi durum (Best Case) ise `O(n)` olur.

### Örnek:

`20,15,5,1,9,13` sayı dizisini bubble sort algoritması ile sıralayalım.

ilk iki eleman birbirleri ile kıyas edilir. `15 < 20` olduğu için yer değiştirir. `15,20,5,1,9,13` olur.
ikinci ve üçüncü elemanlar birbirleri ile kıyas edilir. `5 < 20` olduğu için yer değiştirir. `15,5,20,1,9,13` olur. Dikkat: Insertion Sort olsaydı 5 değeri en başa (araya ekleme) girerdi.
üçüncü ve dördüncü elemanlar kıyas edilir. `1 < 20` olduğu için yer değiştirir ve `15,5,1,20,9,13` olur.
dördüncü ve beşinci elemanlar kıyas edilir. `20 > 9` olduğu için yer değiştirilir. `15,5,1,9,20,13` olur.
beşinci ve altıncı elemanlar kıyas edilir. `13 < 20` olduğu için yer değiştirilir. `15,5,1,9,13,20` olarak son halini alır.
Yukarıdaki beş adımda birinci iterasyon tamamlanmıştır ancak sayılar halen sıralı değildir. Bu yüzden ikinci iterasyona başlanılır ve aynı işlemler aşağıdaki gibi tekrar edilir.

ilk iki elemana bakılır `15 > 5` olduğu için yer değiştirilir. `5,15,1,9,13,20` olur.
ikinci ve üçüncü elemana bakılır. `15 > 1` olduğu için yer değiştirilir. `5,1,15,9,13,20` olur.
üçüncü ve dördüncü elemana bakılır. `15 > 9` olduğu için yer değiştirilir. `5,1,9,15,13,20` olur.
dördüncü ve beşinci elemana bakılır. `15 > 13` olduğu için yer değiştirilir. `5,1,9,13,15,20` olur.
beşinci ve altıncı elemana bakılır. `15 < 20` olduğu için bir şey yapılmaz. `5,1,9,13,15,20` olarak kalır.
Yukarıdaki beş adımda ise ikinci iterasyon tamamlanmış olur ancak dizi halen sıralı değildir. Bu yüzden üçüncü iterasyona başlanılır ve aşağıdaki işlemler yapılır.

ilk iki elemana bakılır. `5 > 1` olduğu için yer değiştirilir. `1,5,9,13,15,20` olur.
ikinci ve üçüncü elemanlara bakılır sıralı olduğu için bir şey yapılmaz.
üçüncü ve dördüncü elemanlara bakılır sıralı olduğu için bir şey yapılmaz.
dördüncü ve beşinci elemanlara bakılır sıralı oluğu için bir şey yapılmaz.
beşinci ve altıncı elemanlara bakılır sıralı olduğu için bir şey yapılmaz.
Böylelikle üç iterasyonda veriler sıralanmış olur.


Bubble Sort Hakkında


![Concurrency](/images/posts/concurrency.png)

JavaScript, **single-thread** bir dildir. Bu da, aynı anda sadece bir görevi yerine getirebilir anlamına gelir. Bu threadler event-based'tir ve yalnızca event'ların gerçekleşmesiyle triggerlanırlar.

Genellikle, bir programın diğer bölümleri bozmadan normal akışının dışında çalışması, daha iyi bir uygulama performansı sağlamak için gereklidir. Ancak, JavaScript dili, aynı anda birden fazla ifadenin yürütülmesine izin verecek şekilde tasarlanmamıştır. İfadeler birbirini takip ederek çalışır. Peki JavaScript birbirini bloklamayan görevleri, diğer ifadeleri etkilemeden nasıl gerçekleştiriyor?

## Call Stack, Heap ve Queue

JavaScript single-thread bir dil olmasına rağmen, tarayıcı karmaşık işlemler gerçekleştirmek için yeterince güçlüdür. Call stackler, heapler ve queuelar, tarayıcının bu işlemleri gerçekleştirmesine izin veren birer parçasıdır.

**Heap:** Kodumuzda tanımlanan nesnelerin ve değişkenlerin depolandığı yer veya bellek. Tarayıcı içindeki değişkenlere ve nesnelere bellek burada tahsis edilir.

**Callback queue**: Kodların yürütülmeden önce sıraya konulduğu ve depolandığı yerdir. Queue, first-in, first-out (FIFO) prensibine göre çalışır.

**Call Stack:** Call stack, function call'ları tutar. Programın yürütülmesi sırasında her fonksiyon stackin en üstüne eklenir ve tamamlandıktan sonra çıkarılır. Programın yürütülmesi sırasında çağrılan fonksiyonları kaydeden basit bir veri yapısıdır.

Her fonksiyon, expressionları ve statementları içeren bir stack frame oluşturur ve ardından stacke eklenir. Bir değer return edildiğinde, stackten çıkarılır.

Birbiri içerisinde nested şekilde bulunan tüm fonksiyonlar için stack frame oluşturulur. Stack içerisindeki öğeler genellikle, first-in, last-out (FILO) şeklinde sıralanır.

## Concurrency nedir?

Concurrency, aynı anda birden fazla hesaplamanın gerçekleşmesine izin verir. Aynı anda birden fazla görevin gerçekleştirilme fikrini açıklamak için kullanılır. **Parallelism** ile karıştırılmamalıdır.

Concurrency, farklı hedeflere sahip farklı görevleri aynı anda gerçekleştirme kavramını ifade ederken, parallelism, programın çeşitli bölümlerinin aynı anda bir görevi gerçekleştirmesini içerir.

**Parallelism**, programların daha hızlı çalışmasını sağlamak için kullanılan bir computation türüdür. Bu programlama yaklaşımında, işlemler paralel olarak yürütülür. Programlar küçük tasklere bölünür ve aynı hedefe ulaşmak için aynı anda gerçekleştirilirler.

**Multi-threading**, aynı kaynağı paylaşırken bağımsız olarak iki veya daha fazla talimatın yürütüldüğü bir programlama tekniğidir. JavaScript, tasarım gereği multi-thread bir dil değildir, ancak modern web workerların kullanımı ile mutl-threading elde edilebilir.

## Concurrency nasıl çalışır?

JavaScript'in concurrency modeli, kodu eşzamanlı olarak yürüten event loop'una dayanır. JavaScript, varsayılan olarak, event looplar, call backler, promiseler veya async/await kullanarak asenkron bir programlama modeliyle concurrency oluşturur. Rust ve Go gibi bazı diller, concurrent tasklerin yürütülmesi sırasında basitlik ve performans sunarlar. Ancak, JavaScript concurrency için tasarlanmamıştır, buna rağmen JavaScript event-loop ile server ve client sided olarak concurrent çalışabilir.

## Event Loop

Event loop, fonksiyonları asenkron olarak yürütmek için JavaScript tarafından benimsenen modeldir. Queue'ya alınan görevleri yürütmekten sorumludur ve JavaScript'in multi-thread görevleri gerçekleştirebilme yeteneğinin arkasındaki sırdır.

JavaScript, bir betik yürütmesini en üstten başlatır ve son satıra kadar devam eder. Genellikle yürütülecek işlevler callback queue'da saklanır.

Event loop sürekli olarak hem callback queue'yu hem de call stack'i izler. Call stack'in boş olup olmadığını kontrol eder ve callback queue'daki bir sonraki öğeyi call stack'e pushlar. Call stack boş değilse event loop hiçbir şey yapmaz. Call stack boş olana kadar bekler ve callback queue'daki bir sonraki işlevi call stack'e pushlar.

Aşağıdaki resim JavaScript runtime'ını, Web API'yi, call stack'i ve event loop'u göstermektedir:

Event loop sürekli olarak callback queue'dan fonksiyonları alır ve call stack boşaldığında bunları call stack'e iter. Call stack'teki görev tamamlandıktan sonra, event loop callback queue'daki bir sonraki öğeyi alır ve işlemeye başlamak için call stack'e gönderir. Bu, olay döngüsünün nasıl çalıştığının temel prensibidir.

## Callback

Node.js, hızlı I/O işlemlerini gerçekleştirmek için callback'leri yoğun bir şekilde kullanır. Callbackler, başka bir fonksiyonun argümanı olarak geçen işlevlerdir. JavaScript'te callbackler, uygulamaların beklenmedik donmasını azaltmak için kullanılır.

Bir callback fonksiyonu, kendisini bir argüman olarak alan dıştaki fonksiyonun tamamlanmasından sonra yürütülür. Başka bir fonksiyonun tamamlanmasının hemen ardından bir fonksiyonu çalıştırmak için kullanılır. setTimeout() yöntemi, başka bir işlevi argüman olarak alan bir işlevin bir örneğidir. İşte bir örnek:

```
const greeting = function () {
console.log("Hello there");
};
setTimeout(greeting, 3000);
```

Callback fonksiyonu (greeting), setTimeout() metoduna bir argüman olarak iletilir ve setTimeout() işlemini tamamladıktan sonra 3 saniye bekler ve hemen sonra yürütülür.

Callback fonksiyonları, JavaScript'in kodları asenkron olarak yürütmesine izin verir. setTimeout() fonksiyonu yürütülürken, diğer ifadeler eş zamanlı olarak yürütülebilir. Bu yöntemi kullanarak, JavaScript concurrent çalışabilir ve birden fazla ifadeyi aynı anda yürütebilir.

## Promise'ler

Promise'ler, JavaScript'te asenkron görevleri ele almak için kullanılabilecekleri anlamında callback'lere benzerler. Promise'lerin benimsenmesinden önce, görevleri asenkron olarak ele almak için callback fonksiyonları kullanılırdı. Ancak, çoklu nested callback fonksiyonlarını ele almak bir sorun haline geldi ve bu da programa gereksiz karmaşıklık ekledi. Promise'ler, nested callback'leri ele almanın ideal yolu haline geldi.

Bir promise, bir asenkron işlemden sonra bir değer üreten bir nesnedir. Asenkron işlemin başarılı olup olmadığını belirlemek için iyi bir yoldur. Bir promise kullanımına dair örnek aşağıda verilmiştir:

```
let promise = new Promise(function (resolve, reject) {
resolve("done")
reject("error")
}

promise.then(function(value) {
console.log(value)
})
```

Bir promise, resolved ve rejected promise'leri bitirmek için _.then_ ve _.catch_ yöntemlerini kullanır.

Promisler asenkron olarak çalıştığından, yukarıdaki kodda olduğu gibi işlevlerin işlemi promise'ın sonucuna bağlı olan fonksiyonlar _.then_ yöntemi içine yerleştirilmelidir. Bu şekildeki kodlar yalnızca promise alındığında çalışır.

## Async/await

Promisleri kullanmak ve zincirlemek karmaşık ve anlaşılması zor olabilir, bu sorunu çözmek için async/await ortaya çıktı. Asenkron kodları verimli bir şekilde çalıştırmak ve tanımlamak için async/await kullanılır.

**async** anahtar kelimesi, bir işlevin asenkron olduğunu tanımlamak için bir işlevin önüne yerleştirilir ve işlevin her zaman bir promise döndürdüğünden emin olur.

**await** anahtar kelimesi, bir promise dönene kadar işlevi geciktirir. Bir fonksiyon, bir promise alınana kadar yürütmesini tamamlamaz. await anahtar kelimesi, bir async işlevi dışında kullanılamaz.

Örnek bir async/await kodu:

```
async function() {
await setTimeout(() => {
console.log("Welcome Back!")
}, 2000)
}

console.log("Hello")
```

Asenkron fonksiyonların işlenmesi zaman alabilir ve diğer görevlerin yürütülmesini engellemeden arka planda eşzamanlı olarak çalışabilir.

JavaScript'teki asenkron işlevler async anahtar kelimesi ile tanımlanır. Bu, JavaScript'e işlevin yürütmesini bitirmesinin zaman alacağını ve yürütülürken diğer görevlere devam edebileceğini söyler.

Bu, JavaScript'in, asenkron işlevden bir yanıt almadan önce async işlevinin dışındaki diğer işlemleri çalıştırmasına olanak tanır. await anahtar kelimesi, işlevin yürütmesini tamamlaması zaman alan kısmını tanımlar. Yukarıdaki kodun sonucu şudur:

```
Hello
Welcome Back!
```

Görebileceğiniz gibi, "Hello" mesajı "Welcome Back!" mesajından önce görüntüleniyor. Bu, asenkron fonksiyonun arka planda çalıştığı ve "Welcome Back"i görüntülemek için yaklaşık iki saniye beklediği çin olur. JavaScript async fonksiyonu arkaplanda çalıştırırken, async fonksiyondan bir sonuç beklemeden diğer ifadeleri çalıştırmaya devam eder.

Bu, JavaScript'in görevleri gerçekleştirip, ifadeleri concurrent olarak çalıştırabilmesinin bir örneğidir.

Callback'ler, promise'ler ve async/await, görevleri event loop ve tarayıcının Web API'leri yardımıyla concurrent olarak çalıştırılmasını sağlayan JavaScript özellikleridir.

## Sonuç

Veri işleme sırasında sequential kod yürütülmesi nedeniyle birçok sorunla karşılaşılır. Verilerin işlenmesinin ne kadar süreceğini bilmek zordur. Sequentail bir kod, diğer tüm kodları engeller ve uygulamanın daha fazla yürütülmesini engeller.

Concurrent kod, sequential kodun engelleme sorununu ortadan kaldırır ve birden çok kullanıcı isteğini veya olayını herhangi bir sorun olmadan aynı anda işleyebilir.

JavaScript, varsayılan olarak single-threaded bir programlama dilidir ve kodunu sequential olarak çalıştırır. Ancak, JavaScript, CPU ağırlıklı uygulamalar oluştururken en iyi seçenek değildir çünkü JavaScript hala single-threaded bir dildir ve tek bir işlemci çekirdeğinde tek bir işlem çalıştırabilir.

CPU ağırlıklı uygulamalar geliştirilirken CPU intensive görevleri ele alabilen diğer diller tercih edilmelidir.


Concurrency Nedir?


Here's a small animated SVG snippet of a loading spinner.
Since it's a SVG, it scales well and can inherit the color,
so very customizable. It's already animated so you don't need
to add `keyframes` and hence I found it very flexible.

The below SVG can also be converted into a React component or
perhaps a `const` and used in React projects.

## Preview

![Animate Spinner SVG](/images/posts/spinner.svg)

## Code

```js
<svg version="1.0" width="100%" height="100%" viewBox="0 0 128 128">
  <g>
    <path d="M59.6 0h8v40h-8V0z" fill="#000" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(30 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(60 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(90 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#ccc" transform="rotate(120 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#b2b2b2" transform="rotate(150 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#999" transform="rotate(180 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#7f7f7f" transform="rotate(210 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#666" transform="rotate(240 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#4c4c4c" transform="rotate(270 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#333" transform="rotate(300 64 64)" />
    <path d="M59.6 0h8v40h-8V0z" fill="#191919" transform="rotate(330 64 64)" />
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
      calcMode="discrete"
      dur="720ms"
      repeatCount="indefinite"
    ></animateTransform>
  </g>
</svg>
```


A Simple SVG Spinner

<p>Here’s a small animated SVG snippet of a loading spinner.
Since it’s a SVG, it scales well and can inherit the color,
so very customizable. It’s already animated so you don’t need
to add <code>keyframes</code> and hence I found it very flexible.</p>
<p>The below SVG can also be converted into a React component or
perhaps a <code>const</code> and used in React projects.</p>
<h2>Preview</h2>
<p><img src="/images/posts/spinner.svg" alt="Animate Spinner SVG"></p>
<h2>Code</h2>
<pre><code class="language-js">&lt;svg version=&quot;1.0&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 128 128&quot;&gt;
  &lt;g&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#000&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#ccc&quot; transform=&quot;rotate(30 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#ccc&quot; transform=&quot;rotate(60 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#ccc&quot; transform=&quot;rotate(90 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#ccc&quot; transform=&quot;rotate(120 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#b2b2b2&quot; transform=&quot;rotate(150 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#999&quot; transform=&quot;rotate(180 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#7f7f7f&quot; transform=&quot;rotate(210 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#666&quot; transform=&quot;rotate(240 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#4c4c4c&quot; transform=&quot;rotate(270 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#333&quot; transform=&quot;rotate(300 64 64)&quot; /&gt;
    &lt;path d=&quot;M59.6 0h8v40h-8V0z&quot; fill=&quot;#191919&quot; transform=&quot;rotate(330 64 64)&quot; /&gt;
    &lt;animateTransform
      attributeName=&quot;transform&quot;
      type=&quot;rotate&quot;
      values=&quot;0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64&quot;
      calcMode=&quot;discrete&quot;
      dur=&quot;720ms&quot;
      repeatCount=&quot;indefinite&quot;
    &gt;&lt;/animateTransform&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</code></pre>


A Simple SVG Spinner

Preview

Code

More blog posts

Bubble Sort Hakkında

Concurrency Nedir?