30 Günde JavaScript: Loops - Döngüler

_{Author:
Asabeneh Yetayeh

_{Çevirmen:
Hasan Hüseyin Alav

Temmuz 2022}}

📔 6. gün
- Loops - Döngüler
- 💻 Alıştırmalar - Pratik: 6. Gün

📔 6. Gün

Loops - Döngüler

Yazılım kariyerimizde bir çok defa aynı işi tekrar tekrar yapmamız gerekebilir. Basit olarak Console.log() kullanarak 0'den 100'e kadar çıktı yazdırmayı deneyelim. Bu basit uygulamayı gerçekleştirmek bile 2 ila 5 dakika arasında zamanımızı alabilir; bu tür yorucu ve tekrarlayan görevler döngü kullanılarak gerçekleştirilebilir. Videoları izlemeyi tercih ediyorsanız. video örnekleri

Tekrar eden görevleri gerçekleştirmek için programlama dillerinde farklı döngü türleri kullanırız. Aşağıdaki örnekler, JavaScript ve diğer programlama dillerinde yaygın olarak kullanılan döngülerdir.

for Loop - for Döngüsü

// For Döngüsünün yapısı
for(başlangıç_değeri, şart, arttırma/azaltma){
  // uygulamak istediğimiz kod
}

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

// 0 1 2 3 4 5

for(let i = 5; i >= 0; i--){
  console.log(i)
}

// 5 4 3 2 1 0

for(let i = 0; i <= 5; i++){
  console.log(`${i} * ${i} = ${i * i}`)
}

const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
  newArr.push(countries[i].toUpperCase())
}

// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]

Dizideki tüm elemanları toplama

const numbers = [1, 2, 3, 4, 5]
let sum = 0
for(let i = 0; i < numbers.length; i++){
  sum  = sum + numbers[i] 
  // daha pratik kullanım için, sum += numbers[i]

}

console.log(sum)  // 15

Mevcut diziyi temel alan yeni bir dizi oluşturma

const numbers = [1, 2, 3, 4, 5]
const newArr = []
let sum = 0
for(let i = 0; i < numbers.length; i++){
  newArr.push( numbers[i] ** 2)

}

console.log(newArr)  // [1, 4, 9, 16, 25]

const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
  newArr.push(countries[i].toUpperCase())
}

console.log(newArr)  // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]

while loop - while Döngüsü

while anahtar kelimesinin yanında belirtilen şarta doğru olduğu sürece çalışan bir döngü türüdür. Eğer koşul sürekli doğru çıkacak şekilde ayarlanırsa while döngüsü uygulama kasten kesilmediği sürece sonsuza kadar devam edebilir. Bu yüzden buraya dikkat etmek gerekebilir.

let i = 0
while (i <= 5) {
  console.log(i)
  i++
}

// 0 1 2 3 4 5

do while loop do while döngüsü

do while döngüsü Koşul ile belirtilen alanın doğru olup olmadığına bakmadan kod bloğunu bir kez çalıştırır ve daha sonra Koşul ile belirtilen alan doğru (true) olduğu sürece kod bloğunun çalışması için kullanılır.

let i = 0
do {
  console.log(i)
  i++
} while (i <= 5)

// 0 1 2 3 4 5

for of loop - for of döngüsü

ES6, geleneksel bir döngüden daha basit olan bir döngü olan yeni bir döngü yöntemi sunar ve her tür için ve giriş döngülerinin eksikliklerini telafi eder.

for..ofDeyimi, yinelenen nesneler üzerinde yinelemek için bir döngü oluşturur. ES6'da tanıtılan for..of döngü , yeni yinelemeli protokollerin yerini alır. for..in ve forEach() destekler. for..of Array (Diziler), String (Metinler), Map (Haritalar), Set (Kümeler), Array benzeri nesneler (örneğin arguments veya NodeList), ve diğer yinelenen veri yapıları arasında yineleme yapmanızı sağlar.

for (const element of arr) {
  // uygulamak istediğimiz kod
}

const numbers = [1, 2, 3, 4, 5]

for (const num of numbers) {
  console.log(num)
}

// 1 2 3 4 5

for (const num of numbers) {
  console.log(num * num)
}

// 1 4 9 16 25

// array içindeki tüm nsayıları toplama
let sum = 0
for (const num of numbers) {
  sum = sum + num  
  // daha pratik kullanım için, sum += num
  // bundan sonra pratik olan bu syntax türünün kullanacağız(+=, -=, *=, /= etc)
}
console.log(sum) // 15

const webTechs = [
  'HTML',
  'CSS',
  'JavaScript',
  'React',
  'Redux',
  'Node',
  'MongoDB'
]

for (const tech of webTechs) {
  console.log(tech.toUpperCase())
}

// HTML CSS JAVASCRIPT REACT NODE MONGODB

for (const tech of webTechs) {
  console.log(tech[0]) // her öğenin yalnızca ilk harfini alın,  H C J R N M
}

const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
const newArr = []
for(const country of countries){
  newArr.push(country.toUpperCase())
}

console.log(newArr)  // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]

break

Break, bir döngüyü kesmek için kullanılır.

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

// 0 1 2

i değeri 3 sayısına eşit olduğunda döngüyü durdurur

continue

Belirli bir döngü aşamasını atlamak için continue anahtar kelimesi kullanılır.

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

