You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/15-function-expressions/article.md
+9-113Lines changed: 9 additions & 113 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# Fonksiyon ifadeleri ve oklar.
1
+
# Fonksiyon ifadeleri.
2
2
3
3
JavaScript'te fonksiyonlar "büyülü dil yapısı" değil sadece özel bir tip değerdir.
4
4
[cut]
@@ -122,8 +122,8 @@ Fonksiyon `soru` sormalı, bu sorunun cevabına göre `evet()` veya `hayir()` fo
122
122
```js run
123
123
*!*
124
124
functionsor(soru, evet, hayir) {
125
-
if (confirm(soru)) yes()
126
-
elseno();
125
+
if (confirm(soru)) evet()
126
+
elsehayir();
127
127
}
128
128
*/!*
129
129
@@ -142,7 +142,7 @@ Daha kısa yolunu yazmadan önce söylemek gerekir ki bu tür fonksiyonlar olduk
142
142
143
143
**`sor` fonksiyonunun argümanları *callbacks* veya *geri çağrım fonksiyonları* olarak adlandırılırlar.
144
144
145
-
Fikir fonksiyonu bizim baştan paslayıp ana fonksiyon içerieinde daha sonra duruma göre çağırılmasından kaynaklanmaktadır. Örneğe bakarsanız `tamamGoster` "evet" cevabı için *geri çağrım fonksiyonu*'dur.
145
+
Fikir fonksiyonu bizim baştan paslayıp ana fonksiyon içerisinde daha sonra duruma göre çağırılmasından kaynaklanmaktadır. Örneğe bakarsanız `tamamGoster` "evet" cevabı için *geri çağrım fonksiyonu*'dur.
146
146
147
147
Fonksiyon İfadesi kullanarak aynı fonksiyonu daha kısa bir şekilde yazmak mümkün:
148
148
@@ -153,7 +153,7 @@ function sor(soru, evet, hayir) {
153
153
}
154
154
155
155
*!*
156
-
ask(
156
+
sor(
157
157
"Kabul Ediyormusun?",
158
158
function() { alert("Kabul ettin"); },
159
159
function() { alert("Çalışmayı durdurdun."); }
@@ -174,9 +174,9 @@ Değişkenler arasında paylaşılabilir. İstendiği zaman çalıştırılabili
174
174
```
175
175
176
176
177
-
## Fonksiyon ifadesi ile Fonksiyon tanımının karışalaştırılması
177
+
## Fonksiyon ifadesi ile Fonksiyon tanımının karşılaştırılması
178
178
179
-
Eğer Fonksiyon ifades ile fonksiyon tanımı arasındaki önemli farkları açıklamak gerekirse;
179
+
Eğer Fonksiyon ifadesi ile fonksiyon tanımı arasındaki önemli farkları açıklamak gerekirse;
180
180
181
181
Yazım: Kodda neyin ne olduğunu görme.
182
182
@@ -204,7 +204,7 @@ Daha ince bir değişiklik ise fonksiyonun JavaScript motorunda ne zaman yaratı
204
204
205
205
**Fonksiyon ifadesi kod çalışırken fonksiyona geldikten sonra kullılır**
206
206
207
-
Çalışma atamanın sağ tarafaını geçince `let sum = function...`, bu noktadan sonra fonksiyon artık yaratıldı. Bundan böyle çağırılabilir veya başka bir değişkene atanabilir.
207
+
Çalışma atamanın sağ tarafına geçince `let sum = function...`, bu noktadan sonra fonksiyon artık yaratıldı. Bundan böyle çağırılabilir veya başka bir değişkene atanabilir.
208
208
209
209
Fonksiyon tanımlama ise farklıdır.
210
210
@@ -223,7 +223,7 @@ Sonuç olarak, fonksiyon tanımı ile bu tanımdan önce çağırılabilir.
223
223
selamVer("Ahmet"); // Merhaba Ahmet
224
224
*/!*
225
225
226
-
function sayHi(isim) {
226
+
function selamVer(isim) {
227
227
alert( `Merhaba, ${isim}` );
228
228
}
229
229
```
@@ -362,106 +362,6 @@ Ayrıca fonksiyon içerisinde `function f(...){}` ile araştırmak `let f= funct
362
362
Fakat eğer Fonksiyon Tanımı işimize yaramaz ise(yukarıda örnğin Fonksiyon ifadesini kullandık), bu durumda Fonksiyon İfadesi yöntemi kullanılmalıdır.
363
363
```
364
364
365
-
366
-
## Ok Fonksiyonları [#arrow-functions]
367
-
368
-
Fonksiyonları yaratmak için daha kısa bir yöntem daha vardır, bu Fonksiyon İfadesinden daha iyi denilebilir. Bunlara "Ok Fonksiyonları" denir. Çünkü "ok" gibi görünürler.
369
-
370
-
```js
371
-
let func = (arg1, arg2, ...argN) => ifade
372
-
```
373
-
374
-
Yukarıda yazılan kod `func` adında `arg1..argN`'e kadar argüman alan ve sonunda `ifade`yi çalıştıran bir fonksiyon bulunmaktadır.
375
-
376
-
Diğer bir deyişle, aşağıdaki ile neredeyse aynı kod yazılmıştır.
377
-
378
-
```js
379
-
let func = function(arg1, arg2, ...argN) {
380
-
return ifade;
381
-
}
382
-
```
383
-
... Fakat `ok` ile yazılan daha özlüdür.
384
-
385
-
Örneğin:
386
-
```js run
387
-
let topla = (a, b) => a + b;
388
-
389
-
/* ok fonksiyonu aşağıdaki fonksiyon ifadesinin daha özlü yazılmış halidir.:
390
-
391
-
let topla = function(a, b) {
392
-
return a + b;
393
-
};
394
-
*/
395
-
396
-
alert( topla(1, 2) ); // 3
397
-
398
-
```
399
-
Eğer tek argüman olsaydı, bu durumda parantez de çıkarılabilirdi, böylece daha da kolay olurdu:
400
-
401
-
402
-
```js run
403
-
// aynısı
404
-
// let ikiKati = function(n) { return n * 2 }
405
-
*!*
406
-
let ikiKati = n => n * 2;
407
-
*/!*
408
-
409
-
alert( ikiKati(3) ); // 6
410
-
```
411
-
412
-
Eğer hiç bir değer yoksa parantez eklenmelidir. ( Bir değer olduğunda yukarıdaki gibi kullanılabilir.)
413
-
414
-
415
-
```js run
416
-
let selamVer = () => alert("Merhaba!");
417
-
418
-
selamVer();
419
-
```
420
-
Ok Fonksiyonları Fonksiyon ifadeleri ile aynı şekilde kullanılabilirler.
421
-
422
-
Örneğin aşağıda `merhaba()` fonksiyonunun Ok Fonksiyonu şekliyle görebilirsiniz.
423
-
424
-
```js run
425
-
let yas = prompt("Kaç Yaşındasın?", 18);
426
-
427
-
let merhaba = (yas < 18) ?
428
-
() => alert('Merhaba') :
429
-
() => alert("Merhabalar!");
430
-
431
-
merhaba();
432
-
```
433
-
434
-
Ok fonksiyonları ilk yazılmaya başlandığında göze yabancı gelebilir. Fakat zamanla göz bu yapıya alışacak ve hemen ayak uyduracaktır.
435
-
436
-
Uzunca yazmak istemiyorsanız, kolayca tek kelimelik fonksiyonlar yazabilirsiniz.
437
-
438
-
439
-
```smart header="Çok satırlı Ok Fonksiyonları"
440
-
441
-
Yukarıdaki örnekte argüman `=>` solundan alınır ve sağında çalıştırılır.
442
-
443
-
Bazen bundan daha karmaşık yapılara ihtiyaç duyabilirsiniz. Bunun için sağ tarafa başlarken `{` parantez ile başlar ve bittiğinde de `}` ile fonksiyonu kapatırsanız içerisine fonksiyonun gövdesini yazabilirsiniz.
444
-
445
-
Bunun gibi:
446
-
447
-
```js run
448
-
let toplam = (a, b) => { // birden fazla satır yazmak için `{` kullanılmalıdı.
449
-
let sonuc = a + b;
450
-
*!*
451
-
return sonuc; // eğer süslü parantez kullanıyorsanız değer döndürmek için return yazmanız gerekmektedir.
452
-
*/!*
453
-
};
454
-
455
-
alert( toplam(1, 2) ); // 3
456
-
```
457
-
458
-
```smart header="Dahası var"
459
-
Şu anda sadece Ok Fonksiyonlarına giriş yaptık. Fakat elbette tamamı bu değil! Ok fonksiyonun başka ilginç özellikleri de mevcut. Bunlara <info:arrow-functions> bölümünde değinilecektir.
460
-
461
-
Şimdilik tek satırlı fiillerde ve geri çağrım fonksiyonlarında kullabilirsiniz.
462
-
```
463
-
464
-
465
365
## Özet
466
366
467
367
- Fonksiyonlar değerdir. Atanabilir, kopyalanabilir ve kodun herhangi bir yerinde tanımlanabilirler.
@@ -473,7 +373,3 @@ alert( toplam(1, 2) ); // 3
473
373
474
374
Fonksiyon ifadesi sadece Fonksiyon Tanımı yetersiz kalırsa kullanılmalıdır. Bu örnek daha önce yukarıda yapılmıştı.
475
375
476
-
Ok Fonksiyonları tek satır için kullanışlıdır. İki türlüsü vardır:
477
-
478
-
1. Süslü parantez olmadan: Fonksiyon sağ taraftaki ifadeyi çalıştırır ve sonucu dönderir. Tek satırda biten işlemler için kullanılmalıdır.
479
-
2. Süslü parantez ile `(...args) => { gövde }` -- süslü parantez bizim birden fazla satır yazmamızı sağlar. Fakat gövde içerisinde `return` kullanılması gerekmektedir.
Fonksiyonları yaratmak için daha kısa bir yöntem daha vardır, bu Fonksiyon İfadesinden daha iyi denilebilir. Bunlara "Ok Fonksiyonları" denir. Çünkü "ok" gibi görünürler.
4
+
5
+
```js
6
+
letfunc= (arg1, arg2, ...argN) => ifade
7
+
```
8
+
9
+
Yukarıda yazılan kod `func` adında `arg1..argN`'e kadar argüman alan ve sonunda `ifade`yi çalıştıran bir fonksiyon bulunmaktadır.
10
+
11
+
Diğer bir deyişle, aşağıdaki ile neredeyse aynı kod yazılmıştır.
12
+
13
+
```js
14
+
letfunc=function(arg1, arg2, ...argN) {
15
+
return ifade;
16
+
}
17
+
```
18
+
... Fakat `ok` ile yazılan daha özlüdür.
19
+
20
+
Örneğin:
21
+
```js run
22
+
lettopla= (a, b) => a + b;
23
+
24
+
/* ok fonksiyonu aşağıdaki fonksiyon ifadesinin daha özlü yazılmış halidir.:
25
+
26
+
let topla = function(a, b) {
27
+
return a + b;
28
+
};
29
+
*/
30
+
31
+
alert( topla(1, 2) ); // 3
32
+
33
+
```
34
+
Eğer tek argüman olsaydı, bu durumda parantez de çıkarılabilirdi, böylece daha da kolay olurdu:
35
+
36
+
37
+
```js run
38
+
// aynısı
39
+
// let ikiKati = function(n) { return n * 2 }
40
+
*!*
41
+
letikiKati=n=> n *2;
42
+
*/!*
43
+
44
+
alert( ikiKati(3) ); // 6
45
+
```
46
+
47
+
Eğer hiç bir değer yoksa parantez eklenmelidir. ( Bir değer olduğunda yukarıdaki gibi kullanılabilir.)
48
+
49
+
50
+
```js run
51
+
letselamVer= () =>alert("Merhaba!");
52
+
53
+
selamVer();
54
+
```
55
+
Ok Fonksiyonları Fonksiyon ifadeleri ile aynı şekilde kullanılabilirler.
56
+
57
+
Örneğin aşağıda `merhaba()` fonksiyonunun Ok Fonksiyonu şekliyle görebilirsiniz.
58
+
59
+
```js run
60
+
let yas =prompt("Kaç Yaşındasın?", 18);
61
+
62
+
let merhaba = (yas <18) ?
63
+
() =>alert('Merhaba') :
64
+
() =>alert("Merhabalar!");
65
+
66
+
merhaba();
67
+
```
68
+
69
+
Ok fonksiyonları ilk yazılmaya başlandığında göze yabancı gelebilir. Fakat zamanla göz bu yapıya alışacak ve hemen ayak uyduracaktır.
70
+
71
+
Uzunca yazmak istemiyorsanız, kolayca tek kelimelik fonksiyonlar yazabilirsiniz.
72
+
73
+
74
+
```smart header="Çok satırlı Ok Fonksiyonları"
75
+
76
+
Yukarıdaki örnekte argüman `=>` solundan alınır ve sağında çalıştırılır.
77
+
78
+
Bazen bundan daha karmaşık yapılara ihtiyaç duyabilirsiniz. Bunun için sağ tarafa başlarken `{` parantez ile başlar ve bittiğinde de `}` ile fonksiyonu kapatırsanız içerisine fonksiyonun gövdesini yazabilirsiniz.
79
+
80
+
Bunun gibi:
81
+
82
+
```js run
83
+
let toplam = (a, b) => { // birden fazla satır yazmak için `{` kullanılmalıdır.
84
+
let sonuc = a + b;
85
+
*!*
86
+
return sonuc; // eğer süslü parantez kullanıyorsanız değer döndürmek için return yazmanız gerekmektedir.
87
+
*/!*
88
+
};
89
+
90
+
alert( toplam(1, 2) ); // 3
91
+
```
92
+
93
+
```smart header="Dahası var"
94
+
Şu anda sadece Ok Fonksiyonlarına giriş yaptık. Fakat elbette tamamı bu değil! Ok fonksiyonun başka ilginç özellikleri de mevcut. Bunlara <info:arrow-functions> bölümünde değinilecektir.
95
+
96
+
Şimdilik tek satırlı fiillerde ve geri çağrım fonksiyonlarında kullabilirsiniz.
97
+
```
98
+
99
+
## Özet
100
+
101
+
Ok Fonksiyonları tek satır için kullanışlıdır. İki türlüsü vardır:
102
+
103
+
1. Süslü parantez olmadan: Fonksiyon sağ taraftaki ifadeyi çalıştırır ve sonucu dönderir. Tek satırda biten işlemler için kullanılmalıdır.
104
+
2. Süslü parantez ile `(...args) => { gövde }` -- süslü parantez bizim birden fazla satır yazmamızı sağlar. Fakat gövde içerisinde `return` kullanılması gerekmektedir.
0 commit comments