// 0 1 2 4 5

🌕 Adım adım öğrenmeye devam. 6. günü başarıyla bitirdiğmize göre şimdi sıra alıştırma ve pratik yapmada.

💻 Alıştırma - Prtik: 6. Gün

Pratik: 1. seviye

const countries = [
  'Albania',
  'Bolivia',
  'Canada',
  'Denmark',
  'Ethiopia',
  'Finland',
  'Germany',
  'Hungary',
  'Ireland',
  'Japan',
  'Kenya'
]

const webTechs = [
  'HTML',
  'CSS',
  'JavaScript',
  'React',
  'Redux',
  'Node',
  'MongoDB'
]

const mernStack = ['MongoDB', 'Express', 'React', 'Node']

while ve do while kullanarak 0 dan 10'a kadar giden bir döngü kurun.
while ve do while kullanarak 10 dan 0'a kadar giden bir döngü kurun.
0'dan n' e kadar giden bir for döngüsü kurun.
Console.log() kullanarak aşağıdaki çıktıyı almayı deneyin.

    #
    ##
    ###
    ####
    #####
    ######
    #######

Aşağıdaki çıktıyı almak için bir döngü kurun:

0 x 0 = 0
1 x 1 = 1
2 x 2 = 4
3 x 3 = 9
4 x 4 = 16
5 x 5 = 25
6 x 6 = 36
7 x 7 = 49
8 x 8 = 64
9 x 9 = 81
10 x 10 = 100

Aşağıdaki çıktıyı almak için bir döngü kurun:

 i    i^2   i^3
 0    0     0
 1    1     1
 2    4     8
 3    9     27
 4    16    64
 5    25    125
 6    36    216
 7    49    343
 8    64    512
 9    81    729
 10   100   1000

0'dan 100'e kadar olan çift sayıları bir döngü yardımı ile ekrana yazdırın.
0'dan 100'e kadar olan tek sayıları bir döngü yardımı ile ekrana yazdırın
0'dan 100'e kadar olan asal sayıları bir döngü yardımı ile ekrana yazdırın
0 ile 100 arasındaki tüm sayıların toplamını ekrana yazıdırn
```
0 ile 100 arasındaki sayıların toplamı: 5050.
```

0 ile 100 arasındaki tek ve çift sayıların toplamını bulun

Çift sayıların toplamı 2550
Tek sayıların toplamı 2500

Pratik: 2. seviye

Herhangi bir sayıda rastgele id numarası atayan bir fonksiyon yazın
```
  fe3jo1gl124g
```
```
  xkqci4utda1lmbelpkm03rba
```
Rastgele hexadecimal sayı üreten bir fonksiyon yazın.
```
'#ee33df'
```

Rastgele bir rgb renk numarası oluşturan fonksiyon yazın.

rgb(240,180,80)

["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]

Yukarıdaki array'i kullanarak rastgele yeni bir dizi oluşturun.
Yukarıdaki array'i kullanarak ülkelerin harf uzunluklarını içeren bir dizi olşturun'.
```
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
```

Yukarıdaki diziyi kullanarak aşağıdaki diziyi oluşturun:

  [
  ['Albania', 'ALB', 7],
  ['Bolivia', 'BOL', 7],
  ['Canada', 'CAN', 6],
  ['Denmark', 'DEN', 7],
  ['Ethiopia', 'ETH', 8],
  ['Finland', 'FIN', 7],
  ['Germany', 'GER', 7],
  ['Hungary', 'HUN', 7],
  ['Ireland', 'IRE', 7],
  ['Iceland', 'ICE', 7],
  ['Japan', 'JAP', 5],
  ['Kenya', 'KEN', 5]
]

Yukarıdaki ülkeler dizisinde "land" sözcüğünü içeren bir ülke veya ülke olup olmadığını kontrol edin. "land" içeren ülkeler varsa bunu dizi halinde yazdırın.
```
['Finland','Ireland', 'Iceland']
```
Yukarıdaki ülkeler dizisinde "ia" sözcüğünü içeren bir ülke veya ülke olup olmadığını kontrol edin. "ia" içeren ülkeler varsa bunu dizi halinde yazdırın..
```
['Albania', 'Bolivia','Ethiopia']
```
Yukarıdaki ülkeler dizisini kullanarak en fazla karakter içeren ülkeyi bulun.
```
Ethiopia
```
Yukarıdaki ülkeler dizisini kullanarak, yalnızca 5 karakter içeren ülkeyi bulun.
```
['Japan', 'Kenya']
```

Pratik: 3. seviye

Countries dizisini kopyalayın(Avoid mutation)
Diziler değişebilir. Dizinin orjinalini değişirmeden bir kopyasını oluşturun. Oluşturduğunuz diziyi alfabetik olarak sıralayın ve sortedCountries dizisine atayın
webTechs dzisini ve mernStack dizisini sıralayın
countries arrayinden "land" sözüğü ile biten ülkeleri farklı bir diziye atayın
countries array inden en uzun karakterli ülkeyi bulun
countries array inde 4 karakterli ülkeleri yazdırın
countries array inde iki veya daha fazla kelime içieren ülkeleri farklı bir diziye atayın
countries array i ters çevirin ve ülkelerin tüm harflerini büyük hale gertirin

🎉 Tebrikler ! 🎉

<< 6. Gün | 7. Gün >>