diff --git a/.gitattributes b/.gitattributes index 6313b56c5..d3877a538 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,2 @@ * text=auto eol=lf +*.svg binary diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 3f45fd52d..361ec32a2 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,10 +1,18 @@ # JavaScript'e Giriş +<<<<<<< HEAD Bakalım JavaScript nedir, ne yapılır ve hangi teknolojilerle birlikte çalışır. +======= +Let's see what's so special about JavaScript, what we can achieve with it, and what other technologies play well with it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## JavaScript Nedir? +<<<<<<< HEAD *JavaScript*, ilk başta *"web belgelerine canlılık"* getirmek için oluşturulmuştur. +======= +*JavaScript* was initially created to "make web pages alive". +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu dilde yazılan kod kümelerine betik denir. Doğrudan HTML kodu içerisine yazılıp sayfa yüklendiğinde doğrudan çalışabilir. @@ -12,8 +20,13 @@ Komutlar herhangi bir derleme ve hazırlığa gereksinim duymadan doğrudan çal Bu yönden bakınca JavaScript diğer dillere kıyasla oldukça farklıdır. Bkz: [Java](http://en.wikipedia.org/wiki/Java). +<<<<<<< HEAD ```smart header="Neden JavaScript?" JavaScript ilk yazıldığında, başka bir adı vardı: "LiveScript". Ancak Java dili o dönemlerde çok ünlü olduğundan dolayı yeni bir dil ve "küçük kardeş" gibi görünmesi açısından JavaScript olarak değiştirildi. +======= +```smart header="Why is it called JavaScript?" +When JavaScript was created, it initially had another name: "LiveScript". But Java was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Ancak JavaScript gelişerek kendince yönergeleri [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript) olan bağımsız bir dil haline geldi. Şu anda Java ile hiçbir ilgisi bulunmamaktadır. ``` @@ -25,9 +38,15 @@ Tarayıcılar bu JavaScript motoru gömülü bir biçimde gelirler. Bu ayrıca " Bu JavaScript motorlarından bazıları şunlardır; +<<<<<<< HEAD - [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- Chrome ve Opera. - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefox. - Internet Explorer'ın "Trident", "Chakra" takma adlı motorlarının yanında Microsoft Edge için "ChakraCore" adında ayrı bir motoru bulunmaktadır. Safari ise "Nitro", "SquirrelFish" ve "SquirrelFish Extreme" gibi takma adlarla adlandırılan JavaScript motorunu kullanmaktadır. +======= +- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera. +- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. +- ...There are other codenames like "Chakra" for IE, "JavaScriptCore", "Nitro" and "SquirrelFish" for Safari, etc. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yukarıdaki terimleri aklınızda tutarsanız iyi olur, çünkü ileride şu tür tümcelerle karşılaşabilirsiniz: "V8'de A özelliğinin altyapısı", "Bu özelliğin altyapısının Chrome ve Opera'da bulunduğunu anlamanız gerekir." @@ -39,7 +58,11 @@ Motorlar çok karmaşık yapılardır. Ancak kolay ögelere dayanırlar. 2. Sonra bu kodları makine diline çevirir. 3. Makine bu kodları çok hızlı bir biçimde çalıştırır. +<<<<<<< HEAD Motor bu sürecin her bir adımında iyileştirme yapar. Hatta derlenmiş ve çalışır durumda bulunan kodlardaki veri yapılarını inceler ve bunları iyileştirerek daha hızlı duruma getirir. Sonuç olarak yazılan bu kodlar çok hızlı bir biçimde çalışır. +======= +The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` ## Tarayıcı içerisindeki JavaScript neler yapabilir? @@ -64,7 +87,11 @@ Tarayıcı içerisinde bulunan JavaScript kullanıcı güvenliği amacıyla sın Bu engellemeleri şu biçimde sıralayabiliriz : +<<<<<<< HEAD - Web sayfasında çalışan JavaScript dosyalara erişim sağlayamaz, saklama alanınızda bulunan programları kopyalayamaz veya çalıştıramaz. İşletim sisteminizin fonksiyonlarına doğrudan erişimi yoktur. +======= +- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Günümüz tarayıcıları dosyalarla çalışmanıza izin verebilir. Ancak bu izin oldukça sınırlıdır. Örneğin, yalnızca dosyayı tarayıcıya taşıyıp bırakabilirsiniz veya `` kullanarak dosyayı seçebilirsiniz. @@ -75,7 +102,11 @@ Bu engellemeleri şu biçimde sıralayabiliriz : Bu olaya "Same Origin Policy" (Aynı kaynak kuralı) denir. Bunu çözmek için *her iki sayfa* özel bir JavaScript kodu ile birbirlerini onaylamalıdır. Bu engellemeler yine kullanıcının güvenliği içindir. Kullanıcının açtığı `http://örnekyerlik.com` sitesi diğer sekmede bulunan `http://diğeryerlik.com` sitesinden bilgi çalamamalıdır. - JavaScript kolayca bulunduğu sayfadan veri alabilir. Ancak başka site veya alan adlarından veri alması sorunludur. Olanaklı olmasına karşın her iki yanın onayı gereklidir. Yine, bunun nedeni güvenlik sınırlarıdır diyebiliriz. +<<<<<<< HEAD ![Sınırlamalar](limitations.svg) +======= +![](limitations.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu sınırlar, tarayıcı dışında kullanıldığında ortadan kalkar. Örneğin, sunucular daha geniş yetkilere sahiptir. @@ -91,9 +122,13 @@ JavaScript'i eşsiz yapan en az 3 neden vardır: JavaScript'ten başka bu üç özelliği taşıyan hiçbir tarayıcı teknolojisi yoktur. +<<<<<<< HEAD JavaScript'in eşsiz olma nedeni budur ve bu yüzden web sayfaları geliştirmekte kullanılan en yaygın araçtır. Yeni bir teknolojiyi öğrenmeye başlarken, sunacağı avantajlar için öngörü önemlidir. Bu sebeptendir ki, yeni diller ve tarayıcı yetkinlikleri içeren bu yönelimlere ayak uydurmalıyız. +======= +That said, JavaScript also allows to create servers, mobile applications, etc. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## JavaScript'e üstün diller @@ -105,16 +140,33 @@ Bundan dolayı yakın zamanda bir sürü yeni *transpiled* yani çevirilmiş dil Bu dillere örnek vermek gerekirse: +<<<<<<< HEAD - [CofeeScript](http://coffeescript.org) JavaScript için "şeker yazım" denebilecek bir dildir. Yazılımı daha kısadır ve daha temiz kod yazmaya yardımcı olur. Genellikle [Ruby](https://www.ruby-lang.org/tr/) geliştiriciler bunu sever. - [Typescript](http://www.typescriptlang.org/) durağan veri yapıları ile JavaScript yazılmasını sağlar. Karmaşık programlar geliştirmeyi kolaylaştırır. Microsoft tarafından geliştirilmiştir. +======= +Examples of such languages: + +- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. +- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. +- [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook. +- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google. +- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript. +- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - [Dart](https://www.dartlang.org/) kendi başına ayrı bir dildir. Tarayıcı üzerinde veya telefon uygulamalarında kendi motoru üzerinden çalıştırılır. Google'ın tarayıcılarda JavaScript yerine Dart'ı önermiş olmasına karşın, bu günlerde JavaScript'e çeviri yapılarak kullanılmaktadır. Bunlara daha fazla örnek eklenebilir. Yukarıdakileri bilseniz bile ne yaptığınızı tam olarak anlamak için JavaScript bilmelisiniz. +<<<<<<< HEAD ## Özet - JavaScript başlangıçta yalnızca ağ tarayıcılarında kullanılmak üzere geliştirilmiş bir dildi. Ancak günümüzde, birçok çevrede çalışabilir durumda. - JavaScript şu anda HTML/CSS ile bütünleşik olmasından ve geniş uyumluluğundan dolayı benzersizdir. - Bir çok JavaScript'e çevirici dil bulunmaktadır. JavaScript'i iyi bir biçimde öğrendikten sonra bu dillere de bir bakmanızı öneririz. +======= +- JavaScript was initially created as a browser-only language, but it is now used in many other environments as well. +- Today, JavaScript has a unique position as the most widely-adopted browser language with full integration in HTML/CSS. +- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md index cf0923a7f..b7228f583 100644 --- a/1-js/01-getting-started/2-manuals-specifications/article.md +++ b/1-js/01-getting-started/2-manuals-specifications/article.md @@ -3,6 +3,7 @@ Bu kitap aslında bir *eğitim süreci*'dir. Amacı sizin kademeli olarak JavaScript öğrenmenizi sağlamaktır. Önce temellere alıştıktan sonra diğer kaynaklar üzerinde durulacaktır. +<<<<<<< HEAD ## Şartname **ECMA-262 Şartnamesi** JavaScript için olabilecek en derin bilgilerin bulunduğu kaynaktır. Dili tanımlar. @@ -16,13 +17,31 @@ Daha geniş kitleler tarafından kullanılmayan yeni özelliklere ve önerilere Ayrıca, tarayıcı için geliştirme yapıyorsanız, ikinci [second part](info:browser-environment) bölümünden farklı eğitimlere bakabilirsiniz. ## Kılavuz +======= +## Specification + +[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language. + +But being that formalized, it's difficult to understand at first. So if you need the most trustworthy source of information about the language details, the specification is the right place. But it's not for everyday use. + +A new specification version is released every year. In-between these releases, the latest specification draft is at . + +To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at . + +Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - **MDN (Mozilla) JavaScript Reference** örnek ve kılavuzların yeraldığı bir diğer kaynaktır. İstediğiniz konular derinlemesine incelemek için harika bir kaynaktır. +<<<<<<< HEAD Buradan erişebilirsiniz: +======= +- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Google'da "MDN [term]" şeklinde aratırsanız aslında çok daha kolay erişebilirsiniz. Örneğin : `parseInt`'i aramak için kullanabilirsiniz. +<<<<<<< HEAD - **MSDN** – Microsoft kılavuzu da çok fazla bilgi içermektedir. Buna JavaScript ( JScript olarak da alandırılmakta ) veya Internet Explorer gibi konular da dahildir; adresinden ulaşılabilir. Ayrıca "RegExp MSDN" veya "RegExp MSDN jscript" şeklinde arayabilirsiniz. @@ -32,6 +51,11 @@ Ayrıca, tarayıcı için geliştirme yapıyorsanız, ikinci [second part](info: JavaScript çok hızlı gelişen bir dildir, sürekli olarak yeni özellikler eklenir. Bunların tarayıcılarda desteklenip desteklenmediğini görmek için: +======= +Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. to search for `parseInt` function. + +## Compatibility tables +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - - özellik bazlı tablo mevcuttur. Örneğin hangi JavaScript motorları cryptography özelliğini destekliyor sorusunun cevabını adresinden bulabilirsiniz. diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index a1fe134bd..ef6bb0b9c 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -34,11 +34,19 @@ Pratikte hafif düzenleyiciler birçok eklenti ile klasör bazında yazım, otom Aşağıdaki hafif düzenleyiciler ilginizi çekebilir: +<<<<<<< HEAD - [Visual Studio Code](https://code.visualstudio.com/) (tüm işletim sistemlerinde çalışır, ücretsiz). - [Atom](https://atom.io/) (tüm işletim sistemlerinde çalışır, ücretsiz). - [Sublime Text](http://www.sublimetext.com) (tüm işletim sistemlerinde çalışır, ücretli). - [Notepad++](https://notepad-plus-plus.org/) (sadece Windows'ta çalışır, ücretsiz). - Vim and Emacs gibi düzenleyiciler de oldukça iyidir fakat öğrenme süresi diğerler hafif düzenleyicilere göre daha uzundur. +======= +- [Atom](https://atom.io/) (cross-platform, free). +- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). +- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware). +- [Notepad++](https://notepad-plus-plus.org/) (Windows, free). +- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Lütfen Tartışmayalım diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 5f5e8d199..b39b903ee 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -26,11 +26,23 @@ Chrome'un geliştirme aracı versiyona göre değişiklik gösterecektir. Fakat - Konsol panelinde kırmızı renk ile hatayı görebilirsiniz. Bu durumda kodunuz bilinmeyen "lalala" komutunda hata vermiş. +<<<<<<< HEAD - Sağ tarafında hatanın hangi satırda olduğunu görebilirsiniz. Bu alan tıklanabilirdir. Şu anda hata `bug.html:12`'de bulunmaktadır. +======= +Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Hatanın altında `>` sembolünü görebilirsiniz. Bu "komut satırı"'nı işaret eder. Komutunuzu yazdıktan sonra `key:Enter`'a basarak o satırdaki komutu çalıştırabilirsiniz. Birden fazla satır kod yazabilmek için ise `key:Shift+Enter` tuş kombinasyonunu kullanabilirsiniz. +<<<<<<< HEAD Başlangıç için hataları görmek yeterli olacaktır. Daha sonra geliştirme aracını bölümünde derinlemesine öğreneceksiniz. +======= +```smart header="Multi-line input" +Usually, when we put a line of code into the console, and then press `key:Enter`, it executes. + +To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code. +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Firefox, Edge ve diğerleri @@ -46,11 +58,15 @@ Safari (sadece macOS için desteklenmektedir) biraz özeldir. Geliştirici araç Bu işlemi yaptıktan sonra `key:Cmd+Opt+C` ile geliştirici konsolunu açıp kapatabilirsiniz. Ayrıca dikkat ederseniz üst menüde "Develop" adında yeni bir başlık göreceksiniz. Buradan da birçok komutu çalıştırabilirsiniz. +<<<<<<< HEAD ## Multi-line input Genelde konsol ekranında `key:Enter` yaparsanız bulunduğu satırı çalıştırır. Birden fazla satırı yazmak istiyorsanız `key:Shift+Enter` kullanabilirsiniz. ## Özet +======= +## Summary +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - Geliştirici araçları hataları görmenizi, komutları çalıştırmanızı, değişkenleri takip etmenizi sağlar. - Windows işletim sisteminde `key:f12` tuşu ile açılır (Çoğu tarayıcıda bu tuş çalışır). macOS işletim sistemi için ise Google Chrome: `key:Cmd+Opt+J` ile Safari ise: `key:Cmd+Opt+C` tuşu ile açılır (Safari'de geliştirici modunu açmanız gerekmekte). diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html new file mode 100644 index 000000000..ff1d871b0 --- /dev/null +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md index e69de29bb..81552913b 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md @@ -0,0 +1,2 @@ + +[html src="index.html"] diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 1fb95935c..839a4bc9d 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,6 +1,10 @@ # Merhaba Dünya +<<<<<<< HEAD Okuyacağınız bu konu Javascript'in özü hakkındadır, platform ile bağlantılı değildir. İleride Node.JS ve diğer platformlarda aynı şekilde kullanabilirsiniz. +======= +This part of the tutorial is about core JavaScript, the language itself. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Fakat kodlarımızın çalıştırılabilmesi için en azından bir ortam gerekli ve bu kitap tarayıcı üzerinden açılarak size bu ortamı yaratmış oluyor. Tarayıcı özel komutları ( `alert`) daha az tutulacak. Böylece eğer diğer platformlara yönelmek istiyorsanız bu komutlarla zaman geçirmenize gerek kalmayacak. Diğer yandan [sonraki](/ui) bölümde tarayıcı özellikleri daha derinlemesine incelenecektir. @@ -9,7 +13,11 @@ Fakat kodlarımızın çalıştırılabilmesi için en azından bir ortam gerekl ## Script etiketi +<<<<<<< HEAD Javascript programları html içerisine ` ``` +<<<<<<< HEAD Bu yorumların amacı ``` +<<<<<<< HEAD Buraki `/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. +======= +Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Tam URL vermek de mümkündür. Örneğin: ```html - + ``` Birkaç kod dosyası eklemek isterseniz aşağıdaki gibi yazabilirsiniz. diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 8023a171b..f795f1e8c 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -44,7 +44,11 @@ alert(3 + + 2); ``` +<<<<<<< HEAD Yukarıdaki bloğun çıktısı `6` olacaktır çünkü JavaScript yeni satırda noktalı virgül eklememiştir. Buradan anlayabilirsiniz ki eğer satır `"+"` ile bitiyorsa ifade bitmiş sayılmaz ve noktalı virgül gereklidir. Bu durumda yukarıdaki kod beklendiği gibi çalışmaktadır. +======= +The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 **Fakat bazı durumlarda noktalı virgülün otomatik olarak konulması gerekirken JavaScript bunu yapmakta sorun yaşar** @@ -54,28 +58,43 @@ Böyle hataları bulmak oldukça zordur. Eğer böyle bir hata görmek istiyorsanız, aşağıdaki koda bir bakın ```js run -[1, 2].forEach(alert) +alert("Hello"); + +[1, 2].forEach(alert); ``` `[]` veya `forEach` in ne anlama geldiğini bilmenize şimdilik gerek yok daha sonra bu konuyu işleyeceğiz. Şu anda bilmeniz gereken önce 1 uyarısı alacaksınız sonra 2. +<<<<<<< HEAD Şimdi bu koddan önce noktalı virgül ile bitmeyen bir uyarı ifadesi yazın. ```js run no-beautify alert("Hata alacaksınız") +======= +No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`. + +Now let's remove the semicolon after the `alert`: + +```js run no-beautify +alert("Hello") +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -[1, 2].forEach(alert) +[1, 2].forEach(alert); ``` +<<<<<<< HEAD Eğer yukarıdaki kodu çalıştırısanız sadece ilk uyarı mesajını görecek ve sonrasında hata alacaksınız. Fakat aşağıdaki gibi noktalı virgül kullanırsanız herşeyin beklenen şekilde çalıştığını göreceksiniz: ```js run alert("Şimdi ise beklendiği gibi hatasız"); +======= +The difference compared to the code above is only one character: the semicolon at the end of the first line is gone. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -[1, 2].forEach(alert) -``` +If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more. +<<<<<<< HEAD Şimdi "Her şey yolunda" mesajını ve ardından `1` ve `2`'yi görüyoruz. İlk yazdığımız kod bloğunda hata olmasının sebebi JavaScript'in `[...]` den önce noktalı virgül gelmeyeceğini varsaymasından dolayı olmaktadır. @@ -87,10 +106,27 @@ alert("Bir hata gerçekleşecek")[1, 2].forEach(alert) ``` Fakat normalde sizinde bildiğiniz gibi bunu iki satır görmesi gerekmektedir. Bu ve bunun gibi hatalar ile kod yazdığınız sürece karşılaşabileceğiniz hatalardır. +======= +That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement. + +Here's how the engine sees it: + +```js run no-beautify +alert("Hello")[1, 2].forEach(alert); +``` + +Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly. + +This can happen in other situations also. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```` Eğer yeni satıra geçmek istiyorsanız önerilen yöntem noktalı virgül kullanmanızdır. Bu kural JavaScript toplumu tarafından benimsenmiştir. Tekrar belitelim JavaScript yazarken noktalı virgül kullanmadan yeni satıra geçmek çoğu zaman -- *mümkündür* -- fakat başlangıçta noktalı virgül kullanmanız daha güvenlidir ve önerilir. +<<<<<<< HEAD +======= +## Comments [#code-comments] +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Yorum Satırları Zamanla yazdığınız programlar gittikçe karmaşıklaşır. Neyin ne için yapıldığını belirtmeniz için *yorum* yazmak kaçınılmaz olur. @@ -128,7 +164,13 @@ alert('Hello'); alert('Dünya'); ``` +<<<<<<< HEAD ```smart header="Klavye kısa yollarını kullanın!" +======= +```smart header="Use hotkeys!" +In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`. +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Çoğu editör `key:Ctrl+/` kısa yolunu kullanarak tek satır veya `key:Ctrl+Shift+/` kullanarak çok satır yorum yapmanıza yardımcı olur. Mac için `key:Cmd` tuşu windows için ise `key:Ctrl` tuşudur. ``` diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md index d2d3f0ab8..4e50f729a 100644 --- a/1-js/02-first-steps/03-strict-mode/article.md +++ b/1-js/02-first-steps/03-strict-mode/article.md @@ -4,7 +4,11 @@ Uzun süredir JavaScript uyumluluk sorunu olmadan gelişmeye devam etmektedir. Y Bu eski kodlarınızın çalışacağı garantisini verir. Kötü yanı ise JavaScript geliştiricileri tarafından eskiden verilen kötü bir kararın veya hatanın sürekli tekrar edilmesine neden olur. +<<<<<<< HEAD ECMAScript 5 (ES5) standardı 2009 yılında kabul edilmiştir. Bu standar yeni özellikler eklediği gibi eskide olanlardan bazılarını da düzenlemiştir. Eski kodun çalışabilirliğini garanti altına almak için çoğu düzenleme varsayılan olarak kapalı durumda gelir. Bunları açmak için `"use strict"` kullanılmalıdır. +======= +This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: `"use strict"`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## "use strict" @@ -19,10 +23,14 @@ Bu direktif için kod dosyanızın başına `"use strict"` veya `'use strict'` y ... ``` +<<<<<<< HEAD Yakında fonksiyonları ( komutları gruplama ) göreceksiniz. `"use strict"` birden çok fonksiyonda kullanılacağı gibi tek fonksiyon için de kullanılabilir. Fakat genelde tüm dosya için kullanılır. +======= +Quite soon we're going to learn functions (a way to group commands), so let's note in advance that `"use strict"` can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually people use it for the whole script. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ````warn header="\"use strict\" in en üstte olduğuna emin olun" @@ -45,16 +53,30 @@ alert("Bazı kodlar"); ```warn header="`use strict`'i iptal eden bir direktif bulunmamaktadır" Modern JavaScript'i eski haline getiren `"no use strict"` gibi bir direktif bulunmamaktadır. +<<<<<<< HEAD Sıkı moda girdiğinizda artık eskiye dönüş yoktur. +======= +Once we enter strict mode, there's no going back. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` ## Tarayıcı Konsolu +<<<<<<< HEAD İleride özellikleri test etmek için bir [geliştirici konsolu](info:devtools) kullandığınızda, lütfen tarayıcının varsayılan olarak `use strict` kullanmadığını unutmayın. +======= +When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bazen, `use strict` bir fark yarattığında, yanlış sonuçlar alırsınız. +<<<<<<< HEAD Birden çok satır girmek için `key:Shift+Enter` tuşlarına basmayı deneyebilir ve üstte `use strict` kullanmayı deneyebilirsiniz, örneğin: +======= +So, how to actually `use strict` in the console? + +First, you can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js 'use strict'; @@ -64,12 +86,17 @@ Birden çok satır girmek için `key:Shift+Enter` tuşlarına basmayı deneyebil Çoğu tarayıcıda, yani Firefox ve Chrome'da çalışır. +<<<<<<< HEAD Aksi takdirde, `use strict` eklemenin en güvenilir yolu, kodu konsola şu şekilde girmek olacaktır: +======= +If it doesn't, e.g. in an old browser, there's an ugly, but reliable way to ensure `use strict`. Put it inside this kind of wrapper: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js (function() { 'use strict'; +<<<<<<< HEAD // ...sizin kodunuz... })() ``` @@ -86,3 +113,24 @@ Gelecek bölümlerde dilin özelliklerini öğrendikçe bu sıkı mod ile varsay 2. Sıkı moda dosyanın başına `"use strict"` direktifiyle geçilebilir. Bu bize "sınıf" veya "modül" gibi dil özelliklerini kazandırır. 3. Sıkı mod tüm modern tarayıcılar tarafından desteklenir. 4. Bundan sonra tersi söylenmedikçe her yazacağınız örneklerde `"use strict"` ile başlayacağınız varsayılmaktadır. +======= + // ...your code here... +})() +``` + +## Should we "use strict"? + +The question may sound obvious, but it's not so. + +One could recommend to start scripts with `"use strict"`... But you know what's cool? + +Modern JavaScript supports "classes" and "modules" - advanced language structures (we'll surely get to them), that enable `use strict` automatically. So we don't need to add the `"use strict"` directive, if we use them. + +**So, for now `"use strict";` is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.** + +As of now, we've got to know about `use strict` in general. + +In the next chapters, as we learn language features, we'll see the differences between the strict and old modes. Luckily, there aren't many and they actually make our lives better. + +All examples in this tutorial assume strict mode unless (very rarely) specified otherwise. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md index 683d72987..12db6f91f 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md @@ -1,4 +1,8 @@ +<<<<<<< HEAD Önce gezegenimizin isminin tutulduğu değişkeni oluşturun. +======= +## The variable for our planet +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Basit bir şekilde aşağıdaki gibi oluşturabilirsiniz: @@ -6,10 +10,16 @@ Basit bir şekilde aşağıdaki gibi oluşturabilirsiniz: let gezegenimizinIsmi = "Dünya"; ``` +<<<<<<< HEAD Dikkat edin daha kısa olabilirdi. Örneğin kısaca `gezegen` diyebilirdik fakat bu çok açıkça bizim gezegenimizin ismini ifade etmezdi. Değişken çok uzun olmadıkça açık olmakta fayda var. İkincisi şu anda siteyi ziyaret eden kullanıcının adı: +======= +Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong. + +## The name of the current visitor +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let simdikiKullaniciAdi = "Ahmet"; diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md index 62b04414f..72450b1f0 100644 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md +++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md @@ -2,4 +2,8 @@ Genelde tamamı büyük harf değişleri "sabit kodlanmış" değerler için. Ve Bu kod cümlesinde `dogumGunu` tam da bu tanıma uymaktadır. Bundan dolayı büyük harf ile kullanılabilir. -Buna karşı `yaş` değişkeni bir fonksiyonun çıktısına göre değer almaktadır. Bu gün diyelim ki 20 yaşındaysanız bir yıl sonra 21 yaşında olacaksınız demektir. Tabi bu kural kod çalıştığında değişmez. Yani yıla göre değer alacaktır cümlesi değişmeyecektir. Fakat değer değiştiğinden dolayı `dogumGunu` değişkenine göre daha az sabittir. Hesaplanan bir değerdir. Bundan dolayı bunu küçük harfle tutmanız gerekmektedir. \ No newline at end of file +<<<<<<< HEAD +Buna karşı `yaş` değişkeni bir fonksiyonun çıktısına göre değer almaktadır. Bu gün diyelim ki 20 yaşındaysanız bir yıl sonra 21 yaşında olacaksınız demektir. Tabi bu kural kod çalıştığında değişmez. Yani yıla göre değer alacaktır cümlesi değişmeyecektir. Fakat değer değiştiğinden dolayı `dogumGunu` değişkenine göre daha az sabittir. Hesaplanan bir değerdir. Bundan dolayı bunu küçük harfle tutmanız gerekmektedir. +======= +In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`: it is calculated, so we should keep the lower case for it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 904a9fd7d..73e3bfe69 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -14,6 +14,10 @@ JavaScript dilinde değişken `let` kelimesiyle üretilir. Aşağıdaki cümle "mesaj" isminde bir değişken üretir ( diğer bir deyişle *tanımlar* ) +<<<<<<< HEAD +======= +The statement below creates (in other words: *declares*) a variable with the name "message": +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let mesaj; @@ -24,7 +28,11 @@ Artık bunun içerisine bilgi koyulabilir. Bunu atama operatörü ile `=` yapabi let mesaj; *!* +<<<<<<< HEAD mesaj = 'Merhaba'; // Merhaba karakter dizisini mesaja atadınız +======= +message = 'Hello'; // store the string 'Hello' in the variable named message +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* ``` @@ -79,9 +87,14 @@ let kullanici = 'Ahmet' Teknik olarak bu yazımların hepsi doğrudur. Gerisi sizin yazım tarzınıza kalmış. Her yiğidin yoğurt yiyişi farklıdır. +<<<<<<< HEAD ````smart header=" `let` yerine `var` kullanma" Eski kodlarda `let` yerine `var` kullanıldığını görürsünüz. +======= +````smart header="`var` instead of `let`" +In older scripts, you may also find another keyword: `var` instead of `let`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js *!*var*/!* mesaj = 'Merhaba'; @@ -115,7 +128,11 @@ Değer değiştiğinde, değişkenin eski değeri silinir. ![](variable-change.svg) +<<<<<<< HEAD Ayrıca iki değişken tanımlayıp içerilerindeki değerleri bir diğerine aktarabilirsiniz. +======= +![](variable-change.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run @@ -133,9 +150,28 @@ alert(merhaba); // Merhaba Dünya! alert(mesaj); // Merhaba Dünya! ``` +<<<<<<< HEAD ```smart header="Fonksiyonel Diller" İlginç bir bilgi olarak [Scala](http://www.scala-lang.org/) veya [Erlang](http://www.erlang.org/) gibi [fonksiyonel](https://tr.wikipedia.org/wiki/Fonksiyonel_programlama) diller değişkenin değerinin değiştirilmesine izin vermez. +======= +````warn header="Declaring twice triggers an error" +A variable should be declared only once. + +A repeated declaration of the same variable is an error: + +```js run +let message = "This"; + +// repeated 'let' leads to an error +let message = "That"; // SyntaxError: 'message' has already been declared +``` +So, we should declare a variable once and then refer to it without `let`. +```` + +```smart header="Functional languages" +It's interesting to note that there exist [functional](https://en.wikipedia.org/wiki/Functional_programming) programming languages, like [Scala](http://www.scala-lang.org/) or [Erlang](http://www.erlang.org/) that forbid changing variable values. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Böyle dillerde değer bir kutunun içerisinde sonsuza kadar saklanır. Eğer farklı bir değer kaydetmek istenirse bu diller bizi yeni bir kutu oluşturmaya iter. Eskisi yeniden kullanıp değeri değiştirilemez. @@ -189,7 +225,12 @@ Herhangi bir dili kullanmak mümkündür. Hatta aşağıdaki gibi resim yazısı let имя = '...'; let 我 = '...'; ``` +<<<<<<< HEAD Teknik olarak bir hata olmamasına ve bu şekilde kullanıma izin verilesine rağmen genel olarak uluslararası gelenek olarak değişkenler İngilizce isimlendirilirler. En basit bir kod parçasının bile önünde uzun bir hayat olabilir. Diğer ülkedeki insanların bu kodları okuması gerekebilir. +======= + +Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it some time. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```` ````warn header="Saklı tutulan isimler" @@ -237,8 +278,12 @@ Sabit(değişmeyen) tanımlamak için `let` yerine `const` kullanabilirsiniz. const benimDogumGunum = '18.04.1982'; ``` +<<<<<<< HEAD `const` ile tanımlanan değişkenler "constants" (Sabit) olarak tanımlanır. Bunlar değiştirilemezler, değiştirilmek istendiğinde hata alınır: +======= +Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run const benimDogumGunum = '18.04.1982'; @@ -290,7 +335,11 @@ Diğer bir deyişle büyük harfle yazılan değişken simleri sadece önceden b İsimlendirmeden konuşuyorsak düzgün isimlendirmeyi atlamamak gereklidir. Aslında en önemli konu da budur. Eğer değişken için isim bulamıyorsanız lütfen biraz daha düşünüp mantıklı bir isim bulun. +<<<<<<< HEAD Proje daha karmaşıklaştıkça isimlendirmenin önemi daha da anlaşılır. Değişken isimlerine göre kodun yeni kodlamaya başlayan birisi tarafından mı yoksa tecrübeli birisi tarafından mı yazıldığını anlaşılabilir. +======= +A variable name should have a clean, obvious meaning, describing the data that it stores. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Çoğu projede zaman var olan kodların değiştirilmesi, bu kodlardan yeni fonksiyonlar yapılması üzerinedir. Yeni bir şey yapılacağında çoğunlukla eskisinin üzerine yapılır. Eski kodlara baktığınızda değişkenlere bakarak konuyu anlamak daha kolay olacaktır. @@ -322,8 +371,14 @@ Modern JavaScript sıkıştırıcılar ve tarayıcılar kodları oldukça iyi op Verileri saklamak için değişken tanımlayabilirsiniz. Bu işlemi `var` veya `let` veya `const` ile yapabilirsiniz. +<<<<<<< HEAD - `let` -- modern değişken tanımlama. Chrome üzerinde `let` ile değişken tanımlamak istiyorsanız sıkı modda ( strict mode ) çalışmanız gerekmekte. - `var` -- eski tip değişken tanımlama. Normale bu tarz değişken oluşturma hiç kullılmayacka. İleride `let` ile `var` arasındaki nüans farkı bölümünde incelenecek. - `const` -- bu da `let` gibi fakat değeri değiştirilemez. +======= +- `let` -- is a modern variable declaration. +- `var` -- is an old-school variable declaration. Normally we don't use it at all, but we'll cover subtle differences from `let` in the chapter , just in case you need them. +- `const` -- is like `let`, but the value of the variable can't be changed. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Değişkenler bulundukları yerdeki anlamlarına göre isimlendirilmelidirler. diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index 5a1f0e2fd..822c6d4b2 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -1,6 +1,14 @@ # Veri Tipleri +<<<<<<< HEAD Bir javascript değişkeni her türlü veriyi tutabilir. Önce karakter dizisi(String) atansa da sonra sayısal değer alabilir: +======= +A value in JavaScript is always of a certain type. For example, a string or a number. + +There are eight basic data types in JavaScript. Here, we'll cover them in general and in the next chapters we'll talk about each of them in detail. + +We can put any type in a variable. For example, a variable can at one moment be a string and then store a number: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js // Hata yok @@ -8,11 +16,17 @@ let mesaj = "merhaba"; mesaj = 123456; ``` +<<<<<<< HEAD Bu şekilde olaylara izin veren tipdeki dillere "dinamik tip" dil denir. Veri yapıları olsa bile değişkenler bu yapılara bağlı değildir. JavaScript dilinde sekiz farklı veri tipi bulunmaktadır. Şimdilik bu tiplerden bahsedeceğiz gelecek bölümlerde ise daha derinlemesine bu tipleri inceleyeceğiz. ## Number - Sayı +======= +Programming languages that allow such things, such as JavaScript, are called "dynamically typed", meaning that there exist data types, but variables are not bound to any of them. + +## Number +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let s = 123; @@ -64,21 +78,59 @@ JavaScript'te "number" türü, şundan büyük tamsayı değerlerini temsil edem Çoğu amaç için bu oldukça yeterlidir, ancak bazen gerçekten büyük sayılara ihtiyacımız olabilir, kriptografi veya mikrosaniye hassasiyetli zaman damgaları için. +<<<<<<< HEAD Son zamanlarda, isteğe bağlı uzunluktaki tam sayıları temsil etmek için dile `BigInt` türü eklendi. +======= +## BigInt [#bigint-type] + +In JavaScript, the "number" type cannot represent integer values larger than (253-1) (that's `9007199254740991`), or less than -(253-1) for negatives. It's a technical limitation caused by their internal representation. + +For most purposes that's quite enough, but sometimes we need really big numbers, e.g. for cryptography or microsecond-precision timestamps. + +`BigInt` type was recently added to the language to represent integers of arbitrary length. + +A `BigInt` value is created by appending `n` to the end of an integer: + +```js +// the "n" at the end means it's a BigInt +const bigInt = 1234567890123456789012345678901234567890n; +``` + +As `BigInt` numbers are rarely needed, we don't cover them here, but devoted them a separate chapter . Read it when you need such big numbers. + + +```smart header="Compatibility issues" +Right now, `BigInt` is supported in Firefox/Chrome/Edge/Safari, but not in IE. +``` + +You can check [*MDN* BigInt compatibility table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) to know which versions of a browser are supported. + +## String +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bir tamsayının sonuna `n` eklenerek `BigInt` değeri oluşturulur: ```js +<<<<<<< HEAD // Sondaki "n" bu değerin bir BigInt olduğu anlamına gelir const bigInt = 1234567890123456789012345678901234567890n; +======= +let str = "Hello"; +let str2 = 'Single quotes are ok too'; +let phrase = `can embed another ${str}`; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` `BigInt` sayılarına nadiren ihtiyaç duyulduğundan, onları burada ele almıyoruz, ancak onlara ayrı bir bölüm ayırdık. Bu kadar büyük sayılara ihtiyacınız olduğunda okuyun. +<<<<<<< HEAD ```smart header="Compatibility issues" Şu anda, `BigInt` Firefox/Chrome/Edge/Safari'de destekleniyor, ancak IE'de desteklenmiyor. ``` +======= +Double and single quotes are "simple" quotes. There's practically no difference between them in JavaScript. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bir tarayıcının hangi sürümlerinin desteklendiğini öğrenmek için [* MDN * BigInt uyumluluk tablosunu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) kontrol edebilirsiniz. @@ -118,6 +170,7 @@ alert( "sonuç ${1 + 2}" ); // örneğin burada normal çift tırnak kullanıld ``` Karakter dizileri konusunu bölümünde daha derinlemesine incelenecektir. +<<<<<<< HEAD ```smart header="*Karakter* tipi diye bir tip yoktur." Bazı dillerde "character" - Karakter adında sadece bir karakteri tutan veri tipleri mevcuttur. Bu tip Java ve C'de `char` olarak tanımlanır. @@ -125,6 +178,15 @@ Javascriptte böyle bir tip bulunmamaktadır. Tek karakterli değişken de karak ``` ## Boolean ( doğru/yanlış) tipi +======= +```smart header="There is no *character* type." +In some languages, there is a special "character" type for a single character. For example, in the C language and in Java it is called "char". + +In JavaScript, there is no such type. There's only one type: `string`. A string may consist of zero characters (be empty), one character or many of them. +``` + +## Boolean (logical type) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Boolean tipi `true` ve `false` olmak üzere sadece iki değer tutabilir. @@ -163,7 +225,11 @@ Javascriptte `null` olmayan objeyi referans göstermez veya başka dillerdeki gi "olmayan", "boş", "bilinmeyen değer" anlamında bir özel değerdir. +<<<<<<< HEAD Yukarıdaki `yas` boş veya bilinmeyen bir değerdir. +======= +The code above states that `age` is unknown. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## "undefined" değeri @@ -174,28 +240,50 @@ Bir diğer özel değer ise `undefined`dır. Kendi başına `null` gibi bir değ Eğer bir değişken tanımlanmış fakat hiç bir değer atanmamışsa tam olarak bu değeri alır. ```js run -let x; +let age; +<<<<<<< HEAD alert(x); // "undefined" çıktısı verir. ``` Teknik olarak `undefined` değerini herhangi bir değişkene atamak mümkündür: +======= +alert(age); // shows "undefined" +``` + +Technically, it is possible to explicitly assign `undefined` to a variable: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run -let x = 123; +let age = 100; -x = undefined; +// change the value to undefined +age = undefined; -alert(x); // "undefined" +alert(age); // "undefined" ``` +<<<<<<< HEAD Fakat bu şekilde tanımlanmasa daha iyi olur. Normalde `null` kullanılarak değişkenin boş veya bilinmeyen olduğu tanımlanır, `undefined` değişkene bir değer atanmış mı? Sorusunu kontrol eder. +======= +...But we don't recommend doing that. Normally, one uses `null` to assign an "empty" or "unknown" value to a variable, while `undefined` is reserved as a default initial value for unassigned things. + +## Objects and Symbols +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Objeler ve Semboller `Obje` özel bir tiptir. +<<<<<<< HEAD Diğer tüm tipler "primitive" yani basit veya ilkel tiplerdir. Bu değişkenler sadece birşey tutabilirler( karakter dizisi veya sayı ). Buna karşılık objeler veri koleksiyonları (collections) veya karmaşık yapılar tutabilirler. konusunda Obje daha derinlemesine incelenecektir. `symbol` objeler için benzersiz tanımlayıcılar oluşturmak için kullanılır. Bu konuyu objeleri öğrendikten sonra öğrenmek daha iyi olacaktır. +======= +All other types are called "primitive" because their values can contain only a single thing (be it a string or a number or whatever). In contrast, objects are used to store collections of data and more complex entities. + +Being that important, objects deserve a special treatment. We'll deal with them later in the chapter , after we learn more about primitives. + +The `symbol` type is used to create unique identifiers for objects. We have to mention it here for the sake of completeness, but also postpone the details till we know objects. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## typeof operatörü [#type-typeof] `typeof` argüman tipini bildirir. Farklı tipler için farklı akışlarınız varsa bunu kullanabilirsiniz. @@ -215,6 +303,8 @@ typeof undefined // "undefined" typeof 0 // "number" +typeof 10n // "bigint" + typeof true // "boolean" typeof "foo" // "string" @@ -236,15 +326,34 @@ typeof alert // "function" (3) Son üç satır diğerlerinden farklıdır. Şu şekilde; +<<<<<<< HEAD 1. `Math` matematiksal operasyonlar için kullanılacak JavaScript dilinde var olan bir objedir. konusunda buna değinilecektir. Burada sadece objenin örneklenmesi için kullanılmıştır. 2. `typeof null` sonucu `"object"` dir. Aslında yanlış. Bu `typeof` fonksiyonunun bilinen bir hatasıdır. Eski versiyonlara uygunluk açısından bu şekliyle bırakılmıştır. Yoksa `null` bir obje değildir. Kendine has bir tiptir. Tekrar söylemek gerekirse bu JavaScript dilinin bir hatasıdır. 3. `typeof alert` fonksiyondur. Çünkü `alert` dilde doğrudan var olan bir fonksiyondur. `Math` ile farklı gördüğünüz gibi. Bir sonraki bölümde fonksiyonlar anlatılacaktır. Fonksiyonlar obje tipine dahildir. Fakat `typeof` bunları farklı yorumlar. Resmi olarak yanlış olsa da pratikte çokça kullanılan bir özelliktir. +======= +1. `Math` is a built-in object that provides mathematical operations. We will learn it in the chapter . Here, it serves just as an example of an object. +2. The result of `typeof null` is `"object"`. That's an officially recognized error in `typeof` behavior, coming from the early days of JavaScript and kept for compatibility. Definitely, `null` is not an object. It is a special value with a separate type of its own. +3. The result of `typeof alert` is `"function"`, because `alert` is a function. We'll study functions in the next chapters where we'll also see that there's no special "function" type in JavaScript. Functions belong to the object type. But `typeof` treats them differently, returning `"function"`. That also comes from the early days of JavaScript. Technically, such behavior isn't correct, but can be convenient in practice. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet +<<<<<<< HEAD Javascript dilinde 8 tane basit tip bulunmaktadır. +======= +There are 8 basic data types in JavaScript. + +- `number` for numbers of any kind: integer or floating-point, integers are limited by ±(253-1). +- `bigint` is for integer numbers of arbitrary length. +- `string` for strings. A string may have zero or more characters, there's no separate single-character type. +- `boolean` for `true`/`false`. +- `null` for unknown values -- a standalone type that has a single value `null`. +- `undefined` for unassigned values -- a standalone type that has a single value `undefined`. +- `object` for more complex data structures. +- `symbol` for unique identifiers. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - `number` her türlü sayı için ( integer veya floating point) - `bigint` isteğe bağlı uzunluktaki tam sayılar içindir. diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md similarity index 100% rename from 1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md rename to 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md similarity index 100% rename from 1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md rename to 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md similarity index 61% rename from 1-js/02-first-steps/09-alert-prompt-confirm/article.md rename to 1-js/02-first-steps/06-alert-prompt-confirm/article.md index fb7ed42db..4f03c9869 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md @@ -1,5 +1,6 @@ # Etkileşim: alarm kutusu, kullanıcıdan bilgi isteme, onaylama +<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md Bu bölüm JavaScript'i çevre bağımsız yani tarayıcı veya server farketmeksizin olduğu gibi kapsar. Fakat şu anda eğitimler tarayıcı üzerinde yapılmaktadır. Bundan dolayı en azından kullanıcı arayüzüne dair fonksiyon bilmenizde fayda var. Bu bölümde tarayıcıda çalışan `aler`, `prompt`, `confirm` fonksiyonları incelenecek. @@ -12,6 +13,13 @@ Yazımı: alert(mesaj); ``` Bu ekrana mesaj' değişkenini çıkarır ve önünüze gelen bu pop-up'da "OK" butonuna basmadan kodda bir sonraki adıma geçilmez. +======= +As we'll be using the browser as our demo environment, let's see a couple of functions to interact with the user: `alert`, `prompt` and `confirm`. + +## alert + +This one we've seen already. It shows a message and waits for the user to press "OK". +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/06-alert-prompt-confirm/article.md For example: @@ -20,7 +28,11 @@ alert("Merhaba"); ``` Ekrana çıkan küçük pencereye *modal pencere* denir. "Modal" sayfayı kullanan kişinin bu durumda sayfayla iletişime geçemeyeceğini, başka tuşlara basamayacağını sadece bu pencere ile etkileşim kurabileceğini ifade eder. Yani "OK"'e basması beklenir. +<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md ## Kullanıcıdan bilgi isteme +======= +The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case -- until they press "OK". +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/06-alert-prompt-confirm/article.md Kullanıcıdan bilgi istemek için `prompt` fonksiyonu kullanılır. Bu fonksiyon iki tane argümana ihtiyaç duyar: @@ -30,13 +42,28 @@ result = prompt(başlık[, varsayılan]); ``` Modal penceresi içerisinde bir yazı ve OK/CANCEL butonlarını içerir. +<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md `başlık` : Kullanıcıya gösterilecek yazı. +======= +It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel. + +`title` +: The text to show the visitor. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/06-alert-prompt-confirm/article.md `default` : Opsiyonel bir ikinci parametre, input alanı için varsayılan değeri içerir. +<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md Kullanıcı ekrana çıkan veri girişi kutusuna istediğini yazar ve OK tuşuna basar. Veya bunu CANCEL tuşuna basarak iptal edebilir. Veya `key:Esc` tuşu da aynı işlevi görür. +======= +```smart header="The square brackets in syntax `[...]`" +The square brackets around `default` in the syntax above denote that the parameter is optional, not required. +``` + +The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/06-alert-prompt-confirm/article.md Eğer kullanıcı değer girdiyse bunu dönderir, eğer girmediyse ve o ekrandan `key:Esc` veya CANCEL butonu ile çıktıysa `null` dönderir. @@ -73,7 +100,11 @@ result = confirm(soru); ``` `confirm` fonksiyonu içerisine yazdığımız `soru` ile OK ve CANCEL butonu olan bir pencere çıkarır. +<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md Eğer OK'e basıldıysa `true`, CANCEL'a basıldıysa `false` dönderir. +======= +The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/06-alert-prompt-confirm/article.md Örneğin: @@ -91,11 +122,18 @@ Bu bölümde 3 tane tarayıcı tabanlı ve kullanıcı ile etkileşimi sağlayan : Ekranda mesaj gösterir. `prompt` +<<<<<<< HEAD:1-js/02-first-steps/09-alert-prompt-confirm/article.md : Kullanıcıya bir mesaj ile soru sorar. Bir veri giriş kutusu ile cevap alır. Eğer kullanıcı bir yazı yazar ve `OK` tuşuna basarsa yazılan değeri döner. Eğer `CANCEL` veya `key:Esc`'ye basarsa bu durumda tarayıcıya `null` değeri döner. `confirm` : Kullanıcıdan "OK" veya "CANCEL"'a basmasını ister. Eğer kullanıcı "OK" basarsa `true`, CANCEL veya `key:Esc` durumunda false döner. +======= +: shows a message asking the user to input text. It returns the text or, if Cancel button or `key:Esc` is clicked, `null`. + +`confirm` +: shows a message and waits for the user to press "OK" or "Cancel". It returns `true` for OK and `false` for Cancel/`key:Esc`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/06-alert-prompt-confirm/article.md Tüm bu metodlar modaldır. Yani bu kod çalıştığında kullanıcı sayfanın başka bir yeriyle etkileşimde bulunamaz, taki bu pencereler kapatılana kadar. diff --git a/1-js/02-first-steps/06-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md similarity index 75% rename from 1-js/02-first-steps/06-type-conversions/article.md rename to 1-js/02-first-steps/07-type-conversions/article.md index 38f894595..b4d983527 100644 --- a/1-js/02-first-steps/06-type-conversions/article.md +++ b/1-js/02-first-steps/07-type-conversions/article.md @@ -1,16 +1,27 @@ # Tip Dönüşümleri +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md Çoğu zaman operatörler ve fonksiyonlar otomatik olarak değeri doğru tipe dönüştürürler. Buna "tip dönüştürme" denir. +======= +Most of the time, operators and functions automatically convert the values given to them to the right type. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/07-type-conversions/article.md Örneğin `alert` otomatik olarak verilen tüm değerleri karakter dizisine çevirir ve ekranda gösterir. Matematiksel operatörler ise değerleri sayılara çevirir. Tabi bunun yanında doğrudan tipi sizin tarafınızdan değiştirilmesi gereken değişkenler vardır. +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md ```smart header="Objeler hakkında konuşulmayacak" Bu bölümde objeler hakkında bilgi verilmeyecektir. Önce ilkel tiplerin iyice öğrenilmesi lazım, sonra objelerin öğrenilmesi ve daha sonra bölümünde objelerin dönüştürülmesi öğrenilebilir. +======= +```smart header="Not talking about objects yet" +In this chapter, we won't cover objects. For now we'll just be talking about primitives. + +Later, after we learn about objects, in the chapter we'll see how objects fit in. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/07-type-conversions/article.md ``` -## ToString +## String Conversion Bir değeri karakter dizisi olarak kullanmak istiyorsanız ToString'i kullanabilirsiniz. @@ -27,7 +38,7 @@ alert(typeof value); // karakter dizisi ``` Eğer `false` değeri karakter dizisi dönüştürme işlemine tabi tutarsanız `"false"`, `null`'u tutarsanız `"null"` olur. -## ToNumber +## Numeric Conversion Sayısal dünüştürme işlemleri matematiksel operasyonlarda otomatik olarak gerçekleşir. @@ -75,6 +86,7 @@ alert( Number(false) ); // 0 Lütfen `null` ve `undefined`'ın aynı davranmadıklarını bilin. `null` 0 olurken `undefined` `NaN` yani sayı değildir. +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md ````smart header="Ekleme karakteri '+'" Neredeyse tüm matematiksel operasyonlar önce değerleri sayılara çevirmeye çalışır. Eğer bir taraf sayıya çevrilemediyse bu durumda karakter olarak diğeri ile birleştirme işlemi yapılır. @@ -88,8 +100,11 @@ alert( '1' + 2 ); // '12' (Sol tarafta karakter var) Gördüğünüz gibi sadece bir tarafın karakter olması yeterlidir. Eğer iki tarafta sayıya dönüşebiliyorsa bu durumda gerçek toplama işlemi yapılır. ```` +======= +Most mathematical operators also perform such conversion, we'll see that in the next chapter. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/07-type-conversions/article.md -## ToBoolean +## Boolean Conversion Boolean dönüştürme en kolay olanıdır. @@ -120,14 +135,24 @@ alert( Boolean(" ") ); // içerisinde boşluk olan karakter dizisi true olur. ``` ```` +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md ## Özet +======= +## Summary +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/07-type-conversions/article.md Üç tane çok kullanılan tip dönüştürücü bulunmaktadır : Karakter Dizisine dönüştüren, sayıya dönüştüren ve boolean değere dönüştüren. +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md **`ToString`** -- Bir çıktı verildiğinde otomatik olarak bu fonksiyon çalışır. `String(value)` kullanılarak da dönüştürme işlemi yapılabilir. **`ToNumber`** -- Matematiksel operasyonlar otomatik olarak yaparlar. Ayrıca `Number(value)` ile de dönüştürme işlemi yapılabilir. +======= +**`String Conversion`** -- Occurs when we output something. Can be performed with `String(value)`. The conversion to string is usually obvious for primitive values. + +**`Numeric Conversion`** -- Occurs in math operations. Can be performed with `Number(value)`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/07-type-conversions/article.md Dönüştürme işlemi aşağıdaki kuralları kapsar: @@ -139,7 +164,11 @@ Dönüştürme işlemi aşağıdaki kuralları kapsar: |true / false | `1 / 0` | | `string` | Önce başta ve sondaki whitespace'ler silinir. Sonra eğer kalan değerde hiç bir karakter yok ise sonuç `0`. Eğer içerisinde sayısal olmayan bir değer var ise bu durumda `NaN` değeri alınır. | +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/article.md **`ToBoolean`** -- Lojik operatörlerde otomatik çalışır ayrıca `Boolean(value)` ile de dönüştürme işlemi yapılabilir. +======= +**`Boolean Conversion`** -- Occurs in logical operations. Can be performed with `Boolean(value)`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/07-type-conversions/article.md Kuralları şu şekildedir: diff --git a/1-js/02-first-steps/07-operators/1-increment-order/solution.md b/1-js/02-first-steps/08-operators/1-increment-order/solution.md similarity index 100% rename from 1-js/02-first-steps/07-operators/1-increment-order/solution.md rename to 1-js/02-first-steps/08-operators/1-increment-order/solution.md diff --git a/1-js/02-first-steps/07-operators/1-increment-order/task.md b/1-js/02-first-steps/08-operators/1-increment-order/task.md similarity index 100% rename from 1-js/02-first-steps/07-operators/1-increment-order/task.md rename to 1-js/02-first-steps/08-operators/1-increment-order/task.md diff --git a/1-js/02-first-steps/07-operators/2-assignment-result/solution.md b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md similarity index 100% rename from 1-js/02-first-steps/07-operators/2-assignment-result/solution.md rename to 1-js/02-first-steps/08-operators/2-assignment-result/solution.md diff --git a/1-js/02-first-steps/07-operators/2-assignment-result/task.md b/1-js/02-first-steps/08-operators/2-assignment-result/task.md similarity index 100% rename from 1-js/02-first-steps/07-operators/2-assignment-result/task.md rename to 1-js/02-first-steps/08-operators/2-assignment-result/task.md diff --git a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md similarity index 69% rename from 1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md rename to 1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md index 7dd0d61c2..dfd061cb6 100644 --- a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md +++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md @@ -9,11 +9,11 @@ true + false = 1 "$" + 4 + 5 = "$45" "4" - 2 = 2 "4px" - 2 = NaN -7 / 0 = Infinity -" -9 " + 5 = " -9 5" // (3) -" -9 " - 5 = -14 // (4) +" -9 " + 5 = " -9 5" // (3) +" -9 " - 5 = -14 // (4) null + 1 = 1 // (5) undefined + 1 = NaN // (6) +" \t \n" - 2 = -2 // (7) ``` 1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied. @@ -22,3 +22,4 @@ undefined + 1 = NaN // (6) 4. The subtraction always converts to numbers, so it makes `" -9 "` a number `-9` (ignoring spaces around it). 5. `null` becomes `0` after the numeric conversion. 6. `undefined` becomes `NaN` after the numeric conversion. +7. Space characters, are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`. diff --git a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md similarity index 57% rename from 1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md rename to 1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md index 009b59903..b8f8a8e84 100644 --- a/1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md +++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md @@ -16,11 +16,17 @@ true + false "$" + 4 + 5 "4" - 2 "4px" - 2 +<<<<<<< HEAD:1-js/02-first-steps/06-type-conversions/1-primitive-conversions-questions/task.md 7 / 0 " -9\n" + 5 " -9\n" - 5 +======= +" -9 " + 5 +" -9 " - 5 +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md null + 1 undefined + 1 +" \t \n" - 2 ``` İyice düşünün, bir yere yazın ve sonra sonucunuzu doğru cevap ile karşılaştırın. diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md new file mode 100644 index 000000000..209a0702c --- /dev/null +++ b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md @@ -0,0 +1,32 @@ +The reason is that prompt returns user input as a string. + +So variables have values `"1"` and `"2"` respectively. + +```js run +let a = "1"; // prompt("First number?", 1); +let b = "2"; // prompt("Second number?", 2); + +alert(a + b); // 12 +``` + +What we should do is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`. + +For example, right before `prompt`: + +```js run +let a = +prompt("First number?", 1); +let b = +prompt("Second number?", 2); + +alert(a + b); // 3 +``` + +Or in the `alert`: + +```js run +let a = prompt("First number?", 1); +let b = prompt("Second number?", 2); + +alert(+a + +b); // 3 +``` + +Using both unary and binary `+` in the latest code. Looks funny, doesn't it? diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md new file mode 100644 index 000000000..b3ea4a3a3 --- /dev/null +++ b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md @@ -0,0 +1,18 @@ +importance: 5 + +--- + +# Fix the addition + +Here's a code that asks the user for two numbers and shows their sum. + +It works incorrectly. The output in the example below is `12` (for default prompt values). + +Why? Fix it. The result should be `3`. + +```js run +let a = prompt("First number?", 1); +let b = prompt("Second number?", 2); + +alert(a + b); // 12 +``` diff --git a/1-js/02-first-steps/07-operators/article.md b/1-js/02-first-steps/08-operators/article.md similarity index 59% rename from 1-js/02-first-steps/07-operators/article.md rename to 1-js/02-first-steps/08-operators/article.md index e5940c887..41665880c 100644 --- a/1-js/02-first-steps/07-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -1,8 +1,16 @@ +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md # Operatörler +======= +# Basic operators, maths +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Çoğu operatörü okuldan hatırlarsınız. Toplama `+`, çarpma `*`, çıkarma `-` vs. +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Bu bölümde okulda görmediğiniz aritmediği işleyeceğiz. +======= +In this chapter, we’ll start with simple operators, then concentrate on JavaScript-specific aspects, not covered by school arithmetic. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ## Tanımlamalar: "unary", "binary", "operand" @@ -30,9 +38,67 @@ Başlamadan önce terminolojiyi öğrenmekte fayda var. Şeklen, iki operatörden konuşuyoruz. `unary` çıkarma ( tek operand işareti değiştirir) ve binary çıkarma ( iki operatör çıkarma ) +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md ## Karakter dizisi birleştirme, binary + JavaScript'te operatörlerin özel durumlarından birisi karakter dizilerinin `+` işareti ile birleştirilebilmesidir. +======= + Formally, in the examples above we have two different operators that share the same symbol: the negation operator, a unary operator that reverses the sign, and the subtraction operator, a binary operator that subtracts one number from another. + +## Maths + +The following math operations are supported: + +- Addition `+`, +- Subtraction `-`, +- Multiplication `*`, +- Division `/`, +- Remainder `%`, +- Exponentiation `**`. + +The first four are straightforward, while `%` and `**` need a few words about them. + +### Remainder % + +The remainder operator `%`, despite its appearance, is not related to percents. + +The result of `a % b` is the [remainder](https://en.wikipedia.org/wiki/Remainder) of the integer division of `a` by `b`. + +For instance: + +```js run +alert( 5 % 2 ); // 1, a remainder of 5 divided by 2 +alert( 8 % 3 ); // 2, a remainder of 8 divided by 3 +``` + +### Exponentiation ** + +The exponentiation operator `a ** b` raises `a` to the power of `b`. + +In school maths, we write that as ab. + +For instance: + +```js run +alert( 2 ** 2 ); // 2² = 4 +alert( 2 ** 3 ); // 2³ = 8 +alert( 2 ** 4 ); // 2⁴ = 16 +``` + +Just like in maths, the exponentiation operator is defined for non-integer numbers as well. + +For example, a square root is an exponentiation by ½: + +```js run +alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root) +alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root) +``` + + +## String concatenation with binary + + +Let's meet features of JavaScript operators that are beyond school arithmetics. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Böylece `+` işaretinin amacının ötesinde bir işlem yapabildiğinin farkına varmış olmalısınız. @@ -43,7 +109,11 @@ let s = "my" + "string"; alert(s); // mystring ``` +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Dikkat edin eğer iki operand'dan birisi karakter dizisi ise diğeri ne olursan olsun karakter dizisine çevrilir. +======= +Note that if any of the operands is a string, then the other one is converted to a string too. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Örneğin: @@ -52,15 +122,36 @@ alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21" ``` +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Gördüğünüz gibi, ilk operand veya ikinci operandın karakter dizisi olması birşeyi değiştirmiyor. Kural basit, her iki taraftan birisi karakter dizisi ise diğerini de karakter dizisine çevir ve birleştir. Yani `"+"` işlemi hem birleştirme hem de tip değiştirme yapmaktadır. Bu sadece `"+"` operatörüne has bir olaydır. Örneğin çıkarma ve çarpmanın davranışı farklıdır: +======= +See, it doesn't matter whether the first operand is a string or the second one. + +Here's a more complex example: + +```js run +alert(2 + 2 + '1' ); // "41" and not "221" +``` + +Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = '41'`. ```js run -alert( 2 - '1' ); // 1 -alert( '6' / '2' ); // 3 +alert('1' + 2 + 2); // "122" and not "14" +``` +Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`. + +The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers. + +Here's the demo for subtraction and division: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md + +```js run +alert( 6 - '2' ); // 4, converts '2' to a number +alert( '6' / '2' ); // 3, converts both operands to numbers ``` ## Sayısal değer dönüştürme, unary + @@ -90,8 +181,14 @@ Aslında `Number(...)` işlemini yapar. Fakat daha kısa biçimyle. Karakter dizilerini sayılara çevirme gerekliliği sıklıkla önünüze gelir. Örneğin HTML form değerlerini alırken sadece karakter dizisi kullanır. Fakat ya siz bunları toplamak istiyorsanız ? +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Bildiğiniz gibi iki karakter dizisini `+` işareti ile toplarsanız birleştirme işlemi yapar: +======= +The need to convert strings to numbers arises very often. For example, if we are getting values from HTML form fields, they are usually strings. What if we want to sum them? + +The binary plus would add them as strings: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ```js run let elma = "2"; @@ -124,29 +221,55 @@ Neden önce "unary" işlemi gerçekleşiyor da "binary" işlemi gerçekleşmiyor Eğer bir ifade birden fazla operatör içeriyorsa. Bu ifade çalıştırılırken tanımlı *önceliklere* göre çalıştırılır, bir başka ifade ile öncelik sırasına göre çalıştırılır. +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Okuldan hepinizin hatırlayacağı gibi çarpma işlemi toplamadan önce yapılır `1 + 2 * 2`. Aslında *öncelik* tam olarakta budur. Çarpma işlemi toplama işleminden daha *yüksek önceliğe* sahiptir. +======= +If an expression has more than one operator, the execution order is defined by their *precedence*, or, in other words, the default priority order of operators. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Parantez, bu öncelikleri çiğner ve eğer bu *önceliklerden* memnun değilseniz bunları tekrar tanımlamanıza olanak verir. Örneğin `(1 + 2 ) * 2` +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md JavaScript' dilinde birçok operatör vardır. Her operatörün de bir önceliği. Yüksek öncelik sayısına sahip operatör önce çalışır. Eğer öncelik değerleri eşit ise soldan sağa doğru çalışır. +======= +Parentheses override any precedence, so if we're not satisfied with the default order, we can use them to change it. For example, write `(1 + 2) * 2`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md [öncelik tablosu](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence) ( Ezberlemenize gerek yok sadece unary operatörlerin binary olanlara göre daha üstün olduğunu hatırlayın yeter). Yani `+elma + +portakal` işleminde önce unary ile `elma`'nın değerini sayı yapar sonra `portakal`'ın değerini sayı yapar ve en sonunda toplar. +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md +======= +Here's an extract from the [precedence table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones): +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md | Öncelik | Adı | İşareti | |------------|------|------| | ... | ... | ... | +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md | 16 | unary toplama | `+` | | 16 | unary çıkarma | `-` | | 14 | çarpma | `*` | | 14 | bölme | `/` | | 13 | toplama | `+` | | 13 | çıkarma | `-` | +======= +| 17 | unary plus | `+` | +| 17 | unary negation | `-` | +| 16 | exponentiation | `**` | +| 15 | multiplication | `*` | +| 15 | division | `/` | +| 13 | addition | `+` | +| 13 | subtraction | `-` | +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md | ... | ... | ... | | 3 | atama | `=` | | ... | ... | ... | +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Görüleceği üzere "unary toplama" `16` ile normal toplama işlemi(binary toplama) `13` ün öncesindedir. +======= +As we can see, the "unary plus" has a priority of `17` which is higher than the `13` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ## Atama @@ -158,6 +281,7 @@ let x = 2 * 2 + 1; alert( x ); // 5 ``` +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Zincirleme atama yapmak şu şekilde mümkündür: ```js run @@ -175,6 +299,13 @@ Zincirleme atama sağdan sola doğru olur. Önce en sağdaki değişkene değer ````smart header="`\"=\"` operatörü değer döndürür" +======= +### Assignment = returns a value + +The fact of `=` being an operator, not a "magical" language construct has an interesting implication. + +All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Operatör her zaman değer döndürür. Toplama `+` veya çarpma için `*` bu çok açıktır. Fakat ya atama ? Atama operatörü de aslında değer döndürür. @@ -193,6 +324,7 @@ alert( a ); // 3 alert( c ); // 0 ``` +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Yukarıdaki örnekte, `(a = b+1)` in sonucu `a` ya atandıktan sonra(3) 3'den çıkarmak için kullanılıyor. Komik bi kod değil mi? Nasıl çalıştığını anlamanız lazım, bazen başka kütüphaneler kullandığınızda böyle şeyleri sizin yazmanız beklenmez. Böyle olaylar aslında kodun okunaklılığını azaltır. @@ -204,9 +336,21 @@ Komik bi kod değil mi? Nasıl çalıştığını anlamanız lazım, bazen başk Kalan `%` operatörü yüzde ile alakası olmayan bir operatördür. `a % b` a'nın b'ye bölümünden kalan değeri verir. +======= +In the example above, the result of expression `(a = b + 1)` is the value which was assigned to `a` (that is `3`). It is then used for further evaluations. + +Funny code, isn't it? We should understand how it works, because sometimes we see it in JavaScript libraries. + +Although, please don't write the code like that. Such tricks definitely don't make code clearer or readable. + +### Chaining assignments + +Another interesting feature is the ability to chain assignments: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Örneğin: ```js run +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md alert( 5 % 2 ); // 5'in 2 ile bölümünden kalan 1'dir. alert( 8 % 3 ); // 8'in 3 ile bölümünden kalan 2'dir. alert( 6 % 3 ); // 6'nın 3 ile bölümünden kalan 0'dır. @@ -219,40 +363,108 @@ alert( 6 % 3 ); // 6'nın 3 ile bölümünden kalan 0'dır. Doğal sayı olan `b` değeri için `a ** b` `a`'nın `b` defa kendisiyle çarpılması demektir. Örneğin: +======= +let a, b, c; + +*!* +a = b = c = 2 + 2; +*/!* + +alert( a ); // 4 +alert( b ); // 4 +alert( c ); // 4 +``` + +Chained assignments evaluate from right to left. First, the rightmost expression `2 + 2` is evaluated and then assigned to the variables on the left: `c`, `b` and `a`. At the end, all the variables share a single value. + +Once again, for the purposes of readability it's better to split such code into few lines: + +```js +c = 2 + 2; +b = c; +a = c; +``` +That's easier to read, especially when eye-scanning the code fast. + +## Modify-in-place + +We often need to apply an operator to a variable and store the new result in that same variable. + +For example: + +```js +let n = 2; +n = n + 5; +n = n * 2; +``` + +This notation can be shortened using the operators `+=` and `*=`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ```js run -alert( 2 ** 2 ); // 4 (2 * 2) -alert( 2 ** 3 ); // 8 (2 * 2 * 2) -alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2) +let n = 2; +n += 5; // now n = 7 (same as n = n + 5) +n *= 2; // now n = 14 (same as n = n * 2) + +alert( n ); // 14 ``` Integer olmayan değerler için de aynı işlemi yapmak mümkün örneğin: +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md ```js run alert( 4 ** (1/2) ); // 2 ( 1/2 üstü karekökü anlamına da gelir.) alert( 8 ** (1/3) ); // 2 (1/3 üstü ise küp kök anlamına gelir. ) +======= +Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=`, etc. + +Such operators have the same precedence as a normal assignment, so they run after most other calculations: + +```js run +let n = 2; + +n *= 3 + 5; + +alert( n ); // 16 (right part evaluated first, same as n *= 8) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ``` ## Artırma/Azaltma +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Bir sayıyı artırmak veya azlatmak sayısal operasyonlarda önemli sayılabilecek bir düzeydedir. +======= + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Bunun için özel bir operatör yapılmıştır: - **Artırma** `++` değişkenin değerini 1 artırır: ```js run no-beautify +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md let sayac = 2; sayac++; // sayac = sayac + 1 ile aynı, fakat daha kısa alert( sayac ); // 3 +======= + let counter = 2; + counter++; // works the same as counter = counter + 1, but is shorter + alert( counter ); // 3 +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ``` - **Azaltma** `--` değişkenin değerini bir azaltır: ```js run no-beautify +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md let sayac = 2; sayac--; // sayac = sayac - 1 ile aynı, fakat daha kısa alert( sayac ); // 1 +======= + let counter = 2; + counter--; // works the same as counter = counter - 1, but is shorter + alert( counter ); // 1 +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ``` ```warn @@ -362,6 +574,7 @@ Operatörlerin listesi: - RIGHT SHIFT -- SAĞ KAYDIRMA ( `>>` ) - ZERO-FILL RIGHT SHIFT -- SIFIR DOLDURARAK SAĞ KAYDIRMA ( `>>>` ) +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Bu oparatörlerin çok nadir kullanılır. Onları anlamak için düşük seviyeli sayı temsiline girmemiz gerekiyor ve özellikle de yakın zamanda onlara ihtiyaç duymayacağımızdan şu anda bunu yapmak uygun olmayacaktır. Merak ediyorsanız, MDN ile ilgili [Bitwise Operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) makalesini okuyabilirsiniz. Gerçek bir ihtiyacınız olduğunda bunu yapmak daha pratik olacaktır. ## Modify-in-place (Yerinde Değiştir) @@ -398,6 +611,9 @@ n *= 3 + 5; alert( n ); // 16 (önce sağ kısımda işleem yapıldı, n *= 8 gibi) ``` +======= +These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise) chapter on MDN when a need arises. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md ## Virgül @@ -420,10 +636,17 @@ Burada, ilk ifade olan `1 + 2` işleme giriyor fakat sonucu çöpe atılıyor. S ```smart header="Virgül operatörünün önceliği çok düşüktür" Unutmamak gerekir ki virgül oparatörü çok düşük bir önceliğe sahiptir, önceliği `=` den bile daha düşüktür; bu yüzden yukardaki örnekte gördüğümüz gibi parantezler çok önemlidir. +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Parantezler olmadan: `a = 1 + 2, 3 + 4` ifadesinde önce `+` işleme alınır, değerler toplanarak `a = 3, 7` ifadesine çevirilir, ondan sonra atama operatörü `=` ile `a = 3` ataması yapılır, ve sonuç olarak virgülden sonraki sayı olan `7` işlenmeyerek yok sayılır. ``` Peki neden son kısım hariç her şeyi yok sayan bir operatöre neden ihtiyacımız var? +======= +Without them: `a = 1 + 2, 3 + 4` evaluates `+` first, summing the numbers into `a = 3, 7`, then the assignment operator `=` assigns `a = 3`, and the rest is ignored. It's like `(a = 1 + 2), 3 + 4`. +``` + +Why do we need an operator that throws away everything except the last expression? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md Bazen bizler, bir satırda birkaç işlem yapılan karmaşık yapılarda bu operatörü kullanırız. @@ -436,4 +659,8 @@ for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) { } ``` +<<<<<<< HEAD:1-js/02-first-steps/07-operators/article.md Bu tarz numaralar bir çok JavaScript frameworklerinde kullanılır. Bu yüzden bunladan bahsettik. Ama genelde bunlar kodun okunabilirliğini azaltıyorlar. Bu yüzden kullanmadan önce iyi düşünmek gerekir. +======= +Such tricks are used in many JavaScript frameworks. That's why we're mentioning them. But usually they don't improve code readability so we should think well before using them. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/08-operators/article.md diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md new file mode 100644 index 000000000..632b1cf4e --- /dev/null +++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md @@ -0,0 +1,21 @@ + + +```js no-beautify +5 > 4 → true +"apple" > "pineapple" → false +"2" > "12" → true +undefined == null → true +undefined === null → false +null == "\n0\n" → false +null === +"\n0\n" → false +``` + +Some of the reasons: + +1. Obviously, true. +2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`. +3. Again, dictionary comparison, first char `"2"` is greater than the first char `"1"`. +4. Values `null` and `undefined` equal each other only. +5. Strict equality is strict. Different types from both sides lead to false. +6. Similar to `(4)`, `null` only equals `undefined`. +7. Strict equality of different types. diff --git a/1-js/02-first-steps/08-comparison/1-comparison-questions/task.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md similarity index 100% rename from 1-js/02-first-steps/08-comparison/1-comparison-questions/task.md rename to 1-js/02-first-steps/09-comparison/1-comparison-questions/task.md diff --git a/1-js/02-first-steps/08-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md similarity index 74% rename from 1-js/02-first-steps/08-comparison/article.md rename to 1-js/02-first-steps/09-comparison/article.md index 6eb288a59..b8a126e5d 100644 --- a/1-js/02-first-steps/08-comparison/article.md +++ b/1-js/02-first-steps/09-comparison/article.md @@ -1,15 +1,34 @@ # Karşılaştırmalar +<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md Çoğu karşılaştırma operatörlerini matematik derslerinden biliyorsunuzdur: - Büyüktür/küçüktür: a > b, a < b. - Büyük Eşit/Küçük Eşit: a >= b, a <= b. - Eşitlik kontrolü `a == b` (Dikkat ederseniz tek değil iki tane `'='` işaretinden oluşuyor.Tek olanı `a = b` atama anlamına geliyor). - Eşit değildir matematikte şu şekilde gösteriliyor ≠, JavaScript'te ise eşittir öncesine ünlem işareti olarak kullanabilirsiniz a != b. +======= +We know many comparison operators from maths. + +In JavaScript they are written like this: + +- Greater/less than: a > b, a < b. +- Greater/less than or equals: a >= b, a <= b. +- Equals: `a == b`, please note the double equality sign `==` means the equality test, while a single one `a = b` means an assignment. +- Not equals. In maths the notation is ≠, but in JavaScript it's written as a != b. + +In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities. + +At the end you'll find a good recipe to avoid "JavaScript quirks"-related issues. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/09-comparison/article.md ## Sonuç boolean olacaktır +<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md Diğer operatörler gibi bunun sonucu da değer dönecektir. Dönen değer booleandır. +======= +All comparison operators return a boolean value: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/09-comparison/article.md - `true` -- "evet", "dogru" veya "gerçek" demek. - `false` -- "no", "yanlış" veya "yalan" demektir. @@ -51,7 +70,13 @@ alert( 'Bee' > 'Be' ); // doğru ( true ) 4. Karakter dizilerinin sonuna kadar test et. 5. Eğer sonuna kadar tüm karakterler aynıysa uzun olanı daha büyüktür. +<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md Örneğin birinci örnekte `'Z' > 'A'` dan büyüktür hemen true sonucu döner. +======= +In the first example above, the comparison `'Z' > 'A'` gets to a result at the first step. + +The second comparison `'Glow'` and `'Glee'` needs more steps as strings are compared character-by-character: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/09-comparison/article.md İkincisinde `"Kum"` ve `"Kan"` karakter karakter karşılaştırılıyor: @@ -78,7 +103,13 @@ alert( '01' == 1 ); // doğru, karakter olan '01' sayıya çevrilerek 1 olmuştu ``` Boolan değerler için `true` `1` olur ve `false` `0` olur. +<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md Örneğin: +======= +For boolean values, `true` becomes `1` and `false` becomes `0`. + +For example: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/09-comparison/article.md ```js run alert( true == 1 ); // true ( doğru ) @@ -137,9 +168,16 @@ Sıkı eşitlik kontrolü biraz daha uzun yazıma sahip olsa da hataya yer bıra Daha uç noktalara bakarsanız, +<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md `null` ile `undefined` başka değerler ile karşılaştırıldığında aralarında sezgisel olmayan davranışlar görülür. Sıkı eşitlik kontrolü için `===`: Bu değerler farklıdır, çünkü her biri kendine has bir tiptir. +======= +There's a non-intuitive behavior when `null` or `undefined` are compared to other values. + +For a strict equality check `===` +: These values are different, because each of them is a different type. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/09-comparison/article.md ```js run alert( null === undefined ); // false @@ -183,6 +221,7 @@ alert( undefined == 0 ); // false (3) ``` Neden hep false çıktı? +<<<<<<< HEAD:1-js/02-first-steps/08-comparison/article.md Bu sonuçları şunlardan dolayı aldık - `(1.)` ve `(2.)` örneklerde `false` döndü çünkü `undefined` `NaN` oldu. `Nan` özel bir sayısal değişkendir ve hangi sayı ile karşılaştırılırsa karşılaştırılsın, sonuç `false` çıkar. - `(3.)` maddedeki eşitlik kontrolü ise `undefined`'ın sadece `null` ile eşit olabilmesinden dolayıdır. `null` haricinde hiç bir değere eşit değildir. @@ -192,6 +231,21 @@ Bu sonuçları şunlardan dolayı aldık Neden peki bu örnekleri yaptık? Bu şeyleri her zaman hatırlamamıza gerek var mı? Aslında haklısınız bu gibi özelliklere zamanla daha iyi alışabilirsiniz. Fakat bu problemlerden kaçınmanın bir yolu var. `undefined/null` eşitlik kontrollerinde sıkı eşitlik kontrolü `===` haricinde yaptığınız kontrollere dikkat etmeniz lazım. +======= +Why does it dislike zero so much? Always false! + +We get these results because: + +- Comparisons `(1)` and `(2)` return `false` because `undefined` gets converted to `NaN` and `NaN` is a special numeric value which returns `false` for all comparisons. +- The equality check `(3)` returns `false` because `undefined` only equals `null`, `undefined`, and no other value. + +### Avoid problems + +Why did we go over these examples? Should we remember these peculiarities all the time? Well, not really. Actually, these tricky things will gradually become familiar over time, but there's a solid way to avoid problems with them: + +- Treat any comparison with `undefined/null` except the strict equality `===` with exceptional care. +- Don't use comparisons `>= > < <=` with a variable which may be `null/undefined`, unless you're really sure of what you're doing. If a variable can have these values, check for them separately. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/09-comparison/article.md `>= > < <=` gibi karşılaştırmaları `null/undefined` değeri alabilecek değişkenler ile yapmayın, yaparsanız bile kesinlikle çok dikkatli olun. Eğer bir değişken `null/undefined` gibi değerler alabiliyorsa bunları ayrıca kontrol etmeniz gerekli. diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md index 8a61ee5bf..fb9b0e0c7 100644 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md +++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md @@ -6,9 +6,12 @@ importance: 2 `if..else` bloğu kullanarak "JavaScript\'in resmi ismi nedir?" sorusunu sorun. +<<<<<<< HEAD Eğer kullanıcı "ECMAScript" cevabı verirse "Doğru" diğer türlü "ECMAScript olduğunu bilmiyormusun?" yazısını alarm olarak gösterin. +======= +If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "You don't know? ECMAScript!" +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ![](ifelse_task2.svg) [demo src="ifelse_task2"] - diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md index 4f6668cbe..58480693d 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md @@ -1,6 +1,10 @@ ```js +<<<<<<< HEAD let sonuc = (a + b < 4) ? 'Düşük' : 'Yüksek'; +======= +let result = (a + b < 4) ? 'Below' : 'Over'; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md index d6b74e063..5486d8471 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md @@ -4,13 +4,18 @@ importance: 5 # 'if' ile yazılan koşulu '?' çevirin. +<<<<<<< HEAD Aşağıdaki `if` cümlesini "üçlü" operatöre `'?`' olarak yazın: +======= +Rewrite this `if` using the conditional operator `'?'`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js +let result; + if (a + b < 4) { sonuc = 'Düşük'; } else { sonuc = 'Yüksek'; } ``` - diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index f72f3ba0a..c575901b6 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -1,11 +1,19 @@ +<<<<<<< HEAD # Koşul operatörleri: if, '?' +======= +# Conditional branching: if, '?' +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bazı durumlarda koşula göre farklı eylemler yapmak isteyebilirsiniz. `"?"` operatörü veya `if` cümlesi bu koşulları kontrol etmenizi sağlar. +<<<<<<< HEAD ## "if" cümlesi +======= +The `if(...)` statement evaluates a condition in parentheses and, if the result is `true`, executes a block of code. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 "if" cümlesi koşulu alır ve kontrol eder sonucunda `true` ise kodu çalıştırır. @@ -68,6 +76,10 @@ if (sonuc) { `if` cümlesi opsiyonel olarak "else" bloğu da içerebilir. Bu eğer `if` parantezi içerisinde yazdığımız kod yanlış ise çalışır. +<<<<<<< HEAD +======= +The `if` statement may contain an optional "else" block. It executes when the condition is falsy. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin: ```js run @@ -215,7 +227,11 @@ Koşula göre `firma =='Netscap'`, soru işaretinden sonra birinci bölüm veya Sonucu bir değere atanmamıştır. Amaç duruma göre doğrudan kodu çalıştırmak. +<<<<<<< HEAD **Soru işaretinin bu amaç doğrultusunda kullanılması önerilmez.** +======= +**It's not recommended to use the question mark operator in this way.** +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yazımı if yazımından daha kısa olsa bile daha az okunabilir durumdadır. Aşağıda `if` ile yazımını görmektesiniz. diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md index 827426e5b..8881d5c9e 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md @@ -9,4 +9,12 @@ alert( alert(1) || 2 || alert(3) ); 2. Bu uyarı ekranından `undefined` döner bundan dolayı ikinci operand çalışır çünkü daha `doğru`'yu bulamadı. 3. İkinci operand `2` `doğru`'dur. Bundan dolayı değer sona erer. Tabi `2` döndüğünde bu defa dışarıda bulunan `alert` fonksiyonu çalışır ve ekranda `2` uyarısı görünür. +<<<<<<< HEAD `3` değeri ekrana çıkmayacaktır çünkü değerlendirme sonuncu operand'a `alert(3)` gelmeden bitmiştir. +======= +1. The first OR `||` evaluates its left operand `alert(1)`. That shows the first message with `1`. +2. The `alert` returns `undefined`, so OR goes on to the second operand searching for a truthy value. +3. The second operand `2` is truthy, so the execution is halted, `2` is returned and then shown by the outer alert. + +There will be no `3`, because the evaluation does not reach `alert(3)`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md index d822a2c62..7c9badef6 100644 --- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md +++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md @@ -4,4 +4,10 @@ importance: 3 # Aralık kontrolü +<<<<<<< HEAD `yaş`'ı 14 ile 90 arası olanları kontrol eden `if` koşulunu yazınız? Not: 14 ve 90 dahil. +======= +Write an `if` condition to check that `age` is between `14` and `90` inclusively. + +"Inclusively" means that `age` can reach the edges `14` or `90`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md index 664ac0a7a..4ee889891 100644 --- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md +++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md @@ -4,6 +4,10 @@ importance: 3 # Aralığın dışındaki değerleri yazınız. +<<<<<<< HEAD `yaş`'ı 14 ile 90 arasında olmayanları bulan `if` koşulunu yazınız. Not: 14 ve 90 dahil. +======= +Write an `if` condition to check that `age` is NOT between `14` and `90` inclusively. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bunu `!` kullanarak ve kullanmayarak iki şekilde yapın. diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md index b535650ec..604606259 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md @@ -3,19 +3,19 @@ ```js run demo let userName = prompt("Who's there?", ''); -if (userName == 'Admin') { +if (userName === 'Admin') { let pass = prompt('Password?', ''); - if (pass == 'TheMaster') { + if (pass === 'TheMaster') { alert( 'Welcome!' ); - } else if (pass == '' || pass == null) { - alert( 'Canceled.' ); + } else if (pass === '' || pass === null) { + alert( 'Canceled' ); } else { alert( 'Wrong password' ); } -} else if (userName == '' || userName == null) { +} else if (userName === '' || userName === null) { alert( 'Canceled' ); } else { alert( "I don't know you" ); diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md index 0728efad1..290a52642 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md @@ -6,13 +6,13 @@ importance: 3 Write the code which asks for a login with `prompt`. -If the visitor enters `"Admin"`, then `prompt` for a password, if the input is an empty line or `key:Esc` -- show "Canceled.", if it's another string -- then show "I don't know you". +If the visitor enters `"Admin"`, then `prompt` for a password, if the input is an empty line or `key:Esc` -- show "Canceled", if it's another string -- then show "I don't know you". The password is checked as follows: - If it equals "TheMaster", then show "Welcome!", - Another string -- show "Wrong password", -- For an empty string or cancelled input, show "Canceled." +- For an empty string or cancelled input, show "Canceled" The schema: diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md index 73ff6345f..84dda5833 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -1,6 +1,10 @@ # Mantıksal Operatörler +<<<<<<< HEAD JavaScript dilinde üç tane mantıksal operatör bulunmaktadır: `||` (OR - VEYA ), `&&`(AND - VE ), `!` (NOT - DEĞİL ) +======= +There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Mantıksal operatörler olarak adlandırılsalar bile, her tipteki değer için uygulanabilirler. Sadece boolean ( doğru-yanlış) değerleri için değil. Sonuçta her tipte olabilir. @@ -64,7 +68,11 @@ if (saat < 10 || saat > 18 || haftaSonu) { } ``` +<<<<<<< HEAD ## VEYA ilk doğru değeri arar +======= +## OR "||" finds the first truthy value [#or-finds-the-first-truthy-value] +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yukarıda belirtilen mantık klasik mantıktır. JavaScript'in "ekstra" özelliklerine bakılacak olursa @@ -83,23 +91,37 @@ VEYA `"||"` operatörü şunları yapar: - Her operandın değerini boolean'a çevirir. Eğer sonuç `doğru` ise durur ve o operandın orjinal değerini döner. - Eğer tüm operandlar kontrol edildi ve tamamı yanlış ise son operandı döner. +<<<<<<< HEAD Eğer VEYA zincirinde bir tane doğru bulunursa o an dönülür. Eğer bulunamazsa sonuncusu döner. +======= +In other words, a chain of OR `||` returns the first truthy value or the last one if no truthy value is found. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin: ```js run +<<<<<<< HEAD alert( 1 || 0 ); // 1 (1 doğru) alert( true || 'önemsiz' ); // (true doğru) alert( null || 1 ); // 1 (1 tek doğru veri) alert( null || 0 || 1 ); // 1 (1 tek doğru veri) alert( undefined || null || 0 ); // 0 (Hepsi yanlış sonuncusunu döner) +======= +alert( 1 || 0 ); // 1 (1 is truthy) + +alert( null || 1 ); // 1 (1 is the first truthy value) +alert( null || 0 || 1 ); // 1 (the first truthy value) + +alert( undefined || null || 0 ); // 0 (all falsy, returns the last value) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` Bu klasik "boolean" VEYA tanımını aşarak ilginç kullanımlara neden olmaktadır. 1. **Değişken veya ifadeler dizisinde ilk doğru(true) değeri bulmak için** +<<<<<<< HEAD Düşünün bir diziniz var ve içinde `null/undefined` değerler barındırmakta. Siz ilk veriyi bulduğunuzda döndermek istiyorsunuz. Bunun için `||` kullanabilirsiniz: @@ -113,10 +135,25 @@ Bu klasik "boolean" VEYA tanımını aşarak ilginç kullanımlara neden olmakta */!* alert( isim ); // "Akif" seçilir – ilk doğru değeri bulduğundan dolayı buradan dönülür ve ekrana "Akif" çıkar. +======= + For instance, we have `firstName`, `lastName` and `nickName` variables, all optional (i.e. can be undefined or have falsy values). + + Let's use OR `||` to choose the one that has the data and show it (or `"Anonymous"` if nothing set): + + ```js run + let firstName = ""; + let lastName = ""; + let nickName = "SuperCoder"; + + *!* + alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder + */!* +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` Eğer `simdikiKullanici` ve `varsayilanKullanici` yanlış(false) olsaydı `"isimsiz"` yazısı ekrana çıkacaktı. +<<<<<<< HEAD 2. **Kısa devre değerlendirmesi** Operantlar sadece değer değil ifade de olabilir. VEYA testlerini soldan sağa doğru yapar. Doğru değer bulunduğunda döndürülür. Bu olaya kısa devre değerlendirmesi denir, çünkü soldan sağa en kısa yoldan gitmektedir. @@ -128,21 +165,31 @@ Bu klasik "boolean" VEYA tanımını aşarak ilginç kullanımlara neden olmakta ```js run no-beautify let x; +======= + If all variables were falsy, `"Anonymous"` would show up. + +2. **Short-circuit evaluation.** - *!*true*/!* || (x = 1); + Another feature of OR `||` operator is the so-called "short-circuit" evaluation. + It means that `||` processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + + That importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call. + +<<<<<<< HEAD alert(x); // tanımsız, çünkü (x = 1) ifadesi çalıştırılmadı ``` Eğer `if` yapısında ilk değer `false` ise bir sonrakine bakılır bu da şu şekilde sonuç verir: +======= + In the example below, only the second message is printed: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run no-beautify - let x; - - *!*false*/!* || (x = 1); - - alert(x); // 1 + *!*true*/!* || alert("not printed"); + *!*false*/!* || alert("printed"); ``` Gördüğünüz gibi değer atandı. Böyle basit bir durumda yan etki görmezden gelinebilir. @@ -151,7 +198,13 @@ Bu klasik "boolean" VEYA tanımını aşarak ilginç kullanımlara neden olmakta Çoğu zaman normal `if` yapısını kullanmanız daha iyidir çünkü kod daha anlaşılır olur. Fakat bazen kısa yoldan `if` yapmakta işinize yarayabilir. +<<<<<<< HEAD ## && (AND - VE ) +======= + In the first line, the OR `||` operator stops the evaluation immediately upon seeing `true`, so the `alert` isn't run. + + Sometimes, people use this feature to execute commands only if the condition on the left part is falsy. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Ve operatörü iki tane `&` işaretiyle tanımlanmaktadır. @@ -188,7 +241,13 @@ if (1 && 0) { // true && false şeklinde değerlendirilmiştir. ## VE ilk `yanlış` değeri görür +<<<<<<< HEAD Aşağıda 3 tane AND işlemine sokulmuş değer bulunmaktadır: +======= +## AND "&&" finds the first falsy value + +Given multiple AND'ed values: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js sonuc = deger1 && deger2 && deger3; @@ -240,7 +299,12 @@ alert( 5 || 1 && 0 ); // 5 ```` VEYA'da olduğu gibi VE'de de operatör bazen `if` yerine kullanılabilir. +<<<<<<< HEAD Örneğin: +======= +````warn header="Don't replace `if` with `||` or `&&`" +Sometimes, people use the AND `&&` operator as a "shorter way to write `if`". +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run @@ -256,14 +320,23 @@ Aslında aşağıdaki ile benzerdir: ```js run let x = 1; +<<<<<<< HEAD if (x > 0) { alert( 'Sıfırdan büyük!' ); } +======= +if (x > 0) alert( 'Greater than zero!' ); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` `&&` ile yazılan çeşidi daha kısa gibi görünse de aslında `if` ile yazılanın daha okunabilir olduğu açıktır. Bundan dolayı her yapıyı amacına göre kullanmanız önerilir. Eğer `if` kullanmak istiyorsanız `if` yazarak kullanın. Eğer VE kullanmak istiyorsnaız `&&` yazarak kullanın. +<<<<<<< HEAD +======= +Although, the variant with `&&` appears shorter, `if` is more obvious and tends to be a little bit more readable. So we recommend using every construct for its purpose: use `if` if we want `if` and use `&&` if we want AND. +```` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## ! (DEĞİL) diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md new file mode 100644 index 000000000..b84dff892 --- /dev/null +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -0,0 +1,169 @@ +# Nullish coalescing operator '??' + +[recent browser="new"] + +The nullish coalescing operator is written as two question marks `??`. + +As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. We'll say that an expression is "defined" when it's neither `null` nor `undefined`. + +The result of `a ?? b` is: +- if `a` is defined, then `a`, +- if `a` isn't defined, then `b`. + +In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one. + +The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two. + +We can rewrite `result = a ?? b` using the operators that we already know, like this: + +```js +result = (a !== null && a !== undefined) ? a : b; +``` + +Now it should be absolutely clear what `??` does. Let's see where it helps. + +The common use case for `??` is to provide a default value for a potentially undefined variable. + +For example, here we show `user` if defined, otherwise `Anonymous`: + +```js run +let user; + +alert(user ?? "Anonymous"); // Anonymous (user not defined) +``` + +Here's the example with `user` assigned to a name: + +```js run +let user = "John"; + +alert(user ?? "Anonymous"); // John (user defined) +``` + +We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`. + +Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to enter a value. + +We'd like to display the user name using one of these variables, or show "Anonymous" if all of them aren't defined. + +Let's use the `??` operator for that: + +```js run +let firstName = null; +let lastName = null; +let nickName = "Supercoder"; + +// shows the first defined value: +*!* +alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder +*/!* +``` + +## Comparison with || + +The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value). + +For example, in the code above we could replace `??` with `||` and still get the same result: + +```js run +let firstName = null; +let lastName = null; +let nickName = "Supercoder"; + +// shows the first truthy value: +*!* +alert(firstName || lastName || nickName || "Anonymous"); // Supercoder +*/!* +``` + +Historically, the OR `||` operator was there first. It exists since the beginning of JavaScript, so developers were using it for such purposes for a long time. + +On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`. + +The important difference between them is that: +- `||` returns the first *truthy* value. +- `??` returns the first *defined* value. + +In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result. + +In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set. + +For example, consider this: + +```js run +let height = 0; + +alert(height || 100); // 100 +alert(height ?? 100); // 0 +``` + +- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed. + - so the result of `||` is the second argument, `100`. +- The `height ?? 100` checks `height` for being `null/undefined`, and it's not, + - so the result is `height` "as is", that is `0`. + +In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing. + +## Precedence + +The precedence of the `??` operator is about the same as `||`, just a bit lower. It equals `5` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table), while `||` is `6`. + +That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`. + +So if we'd like to choose a value with `??` in an expression with other operators, consider adding parentheses: + +```js run +let height = null; +let width = null; + +// important: use parentheses +let area = (height ?? 100) * (width ?? 50); + +alert(area); // 5000 +``` + +Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results. + +```js +// without parentheses +let area = height ?? 100 * width ?? 50; + +// ...works the same as this (probably not what we want): +let area = height ?? (100 * width) ?? 50; +``` + +### Using ?? with && or || + +Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses. + +The code below triggers a syntax error: + +```js run +let x = 1 && 2 ?? 3; // Syntax error +``` + +The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`. + +Use explicit parentheses to work around it: + +```js run +*!* +let x = (1 && 2) ?? 3; // Works +*/!* + +alert(x); // 2 +``` + +## Summary + +- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list. + + It's used to assign default values to variables: + + ```js + // set height=100, if height is null or undefined + height = height ?? 100; + ``` + +- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression. +- It's forbidden to use it with `||` or `&&` without explicit parentheses. diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/1-loop-last-value/solution.md rename to 1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md diff --git a/1-js/02-first-steps/12-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/1-loop-last-value/task.md rename to 1-js/02-first-steps/13-while-for/1-loop-last-value/task.md diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/2-which-value-while/solution.md rename to 1-js/02-first-steps/13-while-for/2-which-value-while/solution.md diff --git a/1-js/02-first-steps/12-while-for/2-which-value-while/task.md b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/2-which-value-while/task.md rename to 1-js/02-first-steps/13-while-for/2-which-value-while/task.md diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/3-which-value-for/solution.md rename to 1-js/02-first-steps/13-while-for/3-which-value-for/solution.md diff --git a/1-js/02-first-steps/12-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/3-which-value-for/task.md rename to 1-js/02-first-steps/13-while-for/3-which-value-for/task.md diff --git a/1-js/02-first-steps/12-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/4-for-even/solution.md rename to 1-js/02-first-steps/13-while-for/4-for-even/solution.md diff --git a/1-js/02-first-steps/12-while-for/4-for-even/task.md b/1-js/02-first-steps/13-while-for/4-for-even/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/4-for-even/task.md rename to 1-js/02-first-steps/13-while-for/4-for-even/task.md diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/5-replace-for-while/solution.md rename to 1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md diff --git a/1-js/02-first-steps/12-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/5-replace-for-while/task.md rename to 1-js/02-first-steps/13-while-for/5-replace-for-while/task.md diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md similarity index 58% rename from 1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md rename to 1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md index f28ecc8b3..151a14868 100644 --- a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md +++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md @@ -9,8 +9,13 @@ do { `do..while` ile her iki koşul da doğru olana kadar kontrol edin: +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/6-repeat-until-correct/solution.md 1. `sayi <=100` -- girilen değerin hala `100` den büyük olmadığını gösterir. 1. `&& sayi` `sayi` `null` veya boş bir değer olduğunda `false` dönderir. Tabi `while` döngüsü de burada sona erer. +======= +1. The check for `num <= 100` -- that is, the entered value is still not greater than `100`. +2. The check `&& num` is false when `num` is `null` or an empty string. Then the `while` loop stops too. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md NOT: Eğer `sayi` `null` ise ` num<=100` `true` olur. Yani ikinci kontrol olmadan kullanıcı IPTAL tuşuna bassa bile döngü durmayacaktır. İki koşul da gereklidir. diff --git a/1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/6-repeat-until-correct/task.md rename to 1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/solution.md b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md similarity index 53% rename from 1-js/02-first-steps/12-while-for/7-list-primes/solution.md rename to 1-js/02-first-steps/13-while-for/7-list-primes/solution.md index 9ff0663d7..b4b64b6fa 100644 --- a/1-js/02-first-steps/12-while-for/7-list-primes/solution.md +++ b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md @@ -26,4 +26,4 @@ for (let i = 2; i <= n; i++) { // for each i... } ``` -There's a lot of space to opimize it. For instance, we could look for the divisors from `2` to square root of `i`. But anyway, if we want to be really efficient for large intervals, we need to change the approach and rely on advanced maths and complex algorithms like [Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve) etc. +There's a lot of space to optimize it. For instance, we could look for the divisors from `2` to square root of `i`. But anyway, if we want to be really efficient for large intervals, we need to change the approach and rely on advanced maths and complex algorithms like [Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve) etc. diff --git a/1-js/02-first-steps/12-while-for/7-list-primes/task.md b/1-js/02-first-steps/13-while-for/7-list-primes/task.md similarity index 100% rename from 1-js/02-first-steps/12-while-for/7-list-primes/task.md rename to 1-js/02-first-steps/13-while-for/7-list-primes/task.md diff --git a/1-js/02-first-steps/12-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md similarity index 72% rename from 1-js/02-first-steps/12-while-for/article.md rename to 1-js/02-first-steps/13-while-for/article.md index 292a9afa9..a6dba4c3f 100644 --- a/1-js/02-first-steps/12-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -17,7 +17,11 @@ while (koşul) { } ``` +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md `koşul` `doğru` iken(while), `döngü gövdesinde` bulunan kod çalıştırılır. +======= +While the `condition` is truthy, the `code` from the loop body is executed. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md Örneğin, aşağıdaki kod `i < 3` `iken` çalışır. @@ -82,7 +86,11 @@ Bu şekilde döngü yazımı çok nadir olarak kullanılır. Kullanılmasının ## "for" döngüsü +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md `for` döngüsü en fazla kullanılan döngüdür. +======= +The `for` loop is more complex, but it's also the most commonly used loop. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md Aşağıdaki şekilde kullanıma sahiptir: @@ -107,7 +115,18 @@ Bölüm bölüm inceleyecek olursak | adım | `i++` | Gövdenin tekerrür etmesinden sonra fakat koşuldan önce çalışır | | gövde | `alert(i)` | koşul doğru olduğu sürece durmadan çalışır | +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md Genel döngü algoritması aşağıdaki gibidir: +======= +| part | | | +|-------|----------|----------------------------------------------------------------------------| +| begin | `let i = 0` | Executes once upon entering the loop. | +| condition | `i < 3`| Checked before every loop iteration. If false, the loop stops. | +| body | `alert(i)`| Runs again and again while the condition is truthy. | +| step| `i++` | Executes after the body on each iteration. | + +The general loop algorithm works like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ``` Çalışmaya başlar @@ -117,9 +136,15 @@ Genel döngü algoritması aşağıdaki gibidir: → ... ``` +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md Eğer döngüleri yeni görüyorsanız, belki geri dönüp bu olanları sırasıyla kağıda yazarak takip ederseniz sizin için daha iyi olacaktır. Yukarıdaki kodda tam olarak ne oluyor peki: +======= +That is, `begin` executes once, and then it iterates: after each `condition` test, `body` and `step` are executed. + +If you are new to loops, it could help to go back to the example and reproduce how it runs step-by-step on a piece of paper. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ```js @@ -202,8 +227,13 @@ Fakat bazı durumlarda bu döngü `kırılabilir` ( break ). Örneğin, kullanıcıdan bir dizi sayı girmesini istediniz eğer boş bir değer girerse döngüyü kırabilirsiniz. +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md ```js let toplam = 0; +======= +```js run +let sum = 0; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md while (true) { @@ -245,7 +275,7 @@ for (let i = 0; i < 10; i++) { Tek değerler gösteren döngü aşağıdaki gibi de yazılabilir: -```js +```js run for (let i = 0; i < 10; i++) { if (i % 2) { @@ -258,6 +288,10 @@ Teknik açısından birbiri ile aynıdırlar. Her zaman `continue` bloğunun yer Tabi bunun yan etkisi döngü gövdesi içinde bir tane daha `if` kullanarak okunabilirliği düşürmektir. +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md +======= +But as a side-effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ```` ````warn header=" 'if' yerine '?' kullanılıyorsa sağ tarafa 'continue/break' yazılmaz." @@ -278,14 +312,22 @@ Yukarıdaki döngü `?` ile yazılacak olursa: (i > 5) ? alert(i) : *!*continue*/!*; // `continue` burada kullanılamaz!!! ``` +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md ... sonrasında çalışmayı durdurur. Böyle kodlar yazım hatası verir. Bu da `'?'` işaretini `if` yerine kullanmamak için ayrı bir neden. +======= +...it stops working: there's a syntax error. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ```` ## break/continue için etiket tanımlanması ( Label ) +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md +======= +For example, in the code below we loop over `i` and `j`, prompting for the coordinates `(i, j)` from `(0,0)` to `(2,2)`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md Bazen birden fazla döngü içinden tek bir break ile çıkılma ihtiyacı duyulabilir. Örneğin aşağıdaki kodda döngü `i` ve `j` kordinatlarını ekranda gösterir: @@ -296,8 +338,12 @@ for (let i = 0; i < 3; i++) { let deger = prompt(`Kordinattaki değer (${i},${j})`, ''); +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md // Burada döngüden çıkmak istersem ne yapmalıyım? +======= + // what if we want to exit from here to Done (below)? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md } } @@ -306,9 +352,13 @@ alert('Bitti!'); Eğer kullanıcı iptale basarsa döngü iptal edilmelidir. +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md Normalde içerideki döngü için `deger`'e değer atadıktan sonra duruma göre içteki döngü kırılabilir. Fakat bu yeterli değildir. Bu gibi durumlarda `Labels` veya `etiket` ile sorun çözülebilir. *etiket* döngüden önce bir kolon ile döngüyü tanımlamak için kullanılır. +======= +The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue! +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ```js etiketAdi: for (...) { @@ -349,17 +399,42 @@ for (let i = 0; i < 3; i++) { ... } `continue` talimatı da etiket ile kullanılabilir. Bu durumda etiketin yazılı olduğu yere atlar. +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md +======= +````warn header="Labels do not allow to \"jump\" anywhere" +Labels do not allow us to jump into an arbitrary place in the code. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ````warn header="Etiketler \"goto\" değildir." Etiketler ile kodun herhangi bir yerine atlamak mümkün değildir. Örneğin aşağıdaki kod çalışmaz. ```js +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md break etiket; // etikete atlar değil mi?. +======= +break label; // jump to the label below (doesn't work) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md etiket: for (...) ``` +<<<<<<< HEAD:1-js/02-first-steps/12-while-for/article.md `break/continue` sadece döngünün içerisinde çalışabilir, ve doğal olarak etiketler de üst tarafa yazılmalıdırlar. +======= + +A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.: +```js +label: { + // ... + break label; // works + // ... +} +``` + +...Although, 99.9% of the time `break` is used inside loops, as we've seen in the examples above. + +A `continue` is only possible from inside a loop. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/13-while-for/article.md ```` ## Özet diff --git a/1-js/02-first-steps/14-function-basics/function_basics.png b/1-js/02-first-steps/14-function-basics/function_basics.png deleted file mode 100644 index f5e6f9418..000000000 Binary files a/1-js/02-first-steps/14-function-basics/function_basics.png and /dev/null differ diff --git a/1-js/02-first-steps/14-function-basics/function_basics@2x.png b/1-js/02-first-steps/14-function-basics/function_basics@2x.png deleted file mode 100644 index c31b2636a..000000000 Binary files a/1-js/02-first-steps/14-function-basics/function_basics@2x.png and /dev/null differ diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md similarity index 100% rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md similarity index 100% rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md similarity index 100% rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md similarity index 100% rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/14-switch/article.md similarity index 91% rename from 1-js/02-first-steps/13-switch/article.md rename to 1-js/02-first-steps/14-switch/article.md index b4757c99e..245be447d 100644 --- a/1-js/02-first-steps/13-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -51,7 +51,11 @@ switch (a) { break; */!* case 5: +<<<<<<< HEAD:1-js/02-first-steps/13-switch/article.md alert( 'Çok büyük' ); +======= + alert( 'Too big' ); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/14-switch/article.md break; default: alert( "Böyle bir değeri bilmiyorum." ); @@ -117,7 +121,7 @@ Gövdesinde aynı kodu çalıştıran birden fazla `case` gruplanabilir. Örneğin, diyelim ki `case 3` ve `case 5` için aynı kodu çalıştırmak isteniz: ```js run no-beautify -let a = 2 + 2; +let a = 3; switch (a) { case 4: @@ -125,7 +129,11 @@ switch (a) { break; *!* +<<<<<<< HEAD:1-js/02-first-steps/13-switch/article.md case 3: // (*) iki "case" gruplandı +======= + case 3: // (*) grouped two cases +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/14-switch/article.md case 5: alert('Yanlış!'); alert("Neden matematik dersi almıyorsun?"); diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/task.md rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/task.md diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md similarity index 51% rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md index 6dbbdbe5b..07a345906 100644 --- a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md @@ -14,4 +14,8 @@ function yasKontrolu(yas) { } ``` +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md `age > 18` etrafındaki parantezler aslında zorunlu değildir. Fakat okunurluğu artırır. +======= +Note that the parentheses around `age > 18` are not required here. They exist for better readability. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md similarity index 67% rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md index 7430bb616..cd9d94569 100644 --- a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md @@ -15,7 +15,11 @@ function yasKontrolu(yas) { if (yas > 18) { return true; } else { +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md return confirm('Ebeveynlerin izin verdi mi?'); +======= + return confirm('Did parents allow you?'); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md } } ``` diff --git a/1-js/02-first-steps/14-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/3-min/solution.md rename to 1-js/02-first-steps/15-function-basics/3-min/solution.md diff --git a/1-js/02-first-steps/14-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/3-min/task.md rename to 1-js/02-first-steps/15-function-basics/3-min/task.md diff --git a/1-js/02-first-steps/14-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md similarity index 55% rename from 1-js/02-first-steps/14-function-basics/4-pow/solution.md rename to 1-js/02-first-steps/15-function-basics/4-pow/solution.md index d4d152114..b64924b54 100644 --- a/1-js/02-first-steps/14-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/solution.md @@ -13,10 +13,14 @@ function usAl(x, n) { let x = prompt("x?", ''); let n = prompt("n?", ''); +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/4-pow/solution.md if (n <= 1) { alert(` ${n} için üs alınamamktadır. 0'dan büyük doğal sayı kullanınız.`); +======= +if (n < 1) { + alert(`Power ${n} is not supported, use a positive integer`); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/4-pow/solution.md } else { alert( usAl(x, n) ); } ``` - diff --git a/1-js/02-first-steps/14-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/4-pow/task.md rename to 1-js/02-first-steps/15-function-basics/4-pow/task.md diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md similarity index 75% rename from 1-js/02-first-steps/14-function-basics/article.md rename to 1-js/02-first-steps/15-function-basics/article.md index 66111b9b5..ec96af432 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -19,9 +19,17 @@ function mesajGoster() { } ``` +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md `function` kelimesi önce yazılır, ardından *fonksiyonun adı* ve sonra parametlerin yazılacağı parantez açılır ve ihtiyaç duyulan parametreler yazılır, sonrasında ise kapatılıp süslü parantez ile *fonksiyon gövdesi*ne başlanır. +======= +The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, we'll see examples later) and finally the code of the function, also named "the function body", between curly braces. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md -![](function_basics.png) +```js +function name(parameter1, parameter2, ... parameterN) { + ...body... +} +``` Yeni fonksyion ismiyle şu şekilde çağırılır: `mesaGoster()`. @@ -130,7 +138,11 @@ Global değişkenlere her fonksiyon içerisinden erişilebilir.(Yerel değişken Genelde fonksiyonlar yapacakları işe ait tüm değişkenleri tanımlarlara, global değişkenler ise sadece proje seviyesinde bilgi tutarlar, çünkü proje seviyesinde bilgilerin projenin her yerinden erişilebilir olması oldukça önemlidir. Modern kodda az veya hiç global değer olmaz. Çoğu fonksiyona ait değişkenlerdir. +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md ``` +======= +We can pass arbitrary data to functions using parameters. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md ## Parametreler Paramterelere isteğe bağlı olarak veri paslanabilir. Bunlara *fonksiyon argümanları* da denir. @@ -138,6 +150,7 @@ Paramterelere isteğe bağlı olarak veri paslanabilir. Bunlara *fonksiyon argü Aşağıdaki fonksiyon iki tane parametreye sahiptir. `gonderen` ve `metin` ```js run +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md function mesajGoster(*!*gonderen, metin*/!*) { // argümanlar: gonderen, metin alert(gonderen + ': ' + metin); } @@ -146,13 +159,20 @@ function mesajGoster(*!*gonderen, metin*/!*) { // argümanlar: gonderen, metin mesajGoster('Ahmet', 'Merhaba!'); // Ahmet: Merhaba! (*) mesajGoster('Mehmet', "Naber?"); // Mehmet: Naber? (**) */!* +======= +function showMessage(*!*from, text*/!*) { // parameters: from, text + alert(from + ': ' + text); +} + +*!*showMessage('Ann', 'Hello!');*/!* // Ann: Hello! (*) +*!*showMessage('Ann', "What's up?");*/!* // Ann: What's up? (**) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md ``` Eğer fonksiyonlar `(*)` ve `(**)` deki gibi yazılırsa doğrudan fonksiyonda `gonderen` ve `metin` yerel değişkenlerine atanırlar. Sonrasında fonksiyon bunları kullanabilir. Aşağıda `gonderen` değişkeni fonksiyona paslanmakta. Dikkat ederseniz fonksiyon içerisinde `gonderen` değişse bile bu dışarıda bulunan değişkeni etkilememekte. Çünkü fonksiyon bu değişkenin her zaman kopyasını kullanır: - ```js run function mesajGoster(gonderen,metin) { @@ -171,9 +191,27 @@ mesajGoster(gonderen, "Merhaba"); // *Mahmut*: Merhaba alert( gonderen ); // Mahmut ``` +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md ### Varsayılan Değerler Eğer fonksiyon argümanına bir değer gönderilmemişse fonksiyon içerisinde bu değişken `undefined` olur. +======= +When a value is passed as a function parameter, it's also called an *argument*. + +In other words, to put these terms straight: + +- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term) +- An argument is the value that is passed to the function when it is called (it's a call time term). + +We declare functions listing their parameters, then call them passing arguments. + +In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`". + + +## Default values + +If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md Örneğin `mesajGoster(gonderen,metin)` fonksiyonu tek argüman ile de çağırılabilir. @@ -182,7 +220,13 @@ mesajGoster("Mahmut"); ``` Bu bir hata değildir. Fonksiyon eğer bu şekilde çağırılırsa, yani `metin` yoksa, `metin == undefined` varsayılır. Yukarıdaki fonksiyon çağırıldığında sonuç "Mahmut: undefined" olacaktır. +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md Eğer "varsayılan" olarak `metin` değeri atamak istiyorsanız, `=` işareti ile tanımlamanız gerekmekte. +======= +That's not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isn't passed, it becomes `undefined`. + +We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md ```js run function mesajGoster(gonderen, *!*metin = "metin gönderilmedi"*/!*) { @@ -201,6 +245,7 @@ function mesajGoster(gonderen, metin = digerFonksiyon()) { } ``` +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md ````smart header="Eski tip varsayılan parametreler" Eski tip JavaScript varsayılan parametreleri desteklememekteydi. Bundan dolayı farklı yöntemler geliştirdi. Eğer eskiden yazılmış kodları okursanız bu kodlara rastlayabilirsiniz. @@ -215,22 +260,69 @@ function mesajGoster(gonderen, metin) { */!* alert( gonderen + ": " + metin ); +======= +```smart header="Evaluation of default parameters" +In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. + +In the example above, `anotherFunction()` isn't called at all, if the `text` parameter is provided. + +On the other hand, it's independently called every time when `text` is missing. +``` + +### Alternative default parameters + +Sometimes it makes sense to assign default values for parameters not in the function declaration, but at a later stage. + +We can check if the parameter is passed during the function execution, by comparing it with `undefined`: + +```js run +function showMessage(text) { + // ... + +*!* + if (text === undefined) { // if the parameter is missing + text = 'empty message'; + } +*/!* + + alert(text); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md } + +showMessage(); // empty message ``` ...Veya `||` operatörü: +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md ```js function mesajGoster(gonderen, metin) { // eğer metin yanlış değer ise( bu durumda undefined yanlış değerdir hatırlarsanız ) 'metin gönderilmedi' ata. text = text || 'metin gönderilmedi'; +======= +...Or we could use the `||` operator: + +```js +function showMessage(text) { + // if text is undefined or otherwise falsy, set it to 'empty' + text = text || 'empty'; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md ... } ``` +Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when most falsy values, such as `0`, should be considered "normal": -```` +```js run +function showCount(count) { + // if count is undefined or null, show "unknown" + alert(count ?? "unknown"); +} +showCount(0); // 0 +showCount(null); // unknown +showCount(); // unknown +``` ## Değer dönderme @@ -252,8 +344,13 @@ alert( sonuc ); // 3 Bir fonksiyon içerisinde birden fazla `return` fonksiyonu da olabilir. ```js run +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md function yasKontrolu(yas) { if (yas > 18) { +======= +function checkAge(age) { + if (age >= 18) { +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md *!* return true; */!* @@ -325,8 +422,24 @@ Bu çalışmaz, çünkü JavaScript `return` kelimesinden sonra `;` varsayara ve return*!*;*/!* (bazı + uzun + ifade + veya + baska + birsey * f(a) + f(b)) ``` +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md Bundan dolayı, tam olarak boş return olur. Geri döndereceğimiz değer ile return aynı satırda olmalıdır. +======= + +So, it effectively becomes an empty return. + +If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows: + +```js +return ( + some + long + expression + + or + + whatever * f(a) + f(b) + ) +``` +And it will work just as we expect it to. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md ```` ## Fonksiyonu isimlendirme [#fonksiyon-isimlendirme] @@ -377,7 +490,11 @@ Bu örnekler genel olarak öneklerin nasıl tahmin edilmesi gerektiğini göster Örneğin, [jQuery](http://jquery.com) kütüphanesi `$` fonksiyonu ile tanımlanır. [LoDash](http://lodash.com/) kütüphanesi de keza kendine has fonksiyon `_` kullanır. +<<<<<<< HEAD:1-js/02-first-steps/14-function-basics/article.md Bunlar istisnadır. Genel olarak fonksiyon isimleri kısa ve açıklayıcı olmalıdır. +======= +These are exceptions. Generally function names should be concise and descriptive. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/02-first-steps/15-function-basics/article.md ``` ## Fonksiyonlar == Yorumlar diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md new file mode 100644 index 000000000..a8ccd6c6c --- /dev/null +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -0,0 +1,368 @@ +# Function expressions + +In JavaScript, a function is not a "magical language structure", but a special kind of value. + +The syntax that we used before is called a *Function Declaration*: + +```js +function sayHi() { + alert( "Hello" ); +} +``` + +There is another syntax for creating a function that is called a *Function Expression*. + +It looks like this: + +```js +let sayHi = function() { + alert( "Hello" ); +}; +``` + +Here, the function is created and assigned to the variable explicitly, like any other value. No matter how the function is defined, it's just a value stored in the variable `sayHi`. + +The meaning of these code samples is the same: "create a function and put it into the variable `sayHi`". + +We can even print out that value using `alert`: + +```js run +function sayHi() { + alert( "Hello" ); +} + +*!* +alert( sayHi ); // shows the function code +*/!* +``` + +Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes its execution, but JavaScript is not like that. + +In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string representation, which is the source code. + +Surely, a function is a special value, in the sense that we can call it like `sayHi()`. + +But it's still a value. So we can work with it like with other kinds of values. + +We can copy a function to another variable: + +```js run no-beautify +function sayHi() { // (1) create + alert( "Hello" ); +} + +let func = sayHi; // (2) copy + +func(); // Hello // (3) run the copy (it works)! +sayHi(); // Hello // this still works too (why wouldn't it) +``` + +Here's what happens above in detail: + +1. The Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`. +2. Line `(2)` copies it into the variable `func`. Please note again: there are no parentheses after `sayHi`. If there were, then `func = sayHi()` would write *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself. +3. Now the function can be called as both `sayHi()` and `func()`. + +Note that we could also have used a Function Expression to declare `sayHi`, in the first line: + +```js +let sayHi = function() { + alert( "Hello" ); +}; + +let func = sayHi; +// ... +``` + +Everything would work the same. + + +````smart header="Why is there a semicolon at the end?" +You might wonder, why does Function Expression have a semicolon `;` at the end, but Function Declaration does not: + +```js +function sayHi() { + // ... +} + +let sayHi = function() { + // ... +}*!*;*/!* +``` + +The answer is simple: +- There's no need for `;` at the end of code blocks and syntax structures that use them like `if { ... }`, `for { }`, `function f { }` etc. +- A Function Expression is used inside the statement: `let sayHi = ...;`, as a value. It's not a code block, but rather an assignment. The semicolon `;` is recommended at the end of statements, no matter what the value is. So the semicolon here is not related to the Function Expression itself, it just terminates the statement. +```` + +## Callback functions + +Let's look at more examples of passing functions as values and using function expressions. + +We'll write a function `ask(question, yes, no)` with three parameters: + +`question` +: Text of the question + +`yes` +: Function to run if the answer is "Yes" + +`no` +: Function to run if the answer is "No" + +The function should ask the `question` and, depending on the user's answer, call `yes()` or `no()`: + +```js run +*!* +function ask(question, yes, no) { + if (confirm(question)) yes() + else no(); +} +*/!* + +function showOk() { + alert( "You agreed." ); +} + +function showCancel() { + alert( "You canceled the execution." ); +} + +// usage: functions showOk, showCancel are passed as arguments to ask +ask("Do you agree?", showOk, showCancel); +``` + +In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such function usually draws a nice-looking question window. But that's another story. + +**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** + +The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer. + +We can use Function Expressions to write the same function much shorter: + +```js run no-beautify +function ask(question, yes, no) { + if (confirm(question)) yes() + else no(); +} + +*!* +ask( + "Do you agree?", + function() { alert("You agreed."); }, + function() { alert("You canceled the execution."); } +); +*/!* +``` + +Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here. + +Such code appears in our scripts very naturally, it's in the spirit of JavaScript. + +```smart header="A function is a value representing an \"action\"" +Regular values like strings or numbers represent the *data*. + +A function can be perceived as an *action*. + +We can pass it between variables and run when we want. +``` + + +## Function Expression vs Function Declaration + +Let's formulate the key differences between Function Declarations and Expressions. + +First, the syntax: how to differentiate between them in the code. + +- *Function Declaration:* a function, declared as a separate statement, in the main code flow. + + ```js + // Function Declaration + function sum(a, b) { + return a + b; + } + ``` +- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created at the right side of the "assignment expression" `=`: + + ```js + // Function Expression + let sum = function(a, b) { + return a + b; + }; + ``` + +The more subtle difference is *when* a function is created by the JavaScript engine. + +**A Function Expression is created when the execution reaches it and is usable only from that moment.** + +Once the execution flow passes to the right side of the assignment `let sum = function…` -- here we go, the function is created and can be used (assigned, called, etc. ) from now on. + +Function Declarations are different. + +**A Function Declaration can be called earlier than it is defined.** + +For example, a global Function Declaration is visible in the whole script, no matter where it is. + +That's due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an "initialization stage". + +And after all Function Declarations are processed, the code is executed. So it has access to these functions. + +For example, this works: + +```js run refresh untrusted +*!* +sayHi("John"); // Hello, John +*/!* + +function sayHi(name) { + alert( `Hello, ${name}` ); +} +``` + +The Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it. + +...If it were a Function Expression, then it wouldn't work: + +```js run refresh untrusted +*!* +sayHi("John"); // error! +*/!* + +let sayHi = function(name) { // (*) no magic any more + alert( `Hello, ${name}` ); +}; +``` + +Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late. + +Another special feature of Function Declarations is their block scope. + +**In strict mode, when a Function Declaration is within a code block, it's visible everywhere inside that block. But not outside of it.** + +For instance, let's imagine that we need to declare a function `welcome()` depending on the `age` variable that we get during runtime. And then we plan to use it some time later. + +If we use Function Declaration, it won't work as intended: + +```js run +let age = prompt("What is your age?", 18); + +// conditionally declare a function +if (age < 18) { + + function welcome() { + alert("Hello!"); + } + +} else { + + function welcome() { + alert("Greetings!"); + } + +} + +// ...use it later +*!* +welcome(); // Error: welcome is not defined +*/!* +``` + +That's because a Function Declaration is only visible inside the code block in which it resides. + +Here's another example: + +```js run +let age = 16; // take 16 as an example + +if (age < 18) { +*!* + welcome(); // \ (runs) +*/!* + // | + function welcome() { // | + alert("Hello!"); // | Function Declaration is available + } // | everywhere in the block where it's declared + // | +*!* + welcome(); // / (runs) +*/!* + +} else { + + function welcome() { + alert("Greetings!"); + } +} + +// Here we're out of curly braces, +// so we can not see Function Declarations made inside of them. + +*!* +welcome(); // Error: welcome is not defined +*/!* +``` + +What can we do to make `welcome` visible outside of `if`? + +The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility. + +This code works as intended: + +```js run +let age = prompt("What is your age?", 18); + +let welcome; + +if (age < 18) { + + welcome = function() { + alert("Hello!"); + }; + +} else { + + welcome = function() { + alert("Greetings!"); + }; + +} + +*!* +welcome(); // ok now +*/!* +``` + +Or we could simplify it even further using a question mark operator `?`: + +```js run +let age = prompt("What is your age?", 18); + +let welcome = (age < 18) ? + function() { alert("Hello!"); } : + function() { alert("Greetings!"); }; + +*!* +welcome(); // ok now +*/!* +``` + + +```smart header="When to choose Function Declaration versus Function Expression?" +As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared. + +That's also better for readability, as it's easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more "eye-catching". + +...But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we've just seen an example), then Function Expression should be used. +``` + +## Summary + +- Functions are values. They can be assigned, copied or declared in any place of the code. +- If the function is declared as a separate statement in the main code flow, that's called a "Function Declaration". +- If the function is created as a part of an expression, it's called a "Function Expression". +- Function Declarations are processed before the code block is executed. They are visible everywhere in the block. +- Function Expressions are created when the execution flow reaches them. + +In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. + +So we should use a Function Expression only when a Function Declaration is not fit for the task. We've seen a couple of examples of that in this chapter, and will see more in the future. diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md new file mode 100644 index 000000000..041db18bc --- /dev/null +++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md @@ -0,0 +1,17 @@ + +```js run +function ask(question, yes, no) { + if (confirm(question)) yes(); + else no(); +} + +ask( + "Do you agree?", +*!* + () => alert("You agreed."), + () => alert("You canceled the execution.") +*/!* +); +``` + +Looks short and clean, right? diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md new file mode 100644 index 000000000..e18c08a83 --- /dev/null +++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md @@ -0,0 +1,17 @@ + +# Rewrite with arrow functions + +Replace Function Expressions with arrow functions in the code below: + +```js run +function ask(question, yes, no) { + if (confirm(question)) yes(); + else no(); +} + +ask( + "Do you agree?", + function() { alert("You agreed."); }, + function() { alert("You canceled the execution."); } +); +``` diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md new file mode 100644 index 000000000..1b6da9bfe --- /dev/null +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -0,0 +1,111 @@ +# Arrow functions, the basics + +There's another very simple and concise syntax for creating functions, that's often better than Function Expressions. + +It's called "arrow functions", because it looks like this: + +```js +let func = (arg1, arg2, ..., argN) => expression +``` + +...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result. + +In other words, it's the shorter version of: + +```js +let func = function(arg1, arg2, ..., argN) { + return expression; +}; +``` + +Let's see a concrete example: + +```js run +let sum = (a, b) => a + b; + +/* This arrow function is a shorter form of: + +let sum = function(a, b) { + return a + b; +}; +*/ + +alert( sum(1, 2) ); // 3 +``` + +As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result. + +- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter. + + For example: + + ```js run + *!* + let double = n => n * 2; + // roughly the same as: let double = function(n) { return n * 2 } + */!* + + alert( double(3) ); // 6 + ``` + +- If there are no arguments, parentheses will be empty (but they should be present): + + ```js run + let sayHi = () => alert("Hello!"); + + sayHi(); + ``` + +Arrow functions can be used in the same way as Function Expressions. + +For instance, to dynamically create a function: + +```js run +let age = prompt("What is your age?", 18); + +let welcome = (age < 18) ? + () => alert('Hello') : + () => alert("Greetings!"); + +welcome(); +``` + +Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. + +They are very convenient for simple one-line actions, when we're just too lazy to write many words. + +## Multiline arrow functions + +The examples above took arguments from the left of `=>` and evaluated the right-side expression with them. + +Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them. + +Like this: + +```js run +let sum = (a, b) => { // the curly brace opens a multiline function + let result = a + b; +*!* + return result; // if we use curly braces, then we need an explicit "return" +*/!* +}; + +alert( sum(1, 2) ); // 3 +``` + +```smart header="More to come" +Here we praised arrow functions for brevity. But that's not all! + +Arrow functions have other interesting features. + +To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter . + +For now, we can already use arrow functions for one-line actions and callbacks. +``` + +## Summary + +Arrow functions are handy for one-liners. They come in two flavors: + +1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. +2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something. diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md new file mode 100644 index 000000000..d0ed0ef08 --- /dev/null +++ b/1-js/02-first-steps/18-javascript-specials/article.md @@ -0,0 +1,284 @@ +# JavaScript specials + +This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments. + +## Code structure + +Statements are delimited with a semicolon: + +```js run no-beautify +alert('Hello'); alert('World'); +``` + +Usually, a line-break is also treated as a delimiter, so that would also work: + +```js run no-beautify +alert('Hello') +alert('World') +``` + +That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance: + +```js run +alert("There will be an error after this message") + +[1, 2].forEach(alert) +``` + +Most codestyle guides agree that we should put a semicolon after each statement. + +Semicolons are not required after code blocks `{...}` and syntax constructs with them like loops: + +```js +function f() { + // no semicolon needed after function declaration +} + +for(;;) { + // no semicolon needed after the loop +} +``` + +...But even if we can put an "extra" semicolon somewhere, that's not an error. It will be ignored. + +More in: . + +## Strict mode + +To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`. + +```js +'use strict'; + +... +``` + +The directive must be at the top of a script or at the beginning of a function body. + +Without `"use strict"`, everything still works, but some features behave in the old-fashion, "compatible" way. We'd generally prefer the modern behavior. + +Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly. + +More in: . + +## Variables + +Can be declared using: + +- `let` +- `const` (constant, can't be changed) +- `var` (old-style, will see later) + +A variable name can include: +- Letters and digits, but the first character may not be a digit. +- Characters `$` and `_` are normal, on par with letters. +- Non-Latin alphabets and hieroglyphs are also allowed, but commonly not used. + +Variables are dynamically typed. They can store any value: + +```js +let x = 5; +x = "John"; +``` + +There are 8 data types: + +- `number` for both floating-point and integer numbers, +- `bigint` for integer numbers of arbitrary length, +- `string` for strings, +- `boolean` for logical values: `true/false`, +- `null` -- a type with a single value `null`, meaning "empty" or "does not exist", +- `undefined` -- a type with a single value `undefined`, meaning "not assigned", +- `object` and `symbol` -- for complex data structures and unique identifiers, we haven't learnt them yet. + +The `typeof` operator returns the type for a value, with two exceptions: +```js +typeof null == "object" // error in the language +typeof function(){} == "function" // functions are treated specially +``` + +More in: and . + +## Interaction + +We're using a browser as a working environment, so basic UI functions will be: + +[`prompt(question, [default])`](mdn:api/Window/prompt) +: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel". + +[`confirm(question)`](mdn:api/Window/confirm) +: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`. + +[`alert(message)`](mdn:api/Window/alert) +: Output a `message`. + +All these functions are *modal*, they pause the code execution and prevent the visitor from interacting with the page until they answer. + +For instance: + +```js run +let userName = prompt("Your name?", "Alice"); +let isTeaWanted = confirm("Do you want some tea?"); + +alert( "Visitor: " + userName ); // Alice +alert( "Tea wanted: " + isTeaWanted ); // true +``` + +More in: . + +## Operators + +JavaScript supports the following operators: + +Arithmetical +: Regular: `* + - /`, also `%` for the remainder and `**` for power of a number. + + The binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too: + + ```js run + alert( '1' + 2 ); // '12', string + alert( 1 + '2' ); // '12', string + ``` + +Assignments +: There is a simple assignment: `a = b` and combined ones like `a *= 2`. + +Bitwise +: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](mdn:/JavaScript/Guide/Expressions_and_Operators#Bitwise) when they are needed. + +Conditional +: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`. + +Logical operators +: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped (not necessary `true`/`false`). Logical NOT `!` converts the operand to boolean type and returns the inverse value. + +Nullish coalescing operator +: The `??` operator provides a way to choose a defined value from a list of variables. The result of `a ?? b` is `a` unless it's `null/undefined`, then `b`. + +Comparisons +: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal: + + ```js run + alert( 0 == false ); // true + alert( 0 == '' ); // true + ``` + + Other comparisons convert to a number as well. + + The strict equality operator `===` doesn't do the conversion: different types always mean different values for it. + + Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else. + + Greater/less comparisons compare strings character-by-character, other types are converted to a number. + +Other operators +: There are few others, like a comma operator. + +More in: , , , . + +## Loops + +- We covered 3 types of loops: + + ```js + // 1 + while (condition) { + ... + } + + // 2 + do { + ... + } while (condition); + + // 3 + for(let i = 0; i < 10; i++) { + ... + } + ``` + +- The variable declared in `for(let...)` loop is visible only inside the loop. But we can also omit `let` and reuse an existing variable. +- Directives `break/continue` allow to exit the whole loop/current iteration. Use labels to break nested loops. + +Details in: . + +Later we'll study more types of loops to deal with objects. + +## The "switch" construct + +The "switch" construct can replace multiple `if` checks. It uses `===` (strict equality) for comparisons. + +For instance: + +```js run +let age = prompt('Your age?', 18); + +switch (age) { + case 18: + alert("Won't work"); // the result of prompt is a string, not a number + break; + + case "18": + alert("This works!"); + break; + + default: + alert("Any value not equal to one above"); +} +``` + +Details in: . + +## Functions + +We covered three ways to create a function in JavaScript: + +1. Function Declaration: the function in the main code flow + + ```js + function sum(a, b) { + let result = a + b; + + return result; + } + ``` + +2. Function Expression: the function in the context of an expression + + ```js + let sum = function(a, b) { + let result = a + b; + + return result; + }; + ``` + +3. Arrow functions: + + ```js + // expression at the right side + let sum = (a, b) => a + b; + + // or multi-line syntax with { ... }, need return here: + let sum = (a, b) => { + // ... + return a + b; + } + + // without arguments + let sayHi = () => alert("Hello"); + + // with a single argument + let double = n => n * 2; + ``` + + +- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function. +- Parameters can have default values: `function sum(a = 1, b = 2) {...}`. +- Functions always return something. If there's no `return` statement, then the result is `undefined`. + +Details: see , . + +## More to come + +That was a brief list of JavaScript features. As of now we've studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript. diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 0776827cd..2723d2303 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,29 +1,52 @@ +<<<<<<< HEAD # Chrome ile Hata Ayıklama +======= +# Debugging in the browser +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Daha karmaşık kodlara geçmeden, hata ayıklama hakkında konuşmamız gerekmekte. +<<<<<<< HEAD Çoğu modern tarayıcı "hata ayıklama"(debugging) özelliğine sahiptir -- bu özel arayüz kod yazarken hata bulunmasını ve düzeltilmesini kolaylaştırır. Geliştirici özellikleri en iyi olan tarayıcı Chrome olduğundan bu tarayıcı ile çalışacağız. ## "Kaynak" paneli +======= +[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on. + +We'll be using Chrome here, because it has enough features, most other browsers have a similar process. + +## The "Sources" panel +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Şu anda sizin kullandığınız Chrome biraz farklı olabilir. Fakat bu panel kesinlikle orada biryerde olmalı +<<<<<<< HEAD - [Örnek Sayfayı](debugging/index.html) Chrome ile açın. - Geliştirici araçlarını `key:F12` (Mac: `key:Cmd+Opt+I`) ile açabilirsiniz. - `kaynak` panelini seçin. +======= +- Open the [example page](debugging/index.html) in Chrome. +- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`). +- Select the `Sources` panel. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer ilk defa bu işlemi yapıyorsanız görmeniz gereken ekran şudur: ![](chrome-open-sources.svg) +<<<<<<< HEAD Sol tarafta bulunan açma kapama butonu size dosyaları gösteren bir tab açar. +======= +The toggler button opens the tab with files. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu panelde `hello.js` i seçtiğinizde aşağıdaki gibi bir ekran görmeniz gerekir. ![](chrome-tabs.svg) +<<<<<<< HEAD Bu bölüm üçe ayrılmıştır: 1. **Dosya Gezgini**: Html, javascript, css ve diğer dosyalar görseller de dahil olmak üzere açılan sayfaya iat olan kaynakları gösterir. Chrome eklentileri de burada yer alabilir. 2. **Kod Editörü** burası ise kaynak kodu gösterir. @@ -32,6 +55,15 @@ Bu bölüm üçe ayrılmıştır: Şimdi geliştirici araçlarının sol köşesinde bulunan açma kapama bölümünü kullanarak kendinize biraz yer açabilirsiniz. ## Konsol +======= +The Sources panel has 3 parts: + +1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. +2. The **Code Editor** pane shows the source code. +3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon. + +Now you could click the same toggler again to hide the resources list and give the code some space. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer `Esc` tuşuna basarsanız altta `konsol` açılır. Buraya komutları yazıp `key:Enter` ile çalıştırabilirsiniz. @@ -41,7 +73,11 @@ Komut çalıştıktan sonra sonucunu hemen altında gösterir. ![](chrome-sources-console.svg) +<<<<<<< HEAD ## Kesme Noktası +======= +![](chrome-sources-console.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 [Örnek Kod](debugging/index.html) içerisinde ne olduğunu incelenecek olursa. `hello.js` içerisinde `4.` satıra tıklayın. Evet `4` e tıklayın koda değil. @@ -51,15 +87,27 @@ Aşağıdaki gibi görünmeli. (tıkladığınız yerler mavi olmalı) ![](chrome-sources-breakpoint.svg) +<<<<<<< HEAD *kesme noktası* JavaScript çalışırken çalışmasını o noktada durdurmasını sağlar. +======= +![](chrome-sources-breakpoint.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Kod durdurulduğunda, o anki değişken değerlerini inceleyebilir veya konsoldan kod çalıştırabilirsiniz. Diğer bir deyişle *hata ayıklayabilirsiniz* Oluşturulan bu kesme noktalarını sağ taraftaki panelde list halinde görmek mümkündür. Bu farklı dosyalarda eğer kesme noktaları varsa bunları görme açısından yararlı bir özelliktir. Eğer bir çok dosyada kesme noktası varsa bu panel vasıtasıyla: +<<<<<<< HEAD - İstenilen herhangi bir kesme noktasına doğrudan üstüne tıklayarak gidilebilir. - Geçici olarak kesme noklarını devre dışı bırakılabilir. - Sağ tıklayıp Sil'e tıkladığınızda bu kesme noktalarını silebilirsiniz. +======= +We can always find a list of breakpoints in the right panel. That's useful when we have many breakpoints in various files. It allows us to: +- Quickly jump to the breakpoint in the code (by clicking on it in the right panel). +- Temporarily disable the breakpoint by unchecking it. +- Remove the breakpoint by right-clicking and selecting Remove. +- ...And so on. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```smart header="Koşullu kesme noktaları" Satır sayılarının yazıldığı yere sağ tıklayarak *Koşullu Kesme Noktası* oluşturabilirsiniz. Eğer ifadeniz doğruysa bu kesme noktası çalışır ve JavaScript çalışması durur. @@ -69,7 +117,11 @@ Belirli değişken değerlerine veya parametre değerlerine göre çalışma dur ## Debugger komutu +<<<<<<< HEAD Ayrıca `debugger` kodu ile de hata ayıklama işlemini yapmak mümkündür. +======= +We can also pause the code by using the `debugger` command in it, like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function merhaba(adi) { @@ -89,11 +141,19 @@ Bu kod, siz editörde kod yazarken tekrar tarayıcıya geçip, kodu bulup kesme Yaptığımız örnekte `merhaba()` sayfa yüklenirken çalışmaktadır. Bundan dolayı hata ayıklayıcıyı çalıştırmanın en kolay yolu sayfayı yenilemektir. Bunun için `key:F5` (Windows, Linux) veya `key:Cmd+R` ile sayfanın yenileyiniz. +<<<<<<< HEAD Kesme noktasını kodda belirlediğinizden dolayı 4. satırda JavaScript çalışmayı durduracaktır. +======= +In our example, `hello()` is called during the page load, so the easiest way to activate the debugger (after we've set the breakpoints) is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac). +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ![](chrome-sources-debugger-pause.svg) +<<<<<<< HEAD Lütfen bilgilerin görüneceği dropdownları sağ panelden açınız. Bu bölümler oklar ile gösterilmiştir. Bu bölümler kesme anındaki değişkenlerin değerleri ve kod durumunu incelemeye yarar. +======= +![](chrome-sources-debugger-pause.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 1. **`Watch` -- herhangi bir ifadenin o anki değerini gösterir.** `+` işaretine basarak ifade girebilirsiniz. Bu ifadenin değerini kod ayıklayıcı her halükarda gösterir. Kod çalışırken bu değerleri her adımda kontrol eder ve sonucunu yazar. @@ -109,7 +169,12 @@ Lütfen bilgilerin görüneceği dropdownları sağ panelden açınız. Bu böl `Global` global değişkenler. Yani fonksiyon dışında tanımlanmış değerleri görebilirsiniz. +<<<<<<< HEAD Bunların yanında `this` anahtar kelimesi de vardır. Fakat bu konu üzerinden geçmedik. +======= + If you click on a stack item (e.g. "anonymous"), the debugger jumps to the corresponding code, and all its variables can be examined as well. +3. **`Scope` -- current variables.** +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Çalışma izini sürme @@ -121,12 +186,20 @@ Sağ panelin üstünde sadece bu işe has butonlar bulunmaktadır. -- çalışmaya devam et, `key:F8`. : Çalışmaya devam edilmesini sağlar. Eğer ayrı bir kesme noktası yoksa çalışma kod bitene kadar devam eder. +<<<<<<< HEAD Üzerine bir defa tıkladığınızda aşağıdaki gibi olur. ![](chrome-sources-debugger-trace-1.svg) +======= +There are buttons for it at the top of the right panel. Let's engage them. + + -- "Resume": continue the execution, hotkey `key:F8`. +: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Çalışmaya devam edildi, `yaz()` fonksiyonunun içerisinde tekrar durdu. Dikkat ederseniz "Call stack" çağrısını bu işlem bir artırdı. +<<<<<<< HEAD -- adım at (bir sonraki komutu çalıştır), fakat *fonksiyonun içine girme*, `key:F10`. : Eğer buna şimdi tıklarsanız `alert` çalışır. Önemli olan şey `alert` yerine farklı bir fonksiyon da olsa çalışma bu fonksiyonun içinde ne yaptığına önem vermez ve "üstünden atlar". @@ -143,33 +216,100 @@ Sağ panelin üstünde sadece bu işe has butonlar bulunmaktadır. ```smart header="Buradan devam edin" Satır numaralarına sağ tıklayıp "Buradan devam et" özelliği ile kodu bir kaç adım ileriden devam etmesini sağlayabilirsiniz. Böylece yeniden bir kesme noktası oluşturmanıza gerek kalmaz. +======= + ![](chrome-sources-debugger-trace-1.svg) + + The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call Stack" at the right. It has increased by one more call. We're inside `say()` now. + + -- "Step": run the next command, hotkey `key:F9`. +: Run the next statement. If we click it now, `alert` will be shown. + + Clicking this again and again will step through all script statements one by one. + + -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`. +: Similar to the previous "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own. + + The "Step" command goes into it and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals. + + The execution is then paused immediately after that function. + + That's good if we're not interested to see what happens inside the function call. + + -- "Step into", hotkey `key:F11`. +: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet. + + For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details. + + -- "Step out": continue the execution till the end of the current function, hotkey `key:Shift+F11`. +: Continue the execution and stop it at the very last line of the current function. That's handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible. + + -- enable/disable all breakpoints. +: That button does not move the execution. Just a mass on/off for breakpoints. + + -- enable/disable automatic pause in case of an error. +: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. + +```smart header="Continue to here" +Right click on a line of code opens the context menu with a great option called "Continue to here". + +That's handy when we want to move multiple steps forward to the line, but we're too lazy to set a breakpoint. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` ## Loglama +<<<<<<< HEAD Konsola basit birşey yazdıracağınız zaman `console.log` fonksiyonunu kullanabilirsiniz. Aşağıdaki örnekte ekrana 0 ile 4 arasındaki değerler yazılır. +======= +To output something to console from our code, there's `console.log` function. + +For instance, this outputs values from `0` to `4` to console: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run // çalışmasını görmek için lütfen geliştirici konsolunu açınız. for (let i = 0; i < 5; i++) { +<<<<<<< HEAD console.log("deger", i); +======= + console.log("value,", i); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } ``` Normal kullanıcı bu çıktıyı ekranda göremez, bunun için geliştirici konsoluna girmesi gerekir. +<<<<<<< HEAD Eğer kodunuzun içerisinde yeterli derecede log varsa hata ayıklamanıza gerek yoktur. +======= +Regular users don't see that output, it is in the console. To see it, either open the Console panel of developer tools or press `key:Esc` while in another panel: that opens the console at the bottom. + +If we have enough logging in our code, then we can see what's going on from the records, without the debugger. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet +<<<<<<< HEAD Bahsettiğimiz gibi çalışan kodu durdurmanın üç farklı yönü vardır. Bunlar: 1. Kesme noktası ile durdurma 2. `debugger` kelimesi ile durdurma 3. Eğer hata olduğunda aç/kapa butonu aktifse çalışmada hata olduğunda durdurma Bunların sonucunda çalışmada ne gibi hatalar olduğunu görebilirsiniz. +======= +As we can see, there are three main ways to pause a script: +1. A breakpoint. +2. The `debugger` statements. +3. An error (if dev tools are open and the button is "on"). + +When paused, we can debug - examine variables and trace the code to see where the execution goes wrong. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bunlara ek olarak adresinden daha geniş ve yeni bilgilere ulaşabilirsiniz. Bu bölümdeki bilgiler sizin hata ayıklama işlemine başlamanızda yardımcı olacaktır. Fakat tarayıcı ile alakalı çok fazla işlem yapıyorsanız bu durumda geliştirici derinlemesine incelemeniz gerekmektedir. +<<<<<<< HEAD Tabi bunun yanında deneme yanılma yöntemiy ile de geliştirici araçlarının özelliklerini keşfedebilirsiniz. Unutmayın sağ tıklayarak farklı bölgelerde farklı fonksiyonları görebilirsiniz. +======= +Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click and context menus! +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/03-code-quality/01-debugging-chrome/head.html b/1-js/03-code-quality/01-debugging-chrome/head.html index f219b0af1..615326c08 100644 --- a/1-js/03-code-quality/01-debugging-chrome/head.html +++ b/1-js/03-code-quality/01-debugging-chrome/head.html @@ -1,8 +1,8 @@ diff --git a/1-js/03-code-quality/01-debugging-chrome/largeIcons.svg b/1-js/03-code-quality/01-debugging-chrome/largeIcons.svg new file mode 100644 index 000000000..83303365b --- /dev/null +++ b/1-js/03-code-quality/01-debugging-chrome/largeIcons.svg @@ -0,0 +1,1472 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + b + c + d + e + f + g + h + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + + + + + + + + + + + + + + + + + + + diff --git a/1-js/03-code-quality/01-debugging-chrome/toolbarButtonGlyphs.svg b/1-js/03-code-quality/01-debugging-chrome/toolbarButtonGlyphs.svg deleted file mode 100644 index 5bdf20a83..000000000 --- a/1-js/03-code-quality/01-debugging-chrome/toolbarButtonGlyphs.svg +++ /dev/null @@ -1,1035 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md index 610d9be86..a38a507b2 100644 --- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md +++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md @@ -10,12 +10,21 @@ function ust(x,n) // <- argümanlar arasında boşluk bulunmamakta. return sonuc; } +<<<<<<< HEAD let x=prompt("x?",''), n=prompt("n?",'') // <-- teknik olarka mümkün, // fakat iki satır yapmak daha iyi, ayrıca boşluk ve ; kullanılmamış. if (n<0) // <- (n < 0) olmalı, arada boşluk kullanılmamış { // <- süslü parantez yeni satırda // Aşağıdaki uzun metin iki satırda yazılsa daha iyi olabilir alert(`${n} üssü alınamadı, kullandığınız sayı 0'dan küçük olamaz. Lütfen doğal sayıları kullanınız.`); +======= +let x=prompt("x?",''), n=prompt("n?",'') // <-- technically possible, +// but better make it 2 lines, also there's no spaces and missing ; +if (n<=0) // <- no spaces inside (n <= 0), and should be extra line above it +{ // <- figure bracket on a separate line + // below - long lines can be split into multiple lines for improved readability + alert(`Power ${n} is not supported, please enter an integer number greater than zero`); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } else // <- tek satırda "} else {" şeklinde kullanılabilir. { @@ -39,9 +48,15 @@ function ust(x, n) { let x = prompt("x?", ""); let n = prompt("n?", ""); +<<<<<<< HEAD if (n < 0) { alert(`${n} üssü alınamadı, kullandığınız sayı 0'dan küçük olamaz. Lütfen doğal sayıları kullanınız.`); +======= +if (n <= 0) { + alert(`Power ${n} is not supported, + please enter an integer number greater than zero`); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } else { alert( ust(x, n) ); } diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index 225b96c3e..7c2b27e39 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -2,15 +2,24 @@ Kodunuz olabildiğince okunaklı ve temiz olmalıdır. +<<<<<<< HEAD Aslında bu programlama sanatıdır -- karmaşık bir görevi alın ve bunu olabildiğince doğru ve okunaklı bir şekile getirin. +======= +That is actually the art of programming -- to take a complex task and code it in a way that is both correct and human-readable. A good code style greatly assists in that. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Buna yardımcı olan bir şey de iyi kodlama stilidir. +<<<<<<< HEAD ## Yazım Kodlar için yazımış bir kopya kağıdı(detayları aşağıda): +======= +Here is a cheat sheet with some suggested rules (see below for more details): + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ![](code-style.svg) + +![](lexical-environment-simple.svg) + +During the function call we have two Lexical Environments: the inner one (for the function call) and the outer one (global): + +- The inner Lexical Environment corresponds to the current execution of `say`. It has a single property: `name`, the function argument. We called `say("John")`, so the value of the `name` is `"John"`. +- The outer Lexical Environment is the global Lexical Environment. It has the `phrase` variable and the function itself. + +The inner Lexical Environment has a reference to the `outer` one. + +**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the global one.** + +If a variable is not found anywhere, that's an error in strict mode (without `use strict`, an assignment to a non-existing variable creates a new global variable, for compatibility with old code). + +In this example the search proceeds as follows: + +- For the `name` variable, the `alert` inside `say` finds it immediately in the inner Lexical Environment. +- When it wants to access `phrase`, then there is no `phrase` locally, so it follows the reference to the outer Lexical Environment and finds it there. + +![lexical environment lookup](lexical-environment-simple-lookup.svg) + + +### Step 4. Returning a function + +Let's return to the `makeCounter` example. + +```js +function makeCounter() { + let count = 0; + + return function() { + return count++; + }; +} + +let counter = makeCounter(); ``` +At the beginning of each `makeCounter()` call, a new Lexical Environment object is created, to store variables for this `makeCounter` run. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + +So we have two nested Lexical Environments, just like in the example above: + +<<<<<<< HEAD Burada bir fonksiyon ifadesi yaratıldı ve doğrudan çağırıldı. Kod hemen çalışır ve kendine ait değişkenlere sahiptir. Fonksiyon ifadesi parantez içine alınmıştır `(function {...})`, çünkü eğer JavaScript ana kod akışında `"function"` görürse bunu Fonksiyon Tanımı olarak algılar. Fakat Fonksiyon Tanımının ismi olmalıdır ve ismi olmadığından dolayı bu kod parantez içine alınmaz ise hata verir. @@ -550,6 +791,66 @@ Sözcüksel Ortam objeleri aynı normal değerler gibi hafıza yönetimine konu let deger = 123; function g() { alert(deger); } +======= +![](closure-makecounter.svg) + +What's different is that, during the execution of `makeCounter()`, a tiny nested function is created of only one line: `return count++`. We don't run it yet, only create. + +All functions remember the Lexical Environment in which they were made. Technically, there's no magic here: all functions have the hidden property named `[[Environment]]`, that keeps the reference to the Lexical Environment where the function was created: + +![](closure-makecounter-environment.svg) + +So, `counter.[[Environment]]` has the reference to `{count: 0}` Lexical Environment. That's how the function remembers where it was created, no matter where it's called. The `[[Environment]]` reference is set once and forever at function creation time. + +Later, when `counter()` is called, a new Lexical Environment is created for the call, and its outer Lexical Environment reference is taken from `counter.[[Environment]]`: + +![](closure-makecounter-nested-call.svg) + +Now when the code inside `counter()` looks for `count` variable, it first searches its own Lexical Environment (empty, as there are no local variables there), then the Lexical Environment of the outer `makeCounter()` call, where it finds and changes it. + +**A variable is updated in the Lexical Environment where it lives.** + +Here's the state after the execution: + +![](closure-makecounter-nested-call-2.svg) + +If we call `counter()` multiple times, the `count` variable will be increased to `2`, `3` and so on, at the same place. + +```smart header="Closure" +There is a general programming term "closure", that developers generally should know. + +A [closure](https://en.wikipedia.org/wiki/Closure_(computer_programming)) is a function that remembers its outer variables and can access them. In some languages, that's not possible, or a function should be written in a special way to make it happen. But as explained above, in JavaScript, all functions are naturally closures (there is only one exception, to be covered in ). + +That is: they automatically remember where they were created using a hidden `[[Environment]]` property, and then their code can access outer variables. + +When on an interview, a frontend developer gets a question about "what's a closure?", a valid answer would be a definition of the closure and an explanation that all functions in JavaScript are closures, and maybe a few more words about technical details: the `[[Environment]]` property and how Lexical Environments work. +``` + +## Garbage collection + +Usually, a Lexical Environment is removed from memory with all the variables after the function call finishes. That's because there are no references to it. As any JavaScript object, it's only kept in memory while it's reachable. + +However, if there's a nested function that is still reachable after the end of a function, then it has `[[Environment]]` property that references the lexical environment. + +In that case the Lexical Environment is still reachable even after the completion of the function, so it stays alive. + +For example: + +```js +function f() { + let value = 123; + + return function() { + alert(value); + } +} + +let g = f(); // g.[[Environment]] stores a reference to the Lexical Environment +// of the corresponding f() call +``` + +Please note that if `f()` is called many times, and resulting functions are saved, then all corresponding Lexical Environment objects will also be retained in memory. In the code below, all 3 of them: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 *!* return g; @@ -559,14 +860,25 @@ Sözcüksel Ortam objeleri aynı normal değerler gibi hafıza yönetimine konu let g = f(); // g ulaşılabilir ise, dıştaki sözcük ortamı canlı kalır. ``` +<<<<<<< HEAD - Eğer `f()` birçok defa çağırılırsa ve sonuçları kaydedilirse bu kaydedilen Sözcüksel Ortam objeleri de hafızada kalır. Aşağıdaki 3 farklı kodda daha açık bir şekilde gösterilmiştir. +======= +// 3 functions in array, every one of them links to Lexical Environment +// from the corresponding f() run +let arr = [f(), f(), f()]; +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function f() { let deger = Math.random(); +<<<<<<< HEAD return function() { alert(deger); }; } +======= +In the code below, after the nested function is removed, its enclosing Lexical Environment (and hence the `value`) is cleaned from memory: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 // 3 functions in array, every of them links to Lexical Environment // Dizideki 3 fonksiyon da kendine ait sözcüksel ortama sahiptirler. @@ -574,6 +886,7 @@ Sözcüksel Ortam objeleri aynı normal değerler gibi hafıza yönetimine konu let arr = [f(), f(), f()]; ``` +<<<<<<< HEAD - Sözcüksel Ortam objesi erişim kalmayınca ölür. Bu iç içe fonksiyonların referansı kalmadığında meydana gelir. Aşağıdaki kodda `g` erişilemez olduğunda `value`'da hafızadan silinir. ```js function f() { @@ -583,6 +896,14 @@ Sözcüksel Ortam objeleri aynı normal değerler gibi hafıza yönetimine konu return g; } +======= + return function() { + alert(value); + } +} + +let g = f(); // while g function exists, the value stays in memory +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 let g = f(); // g canlı olursa ona karşılık gelen Sözcüksel Ortam'da hayatta kalır. @@ -594,9 +915,13 @@ Sözcüksel Ortam objeleri aynı normal değerler gibi hafıza yönetimine konu Görüldüğü üzere, teoride bir fonksiyon hayatta olduğun sürece onun dışındaki ona bağlı değişkenler de hayatta kalır. +<<<<<<< HEAD Pratikte ise, JavaScript motoru bunu optimize eder. Değişken kullanımını analiz eder ve eğer dışarıdaki fonksiyonun kullanılmadığı açık ise silinir. +======= +But in practice, JavaScript engines try to optimize that. They analyze variable usage and if it's obvious from the code that an outer variable is not used -- it is removed. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -**An important side effect in V8 (Chrome, Opera) is that such variable will become unavailable in debugging.** +**An important side effect in V8 (Chrome, Edge, Opera) is that such variable will become unavailable in debugging.** **Bunun V8 ( Chrome, Opera)'daki yan etkisi ise böyle değişkenlerin debugging sırasında da görünememesidir. @@ -609,7 +934,11 @@ function f() { let deger = Math.random(); function g() { +<<<<<<< HEAD debugger; // konsolda: alert(deger) yazdırın; Böyle bir değişken bulunamamktadır. +======= + debugger; // in console: type alert(value); No such variable! +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } return g; @@ -630,7 +959,7 @@ function f() { let deger = "En yakın değer"; function g() { - debugger; // in console: type alert( value ); Surprise! + debugger; // in console: type alert(value); Surprise! } return g; @@ -640,6 +969,7 @@ let g = f(); g(); ``` +<<<<<<< HEAD ```warn header="Görüşmek üzere!" V8'in bu özelliğini bilmekte fayda var. Eğer Chrome/Opera ile ayıklama yapıyorsanız, er geç bu özellikle tanışacaksınız. @@ -647,3 +977,8 @@ V8'in bu özelliğini bilmekte fayda var. Eğer Chrome/Opera ile ayıklama yapı Bu ayıklayıcının(debugger) bir problemi değil, V8 motorunun bir özelliğidir. Belki ileride bu özellik değişebilir. Bu sayfayadaki örneği çalıştırarak her zaman kontrol edebilirsiniz. ``` +======= +This feature of V8 is good to know. If you are debugging with Chrome/Edge/Opera, sooner or later you will meet it. + +That is not a bug in the debugger, but rather a special feature of V8. Perhaps it will be changed sometime. You can always check for it by running the examples on this page. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg b/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg new file mode 100644 index 000000000..97f76e569 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg @@ -0,0 +1 @@ +outernullexecution startphrase: <uninitialized> say: function... \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg new file mode 100644 index 000000000..b9060bc8a --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg @@ -0,0 +1 @@ +null[[Environment]]makeCounter: function counter: undefinedcount: 0outerouter \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg new file mode 100644 index 000000000..3e4206ca6 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg @@ -0,0 +1 @@ +count: 1<empty>nullouterouteroutermakeCounter: function counter: functionmodified here \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg new file mode 100644 index 000000000..e1bb8cc8f --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg @@ -0,0 +1 @@ +count: 0<empty>nullouterouteroutermakeCounter: function counter: function \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-makecounter.svg b/1-js/06-advanced-functions/03-closure/closure-makecounter.svg new file mode 100644 index 000000000..2a1c4a729 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-makecounter.svg @@ -0,0 +1 @@ +makeCounter: function counter: undefinedcount: 0nullglobal LexicalEnvironmentLexicalEnvironment of makeCounter() callouterouter \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg b/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg new file mode 100644 index 000000000..741c05448 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg @@ -0,0 +1 @@ +phrase: "Bye"phrase: "Hello"phrase: undefinedphrase: <uninitialized>outernullexecution start \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg b/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg new file mode 100644 index 000000000..674437196 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg @@ -0,0 +1 @@ +functionUser(name){this.sayHi=function(){alert(name);};}letuser=newUser("John");user.sayHi(); \ No newline at end of file diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md index 6f08c2648..bbcc26be1 100644 --- a/1-js/06-advanced-functions/04-var/article.md +++ b/1-js/06-advanced-functions/04-var/article.md @@ -1,11 +1,24 @@ +<<<<<<< HEAD # Eski tip "var" +======= +# The old "var" + +```smart header="This article is for understanding old scripts" +The information in this article is useful for understanding old scripts. + +That's not how we write new code. +``` + +In the very first chapter about [variables](info:variables), we mentioned three ways of variable declaration: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 İlk bölümde [degiskenler](info:variables) altında üç çeşit değişken tanımlama yöntemi olduğundan bahsedilmişti. 1. `let` 2. `const` 3. `var` +<<<<<<< HEAD `let` ve `const` Sözcüksel Ortam anlamında birbiri ile tam olarak aynıdır. Fakat `var` bunlardan çok farklıdır. Bunun dilin ilk oluşmaya başladığı zamanlara dayanır. Genelde modern stilde pek kullanılmazlar fakat yine de arada sırada görebilirsiniz. @@ -27,10 +40,39 @@ alert(terim); // Hata! terim tanımlı değil. ``` ...Fakat farklılık tam da burada ortaya çıkar. +======= +The `var` declaration is similar to `let`. Most of the time we can replace `let` by `var` or vice-versa and expect things to work: + +```js run +var message = "Hi"; +alert(message); // Hi +``` + +But internally `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones. + +If you don't plan on meeting such scripts you may even skip this chapter or postpone it. + +On the other hand, it's important to understand differences when migrating old scripts from `var` to `let`, to avoid odd errors. + +## "var" has no block scope + +Variables, declared with `var`, are either function-scoped or global-scoped. They are visible through blocks. + +For instance: + +```js run +if (true) { + var test = true; // use "var" instead of "let" +} +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## "var"'ın blok kapsamı yoktur +<<<<<<< HEAD `var` ya fonksiyon içinde yada globalde tanımlanır, diğer türlü tüm bloklar içerisinden erişilebilir. +======= +As `var` ignores code blocks, we've got a global variable `test`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin: @@ -40,7 +82,11 @@ if (true) { } *!* +<<<<<<< HEAD alert(test); // true, değişken if'ten sonra da varlığına devam etti. +======= +alert(test); // ReferenceError: test is not defined +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* ``` Eğer 2. satırda `let test` kullanılsaydı `alert` içerisinde görünür olmazdır. Fakat `var` kod bloğunu görmezden gelir. Bundan dolayı global bir `test` değişkeni olmuş olur. @@ -48,12 +94,22 @@ Eğer 2. satırda `let test` kullanılsaydı `alert` içerisinde görünür olma Aynı şekilde döngüler için de `var` döngünün dışında da erişilebilirdir: ```js +<<<<<<< HEAD for(var i = 0; i < 10; i++) { +======= +for (var i = 0; i < 10; i++) { + var one = 1; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 // ... } *!* +<<<<<<< HEAD alert(i); // 10,"i" döngüden sonra görülebilirdir, evrensel değişken olarak çalışır. +======= +alert(i); // 10, "i" is visible after loop, it's a global variable +alert(one); // 1, "one" is visible after loop, it's a global variable +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* ``` @@ -68,6 +124,7 @@ function selamVer() { alert(terim); // çalışıyor } +<<<<<<< HEAD selamVer(); alert(terim); // Hata: terim tanımlı değildir. ``` @@ -75,6 +132,35 @@ alert(terim); // Hata: terim tanımlı değildir. Eğer `if`, `for`'a rağmen çalışan `var` değişkenleri görürseniz bunun nedeni önceden JavaScript'te blokların Sözcüksel Ortama dahil olmamasındandır. ## "var" fonksiyon çalışmaya başladığında işlenir. +======= +sayHi(); +alert(phrase); // ReferenceError: phrase is not defined +``` + +As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript, blocks had no Lexical Environments, and `var` is a remnant of that. + +## "var" tolerates redeclarations + +If we declare the same variable with `let` twice in the same scope, that's an error: + +```js run +let user; +let user; // SyntaxError: 'user' has already been declared +``` + +With `var`, we can redeclare a variable any number of times. If we use `var` with an already-declared variable, it's just ignored: + +```js run +var user = "Pete"; + +var user = "John"; // this "var" does nothing (already declared) +// ...it doesn't trigger an error + +alert(user); // John +``` + +## "var" variables can be declared below their use +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `var` tanımları fonksiyon ( veya script ) çalıştığında tanımlanır. @@ -127,7 +213,11 @@ Bundan dolayı yukarıdaki örnekte `if(false)` hiç bir zaman çalışmayacakt **Tanımlar yükseltilir fakat atamalar yükseltilmez** +<<<<<<< HEAD Bir örnekle göstermek gerekirse: +======= +That's best demonstrated with an example: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function selamVer() { @@ -165,15 +255,94 @@ selamVer(); Tüm `var` tanımları fonksiyon başladığında işlendiğinden dolayı, istenildiği yerlere bu değişkenlere erişim bulunmaktadır. Fakat değişkenler atama yapılana kadar tanımsızdır ( undefined ). +<<<<<<< HEAD Yukarıdaki her iki `alert` örneği de hatasız çalışmaktadır çünkü `terim` mevcuttur. Değeri atanmadığından `undefined` göstermiştir. +======= +In both examples above, `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`. + +## IIFE + +In the past, as there was only `var`, and it has no block-level visibility, programmers invented a way to emulate it. What they did was called "immediately-invoked function expressions" (abbreviated as IIFE). + +That's not something we should use nowadays, but you can find them in old scripts. + +An IIFE looks like this: + +```js run +(function() { + + var message = "Hello"; + + alert(message); // Hello + +})(); +``` + +Here, a Function Expression is created and immediately called. So the code executes right away and has its own private variables. + +The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript engine encounters `"function"` in the main code, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error: + +```js run +// Tries to declare and immediately call a function +function() { // <-- SyntaxError: Function statements require a function name + + var message = "Hello"; + + alert(message); // Hello + +}(); +``` + +Even if we say: "okay, let's add a name", that won't work, as JavaScript does not allow Function Declarations to be called immediately: + +```js run +// syntax error because of parentheses below +function go() { + +}(); // <-- can't call Function Declaration immediately +``` + +So, the parentheses around the function is a trick to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression: it needs no name and can be called immediately. + +There exist other ways besides parentheses to tell JavaScript that we mean a Function Expression: + +```js run +// Ways to create IIFE + +(function() { + alert("Parentheses around the function"); +}*!*)*/!*(); + +(function() { + alert("Parentheses around the whole thing"); +}()*!*)*/!*; + +*!*!*/!*function() { + alert("Bitwise NOT operator starts the expression"); +}(); + +*!*+*/!*function() { + alert("Unary plus starts the expression"); +}(); +``` + +In all the above cases we declare a Function Expression and run it immediately. Let's note again: nowadays there's no reason to write such code. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet `var`'ın iki tane ana farklılığı mevcuttur: +<<<<<<< HEAD 1. Değişkenlerin blok limiti yoktur. En düşük fonksiyon içerisinden görünebilirler. Yani aynı fonksiyon içerisinde farklı bir bloğun içinde yazılsa bile fonksiyon içinden erişilebilmektedir. 2. Değişkenlerin tanımlanması fonksiyon başladığında gerçekleşir. Evrensel obje söz konusu olduğunda bir farklılık bulunmaktadır bunu bir sonraki bölümde göreceğiz. +======= +1. `var` variables have no block scope, their visibility is scoped to current function, or global, if declared outside function. +2. `var` declarations are processed at function start (script start for globals). + +There's one more very minor difference related to the global object, that we'll cover in the next chapter. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu farklılıklar aslında kötüdür. Öncelikle blok seviyesinde değişken yaratılmamaktadır. "Yükseltme" olayı hataya neden olabilmektedir. Bundan dolayı yeni kodlarda `var` çok nadir olarak kullanılır. \ No newline at end of file diff --git a/1-js/06-advanced-functions/05-global-object/article.md b/1-js/06-advanced-functions/05-global-object/article.md index 323f2137b..232096ff1 100644 --- a/1-js/06-advanced-functions/05-global-object/article.md +++ b/1-js/06-advanced-functions/05-global-object/article.md @@ -1,14 +1,25 @@ # Evrensel Objeler +<<<<<<< HEAD JavaScript dili yazılırken "evren obje" diye bir obje fikri vardı. Bu obje tüm değişken ve fonksiyonları içinde barındırark tarayıcıda bulunan kodların evrensel obje yardımıyla değişkenleri paylaşabileceği düşünülmüştü. +======= +The global object provides variables and functions that are available anywhere. By default, those that are built into the language or the environment. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Tabi o zamandan beri JavaScript çok değişti, artık evrensel obje göze batar oldu. Modern JavaScript'te bu objenin yerini module yapısı aldı. +<<<<<<< HEAD Global obje hala dil içerisinde yer almaktadır. +======= +Recently, `globalThis` was added to the language, as a standardized name for a global object, that should be supported across all environments. It's supported in all major browsers. + +We'll use `window` here, assuming that our environment is a browser. If your script may run in other environments, it's better to use `globalThis` instead. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Tarayıcı için bu "window" ve NodeJs için ise "global"'dir. Diğer ortamlar da kendine ait evrensel objelere sahiptirler. +<<<<<<< HEAD İki şeyi yapmaktadır: 1. Dil dahilindeki fonksiyon ve değişkenlere erişim sağlar. @@ -16,6 +27,15 @@ Tarayıcı için bu "window" ve NodeJs için ise "global"'dir. Diğer ortamlar d ```js run alert("Merhaba"); +======= +```js run +alert("Hello"); +// is the same as +window.alert("Hello"); +``` + +In a browser, global functions and variables declared with `var` (not `let/const`!) become the property of the global object: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 // aynısı window.alert("Merhaba"); @@ -24,6 +44,7 @@ Tarayıcı için bu "window" ve NodeJs için ise "global"'dir. Diğer ortamlar d 2. Global `var` değişkeni tanımlamaya olanak tanır. `window` özellikleri ile okuma ve yazma sağlanabilir. Örneğin +<<<<<<< HEAD ```js untrusted run no-strict refresh var selam = "Merhaba"; @@ -31,6 +52,13 @@ Tarayıcı için bu "window" ve NodeJs için ise "global"'dir. Diğer ortamlar d function selamVer() { alert(selam); } +======= +The same effect have function declarations (statements with `function` keyword in the main code flow, not function expressions). + +Please don't rely on that! This behavior exists for compatibility reasons. Modern scripts use [JavaScript modules](info:modules) where such a thing doesn't happen. + +If we used `let` instead, such thing wouldn't happen: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 // window'dan okunabilir alert( window.terim ); // Merhaba (global var) @@ -52,6 +80,7 @@ alert(window.kullanici); // tanımsız, let ile tanımlama yapılamaz. alert("kullanici" in window); // false ``` +<<<<<<< HEAD ```smart header="Global Obje global ortam kaydı değildir" ECMAScript ES-2015 öncesi `let/const` değişkenleri bulunmamaktaydı, sadece `var` değişkeni vardı. Global objeler global ortam kaydı olarak kullanılıyordu. @@ -163,6 +192,9 @@ Bazen, `this`'in değeri tamamen evrensel obje olur. Bu çok nadir de olsa bazı ``` Tanım gereği, `this` bu durumda evrensel obje olmalı, Node.JS ortamında olmasa bile `this` evrensel objedir. Bu eski kodlar ile uyumluluk amacıyladır, sıkı modda `this` tanımsız olabilir. +======= +That said, using global variables is generally discouraged. There should be as few global variables as possible. The code design where a function gets "input" variables and produces certain "outcome" is clearer, less prone to errors and easier to test than if it uses outer or global variables. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Using for polyfills @@ -190,7 +222,7 @@ if (!window.Promise) { That includes JavaScript built-ins, such as `Array` and environment-specific values, such as `window.innerHeight` -- the window height in the browser. - The global object has a universal name `globalThis`. - ...But more often is referred by "old-school" environment-specific names, such as `window` (browser) and `global` (Node.js). As `globalThis` is a recent proposal, it's not supported in non-Chromium Edge (but can be polyfilled). + ...But more often is referred by "old-school" environment-specific names, such as `window` (browser) and `global` (Node.js). - We should store values in the global object only if they're truly global for our project. And keep their number at minimum. - In-browser, unless we're using [modules](info:modules), global functions and variables declared with `var` become a property of the global object. - To make our code future-proof and easier to understand, we should access properties of the global object directly, as `window.x`. diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md index 453be5a31..2671fd579 100644 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md +++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md @@ -6,9 +6,15 @@ importance: 5 `sayacUret()` kodunu değiştirerek sayacın azaltılabilir ve ayarlanabilir olmasını sağlayınız: +<<<<<<< HEAD - `sayac()` bir sonraki sayıyı döndürmelidir(eskisinde olduğu gibi) - `sayac.set(deger)` `sayac` degerini `deger`e eşlemelidir. - `sayac.azalt(deger)` `sayac` degerini bir azaltmalıdır. +======= +- `counter()` should return the next number (as before). +- `counter.set(value)` should set the counter to `value`. +- `counter.decrease()` should decrease the counter by 1. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 İzole edilmiş koda bakarak tamamen nasıl kullanıldığını görebilirsiniz diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js new file mode 100644 index 000000000..c7d7d734e --- /dev/null +++ b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js @@ -0,0 +1,15 @@ +function sum(a) { + + let currentSum = a; + + function f(b) { + currentSum += b; + return f; + } + + f.toString = function() { + return currentSum; + }; + + return f; +} diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js new file mode 100644 index 000000000..f10dca5dc --- /dev/null +++ b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js @@ -0,0 +1,12 @@ +function sum(a){ + // Your code goes here. + +} + +/* +sum(1)(2) == 3; // 1 + 2 +sum(1)(2)(3) == 6; // 1 + 2 + 3 +sum(5)(-1)(2) == 6 +sum(6)(-1)(-2)(-3) == 0 +sum(0)(1)(2)(3)(4)(5) == 15 +*/ diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js new file mode 100644 index 000000000..ed567d330 --- /dev/null +++ b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js @@ -0,0 +1,19 @@ +describe("sum", function(){ + + it("sum(1)(2) == 3", function(){ + assert.equal(3, sum(1)(2)); + }); + + it("sum(5)(-1)(2) == 6", function(){ + assert.equal(6, sum(5)(-1)(2)); + }); + + it("sum(6)(-1)(-2)(-3) == 0", function(){ + assert.equal(0, sum(6)(-1)(-2)(-3)); + }); + + it("sum(0)(1)(2)(3)(4)(5) == 15", function(){ + assert.equal(15, sum(0)(1)(2)(3)(4)(5)); + }); +}); + diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md index ed33832e0..99aae4a34 100644 --- a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md +++ b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md @@ -5,8 +5,13 @@ Kod: +<<<<<<< HEAD ```js run function topla(a) { +======= +```js demo run +function sum(a) { +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 let anlikToplam = a; @@ -51,4 +56,8 @@ function f(b) { } ``` -`f` değeri bir sonraki çağrıda kullanılacaktır, ne kadar çağırılırsa o kadar kullanılır. Ne zaman ki sayı veya karakter dizisi olarak kullanılacak olursa - `toString` metodu `anlikToplam` değerini döner. Bunun yanında `Symbol.toPrimitive` veya `valueOf` da kullanılabilirdi. \ No newline at end of file +<<<<<<< HEAD +`f` değeri bir sonraki çağrıda kullanılacaktır, ne kadar çağırılırsa o kadar kullanılır. Ne zaman ki sayı veya karakter dizisi olarak kullanılacak olursa - `toString` metodu `anlikToplam` değerini döner. Bunun yanında `Symbol.toPrimitive` veya `valueOf` da kullanılabilirdi. +======= +This `f` will be used in the next call, again return itself, as many times as needed. Then, when used as a number or a string -- the `toString` returns the `currentSum`. We could also use `Symbol.toPrimitive` or `valueOf` here for the conversion. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md index 29d6a9e05..56f03484d 100644 --- a/1-js/06-advanced-functions/06-function-object/article.md +++ b/1-js/06-advanced-functions/06-function-object/article.md @@ -1,7 +1,11 @@ # Fonksiyon Objeleri, NFE +<<<<<<< HEAD Bildiğiniz gibi JavaScript'te fonksiyonlar değerdir. +======= +As we already know, a function in JavaScript is a value. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Her değerin bir tipi olduğuna göre fonksiyonun tipi nedir? @@ -13,7 +17,13 @@ Daha iyi görselleyebilmek adına fonksiyonlara "aksiyon objeleri" denebilir. Sa Fonksiyon objelerinin kullanışlı özellikleri bulunmaktadır. +<<<<<<< HEAD Örneğin, fonksiyonun ismi "name" özelliği ile alınabilir. +======= +Function objects contain some useable properties. + +For instance, a function's name is accessible as the "name" property: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function selamVer() { @@ -22,6 +32,7 @@ function selamVer() { alert(selamVer.name); // selamVer ``` +<<<<<<< HEAD "name" özelliği atama o kadar akıllıdır ki, fonksiyon tanımlama ifadelerindeki ismi bile doğru alır. ```js run @@ -30,6 +41,17 @@ let selamVer = function() { } alert(selamVer.name); // selamVer +======= + +What's kind of funny, the name-assigning logic is smart. It also assigns the correct name to a function even if it's created without one, and then immediately assigned: + +```js run +let sayHi = function() { + alert("Hi"); +}; + +alert(sayHi.name); // sayHi (there's a name!) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` Hatta atama varsayılan değer ile yapıldığında bile çalışır: @@ -63,8 +85,13 @@ Burada bir sihir yoktur. İsmin çıkarılamadığı birçok durum meydana geleb Böyle durumlarda aşağıdaki gibi boş dönerler: +<<<<<<< HEAD ```js // Dizinin içerisinde fonksiyon yaratılması +======= +```js run +// function created inside array +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 let arr = [function() {}]; alert( arr[0].name ); // @@ -88,7 +115,11 @@ Gördüğünüz gibi geriye kalan parametresi `...` sayılmamaktadır. `length` özelliği bazen diğer fonksiyonların üzerinde çalışan fonksiyonlara bir iç bakış oluşturur. +<<<<<<< HEAD Mesela, aşağıdaki kodda `sor`fonksiyonu `soru` parametresi alır ve belirli olmayan sayıda `isleyici` fonksiyonunu çağırır. +======= +The `length` property is sometimes used for [introspection](https://en.wikipedia.org/wiki/Type_introspection) in functions that operate on other functions. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Kullanıcı cevap verdiğinde `isleyici`(handler) çağırılır. İki türlü işleyici gönderilebilir: @@ -97,7 +128,13 @@ Kullanıcı cevap verdiğinde `isleyici`(handler) çağırılır. İki türlü i Mantık şu şekildedir; cevap pozisit olduğunda argüman almayan isleyici calisir, fakat evrensel isleyiciye de izin verir. +<<<<<<< HEAD `isleyici`'lerin doğru çalışması için, `length` özelliğinden faydalanılabilir. +======= +To call `handler` the right way, we examine the `handler.length` property. + +The idea is that we have a simple, no-arguments handler syntax for positive cases (most frequent variant), but are able to support universal handlers as well: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function sor(soru, ...isleyiciler) { @@ -230,8 +267,12 @@ selamVer("Ahmet"); // Selam, Ahmet ``` `func` ismine ait iki tane özellik vardır: +<<<<<<< HEAD 1.Bu şekilde fonksiyonun kendisine içerisinden referans vermek mümkündür. 2. Fonksiyonun dışından erişilemez. +======= +There are two special things about the name `func`, that are the reasons for it: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin, `selamVer` fonksiyonu eğer bir parametre olmadan çağırılırsa kendisini `"Misafir"` ile tekrardan çağırabilir. @@ -266,7 +307,12 @@ let selamVer = function(kim) { } }; ``` +<<<<<<< HEAD Buradaki problem `selamVer`'in değeri değişebilir. Fonksiyon diğer bir değişkene gidebilir ardından hatalar vermeye başlar. +======= + +The problem with that code is that `sayHi` may change in the outer code. If the function gets assigned to another variable instead, the code will start to give errors: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let selamVer = function(kim) { @@ -309,10 +355,17 @@ hosGeldin(); // Selam, Misafir (iç çağrı çalışır) Şimdi çalışır, bunun nedeni `"func"`'in lokal fonksiyon olmasındandır. Dışarıdan alınmaz ( dışarıdan görünmez de ). Bu şekilde yazıldığında var olan fonksiyonu referans vereceği garantidir. +<<<<<<< HEAD Dışta bulunan kod hala `selamVer` veya `hosGeldin` değişkenlerine sahiptir. Dıştaki değişkenlere birşey olsa bile `func`"iç fonksiyon ismi"'dir. Kendisini gizli biçimde çağırabilir. ```smart header="Fonksiyon Tanımı diye birşey yoktur." "içsel isim" olarak tanımlanan özellik sadece Fonksiyon İfadeleri için geçerlidir. Fonksiyon Tanımlarında çalışmaz. Fonksiyon tanımları için "içsel" bir isim ekleme yöntemi yoktur. +======= +The outer code still has its variable `sayHi` or `welcome`. And `func` is an "internal function name", how the function can call itself internally. + +```smart header="There's no such thing for Function Declaration" +The "internal name" feature described here is only available for Function Expressions, not for Function Declarations. For Function Declarations, there is no syntax for adding an "internal" name. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bazen güvenli bir isme ihtiyaç duyulduğunda Fonksiyon Tanımı tekrardan İsimlendirilmiş Fonksiyon İfadesi şekline getirilir. ``` @@ -329,6 +382,11 @@ Eğer fonksiyon Fonksiyon Tanımı yöntemi ile ( ana akışta olmayan ) tanıml Fonksiyonlar ayrıca başka özelliklerde taşıyabilirler. Çoğu bilinen JavaScript kütüphanesi bu özelliği ziyadesiyle kullanır. +<<<<<<< HEAD Genelde bir "ana" fonksiyon ve bu fonksiyona bağlı birçok "yardımcı" fonksiyon tanımlarlar. Örneğin [jquery](https://jquery.com) `$` adında bir fonksiyon oluşturur. [lodash](https://lodash.com) fonksiyonu `_` adında bir fonksiyon oluşturu. Ardıncan `_.clone`, `_.keyBy` gibi özellikleri ekler. [Dökümantasyon](https://lodash.com/docs)'u inceleyebilirsiniz. Aslında, global alanda baya temiz çalışırlar. Böylece bir kütüphane bir tane global değişken vermiş olur. Bu da isimlerin birbiriyle çakışmasını engeller. +======= +They create a "main" function and attach many other "helper" functions to it. For instance, the [jQuery](https://jquery.com) library creates a function named `$`. The [lodash](https://lodash.com) library creates a function `_`, and then adds `_.clone`, `_.keyBy` and other properties to it (see the [docs](https://lodash.com/docs) when you want to learn more about them). Actually, they do it to lessen their pollution of the global space, so that a single library gives only one global variable. That reduces the possibility of naming conflicts. + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bundan dolayı bir fonksiyon kendince bir iş yapabilir ve özellikleri vasıtasıyla başka fonksiyonalitelere de sahip olabilir. diff --git a/1-js/06-advanced-functions/07-new-function/article.md b/1-js/06-advanced-functions/07-new-function/article.md index 66a558a9c..77cf648a1 100644 --- a/1-js/06-advanced-functions/07-new-function/article.md +++ b/1-js/06-advanced-functions/07-new-function/article.md @@ -46,6 +46,7 @@ Tabi bunlar çok özel haller, örneğin sunucudan bir metini alıp çalıştır ## Closure +<<<<<<< HEAD Fonksiyon genelde doğduğu yeri hatırlar `[[Ortam]]`. Bulunduğu Sözcüksel Ortama yaratıldığı yerden referans verir. Bir fonksiyon `new Function` ile yaratıldığında `[[Ortam]]` referansı o anki bulunduğu ortamı değil de evrensel ortama referans verir. @@ -54,6 +55,17 @@ Bir fonksiyon `new Function` ile yaratıldığında `[[Ortam]]` referansı o ank function FonkAl() { let deger = "test"; +======= +Usually, a function remembers where it was born in the special property `[[Environment]]`. It references the Lexical Environment from where it's created (we covered that in the chapter ). + +But when a function is created using `new Function`, its `[[Environment]]` is set to reference not the current Lexical Environment, but the global one. + +So, such function doesn't have access to outer variables, only to the global ones. + +```js run +function getFunc() { + let value = "test"; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 *!* let func = new Function('alert(deger)'); @@ -91,13 +103,23 @@ Belki dışta bulunan yerel değişkene erişmek gerekmektedir. Fakat burada şöyle bir problem var. JavaScript canlı ortama çıkmadan *sıkıştırıcı* (minifier) kullanılır ve böylece gereksiz boşluklar vs kaldırılır. Fakat daha da önemlisi, yerel değişkenler kısaltılarak işlenir. +<<<<<<< HEAD Örneğin bir fonksiyon `let kullaniciAdi` diye bir fonksiyona sahip olsa, *sıkıştırıcı* bunu `let k` şeklinde veya bu değişken daha önce kullanılmışsa başka küçük bir değişken ile tutar. Bu aslında mantıklı olandır. Değişken zaten yerel bir değişkendir ve dışarıdan buna erişilemez. Bundan dolayı fonksiyonun içerisinde kullanılan her `kullaniciAdi` yeni değişken ismiyle değiştirilir. *Sıkıştırıcılar* kodu ve kod yapısını analiz ederler sadece bul ve değiştir işlemi yapmazlar. +======= +For instance, if a function has `let userName`, minifier replaces it with `let a` (or another letter if this one is occupied), and does it everywhere. That's usually a safe thing to do, because the variable is local, nothing outside the function can access it. And inside the function, minifier replaces every mention of it. Minifiers are smart, they analyze the code structure, so they don't break anything. They're not just a dumb find-and-replace. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Fakat `new Function` dıştaki değişkenlere erişebilir olsa isi bu defa `kullaniciAdi`'nı bulamazdı. **Dış fonksiyonlara erişilme mümkün olsa bile `new Function` sıkıştırıcılar ile problem yaşardı** +<<<<<<< HEAD `new Function`'ın bir özelliği bizi hata yapmaktan kurtarır ve daha iyi kod yazmamıza yardımcı olur. +======= +Besides, such code would be architecturally bad and prone to errors. + +To pass something to a function, created as `new Function`, we should use its arguments. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer `new Function` ile yazılmış bir fonksiyona argüman göndermek istiyorsanız, bunu argümanları birer birer belirterek yapmanız gerekmektedir. @@ -118,7 +140,11 @@ alert( topla(a, b) ); // 3 ## Özet +<<<<<<< HEAD Yazım: +======= +These three declarations mean the same: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let func = new Function(arg1, arg2, ..., govde); @@ -134,4 +160,8 @@ new Function('a,b', ' return a + b; '); // virgül ile ayrılmış yazım new Function('a , b', ' return a + b; '); //virgül ve boşluk ile ayrılmış yazım. ``` +<<<<<<< HEAD `new Function` kullanılarak yaratılan fonksiyonlar, `[[Ortam]]` olarak Evrensel Sözcük Ortamını referans verir, dış değil. Bundan dolayı dıştaki değişkeni kullanamazlar. Fakat bu aslında iyi birşeydir, bizi hatalardan korur. Bire bir parametre gönderme de mimari olarak çok başarılır. Ayrıca *sıkıştırıcı* ile de probleme neden olmamaktadır. +======= +Functions created with `new Function`, have `[[Environment]]` referencing the global Lexical Environment, not the outer one. Hence, they cannot use outer variables. But that's actually good, because it insures us from errors. Passing parameters explicitly is a much better method architecturally and causes no problems with minifiers. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md index 9764157a1..c1532249a 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md @@ -18,7 +18,11 @@ function printNumbers(from, to) { printNumbers(5, 10); ``` +<<<<<<< HEAD `setTimeout` kullanilarak: +======= +Using nested `setTimeout`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md index f6c7c2d15..00d855b93 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md @@ -8,6 +8,11 @@ importance: 5 Bunun iki iki versiyonunu da yazınız. +<<<<<<< HEAD 1. `setInterval` kullanarak. 2. Kendini tekrar eden `setTimeout` kullanarak. +======= +1. Using `setInterval`. +2. Using nested `setTimeout`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md index 2bb1cb9cd..396ebee81 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md @@ -4,12 +4,16 @@ Bir fonksiyon hemen çalıştırılmak istenmeyebilir, belirli bir zaman sonra Bunun için iki metod var: +<<<<<<< HEAD - `setTimeout` fonksiyonu belirli bir zaman sonra çalıştırmaya yarar. - `setInterval` fonksiyonun belirli aralıklar ile sürekli çalışmasını sağlar. +======= +- `setTimeout` allows us to run a function once after the interval of time. +- `setInterval` allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu metodlar JavaScript'in tanımları arasında yer almaz. Fakat çoğu ortam bu metodları sunar. Daha özele inecek olursak tüm tarayıcılar ve NodeJS bu metodları sağlar. - ## setTimeout Yazımı: @@ -60,7 +64,12 @@ Aşağıdaki de aynı şekilde çalışacaktır: ```js run no-beautify setTimeout("selamVer('Merhaba')", 1000); ``` +<<<<<<< HEAD Karakter dizisi olarak fonksiyon göndermek aslında pek önerilmez, bunun yerine aşağıdaki gibi fonksiyon kullanılması daha doğrudur: +======= + +But using strings is not recommended, use arrow functions instead of them, like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run no-beautify setTimeout(() => alert('Merhaba'), 1000); @@ -74,8 +83,12 @@ Yeni başlayan arkadaşlar bazen yanlışlıkla fonksiyonun sonuna `()` ekleyebi // yanlış! setTimeout(selamVer(), 1000); ``` +<<<<<<< HEAD Bu çalışmaz, çünkü `setTimeout` referans bir fonksiyon beklemektedir. Burada `selamVer()` derseniz fonksiyonu çalıştırırsınız ve *bunun sonucu* `setTimeout` fonksiyonu tarafından kullanılır. Bizim durumumuzda `selamVer()` `undefined` döndürür. ( fonksiyon ile alakalı bir sorun yok ) bundan dolayı hiç birşey zamanlanmaz. +======= +That doesn't work, because `setTimeout` expects a reference to a function. And here `sayHi()` runs the function, and the *result of its execution* is passed to `setTimeout`. In our case the result of `sayHi()` is `undefined` (the function returns nothing), so nothing is scheduled. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```` ### clearTimeout fonksiyonu ile iptal etme @@ -132,14 +145,25 @@ setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000); IE ve Firefox tarayıcılarda ekranda `alert/confirm/prompt` olduğu sürece zamanlayıcı çalışmaya devam eder, fakat Chrome, Opera ve Safari bu zamanı durdurur. +<<<<<<< HEAD Bundan dolayı eğer yukarıdi kodu çalıştırır ve iptal'e basmazsanız Firefox/IE'de bir sonraki `alert` durmadan gösterilir. Fakat Chrome/Opera/Safari'de kapatıldıktan sonra 2 sn sonra tekrar alert gelir. ``` ## Tekrarlı setTimeout +======= +So if you run the code above and don't dismiss the `alert` window for some time, then the next `alert` will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds. +``` + +## Nested setTimeout +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bir kodu düzenli olarak çalıştırmanın iki yolu bulunmaktadır. +<<<<<<< HEAD İlki `setInterval` diğeri ise aşağıdaki gibi kullanılan `setTimeout`: +======= +One is `setInterval`. The other one is a nested `setTimeout`, like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js /** instead of: @@ -156,7 +180,11 @@ let timerId = setTimeout(function tick() { `setTimeout` bir sonraki çağrıyı o anki çağrı bittiği ana planlar `(*)` +<<<<<<< HEAD Kendini tekrar eden `setTimeout` `setInterval`'den daha esnektir. Bu şekliyle kullanıldığında bir sonraki planlanan çağrı ana çağrının durumuna göre ötelebilir veya daha geriye alınabilir. +======= +The nested `setTimeout` is a more flexible method than `setInterval`. This way the next call may be scheduled differently, depending on the results of the current one. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin, her 5 sn'de bir sunucudan veri isteyen bir servis yazmamız gerekmektedir. Fakat sunucuya fazladan yük binerse bunun 10,20,40 sn olarak değiştirilmesi gerekmektedir. @@ -179,33 +207,49 @@ let timerId = setTimeout(function request() { Eğer CPU-aç görevleriniz varsa bu görevlerin süresini ölçüp buna göre bir çalışma planı oluşturmak mümkündür. +<<<<<<< HEAD **Kendini tekrar eden `setTimeout` iki çağrı arasındaki süreyi garanti eder fkat `setInterval` bunu garanti etmez.** +======= +And if the functions that we're scheduling are CPU-hungry, then we can measure the time taken by the execution and plan the next call sooner or later. + +**Nested `setTimeout` allows to set the delay between the executions more precisely than `setInterval`.** +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Aşağıdaki iki kod parçacığı karşılaştırılacak olursa: ```js let i = 1; setInterval(function() { - func(i); + func(i++); }, 100); ``` +<<<<<<< HEAD İkincisi tekrarlı `setTimeout` kullanmaktadır. +======= +The second one uses nested `setTimeout`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let i = 1; setTimeout(function run() { - func(i); + func(i++); setTimeout(run, 100); }, 100); ``` +<<<<<<< HEAD `setInterval` `func(i)` fonksiyonunu her 100ms'de bir çalıştırır. ![](setinterval-interval.svg) Dikkatinizi çekti mi?... +======= +For `setInterval` the internal scheduler will run `func(i++)` every 100ms: + +![](setinterval-interval.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 **`func` çağrıları arasındaki geçen süre koddan daha kısa.** @@ -218,17 +262,30 @@ Bu durumda JS Motoru `func` fonksiyonunun bitmesini bekler, sonra planlayıcıy Bu durumda ile karşılaşıldığında fonksiyon hiç beklemeden sürekli çalışır. +<<<<<<< HEAD Aşağıda ise kendini çağıran `setTimeout` gösterilmiştir: ![](settimeout-interval.svg) **Kendini çağıran `setTimeout` arada geçen sürenin aynı olmasını garanti eder.(burada 100ms).** +======= +And here is the picture for the nested `setTimeout`: + +![](settimeout-interval.svg) + +**The nested `setTimeout` guarantees the fixed delay (here 100ms).** +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bunun nedeni yeni çağrının önceki çağrının bitiminde hesaplanmasından dolayıdır. +<<<<<<< HEAD ````smart header="Garbage collection" ( Çöp Toplama) Bir fonksiyon `setInterval/setTimeout`'a gönderildiğinde içeride bir referansını oluşturup zamanlayıcıya kaydeder. Bundan dolayı bu fonksiyon Çöp toplama işlemine girmez. Dışarıda hiç bir referans olmasa bile bu fonksiyon yok olmaz. +======= +````smart header="Garbage collection and setInterval/setTimeout callback" +When a function is passed in `setInterval/setTimeout`, an internal reference is created to it and saved in the scheduler. It prevents the function from being garbage collected, even if there are no other references to it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js // zamanlayıcı çağırana kadar fonksiyon hafızada kalır. @@ -240,13 +297,19 @@ setTimeout(function() {...}, 100); Bunun yan etkisi ise, dışarıdaki fonksiyondan veri almak isteyen bir fonksiyon sürekli çağırılır ve ayakta kalırsa dışarıdaki değişkenlerin de sürekliliği devam eder. Asıl bu fonksiyonun kendisinden bile fazla hafıza kaplayabilir. Öyleyse zamanlayıcı ile işiniz bittiğinde en iyisi iptal etmektir. Bu fonksiyonunuz küçük olsa bile yapılması gereken bir işlemdir. ```` -## setTimeout(...,0) +## Zero delay setTimeout `setTimeOut`'un farklı bir kullanım şekli daha bulunmakta: `setTimeout(func, 0)` +<<<<<<< HEAD Bu `func`'ın mümkün olduğu anda zamanlanmasını sağlar. Fakat zamanlayıcı bunu sadece o anki kod işlemi bittiğinde gerçekleştirir. Bundan dolayı zamanlayıcı o anki işin "hemen arkasından" çalışmaya başlar. Diğer bir deyişle "asenkron". +======= +This schedules the execution of `func` as soon as possible. But the scheduler will invoke it only after the currently executing script is complete. + +So the function is scheduled to run "right after" the current script. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin aşağıdaki kod önce "Merhaba" ve hemen arkasından "Dünya" yazdırır. @@ -256,6 +319,7 @@ setTimeout(() => alert("Dünya"), 0); alert("Merhaba"); ``` +<<<<<<< HEAD İlk satırda "çağrıyı 0ms sonra sıraya koy" demektir. Fakat zamanlayıcı bunu "önce sırayı kontrol et"'ten sonra bakar yani o anki kodu çalıştırdıktan sonra. Bundan dolayı `"Merhaba"` önce yazılır `"Dünya"` sonra. ### CPU-aç görevlerin parçalanması @@ -368,6 +432,16 @@ Tarayıcıda, iç içe zamanlayıcıların kullanımına ait bir limit bulunmakt Bunu aşağıdaki bulunan örnekte gösterelim. `setTimeout` çağrısı kendisini `0ms` sonra tekrarn çağırıyor. Her bir çağrı bir öncekinin zamanını `times` dizisinden hatırlıyor. Gecikme nasıl olacak bakalım: +======= +The first line "puts the call into calendar after 0ms". But the scheduler will only "check the calendar" after the current script is complete, so `"Hello"` is first, and `"World"` -- after it. + +There are also advanced browser-related use cases of zero-delay timeout, that we'll discuss in the chapter . + +````smart header="Zero delay is in fact not zero (in a browser)" +In the browser, there's a limitation of how often nested timers can run. The [HTML5 standard](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers) says: "after five nested timers, the interval is forced to be at least 4 milliseconds.". + +Let's demonstrate what it means with the example below. The `setTimeout` call in it re-schedules itself with zero delay. Each call remembers the real time from the previous one in the `times` array. What do the real delays look like? Let's see: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let start = Date.now(); @@ -384,10 +458,17 @@ setTimeout(function run() { // 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100 ``` +<<<<<<< HEAD İlk zamanlayıcılar anında çalışacaktır ( dökümantasyonda yazdığı gibi ) bundan dosnra gecikmeler oyuna dahil olur. `9, 15, 20, 24...` +======= +First timers run immediately (just as written in the spec), and then we see `9, 15, 20, 24...`. The 4+ ms obligatory delay between invocations comes into play. + +The similar thing happens if we use `setInterval` instead of `setTimeout`: `setInterval(f)` runs `f` few times with zero-delay, and afterwards with 4+ ms delay. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu limitasyonların nedeni de yine eski zamanlara dayanmaktadır. Çoğu kod bu prensibe göre çalıştığından dolayı bu kurallar devam etmektedir. +<<<<<<< HEAD Sunucu tabanlı JavaScript için ise bu kısıtlama geçerli değildir. Ayrıca anlık olarak asenkronron işlerin zamanlaması amacıyla başka yollar da bulunmaktadır. Örneğin [process.nextTick](https://nodejs.org/api/process.html) ve [setImmediate](https://nodejs.org/api/timers.html) gibi. Yani buradaki kısıtlamanın tarayıcı bazlı olduğu sonucunu çıkarabilirsiniz. ```` @@ -461,10 +542,28 @@ Artık `
` `i` nin yükselen değerini gösterecektir. - Böylece görev devam ederken tarayıcının başka işlere ( ilerleme çubuğu ) zaman ayırır. Tüm zamanlama metodları tam olarak gecikmeyi *garantilemez*. Zamanlayıcıda bu varsayımın üzerine birşey inşa etmeyin. +======= +For server-side JavaScript, that limitation does not exist, and there exist other ways to schedule an immediate asynchronous job, like [setImmediate](https://nodejs.org/api/timers.html#timers_setimmediate_callback_args) for Node.js. So this note is browser-specific. +```` + +## Summary + +- Methods `setTimeout(func, delay, ...args)` and `setInterval(func, delay, ...args)` allow us to run the `func` once/regularly after `delay` milliseconds. +- To cancel the execution, we should call `clearTimeout/clearInterval` with the value returned by `setTimeout/setInterval`. +- Nested `setTimeout` calls are a more flexible alternative to `setInterval`, allowing us to set the time *between* executions more precisely. +- Zero delay scheduling with `setTimeout(func, 0)` (the same as `setTimeout(func)`) is used to schedule the call "as soon as possible, but after the current script is complete". +- The browser limits the minimal delay for five or more nested calls of `setTimeout` or for `setInterval` (after 5th call) to 4ms. That's for historical reasons. + +Please note that all scheduling methods do not *guarantee* the exact delay. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin, tarayıcı zamanı birçok nedenden ötürü yavaşlayabilir: - İşlemcinin yükü artarsa. - Tarayıcının tab'ı arka plana alındıysa. - Laptop batarya ile çalışıyorsa. +<<<<<<< HEAD Bunların hepsi tarayıcı zamanına etki eder. Aralardaki gecikme 300ms ile 1000ms arasında değişebilir. Tabi tarayıcı ve özellikleri de bu konuda etkin rol oynar. +======= +All that may increase the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and OS-level performance settings. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js index 9ef503703..d5a09efb3 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js @@ -1,11 +1,12 @@ function spy(func) { function wrapper(...args) { + // using ...args instead of arguments to store "real" array in wrapper.calls wrapper.calls.push(args); - return func.apply(this, arguments); + return func.apply(this, args); } wrapper.calls = []; return wrapper; -} \ No newline at end of file +} diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md index 3905c8336..71dc750ef 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md @@ -1 +1,5 @@ -Burada `calls.push(args)` ile `f.apply(this,args)`'a gönderilen tüm çağrıların argümanları tutulabilir. \ No newline at end of file +<<<<<<< HEAD +Burada `calls.push(args)` ile `f.apply(this,args)`'a gönderilen tüm çağrıların argümanları tutulabilir. +======= +The wrapper returned by `spy(f)` should store all arguments and then use `f.apply` to forward the call. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js index 2df9d9962..c4d27a64a 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js @@ -1,3 +1,4 @@ +<<<<<<< HEAD function debounce(f, ms) { let isCooldown = false; @@ -10,6 +11,12 @@ function debounce(f, ms) { isCooldown = true; setTimeout(() => isCooldown = false, ms); +======= +function debounce(func, ms) { + let timeout; + return function() { + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(this, arguments), ms); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 }; - -} \ No newline at end of file +} diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js index 089857f03..d7980ba7d 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js @@ -1,4 +1,8 @@ +<<<<<<< HEAD describe("debounce", function () { +======= +describe('debounce', function () { +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 before(function () { this.clock = sinon.useFakeTimers(); }); @@ -7,13 +11,22 @@ describe("debounce", function () { this.clock.restore(); }); +<<<<<<< HEAD it("belirlenen süre zarfında istenen fonksiyonu sadece bir defa çağırır.", function () { let log = ''; +======= + it('for one call - runs it after given ms', function () { + const f = sinon.spy(); + const debounced = debounce(f, 1000); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - function f(a) { - log += a; - } + debounced('test'); + assert(f.notCalled, 'not called immediately'); + this.clock.tick(1000); + assert(f.calledOnceWith('test'), 'called after 1000ms'); + }); +<<<<<<< HEAD let f = debounce(alert, 1000); f(1); // Anında çalışacak @@ -22,20 +35,38 @@ describe("debounce", function () { setTimeout(() => f(3), 100); // görmezden gelinecek ( 100 ms'de çalıştığından ) setTimeout(() => f(4), 1100); // çalışır setTimeout(() => f(5), 1500); // görmezden gelinecek çünkü son çağrıdan itibaren 1000ms'den az bir zaman geçmiştir. +======= + it('for 3 calls - runs the last one after given ms', function () { + const f = sinon.spy(); + const debounced = debounce(f, 1000); - this.clock.tick(5000); - assert.equal(log, "14"); + debounced('a'); + setTimeout(() => debounced('b'), 200); // ignored (too early) + setTimeout(() => debounced('c'), 500); // runs (1000 ms passed) + this.clock.tick(1000); + + assert(f.notCalled, 'not called after 1000ms'); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + + this.clock.tick(500); + + assert(f.calledOnceWith('c'), 'called after 1500ms'); }); +<<<<<<< HEAD it("Çağrının kaynağını tutar.", function () { +======= + it('keeps the context of the call', function () { +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 let obj = { f() { assert.equal(this, obj); - } + }, }; obj.f = debounce(obj.f, 1000); - obj.f("test"); + obj.f('test'); + this.clock.tick(5000); }); - -}); \ No newline at end of file + +}); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg new file mode 100644 index 000000000..5896a5fa4 --- /dev/null +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg @@ -0,0 +1 @@ +200ms1500ms1000ms0cf(a)f(b)f(c)500mstimecalls: after 1000ms \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html new file mode 100644 index 000000000..e3b4d5842 --- /dev/null +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html @@ -0,0 +1,24 @@ + + + +Function handler is called on this input: +
+ + +

+ +Debounced function debounce(handler, 1000) is called on this input: +
+ + +

+ + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md index 76f9c4ed8..004810173 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD ```js run no-beautify @@ -5,17 +6,17 @@ function debounce(f, ms) { let isCooldown = false; +======= +```js demo +function debounce(func, ms) { + let timeout; +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 return function() { - if (isCooldown) return; - - f.apply(this, arguments); - - isCooldown = true; - - setTimeout(() => isCooldown = false, ms); + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(this, arguments), ms); }; - } +<<<<<<< HEAD ``` `debounce` çağrısı bir saklayıcı döner. İki durum söz konusudur: @@ -25,4 +26,11 @@ function debounce(f, ms) { İlk çağırıldığında `isCooldown` false döner, bundan dolayı çalışır ve `isCooldown` `true` olur. `isCooldown` true iken diğer çağrılar görmezden gelinir. -`setTimeout` belirlenen vakit geçtikten sonra tekrar `isCooldown`'u false'a çevirir. \ No newline at end of file +`setTimeout` belirlenen vakit geçtikten sonra tekrar `isCooldown`'u false'a çevirir. +======= + +``` + +A call to `debounce` returns a wrapper. When called, it schedules the original function call after given `ms` and cancels the previous such timeout. + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 1fc34cc87..88753d881 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -4,15 +4,23 @@ importance: 5 # Geri Sektiren dekoratör +<<<<<<< HEAD `debounce(f, ms)` dekoratörü `f` çağrısına `ms` zarfında en fazla bir defa izin vermelidir. Diğer bir deyişle "debounced" fonksiyonu çağırıldığında, `ms`'e yakın diğer tüm özellikler görmezden gelinecektir. Örneğin: +======= +The result of `debounce(f, ms)` decorator is a wrapper that suspends calls to `f` until there's `ms` milliseconds of inactivity (no calls, "cooldown period"), then invokes `f` once with the latest arguments. -```js no-beautify -let f = debounce(alert, 1000); +In other words, `debounce` is like a secretary that accepts "phone calls", and waits until there's `ms` milliseconds of being quiet. And only then it transfers the latest call information to "the boss" (calls the actual `f`). +For instance, we had a function `f` and replaced it with `f = debounce(f, 1000)`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + +Then if the wrapped function is called at 0ms, 200ms and 500ms, and then there are no calls, then the actual `f` will be only called once, at 1500ms. That is: after the cooldown period of 1000ms from the last call. + +<<<<<<< HEAD f(1); // Anında çalışacak f(2); // görmezden gelinecek @@ -21,4 +29,43 @@ setTimeout( () => f(4), 1100); // çalışır setTimeout( () => f(5), 1500); // görmezden gelinecek çünkü son çağrıdan itibaren 1000ms'den az bir zaman geçmiştir. ``` -Pratikte geri sektiren dekoratör değişmeyeceğini bildiğimiz bir zaman süresince aynı kaynağı tekrar çağırmamak için kullanılabilir. \ No newline at end of file +Pratikte geri sektiren dekoratör değişmeyeceğini bildiğimiz bir zaman süresince aynı kaynağı tekrar çağırmamak için kullanılabilir. +======= +![](debounce.svg) + +...And it will get the arguments of the very last call, other calls are ignored. + +Here's the code for it (uses the debounce decorator from the [Lodash library](https://lodash.com/docs/4.17.15#debounce)): + +```js +let f = _.debounce(alert, 1000); + +f("a"); +setTimeout( () => f("b"), 200); +setTimeout( () => f("c"), 500); +// debounced function waits 1000ms after the last call and then runs: alert("c") +``` + +Now a practical example. Let's say, the user types something, and we'd like to send a request to the server when the input is finished. + +There's no point in sending the request for every character typed. Instead we'd like to wait, and then process the whole result. + +In a web-browser, we can setup an event handler -- a function that's called on every change of an input field. Normally, an event handler is called very often, for every typed key. But if we `debounce` it by 1000ms, then it will be only called once, after 1000ms after the last input. + +```online + +In this live example, the handler puts the result into a box below, try it: + +[iframe border=1 src="debounce" height=200] + +See? The second input calls the debounced function, so its content is processed after 1000ms from the last input. +``` + +So, `debounce` is a great way to process a sequence of events: be it a sequence of key presses, mouse movements or something else. + +It waits the given time after the last call, and then runs its function, that can process the result. + +The task is to implement `debounce` decorator. + +Hint: that's just a few lines if you think about it :) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index c1aad3863..f431eddb7 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -7,8 +7,8 @@ describe("throttle(f, 1000)", function() { } before(function() { - f1000 = throttle(f, 1000); this.clock = sinon.useFakeTimers(); + f1000 = throttle(f, 1000); }); it("ilk çağrı şimdi çalışıyor", function() { @@ -45,3 +45,22 @@ describe("throttle(f, 1000)", function() { }); }); +<<<<<<< HEAD +======= + +describe('throttle', () => { + + it('runs a forwarded call once', done => { + let log = ''; + const f = str => log += str; + const f10 = throttle(f, 10); + f10('once'); + + setTimeout(() => { + assert.equal(log, 'once'); + done(); + }, 20); + }); + +}); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 3748a7a8f..cabcae5e6 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -12,11 +12,10 @@ function throttle(func, ms) { savedThis = this; return; } + isThrottled = true; func.apply(this, arguments); // (1) - isThrottled = true; - setTimeout(function() { isThrottled = false; // (3) if (savedArgs) { @@ -35,4 +34,12 @@ function throttle(func, ms) { 2. Bu durumda tüm çağrılar `savedArgs/savedThis` içerisinde tutulur. Bu kaynaklar ve argümanlar hafızada tutulmalıdır. Çünkü çağrıyı eşzamanlı olarak çoğaltmamız için bu bilgiler gereklidir. 3. ... `ms` süresi geçtikten sonra `setTimeout` çalışır. Yavaşlama durumu sona erer (`isThrottled = false` ). Eğer görmezden gelinmiş çağrı var ise `saklayıcı` son hafızada tutulan kaynağı ve argüman ile çalışır. +<<<<<<< HEAD Son adım `func` yerine `wrapper` çalıştırır, çünkü sadece `func`'ın çalışması yetmez ayrıca yavaşlama durumuna girilmesi gereklidir. +======= +1. During the first call, the `wrapper` just runs `func` and sets the cooldown state (`isThrottled = true`). +2. In this state all calls are memorized in `savedArgs/savedThis`. Please note that both the context and the arguments are equally important and should be memorized. We need them simultaneously to reproduce the call. +3. After `ms` milliseconds pass, `setTimeout` triggers. The cooldown state is removed (`isThrottled = false`) and, if we had ignored calls, `wrapper` is executed with the last memorized arguments and context. + +The 3rd step runs not `func`, but `wrapper`, because we not only need to execute `func`, but once again enter the cooldown state and setup the timeout to reset it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 314a4ab30..f9c725725 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -4,14 +4,27 @@ importance: 5 # Kısma Dekoratörleri +<<<<<<< HEAD "Sıkma" dekoratörü `throttle(f,ms)` oluşturun ve bu bir kapsayıcı döndersin, bu kapsayıcı çağrıyı `f`'e iletsin ve bu çağrıyı belirtilen `ms` içerisinde sadece bir defa yapabilsin. Geri kalan "cooldown" periyodundakiler görmezden gelinsin. ** `Geri sektiren` dekoratör ile `Kısma` dekoratörü arasındaki fark; görmezden gelinen çağrı eğer belirlenen süre zarfında yaşayabilirse, gecikme sonrasında çağırılır. +======= +Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper. + +When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds. + +The difference with debounce is that it's completely different decorator: +- `debounce` runs the function once after the "cooldown" period. Good for processing the final result. +- `throttle` runs it not more often than given `ms` time. Good for regular updates that shouldn't be very often. + +In other words, `throttle` is like a secretary that accepts phone calls, but bothers the boss (calls the actual `f`) not more often than once per `ms` milliseconds. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Daha iyi anlayabilmek için günlük kullanılan bir uygulamadan yararlanabiliriz. **Örneğin fare olaylarını takip etmek istiyorsunuz.** +<<<<<<< HEAD Tarayıcı üzerinde bir fonksiyon ile farenin her mikro seviyeli hareketinde gittiği yerlerin bilgileri alınabilir. Aktif fare kullanımı sırasında akıcı bir şekilde çalışacaktır. Her sn'de 100 defa ( 10ms ) çalışabilir. **İzleme fonksiyonu web sayfası üzerinde bazı bilgileri güncellemeli.** @@ -19,20 +32,35 @@ Tarayıcı üzerinde bir fonksiyon ile farenin her mikro seviyeli hareketinde gi Güncelleme fonksiyonu update()`'in her fare mikro hareketinde çalışması sisteme çok ağır gelmektedir. Aslında bu fonksiyonun 100ms'de birden fazla çalışmasının da bir mantığı yoktur. Bundan dolayı `update()` yerine, her bir fare hareketinde çalışacak `throttle(update,100)` fonksiyonu kullanılacaktır. Bu dekoratör her fare değişiminde çağırılabilir fakat `update()` 100ms içerisinde maksimum bir defa çağırılacaktır. +======= +In a browser we can setup a function to run at every mouse movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms). +**We'd like to update some information on the web-page when the pointer moves.** + +...But updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in updating more often than once per 100ms. + +So we'll wrap it into the decorator: use `throttle(update, 100)` as the function to run on each mouse move instead of the original `update()`. The decorator will be called often, but forward the call to `update()` at maximum once per 100ms. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Şu şekilde görünecektir: +<<<<<<< HEAD 1. İlk fare hareketinde dekoratör çağrıyı doğrudan `update`'e yönlendirecektir. Bu önemlidir, kullanıcı böylece hareketinin sonucunu doğrudan görür. 2. Sonrasında fare hareket etse de `100ms` geçene kadar hiç birşey olmaz. Dekoratör çağrıları görmezden gelir. 3. `100ms` sonunda son koordinatlar ile tekrardan bir `update` çalışır. 4. En sonunda fare bir yerlerde durur. Dekoratör `100ms` bekler ve bu bekleme bittikten sonra `update` fonksiyonu son koordinatlar ile çalışır. Belki de en önemlisi son fare koordinatlarının da işlenmiş olmasıdır. +======= +1. For the first mouse movement the decorated variant immediately passes the call to `update`. That's important, the user sees our reaction to their move immediately. +2. Then as the mouse moves on, until `100ms` nothing happens. The decorated variant ignores calls. +3. At the end of `100ms` -- one more `update` happens with the last coordinates. +4. Then, finally, the mouse stops somewhere. The decorated variant waits until `100ms` expire and then runs `update` with last coordinates. So, quite important, the final mouse coordinates are processed. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Kod örneği: ```js function f(a) { - console.log(a) -}; + console.log(a); +} // f1000 f'e çağrıların 1000ms en fazla bir defa geçmesini sağlar. let f1000 = throttle(f, 1000); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index dfa83b4b0..849d441e6 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -6,9 +6,15 @@ JavaScript fonksiyonlar ile uğraşırken inanılmaz derecede esneklik sağlamak Diyelim ki `slow(x)` diye yoğun işlemci gücüne ihtiyaç duyan bir fonksiyonunuz olsun, buna rağmen sonucları beklediğiniz şekilde vermekte. +<<<<<<< HEAD Eğer bu fonksiyon sık sık çağırılıyor ise farklı x'ler için sonucu saklamak bizi tekrar hesaplamadan kurtarabilir. Fakat bunu `slow()` fonksiyonunun içine yazmak yerine yeni bir wrapper yazmak daha iyi olacaktır. Göreceğiniz üzere size oldukça fazla yardımı olacaktır. +======= +If the function is called often, we may want to cache (remember) the results to avoid spending extra-time on recalculations. + +But instead of adding that functionality into `slow()` we'll create a wrapper function, that adds caching. As we'll see, there are many benefits of doing so. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Kod aşağıdaki gibidir: @@ -23,6 +29,7 @@ function cachingDecorator(func) { let cache = new Map(); return function(x) { +<<<<<<< HEAD if (cache.has(x)) { // eğer sonuç map içerisinde ise return cache.get(x); // değeri gönder } @@ -30,17 +37,34 @@ function cachingDecorator(func) { let result = func(x); // aksi halde hesap yap cache.set(x, result); // sonra sonucu sakla +======= + if (cache.has(x)) { // if there's such key in cache + return cache.get(x); // read the result from it + } + + let result = func(x); // otherwise call func + + cache.set(x, result); // and cache (remember) the result +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 return result; }; } slow = cachingDecorator(slow); +<<<<<<< HEAD alert( slow(1) ); // slow(1) saklandı alert( "Tekrar: " + slow(1) ); // aynısı döndü alert( slow(2) ); // slow(2) saklandı alert( "Tekrar: " + slow(2) ); // bir önceki ile aynısı döndü. +======= +alert( slow(1) ); // slow(1) is cached and the result returned +alert( "Again: " + slow(1) ); // slow(1) result returned from cache + +alert( slow(2) ); // slow(2) is cached and the result returned +alert( "Again: " + slow(2) ); // slow(2) result returned from cache +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` Yuarkıdaki kodda `cachingDecorator` bir *dekoratör*'dür: Diğer bir fonksiyonu alan ve bunun davranışını değiştiren özel bir fonksiyon fonksiyon. @@ -49,6 +73,7 @@ Aslında her bir fonksiyon için `cachingDecorator` çağrılabilir ve o da sakl Saklama olayını ana fonksiyonldan ayırarak aslında daha temiz bir yapıya da geçmiş olduk. +<<<<<<< HEAD Detayına inmeye başlayabiliriz. `cachingDecorator(func)` bir çeşit "wrapper(saklayıcı)"'dır. Bu işlem `func(x)` i "saklama" işine yarar. @@ -56,9 +81,17 @@ Detayına inmeye başlayabiliriz. ![](decorator-makecaching-wrapper.svg) Gördüğünüz gibi, saklayıcı `func(x)`'ı olduğu gibi dönderir. Saklayıcının dışındaki `yavaş` olan fonksiyon hala aynı şekilde çalışır. Aslında davranışın üstüne sadece saklama(caching) mekanizması gelmiştir. +======= +The result of `cachingDecorator(func)` is a "wrapper": `function(x)` that "wraps" the call of `func(x)` into caching logic: + +![](decorator-makecaching-wrapper.svg) + +From an outside code, the wrapped `slow` function still does the same. It just got a caching aspect added to its behavior. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Özetlersek, ayrı bir `cachingDecorator` kullanmanın faydaları şu şekildedir: +<<<<<<< HEAD - `cachingDecorator` tekrar kullanılabilir. Başka bir fonksiyona da uygulanabilir. - Saklama(caching) mantığı ayrılmıştır böylece `yavaş` kodun içine daha fazla kod yazıp karışıklaştırılmamaktadır. - Eğer ihtiyaç birden fazla dekoratör birlikte kullanılabilir. @@ -66,6 +99,13 @@ Gördüğünüz gibi, saklayıcı `func(x)`'ı olduğu gibi dönderir. Saklayıc ## Kaynak için "func.all" kullanmak. Yukarıda bahsettiğimiz saklama dekoratörü obje metodları ile çalışmak için müsait değildir. +======= +- The `cachingDecorator` is reusable. We can apply it to another function. +- The caching logic is separate, it did not increase the complexity of `slow` itself (if there was any). +- We can combine multiple decorators if needed (other decorators will follow). + +## Using "func.call" for the context +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin aşağıdaki kodda `user.format()` dekorasyondan sonra çalışmayı durdurur: @@ -77,7 +117,11 @@ let worker = { }, slow(x) { +<<<<<<< HEAD // burada çok zorlu bir görev olabilir. +======= + // scary CPU-heavy task here +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 alert("Called with " + x); return x * this.someMethod(); // (*) } @@ -150,7 +194,11 @@ function sayHi() { let user = { name: "John" }; let admin = { name: "Admin" }; +<<<<<<< HEAD // farklı objeler "this" objesi olarak gönderilebilir. +======= +// use call to pass different objects as "this" +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 sayHi.call( user ); // John sayHi.call( admin ); // Admin ``` @@ -169,8 +217,11 @@ let user = { name: "John" }; say.call( user, "Hello" ); // John: Hello ``` +<<<<<<< HEAD Bizim durumumuzda saklayıcı içinde `call` kullanarak içeriği orijinal fonksiyona aktarabiliriz: - +======= +In our case, we can use `call` in the wrapper to pass the context to the original function: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let worker = { @@ -212,6 +263,10 @@ Daha açıklayıcı olması için `this`'in nasıl ilerlediğini inceleyebiliriz 2. Öyleyse `worker.slow(2)` çalıştırıldığında saklayıcı `2` ve `this=worker` ( noktadan önceki obje ) argümanlarını alır. 3. Saklayıcı(wrapper) içinde sonucun henüz belleğe alınmadığını varsayarsak `func.call(this,x)` o anki `this` (`=worker`) ve ('=2`) değerini orjinal metoda gönderir. +<<<<<<< HEAD +======= +## Going multi-argument +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## "func.apply" ile çoklu argüman kullanımı @@ -228,13 +283,18 @@ let worker = { worker.slow = cachingDecorator(worker.slow); ``` +<<<<<<< HEAD Burada çözmemiz gereken iki problem bul İlki `min` ve `max` değerlerinin bu `bellek` haritasında anahtar olarak nasıl tutulacağı. Önceki konuda tek `x` argümanı için `cache.set(x,result)` şeklinde sonucu belleğe kaydetmiş ve sonra `cache.get(x)` şeklinde almıştık. Fakat şimdi sonucu *argümanların birleşimi* şeklinde hatırlamak gerekmektedir. Normalde `Map` anahtarı tek değer olarak almaktadır. +======= +Previously, for a single argument `x` we could just `cache.set(x, result)` to save the result and `cache.get(x)` to retrieve it. But now we need to remember the result for a *combination of arguments* `(min,max)`. The native `Map` takes single value only as the key. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu sorunun çözümü için bazı çözümler şu şekildedir: +<<<<<<< HEAD 1. Map-benzeri bir yapı kurarak birkaç anahtarı kullanabilen bir veri yapısı oluşturmak. 2. İç içe map kullanarak; Örneğin `cache.set(min)` aslında `(max, result)`'ı tutmaktadır. Böylece `result` `cache.get(min).get(max)` şeklinde alınabilir. 3. İki değeri teke indirerek. Bizim durumumuzda bu `"min,max"` şeklinde bir karakter dizisini `Map`'in anahtarı yapmak olabilir. Ayrıca *hashing fonksiyonu*'u dekoratöre sağlayabiliriz. Bu fonksiyon da birçok değerden bir değer yapabilir. @@ -311,6 +371,13 @@ Buna *çağrı iletme* denir. Saklayıcı sahip olduğu herşeyi iletir: `this` Böyle bir saklayıcı kod çağırıldığında içerideki orjinal fonksiyon çağıran tarafından ayrıştırılamaz. Şimdi bunları daha güçlü `cachingDecoratır`'da işleyelim: +======= +For many practical applications, the 3rd variant is good enough, so we'll stick to it. + +Also we need to pass not just `x`, but all arguments in `func.call`. Let's recall that in a `function()` we can get a pseudo-array of its arguments as `arguments`, so `func.call(this, x)` should be replaced with `func.call(this, ...arguments)`. + +Here's a more powerful `cachingDecorator`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let worker = { @@ -331,7 +398,7 @@ function cachingDecorator(func, hash) { } *!* - let result = func.apply(this, arguments); // (**) + let result = func.call(this, ...arguments); // (**) */!* cache.set(key, result); @@ -350,10 +417,61 @@ alert( "Again " + worker.slow(3, 5) ); // same (cached) ``` Şimdi saklayıcı(wrapper) birçok argüman ile çalışabilir. +<<<<<<< HEAD İki tane değişiklik oldu: - `(*)` satırında bir `has` ile argümanlardan tek bir anahtar meydana getirildi. Bunun için basit "birleştirme" fonksiyonu kullanılmıştır. `(3,5)` `"3,5"` şekline getirildi. Tabi başka hash fonksiyonları için daha karmaşık bir yapı gerekebilir. - `(**)` satırında ise `func.apply` ile hem kaynak ( this ) hem de saklayıcı argümanları (ne kadar olduğu önemli değil) orjinal fonksiyona iletilmiştir. +======= +Now it works with any number of arguments (though the hash function would also need to be adjusted to allow any number of arguments. An interesting way to handle this will be covered below). + +There are two changes: + +- In the line `(*)` it calls `hash` to create a single key from `arguments`. Here we use a simple "joining" function that turns arguments `(3, 5)` into the key `"3,5"`. More complex cases may require other hashing functions. +- Then `(**)` uses `func.call(this, ...arguments)` to pass both the context and all arguments the wrapper got (not just the first one) to the original function. + +## func.apply + +Instead of `func.call(this, ...arguments)` we could use `func.apply(this, arguments)`. + +The syntax of built-in method [func.apply](mdn:js/Function/apply) is: + +```js +func.apply(context, args) +``` + +It runs the `func` setting `this=context` and using an array-like object `args` as the list of arguments. + +The only syntax difference between `call` and `apply` is that `call` expects a list of arguments, while `apply` takes an array-like object with them. + +So these two calls are almost equivalent: + +```js +func.call(context, ...args); +func.apply(context, args); +``` + +They perform the same call of `func` with given context and arguments. + +There's only a subtle difference regarding `args`: + +- The spread syntax `...` allows to pass *iterable* `args` as the list to `call`. +- The `apply` accepts only *array-like* `args`. + +...And for objects that are both iterable and array-like, such as a real array, we can use any of them, but `apply` will probably be faster, because most JavaScript engines internally optimize it better. + +Passing all arguments along with the context to another function is called *call forwarding*. + +That's the simplest form of it: + +```js +let wrapper = function() { + return func.apply(this, arguments); +}; +``` + +When an external code calls such `wrapper`, it is indistinguishable from the call of the original function `func`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Metod Ödünç Alma [#method-borrowing] @@ -376,7 +494,13 @@ function hash(args) { ``` ... Malesef bu çalışmaz. Çünkü `hash(argümanlar)` çağırılmakta ve `arguments` objei hem `döngülenebilir` hemde `dizi-benzeri` olduğundan, fakat gerçek dizi olmadığından çalışmaz. +<<<<<<< HEAD Öyleyse `join` bu durumda çağırılamaz, örneğin: +======= +...Unfortunately, that won't work. Because we are calling `hash(arguments)`, and `arguments` object is both iterable and array-like, but not a real array. + +So calling `join` on it would fail, as we can see below: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function hash() { @@ -403,7 +527,11 @@ hash(1, 2); Bu cambazlığa *metod ödünç alma* denir. +<<<<<<< HEAD Normal diziden `[].join` join ödünç alınır. Sonrasında `arguments` contexi ile çağrı yapılır `[].join.call` +======= +We take (borrow) a join method from a regular array (`[].join`) and use `[].join.call` to run it in the context of `arguments`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Peki neden çalışır? @@ -422,13 +550,31 @@ Tanımından "olduğu" gibi alındığında işlem şu şekildedir: Teknik olarak `this`'i alır ve `this[0]`, `this[1]` ...vs. şeklinde birleştirir. Bu şekilde yazılarak tüm `dizi-gibi`'lerin `this` şeklinde çalışmasını sağlar. Bundan dolayı `this=arguments` şeklinde de çalışır. +<<<<<<< HEAD ## Özet +======= +## Decorators and function properties + +It is generally safe to replace a function or a method with a decorated one, except for one little thing. If the original function had properties on it, like `func.calledCount` or whatever, then the decorated one will not provide them. Because that is a wrapper. So one needs to be careful if one uses them. + +E.g. in the example above if `slow` function had any properties on it, then `cachingDecorator(slow)` is a wrapper without them. + +Some decorators may provide their own properties. E.g. a decorator may count how many times a function was invoked and how much time it took, and expose this information via wrapper properties. + +There exists a way to create decorators that keep access to function properties, but this requires using a special `Proxy` object to wrap a function. We'll discuss it later in the article . + +## Summary +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 *Decoratör* fonksiyonun davranışını değiştiren saklayıcılardır(wrapper). İş hala ana fonksiyonda yapılır. +<<<<<<< HEAD Genelde gerçek fonksiyonu dekoratör ile değiştirmek güvenlidir, bir olay haricinde. Eğer orjinal fonksiyon `func.calledCount` gibi bir özelliğe sahipse, dekoratör bunu sağlamayacaktır çünkü bu bir saklayıcıdır. Bundan dolayı kullanırken dikkatli olunmalıdır. Bazı dekoratörler kendine ait özellikler tutarlar. `cachingDecorator` kullanmak için bazı metodlar denedik: +======= +Decorators can be seen as "features" or "aspects" that can be added to a function. We can add one or add many. And all this without changing its code! +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- `func`'ı verilen kaynak ve argümanlar ile çağırır. - [func.apply(context, args)](mdn:js/Function/apply) -- `kaynak`'ı `this` olarak ve `array-benzeri` argümanları liste olarak iletir. @@ -438,9 +584,15 @@ Genelde gerçek fonksiyonu dekoratör ile değiştirmek güvenlidir, bir olay ha ```js let wrapper = function() { return original.apply(this, arguments); -} +}; ``` +<<<<<<< HEAD Ayrıca *metod ödünç alma*'yı da gördük. Bir metotdan obje alındığında ve bu diğer objenin kaynağında(context) `çağırıldığında` gerçekleşir. Dizi metodlarını alıp argümanlara uygulama çokça kullanılır. Bunun alternatifi `geriye kalan` parametre objelerini kullanmaktır. Bunlar gerçek dizilerdir. Araştırırsanız birçok dekoratör görebilirsiniz. Bu bölümdeki görevleri çözerekte kendinizi geliştirebilirsiniz. +======= +We also saw an example of *method borrowing* when we take a method from an object and `call` it in the context of another object. It is quite common to take array methods and apply them to `arguments`. The alternative is to use rest parameters object that is a real array. + +There are many decorators there in the wild. Check how well you got them by solving the tasks of this chapter. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md index 43fa96069..ffb846c21 100644 --- a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md +++ b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md @@ -2,8 +2,14 @@ importance: 5 --- +<<<<<<< HEAD # Bağlandıktan sonraki fonksiyon özellikleri. Fonksiyonun özelliğinde bir değer var. Bu değer `bind` edildikten sonra değişir mi? Neden? +======= +# Function property after bind + +There's a value in the property of a function. Will it change after `bind`? Why, or why not? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function sayHi() { diff --git a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/solution.md b/1-js/06-advanced-functions/10-bind/6-ask-partial/solution.md similarity index 100% rename from 1-js/06-advanced-functions/11-currying-partials/1-ask-currying/solution.md rename to 1-js/06-advanced-functions/10-bind/6-ask-partial/solution.md diff --git a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md b/1-js/06-advanced-functions/10-bind/6-ask-partial/task.md similarity index 69% rename from 1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md rename to 1-js/06-advanced-functions/10-bind/6-ask-partial/task.md index 0d70e4837..69d64e1a5 100644 --- a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md +++ b/1-js/06-advanced-functions/10-bind/6-ask-partial/task.md @@ -8,7 +8,11 @@ Bir önceki 'dan biraz daha karmaşık bir görevin `user` objesi değiştirildi. Şimdi `loginOk/loginFail` fonksiyonlarının yerine tek bir fonksiyon `user.login(true/false)` var. +<<<<<<< HEAD:1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md Aşağıdaki `askPassword`'a ne iletilirse bu `user.login(true)`'u `ok` veya `user.login(fail)`'i `fail` olarak çağırır? +======= +What should we pass `askPassword` in the code below, so that it calls `user.login(true)` as `ok` and `user.login(false)` as `fail`? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/06-advanced-functions/10-bind/6-ask-partial/task.md ```js function askPassword(ok, fail) { diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md index 07d1599fb..22cf8be1a 100644 --- a/1-js/06-advanced-functions/10-bind/article.md +++ b/1-js/06-advanced-functions/10-bind/article.md @@ -5,13 +5,23 @@ libs: # Fonksiyon bağlama +<<<<<<< HEAD Obje metodları ile `setTimeout` kullanıldığında veya obje metodları iletilirken, `this`'in kaybolması bilinen bir problemdir. Aniden, `this` kaybolur. Bu problem başlangıç seviyesi geliştiriciler için çok tipiktir, bazen deneyimli geliştiriceler de bu hataya düşerler. +======= +When passing object methods as callbacks, for instance to `setTimeout`, there's a known problem: "losing `this`". + +In this chapter we'll see the ways to fix it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## "this"'in kaybetme +<<<<<<< HEAD JavaScript'te `this` in ne kadar kolay bir şekilde kaybolduğunu zaten biliyorsunuz. Eğer bir metod objeden farklı bir yere iletilirse `this` kaybolur. +======= +We've already seen examples of losing `this`. Once a method is passed somewhere separately from the object -- `this` is lost. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu `setTimeout` ile nasıl olur bakalım: @@ -37,7 +47,11 @@ let f = user.sayHi; setTimeout(f, 1000); // lost kullanıcı kaynağı kayboldu ``` +<<<<<<< HEAD Tarayıcıda `setTimeout` kullanımı biraz özeldir: `this=window` olarak ayarlanır. ( Node.JS için `this` timer objesi olur, fakat burada pek de önemli değil.) Öyleyse `this.firstName` bu değeri `window.firstName`'den almaya çalışır, fakat böyle birşey yok. Buna benzer durumlarda siz de göreceksiniz `this` genelde `undefined` olur. +======= +The method `setTimeout` in-browser is a little special: it sets `this=window` for the function call (for Node.js, `this` becomes the timer object, but doesn't really matter here). So for `this.firstName` it tries to get `window.firstName`, which does not exist. In other similar cases, usually `this` just becomes `undefined`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Aslında yapmak istediğimiz çok basit obje metodunu çağrılan yere ( -- ) iletmek istiyoruz ( burada -- zamanlayıcıdır.) Bunun doğru kaynakta çağırıldığına nasıl emin olunabilir? @@ -82,10 +96,12 @@ let user = { setTimeout(() => user.sayHi(), 1000); -// ...within 1 second -user = { sayHi() { alert("Another user in setTimeout!"); } }; +// ...the value of user changes within 1 second +user = { + sayHi() { alert("Another user in setTimeout!"); } +}; -// Another user in setTimeout?!? +// Another user in setTimeout! ``` Bir sonraki çözüm içe böyle birşeyin olmasını engeller. @@ -97,9 +113,15 @@ Fonksiyonlar [bind](mdn:js/Function/bind) varsayılan fonksiyonu sağlarlar. Bu Basitçe yazımı şu şekildedir: ```js +<<<<<<< HEAD // daha karmaşık yazımlarına ileride geleceğiz. let boundFunc = func.bind(kaynak); ```` +======= +// more complex syntax will come a little later +let boundFunc = func.bind(context); +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `func.bind(kaynak)`'ın sonucu özel bir fonksiyon benzeri "egzotik obje"'dir. Fonksiyon gibi çağırılabilir ve saydam bir şekilde çağrıyı `func`'a `this=kaynak` olacak şekilde iletir. @@ -157,9 +179,16 @@ let user = { let sayHi = user.sayHi.bind(user); // (*) */!* +// can run it without an object sayHi(); // Hello, John! setTimeout(sayHi, 1000); // Hello, John! + +// even if the value of user changes within 1 second +// sayHi uses the pre-bound value which is reference to the old user object +user = { + sayHi() { alert("Another user in setTimeout!"); } +}; ``` `(*)` satırında `user.sayHi` metodunu aıyoruz ve `user`'a bağlıyoruz. `sayHi` bu durumda `bağlanmış` fonksiyon oluyor. Böylece tek başına çağrılabilir veya `setTimeout` içerisinde çağrılabilir. Nereden çağırıldığı çok da önemli değidlir. Kaynağı her zaman doğru olacaktır. @@ -192,11 +221,138 @@ for (let key in user) { ``` Bu şekilde büyük bağlama olayları için bazı JavaScript kütüphanelerinden yardım alınabilir. Örneğin lodash ,[_.bindAll(obj)](http://lodash.com/docs#bindAll) fonksiyonuna sahiptir. +<<<<<<< HEAD ```` ## Özet `func.bind(kaynak, ...args)` `func` fonksiyonunun "bağlanmış hali"'ni döndürür. Bu bağlanmış halde `this` ve argümanlar sabitlenir. +======= +JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](http://lodash.com/docs#bindAll) in lodash. +```` + +## Partial functions + +Until now we have only been talking about binding `this`. Let's take it a step further. + +We can bind not only `this`, but also arguments. That's rarely done, but sometimes can be handy. + +The full syntax of `bind`: + +```js +let bound = func.bind(context, [arg1], [arg2], ...); +``` + +It allows to bind context as `this` and starting arguments of the function. + +For instance, we have a multiplication function `mul(a, b)`: + +```js +function mul(a, b) { + return a * b; +} +``` + +Let's use `bind` to create a function `double` on its base: + +```js run +function mul(a, b) { + return a * b; +} + +*!* +let double = mul.bind(null, 2); +*/!* + +alert( double(3) ); // = mul(2, 3) = 6 +alert( double(4) ); // = mul(2, 4) = 8 +alert( double(5) ); // = mul(2, 5) = 10 +``` + +The call to `mul.bind(null, 2)` creates a new function `double` that passes calls to `mul`, fixing `null` as the context and `2` as the first argument. Further arguments are passed "as is". + +That's called [partial function application](https://en.wikipedia.org/wiki/Partial_application) -- we create a new function by fixing some parameters of the existing one. + +Please note that we actually don't use `this` here. But `bind` requires it, so we must put in something like `null`. + +The function `triple` in the code below triples the value: + +```js run +function mul(a, b) { + return a * b; +} + +*!* +let triple = mul.bind(null, 3); +*/!* + +alert( triple(3) ); // = mul(3, 3) = 9 +alert( triple(4) ); // = mul(3, 4) = 12 +alert( triple(5) ); // = mul(3, 5) = 15 +``` + +Why do we usually make a partial function? + +The benefit is that we can create an independent function with a readable name (`double`, `triple`). We can use it and not provide the first argument every time as it's fixed with `bind`. + +In other cases, partial application is useful when we have a very generic function and want a less universal variant of it for convenience. + +For instance, we have a function `send(from, to, text)`. Then, inside a `user` object we may want to use a partial variant of it: `sendTo(to, text)` that sends from the current user. + +## Going partial without context + +What if we'd like to fix some arguments, but not the context `this`? For example, for an object method. + +The native `bind` does not allow that. We can't just omit the context and jump to arguments. + +Fortunately, a function `partial` for binding only arguments can be easily implemented. + +Like this: + +```js run +*!* +function partial(func, ...argsBound) { + return function(...args) { // (*) + return func.call(this, ...argsBound, ...args); + } +} +*/!* + +// Usage: +let user = { + firstName: "John", + say(time, phrase) { + alert(`[${time}] ${this.firstName}: ${phrase}!`); + } +}; + +// add a partial method with fixed time +user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes()); + +user.sayNow("Hello"); +// Something like: +// [10:00] John: Hello! +``` + +The result of `partial(func[, arg1, arg2...])` call is a wrapper `(*)` that calls `func` with: +- Same `this` as it gets (for `user.sayNow` call it's `user`) +- Then gives it `...argsBound` -- arguments from the `partial` call (`"10:00"`) +- Then gives it `...args` -- arguments given to the wrapper (`"Hello"`) + +So easy to do it with the spread syntax, right? + +Also there's a ready [_.partial](https://lodash.com/docs#partial) implementation from lodash library. + +## Summary +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bind genelde obje metodlarındaki `this`'in sabitlenmesi amacıyla kullanılır, sonrasında istenilen yere iletilebilir. `setTimeout` örneği gibi. `bind`'in modern geliştirmede kullanılmasının bir çok nedeni vardır bunlara ilerleyen konularda değineceğiz. +<<<<<<< HEAD +======= +Usually we apply `bind` to fix `this` for an object method, so that we can pass it somewhere. For example, to `setTimeout`. + +When we fix some arguments of an existing function, the resulting (less universal) function is called *partially applied* or *partial*. + +Partials are convenient when we don't want to repeat the same argument over and over again. Like if we have a `send(from, to)` function, and `from` should always be the same for our task, we can get a partial and go on with it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md index 5b3e2fec8..a00625add 100644 --- a/1-js/06-advanced-functions/12-arrow-functions/article.md +++ b/1-js/06-advanced-functions/12-arrow-functions/article.md @@ -2,9 +2,15 @@ Ok fonksiyonlarının tekrardan üzerinden geçelim. +<<<<<<< HEAD Ok fonksiyonları sadece basit şeylerin kolayca yazılması için kullanılmaz. JavaScript'te bir sürü başka yerde çalıştırılması gereken kolayca yazılacak fonksiyonlara ihtiyacımız olabilir, +======= +Arrow functions are not just a "shorthand" for writing small stuff. They have some very specific and useful features. + +JavaScript is full of situations where we need to write a small function that's executed somewhere else. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin: @@ -15,6 +21,10 @@ JavaScript'te bir sürü başka yerde çalıştırılması gereken kolayca yazı Bir fonksiyon yaratıp bunu başka bir yerlere iletmek JavaScript'in ruhuna tam da uyan bir işlemdir. Böyle fonksiyonlarda var olan kaynağın ( context) kaybolması istenmez. +<<<<<<< HEAD +======= +And in such functions we usually don't want to leave the current context. That's where arrow functions come in handy. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Ok fonksiyonlarının "this"'i yoktur. @@ -50,8 +60,13 @@ let group = { showList() { *!* this.students.forEach(function(student) { +<<<<<<< HEAD // Hata: 'title' özelliği tanımsız. alert(this.title + ': ' + student) +======= + // Error: Cannot read property 'title' of undefined + alert(this.title + ': ' + student); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 }); */!* } @@ -85,7 +100,7 @@ Var olan `this` ve `argümanlar` ile çağrıyı yönelendirmek istediğimizde ```js run function defer(f, ms) { return function() { - setTimeout(() => f.apply(this, arguments), ms) + setTimeout(() => f.apply(this, arguments), ms); }; } @@ -119,5 +134,14 @@ Ok fonksiyonları: - `new` ile çağırılamaz. - `super` yok. Bunu henüz işlemedik, ilerleyen bölümünde inceleyeceğiz. +<<<<<<< HEAD Bunların nedeni kısa ve kendi "kaynağı" olmayan ve dış kaynağı kullanacak fonksiyonlar yaratılmak istenmesindendir. Bu noktada gerçekten beklendiği gibi bir etki yapmatadır. +======= +- Do not have `this` +- Do not have `arguments` +- Can't be called with `new` +- They also don't have `super`, but we didn't study it yet. We will on the chapter + +That's because they are meant for short pieces of code that do not have their own "context", but rather work in the current one. And they really shine in that use case. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md index 628ba7997..ae76cc0fe 100644 --- a/1-js/07-object-properties/01-property-descriptors/article.md +++ b/1-js/07-object-properties/01-property-descriptors/article.md @@ -3,7 +3,11 @@ Objelerin özellikleri saklayabildiğini biliyorsunuz. +<<<<<<< HEAD Şimdiye kadar özellik basit "anahtar-değer" ikilisiydi. Fakat objenin özelliği aslında bundan daha karmaşık ve daha farklılaştırılabilir özellikler taşımaktadır. +======= +Until now, a property was a simple "key-value" pair to us. But an object property is actually a more flexible and powerful thing. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özellik Bayrakları @@ -13,13 +17,25 @@ Obje özellikleri **`değer`** dışında, 3 özelliğe sahiptir ( bunlara "bayr - **`sayılabilir`** -- eğer `true` ise döngü içinde listelenmiştir, aksi halde listelenmemiştir. - **`ayarlanabilir`** -- eğer `true` ise özellik silinebilir ve nitelikler ( attributes ) değiştirilebilir, diğer türlü değiştirilemez. +<<<<<<< HEAD Bunları henüz görmediniz, genel olarak da zaten pek gösterilmezler. Bir özellik yarattığınızda "normal yolla" bu değerlerin tümü `true` olarak ayarlanır. Fakat biz bunları istediğimiz zaman değiştirebiliriz. +======= +- **`writable`** -- if `true`, the value can be changed, otherwise it's read-only. +- **`enumerable`** -- if `true`, then listed in loops, otherwise not listed. +- **`configurable`** -- if `true`, the property can be deleted and these attributes can be modified, otherwise not. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 İlk önce bu bayraklar nasıl alınır buna bakalım: [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) metodu bir özellik hakkındaki *tüm* bilgilerin sorgulanabilmesini sağlar. +<<<<<<< HEAD Yazımı: +======= +The method [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) allows to query the *full* information about a property. + +The syntax is: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName); ``` @@ -53,7 +69,11 @@ alert( JSON.stringify(descriptor, null, 2 ) ); ``` Bayrakları değiştirmek için [Object.defineProperty](mdn:js/Object/defineProperty) kullanılabilir. +<<<<<<< HEAD Yazımı: +======= +To change the flags, we can use [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js @@ -61,10 +81,17 @@ Object.defineProperty(obj, propertyName, descriptor) ``` `obj`, `propertyName` +<<<<<<< HEAD : Üzerinde çalışılacak obje ve özellik. `descriptor` : Uygulanacak özellik tanımlayıcı +======= +: The object and its property to apply the descriptor. + +`descriptor` +: Property descriptor object to apply. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer özellik var ise `defineProperty` bu özelliğin bayraklarını günceller. Diğer türlü, bu özelliği yaratır ve verilen bayrakları ayarlar. Bu durumda eğer bayrak verilmemiş ise `false` kabul edilir. @@ -97,9 +124,15 @@ Bunu "normal yoll" yaratılmış `user.name` ile karşılaştırdığınızda t Şimdi bu bayrakların etkilerini inceleyebiliriz. +<<<<<<< HEAD ## Salt Oku `user.name`'i sadece okunabilir yapmak için `writable` bayrağının değiştirilmesi gerekir. +======= +## Non-writable + +Let's make `user.name` non-writable (can't be reassigned) by changing `writable` flag: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let user = { @@ -113,35 +146,57 @@ Object.defineProperty(user, "name", { }); *!* +<<<<<<< HEAD user.name = "Pete"; // Error: Salt okunur özelliğe değer atanamaz. +======= +user.name = "Pete"; // Error: Cannot assign to read only property 'name' +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* ``` Artık kimse kendi `defineProperty` metodunu yazmadıkça kullanıcının ismini değiştiremez. +<<<<<<< HEAD Aynı işlem bir `özellik` olmadığı durumda: +======= +Now no one can change the name of our user, unless they apply their own `defineProperty` to override ours. + +```smart header="Errors appear only in strict mode" +In the non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict. +``` + +Here's the same example, but the property is created from scratch: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let user = { }; Object.defineProperty(user, "name", { *!* +<<<<<<< HEAD value: "Pete", // yeni özellikler için neyin doğru olduğu özellikle belirtilmelidir. +======= + value: "John", + // for new properties we need to explicitly list what's true +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 enumerable: true, configurable: true */!* }); -alert(user.name); // Pete -user.name = "Alice"; // Error +alert(user.name); // John +user.name = "Pete"; // Error ``` - ## Non-enumerable Şimdi `user`'a `toString` metodu ekleyelim. +<<<<<<< HEAD Normalde `toString` objeler için non-enumerable'dır yani for ile objenin özelliklerini dönerken görünmez. Fakat bu özellikği kendiniz eklerseniz `for..in` içeriisnde görünür. Şu şekilde: +======= +Normally, a built-in `toString` for objects is non-enumerable, it does not show up in `for..in`. But if we add a `toString` of our own, then by default it shows up in `for..in`, like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let user = { @@ -154,7 +209,12 @@ let user = { // Varsayılan olarak, var olan özelliklerimiz görünecektir. for(let key in user) alert(key); // name, toString ``` +<<<<<<< HEAD Eğer beğenmiyorsanız, `enumerable:false`'u ayarlayabilirsiniz. Böylece `for..in` döngüsünün içerisinde normalde olduğu gibi görünmez olur: +======= + +If we don't like it, then we can set `enumerable:false`. Then it won't appear in a `for..in` loop, just like the built-in one: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let user = { @@ -183,10 +243,16 @@ alert(Object.keys(user)); // name ## Non-configurable ( Ayarlanamaz ) +<<<<<<< HEAD `configurable:false` bayrağı bazen varsayılan objeler ve özellikler için standart olarak gelir. Bir ayarlanamayan özellik silinemez veya `defineProperty` ile değiştirilemez. Örneğin, `MATH.PI` hem sadece okunabilir, hem döngü içinde görünmez ( non-enumerable) hem de değiştirilemez: +======= +A non-configurable property can't be deleted, its attributes can't be modified. + +For instance, `Math.PI` is non-writable, non-enumerable and non-configurable: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI'); @@ -204,23 +270,61 @@ alert( JSON.stringify(descriptor, null, 2 ) ); Öyleyse, `Math.PI` hem değiştirilemez hem de üzerine yazılamaz. ```js run +<<<<<<< HEAD Math.PI = 3; // Hatta +======= +Math.PI = 3; // Error, because it has writable: false +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 // delete Math.PI 'de çalışmayacaktır. ``` Bir özelliği değiştirilemez yapmak tek yönlü bir yoldu. Bunu geri çeviremeyiz çünkü `defineProperty` ayarlanamaz özellikler üzerinde çalışmaz. +<<<<<<< HEAD Burada `user.name` tamamen mühürlü bir sabit yapılmaktadır: +======= +We also can't change `Math.PI` to be `writable` again: ```js run -let user = { }; +// Error, because of configurable: false +Object.defineProperty(Math, "PI", { writable: true }); +``` + +There's absolutely nothing we can do with `Math.PI`. + +Making a property non-configurable is a one-way road. We cannot change it back with `defineProperty`. + +**Please note: `configurable: false` prevents changes of property flags and its deletion, while allowing to change its value.** + +Here `user.name` is non-configurable, but we can still change it (as it's writable): +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + +```js run +let user = { + name: "John" +}; + +Object.defineProperty(user, "name", { + configurable: false +}); + +user.name = "Pete"; // works fine +delete user.name; // Error +``` + +And here we make `user.name` a "forever sealed" constant, just like the built-in `Math.PI`: + +```js run +let user = { + name: "John" +}; Object.defineProperty(user, "name", { - value: "John", writable: false, configurable: false }); +<<<<<<< HEAD *!* // user.name veya bayrağı değiştirilemez. // hiçbiri çalışmayacaktır: @@ -233,11 +337,28 @@ Object.defineProperty(user, "name", {writable: true}); // Error ```smart header="Hatalar sadece use strict ile görünür." Sıkı olmayan modda, sadece okunabilir özelliklerin üzerine yazarsanız bir hata görmezsiniz. Fakat yine de işleminiz başarılı olmaz. Yapmamanız gereken bir aksiyonda sadece görmezden gelinir. +======= +// won't be able to change user.name or its flags +// all this won't work: +user.name = "Pete"; +delete user.name; +Object.defineProperty(user, "name", { value: "Pete" }); +``` + +```smart header="The only attribute change possible: writable true -> false" +There's a minor exception about changing flags. + +We can change `writable: true` to `false` for a non-configurable property, thus preventing its value modification (to add another layer of protection). Not the other way around though. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` ## Object.defineProperties +<<<<<<< HEAD [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties) metodu birçok metodun tek bir seferde tanımlanmasını sağlar. +======= +There's a method [Object.defineProperties(obj, descriptors)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) that allows to define many properties at once. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yazımı: @@ -261,7 +382,11 @@ Object.defineProperties(user, { ## Object.getOwnPropertyDescriptors +<<<<<<< HEAD Tüm özelliklerin tanımlarını bir defada almak için [Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors) metodunu kullanabilirsiniz. +======= +To get all property descriptors at once, we can use the method [Object.getOwnPropertyDescriptors(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors). +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `Object.defineProperties` ile birlikte "bayrak-farkında" olacak şekilde objenin klonlanması için kullanılabilir: @@ -286,6 +411,7 @@ Diğer bir fark ise `for..in` sembolik özellikleri görmezden gelir. Fakat `Obj Bunun ile birlikte *tüm* objeyi limitleyen metodlar bulunmaktadır: +<<<<<<< HEAD [Object.preventExtensions(obj)](mdn:js/Object/preventExtensions) : Objeye özelliklerin eklenmesini engeller. @@ -305,5 +431,26 @@ Bunlar için testsler vardır: [Object.isFrozen(obj)](mdn:js/Object/isFrozen) : Eüer özellik ekleme/silme/değiştirme engellenmiş ve tüm özellikler `configurable:false, writable:false` ise `true` döndür. +======= +[Object.preventExtensions(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions) +: Forbids the addition of new properties to the object. + +[Object.seal(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal) +: Forbids adding/removing of properties. Sets `configurable: false` for all existing properties. + +[Object.freeze(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) +: Forbids adding/removing/changing of properties. Sets `configurable: false, writable: false` for all existing properties. + +And also there are tests for them: + +[Object.isExtensible(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible) +: Returns `false` if adding properties is forbidden, otherwise `true`. + +[Object.isSealed(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed) +: Returns `true` if adding/removing properties is forbidden, and all existing properties have `configurable: false`. + +[Object.isFrozen(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen) +: Returns `true` if adding/removing/changing properties is forbidden, and all current properties are `configurable: false, writable: false`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu metodlar pratikte çok az kullanılır. diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md index f5853e509..de1ac40cd 100644 --- a/1-js/07-object-properties/02-property-accessors/article.md +++ b/1-js/07-object-properties/02-property-accessors/article.md @@ -1,11 +1,19 @@ # Getter ve Setter Özellikleri ( Alıcılar ve Ayarlayıcılar ) +<<<<<<< HEAD İki türlü özellik mevcuttur. Bunlardan ilki *veri özellikleri*. Bunu zaten biliyorsunuz. Aslında şimdiye kadar kullandığınız tüm özellikler *veri özellikleri*'dir. İkinci tip özellikler ise *erişim özellikleri*'dir. Bunlar değerleri almak(get) ve ayarlamak(set) için kullanılan fonksiyonlardır, dışarıdaki koddan sanki bir özellikmiş gibi görünürler. +======= +There are two kinds of object properties. + +The first kind is *data properties*. We already know how to work with them. All properties that we've been using until now were data properties. + +The second type of properties is something new. It's *accessor properties*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Alıcılar ve Ayarlayıcılar @@ -28,13 +36,18 @@ Alıcı metodlar `obj.propName` okunduğunda, ayarlayıcı metodlar ise atama ya Örneğin `user` objemiz olsun ve bunun `name` ve `surname` özellikleri olsun: -```js run +```js let user = { name: "John", surname: "Smith" }; ``` +<<<<<<< HEAD "fullName" adında bir özellik eklemek istenirser, elbette var olan kodu kopyala yapıştır yapmayacağız bunun yerine erişim özelliği kullanabiliriz: +======= + +Now we want to add a `fullName` property, that should be `"John Smith"`. Of course, we don't want to copy-paste existing information, so we can implement it as an accessor: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let user = { @@ -53,9 +66,27 @@ alert(user.fullName); // John Smith */!* ``` +<<<<<<< HEAD Dışardan, bu özellik normal görünür. Aslında fikir de tam olarak budur. Biz `user.fullName` 'i fonksiyon olarak çağırmıyoruz. Onu normal bir şekilde özellikmiş gibi okuyoruz. Alıcı perdenin arkasında çalışıyor. Şu anda `fullName`'in sadece alıcısı var. Eğer `user.fullName=` şeklinde atamaya çalışırsanız hata alırsınız. +======= +From the outside, an accessor property looks like a regular one. That's the idea of accessor properties. We don't *call* `user.fullName` as a function, we *read* it normally: the getter runs behind the scenes. + +As of now, `fullName` has only a getter. If we attempt to assign `user.fullName=`, there will be an error: + +```js run +let user = { + get fullName() { + return `...`; + } +}; + +*!* +user.fullName = "Test"; // Error (property has only a getter) +*/!* +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bunu düzeltmek için ayarlayıcı metodu eklemek gerekmektedir: @@ -83,6 +114,7 @@ alert(user.surname); // Cooper ``` Şimdi yeni bir "sanal" özelliğimiz oldu. Okunabiliyor, yazılabiliyor fakat aslında yok. +<<<<<<< HEAD ```smart header="Erişim özellikleri sadece get/set ile erişilebilir" Bir özellik ya "veri özelliği" ya da "erişim özelliği" olabilir, aynı anda ikisi olamaz. @@ -92,14 +124,25 @@ Bir özellik `get prop()` ile veya `set prop()` ile tanımlanmışsa, artık eri Bazen sadece ayarlayıcı veya alıcı olabilir. Fakat böyle bir durumda özellik okunabilir veya yazılabilir olmaz. Her ikisinin de yazılmış olması gerekir. ``` +======= +As the result, we have a "virtual" property `fullName`. It is readable and writable. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 +<<<<<<< HEAD ## Erişim Tanımlayıcıları Erişim tanımlayıcıları normal veri özelliklerine göre daha farklıdır. Erişim özellikleri için `deger` ve `yazılabilir` yoktur, bunun yerine `get` ve `set` fonksiyonları vardır. Öyleyse erişim tanımlayıcıları şunlara sahiptir: +======= +Descriptors for accessor properties are different from those for data properties. + +For accessor properties, there is no `value` or `writable`, but instead there are `get` and `set` functions. + +That is, an accessor descriptor may have: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - **`get`** -- parametresi olmayan fonksiyon, sadece özellik okunduğunda çalışır. - **`set`** -- bir parametreli fonksiyon, özellik ayarlanmak istendiğinde çalışır. @@ -132,7 +175,13 @@ for(let key in user) alert(key); ``` Tekrar hatırlatmakta fayda var, bir özelliklik ya erişim özelliği veya veri özelliği olabilir, ikisi aynı anda olamaz. +<<<<<<< HEAD Aynı tanımlayıcıda eğer hem `get` hem de `value` değerini kullanırsak aşağıdaki hata meydana gelir: +======= +Please note that a property can be either an accessor (has `get/set` methods) or a data property (has a `value`), not both. + +If we try to supply both `get` and `value` in the same descriptor, there will be an error: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run *!* @@ -149,9 +198,15 @@ Object.defineProperty({}, 'prop', { ## Akıllıca getters/setters kullanmak +<<<<<<< HEAD Getter/Setter "gerçek" özelliklerin üzerinde daha iyi kontrol amacıyla kurulabilir. Örneğin, `user` gibi çok kısa isimler için `name` özelliğini `_name` içerisinde tutabilirsiniz. Sonrasında atamaları setter'da filteleyebilirsiniz: +======= +Getters/setters can be used as wrappers over "real" property values to gain more control over operations with them. + +For instance, if we want to forbid too short names for `user`, we can have a setter `name` and keep the value in a separate property `_name`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let user = { @@ -175,11 +230,24 @@ user.name = ""; // İsim çok kısa... ``` Teknik olarak, dışarıdan hala `user._name` ile erişilebilir. Fakat genel bir kural olarak `"_"` ile başlayan özellikler içte kullanılan değişkenlerdir ve dışarıdan hiç bir zaman erişilmemelidir. +<<<<<<< HEAD ## Uyumluluk için kullanma Getter/setter fikrinin amacı aslında "normal" veri özelliklerinin kontrolünü her an elde tutabilmektir. Örneğin, kullanıcı objesini `name` ve `age` özellikleri ekleyelim: +======= +So, the name is stored in `_name` property, and the access is done via getter and setter. + +Technically, external code is able to access the name directly by using `user._name`. But there is a widely known convention that properties starting with an underscore `"_"` are internal and should not be touched from outside the object. + + +## Using for compatibility + +One of the great uses of accessors is that they allow to take control over a "regular" data property at any moment by replacing it with a getter and a setter and tweak its behavior. + +Imagine we started implementing user objects using data properties `name` and `age`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function User(name, age) { @@ -206,7 +274,15 @@ Peki eski `age` özelliği ne olacak ? Her yerde bunu arayıp düzeltebiliriz, fakat bu zaman alır ve kod başkaları tarafından yazıldıysa zor olur. Ayrıca `user` objesinin içinde `age` özelliği pek de fena bir fikir sayılmaz, değil mi? Aslında bazı yerlerde tam da istediğimiz `age`'dir. +<<<<<<< HEAD `age` için bir getter yazmak aslında bu problemi ortadan kaldırır. +======= +We can try to find all such places and fix them, but that takes time and can be hard to do if that code is used by many other people. And besides, `age` is a nice thing to have in `user`, right? + +Let's keep it. + +Adding a getter for `age` solves the problem: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run no-beautify function User(name, birthday) { diff --git a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md index fdbd5a74b..23a988270 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md +++ b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md @@ -6,7 +6,11 @@ importance: 5 Görev iki bölümden oluşmaktadır. +<<<<<<< HEAD Bir objemiz var: +======= +Given the following objects: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js let head = { diff --git a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md index 9dda8be0a..054eb620f 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md +++ b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md @@ -2,5 +2,11 @@ Çünkü `this` noktadan önceki objeyi verir. Bu durumda `rabbit.eat()` `rabbit` üzerinde değişikliğe neden olur. +<<<<<<< HEAD Özelliğe bakma ve çalıştırma iki ayrı şeydir. -`rabbit.eat` önce prototipte bulunur sonra `this=rabbit` ile çalıştırılır. \ No newline at end of file +`rabbit.eat` önce prototipte bulunur sonra `this=rabbit` ile çalıştırılır. +======= +Property lookup and execution are two different things. + +The method `rabbit.eat` is first found in the prototype, then executed with `this=rabbit`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md index 73387f490..0b52d7451 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md +++ b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md @@ -2,8 +2,12 @@ importance: 5 --- +<<<<<<< HEAD # Nereye yazar? `animal`dan türemiş bir `rabbit`'imizi var. +======= +# Where does it write? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer `rabbit.eat()` çağırılırsa hangi obje `full` özelliğini alır: `animal` mi yoksa `rabbit` mi? diff --git a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md index ffad52bc2..af024fa45 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md +++ b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md @@ -10,7 +10,11 @@ Böylece tüm hamsterlar'ın bir tane `stomach`'i oluyor. +<<<<<<< HEAD Her defaında prototip'ten `stomach` alındığında ve sonra `stomach.push` ile `olduğu yerde` modifiye eder. +======= +Both for `lazy.stomach.push(...)` and `speedy.stomach.push()`, the property `stomach` is found in the prototype (as it's not in the object itself), then the new data is pushed into it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Aklınızda bulunsun basit bir atamada `this.stomach=` gibi basit atamada gerçekleşmez. @@ -44,7 +48,11 @@ alert( lazy.stomach ); // Now all works fine, because `this.stomach=` does not perform a lookup of `stomach`. The value is written directly into `this` object. +<<<<<<< HEAD Also we can totally evade the problem by making sure that each hamster has his own stomach: +======= +Also we can totally avoid the problem by making sure that each hamster has their own stomach: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let hamster = { @@ -77,4 +85,4 @@ alert( speedy.stomach ); // apple alert( lazy.stomach ); // ``` -As a common solution, all properties that describe the state of a particular object, like `stomach` above, are usually written into that object. That prevents such problems. +As a common solution, all properties that describe the state of a particular object, like `stomach` above, should be written into that object. That prevents such problems. diff --git a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md index 519a9889e..ebcc88277 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md +++ b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md @@ -2,11 +2,19 @@ importance: 5 --- +<<<<<<< HEAD # Neden iki hamster da full'dür? +======= +# Why are both hamsters full? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `speedy` ve `lazy` diye `hamster`'objesinden türemiş iki tane objemiz olsun. +<<<<<<< HEAD Biz bir tanesini beslediğimizde, diğeri de full oluyor. Bunun nedeni nedir, nasıl düzeltilir? +======= +When we feed one of them, the other one is also full. Why? How can we fix it? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let hamster = { diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index bda161efc..af61518fd 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -10,13 +10,23 @@ Programlarken genelde bir şeyi alır ve bunu genişletmek isteriz. Javascript objeleri gizli bir özellik olan `[[Prototype]]` özelliğine sahiptirler. Bu `null` olabilir veya başka objeye referans verebilir. Referans verilen obje "prototip" olarak adlandırılır. +<<<<<<< HEAD ![prototip](object-prototype-empty.svg) `[[Prototip]]`'in "büyülü" bir anlamı bulunmaktadır. Objeden bir özellik okunmak istendiğinde, ve bu obje bulunamadığında JavaScript bunu otomatik olarak prototip'ten alır. Programlamada buna `prototip kalıtımı` denir. Birçok dil özelliği ve programlama tekniği bunun üzerine kuruludur. +======= +![prototype](object-prototype-empty.svg) + +When we read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, this is called "prototypal inheritance". And soon we'll study many examples of such inheritance, as well as cooler language features built upon it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `[[Prototpe]]` gizli bir özelliktir, fakat bunu ayarlamanın bir çok yolu vardır. +<<<<<<< HEAD Bunlardan biri `__proto__` kullanmaktır: +======= +One of them is to use the special name `__proto__`, like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let animal = { @@ -27,17 +37,23 @@ let rabbit = { }; *!* -rabbit.__proto__ = animal; +rabbit.__proto__ = animal; // sets rabbit.[[Prototype]] = animal */!* ``` +<<<<<<< HEAD Aklınızda bulunsun `__proto__` `[[Prototype]]` ile *aynı değildir*. Bunun için alıcı/ayarlayıcı ( getter/setter)'dır. Bunun hakkında ilerleyen bölümlerde daha fazla açıklama yapılacaktır fakat şimdilik `__proto__` yeterlidir. Örneğin `rabbit` adında bir özelliğe arasanız ve bu özellik yoksa, JavaScript bunu otomatik olarak `animal`'dan alır. Örneğin: +======= +Now if we read a property from `rabbit`, and it's missing, JavaScript will automatically take it from `animal`. -```js run +For instance: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + +```js let animal = { eats: true }; @@ -62,7 +78,11 @@ Sonrasında `alert` `rabbit.eats` `(**)`'i okur. Bu `rabbit`'te olmadığından ![](proto-animal-rabbit.svg) +<<<<<<< HEAD Böylece "`animal`" `rabbit`'in prototip'i veya "`rabbit` prototipsel olarak `animal` kalıtımını almıştır" diyebiliriz. +======= +![](proto-animal-rabbit.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Diyelim ki `animal`'ın birçok özelliği ve metodu olsun, bunları otomatik olarak `rabbit` de kullanabilir. Bu çeşit özelliklere `kalıtılmış` özellikler denir. @@ -91,9 +111,16 @@ rabbit.walk(); // Animal walk ``` Metod prototipten otomatik olarak şu şekilde alınmıştır: +<<<<<<< HEAD ![](proto-animal-rabbit-walk.svg) Prototip zinciri daha da uzun olabilir: +======= +The method is automatically taken from the prototype, like this: +![](proto-animal-rabbit-walk.svg) + +The prototype chain can be longer: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let animal = { @@ -120,13 +147,39 @@ alert(longEar.jumps); // true (rabbit'ten gelmekte) ![](proto-animal-rabbit-chain.svg) +<<<<<<< HEAD Aslında iki tane kısıtlama bulunmaktadır: +======= +Now if we read something from `longEar`, and it's missing, JavaScript will look for it in `rabbit`, and then in `animal`. + +There are only two limitations: + +1. The references can't go in circles. JavaScript will throw an error if we try to assign `__proto__` in a circle. +2. The value of `__proto__` can be either an object or `null`. Other types are ignored. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 1. Referanslar kapalı devre olamaz. Böyle bir duurmda hata verir. 2. `__proto__`'nun değeri ya obje olur ya da `null` Diğer türlüsü ( tüm ilkel veri tipleri ) görmezden gelinir. +<<<<<<< HEAD Çok açık olsa da tekrar söylemekte yarar var. Bir obje sadece bir tane `[[Prototype]]`'a sahip olabilir. Bir objenin iki farklı objeden kalıtım alamaz. +======= + +```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`" +It's a common mistake of novice developers not to know the difference between these two. + +Please note that `__proto__` is *not the same* as the internal `[[Prototype]]` property. It's a getter/setter for `[[Prototype]]`. Later we'll see situations where it matters, for now let's just keep it in mind, as we build our understanding of JavaScript language. + +The `__proto__` property is a bit outdated. It exists for historical reasons, modern JavaScript suggests that we should use `Object.getPrototypeOf/Object.setPrototypeOf` functions instead that get/set the prototype. We'll also cover these functions later. + +By the specification, `__proto__` must only be supported by browsers. In fact though, all environments including server-side support `__proto__`, so we're quite safe using it. + +As the `__proto__` notation is a bit more intuitively obvious, we use it in the examples. +``` + +## Writing doesn't use prototype +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Kuralların Okuması/Yazılması. @@ -160,9 +213,17 @@ rabbit.walk(); // Rabbit! Bounce-bounce! ``` Artık `rabbit.wal()` metodu doğrudan kendi içerisinde bulur ve çalıştırır. Prototip kullanmaz: +<<<<<<< HEAD ![](proto-animal-rabbit-walk-2.svg) Alıcı/Ayarlayıcı için ise eğer özellik okunursa bu doğrudan prototipte okunur ve uyarılır. +======= +From now on, `rabbit.walk()` call finds the method immediately in the object and executes it, without using the prototype: + +![](proto-animal-rabbit-walk-2.svg) + +Accessor properties are an exception, as assignment is handled by a setter function. So writing to such a property is actually the same as calling a function. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin aşağıdaki `admin.fullName` özelliğine bakın: @@ -189,13 +250,20 @@ alert(admin.fullName); // John Smith (*) // Ayarlayıcılar uyarıldı! admin.fullName = "Alice Cooper"; // (**) + +alert(admin.fullName); // Alice Cooper, state of admin modified +alert(user.fullName); // John Smith, state of user protected ``` `(*)` satırında `admin.fullName` özelliği `user` prototipinde alıcıya sahiptir. Bundan dolayı çağırılır. `(**)` satırında ise ayarlayıcıya sahip olduğundan bu da çağırılır. ## "this"'in değeri +<<<<<<< HEAD Yukarıdaki örnekte aklınıza şöyle bir soru gelebilir. `set fullName(value)` içerisinde `this`'in değeri nedir? `this.name` ve `this.surname` yazılan yerlerde `admin` mi yoksa `user` mı kullanılır? +======= +An interesting question may arise in the example above: what's the value of `this` inside `set fullName(value)`? Where are the properties `this.name` and `this.surname` written: into `user` or `admin`? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Cevap basittir: `this` prototip tarafından hiç bir şekilde etkilenmez. @@ -203,7 +271,11 @@ Cevap basittir: `this` prototip tarafından hiç bir şekilde etkilenmez. Öyleyese aslında ayarlayıcı `admin`'i `this` olarak kullanır. `user`'ı değil. +<<<<<<< HEAD Çok büyük bir objeye ve buna ait birçok metoda, kalıtıma sahip olabileceğimizden dolayı bu aslında çok önemli bir olaydır. Sonrasında büyük objenin değil kalıtılmış objelerin metodlarını çalıştırabilir ve bunların özelliklerini değiştirebiliriz. +======= +That is actually a super-important thing, because we may have a big object with many methods, and have objects that inherit from it. And when the inheriting objects run the inherited methods, they will modify only their own states, not the state of the big object. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin burada `animal` aslında "metod deposu"'nu temsil etmektedir. `rabbit` ise bunu kullanır. @@ -231,20 +303,112 @@ let rabbit = { rabbit.sleep(); alert(rabbit.isSleeping); // true +<<<<<<< HEAD alert(animal.isSleeping); // undefined (prototipte böyle bir özellik bulunmamaktadır.) +======= +alert(animal.isSleeping); // undefined (no such property in the prototype) +``` + +The resulting picture: + +![](proto-animal-rabbit-walk-3.svg) + +If we had other objects, like `bird`, `snake`, etc., inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method call would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects. + +As a result, methods are shared, but the object state is not. + +## for..in loop + +The `for..in` loop iterates over inherited properties too. + +For instance: + +```js run +let animal = { + eats: true +}; + +let rabbit = { + jumps: true, + __proto__: animal +}; + +*!* +// Object.keys only returns own keys +alert(Object.keys(rabbit)); // jumps +*/!* + +*!* +// for..in loops over both own and inherited keys +for(let prop in rabbit) alert(prop); // jumps, then eats +*/!* +``` + +If that's not what we want, and we'd like to exclude inherited properties, there's a built-in method [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): it returns `true` if `obj` has its own (not inherited) property named `key`. + +So we can filter out inherited properties (or do something else with them): + +```js run +let animal = { + eats: true +}; + +let rabbit = { + jumps: true, + __proto__: animal +}; + +for(let prop in rabbit) { + let isOwn = rabbit.hasOwnProperty(prop); + + if (isOwn) { + alert(`Our: ${prop}`); // Our: jumps + } else { + alert(`Inherited: ${prop}`); // Inherited: eats + } +} +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` Sonuç görseli: +<<<<<<< HEAD ![](proto-animal-rabbit-walk-3.svg) +======= +Here we have the following inheritance chain: `rabbit` inherits from `animal`, that inherits from `Object.prototype` (because `animal` is a literal object `{...}`, so it's by default), and then `null` above it: + +![](rabbit-animal-object.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer `bird`, `sname` gibi `animal`'dan miras alan objelere sahip olsaydık bunlar da `animal`'in metodlarına erişebilirlerdi. Fakat her metoddaki `this` bağlı bulunduğu objeye göre çalışırdı. Yani noktadan önceki metoda göre, `animal`'e göre değil. Bundan dolayı ne zaman `this`'e veri yazılsa o objelerin içerisine yazılır. +<<<<<<< HEAD Sonuç olarak metodlar paylaşılsa bile objelerin durumları paylaşılmaz. +======= +...But why does `hasOwnProperty` not appear in the `for..in` loop like `eats` and `jumps` do, if `for..in` lists inherited properties? + +The answer is simple: it's not enumerable. Just like all other properties of `Object.prototype`, it has `enumerable:false` flag. And `for..in` only lists enumerable properties. That's why it and the rest of the `Object.prototype` properties are not listed. + +```smart header="Almost all other key/value-getting methods ignore inherited properties" +Almost all other key/value-getting methods, such as `Object.keys`, `Object.values` and so on ignore inherited properties. + +They only operate on the object itself. Properties from the prototype are *not* taken into account. +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet +<<<<<<< HEAD - JavaScript'te tüm objelerin gizli `[[Prototype]]`'ı bulunmaktaıd. Bu özellik ya başka bir objedir veya `null`'dur. - Erişmek için `obj.__proto__` kullanılabilir. (elbette diğer yollar da mevcuttur, ilerde bunlara değineceğiz.) - `[[Prototype]]` tarafından temsil edilen objeye "prototip" denir. - Eğer bir `obj`'nin özelliğini okumak veya bir metodunu çağırmak istersek ve o metod yok ise JavaScript bunu prototipte bulmaya çalışır. Yazma/Silme operasyonları doğrudan obje üzerinde çalıştırılır. Özellik ayarlayıcı olmadığı sürece prototip kullanılmaz. -- Eğer `obj.method()`'u çağırırsak ve `method` prototipten alınırsa `this` yine de `obj`'i temsil eder. Bundan dolayı metodlar her zaman o anki obje ile çalışırlar miras kalsalar bile. \ No newline at end of file +- Eğer `obj.method()`'u çağırırsak ve `method` prototipten alınırsa `this` yine de `obj`'i temsil eder. Bundan dolayı metodlar her zaman o anki obje ile çalışırlar miras kalsalar bile. +======= +- In JavaScript, all objects have a hidden `[[Prototype]]` property that's either another object or `null`. +- We can use `obj.__proto__` to access it (a historical getter/setter, there are other ways, to be covered soon). +- The object referenced by `[[Prototype]]` is called a "prototype". +- If we want to read a property of `obj` or call a method, and it doesn't exist, then JavaScript tries to find it in the prototype. +- Write/delete operations act directly on the object, they don't use the prototype (assuming it's a data property, not a setter). +- If we call `obj.method()`, and the `method` is taken from the prototype, `this` still references `obj`. So methods always work with the current object even if they are inherited. +- The `for..in` loop iterates over both its own and its inherited properties. All other key/value-getting methods only operate on the object itself. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md index c47256bdc..9be41e00c 100644 --- a/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md +++ b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md @@ -8,10 +8,17 @@ Cevaplar: 2. `false`. +<<<<<<< HEAD Objeler referanslar ile atanır. `Rabbit.prototype`'tan alınan obje kopya değildir, hala hem `Rabbit.prototype` hem de `rabbit`'in `[[Prototype]]`'ı tarafından referans edilir. Bundan dolayı referans edilen herhangi bir yerden içeriik değişirse bu diğerini de etkiler. +======= + Objects are assigned by reference. The object from `Rabbit.prototype` is not duplicated, it's still a single object referenced both by `Rabbit.prototype` and by the `[[Prototype]]` of `rabbit`. + + So when we change its content through one reference, it is visible through the other one. + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 3. `true`. Tüm `delete` operasyonları objeye doğrudan etki eder. Mesela `delete rabbit.eats` `rabbit`'ten `eats` özelliğini silmeye çalışır fakat yapaz. Bundan dolayı bu operasyonun hiç bir etkisi olayacaktır. diff --git a/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md index 1fc7a33e9..5b431c10b 100644 --- a/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md +++ b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md @@ -19,7 +19,12 @@ let rabbit = new Rabbit(); alert( rabbit.eats ); // true ``` +<<<<<<< HEAD 1. Bir tane daha karakter dizisi ekledik, `alert` ne gösterir? +======= + +1. We added one more string (emphasized). What will `alert` show now? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function Rabbit() {} @@ -52,7 +57,11 @@ alert( rabbit.eats ); // true alert( rabbit.eats ); // ? ``` +<<<<<<< HEAD 3. Ya böyle ? ( bir satır değiştirildi ) +======= +3. And like this (replaced one line)? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function Rabbit() {} diff --git a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md index 43190e163..372d50dd6 100644 --- a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md +++ b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md @@ -15,7 +15,7 @@ alert( user2.name ); // Pete (worked!) It worked, because `User.prototype.constructor == User`. -..But if someone, so to say, overwrites `User.prototype` and forgets to recreate `"constructor"`, then it would fail. +..But if someone, so to speak, overwrites `User.prototype` and forgets to recreate `constructor` to reference `User`, then it would fail. For instance: @@ -38,7 +38,12 @@ Why `user2.name` is `undefined`? Here's how `new user.constructor('Pete')` works: 1. First, it looks for `constructor` in `user`. Nothing. -2. Then it follows the prototype chain. The prototype of `user` is `User.prototype`, and it also has nothing. -3. The value of `User.prototype` is a plain object `{}`, its prototype is `Object.prototype`. And there is `Object.prototype.constructor == Object`. So it is used. +2. Then it follows the prototype chain. The prototype of `user` is `User.prototype`, and it also has no `constructor` (because we "forgot" to set it right!). +3. Going further up the chain, `User.prototype` is a plain object, its prototype is the built-in `Object.prototype`. +4. Finally, for the built-in `Object.prototype`, there's a built-in `Object.prototype.constructor == Object`. So it is used. -At the end, we have `let user2 = new Object('Pete')`. The built-in `Object` constructor ignores arguments, it always creates an empty object -- that's what we have in `user2` after all. +Finally, at the end, we have `let user2 = new Object('Pete')`. + +Probably, that's not what we want. We'd like to create `new User`, not `new Object`. That's the outcome of the missing `constructor`. + +(Just in case you're curious, the `new Object(...)` call converts its argument to an object. That's a theoretical thing, in practice no one calls `new Object` with a value, and generally we don't use `new Object` to make objects at all). \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md index 6f00e28b6..2145647f9 100644 --- a/1-js/08-prototypes/02-function-prototype/article.md +++ b/1-js/08-prototypes/02-function-prototype/article.md @@ -2,7 +2,11 @@ Modern JavaScript'te protitip'i `__proto__` kullanarak ( bir önceki bölümde anlatıldığı gibi ) ayarlayabiliriz. Fakat bu daha öncesinde böyle değildi. +<<<<<<< HEAD [cut] +======= +If `F.prototype` is an object, then the `new` operator uses it to set `[[Prototype]]` for the new object. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 JavaScript başlangıcından beri kalıtıma sahipti. Bu dilin çekirdek özelliklerinden biriydi. @@ -46,7 +50,12 @@ Sonuç şu şekildedir: Görselde `"prototip"` yataydaki oktur, sıranda bir özelliktir. `[[Prototype]]` ise dikeydir ve `rabbit`'in `animal`'dan miras aldığını ifade eder. +<<<<<<< HEAD ## Sıradan F.prototype, yapıcı( contructor) özelliği +======= +```smart header="`F.prototype` only used at `new F` time" +`F.prototype` property is only used when `new F` is called, it assigns `[[Prototype]]` of the new object. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Her fonksiyonun `"prototype"` özelliği bulunmaktadır. Siz belirtmeseniz bile bu geçerlidir. @@ -158,11 +167,19 @@ Rabbit.prototype = { Bu bölümde kısaca yapıcı fonksiyonlar ile oluşturulan objelerin `[[Prototip]]`'lerinin nasıl ayarlanabileceğinden bahsettik. İlerde bunların daha gelişmişini programlama kalıpları üzerinde öğreneceksiniz. +<<<<<<< HEAD Herşey aslında çok basit, birkaç cümle ile daha net anlatmak gerekirse: - `F.prototype` özelliği `[[Prototype]]` ile aynı değildir. `F.prototype` aslında `new F()` çağırıldığında `[[Prototype]]`'ı ayarlar. - `F.prototype` değeri ya obje ya da null olmalıdır: diğer değerler çalışmaz. - `"prototype"` özelliği sadece bir yapıcı fonksiyona ayarlandığı ve `new` ile çağırıldığında özel etkisi olur. +======= +Everything is quite simple, just a few notes to make things clear: + +- The `F.prototype` property (don't mistake it for `[[Prototype]]`) sets `[[Prototype]]` of new objects when `new F()` is called. +- The value of `F.prototype` should be either an object or `null`: other values won't work. +- The `"prototype"` property only has such a special effect when set on a constructor function, and invoked with `new`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Normal objeler `prototype`'ın ayrı bir önemi yoktur: ```js diff --git a/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md index 5252f7bff..eae3d74e4 100644 --- a/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md +++ b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md @@ -15,3 +15,27 @@ function f(a, b) { f.defer(1000)(1, 2); // 1 sn sonra 3 görünür ``` + +Please note: we use `this` in `f.apply` to make our decoration work for object methods. + +So if the wrapper function is called as an object method, then `this` is passed to the original method `f`. + +```js run +Function.prototype.defer = function(ms) { + let f = this; + return function(...args) { + setTimeout(() => f.apply(this, args), ms); + } +}; + +let user = { + name: "John", + sayHi() { + alert(this.name); + } +} + +user.sayHi = user.sayHi.defer(1000); + +user.sayHi(); +``` diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md index bf6fa44ed..466da2d08 100644 --- a/1-js/08-prototypes/03-native-prototypes/article.md +++ b/1-js/08-prototypes/03-native-prototypes/article.md @@ -2,7 +2,11 @@ `"prototype"` özelliği JavaScript çekirdeğinde oldukça fazla kullanılmaktadır. Tüm varsayılan yapıcı fonksiyonlar bunu kullanır. +<<<<<<< HEAD Önce basit objeler, sonra daha karmaşık olanları için nasıl çalıştığını göreceğiz. +======= +First we'll see at the details, and then how to use it for adding new capabilities to built-in objects. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Object.prototype @@ -33,10 +37,16 @@ Bunu şu şekilde kontrol edebiliriz: let obj = {}; alert(obj.__proto__ === Object.prototype); // true -// obj.toString === obj.__proto__.toString == Object.prototype.toString + +alert(obj.toString === obj.__proto__.toString); //true +alert(obj.toString === Object.prototype.toString); //true ``` +<<<<<<< HEAD `Object.prototype`'ın üstünde başka bir `[[Prototype]]` yoktur. +======= +Please note that there is no more `[[Prototype]]` in the chain above `Object.prototype`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run alert(Object.prototype.__proto__); // null @@ -46,9 +56,15 @@ alert(Object.prototype.__proto__); // null `Array`, `Date`, `Function` gibi diğer gömülü objeler metodlarını prototype üzerinde tutar. +<<<<<<< HEAD Örneğin, `[1,2,3]` bir array yarattığınızda içte varsayılan `new Array()` yapıcısı kullanılır. Bundan dolayı dizi dizi objesi yeni bir objeye yazılır ve `Array.prototype` bunun prototipi olur ve metodlar sağlar. Bu hafızayı oldukça etkin kullanmaya yarar. Tanım gereği, tüm gömülü prototipler üstünde `Object.prototype`'a sahip olmalıdır. Bazen "herşey objelerden kalıtım alır" sözünü duyarsınız. +======= +For instance, when we create an array `[1, 2, 3]`, the default `new Array()` constructor is used internally. So `Array.prototype` becomes its prototype and provides methods. That's very memory-efficient. + +By specification, all of the built-in prototypes have `Object.prototype` on the top. That's why some people say that "everything inherits from objects". +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Aşağıda bunun etraflı bir görselini görebilirsiniz. @@ -99,10 +115,20 @@ alert(f.__proto__.__proto__ == Object.prototype); // true, objelerden kalıtım En karışık yapılar karakter dizileri, sayılar ve boolean ile yapılır. +<<<<<<< HEAD Hatırlayacağınız üzere bunlar obje değildirler. Fakat özelliklerine erişmeye çalıştığınızda, gömülü yapıcı obje ile geçici objeler üretilir. Bunlar `String`, `Number`, `Boolean` metodlarını sağlar ve yok olurlar. +======= +As we remember, they are not objects. But if we try to access their properties, temporary wrapper objects are created using built-in constructors `String`, `Number` and `Boolean`. They provide the methods and disappear. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu objeler gizli üretilir ve çoğu motor bunları optimize edebilir, Fakat şartname bunu tam olarak bu şekilde tanımlar. Bu objelerin metodları da prototype'ta yer alır, `String.prototype`, `Number.prototype` ve `Boolean.prototype` olarak bulunur. +<<<<<<< HEAD +======= +```warn header="Values `null` and `undefined` have no object wrappers" +Special values `null` and `undefined` stand apart. They have no object wrappers, so methods and properties are not available for them. And there are no corresponding prototypes either. +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```warn header="`null` ve `undefined` object kapsayıcılara sahip değildir. Bundan dolayı metodlar ve özellikler bunlar için mevcut değildir. Ayrıca bunlara uyan prototipler de bulunmamaktadır.``` @@ -119,11 +145,29 @@ String.prototype.show = function() { ``` Geliştirme sürecinde hangi fikirlerin gömülü olması gerektiğine dair fikrimiz olabilir. Hatta doğal prototiplere ekleme yapmak için istek duyabilirsiniz. Fakat bu genelde kötü bir fikiridir. +<<<<<<< HEAD Prototipler evrenseldir, bundan dolayı kolayca ikilik çıkarabilir. Eğer iki kütüphane `String.prototype.show` şeklinde metod eklerse bunlardan biri diğerinin üzerine yazar. Modern programlama da sadece bir koşulda doğal prototiplerin düzenlenmesine izin verilir. Buna pollyfills denir. Diğer bir deyişle eğer JavaScript şartnamesinde bir metod var fakat bu JavaScript motoru tarafından henüz desteklenmiyorsa, bunu elle yazmak ve gömülü prototipe eklemek mümkündür. Örneğin: +======= +During the process of development, we may have ideas for new built-in methods we'd like to have, and we may be tempted to add them to native prototypes. But that is generally a bad idea. + +```warn +Prototypes are global, so it's easy to get a conflict. If two libraries add a method `String.prototype.show`, then one of them will be overwriting the method of the other. + +So, generally, modifying a native prototype is considered a bad idea. +``` + +**In modern programming, there is only one case where modifying native prototypes is approved. That's polyfilling.** + +Polyfilling is a term for making a substitute for a method that exists in the JavaScript specification, but is not yet supported by a particular JavaScript engine. + +We may then implement it manually and populate the built-in prototype with it. + +For instance: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run if (!String.prototype.repeat) { // Eğer böyle bir metod yoksa @@ -144,7 +188,21 @@ alert( "La".repeat(3) ); // LaLaLa ## Prototiplerden ödünç alma +<<<<<<< HEAD bölümünde metod ödünç almadan bahsetmiştik. +======= +## Borrowing from prototypes + +In the chapter we talked about method borrowing. + +That's when we take a method from one object and copy it into another. + +Some methods of native prototypes are often borrowed. + +For instance, if we're making an array-like object, we may want to copy some `Array` methods to it. + +E.g. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function showArgs() { @@ -157,6 +215,7 @@ function showArgs() { showArgs("John", "Pete", "Alice"); // John - Pete - Alice ``` +<<<<<<< HEAD `join` `Array.prototype` içerisinde bulunduğundan dolayı, oradan doğrudan çağırabilir ve şu şekilde tekrar yazabiliriz: ```js @@ -167,11 +226,28 @@ function showArgs() { } ``` Bu daha etkin çünkü ayrıca bir dizi `[]` objesi yaratmaktan kaçınılmıştır. Fakat biraz uzun sürmüştür. +======= +It works because the internal algorithm of the built-in `join` method only cares about the correct indexes and the `length` property. It doesn't check if the object is indeed an array. Many built-in methods are like that. + +Another possibility is to inherit by setting `obj.__proto__` to `Array.prototype`, so all `Array` methods are automatically available in `obj`. + +But that's impossible if `obj` already inherits from another object. Remember, we only can inherit from one object at a time. + +Borrowing methods is flexible, it allows to mix functionalities from different objects if needed. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet +<<<<<<< HEAD - Tüm gömülü objeler aynı yapıyı paylaşır: - Metodlar prototiplerde saklanır ( `Array.prototype`, `Object.prototype`, `Date.prototype` vs. ) - Veriyi objenin kendisi tutar ( dizi elemanları, obje özellikleri, tarih vs. ) - İlkel veriler de saklayıcı objelerin prototiplerinde metodlarını tutarlar:`Number.prototype`, `String.prototype`, `Boolean.prototype`. Sadece `undefined` ve `null` için saklayıcı objeler bulunmamaktadır. -- Gömülü prototipler yeni metodlar ile değiştirilebilir. Fakat bunların değiştirilmesi önerilmez. Tek değiştirilebilir diyeceğimiz olay yeni bir standart'ın eklenmesi olabilir, JavaScript motoru henüz o özelliği uygulamamışsa bu standart'ı siz uygulayabilirsiniz. \ No newline at end of file +- Gömülü prototipler yeni metodlar ile değiştirilebilir. Fakat bunların değiştirilmesi önerilmez. Tek değiştirilebilir diyeceğimiz olay yeni bir standart'ın eklenmesi olabilir, JavaScript motoru henüz o özelliği uygulamamışsa bu standart'ı siz uygulayabilirsiniz. +======= +- All built-in objects follow the same pattern: + - The methods are stored in the prototype (`Array.prototype`, `Object.prototype`, `Date.prototype`, etc.) + - The object itself stores only the data (array items, object properties, the date) +- Primitives also store methods in prototypes of wrapper objects: `Number.prototype`, `String.prototype` and `Boolean.prototype`. Only `undefined` and `null` do not have wrapper objects +- Built-in prototypes can be modified or populated with new methods. But it's not recommended to change them. The only allowable case is probably when we add-in a new standard, but it's not yet supported by the JavaScript engine +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md index 8834487b0..64fd4f7f9 100644 --- a/1-js/08-prototypes/04-prototype-methods/article.md +++ b/1-js/08-prototypes/04-prototype-methods/article.md @@ -9,7 +9,13 @@ Bizim bildiğimizin haricinde prototipi ayarlamak ve almak için başka yönteml - [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- `obj`'nin `[[Prototype]]`'ını döndürür. - [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- `obj`'nin `[[Prototype]]`'ını `proto`'ya ayarlar. +<<<<<<< HEAD [cut] +======= +- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors. +- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj`. +- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin: @@ -24,8 +30,13 @@ let rabbit = Object.create(animal); */!* alert(rabbit.eats); // true + *!* +<<<<<<< HEAD alert(Object.getPrototypeOf(rabbit) === animal); // rabbit'in prototipini alma +======= +alert(Object.getPrototypeOf(rabbit) === animal); // true +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* *!* @@ -51,18 +62,37 @@ Tanımlayıcıların bölümünde üstünden geçilm `Object.create` kullanarak obje klonlama işlemini yapabiliriz. Bu objenin özelliklerini `for..in` ile dolanmaktan daha etkin bir yöntemdir. ```js +<<<<<<< HEAD // Objenin yüzeysel klonu +======= +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); ``` Bu tam olarak `obj`'nin aynısını verir. Tüm özellikler: dönülebilir veya dönülemez, veri özellikleri, alıcı ve ayarlayıcılar -- herşey, ayrıca doğru `[[Prototype]]` ile +<<<<<<< HEAD ## Tarihçe `[[Prototype]]`'ı ayarlayabileceğimiz yöntemleri saymaya kalsak baya zorluk yaşarız. Çok fazla yöntem bulunmaktadır. +======= +This call makes a truly exact copy of `obj`, including all properties: enumerable and non-enumerable, data properties and setters/getters -- everything, and with the right `[[Prototype]]`. + +## Brief history + +If we count all the ways to manage `[[Prototype]]`, there are a lot! Many ways to do the same thing! + +Why? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Neden? +<<<<<<< HEAD Birçok nedeni bulunmaktadır. +======= +- The `"prototype"` property of a constructor function has worked since very ancient times. +- Later, in the year 2012, `Object.create` appeared in the standard. It gave the ability to create objects with a given prototype, but did not provide the ability to get/set it. So browsers implemented the non-standard `__proto__` accessor that allowed the user to get/set a prototype at any time. +- Later, in the year 2015, `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard, to perform the same functionality as `__proto__`. As `__proto__` was de-facto implemented everywhere, it was kind-of deprecated and made its way to the Annex B of the standard, that is: optional for non-browser environments. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - Yapıcının `"prototype"` özelliği ilk javascript ortaya çıktığından beri bulunmaktadır. - 2012'de: `Object.create` bir standart olarak oturdu. Bu verilen prototip ile objeleri yaratmaya izin verdi. Fakat bunları almaya veya ayarlamaya değil. Bundan dolayı tarayıcılar bir standart olmayan `__proto__` erişimcilerini uygulayarak alıcı ve ayarlayıcılara ( get/set)'e izin verdi. @@ -70,9 +100,19 @@ Birçok nedeni bulunmaktadır. Artık bunların hepsi bizim kullanımımızdadır. +<<<<<<< HEAD Teknik olarak `[[Prototype]]`'ı istediğimiz an alma/ayarlama işi yapabiliriz. Fakat genelde bunu sadece obje yaratırken kullanır ve daha sonra düzenleme yapmayız: `rabbit`, `animal`dan kalıtım alır fakat onu değiştirmez. JavaScript motorları da bunu yüksek derecede optimize edebilir. Prototipi `Object.setPrototypeOf` veya `obj.__proto__` ile sonradan değiştirmek oldukça yavaş bir operasyondur. Ama mümkündür. ## "En basit" Objeler +======= +```warn header="Don't change `[[Prototype]]` on existing objects if speed matters" +Technically, we can get/set `[[Prototype]]` at any time. But usually we only set it once at the object creation time and don't modify it anymore: `rabbit` inherits from `animal`, and that is not going to change. + +And JavaScript engines are highly optimized for this. Changing a prototype "on-the-fly" with `Object.setPrototypeOf` or `obj.__proto__=` is a very slow operation as it breaks internal optimizations for object property access operations. So avoid it unless you know what you're doing, or JavaScript speed totally doesn't matter for you. +``` + +## "Very plain" objects [#very-plain] +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bildiğiniz gibi objeler anahtar/değer ikilisini tutan ilişkisel dizi şeklinde kullanılabilir. @@ -90,10 +130,17 @@ alert(obj[key]); // [object Object] olarak döner , "some value" değil! ``` Eğer kullanıcı tipleri `__proto__` içerisinde ise atama görmezden gelinir! +<<<<<<< HEAD Bu aslında çok da sürpriz olmasa gerek. `__proto__` farklı bir özelliktir: Ya obje olur veya `null`, mesela bir karakter dizisi prototip olamaz. +======= +Here, if the user types in `__proto__`, the assignment is ignored! + +That shouldn't surprise us. The `__proto__` property is special: it must be either an object or `null`. A string can not become a prototype. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Fakat buradaki amacımız böyle bir davranışı uygulamak değildi, değil mi? Biz key/value ikililerini kaydetmekti. `"__proto__"` anahtarı düzgün bir şekilde kaydedilmedi. Bundan dolayı bu bir bugdır. Burada etkisi berbat değildir fakat diğer durumlarda prototip gerçekten değişebilir ve çalışma tamamen istenmeyen bir sonuca varabilir. +<<<<<<< HEAD Daha kötüsü -- genelde geliştiriciler böyle bir ihtimali düşünmezler bile. Bundan dolayı böyle bir bug'lar fark edilebilir ve saldırıya açık hale gelirler, özellikle JavaScript server tarafında kullanıldıysa. Böyle bir olay sadece `__proto__`'da meydana gelir diğer tüm özellikler normalde "atanabilir"'dir. @@ -109,10 +156,33 @@ Fakat burada bize `Obje` yardımcı olabilir, çünkü dili yaratıcılar bu kon ![](object-prototype-2.svg) Bundan dolayı, Eğer `obj.__proto__` okunur veya atanırsa, ilgili alıcı/ayarlayıcı prototipten çağırılır, böylece `[[Prototoy]]` alınır/ayarlanır. +======= +Here the consequences are not terrible. But in other cases we may be assigning object values, and then the prototype may indeed be changed. As a result, the execution will go wrong in totally unexpected ways. + +What's worse -- usually developers do not think about such possibility at all. That makes such bugs hard to notice and even turn them into vulnerabilities, especially when JavaScript is used on server-side. + +Unexpected things also may happen when assigning to `toString`, which is a function by default, and to other built-in methods. + +How can we avoid this problem? + +First, we can just switch to using `Map` for storage instead of plain objects, then everything's fine. + +But `Object` can also serve us well here, because language creators gave thought to that problem long ago. + +`__proto__` is not a property of an object, but an accessor property of `Object.prototype`: + +![](object-prototype-2.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Başlangıçta `__proto__` , `[[Prototype]]`a erişmek için bir yol olarak tanımlanmıştır, `[[Prototype]]` değil. +<<<<<<< HEAD Eğer, eğer objeyi ilişkisel dizi olarak kullanmak istiyorsanız şu şekilde yapabilirsiniz: +======= +As it was said in the beginning of this tutorial section: `__proto__` is a way to access `[[Prototype]]`, it is not `[[Prototype]]` itself. + +Now, if we intend to use an object as an associative array and be free of such problems, we can do it with a little trick: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run *!* @@ -131,7 +201,11 @@ alert(obj[key]); // "some value" Bundan dolayı `__proto__` için atadan kalan alıcı/ayarlayıcı bulunmamaktadır. Artık sıradan bir veri özelliği olarak işlenir, bundan dolayı yukarıdaki örnek doğru bir şekilde çalışır. +<<<<<<< HEAD Böyle objelere "en basit" veya "saf sözlük objeleri" denir, Çünkü bunlar sıradan objelerden `{...}` bile daha basittirler. +======= +We can call such objects "very plain" or "pure dictionary" objects, because they are even simpler than the regular plain object `{...}`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu objelerin kötü tarafı ise, içinde hiç bir varsayılan metod bulunmaz, Örneğin: `toString`: @@ -144,7 +218,14 @@ alert(obj); // Error (no toString) ``` ...Fakat bu genelce ilişkili diziler için problem oluşturmaz. +<<<<<<< HEAD Çoğu obje-bağlantılı metodlar `Object.something(...)` şeklindedir ve Object.keys(obj) gibi olduğundan prototipte yer almazlar, bundan dolayı şu şekilde çalışmaya devam ederler: +======= +...But that's usually fine for associative arrays. + +Note that most object-related methods are `Object.something(...)`, like `Object.keys(obj)` -- they are not in the prototype, so they will keep working on such objects: + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let chineseDictionary = Object.create(null); @@ -156,11 +237,21 @@ alert(Object.keys(chineseDictionary)); // hello,bye ## Tüm özellikleri alma +<<<<<<< HEAD Bir objeden Anahtar/değer ikilisini almak için birçok yol bulunmaktadır. Aşağıdaki kullanımını zaten biliyorsunuz: - [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- kendi adı/değerleri/anahtar-değer ikilileri şeklinde döngü yapılabilir. Metodları sadece *enumerable* ( döngülenebilir ) ve *anahtarları karakter dizisi olanlar* . +======= +Modern methods to set up and directly access the prototype are: + +- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with a given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors. +- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj` (same as `__proto__` getter). +- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto` (same as `__proto__` setter). + +The built-in `__proto__` getter/setter is unsafe if we'd want to put user-generated keys into an object. Just because a user may enter `"__proto__"` as the key, and there'll be an error, with hopefully light, but generally unpredictable consequences. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer sembolik özellikler istenirse: @@ -231,6 +322,7 @@ Zincire bakarsanız `rabbit.hasOwnProperty` nereden geliyor görebilirsiniz. `Ob ## Özet Bu bölümde anlatılanların üzerinden kısaca geçecek olursak: +<<<<<<< HEAD - [Object.create(proto[, descriptors])](mdn:js/Object/create) -- verilen `proto` ile yeni bir obje yaratır, ayrıca opsiyonel olarak özellik tanımlıyıcılar verilebilir. - [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- `obj`'nin `[[Prototype]]`ını döner ( `__proto__` alıcısı ( getter ) ile aynı işi yapar)). - [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- `obj`'nin `[[Prototype]]`'ını verilen `proto`'ya ayarlar. ( `__proto__` ayarlayıcısı ( setter) ile aynı işi yapar) @@ -245,4 +337,19 @@ Bu bölümde anlatılanların üzerinden kısaca geçecek olursak: Prototip olmadan bir objeyi `Object.create(null)` şeklinde yaratmak mümkündür. Bu tür objeler "saf dictionary yapısı" olarak kullanılır. `"__proto__"` anahtarı ile bir problemi bulunmamaktadır. -Obje özelliklerini döndüren ( `Object.keys` ve diğerleri ) -- "kendi" özelliklerini döndürür. Eğer kalıtılmış olanlarını da istersek `for..in` kullanabiliriz. \ No newline at end of file +Obje özelliklerini döndüren ( `Object.keys` ve diğerleri ) -- "kendi" özelliklerini döndürür. Eğer kalıtılmış olanlarını da istersek `for..in` kullanabiliriz. +======= +We also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` and resides in `Object.prototype`, just like other methods. + +We can create an object without a prototype by `Object.create(null)`. Such objects are used as "pure dictionaries", they have no issues with `"__proto__"` as the key. + +Other methods: + +- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of enumerable own string property names/values/key-value pairs. +- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic keys. +- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string keys. +- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own keys. +- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): returns `true` if `obj` has its own (not inherited) key named `key`. + +All methods that return object properties (like `Object.keys` and others) -- return "own" properties. If we want inherited ones, we can use `for..in`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/09-classes/01-class/1-rewrite-to-class/task.md b/1-js/09-classes/01-class/1-rewrite-to-class/task.md index 1b6864565..be5d1d452 100644 --- a/1-js/09-classes/01-class/1-rewrite-to-class/task.md +++ b/1-js/09-classes/01-class/1-rewrite-to-class/task.md @@ -4,6 +4,10 @@ importance: 5 # Sınıfı tekrar yaz +<<<<<<< HEAD `Clock` sınıfını prototipten normal "class" yazımına çeviriniz +======= +The `Clock` class (see the sandbox) is written in functional style. Rewrite it in the "class" syntax. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Not: Konsolu açıp saatin değiştiğini görebilirsiniz. diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index bf7fc889d..154168f16 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -25,7 +25,11 @@ class MyClass { } ``` +<<<<<<< HEAD Sonra `new MyClass()` bu metotlarla birlikte yeni bir nesne oluşturuyor. +======= +Then use `new MyClass()` to create a new object with all the listed methods. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `constructor()` metodu `new` tarafından otomatik olarak çağırılıyor. Bu sayede nesneyi orada tanımlayabiliyoruz. @@ -49,10 +53,18 @@ let user = new User("John"); user.sayHi(); ``` +<<<<<<< HEAD `new User("John")` çağırıldığında: 1. Yeni bir nesne oluşturuluyor. 2. `constructor` verilen argümanla çalışıyor ve buna `this.name`'i atıyor. +======= +When `new User("John")` is called: +1. A new object is created. +2. The `constructor` runs with the given argument and assigns it to `this.name`. + +...Then we can call object methods, such as `user.sayHi()`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ...Daha sonra `user.sayHi` gibi metodları çağırabiliriz. @@ -69,7 +81,11 @@ Peki, `class` (sınıf) tam olarak nedir? Bu aslında tam olarak yeni bir dil se Hadi, sihri ortaya çıkaralım ve bir sınıfın tam olarak ne olduğunu görelim. Bu daha karmaşık konseptleri anlamamıza da yardımcı olacak. +<<<<<<< HEAD Javascript'de sınıf aslında bir tür fonksiyondur. +======= +In JavaScript, a class is a kind of function. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Şuna bir göz atalım: @@ -85,12 +101,19 @@ alert(typeof User); // function */!* ``` +<<<<<<< HEAD `class User {...}` yapısının yaptığı şey aslında: 1. `User` adında, sınıfın tanımlayıcısın sonucu olacak, yeni bir fonksiyon oluşturur. - The function code is taken from the `constructor` method (assumed empty if we don't write such method). 3. Stores all methods, such as `sayHi`, in `User.prototype`. +======= +What `class User {...}` construct really does is: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 + +1. Creates a function named `User`, that becomes the result of the class declaration. The function code is taken from the `constructor` method (assumed empty if we don't write such method). +2. Stores class methods, such as `sayHi`, in `User.prototype`. -Afterwards, for new objects, when we call a method, it's taken from the prototype, just as described in the chapter . So `new User` object has access to class methods. +After `new User` object is created, when we call its method, it's taken from the prototype, just as described in the chapter . So the object has access to class methods. We can illustrate the result of `class User` declaration as: @@ -98,7 +121,6 @@ We can illustrate the result of `class User` declaration as: Here's the code to introspect it: - ```js run class User { constructor(name) { this.name = name; } @@ -112,15 +134,15 @@ alert(typeof User); // function alert(User === User.prototype.constructor); // true // The methods are in User.prototype, e.g: -alert(User.prototype.sayHi); // alert(this.name); +alert(User.prototype.sayHi); // the code of the sayHi method // there are exactly two methods in the prototype alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi ``` -## Not just a syntax sugar +## Not just a syntactic sugar -Sometimes people say that `class` is a "syntax sugar" in JavaScript, because we could actually declare the same without `class` keyword at all: +Sometimes people say that `class` is a "syntactic sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same without `class` keyword at all: ```js run // rewriting class User in pure functions @@ -129,7 +151,7 @@ Sometimes people say that `class` is a "syntax sugar" in JavaScript, because we function User(name) { this.name = name; } -// any function prototype has constructor property by default, +// a function prototype has "constructor" property by default, // so we don't need to create it // 2. Add the method to prototype @@ -142,13 +164,13 @@ let user = new User("John"); user.sayHi(); ``` -The result of this definition is about the same. So, there are indeed reasons why `class` can be considered a syntax sugar to define a constructor together with its prototype methods. +The result of this definition is about the same. So, there are indeed reasons why `class` can be considered a syntactic sugar to define a constructor together with its prototype methods. -Although, there are important differences. +Still, there are important differences. -1. First, a function created by `class` is labelled by a special internal property `[[FunctionKind]]:"classConstructor"`. So it's not entirely the same as creating it manually. +1. First, a function created by `class` is labelled by a special internal property `[[IsClassConstructor]]: true`. So it's not entirely the same as creating it manually. - Unlike a regular function, a class constructor can't be called without `new`: + The language checks for that property in a variety of places. For example, unlike a regular function, it must be called with `new`: ```js run class User { @@ -168,6 +190,7 @@ Although, there are important differences. alert(User); // class User { ... } ``` + There are other differences, we'll see them soon. 2. Class methods are non-enumerable. A class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`. @@ -177,12 +200,11 @@ Although, there are important differences. 3. Classes always `use strict`. All code inside the class construct is automatically in strict mode. - -Also, in addition to its basic operation, the `class` syntax brings many other features with it which we'll explore later. +Besides, `class` syntax brings many other features that we'll explore later. ## Class Expression -Just like functions, classes can be defined inside another expression, passed around, returned, assigned etc. +Just like functions, classes can be defined inside another expression, passed around, returned, assigned, etc. Here's an example of a class expression: @@ -194,7 +216,7 @@ let User = class { }; ``` -Similar to Named Function Expressions, class expressions may or may not have a name. +Similar to Named Function Expressions, class expressions may have a name. If a class expression has a name, it's visible inside the class only: @@ -203,16 +225,15 @@ If a class expression has a name, it's visible inside the class only: // (no such term in the spec, but that's similar to Named Function Expression) let User = class *!*MyClass*/!* { sayHi() { - alert(MyClass); // MyClass is visible only inside the class + alert(MyClass); // MyClass name is visible only inside the class } }; new User().sayHi(); // works, shows MyClass definition -alert(MyClass); // error, MyClass not visible outside of the class +alert(MyClass); // error, MyClass name isn't visible outside of the class ``` - We can even make classes dynamically "on-demand", like this: ```js run @@ -221,7 +242,7 @@ function makeClass(phrase) { return class { sayHi() { alert(phrase); - }; + } }; } @@ -232,9 +253,9 @@ new User().sayHi(); // Hello ``` -## Getters/setters, other shorthands +## Getters/setters -Just like literal objects, classes may include getters/setters, generators, computed properties etc. +Just like literal objects, classes may include getters/setters, computed properties etc. Here's an example for `user.name` implemented using `get/set`: @@ -267,31 +288,21 @@ class User { let user = new User("John"); alert(user.name); // John -user = new User(""); // Name too short. +user = new User(""); // Name is too short. ``` -The class declaration creates getters and setters in `User.prototype`, like this: +Technically, such class declaration works by creating getters and setters in `User.prototype`. -```js -Object.defineProperties(User.prototype, { - name: { - get() { - return this._name - }, - set(name) { - // ... - } - } -}); -``` +## Computed names [...] -Here's an example with computed properties: +Here's an example with a computed method name using brackets `[...]`: ```js run -function f() { return "sayHi"; } - class User { - [f()]() { + +*!* + ['say' + 'Hi']() { +*/!* alert("Hello"); } @@ -300,30 +311,119 @@ class User { new User().sayHi(); ``` -For a generator method, similarly, prepend it with `*`. +Such features are easy to remember, as they resemble that of literal objects. -## Class properties +## Class fields ```warn header="Old browsers may need a polyfill" -Class-level properties are a recent addition to the language. +Class fields are a recent addition to the language. ``` -In the example above, `User` only had methods. Let's add a property: +Previously, our classes only had methods. + +"Class fields" is a syntax that allows to add any properties. + +For instance, let's add `name` property to `class User`: ```js run class User { - name = "Anonymous"; +*!* + name = "John"; +*/!* sayHi() { alert(`Hello, ${this.name}!`); } } -new User().sayHi(); +new User().sayHi(); // Hello, John! +``` + +So, we just write " = " in the declaration, and that's it. + +The important difference of class fields is that they are set on individual objects, not `User.prototype`: + +```js run +class User { +*!* + name = "John"; +*/!* +} + +let user = new User(); +alert(user.name); // John +alert(User.prototype.name); // undefined +``` + +We can also assign values using more complex expressions and function calls: + +```js run +class User { +*!* + name = prompt("Name, please?", "John"); +*/!* +} + +let user = new User(); +alert(user.name); // John +``` + + +### Making bound methods with class fields + +As demonstrated in the chapter functions in JavaScript have a dynamic `this`. It depends on the context of the call. + +So if an object method is passed around and called in another context, `this` won't be a reference to its object any more. + +For instance, this code will show `undefined`: + +```js run +class Button { + constructor(value) { + this.value = value; + } + + click() { + alert(this.value); + } +} + +let button = new Button("hello"); + +*!* +setTimeout(button.click, 1000); // undefined +*/!* +``` + +The problem is called "losing `this`". + +There are two approaches to fixing it, as discussed in the chapter : + +1. Pass a wrapper-function, such as `setTimeout(() => button.click(), 1000)`. +2. Bind the method to object, e.g. in the constructor. + +Class fields provide another, quite elegant syntax: + +```js run +class Button { + constructor(value) { + this.value = value; + } +*!* + click = () => { + alert(this.value); + } +*/!* +} + +let button = new Button("hello"); + +setTimeout(button.click, 1000); // hello ``` -The property is not placed into `User.prototype`. Instead, it is created by `new`, separately for every object. So, the property will never be shared between different objects of the same class. +The class field `click = () => {...}` is created on a per-object basis, there's a separate function for each `Button` object, with `this` inside it referencing that object. We can pass `button.click` around anywhere, and the value of `this` will always be correct. +That's especially useful in browser environment, for event listeners. ## Summary @@ -331,7 +431,7 @@ The basic class syntax looks like this: ```js class MyClass { - prop = value; // field + prop = value; // property constructor(...) { // constructor // ... @@ -342,11 +442,11 @@ class MyClass { get something(...) {} // getter method set something(...) {} // setter method - [Symbol.iterator]() {} // method with computed name/symbol name + [Symbol.iterator]() {} // method with computed name (symbol here) // ... } ``` -`MyClass` is technically a function (the one that we provide as `constructor`), while methods, getters and settors are written to `MyClass.prototype`. +`MyClass` is technically a function (the one that we provide as `constructor`), while methods, getters and setters are written to `MyClass.prototype`. In the next chapters we'll learn more about classes, including inheritance and other features. diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js index ca613ca5e..be2053cfc 100644 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js +++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js @@ -1,7 +1,7 @@ class ExtendedClock extends Clock { constructor(options) { super(options); - let { precision=1000 } = options; + let { precision = 1000 } = options; this.precision = precision; } diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md index 61a2df24a..a63062fdb 100644 --- a/1-js/09-classes/02-class-inheritance/article.md +++ b/1-js/09-classes/02-class-inheritance/article.md @@ -2,6 +2,7 @@ Sınıflar başka sınıfları genişletebilirler. Bunun için prototip kalıtımı tabanlı güzel bir yazılışı bulunmaktadır. +<<<<<<< HEAD Diğer bir sınıftan kalıtım sağlamak için `"extends"` ile belirtmek gerekmektedir. [cut] @@ -28,6 +29,48 @@ class Animal { } +======= +Class inheritance is a way for one class to extend another class. + +So we can create new functionality on top of the existing. + +## The "extends" keyword + +Let's say we have class `Animal`: + +```js +class Animal { + constructor(name) { + this.speed = 0; + this.name = name; + } + run(speed) { + this.speed = speed; + alert(`${this.name} runs with speed ${this.speed}.`); + } + stop() { + this.speed = 0; + alert(`${this.name} stands still.`); + } +} + +let animal = new Animal("My animal"); +``` + +Here's how we can represent `animal` object and `Animal` class graphically: + +![](rabbit-animal-independent-animal.svg) + +...And we would like to create another `class Rabbit`. + +As rabbits are animals, `Rabbit` class should be based on `Animal`, have access to animal methods, so that rabbits can do what "generic" animals can do. + +The syntax to extend another class is: `class Child extends Parent`. + +Let's create `class Rabbit` that inherits from `Animal`: + +```js +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 *!* // Inherit from Animal class Rabbit extends Animal { @@ -43,6 +86,7 @@ rabbit.run(5); // White Rabbit runs with speed 5. rabbit.hide(); // White Rabbit hides! ``` +<<<<<<< HEAD `extends` kelimesi aslında `Rabbit.prototype`'dan referans alıp bunun `[[Prototype]]`'ını `Animal.prototype`'a ekler. Aynen daha önce de gördüğümüz gibi. ![](animal-rabbit-extends.svg) @@ -50,6 +94,20 @@ rabbit.hide(); // White Rabbit hides! Artık `rabbit` hem kendi metodlarına hem de `Animal` metodlarına erişebilir. ````smart header="`extends`'ten sonra her türlü ifade kullanılabilir." +======= +Object of `Rabbit` class have access both to `Rabbit` methods, such as `rabbit.hide()`, and also to `Animal` methods, such as `rabbit.run()`. + +Internally, `extends` keyword works using the good old prototype mechanics. It sets `Rabbit.prototype.[[Prototype]]` to `Animal.prototype`. So, if a method is not found in `Rabbit.prototype`, JavaScript takes it from `Animal.prototype`. + +![](animal-rabbit-extends.svg) + +For instance, to find `rabbit.run` method, the engine checks (bottom-up on the picture): +1. The `rabbit` object (has no `run`). +2. Its prototype, that is `Rabbit.prototype` (has `hide`, but not `run`). +3. Its prototype, that is (due to `extends`) `Animal.prototype`, that finally has the `run` method. + +As we can recall from the chapter , JavaScript itself uses prototypal inheritance for built-in objects. E.g. `Date.prototype.[[Prototype]]` is `Object.prototype`. That's why dates have access to generic object methods. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `Extends`'ten sonra sadece sınıf değil her türlü ifade kullanılabilir. @@ -58,8 +116,8 @@ Artık `rabbit` hem kendi metodlarına hem de `Animal` metodlarına erişebilir. ```js run function f(phrase) { return class { - sayHi() { alert(phrase) } - } + sayHi() { alert(phrase); } + }; } *!* @@ -75,21 +133,36 @@ Bu belki çok ileri teknik programlama kalıpları için kullanışlı olabilir ## Bir metodu geçersiz kılma, üstüne yazma. +<<<<<<< HEAD Şimdi biraz daha ileri gidelim ve metodun üstüne yazalım. Şimdiden sonra `Rabbit` `stop` metodunu kalıtım alır, bu metod `this.speed=0`'ı `Animal` sınıfında ayarlamaya yarar. Eğer `Rabbit` içerisinde kendi `stop` metodunuzu yazarsanız buna üstüne yazma denir ve `Animal`'da yazılmış `stop` metodu kullanılmaz. +======= +Now let's move forward and override a method. By default, all methods that are not specified in `class Rabbit` are taken directly "as is" from `class Animal`. + +But if we specify our own method in `Rabbit`, such as `stop()` then it will be used instead: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js class Rabbit extends Animal { stop() { +<<<<<<< HEAD // ... rabbit.stop() için artık bu kullanılacak. +======= + // ...now this will be used for rabbit.stop() + // instead of stop() from class Animal +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } } ``` +<<<<<<< HEAD ...Fakat genelde üst metodun üzerine yazmak istenmez, bunun yerine küçük değişiklikler yapmak veya fonksiyonliteyi genişletmek daha fazla tercih edilen yöntemdir. Metodda birçeyler yapar ve genelde bundan önce/sonra veya işlerken üst metodu çağırırız. Sınıflar bunun için `"super"` anahtar kelimesini sağlarlar. +======= +Usually we don't want to totally replace a parent method, but rather to build on top of it to tweak or extend its functionality. We do something in our method, but call the parent method before/after it or in the process. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - `super.method(...)` üst class'ın metodunu çağırmak için. @@ -107,13 +180,13 @@ class Animal { } run(speed) { - this.speed += speed; + this.speed = speed; alert(`${this.name} runs with speed ${this.speed}.`); } stop() { this.speed = 0; - alert(`${this.name} stopped.`); + alert(`${this.name} stands still.`); } } @@ -134,7 +207,7 @@ class Rabbit extends Animal { let rabbit = new Rabbit("White Rabbit"); rabbit.run(5); // White Rabbit runs with speed 5. -rabbit.stop(); // White Rabbit stopped. White rabbit hides! +rabbit.stop(); // White Rabbit stands still. White Rabbit hides! ``` Artık `Rabbit`, `stop` metodunda üst sınıfın `super.stop()`'unu çağırmaktadır. @@ -162,7 +235,11 @@ setTimeout(function() { super.stop() }, 1000); Yapıcı metodlar ile yapılan şeyler biraz çetrefillidir. +<<<<<<< HEAD Şimdiye kadar `Rabbit` kendisine ait `yapıcı`'ya sahipti. +======= +Until now, `Rabbit` did not have its own `constructor`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 [Şartname](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation)'ye göre eğer bir sınıf diğer başka bir sınıftan türer ve `constructor`'a sahip değil ise aşağıdaki `yapıcı` otomatik olarak oluşturulur. @@ -209,10 +286,19 @@ let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined. ``` Nasıl ya! Hata aldık. Şimdi de rabbit oluşturamıyoruz. Neden peki? +<<<<<<< HEAD Kısa cevap: Türemiş sınıftaki yapıcı kesinlikle `super(...)` i çağırmalıdır. Bu `this`'den önce olmalıdır. +======= +Whoops! We've got an error. Now we can't create rabbits. What went wrong? + +The short answer is: + +- **Constructors in inheriting classes must call `super(...)`, and (!) do it before using `this`.** +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ...Peki neden? Çok garip değilmi? +<<<<<<< HEAD Tabi bu açıklanabilir bir olay. Detayına girdikçe daha iyi anlayacaksınız. JavaScript'te "türeyen sınıfın yapıcı fonksiyonu" ve diğerleri arasında farklılıklar mevcuttur. Türemiş sınıflarda eş yapcıı fonksiyonlar içsel olarak `[[ConstructorKind]]:"derived"` şeklinde etiketlenir. @@ -225,6 +311,20 @@ Farklılık: Eğer kendimiz bir yapıcı yazarsak bundan dolayı `super` i çağırmamız gerekmektedir. Aksi halde `this` referansı oluşturulmaz ve biz de hata alırız. `Rabbit`'in çalışabilmesi için `this`'den önce `super()` çağırılmalıdır. +======= +Of course, there's an explanation. Let's get into details, so you'll really understand what's going on. + +In JavaScript, there's a distinction between a constructor function of an inheriting class (so-called "derived constructor") and other functions. A derived constructor has a special internal property `[[ConstructorKind]]:"derived"`. That's a special internal label. + +That label affects its behavior with `new`. + +- When a regular function is executed with `new`, it creates an empty object and assigns it to `this`. +- But when a derived constructor runs, it doesn't do this. It expects the parent constructor to do this job. + +So a derived constructor must call `super` in order to execute its parent (base) constructor, otherwise the object for `this` won't be created. And we'll get an error. + +For the `Rabbit` constructor to work, it needs to call `super()` before using `this`, like here: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run class Animal { @@ -259,17 +359,137 @@ alert(rabbit.earLength); // 10 ## Super: dahililer, [[HomeObject]] +<<<<<<< HEAD Artık `super`'in derinliklerine dalma vakti geldi. Altında yatan ilginç şeyler nelermiş bunları göreceğiz. Öncelikle, şimdiye kadar öğrendiklerimizle `super` ile çalışmak mümkün değil. +======= + +### Overriding class fields: a tricky note + +```warn header="Advanced note" +This note assumes you have a certain experience with classes, maybe in other programming languages. + +It provides better insight into the language and also explains the behavior that might be a source of bugs (but not very often). + +If you find it difficult to understand, just go on, continue reading, then return to it some time later. +``` + +We can override not only methods, but also class fields. + +Although, there's a tricky behavior when we access an overridden field in parent constructor, quite different from most other programming languages. + +Consider this example: + +```js run +class Animal { + name = 'animal'; + + constructor() { + alert(this.name); // (*) + } +} + +class Rabbit extends Animal { + name = 'rabbit'; +} + +new Animal(); // animal +*!* +new Rabbit(); // animal +*/!* +``` + +Here, class `Rabbit` extends `Animal` and overrides `name` field with its own value. + +There's no own constructor in `Rabbit`, so `Animal` constructor is called. + +What's interesting is that in both cases: `new Animal()` and `new Rabbit()`, the `alert` in the line `(*)` shows `animal`. + +**In other words, parent constructor always uses its own field value, not the overridden one.** + +What's odd about it? + +If it's not clear yet, please compare with methods. + +Here's the same code, but instead of `this.name` field we call `this.showName()` method: + +```js run +class Animal { + showName() { // instead of this.name = 'animal' + alert('animal'); + } + + constructor() { + this.showName(); // instead of alert(this.name); + } +} + +class Rabbit extends Animal { + showName() { + alert('rabbit'); + } +} + +new Animal(); // animal +*!* +new Rabbit(); // rabbit +*/!* +``` + +Please note: now the output is different. + +And that's what we naturally expect. When the parent constructor is called in the derived class, it uses the overridden method. + +...But for class fields it's not so. As said, the parent constructor always uses the parent field. + +Why is there the difference? + +Well, the reason is in the field initialization order. The class field is initialized: +- Before constructor for the base class (that doesn't extend anything), +- Immediately after `super()` for the derived class. + +In our case, `Rabbit` is the derived class. There's no `constructor()` in it. As said previously, that's the same as if there was an empty constructor with only `super(...args)`. + +So, `new Rabbit()` calls `super()`, thus executing the parent constructor, and (per the rule for derived classes) only after that its class fields are initialized. At the time of the parent constructor execution, there are no `Rabbit` class fields yet, that's why `Animal` fields are used. + +This subtle difference between fields and methods is specific to JavaScript + +Luckily, this behavior only reveals itself if an overridden field is used in the parent constructor. Then it may be difficult to understand what's going on, so we're explaining it here. + +If it becomes a problem, one can fix it by using methods or getters/setters instead of fields. + + +## Super: internals, [[HomeObject]] + +```warn header="Advanced information" +If you're reading the tutorial for the first time - this section may be skipped. + +It's about the internal mechanisms behind inheritance and `super`. +``` + +Let's get a little deeper under the hood of `super`. We'll see some interesting things along the way. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Ever gerçekten, kendimize soralım, nasıl teknik olarak böyle birşey çalışabilir? Bir obje metodu çalıştığında var olan objeyi `this` olarak alır. Eğer biz `super.method()`'u çağırırsak `metod`'u nasıl alabilir? Doğal olarak `method`'u var olan objenin prototipinden almak gerekmektedir. Peki teknik olarak bunu JavaScript motoru nasıl halledebilir? +<<<<<<< HEAD Belki `this`in `[[Prototype]]`'ını `this.__proto__.method` olarak alıyordur? Malesef böyle çalışmıyor. +======= +Yeah, indeed, let's ask ourselves, how it should technically work? When an object method runs, it gets the current object as `this`. If we call `super.method()` then, the engine needs to get the `method` from the prototype of the current object. But how? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bunu test edelim. Sınıflar olmadan basit objelerle, fazladan karmaşıklaştırmadan deneyelim. +<<<<<<< HEAD Aşağıda `rabbit.eat()`, kendisinin üst metodu `animal.eat()`'i çağırmalıdır: +======= +Let's demonstrate the problem. Without classes, using plain objects for the sake of simplicity. + +You may skip this part and go below to the `[[HomeObject]]` subsection if you don't want to know the details. That won't harm. Or read on if you're interested in understanding things in-depth. + +In the example below, `rabbit.__proto__ = animal`. Now let's try: in `rabbit.eat()` we'll call `animal.eat()`, using `this.__proto__`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let animal = { @@ -336,7 +556,13 @@ Aşağıda ne olduğunu daha iyi anlatan bir görsel bulunmakta: ![](this-super-loop.svg) +<<<<<<< HEAD 1. `longEar.eat()` içerisinde `(**)` satırı `rabbit.eat`'i `this=longEar` olarak çağırmakta. +======= +![](this-super-loop.svg) + +1. Inside `longEar.eat()`, the line `(**)` calls `rabbit.eat` providing it with `this=longEar`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js // longEar.eat() içerisinde this = longEar şeklinde kullanmaktayız. this.__proto__.eat.call(this) // (**) @@ -432,19 +658,20 @@ It works as intended, due to `[[HomeObject]]` mechanics. A method, such as `long As we've known before, generally functions are "free", not bound to objects in JavaScript. So they can be copied between objects and called with another `this`. -The very existance of `[[HomeObject]]` violates that principle, because methods remember their objects. `[[HomeObject]]` can't be changed, so this bond is forever. +The very existence of `[[HomeObject]]` violates that principle, because methods remember their objects. `[[HomeObject]]` can't be changed, so this bond is forever. The only place in the language where `[[HomeObject]]` is used -- is `super`. So, if a method does not use `super`, then we can still consider it free and copy between objects. But with `super` things may go wrong. -Here's the demo of a wrong `super` call: +Here's the demo of a wrong `super` result after copying: ```js run let animal = { sayHi() { - console.log(`I'm an animal`); + alert(`I'm an animal`); } }; +// rabbit inherits from animal let rabbit = { __proto__: animal, sayHi() { @@ -454,10 +681,11 @@ let rabbit = { let plant = { sayHi() { - console.log("I'm a plant"); + alert("I'm a plant"); } }; +// tree inherits from plant let tree = { __proto__: plant, *!* @@ -470,13 +698,18 @@ tree.sayHi(); // I'm an animal (?!?) */!* ``` -A call to `tree.sayHi()` shows "I'm an animal". Definitevely wrong. +A call to `tree.sayHi()` shows "I'm an animal". Definitely wrong. The reason is simple: - In the line `(*)`, the method `tree.sayHi` was copied from `rabbit`. Maybe we just wanted to avoid code duplication? -- So its `[[HomeObject]]` is `rabbit`, as it was created in `rabbit`. There's no way to change `[[HomeObject]]`. +- Its `[[HomeObject]]` is `rabbit`, as it was created in `rabbit`. There's no way to change `[[HomeObject]]`. - The code of `tree.sayHi()` has `super.sayHi()` inside. It goes up from `rabbit` and takes the method from `animal`. +<<<<<<< HEAD +======= +Here's the diagram of what happens: + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ![](super-homeobject-wrong.svg) ### Methods, not function properties @@ -489,7 +722,7 @@ In the example below a non-method syntax is used for comparison. `[[HomeObject]] ```js run let animal = { - eat: function() { // should be the short syntax: eat() {...} + eat: function() { // intentionally writing like this instead of eat() {... // ... } }; @@ -519,4 +752,4 @@ rabbit.eat(); // Error calling super (because there's no [[HomeObject]]) - So it's not safe to copy a method with `super` from one object to another. Also: -- Arrow functions don't have own `this` or `super`, so they transparently fit into the surrounding context. +- Arrow functions don't have their own `this` or `super`, so they transparently fit into the surrounding context. diff --git a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg new file mode 100644 index 000000000..34d783b4d --- /dev/null +++ b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg @@ -0,0 +1 @@ +call: function bind: function ...Function.prototypeconstructorObjectRabbit[[Prototype]][[Prototype]]constructorcall: function bind: function ...Function.prototypeRabbit[[Prototype]]constructorclass Rabbitclass Rabbit extends Object \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md similarity index 87% rename from 1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md rename to 1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md index c661a6cac..795aae335 100644 --- a/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md +++ b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md @@ -25,8 +25,13 @@ Bu problem düzeltildikten sonra bile, `"class Rabbit extends Object"` ile `clas Bildiğiniz gibi "extends" yazımı iki prototip kurar: +<<<<<<< HEAD:1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md 1. Yapıcı fonksiyonların `"prototype"` ları arasında ( metodlar için ) 2. Yapıcı fonksiyonların kendileri arasında ( statik metodlar için ) +======= +1. Between `"prototype"` of the constructor functions (for methods). +2. Between the constructor functions themselves (for static methods). +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602:1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md Bizim durumumuzda `class Rabbit extends Object`: diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md similarity index 87% rename from 1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md rename to 1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md index 2853a9b46..52cbec847 100644 --- a/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md +++ b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md @@ -1,4 +1,4 @@ -importance: 5 +importance: 3 --- @@ -19,7 +19,6 @@ let rabbit = new Rabbit("Rab"); *!* // hasOwnProperty method is from Object.prototype -// rabbit.__proto__ === Object.prototype alert( rabbit.hasOwnProperty('name') ); // true */!* ``` @@ -36,6 +35,6 @@ class Rabbit extends Object { let rabbit = new Rabbit("Rab"); -alert( rabbit.hasOwnProperty('name') ); // true +alert( rabbit.hasOwnProperty('name') ); // Error ``` Eğer çalışmaz ise çalışır hale getiriniz. diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md index b29167794..6eb4c4652 100644 --- a/1-js/09-classes/03-static-properties-methods/article.md +++ b/1-js/09-classes/03-static-properties-methods/article.md @@ -1,9 +1,9 @@ # Static properties and methods -We can also assign a method to the class function, not to its `"prototype"`. Such methods are called *static*. +We can also assign a method to the class function itself, not to its `"prototype"`. Such methods are called *static*. -An example: +In a class, they are prepended by `static` keyword, like this: ```js run class User { @@ -17,21 +17,23 @@ class User { User.staticMethod(); // true ``` -That actually does the same as assigning it as a function property: +That actually does the same as assigning it as a property directly: -```js -function User() { } +```js run +class User { } User.staticMethod = function() { alert(this === User); }; + +User.staticMethod(); // true ``` -The value of `this` inside `User.staticMethod()` is the class constructor `User` itself (the "object before dot" rule). +The value of `this` in `User.staticMethod()` call is the class constructor `User` itself (the "object before dot" rule). Usually, static methods are used to implement functions that belong to the class, but not to any particular object of it. -For instance, we have `Article` objects and need a function to compare them. The natural choice would be `Article.compare`, like this: +For instance, we have `Article` objects and need a function to compare them. A natural solution would be to add `Article.compare` method, like this: ```js run class Article { @@ -61,13 +63,13 @@ articles.sort(Article.compare); alert( articles[0].title ); // CSS ``` -Here `Article.compare` stands "over" the articles, as a means to compare them. It's not a method of an article, but rather of the whole class. +Here `Article.compare` stands "above" articles, as a means to compare them. It's not a method of an article, but rather of the whole class. Another example would be a so-called "factory" method. Imagine, we need few ways to create an article: 1. Create by given parameters (`title`, `date` etc). 2. Create an empty article with today's date. -3. ... +3. ...or else somehow. The first way can be implemented by the constructor. And for the second one we can make a static method of the class. @@ -90,7 +92,7 @@ class Article { let article = Article.createTodays(); -alert( article.title ); // Todays digest +alert( article.title ); // Today's digest ``` Now every time we need to create a today's digest, we can call `Article.createTodays()`. Once again, that's not a method of an article, but a method of the whole class. @@ -107,7 +109,7 @@ Article.remove({id: 12345}); [recent browser=Chrome] -Static properties are also possible, just like regular class properties: +Static properties are also possible, they look like regular class properties, but prepended by `static`: ```js run class Article { @@ -123,14 +125,15 @@ That is the same as a direct assignment to `Article`: Article.publisher = "Ilya Kantor"; ``` -## Statics and inheritance +## Inheritance of static properties and methods [#statics-and-inheritance] -Statics are inherited, we can access `Parent.method` as `Child.method`. +Static properties and methods are inherited. -For instance, `Animal.compare` in the code below is inherited and accessible as `Rabbit.compare`: +For instance, `Animal.compare` and `Animal.planet` in the code below are inherited and accessible as `Rabbit.compare` and `Rabbit.planet`: ```js run class Animal { + static planet = "Earth"; constructor(name, speed) { this.speed = speed; @@ -167,38 +170,47 @@ rabbits.sort(Rabbit.compare); */!* rabbits[0].run(); // Black Rabbit runs with speed 5. + +alert(Rabbit.planet); // Earth ``` -Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` will be called. +Now when we call `Rabbit.compare`, the inherited `Animal.compare` will be called. How does it work? Again, using prototypes. As you might have already guessed, `extends` gives `Rabbit` the `[[Prototype]]` reference to `Animal`. +![](animal-rabbit-static.svg) +<<<<<<< HEAD ![](animal-rabbit-static.svg) +======= +So, `Rabbit extends Animal` creates two `[[Prototype]]` references: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything. +1. `Rabbit` function prototypally inherits from `Animal` function. +2. `Rabbit.prototype` prototypally inherits from `Animal.prototype`. -Here, let's check that: +As a result, inheritance works both for regular and static methods. + +Here, let's check that by code: ```js run class Animal {} class Rabbit extends Animal {} -// for static properties and methods +// for statics alert(Rabbit.__proto__ === Animal); // true -// the next step up leads to Function.prototype -alert(Animal.__proto__ === Function.prototype); // true - -// the "normal" prototype chain for object methods -alert(Rabbit.prototype.__proto__ === Animal.prototype); +// for regular methods +alert(Rabbit.prototype.__proto__ === Animal.prototype); // true ``` -This way `Rabbit` has access to all static methods of `Animal`. - ## Summary -Static methods are used for the functionality that doesn't relate to a concrete class instance, doesn't require an instance to exist, but rather belongs to the class as a whole, like `Article.compare` -- a generic method to compare two articles. +Static methods are used for the functionality that belongs to the class "as a whole". It doesn't relate to a concrete class instance. + +For example, a method for comparison `Article.compare(article1, article2)` or a factory method `Article.createTodays()`. + +They are labeled by the word `static` in class declaration. Static properties are used when we'd like to store class-level data, also not bound to an instance. @@ -214,13 +226,13 @@ class MyClass { } ``` -That's technically the same as assigning to the class itself: +Technically, static declaration is the same as assigning to the class itself: ```js MyClass.property = ... MyClass.method = ... ``` -Static properties are inherited. +Static properties and methods are inherited. -Technically, for `class B extends A` the prototype of the class `B` itself points to `A`: `B.[[Prototype]] = A`. So if a field is not found in `B`, the search continues in `A`. +For `class B extends A` the prototype of the class `B` itself points to `A`: `B.[[Prototype]] = A`. So if a field is not found in `B`, the search continues in `A`. diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md index 78d6c78f5..91efb89ee 100644 --- a/1-js/09-classes/04-private-protected-properties-methods/article.md +++ b/1-js/09-classes/04-private-protected-properties-methods/article.md @@ -48,16 +48,16 @@ So, all we need to use an object is to know its external interface. We may be co That was a general introduction. -In JavaScript, there are three types of properties and members: +In JavaScript, there are two types of object fields (properties and methods): -- Public: accessible from anywhere. They comprise the external interface. Till now we were only using public properties and methods. +- Public: accessible from anywhere. They comprise the external interface. Until now we were only using public properties and methods. - Private: accessible only from inside the class. These are for the internal interface. -In many other languages there also exist "protected" fields: accessible only from inside the class and those extending it. They are also useful for the internal interface. They are in a sense more widespread than private ones, because we usually want inheriting classes to gain access to properly do the extension. +In many other languages there also exist "protected" fields: accessible only from inside the class and those extending it (like private, but plus access from inheriting classes). They are also useful for the internal interface. They are in a sense more widespread than private ones, because we usually want inheriting classes to gain access to them. Protected fields are not implemented in JavaScript on the language level, but in practice they are very convenient, so they are emulated. -In the next step we'll make a coffee machine in JavaScript with all these types of properties. A coffee machine has a lot of details, we won't model them to stay simple (though we could). +Now we'll make a coffee machine in JavaScript with all these types of properties. A coffee machine has a lot of details, we won't model them to stay simple (though we could). ## Protecting "waterAmount" @@ -87,7 +87,7 @@ Let's change `waterAmount` property to protected to have more control over it. F **Protected properties are usually prefixed with an underscore `_`.** -That is not enforced on the language level, but there's a convention that such properties and methods should not be accessed from the outside. Most programmers follow it. +That is not enforced on the language level, but there's a well-known convention between programmers that such properties and methods should not be accessed from the outside. So our property will be called `_waterAmount`: @@ -96,7 +96,9 @@ class CoffeeMachine { _waterAmount = 0; set waterAmount(value) { - if (value < 0) throw new Error("Negative water"); + if (value < 0) { + value = 0; + } this._waterAmount = value; } @@ -114,10 +116,10 @@ class CoffeeMachine { let coffeeMachine = new CoffeeMachine(100); // add water -coffeeMachine.waterAmount = -10; // Error: Negative water +coffeeMachine.waterAmount = -10; // _waterAmount will become 0, not -10 ``` -Now the access is under control, so setting the water below zero fails. +Now the access is under control, so setting the water amount below zero becomes impossible. ## Read-only "power" @@ -159,7 +161,7 @@ class CoffeeMachine { _waterAmount = 0; *!*setWaterAmount(value)*/!* { - if (value < 0) throw new Error("Negative water"); + if (value < 0) value = 0; this._waterAmount = value; } @@ -171,9 +173,9 @@ class CoffeeMachine { new CoffeeMachine().setWaterAmount(100); ``` -That looks a bit longer, but functions are more flexible. They can accept multiple arguments (even if we don't need them right now). So, for the future, just in case we need to refactor something, functions are a safer choice. +That looks a bit longer, but functions are more flexible. They can accept multiple arguments (even if we don't need them right now). -Surely, there's a tradeoff. On the other hand, get/set syntax is shorter, so ultimately there's no strict rule, it's up to you to decide. +On the other hand, get/set syntax is shorter, so ultimately there's no strict rule, it's up to you to decide. ```` ```smart header="Protected fields are inherited" @@ -190,32 +192,23 @@ There's a finished JavaScript proposal, almost in the standard, that provides la Privates should start with `#`. They are only accessible from inside the class. -For instance, here we add a private `#waterLimit` property and extract the water-checking logic into a separate method: +For instance, here's a private `#waterLimit` property and the water-checking private method `#fixWaterAmount`: -```js +```js run class CoffeeMachine { *!* #waterLimit = 200; */!* *!* - #checkWater(value) { - if (value < 0) throw new Error("Negative water"); - if (value > this.#waterLimit) throw new Error("Too much water"); + #fixWaterAmount(value) { + if (value < 0) return 0; + if (value > this.#waterLimit) return this.#waterLimit; } */!* - _waterAmount = 0; - - set waterAmount(value) { -*!* - this.#checkWater(value); -*/!* - this._waterAmount = value; - } - - get waterAmount() { - return this._waterAmount; + setWaterAmount(value) { + this.#waterLimit = this.#fixWaterAmount(value); } } @@ -223,11 +216,10 @@ class CoffeeMachine { let coffeeMachine = new CoffeeMachine(); *!* -coffeeMachine.#checkWater(); // Error +// can't access privates from outside of the class +coffeeMachine.#fixWaterAmount(123); // Error coffeeMachine.#waterLimit = 1000; // Error */!* - -coffeeMachine.waterAmount = 100; // Works ``` On the language level, `#` is a special sign that the field is private. We can't access it from outside or from inheriting classes. @@ -246,7 +238,7 @@ class CoffeeMachine { } set waterAmount(value) { - if (value < 0) throw new Error("Negative water"); + if (value < 0) value = 0; this.#waterAmount = value; } } @@ -262,7 +254,7 @@ Unlike protected ones, private fields are enforced by the language itself. That' But if we inherit from `CoffeeMachine`, then we'll have no direct access to `#waterAmount`. We'll need to rely on `waterAmount` getter/setter: ```js -class MegaCoffeeMachine extends CoffeeMachine() { +class MegaCoffeeMachine extends CoffeeMachine { method() { *!* alert( this.#waterAmount ); // Error: can only access from CoffeeMachine @@ -271,19 +263,19 @@ class MegaCoffeeMachine extends CoffeeMachine() { } ``` -In many scenarios such limitation is too severe. If we extend a `CoffeeMachine`, we may have legitimate reason to access its internals. That's why protected fields are used most of the time, even though they are not supported by the language syntax. +In many scenarios such limitation is too severe. If we extend a `CoffeeMachine`, we may have legitimate reasons to access its internals. That's why protected fields are used more often, even though they are not supported by the language syntax. -````warn +````warn header="Private fields are not available as this[name]" Private fields are special. -Remember, usually we can access fields by this[name]: +As we know, usually we can access fields using `this[name]`: ```js class User { ... sayHi() { let fieldName = "name"; - alert(`Hello, ${this[fieldName]}`); + alert(`Hello, ${*!*this[fieldName]*/!*}`); } } ``` @@ -293,11 +285,11 @@ With private fields that's impossible: `this['#name']` doesn't work. That's a sy ## Summary -In terms of OOP, delimiting of the internal interface from the external one is called [encapsulation]("https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)"). +In terms of OOP, delimiting of the internal interface from the external one is called [encapsulation](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)). It gives the following benefits: -Protection for users, so that they don't shoot themselves in the feet +Protection for users, so that they don't shoot themselves in the foot : Imagine, there's a team of developers using a coffee machine. It was made by the "Best CoffeeMachine" company, and works fine, but a protective cover was removed. So the internal interface is exposed. All developers are civilized -- they use the coffee machine as intended. But one of them, John, decided that he's the smartest one, and made some tweaks in the coffee machine internals. So the coffee machine failed two days later. @@ -309,22 +301,22 @@ Protection for users, so that they don't shoot themselves in the feet Supportable : The situation in programming is more complex than with a real-life coffee machine, because we don't just buy it once. The code constantly undergoes development and improvement. - **If we strictly delimit the internal interface, then the developer of the class can freely change its internal properties and methods, even without informing the users..** + **If we strictly delimit the internal interface, then the developer of the class can freely change its internal properties and methods, even without informing the users.** - It's much easier to develop, if you know that certain methods can be renamed, their parameters can be changed, and even removed, because no external code depends on them. + If you're a developer of such class, it's great to know that private methods can be safely renamed, their parameters can be changed, and even removed, because no external code depends on them. - For users, when a new version comes out, it may be a total overhaul, but still simple to upgrade if the external interface is the same. + For users, when a new version comes out, it may be a total overhaul internally, but still simple to upgrade if the external interface is the same. Hiding complexity -: People adore to use things that are simple. At least from outside. What's inside is a different thing. +: People adore using things that are simple. At least from outside. What's inside is a different thing. Programmers are not an exception. **It's always convenient when implementation details are hidden, and a simple, well-documented external interface is available.** -To hide internal interface we use either protected or public properties: +To hide an internal interface we use either protected or private properties: - Protected fields start with `_`. That's a well-known convention, not enforced at the language level. Programmers should only access a field starting with `_` from its class and classes inheriting from it. -- Private fields start with `#`. JavaScript makes sure we only can access those from inside the class. +- Private fields start with `#`. JavaScript makes sure we can only access those from inside the class. Right now, private fields are not well-supported among browsers, but can be polyfilled. diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md index 39b0e5e0d..c5316d21f 100644 --- a/1-js/09-classes/05-extend-natives/article.md +++ b/1-js/09-classes/05-extend-natives/article.md @@ -21,20 +21,20 @@ alert(filteredArr); // 10, 50 alert(filteredArr.isEmpty()); // false ``` -Please note a very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type. They rely on the `constructor` property to do so. +Please note a very interesting thing. Built-in methods like `filter`, `map` and others -- return new objects of exactly the inherited type `PowerArray`. Their internal implementation uses the object's `constructor` property for that. In the example above, ```js arr.constructor === PowerArray ``` -So when `arr.filter()` is called, it internally creates the new array of results using exactly `new PowerArray`, not basic `Array`. That's actually very cool, because we can keep using `PowerArray` methods further on the result. +When `arr.filter()` is called, it internally creates the new array of results using exactly `arr.constructor`, not basic `Array`. That's actually very cool, because we can keep using `PowerArray` methods further on the result. Even more, we can customize that behavior. -We can add a special static getter `Symbol.species` to the class. If exists, it should return the constructor that JavaScript will use internally to create new entities in `map`, `filter` and so on. +We can add a special static getter `Symbol.species` to the class. If it exists, it should return the constructor that JavaScript will use internally to create new entities in `map`, `filter` and so on. -If we'd like built-in methods like `map`, `filter` will return regular arrays, we can return `Array` in `Symbol.species`, like here: +If we'd like built-in methods like `map` or `filter` to return regular arrays, we can return `Array` in `Symbol.species`, like here: ```js run class PowerArray extends Array { @@ -64,27 +64,29 @@ alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function As you can see, now `.filter` returns `Array`. So the extended functionality is not passed any further. +```smart header="Other collections work similarly" +Other collections, such as `Map` and `Set`, work alike. They also use `Symbol.species`. +``` + ## No static inheritance in built-ins Built-in objects have their own static methods, for instance `Object.keys`, `Array.isArray` etc. As we already know, native classes extend each other. For instance, `Array` extends `Object`. -Normally, when one class extends another, both static and non-static methods are inherited. - -So, if `Rabbit extends Animal`, then: +Normally, when one class extends another, both static and non-static methods are inherited. That was thoroughly explained in the article [](info:static-properties-methods#statics-and-inheritance). -1. `Rabbit.methods` are callable for `Animal.methods`, because `Rabbit.[[Prototype]] = Animal`. -2. `new Rabbit().methods` are also available, because `Rabbit.prototype.[[Prototype]] = Animal.prototype`. +But built-in classes are an exception. They don't inherit statics from each other. -That's thoroughly explained in the chapter [](info:static-properties-methods#statics-and-inheritance). - -But built-in classes are an exception. They don't inherit statics `(1)` from each other. - -For example, both `Array` and `Date` inherit from `Object`, so their instances have methods from `Object.prototype`. But `Array.[[Prototype]]` does not point to `Object`. So there's `Object.keys()`, but not `Array.keys()` and `Date.keys()`. +For example, both `Array` and `Date` inherit from `Object`, so their instances have methods from `Object.prototype`. But `Array.[[Prototype]]` does not reference `Object`, so there's no, for instance, `Array.keys()` (or `Date.keys()`) static method. Here's the picture structure for `Date` and `Object`: ![](object-date-inheritance.svg) +<<<<<<< HEAD +======= + +As you can see, there's no link between `Date` and `Object`. They are independent, only `Date.prototype` inherits from `Object.prototype`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -Note, there's no link between `Date` and `Object`. Both `Object` and `Date` exist independently. `Date.prototype` inherits from `Object.prototype`, but that's all. +That's an important difference of inheritance between built-in objects compared to what we get with `extends`. diff --git a/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md b/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md index 396b45288..e56ac580a 100644 --- a/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md +++ b/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md @@ -4,7 +4,11 @@ importance: 5 # Garip instanceof +<<<<<<< HEAD Aşağıdaki `instanceof` neden `true` dönüyor? Aslında `a`'nın `B()` tarafından üretilmediği açık. +======= +In the code below, why does `instanceof` return `true`? We can easily see that `a` is not created by `B()`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function A() {} diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md index 2f1e63879..65f8911f1 100644 --- a/1-js/09-classes/06-instanceof/article.md +++ b/1-js/09-classes/06-instanceof/article.md @@ -2,7 +2,11 @@ `instanceof` operatörü bir objenin belirli bir sınıfa ait olup olmadığını kontrol eder. Kalıtımı da hesaba kadar. +<<<<<<< HEAD Böyle bir kontrole bir çok durumda ihtiyacımız olabilir. Aşağıda *polymorphic* fonksiyon inşa etmek için, argümanların tipine göre farklı davranış sergileyen bir yapı yer almaktadır. +======= +Such a check may be necessary in many cases. For example, it can be used for building a *polymorphic* function, the one that treats arguments differently depending on their type. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 [cut] @@ -14,7 +18,11 @@ Yazımı şu şekildedir: obj instanceof Class ``` +<<<<<<< HEAD Eğer `obj`'e `Class`'a aitse `true` döner. ( Veya `Class`'tan türüyorsa) +======= +It returns `true` if `obj` belongs to the `Class` or a class inheriting from it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin: @@ -47,16 +55,32 @@ alert( arr instanceof Array ); // true alert( arr instanceof Object ); // true ``` +<<<<<<< HEAD Dikkat edin `arr` ayrıca `Object` sınıfına da aittir. Çünkü `Array` prototipi `Object`'ten kalıtım alır. `instanceof` operatörü prototip zincirini kontrol eder. `Symbol.hasInstance` statik metodu ile daha performanslı yapılabilir. +======= +Please note that `arr` also belongs to the `Object` class. That's because `Array` prototypically inherits from `Object`. + +Normally, `instanceof` examines the prototype chain for the check. We can also set a custom logic in the static method `Symbol.hasInstance`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `obj instanceof Class` algoritması kabaca aşağıdaki gibi çalışır: +<<<<<<< HEAD 1. Eğer `Symbol.hasInstance` statik metodu var ise onu kullan. Şu şekilde: ```js run // canEat yapabilen herşeyi animal varsayalım. +======= +1. If there's a static method `Symbol.hasInstance`, then just call it: `Class[Symbol.hasInstance](obj)`. It should return either `true` or `false`, and we're done. That's how we can customize the behavior of `instanceof`. + + For example: + + ```js run + // setup instanceOf check that assumes that + // anything with canEat property is an animal +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 class Animal { static [Symbol.hasInstance](obj) { if (obj.canEat) return true; @@ -67,6 +91,7 @@ Dikkat edin `arr` ayrıca `Object` sınıfına da aittir. Çünkü `Array` proto alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) çağırıldı. ``` +<<<<<<< HEAD 2. Çoğu sınıf `Symbol.hasInstance`'a sahip değildir. Bu durumda eğer `Class.prototype` `obj`'nin bir prototipine zincirde olup olmadığını kontrol eder. Diğer bir deyişle: @@ -74,13 +99,31 @@ Dikkat edin `arr` ayrıca `Object` sınıfına da aittir. Çünkü `Array` proto obj.__proto__ == Class.prototype obj.__proto__.__proto__ == Class.prototype obj.__proto__.__proto__.__proto__ == Class.prototype +======= +2. Most classes do not have `Symbol.hasInstance`. In that case, the standard logic is used: `obj instanceOf Class` checks whether `Class.prototype` is equal to one of the prototypes in the `obj` prototype chain. + + In other words, compare one after another: + ```js + obj.__proto__ === Class.prototype? + obj.__proto__.__proto__ === Class.prototype? + obj.__proto__.__proto__.__proto__ === Class.prototype? +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ... + // if any answer is true, return true + // otherwise, if we reached the end of the chain, return false ``` +<<<<<<< HEAD Yukarıdaki örnekte `Rabbit.prototype == rabbit.__proto__`, cevabı doğrudan verir. Kalıtım yönünden ise `rabbit` üst sınıfın da instanceof'u dur. +======= + In the example above `rabbit.__proto__ === Rabbit.prototype`, so that gives the answer immediately. + + In the case of an inheritance, the match will be at the second step: + +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run class Animal {} class Rabbit extends Animal {} @@ -89,8 +132,16 @@ Dikkat edin `arr` ayrıca `Object` sınıfına da aittir. Çünkü `Array` proto *!* alert(rabbit instanceof Animal); // true */!* +<<<<<<< HEAD // rabbit.__proto__ == Rabbit.prototype // rabbit.__proto__.__proto__ == Animal.prototype (match!) +======= + + // rabbit.__proto__ === Rabbit.prototype + *!* + // rabbit.__proto__.__proto__ === Animal.prototype (match!) + */!* +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` Aşağıda `rabbit instanceof Animal`'ın `Animal.prototype`a karşılaştırılması gösterilmiştir. @@ -99,11 +150,17 @@ Aşağıda `rabbit instanceof Animal`'ın `Animal.prototype`a karşılaştırıl Ayrıca [objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf) metodu ile eğer `objA` `objB`'nin prototip zincirinin herhangi bir yerindeyse `true` döner. `obj instanceof Class` şu şekilde de yazılabilir `Class.prototype.isPrototypeOf(obj)` +<<<<<<< HEAD `Class` yapıcısının kendisi bu kontrolde yer almaz, garip değil mi? Sadece `Class.prototype` ve prototiplerin zinciri önemlidir. Bu `prototip` değiştiğinde farklı sonuçlara yol açabilir. Aşağıdaki gibi: +======= +It's funny, but the `Class` constructor itself does not participate in the check! Only the chain of prototypes and `Class.prototype` matters. + +That can lead to interesting consequences when a `prototype` property is changed after the object is created. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run @@ -119,9 +176,13 @@ alert( rabbit instanceof Rabbit ); // false */!* ``` +<<<<<<< HEAD Prototip'i değiştirmemeniz ve daha güvenli tutmanız için bir diğer neden daha olmuş oldu. ## Bonus: Tip için Object toString +======= +## Bonus: Object.prototype.toString for the type +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bildiğiniz gibi basit objeler karakter dizisine `[object Object]` şeklinde çevrilir. @@ -153,7 +214,7 @@ let objectToString = Object.prototype.toString; // Bu hangi tipte? let arr = []; -alert( objectToString.call(arr) ); // [object Array] +alert( objectToString.call(arr) ); // [object *!*Array*/!*] ``` Burada [call](mdn:js/function/call)'i kullandık ve [](info:call-apply-decorators) bölümünde `objectToString` fonksiyonunun nasıl `this=arr` kaynağında kullanılacağı gösterilmişti. @@ -181,11 +242,19 @@ let user = { alert( {}.toString.call(user) ); // [object User] ``` +<<<<<<< HEAD Çoğu çevre-özel objelerde böyle özellikler bulunur. Aşağıda tarayıcı tabanlılar yer almaktadır: ```js run // Çevre-özel objeler ve sınıflar için toStringTag alert( window[Symbol.toStringTag]); // window +======= +For most environment-specific objects, there is such a property. Here are some browser specific examples: + +```js run +// toStringTag for the environment-specific object and class: +alert( window[Symbol.toStringTag]); // Window +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest alert( {}.toString.call(window) ); // [object Window] @@ -193,12 +262,24 @@ alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest] ``` Gördüğünüz gibi, sonuç kesinlikle `Symbol.toStringTag`'dır ve varsa `[object ...]` içerisinde saklanır. +<<<<<<< HEAD Sonunda daha güçlü bir typeof'a sahip olduk. Artık sadece ilkel datalar için değil, gömülü gelen objeler için bile çalışabilir durumdadır. +======= +As you can see, the result is exactly `Symbol.toStringTag` (if exists), wrapped into `[object ...]`. + +At the end we have "typeof on steroids" that not only works for primitive data types, but also for built-in objects and even can be customized. + +We can use `{}.toString.call` instead of `instanceof` for built-in objects when we want to get the type as a string rather than just to check. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Gömülü gelen objeler için tipi karakter dizi olarak almak istediğimizde `instanceof` yerine bunu kullanabiliriz. Instanceof sadece kontrol işlemi yapmaktaydı. +<<<<<<< HEAD ## Özet Bildiğimiz tip kontrol metodlarının üzerinden geçecek olursak: +======= +Let's summarize the type-checking methods that we know: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 | | çalışır | döner | |---------------|-------------|---------------| diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md index 02a421724..b21f8b913 100644 --- a/1-js/09-classes/07-mixins/article.md +++ b/1-js/09-classes/07-mixins/article.md @@ -2,19 +2,33 @@ JavaScript sadece bir objeden kalıtım yapmaya izin verir. Bir obje için sadece bir tane `[[Prototype]]` olabilir. Ayrıca bir sınıf sadece bir sınıfı genişletebilir. +<<<<<<< HEAD Bu bizi sınırlandırabilir. Örneğin, `StreetSweeper` ve `Bycicle` adında iki tane sınıfınız var ve bunlardan `StreetSweepingBycicle` adında bir sınıf yaratmak istiyorsunuz. Veya programlama hakkında konuşacak olursak, `Renderer`adında şablonu uygulayan ve `EventEmitter` adında olayları işleyen bir sınıfımız olsun, ve bu fonksiyonaliteyi birlikte `Page` adında bir sınıfta kullanmak istiyoruz. Böylece page hem şabloları kullanabiliecek hemde hemde olayları yayacak(emit). +======= +But sometimes that feels limiting. For instance, we have a class `StreetSweeper` and a class `Bicycle`, and want to make their mix: a `StreetSweepingBicycle`. + +Or we have a class `User` and a class `EventEmitter` that implements event generation, and we'd like to add the functionality of `EventEmitter` to `User`, so that our users can emit events. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Burada bize `mixin` konsepti yardımcı olabilir. +<<<<<<< HEAD Wikipedia'da şu şekilde tanımlanmıştır: [mixin](https://en.wikipedia.org/wiki/Mixin) sınıfı diğer sınıflar tarafından kullanılacak metodları olan ve bunun için bir üst sınıfa ihtiyaç duymayan yapıdır. +======= +As defined in Wikipedia, a [mixin](https://en.wikipedia.org/wiki/Mixin) is a class containing methods that can be used by other classes without a need to inherit from it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Diğer bir deyişle *mixin* belirli davranışları uygulayan metodları sağlar, fakat bunu tek başına kullanmayız, bunu diğer sınıflara başka davranışlar eklemek için kullanırız. ## Mixin örneği +<<<<<<< HEAD JavaScript mixini yapmak için en kolay yol kullanışlı metodlarla donatılmış bir objedir. Böylece kolayca birleştirebilir ve herhangi bir sınıfın prototipine koyabiliriz. +======= +The simplest way to implement a mixin in JavaScript is to make an object with useful methods, so that we can easily merge them into a prototype of any class. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin aşağoda `sayHiMixin`, `User` için "speech" metodunu ekler: @@ -68,16 +82,27 @@ let sayMixin = { }; let sayHiMixin = { +<<<<<<< HEAD __proto__: sayMixin, // (veya Object.create ile de prototipi ayarlayabilirdik) +======= + __proto__: sayMixin, // (or we could use Object.setPrototypeOf to set the prototype here) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 sayHi() { *!* // call parent method */!* +<<<<<<< HEAD super.say("Hello " + this.name); }, sayBye() { super.say("Bye " + this.name); +======= + super.say(`Hello ${this.name}`); // (*) + }, + sayBye() { + super.say(`Bye ${this.name}`); // (*) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } }; @@ -94,11 +119,23 @@ Object.assign(User.prototype, sayHiMixin); new User("Dude").sayHi(); // Hello Dude! ``` +<<<<<<< HEAD Dikkat ederseniz `sayHiMixin` içinde `super.say() çağırıldığında o mixin'in prototipindeki metoduna bakar, sınıfın değil. ![](mixin-inheritance.svg) Çünkü `sayHiMixin` metodları `[[HomeObject]]`'e ayarlanmıştır. Bundan dolayı `super` aslında `User.__proto__` değil de `sayHiMixin.__proto__` anlamına gelir. +======= +Please note that the call to the parent method `super.say()` from `sayHiMixin` (at lines labelled with `(*)`) looks for the method in the prototype of that mixin, not the class. + +Here's the diagram (see the right part): + +![](mixin-inheritance.svg) + +That's because methods `sayHi` and `sayBye` were initially created in `sayHiMixin`. So even though they got copied, their `[[HomeObject]]` internal property references `sayHiMixin`, as shown in the picture above. + +As `super` looks for parent methods in `[[HomeObject]].[[Prototype]]`, that means it searches `sayHiMixin.[[Prototype]]`, not `User.[[Prototype]]`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## EventMixin @@ -106,11 +143,21 @@ Artık gerçek olaylar için mixin yapabiliriz. Çoğu objenin en önemli özelliği olaylar(event) çalışabilmesidir. +<<<<<<< HEAD Bir obje önemli bir olay olduğunda "olay" yaratacak metoda sahip olmalıdır. Diğer objeler ise böyle bir olayı "dinlemeli"'dir. Bir olay isme sahip olmalıdır, bunun ile birlikte ek verileri de barındırabilir. Örneğin `user` objesi kullanıcı giriş yapacağı zaman `"login"` olayını oluşturabilir. Diğer bir `calendar` objesi ise bu olayı alıp giriş yapan kullanıcı için takvimi doldurabilir. +======= +An important feature of many browser objects (for instance) is that they can generate events. Events are a great way to "broadcast information" to anyone who wants it. So let's make a mixin that allows us to easily add event-related functions to any class/object. + +- The mixin will provide a method `.trigger(name, [...data])` to "generate an event" when something important happens to it. The `name` argument is a name of the event, optionally followed by additional arguments with event data. +- Also the method `.on(name, handler)` that adds `handler` function as the listener to events with the given name. It will be called when an event with the given `name` triggers, and get the arguments from the `.trigger` call. +- ...And the method `.off(name, handler)` that removes the `handler` listener. + +After adding the mixin, an object `user` will be able to generate an event `"login"` when the visitor logs in. And another object, say, `calendar` may want to listen for such events to load the calendar for the logged-in person. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Veya bir `menu` `"select"` adında menüden seçim yapıldığında oluşturulan bir olay yaratabilir, diğer objeler bilgi alabilir ve bu olaya göre işlem yapabilir. @@ -135,7 +182,7 @@ let eventMixin = { * menu.off('select', handler) */ off(eventName, handler) { - let handlers = this._eventHandlers && this._eventHandlers[eventName]; + let handlers = this._eventHandlers?.[eventName]; if (!handlers) return; for(let i = 0; i < handlers.length; i++) { if (handlers[i] == handler) { @@ -149,8 +196,13 @@ let eventMixin = { * this.trigger('select', data1, data2); */ trigger(eventName, ...args) { +<<<<<<< HEAD if (!this._eventHandlers || !this._eventHandlers[eventName]) { return; // Bu olayın ismi ile başka kotarıcı yok. +======= + if (!this._eventHandlers?.[eventName]) { + return; // no handlers for that event name +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } // kotarıcıyı çağır. @@ -161,9 +213,15 @@ let eventMixin = { Burada 3 tane metod var: +<<<<<<< HEAD 1. `.on(eventName, handler)` `handler`(kotarıcı)'da belirtilen isimle bir olay çalışırsa kotarıcıyı ata. Kotarıcılar `_eventHandlers` özelliğinde saklanır. 2. `.off(eventName, handler)` -- kotarıcı listesinden fonksiyon siler. 3. `.trigger(eventName, ...args)` -- olay yaratır; tüm kotarıcılar çağırılır ve `args` bunlara argüman olarak iletilir. +======= +- `.on(eventName, handler)` -- assigns function `handler` to run when the event with that name occurs. Technically, there's an `_eventHandlers` property that stores an array of handlers for each event name, and it just adds it to the list. +- `.off(eventName, handler)` -- removes the function from the handlers list. +- `.trigger(eventName, ...args)` -- generates the event: all handlers from `_eventHandlers[eventName]` are called, with a list of arguments `...args`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Kullanım: @@ -188,7 +246,11 @@ menu.on("select", value => alert("Value selected: " + value)); menu.choose("123"); // value selected ``` +<<<<<<< HEAD Artık kullanıcının seçimine farklılık gösteren bir kodumuz var ise bunu `menu.on(...)` ile kullanabiliriz. +======= +Now, if we'd like any code to react to a menu selection, we can listen for it with `menu.on(...)`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `eventMix` böyle bir davranışa istediğimiz kadar sınıfa eklenebilir bunu yaparken de kalıtım zincirine dokunulmamış olur. @@ -196,8 +258,16 @@ Artık kullanıcının seçimine farklılık gösteren bir kodumuz var ise bunu *Mixin* -- geniş bir nesne tabanlı programlama deyimidir buna göre; bir sınıf diğer sınıflar için metodlar içerebilir. +<<<<<<< HEAD Python gibi bazı diller birden fazla kalıtım ile mixin yaratmaya izin verir. JavaScript bunu desteklemez, fakat mixinleri prototipe kopyalayarak uygulanmasına izin verir. Ayrıca mixinleri kullanarak bir sınıfın davranışlarını genişletebiliriz, bunu yukarıdaki olay-kotarıcı'da görmekteyiz. Mixinler gerçek sınıfın metodlarının üzerine yazılarak çatışmaya neden olabilir. Bundan dolayı genellikle mixinleri isimlendirirken dikkatli olmalı ve problemi en aza indirmelisiniz. +======= +Some other languages allow multiple inheritance. JavaScript does not support multiple inheritance, but mixins can be implemented by copying methods into prototype. + +We can use mixins as a way to augment a class by adding multiple behaviors, like event-handling as we have seen above. + +Mixins may become a point of conflict if they accidentally overwrite existing class methods. So generally one should think well about the naming methods of a mixin, to minimize the probability of that happening. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/09-classes/07-mixins/head.html b/1-js/09-classes/07-mixins/head.html index 77ea38b20..20e3a6354 100644 --- a/1-js/09-classes/07-mixins/head.html +++ b/1-js/09-classes/07-mixins/head.html @@ -18,7 +18,7 @@ * menu.off('select', handler) */ off(eventName, handler) { - let handlers = this._eventHandlers && this._eventHandlers[eventName]; + let handlers = this._eventHandlers?.[eventName]; if (!handlers) return; for(let i = 0; i < handlers.length; i++) { if (handlers[i] == handler) { diff --git a/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md index 1223accf6..ed246908b 100644 --- a/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md +++ b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md @@ -1,8 +1,14 @@ Bir fonksiyon içerisinden baktığımızda farklılıklar daha aşikar olmakta. +<<<<<<< HEAD "dışarı sıçra" seçeneği olduğunda `try..catch` davranışı daha farklı olmaktadır. Örneğin `try..catch` içerieinde bir `return` olduğunda. `try..catch` bloğunun sonunda her türlü `finally`'e uğramak zorunludur, bu `return` bile olsa. +======= +The behavior is different if there's a "jump out" of `try...catch`. + +For instance, when there's a `return` inside `try...catch`. The `finally` clause works in case of *any* exit from `try...catch`, even via the `return` statement: right after `try...catch` is done, but before the calling code gets the control. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function f() { @@ -11,7 +17,7 @@ function f() { *!* return "result"; */!* - } catch (e) { + } catch (err) { /// ... } finally { alert('cleanup!'); @@ -27,11 +33,11 @@ function f() { try { alert('start'); throw new Error("an error"); - } catch (e) { + } catch (err) { // ... if("can't handle the error") { *!* - throw e; + throw err; */!* } @@ -42,4 +48,9 @@ function f() { f(); // cleanup! ``` -Burada `finally` temizliğin yapılacağının garantisini verir. Eğer temizlik kodunu `f`'in sonuna koyarsanız çalışmayabilir. \ No newline at end of file +<<<<<<< HEAD +Burada `finally` temizliğin yapılacağının garantisini verir. Eğer temizlik kodunu `f`'in sonuna koyarsanız çalışmayabilir. +======= + +It's `finally` that guarantees the cleanup here. If we just put the code at the end of `f`, it wouldn't run in these situations. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md index d02bc99e1..eb9cedfd2 100644 --- a/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md +++ b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md @@ -6,6 +6,7 @@ importance: 5 Aşağıdaki iki kod parçacığını karşılaştırınız. +<<<<<<< HEAD 1. İlki `finally` ile `try..catch`'den sonra kod çalıştırmaktadır: ```js @@ -13,12 +14,22 @@ Aşağıdaki iki kod parçacığını karşılaştırınız. birşeyler çalıştır } catch (e) { hatalarla uğraş +======= +1. The first one uses `finally` to execute the code after `try...catch`: + + ```js + try { + work work + } catch (err) { + handle errors +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } finally { *!* temizlik yap */!* } ``` +<<<<<<< HEAD 2. İkinci bölümde ise temizliği doğrudan `try..catch` sonrasında yap: ```js @@ -26,6 +37,15 @@ Aşağıdaki iki kod parçacığını karşılaştırınız. birşeyler çalıştır } catch (e) { hatalarla uğraş +======= +2. The second fragment puts the cleaning right after `try...catch`: + + ```js + try { + work work + } catch (err) { + handle errors +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } *!* diff --git a/1-js/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md index fd97c8dfb..233ccb1b9 100644 --- a/1-js/10-error-handling/1-try-catch/article.md +++ b/1-js/10-error-handling/1-try-catch/article.md @@ -1,9 +1,16 @@ +<<<<<<< HEAD # Hataları idare etme, "try..catch" Programlarken ne kadar mükemmel olmaya çalışsak da bazen kodumuzda hatalar olabilir. Bu bizim hatalarımızdan dolayı olabileceği gibi, kullanıcı girişlerinden, beklenmeyen server cevaplarından veya binlerce farklı nedenden dolayı oluşabilir. +======= +# Error handling, "try...catch" + +No matter how great we are at programming, sometimes our scripts have errors. They may occur because of our mistakes, an unexpected user input, an erroneous server response, and for a thousand other reasons. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Genelde kodda bir hata olduğunda yazdığımız kod bir adım ileriye gidemeden sona erer ve konsola bunun nedenini yazar. +<<<<<<< HEAD Hataları "yakalamak" için "try..catch" kullanarak doğrudan kodun ölmesine aman vermek yerine daha mantıklı şeyler yaptırabiliriz. [cut] @@ -11,6 +18,13 @@ Hataları "yakalamak" için "try..catch" kullanarak doğrudan kodun ölmesine am ## "try..catch" yazımı `try..catch` yapısı iki ana bloktan oluşur: `try` ( dene ) ve sonrasında `catch` ( yakala ): +======= +But there's a syntax construct `try...catch` that allows us to "catch" errors so the script can, instead of dying, do something more reasonable. + +## The "try...catch" syntax + +The `try...catch` construct has two main blocks: `try`, and then `catch`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js try { @@ -30,12 +44,24 @@ try { 2. Eğer hata yoksa `catch(err)` görmezden gelinir: çalışma try'ın sonuna ulaşır ve sonra `catch`'i atlar. 3. Eğer hata meydana gelirse, `try`'ın çalışması durdurulur ve `catch(err)` çalışmaya başlar. Buradaki `err` değişkeni ne olduda hata meydana geldiye dair detayları tutan bir objedir. +<<<<<<< HEAD ![](try-catch-flow.svg) Öyleyse `try {...}` içerisindeki kod doğrudan sona eremez, bize `catch` içerisinde bunu idare etmemiz için olanak sağlar. Bir kaç örnek ile daha da pekiştirelim: +======= +1. First, the code in `try {...}` is executed. +2. If there were no errors, then `catch (err)` is ignored: the execution reaches the end of `try` and goes on, skipping `catch`. +3. If an error occurs, then the `try` execution is stopped, and control flows to the beginning of `catch (err)`. The `err` variable (we can use any name for it) will contain an error object with details about what happened. + +![](try-catch-flow.svg) + +So, an error inside the `try {...}` block does not kill the script -- we have a chance to handle it in `catch`. + +Let's look at some examples. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - Hatasız örnek: `alert` `(1)` ve `(2)`'yi gösterir: @@ -48,13 +74,16 @@ Bir kaç örnek ile daha da pekiştirelim: alert('try bitti'); // *!*(2) <--*/!* - } catch(err) { + } catch (err) { alert('Catch görmezden gelindi çünkü bir hata meydana gelmedi.'); // (3) } +<<<<<<< HEAD alert("...Kod normal çalışmasına devam etti."); +======= +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ``` - Hatalı örnek: `(1)` ve `(3)`'ü gösterir: @@ -70,11 +99,12 @@ Bir kaç örnek ile daha da pekiştirelim: alert('try bitti (hiç erişilemedi)'); // (2) - } catch(err) { + } catch (err) { alert(`Hata meydana geldi!`); // *!*(3) <--*/!* } +<<<<<<< HEAD alert("...Kod normal çalışmasına devam etti."); ``` @@ -82,12 +112,20 @@ Bir kaç örnek ile daha da pekiştirelim: ````warn header="`try..catch` sadece çalışma zamanlı hatalar içindir" `try..catch`'in çalışabilmesi için kod çalışabilir olmalıdır. Diğer bir deyişle geçerli bir JavaScript kodu olmalıdır. +======= + ``` + + +````warn header="`try...catch` only works for runtime errors" +For `try...catch` to work, the code must be runnable. In other words, it should be valid JavaScript. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer kod yazımsal olarak hatalıysa çalışmayacaktır, örneğin süslü parantezler açılmış ama kapatılmamışsa: ```js run try { {{{{{{{{{{{{ +<<<<<<< HEAD } catch(e) { alert("JavaScript motoru bunu anlayamaz, çünkü geçerli bir kod değildir."); } @@ -101,18 +139,39 @@ Bundan dolayı `try..catch` ancak ve ancak gerçerli kodlarda oluşacak hatalar ````warn header="`try..catch` Senkronize olarak çalışmaktadır" Eğer "zamanlanmış" bir kodda, `setTimeout` gibi, bir hata meydana gelirse `try..catch` bunu yakalayamaz: +======= +} catch (err) { + alert("The engine can't understand this code, it's invalid"); +} +``` + +The JavaScript engine first reads the code, and then runs it. The errors that occur on the reading phase are called "parse-time" errors and are unrecoverable (from inside that code). That's because the engine can't understand the code. + +So, `try...catch` can only handle errors that occur in valid code. Such errors are called "runtime errors" or, sometimes, "exceptions". +```` + + +````warn header="`try...catch` works synchronously" +If an exception happens in "scheduled" code, like in `setTimeout`, then `try...catch` won't catch it: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run try { setTimeout(function() { noSuchVariable; // kod burada ölecektir. }, 1000); +<<<<<<< HEAD } catch (e) { alert( "çalışmaz" ); +======= +} catch (err) { + alert( "won't work" ); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } ``` Bunun nedeni `try..catch`'in aslında fonksiyonu zamanlayan `setTimeout`'u kapsamasıdan dolayıdır. Fakat fonksiyon daha sonra çlışır. O anda aslında motor `try..catch`i geçmiş olur. +<<<<<<< HEAD Eğer zamanlanmış fonksiyon içerisinde bu hatayı yakalamak istiyorsanız, `try..catch` bloğunu fonksiyonun içerisine yazmalısınız: ```js run @@ -121,6 +180,17 @@ setTimeout(function() { noSuchVariable; // try..catch hataları yakalayacaktır. } catch (e) { alert( "hata burada yakalandı!" ); +======= +That's because the function itself is executed later, when the engine has already left the `try...catch` construct. + +To catch an exception inside a scheduled function, `try...catch` must be inside that function: +```js run +setTimeout(function() { + try { + noSuchVariable; // try...catch handles the error! + } catch { + alert( "error is caught here!" ); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } }, 1000); ``` @@ -133,17 +203,24 @@ Hata meydana geldiğinde, JavaScript bu hata ile ilgili bir obje yaratır. Sonra ```js try { // ... -} catch(err) { // <-- the "error object", could use another word instead of err +} catch (err) { // <-- the "error object", could use another word instead of err // ... } ``` Tüm varsayılan hatalar için, `catch` içerisinde hata objesi iki ana özelliği taşır: +<<<<<<< HEAD `isim` (name) : Hata ismi. Tanımsız değerler için bu `"ReferenceError"`'dur. `mesaj` (message) : Hatanın detayları hakkında anlaşılır bilgi verir. +======= +For all built-in errors, the error object has two main properties: + +`name` +: Error name. For instance, for an undefined variable that's `"ReferenceError"`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Çoğu ortamda standart olmayan başka özellikler de bulunmaktadır. Bunlardan en fazla kullanılan ve desteklenen: @@ -157,10 +234,15 @@ try { *!* lalala; // hata, değişken tanımlı değil! */!* -} catch(err) { +} catch (err) { alert(err.name); // ReferenceError +<<<<<<< HEAD alert(err.message); // lalala tanımlı değil alert(err.stack); // ReferenceError: lalala şurada tanımlanmadı ... +======= + alert(err.message); // lalala is not defined + alert(err.stack); // ReferenceError: lalala is not defined at (...call stack) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 // ayrıca hatayı tümüyle göstermek de mümkündür. // hata karakter dizisine "name:message" gibi çevirildi. @@ -169,15 +251,37 @@ try { ``` +<<<<<<< HEAD ## `try..catch` kullanımı Gerçek hayatta `try..catch`'ın nasıl kullanılabileceğine bakalım. Bildiğiniz gibi, JavaScript [JSON.parse(str)](mdn:js/JSON/parse) metodu sayesinde JSON olarak tanımlanmış değerlerin okunmasına olanak tanır. +======= +If we don't need error details, `catch` may omit it: + +```js +try { + // ... +} catch { // <-- without (err) + // ... +} +``` + +## Using "try...catch" + +Let's explore a real-life use case of `try...catch`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Genelde ağ üzerinden başka bir serverdan veya kaynaktan gelen verinin okunmasında kullanılır. +<<<<<<< HEAD Bu veriyi aldıktan sonra `JSON.parse` ile şu şekilde okuyabiliriz: +======= +Usually it's used to decode data received over the network, from the server or another source. + +We receive it and call `JSON.parse` like this: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let json = '{"name":"John", "age": 30}'; // sunucudan gelen veri. @@ -194,11 +298,19 @@ JSON hakkında daha derin bilgiyi bölümünden öğrenebilirsiniz. **Eğer `json` düzgün gelmiyorsa `JSON.parse` hata üretir ve kod anında "ölür".** +<<<<<<< HEAD Bunun ile yetinmeli miyiz? Elbette hayır +======= +Should we be satisfied with that? Of course not! +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu şekliyle eğer gelen veride bir hata varsa ziyaretçi nerede yanlış olduğunu bilemeyecektir. İnsanlar hata olduğunda herhangi bir hata mesajı almadan öylece ölen bir şeyden nefret ederler. +<<<<<<< HEAD Bunun çözümü için `try..catch` kullanılabilir: +======= +Let's use `try...catch` to handle the error: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let json = "{ bad json }"; @@ -210,12 +322,19 @@ try { */!* alert( user.name ); // doesn't work -} catch (e) { +} catch (err) { *!* +<<<<<<< HEAD // ...çalışma buradan devam eder. alert( "Kusura bakmayın, veride hata var.Talep tekrar yapacaktır" ); alert( e.name ); alert( e.message ); +======= + // ...the execution jumps here + alert( "Our apologies, the data has errors, we'll try to request it one more time." ); + alert( err.name ); + alert( err.message ); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* } ``` @@ -237,8 +356,13 @@ try { alert( user.name ); // ama isim de yok! */!* +<<<<<<< HEAD } catch (e) { alert( "çalışmaz" ); +======= +} catch (err) { + alert( "doesn't execute" ); +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } ``` Burada `JSON.parse` doğru bir şekilde çalışır, `"name"`'in olmaması aslında bir sorundur. @@ -283,18 +407,22 @@ alert(error.message); // Birşeyler oldu o_O ```js run try { JSON.parse("{ bad json o_O }"); -} catch(e) { +} catch (err) { *!* - alert(e.name); // SyntaxError + alert(err.name); // SyntaxError */!* - alert(e.message); // Unexpected token o in JSON at position 0 + alert(err.message); // Unexpected token b in JSON at position 2 } ``` Gördüğünüz gibi bu `SyntaxError` yani yazım yanlışıdır. +<<<<<<< HEAD Bizim durumumuzda ise `name`'in olmaması yazım hatası olarak tanımlanabilir. Bunu isimsiz öğretmen olmayacağından yazı hatası olarak tanımlayabiliri. +======= +And in our case, the absence of `name` is an error, as users must have a `name`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 atacak olursak: @@ -313,8 +441,13 @@ try { alert( user.name ); +<<<<<<< HEAD } catch(e) { alert( "JSON Error: " + e.message ); // JSON Error: Tanımlanmamış veri:isim yok +======= +} catch (err) { + alert( "JSON Error: " + err.message ); // JSON Error: Incomplete data: no name +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } ``` @@ -324,9 +457,15 @@ Artık `catch` tüm hata idaresinin yapılacağı yerdir: Buna `JSON.parse` ve d ## Tekrar atma ( Rethrowing ) +<<<<<<< HEAD Yukarıdaki örnekte yanlış veri ile başa çıkmak için `try..catch` kullandık. Peki başka beklenmeyen hata varsa ne yapacağız? Mesela değişken tanımsız olabilir veya bilmediğimiz bir hata ile de karşılaşabiliriz. Şu şekilde: +======= +In the example above we use `try...catch` to handle incorrect data. But is it possible that *another unexpected error* occurs within the `try {...}` block? Like a programming error (variable is not defined) or something else, not just this "incorrect data" thing. + +For example: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run let json = '{ "age": 30 }'; // tamamlanmamış veri @@ -335,7 +474,7 @@ try { user = JSON.parse(json); // <-- user'dan önce "let" kullanmayı unuttuysak // ... -} catch(err) { +} catch (err) { alert("JSON Error: " + err); // JSON Error: ReferenceError: user is not defined // (hata aslında JSON ile alakalı değil) } @@ -344,18 +483,41 @@ Tabiki herşey mümkün! Programcılar da hata yapar. Yıllardır milyonlarca ki Biz denemelerimizde `try..catch`i "doğru olmayan veri"'yi yakalamak için kullandık. Fakat aslında `catch` `try`'da olabilecek *tüm* hataları alır.Yukarıdaki örnekte beklenmeyecen bir hata almasına rağmen bundan dolayı `"JSON Error" mesajı verir. Bu aslında kod ayıklamayı zorlaştıran birşeydir ve yanlış kullanımdır. +<<<<<<< HEAD Yine de ne hatası olduğunu `name`'den çıkarmak mümkündür. +======= +In our case, `try...catch` is placed to catch "incorrect data" errors. But by its nature, `catch` gets *all* errors from `try`. Here it gets an unexpected error, but still shows the same `"JSON Error"` message. That's wrong and also makes the code more difficult to debug. + +To avoid such problems, we can employ the "rethrowing" technique. The rule is simple: + +**Catch should only process errors that it knows and "rethrow" all others.** + +The "rethrowing" technique can be explained in more detail as: + +1. Catch gets all errors. +2. In the `catch (err) {...}` block we analyze the error object `err`. +3. If we don't know how to handle it, we do `throw err`. + +Usually, we can check the error type using the `instanceof` operator: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run try { user = { /*...*/ }; -} catch(e) { +} catch (err) { *!* +<<<<<<< HEAD alert(e.name); // "ReferenceError" tanımsız değişkene erişim hatası +======= + if (err instanceof ReferenceError) { +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* + alert('ReferenceError'); // "ReferenceError" for accessing an undefined variable + } } ``` +<<<<<<< HEAD Kural basit: **Catch sadece bildiği hataları işlemeli diğerlerini ise tekrar hata olarak atmalı** @@ -365,6 +527,9 @@ Kural basit: 1. Catch tüm mesajları alır 2. `catch(err){...}` bloğunda tüm error objesi analiz edilir. 3. Eğer beklemediğimiz bir hata ise bu `throw err` ile tekrar atılır. +======= +We can also get the error class name from `err.name` property. All native errors have it. Another option is to read `err.constructor.name`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Aşağıdaki kodda `catch` sadece `SyntaxError`'ü idare etmektedir: @@ -384,13 +549,20 @@ try { alert( user.name ); -} catch(e) { +} catch (err) { *!* +<<<<<<< HEAD if (e.name == "SyntaxError") { alert( "JSON Hatası: " + e.message ); } else { throw e; // tekrar at (*) +======= + if (err instanceof SyntaxError) { + alert( "JSON Error: " + err.message ); + } else { + throw err; // rethrow (*) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } */!* @@ -398,9 +570,17 @@ try { ``` `try..catch` içerisinde eğer `(*)` hata tekrar atılırsa bu `try..catch` in dışına taşar. Bu daha üstte bulunan başka bir `try..catch` tarafından yakalanması gerekmektedir. Böyle bir ihtimal yoksa kod burada sona ermelidir. +<<<<<<< HEAD Böylece `catch` bloğu aslında sadece bildiği hataları idare eder ve diğerlerini hiç kontrol etmeden paslar diyebiliriz. Aşağıdaki örnekte bu hatalar nasıl bir `try..catch` seviyesi daha eklenerek idare edilebilir bunu göreceğiz: +======= +The error throwing on line `(*)` from inside `catch` block "falls out" of `try...catch` and can be either caught by an outer `try...catch` construct (if it exists), or it kills the script. + +So the `catch` block actually handles only errors that it knows how to deal with and "skips" all others. + +The example below demonstrates how such errors can be caught by one more level of `try...catch`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run function readData() { @@ -411,11 +591,15 @@ function readData() { *!* blabla(); // error! */!* - } catch (e) { + } catch (err) { // ... - if (e.name != 'SyntaxError') { + if (!(err instanceof SyntaxError)) { *!* +<<<<<<< HEAD throw e; // tekrar at! Nasıl idare edileceğini bilmiyor. +======= + throw err; // rethrow (don't know how to deal with it) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 */!* } } @@ -423,19 +607,32 @@ function readData() { try { readData(); -} catch (e) { +} catch (err) { *!* +<<<<<<< HEAD alert( "External catch got: " + e ); // burada yakala! */!* } ``` Burada `readData` sadece `SyntaxError` ile nasıl başa çıkacağını biliyor. Bunun yanında dıştaki `try..catch` ise geri kalan herşeyi idare ediyor. +======= + alert( "External catch got: " + err ); // caught it! +*/!* +} +``` + +Here `readData` only knows how to handle `SyntaxError`, while the outer `try...catch` knows how to handle everything. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -## try..catch..finally +## try...catch...finally Aslında tamamı bu kadar değil! +<<<<<<< HEAD `try..catch` bloğu son olarak `finally` ile bitebilir. +======= +The `try...catch` construct may have one more code clause: `finally`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Eğer varsa aşağıdaki durumların hepsi için çalışır: @@ -447,7 +644,7 @@ Yazımı şu şekildedir: ```js *!*try*/!* { ... try to execute the code ... -} *!*catch*/!*(e) { +} *!*catch*/!* (err) { ... handle errors ... } *!*finally*/!* { ... execute always ... @@ -460,7 +657,7 @@ Aşağıdaki kodu çalıştırmayı deneyiniz: try { alert( 'try' ); if (confirm('Make an error?')) BAD_CODE(); -} catch (e) { +} catch (err) { alert( 'catch' ); } finally { alert( 'finally' ); @@ -496,7 +693,7 @@ let start = Date.now(); try { result = fib(num); -} catch (e) { +} catch (err) { result = 0; *!* } finally { @@ -509,11 +706,16 @@ alert(result || "error occured"); alert( `execution took ${diff}ms` ); ``` +<<<<<<< HEAD Kodu çalıştırdığınızda `35` değeri girerseniz normal olarak `try` sonrasında `finally` sırası ile çalışır. Sonrasında `-1` ile deneyin, anında hata alacaksınız. Çalışma süresi `0ms` gösterecek. İki çalışmada da süre doğru bir şekilde tutuldu. +======= +You can check by running the code with entering `35` into `prompt` -- it executes normally, `finally` after `try`. And then enter `-1` -- there will be an immediate error, and the execution will take `0ms`. Both measurements are done correctly. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Diğer bir deyişle, fonksiyondan çıkmanın iki yolu verdir. Bunlar `return` veya `throw` olabilir. `finally` ise bunların ikisini de idare edebilir. +<<<<<<< HEAD ```smart header="Değişkenler `try..catch..finally` içerisinde yereldir" Dikkat ederseniz `result` ve `diff` değişkenleri `try..catch`'den *önce* tanımlanmışlardır. @@ -524,6 +726,16 @@ Diğer türlü `let` `{...}` bloğunun içerisinde olsaydı, sadece parantez iç ````smart header="`finally` ve `return`" Finally kelimesi `try..catch`'den her türlü çıkış ile çalışır. Bu doğrudan `return` için de geçerlidir. +======= +```smart header="Variables are local inside `try...catch...finally`" +Please note that `result` and `diff` variables in the code above are declared *before* `try...catch`. + +Otherwise, if we declared `let` in `try` block, it would only be visible inside of it. +``` + +````smart header="`finally` and `return`" +The `finally` clause works for *any* exit from `try...catch`. That includes an explicit `return`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Aşağıdaki örnekte `try` içerisinde `return` bulunmaktadır. Bu durumda `finally` sonuç dış koda iletilmeden önce çalışır. @@ -535,7 +747,7 @@ function func() { return 1; */!* - } catch (e) { + } catch (err) { /* ... */ } finally { *!* @@ -548,9 +760,13 @@ alert( func() ); // önce finally içerisindeki alert çalışır sonra bu. ``` ```` -````smart header="`try..finally`" +````smart header="`try...finally`" +<<<<<<< HEAD `catch` olmadan hazırlanan `try..finally` yapısı da kullışlıdır. Bunu henelde hatayı o anda idare etmek istemediğimizde kullanırız, bunun ile birlikte başladığımız işlemin bittiğini de garanti altına almak isteriz. +======= +The `try...finally` construct, without `catch` clause, is also useful. We apply it when we don't want to handle errors here (let them fall through), but want to be sure that processes that we started are finalized. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function func() { @@ -562,7 +778,11 @@ function func() { } } ``` +<<<<<<< HEAD Yukarıdaki kodda `try` içerisinde olacak herhangi bir hata doğrudan dışarı çıkacaktır. Akış dışarı sıçramadan önce `finally` çalışır. +======= +In the code above, an error inside `try` always falls out, because there's no `catch`. But `finally` works before the execution flow leaves the function. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```` ## Genel Hataları Yakalama @@ -571,11 +791,19 @@ Yukarıdaki kodda `try` içerisinde olacak herhangi bir hata doğrudan dışarı Aşağıdaki bölüm aslında JavaScript çekirdeğinde bulunmamaktadır. ``` +<<<<<<< HEAD Diyelim ki `try..catch`'in dışında bir hata ile karşılaştınız ve kodunuz sona erdi. Bu programlama hatası veya başka bir hata olabilir. Böyle bir durumda ne yapmak lazım? Hataları loglayabilir, kullanıcıya bir hata gösterebiliriz. Aslında şartnamede bunun ile ilgili bir belirti bulunmasa da çoğu ortam bunu temin eder. Örneğin Node.JS bunun için [process.on('uncaughtException')](https://nodejs.org/api/process.html#process_event_uncaughtexception)'i kullanır. Tarayıcıda [window.onerror](mdn:api/GlobalEventHandlers/onerror)' özelliğine bir fonksiyon tanımlanabilir. Bu yakalanmayan bir hata olduğunda çalışacaktır. +======= +Let's imagine we've got a fatal error outside of `try...catch`, and the script died. Like a programming error or some other terrible thing. + +Is there a way to react on such occurrences? We may want to log the error, show something to the user (normally they don't see error messages), etc. + +There is none in the specification, but environments usually provide it, because it's really useful. For instance, Node.js has [`process.on("uncaughtException")`](https://nodejs.org/api/process.html#process_event_uncaughtexception) for that. And in the browser we can assign a function to the special [window.onerror](mdn:api/GlobalEventHandlers/onerror) property, that will run in case of an uncaught error. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yazımı: @@ -621,38 +849,74 @@ Bu hataları izlemek için aslında bazı servisler mevcuttur. Bunlardan bazıla Aşağıdaki gibi çalışırlar: +<<<<<<< HEAD 1. Servise kayıt olunur ve yazdığımız koda yerleştirmek için bir kod parçası alınır. 2. Bu JS içerisinde bir çeşit `window.onerror` uygulaması mevcuttur. 3. Hata meydana geldiğinde, bu servise ağ üzerinden bir istekte bulunur. 3. Servise tekrar giriş yaptığınızda arayüzde bu hataları görürsünüz. +======= +1. We register at the service and get a piece of JS (or a script URL) from them to insert on pages. +2. That JS script sets a custom `window.onerror` function. +3. When an error occurs, it sends a network request about it to the service. +4. We can log in to the service web interface and see errors. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet +<<<<<<< HEAD `try..catch` yapısı çalışma zamanlı hataları idare eder. Tam olarak kodu çalıştırmaya çalışır ve hataları yakalar. +======= +The `try...catch` construct allows to handle runtime errors. It literally allows to "try" running the code and "catch" errors that may occur in it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yazımı: ```js try { +<<<<<<< HEAD // bu kodu çalıştır } catch(err) { // eğer hata varsa, buraya atla // err hata objesi +======= + // run this code +} catch (err) { + // if an error happened, then jump here + // err is the error object +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 } finally { // try/catch'den sonra her halükarda burayı çalıştır. } ``` `catch` bölümü veya `finally` bölümü olmadan da çalışır. `try..catch`, `try..finally`'de doğru kullanımdır. +<<<<<<< HEAD Hata objeleri şu özellikleri taşır: - `message` -- insan tarafından okunabilir hata mesajı - `name` -- hatanın ismi - `stack` ( standart değil ) - hatanın oluştuğu andaki yığın. Hatanın nedenini bulmak için yararlı bir özellik. +======= +There may be no `catch` section or no `finally`, so shorter constructs `try...catch` and `try...finally` are also valid. + +Error objects have following properties: + +- `message` -- the human-readable error message. +- `name` -- the string with error name (error constructor name). +- `stack` (non-standard, but well-supported) -- the stack at the moment of error creation. + +If an error object is not needed, we can omit it by using `catch {` instead of `catch (err) {`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 `throw` kullanarak biz de kendi hatalarımızı oluşturabiliriz. Teknik olarak, `throw`'un argümanları herşey olabilir. Fakat genelde `Error` sınıfından türemesi ve özelliklerini alması iyi bir yoldur. Bunları nasıl genişleteceğinizi bir sonraki bölümde görebilirsiniz. +<<<<<<< HEAD Tekrar atma hata idaresi için temel bir desendir: bir `catch` bloğu her zaman hangi hataların geleceğini ve buna göre ne yapması gerektiğini bilmeli, eğer bilmiyorsa bu hatayı tekrar atmalıdır. `try..catch` olmasa bile çoğu ortam "genel" bir hata idarecisi oluşturmamızı sağlar. Böylece gözden kaçan hatalar burada yakalanabilir. Tarayıcı için bu `window.onerror`'dur. +======= +*Rethrowing* is a very important pattern of error handling: a `catch` block usually expects and knows how to handle the particular error type, so it should rethrow errors it doesn't know. + +Even if we don't have `try...catch`, most environments allow us to setup a "global" error handler to catch errors that "fall out". In-browser, that's `window.onerror`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md b/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md index bb6b74cfa..754e68f9a 100644 --- a/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md +++ b/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md @@ -2,7 +2,7 @@ class FormatError extends SyntaxError { constructor(message) { super(message); - this.name = "FormatError"; + this.name = this.constructor.name; } } diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md index fb36e229c..bef8c9092 100644 --- a/1-js/10-error-handling/2-custom-errors/article.md +++ b/1-js/10-error-handling/2-custom-errors/article.md @@ -2,11 +2,19 @@ Birşey geliştirirken, genelde kendi hata sınıflarımıza sahip olmak isteriz, böylece bize has yerlerde oluşabilecek hataları idare edebiliriz. Örneğin network hataları için `HttpError`, veri tabanı hataları için `DbError`, arama hataları için `NotFoundError` gibi. +<<<<<<< HEAD Hatalarımız basit hata özelliklerini `message`, `name` ve `stack`'i desteklemelidir. Bunun ile birlikte kendine has özellikleri de olabilir. Örneğin `HttpError` objesi `statusCode` özelliğine sahip olabilir. Bu özelliğin değeri de `404`, `403`, `500` gibi hata kodları olacaktır. +======= +Our errors should support basic error properties like `message`, `name` and, preferably, `stack`. But they also may have other properties of their own, e.g. `HttpError` objects may have a `statusCode` property with a value like `404` or `403` or `500`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 JavaScript `throw`'un argüman ile atılmasına izin verir. Teknik olarak hata sınıflarımızın hepsinin `Error`'dan türemesine gerek yoktur. Fakat türetirsek `obj instance of` kullanmak mümkün olacaktır. Böylece hata objesi tanımlanabilir. Bundan dolayı türetirseniz daha iyidir. +<<<<<<< HEAD Uygulamanızı geliştirirken oluşturacağınız `HttpTimeoutError` gibi sınıflar `HttpError`'dan türetilebilir. +======= +As the application grows, our own errors naturally form a hierarchy. For instance, `HttpTimeoutError` may inherit from `HttpError`, and so on. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Hata sınıflarını genişletme @@ -18,27 +26,47 @@ let json = `{ "name": "John", "age": 30 }`; ``` Dahili olarak gelen `JSON.parse` kullanılacaktır. Eğer bozuk `json` gelirse bu durumda `SyntaxError` atar. +<<<<<<< HEAD Fakat `json` yazım olarak doğru olsa bile geçerli sayılmayabilir, değil mi? Belki bizim ihtiyacımız veri bulumamaktadır. Örneğin, `name` ve `age` özellikleri bulunmaz ise bu durumda bizim için geçerli bir veri sayılmaz. `readUser(json)` fonksiyonu sadece JSON okumayacak, doğruluk kontrolü de yapacaktır. Eğer gerekli alanlar yok ise, format yanlışsa bu durumda bu bizim için hatadır. Ayrıca bu bir `SyntaxError` yani yazım hatası değildir. Çünkü yazım olarak doğru olsa da başka türde bir hatadır. Bu hatalara `ValidationError` diyeceğiz ve bunun için bir sınıf oluşturacağız. Bu tür hatalar ayrıca hatanın nedeni hakkında da bilgi içermelidir. +======= +Internally, we'll use `JSON.parse`. If it receives malformed `json`, then it throws `SyntaxError`. But even if `json` is syntactically correct, that doesn't mean that it's a valid user, right? It may miss the necessary data. For instance, it may not have `name` and `age` properties that are essential for our users. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bizim yazacağımız `ValidationError` sınıfı dahili olarak bulunan `Error` sınıfından türemelidir. +<<<<<<< HEAD `Error` sınıfı gömülü olarak gelmektedir. Genişletmeden önce neyi genişleteceğimizi bilmek iyi olacaktır: Şu şekilde: +======= +Our `ValidationError` class should inherit from the `Error` class. + +The `Error` class is built-in, but here's its approximate code so we can understand what we're extending: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js // Gömülü gelen error sınıfının basitleştirilmiş tanımı JavaScript kodu olarak gösterilmektedir. class Error { constructor(message) { this.message = message; +<<<<<<< HEAD this.name = "Error"; // (farklı gömülü hata sınıfları için farklı isimler) this.stack = ; // standartlarda yok fakat çoğu ortam desteklemekte } } ``` Şimdi `ValidationError` kalıtımını yapabiliriz: +======= + this.name = "Error"; // (different names for different built-in error classes) + this.stack = ; // non-standard, but most environments support it + } +} +``` + +Now let's inherit `ValidationError` from it and try it in action: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run untrusted *!* @@ -64,10 +92,18 @@ try { ``` Yapıcıya bakarsanız: +<<<<<<< HEAD 1. `(1)` satırda üst sınıfın yapıcısı çağırılmakta. Javascript bizim kalıtılan sınıftan `super` ile üst sınıfı çağırmamız koşulunu koymaktadır. Böylece üst sınıftaki yapıcı `message`'ı doğru bir şekilde ayarlar. 2. Üst sınıfın yapıcısı da `name` ve `"Error"` özelliğini ayarlar, bundan dolayı `(2)` satırda bunu doğru değere ayarlamış oluruz. `readUser(json)` kullanmayı deneyelim: +======= +Please note: in the line `(1)` we call the parent constructor. JavaScript requires us to call `super` in the child constructor, so that's obligatory. The parent constructor sets the `message` property. + +The parent constructor also sets the `name` property to `"Error"`, so in the line `(2)` we reset it to the right value. + +Let's try to use it in `readUser(json)`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run class ValidationError extends Error { @@ -118,15 +154,27 @@ Ayrıca `err.name`'e şu şekilde bakabiliriz: // (err instanceof SyntaxError) kullanmak yerine } else if (err.name == "SyntaxError") { // (*) // ... +<<<<<<< HEAD ``` `instanceof` kullanmak daha iyidir. İleride `ValidationError`'u genişletir ve `PropertyRequiredError` gibi alt tipler oluşturursanız `instanceof` ile kalıtılan sınıfı da kontrol etmiş olursunuz. Bundan dolayı gelecekte olacak değişikliklere daha iyi tepki verir. +======= +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Ayrıca `catch` bilinmeyen bir hata olduğunda tekrardan bu hatayı atması `(**)` oldukça önemlidir. `catch` sadece veri kontrolü ve yazım hatalarını kontrol etmektedir. Diğer hatalar ise bilinmeyen hatalar bölümüne düşmektedir. +<<<<<<< HEAD ## İleri seviye kalıtım +======= +Also it's important that if `catch` meets an unknown error, then it rethrows it in the line `(**)`. The `catch` block only knows how to handle validation and syntax errors, other kinds (caused by a typo in the code or other unknown reasons) should fall through. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 +<<<<<<< HEAD `ValidationError` sınıfı çok genel bir sınıf. Çoğu şey yanlış gidebilir. Özellik eksik olabilir veya farklı formatta olabilir( örneğin `age` özelliğinin karakter dizisi olması). Bundan dolayı daha özel `PropertyRequiredError` sınıfını yazmakta fayda var. Bu eklenmeyen özellikle ilgili bilgi verecektir. +======= +The `ValidationError` class is very generic. Many things may go wrong. The property may be absent or it may be in a wrong format (like a string value for `age` instead of a number). Let's make a more concrete class `PropertyRequiredError`, exactly for absent properties. It will carry additional information about the property that's missing. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run class ValidationError extends Error { @@ -180,7 +228,13 @@ try { ``` Yeni yazdığımız `PropertyRequiredError` sınıfının kullanımı kolaydır: sadece `new PropertyRequiredError(property)` ismini göndermek yeterli. Okunabilir `message` yapıcı tarafından üretilir. +<<<<<<< HEAD dikkat ederseniz `PropertyRequiredError` içerisindeki `this.name` yapıcısı elle yapılmıştır. Bu biraz gereksiz gelebilir ( `this.name = `'in her yeni üretilen sınıf için yazılması). Bunun bir çözümü var elbette. Kendimize ait bir "basic error" ile bu **zor** olayı omzumuzdan atmak mümkündür. Bunun için yapıcıda `this.name` için `this.constructor.name` kullanılarak çözüm sağlanabilir. Sonra bundan kalıtım yapılır. +======= +The new class `PropertyRequiredError` is easy to use: we only need to pass the property name: `new PropertyRequiredError(property)`. The human-readable `message` is generated by the constructor. + +Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedious -- to assign `this.name = ` in every custom error class. We can avoid it by making our own "basic error" class that assigns `this.name = this.constructor.name`. And then inherit all our custom errors from it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Örneğin buna `MyError` diyelim @@ -214,6 +268,7 @@ Böylece hata sınıfları kısalmış oldu, özellikle `"this.name=..."`'i att Hatırlarsanız yukarıdaki `readUser` "kullanıcıların verilerini okumak" amacıyla yazılmıştı, değil mi? Farklı hatalar olabileceğinden dolayı şimdilik `SyntaxError`, `ValidationError` gibi hata sınıflarına sahibiz. Fakat `readUser` ileride daha da büyüyebilir: yeni kod yeni hatalara neden olacaktır. +<<<<<<< HEAD Bundan dolayı `readUser`'ı çağıran fonksiyon hataları ile başa çıkmalıdır. Şu anda bir çok `if`, `catch` ile kontrol edilip eğer bunlar dahilinde değil ise tekrar hata atma işlemini yapmaktayız. Fakat `readUser` fonksiyonu daha fazla hataya neden olursa, kendimize: gerçekten de tüm hataları birer birer kontrol etmemiz gerekli mi sorusunu sormalıyız. Tabiki cevap "Hayır": Dıştaki kod her zaman "diğerlerinden bir üst seviyede" olmak ister. "veri okuma hatası" gibi bir hata olmak ister. Neden olduğu çok da önemli değildir. Tabi hataların detayları olsa iyi olur fakat sadece ihtiyaç olursa. @@ -221,6 +276,45 @@ Tabiki cevap "Hayır": Dıştaki kod her zaman "diğerlerinden bir üst seviyede Bunlar ışığında `ReadError` sınıfını yeniden yazacak olursak. Eğer `readUser` içerisinde bir hata olursa bunu yakalayacak ve `ReadError` üreteceğiz. Ayrıca orjinal hatanın `cause` ( neden ) özelliğine referans vereceğiz. Bundan dolayı dıştaki kod sadece `ReadError`'u kontrol etmeli. Aşağıdaki kod `ReadError`'u tanımlamakta ve `readUser` ve `try..catch`'in nasıl kullanılacağını göstermektedir: +======= +The purpose of the function `readUser` in the code above is "to read the user data". There may occur different kinds of errors in the process. Right now we have `SyntaxError` and `ValidationError`, but in the future `readUser` function may grow and probably generate other kinds of errors. + +The code which calls `readUser` should handle these errors. Right now it uses multiple `if`s in the `catch` block, that check the class and handle known errors and rethrow the unknown ones. + +The scheme is like this: + +```js +try { + ... + readUser() // the potential error source + ... +} catch (err) { + if (err instanceof ValidationError) { + // handle validation errors + } else if (err instanceof SyntaxError) { + // handle syntax errors + } else { + throw err; // unknown error, rethrow it + } +} +``` + +In the code above we can see two types of errors, but there can be more. + +If the `readUser` function generates several kinds of errors, then we should ask ourselves: do we really want to check for all error types one-by-one every time? + +Often the answer is "No": we'd like to be "one level above all that". We just want to know if there was a "data reading error" -- why exactly it happened is often irrelevant (the error message describes it). Or, even better, we'd like to have a way to get the error details, but only if we need to. + +The technique that we describe here is called "wrapping exceptions". + +1. We'll make a new class `ReadError` to represent a generic "data reading" error. +2. The function `readUser` will catch data reading errors that occur inside it, such as `ValidationError` and `SyntaxError`, and generate a `ReadError` instead. +3. The `ReadError` object will keep the reference to the original error in its `cause` property. + +Then the code that calls `readUser` will only have to check for `ReadError`, not for every kind of data reading errors. And if it needs more details of an error, it can check its `cause` property. + +Here's the code that defines `ReadError` and demonstrates its use in `readUser` and `try..catch`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js run class ReadError extends Error { @@ -289,12 +383,26 @@ try { ``` Yukarıdaki kodda `readUser` tam da tanımlandığı şekliyle çalışmaktadır -- yazım hatalarını yakalar, eğer doğrular ve bilinmeyen hatalar yerine `ReadError` hatası atar. +<<<<<<< HEAD Bundan dolayı dıştaki kod `instanceof ReadError`'u kontrol eder, hepsi bu! Diğer tüm muhtemel hataları listelemeye gerek yok. Bu yaklaşıma "İstisnaları kapsama" yaklaşımı denilir, "düşük seviye istisnalar"'ı alıp bunları "kapsayarak" `ReadError` haline getirdik. Böylece daha soyut, ve çağırması kolay bir kod yazmış olduk. Bu kullanım nesne tabanlı dillerde oldukça yaygındır. +======= +In the code above, `readUser` works exactly as described -- catches syntax and validation errors and throws `ReadError` errors instead (unknown errors are rethrown as usual). + +So the outer code checks `instanceof ReadError` and that's it. No need to list all possible error types. + +The approach is called "wrapping exceptions", because we take "low level" exceptions and "wrap" them into `ReadError` that is more abstract. It is widely used in object-oriented programming. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Özet +<<<<<<< HEAD - Genelde `Error`'dan veya diğer gömülü hata sınıflarından yeni hata türetilir, yapmanız gereken `name` özelliğini ayarlamak ve `super`'i çağırmaktır. - Çoğu zaman `instanceof` ile belirli hataları kontrol edebilirsiniz. Bu kalıtım ile de çalışmaktadır. Fakat bazen 3. parti kütüphanelerden gelen hatalar olabilir, bunların sınıflarını almak çok da kolay olmaz. Bu durumda `name` özelliği ile konrol sağlanabilir. -- Alt-seviye istisnaların idaresi ve üst seviye hataların raporlanması oldukça genel bir tekniktir. Alt seviye istisnalar bazen o objenin özelliği olur. Örneğin yukarıdaki `err.cause` buna iyi bir örnektir, fakat katı bir biçimde gereklidir diyemeyiz. \ No newline at end of file +- Alt-seviye istisnaların idaresi ve üst seviye hataların raporlanması oldukça genel bir tekniktir. Alt seviye istisnalar bazen o objenin özelliği olur. Örneğin yukarıdaki `err.cause` buna iyi bir örnektir, fakat katı bir biçimde gereklidir diyemeyiz. +======= +- We can inherit from `Error` and other built-in error classes normally. We just need to take care of the `name` property and don't forget to call `super`. +- We can use `instanceof` to check for particular errors. It also works with inheritance. But sometimes we have an error object coming from a 3rd-party library and there's no easy way to get its class. Then `name` property can be used for such checks. +- Wrapping exceptions is a widespread technique: a function handles low-level exceptions and creates higher-level errors instead of various low-level ones. Low-level exceptions sometimes become properties of that object like `err.cause` in the examples above, but that's not strictly required. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index 473fb5bfe..cca4983b7 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -2,12 +2,32 @@ # Callback fonksiyonlarına giriş +<<<<<<< HEAD Çoğu JavaScript eylemleri *asenkron*'dur Aşağıdaki `loadScript(src)` fonksiyonuna bakacak olursanız: +======= +```warn header="We use browser methods in examples here" +To demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods: specifically, loading scripts and performing simple document manipulations. + +If you're not familiar with these methods, and their usage in the examples is confusing, you may want to read a few chapters from the [next part](/document) of the tutorial. + +Although, we'll try to make things clear anyway. There won't be anything really complex browser-wise. +``` + +Many functions are provided by JavaScript host environments that allow you to schedule *asynchronous* actions. In other words, actions that we initiate now, but they finish later. + +For instance, one such function is the `setTimeout` function. + +There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we'll cover them in later chapters). + +Take a look at the function `loadScript(src)`, that loads a script with the given `src`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js function loadScript(src) { + // creates a ``` +<<<<<<< HEAD Bunu burada tarayıcıda görüyoruz ancak aynı durum tüm modüller için geçerlidir. ### Modül seviyesinde kapsam +======= +### Module-level scope +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Her modülün kendi üst seviye kapsamı vardır. Diğer bir deyişle, bir modülün üst seviyedeki değişken ve fonksiyonları, diğer programlarda görünmez. +<<<<<<< HEAD Aşağıdaki örnekte, iki program içeri aktarılıyor ve `hello.js` `user.js` de deklare edilen `user` değişkenini kullanmaya çalışıp, hata veriyor: [codetabs src="scopes" height="140" current="index.html"] @@ -84,6 +134,26 @@ Dolayısıyla `user.js` modülünü `index.html` yerine aşağıda gösterildiğ [codetabs src="scopes-working" height="140" current="hello.js"] Tarayıcıda, Her bir ` ``` +<<<<<<< HEAD Eğer gerçekten tarayıcı içi global bir değişkene ihtiyaç duyuyorsak, bu değişkeni (`user`) açık olarak `window` nesnesine atayıp, `window.user` ile ona ulaşabiliriz. Ancak bu işleme gerçekten makul bir sebep olduğunda başvurulmalıdır. +======= +```smart +In the browser, we can make a variable window-level global by explicitly assigning it to a `window` property, e.g. `window.user = "John"`. + +Then all scripts will see it, both with `type="module"` and without it. + +That said, making such global variables is frowned upon. Please try to avoid them. +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ### Modülün kodu içe aktarıldığı ilk yerde değerlendirilir. +<<<<<<< HEAD Eğer aynı modül birden fazla yerde içe aktarılırsa, içindeki kod sadece ilk seferinde çalıştırılır. Daha sonra bu kodun çıktıları tüm içe aktarılan yerlere verilir. Bunun önemli sonuçları vardır. Bunu örnekler üzerinden görelim. +======= +If the same module is imported into multiple other modules, its code is executed only once, upon the first import. Then its exports are given to all further importers. + +The one-time evaluation has important consequences, that we should be aware of. + +Let's see a couple of examples. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 İlk olarak, eğer bir modülü çalıştırmak bir mesajı göstermek şeklinde bir yan etkiye sebep oluyorsa, bu modülün çok kez içe aktarılması onun yalnızca ilk seferinde tetiklenmesi gerçeğini değiştirmez: @@ -120,12 +208,23 @@ alert("Modül değerlendirildi!"); import `./alert.js`; // Modül değerlendirildi! // 📁 2.js +<<<<<<< HEAD import `./alert.js`; // (hiçbir şey) ``` Pratikte, üst seviyedeki modül kodu çoğunlukla başlatma işlemi için kullanılır. Veri yapılarını üretir, bunlara başlangıç değerleri verir ve tekrar kullanılabilir olmalarını istiyorsak da bunları dışa aktarırız. Şimdi daha ileri bir örnek. +======= +import `./alert.js`; // (shows nothing) +``` + +The second import shows nothing, because the module has already been evaluated. + +There's a rule: top-level module code should be used for initialization, creation of module-specific internal data structures. If we need to make something callable multiple times - we should export it as a function, like we did with `sayHi` above. + +Now, let's consider a deeper example. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Diyelim bir modül bir nesneyi dışa aktarıyor: @@ -150,6 +249,7 @@ import {admin} from './admin.js'; alert(admin.name); // Pete *!* +<<<<<<< HEAD // Hem 1.js hem de 2.js aynı nesneyi içe aktardı // 1.js yapılan değişiklikler 2.js dosyasına da yansır */!* @@ -160,37 +260,72 @@ Tekrar edecek olursak, modül yalnızca bir kez çalıştırılır. Dışa aktar Böyle bir özellik konfigürasyon gerektiren modüller için harikadır. Gereken özellikleri ilk içe aktarımda ayarlayıp, daha sonraki içe aktarmalar için modülü hazır hale getiririz. Örneğin, `admin.js` modülü bazı işlevleri sağlayabilir ancak bunları gerçekleştirebilmek için dışarıdan bazı bilgileri alması gerekebilir: +======= +// Both 1.js and 2.js reference the same admin object +// Changes made in 1.js are visible in 2.js +*/!* +``` + +As you can see, when `1.js` changes the `name` property in the imported `admin`, then `2.js` can see the new `admin.name`. + +That's exactly because the module is executed only once. Exports are generated, and then they are shared between importers, so if something changes the `admin` object, other modules will see that. + +**Such behavior is actually very convenient, because it allows us to *configure* modules.** + +In other words, a module can provide a generic functionality that needs a setup. E.g. authentication needs credentials. Then it can export a configuration object expecting the outer code to assign to it. + +Here's the classical pattern: +1. A module exports some means of configuration, e.g. a configuration object. +2. On the first import we initialize it, write to its properties. The top-level application script may do that. +3. Further imports use the module. + +For instance, the `admin.js` module may provide certain functionality (e.g. authentication), but expect the credentials to come into the `config` object from outside: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js // 📁 admin.js -export let admin = { }; +export let config = { }; export function sayHi() { +<<<<<<< HEAD alert(`Hizmete hazır, ${admin.name}!`); } ``` Uygulamamızın ilk programı olan `init.js` dosyasında, `admin.name` için değer atıyoruz. Bu işlemden sonra `admin.js` dosyasının kendisi de dahil, fonksiyonu çağıranlar bu değeri görebileceklerdir: +======= + alert(`Ready to serve, ${config.user}!`); +} +``` + +Here, `admin.js` exports the `config` object (initially empty, but may have default properties too). + +Then in `init.js`, the first script of our app, we import `config` from it and set `config.user`: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```js // 📁 init.js -import {admin} from './admin.js'; -admin.name = "Pete"; +import {config} from './admin.js'; +config.user = "Pete"; ``` -```js -// 📁 other.js -import {admin, sayHi} from './admin.js'; +...Now the module `admin.js` is configured. -alert(admin.name); // *!*Pete*/!* +Further importers can call it, and it correctly shows the current user: + +```js +// 📁 another.js +import {sayHi} from './admin.js'; sayHi(); // Hizmete hazır, *!*Pete*/!*! ``` + ### import.meta `import.meta` nesnesi kullanılmakta olan modül hakkında bilgileri içerir. +<<<<<<< HEAD İçeriği ortama bağlıdır. Tarayıcıda programın URL bilgisini ya da eğer HTML içindeyse ilgili web sayfasının URL bilgisini içerir: ```html run height=0 @@ -200,10 +335,28 @@ sayHi(); // Hizmete hazır, *!*Pete*/!*! ``` ### Üst seviye "this"in değeri undefined dır. +======= +Its content depends on the environment. In the browser, it contains the URL of the script, or a current webpage URL if inside HTML: + +```html run height=0 + +``` + +### In a module, "this" is undefined +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu detay bir bilgidir ancak eksik bir şey bırakmamak adına bundan söz etmeliyiz. +<<<<<<< HEAD Bir modülde üst seviye `this`in değeri, modül olmayan programdaki bir global nesnenin tersine, tanımsızdır (undefined): +======= +In a module, top-level `this` is undefined. + +Compare it to non-module scripts, where `this` is a global object: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```html run height=0 @@ -252,19 +420,37 @@ Bir yan etki olarak, modül programları altlarındaki HTML elemanlarını daima ``` +<<<<<<< HEAD Lütfen dikkat edin: ikinci program aslında ilkinden önce çalışır! Dolayısıyla önce `undefined` sonra `object` görürüz. Bu modüllerin çalıştırılması belgenin işlenmesi tamamlanana kadar ertelendiği içindir. Sıradan programlar hemen çalışır ve dolayısıyla çıktısını önce görürüz. Modülleri kullanırken, HTML belgesinin JavaScript uygulamasının hazır olmasından önce görünebileceğinin farkında olmalıyız. Bazı fonksiyonlar henüz çalışmayabilir. When using modules, we should be aware that HTML-document can show up before the JavaScript application is ready. Some functionality may not work yet. Kullanıcıları bu durumdan haberdar etmek için sayfaya bir "yüklenme göstergesi" (loading indicators) koyabiliriz. +======= +Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`. + +That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first. + +When using modules, we should be aware that the HTML page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ### Async satır içi programlarda çalışır +<<<<<<< HEAD Async niteliği ` ``` +<<<<<<< HEAD 2. Farklı bir alan adından ulaşılan harici programlar [CORS](mdn:Web/HTTP/CORS) üstbilgisini gerektirir. Başka bir deyişle, eğer modüle başka bir alan adından ulaşılıyorsa, bu erişime izin verildiğini belirtmek açısından uzak sunucu bir `Access-Control-Allow-Origin: *` üstbilgisini sağlamalıdır (`*` yerine ulaşılan alan adının ismi kullanılabilir). +======= +2. External scripts that are fetched from another origin (e.g. another site) require [CORS](mdn:Web/HTTP/CORS) headers, as described in the chapter . In other words, if a module script is fetched from another origin, the remote server must supply a header `Access-Control-Allow-Origin` allowing the fetch. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```html @@ -308,11 +504,19 @@ import {sayHi} from 'sayHi'; // Hata, "yalın" modül // './sayHi.js' şeklinde olmalıdır ``` +<<<<<<< HEAD Node.js ve sarmalama araçları (bundle tools) gibi bazı ortamlar modülleri bulmak için kendi yöntemleri ve bunların ince ayarı için kendi çengelleri (hooks) olduğundan, yalın modüllerin kullanımına izin verir. Ancak tarayıcılar henüz yalın modülleri desteklememektedir. +======= +Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ### Uyumluluk, "nomodule" +<<<<<<< HEAD Eski tarayıcılar `type="module"` niteliğini desteklemez. Bilinmeyen tipteki programlar göz ardı edilir. Bu tarayıcılar için `nomodule` niteliği ile tedbir alınabilir: +======= +Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. For them, it's possible to provide a fallback using the `nomodule` attribute: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```html run ``` +<<<<<<< HEAD Eğer sarmalama araçlarını kullanırsak, modüller birlikte toplanacağı için bunların `import/export` ifadeleri özel sarmalayıcı çağrıları ile yer değiştirir. Dolayısıyla, oluşan dosya `type="module"` ifadesini gerektirmez ve bu dosyayı sıradan bir ` +``` +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bununla birlikte, doğal modüller de kullanılabilir. Dolayısıyla burada Webpack kullanmayacağız: bunu siz daha sonra yapılandırabilirsiniz. @@ -356,6 +583,7 @@ Bununla birlikte, doğal modüller de kullanılabilir. Dolayısıyla burada Webp Özetlersek, esas kavramlar: +<<<<<<< HEAD 1. Modül bir dosyadır. `import/export` ifadelerinin çalışabilmesi için, tarayıcıların, pek çok farklılığa işaret eden ` @@ -44,17 +74,28 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); Yukarıdaki resimde, eleman düğümlerine tıklayabilirsiniz ve çocukları açılacak / daralacaktır.. ``` +<<<<<<< HEAD Etiketler *eleman düğümleri* veya sadece eleman olarak adlandırılır. İç içe geçmiş etiketler, çevreleyenlerin alt öğeleri olur. Sonuç olarak bir element ağacımız var: `` burada köktür, sonra `` ve `` gelir bunlar ise html'nin çocuklarıdır vb. +======= +Every tree node is an object. + +Tags are *element nodes* (or just elements) and form the tree structure: `` is at the root, then `` and `` are its children, etc. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Öğelerin içindeki metin, `#text` olarak etiketlenmiş metin düğümleri oluşturur. Bir metin düğümü yalnızca bir dize içerir. Alt öğeleri olmayabilir ve her zaman ağacın bir yaprağıdır. +<<<<<<< HEAD Örneğin, `` etiketinde `"About elks"` metni bulunur. +======= +For instance, the `<title>` tag has the text `"About elk"`. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Lütfen metin düğümlerindeki özel karakterlere dikkat edin: - yeni satır: `↵` (Javascript'te bilineni: `\n`) - boşluk: `␣` +<<<<<<< HEAD Boşluklar ve satır sonları tamamen geçerli karakterlerdir, metin düğümleri oluştup DOM'un bir parçası olurlar. Dolayısıyla, örneğin yukarıdaki örnekte `<head>` etiketi, `<title>` dan önce bazı boşluklar içerir ve bu metin bir "#text" düğümü haline gelir (yalnızca bir satırsonu ve bazı boşluklar içerir). @@ -63,22 +104,32 @@ Yalnızca iki üst düzey istisna vardır: 2. `</body>` 'den sonra bir şey koyarsak, HTML spesifikasyonu tüm içeriğin `<body>` içinde olmasını gerektirdiğinden, bu otomatik olarak sonunda "body" nin içine taşınır. Dolayısıyla `</body>` öğesinden sonra boşluk kalmayabilir.. Diğer durumlarda her şey basittir; eğer belgede boşluklar varsa (tıpkı herhangi bir karakter gibi), o zaman bunlar DOM'da metin düğümleri olurlar ve eğer onları kaldırırsak, o zaman kaybolacaklardır. +======= +Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). + +There are only two top-level exclusions: +1. Spaces and newlines before `<head>` are ignored for historical reasons. +2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. + +In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Yalnızca boşluk içeren metin düğümleri yoktur: ```html no-beautify <!DOCTYPE HTML> -<html><head><title>About elksThe truth about elks. +About elkThe truth about elk. ```

+<<<<<<< HEAD ```smart header="Metinlerin baş/son bölümlerinde bulunan boşluk karakterleri ve sadece boşluk karakterinden oluşan metin düğümleri araçlarda genellikle gizlenir" DOM ile çalışan tarayıcı araçları (yakında ele alınacaktır) genellikle metnin başında / sonunda boşluklar ve etiketler arasında boş metin düğümleri (satır sonları) göstermez. @@ -95,6 +146,23 @@ Tarayıcı hatalı biçimlendirilmiş HTML ile karşılaşırsa, DOM oluştururk Örneğin, en üstteki etiket her zaman olur. Belgede olmasa bile - DOM'da bulunacak, tarayıcı onu oluşturacaktır. Aynısı için de geçerlidir . Örnek olarak, HTML dosyası tek bir kelimeyse yani "Hello" gibi birşey ise , tarayıcı onu içine saracak, gerekli olan ve kısmını ekleyecek ve DOM şu şekilde olacaktır: +======= +```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" +Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. + +Developer tools save screen space this way. + +On further DOM pictures we'll sometimes omit them when they are irrelevant. Such spaces usually do not affect how the document is displayed. +``` + +## Autocorrection + +If the browser encounters malformed HTML, it automatically corrects it when making the DOM. + +For instance, the top tag is always ``. Even if it doesn't exist in the document, it will exist in the DOM, because the browser will create it. The same goes for ``. + +As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `` and ``, and add the required ``, and the DOM will be: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602
@@ -107,7 +175,11 @@ drawHtmlTree(node3, 'div.domtree', 690, 150); DOM oluşturulurken, tarayıcılar belgedeki hataları otomatik olarak işler, etiketleri kapatır vb. +<<<<<<< HEAD Kapatılmamış etiketlere sahip böyle bir belge: +======= +A document with unclosed tags: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```html no-beautify

Hello @@ -116,7 +188,11 @@ Kapatılmamış etiketlere sahip böyle bir belge:

  • Dad ``` +<<<<<<< HEAD ...Tarayıcı etiketleri okurken ve eksik kısımları geri yüklerken normal bir DOM haline gelecektir: +======= +...will become a normal DOM as the browser reads tags and restores the missing parts: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602
    @@ -126,8 +202,13 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); +<<<<<<< HEAD ````warn header="Tablolar her zaman `` e sahiptir" İlginç "özel durum" tablolardır. DOM şartnamesine göre 'ye sahip olmaları gerekir, ancak HTML metni bunu (resmi olarak) ihmal edebilir. Ardından tarayıcı DOM içinde otomatik olarak oluşturur. +======= +````warn header="Tables always have ``" +An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 HTML gösterimi: @@ -144,7 +225,11 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); +<<<<<<< HEAD Gördünüz mü ? Aniden `` ortaya çıktı. Sürprizlerden kaçınmak için tablolarla çalışırken bunu aklınızda bulundurmalısınız. +======= +You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```` ## Diğer düğüm türleri @@ -152,12 +237,18 @@ Gördünüz mü ? Aniden `` ortaya çıktı. Sürprizlerden kaçınmak i Sayfaya daha fazla etiket ve bir yorum ekleyelim: +<<<<<<< HEAD +======= +There are some other node types besides elements and text nodes. + +For example, comments: +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ```html - The truth about elks. + The truth about elk.
    1. An elk is a smart
      2. *!* @@ -172,52 +263,79 @@ Sayfaya daha fazla etiket ve bir yorum ekleyelim:
      +<<<<<<< HEAD Burada yeni bir ağaç düğümü türü görüyoruz `#comment` olarak etiketlenmiş bir yorum düğümü. +======= +We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 DOM'a neden bir yorum eklendiğini düşünebiliriz. Yorumlar sayfayı hiçbir şekilde etkilemez. Ancak bir kural vardır - HTML'de bir şey varsa, o zaman da DOM ağacında olmalıdır. **HTML'deki her şey, hatta yorumlar bile DOM'un bir parçası haline gelir.** +<<<<<<< HEAD HTML'nin en başındaki yönergesi bile bir DOM düğümüdür. DOM ağacında 'den hemen öncedir. Bu düğüme dokunmayacağız, hatta bu nedenle onu diyagramlar üzerine çizmeyeceğiz, ama oradadır. +======= +Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Tüm belgeyi temsil eden `document` nesnesi, resmi olarak bir DOM düğümüdür [12 düğüm tipi](https://dom.spec.whatwg.org/#node) vardır. Pratikte genellikle 4 tanesiyle çalışırız: +<<<<<<< HEAD 1. `document` -- DOM'a "giriş noktasıdır". 2. eleman düğümleri - HTML etiketleri, ağaç yapı taşları. 3. metin düğümleri - metin içerir. 4. yorumlar - bazen bilgileri oraya koyabiliriz, kullanıcıya gösterilmez, ancak JS bunu DOM'dan okuyabilir. +======= +1. `document` -- the "entry point" into DOM. +2. element nodes -- HTML-tags, the tree building blocks. +3. text nodes -- contain text. +4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 ## Kendin gör +<<<<<<< HEAD DOM yapısını gerçek zamanlı görmek için, deneyin [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Sadece belgeyi yazın, DOM'u anında gösterecektir ## Tarayıcı geliştirici araçlarında görün +======= +To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 DOM'u keşfetmenin bir başka yolu da tarayıcı geliştirici araçlarını kullanmaktır. Aslında, geliştirirken kullandığımız şey bu. +<<<<<<< HEAD Bunu yapmak için web sayfasını açın [elks.html](elks.html), tarayıcı geliştirici araçlarını açın ve Öğeler sekmesine geçin. +======= +To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Böyle görünmeli: -![](elks.png) +![](elk.svg) DOM'u görebilir, öğelere tıklayabilir, ayrıntılarını görebilir ve daha fazlasını yapabilirsiniz. Geliştirici araçlarındaki DOM yapısının basitleştirildiğini lütfen unutmayın. Metin düğümleri sadece metin olarak gösterilir. Ve "boş" (yalnızca boşluk) metin düğümleri de yoktur. Sorun değil, çünkü çoğu zaman eleman düğümleriyle ilgileniyoruz. +<<<<<<< HEAD Sol üst köşedeki düğmeyi tıklamak , bir fare (veya diğer işaretçi aygıtları) kullanarak web sayfasından bir düğüm seçmeye ve onu "incelemeye" (Öğeler sekmesinde ona kaydırın) izin verir. Bu, büyük bir HTML sayfamız (ve buna karşılık gelen devasa DOM) olduğunda ve içindeki belirli bir öğenin yerini görmek istediğinde harika çalışıyor. Bunu yapmanın başka bir yolu da bir web sayfasına sağ tıklayıp içerik menüsünde "İncele" yi seçmektir. +======= +Clicking the button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 -![](inspect.png) +![](inspect.svg) Araçların sağ tarafında aşağıdaki alt sekmeler bulunur: @@ -228,15 +346,25 @@ Araçların sağ tarafında aşağıdaki alt sekmeler bulunur: Bunları incelemenin en iyi yolu, öğeye tıklamaktır. Değerlerin çoğu yerinde düzenlenebilir. +<<<<<<< HEAD ## Konsol ile etkileşim DOM'u keşfederken, ona JavaScript de uygulamak isteyebiliriz. Örneğin: bir düğüm alın ve sonucu görmek için onu değiştirmek için bir kod çalıştırın. Öğeler sekmesi ve konsol arasında gezinmek için birkaç ipucu. +======= +As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console. + +For the start: + +1. Select the first `
    2. ` in the Elements tab. +2. Press `key:Esc` -- it will open console right below the Elements tab. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 - Öğeler sekmesinde ilk `
    3. ` öğesini seçin. - `key:Esc` tuşuna basın - konsolu Elements sekmesinin hemen altında açacaktır. Artık son seçilen öğe `$0` olarak mevcut, önceden seçilen öğe `$1` vb. +<<<<<<< HEAD Onlara komutlar çalıştırabiliriz. Örneğin, `$0.style.background = 'red'` seçilen liste öğesini şu şekilde kırmızı yapar: ![](domconsole0.png) @@ -244,6 +372,17 @@ Onlara komutlar çalıştırabiliriz. Örneğin, `$0.style.background = 'red'` s Diğer taraftan, eğer konsoldaysak ve bir DOM düğümünü referans alan bir değişkenimiz varsa, o zaman komutu `inspect(node)` Elementler bölmesinde görmek için kullanabiliriz. Ya da bunu konsola çıkarabilir ve `document.body` kısmını aşağıdaki gibi "yerinde" keşfedebiliriz: ![](domconsole1.png) +======= +![](domconsole0.svg) + +That's how to get a node from Elements in Console. + +There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane. + +Or we can just output the DOM node in the console and explore "in-place", like `document.body` below: + +![](domconsole1.svg) +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 Bu elbette hata ayıklama amaçlıdır. Bir sonraki bölümde DOM'a JavaScript kullanarak erişip değiştireceğiz. @@ -260,4 +399,8 @@ Bir HTML / XML belgesi tarayıcının içinde DOM ağacı olarak temsil edilir. DOM'u incelemek ve manuel olarak değiştirmek için geliştirici araçlarını kullanabiliriz. Burada, başlangıç için en çok kullanılan ve önemli eylemlerin temellerini ele aldık. Chrome Geliştirici Araçları hakkında kapsamlı bir dokümantasyon vardır . Bu araçları öğrenmenin en iyi yolu, onlara tıklamak, menüleri okumaktır. Çoğu seçenek tıklamaya açıktır. Daha sonra, onları genel olarak tanıdığınızda, belgeleri okuyun ve gerisini alın. +<<<<<<< HEAD DOM düğümleri, aralarında gezinmeye, değiştirmeye, sayfada dolaşmaya ve daha pek çok şeye izin veren özelliklere ve yöntemlere sahiptir. Sonraki bölümlerde onlara değineceğiz. +======= +DOM nodes have properties and methods that allow us to travel between them, modify them, move around the page, and more. We'll get down to them in the next chapters. +>>>>>>> 4d01fc20d4d82358e61518a31efe80dec9bb2602 diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.png b/2-ui/1-document/02-dom-nodes/domconsole0.png deleted file mode 100644 index 121c11d75..000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole0.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.svg b/2-ui/1-document/02-dom-nodes/domconsole0.svg new file mode 100644 index 000000000..c0096060a --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/domconsole0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/domconsole0@2x.png b/2-ui/1-document/02-dom-nodes/domconsole0@2x.png deleted file mode 100644 index a8953395c..000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole0@2x.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.png b/2-ui/1-document/02-dom-nodes/domconsole1.png deleted file mode 100644 index c04f015cf..000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole1.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.svg b/2-ui/1-document/02-dom-nodes/domconsole1.svg new file mode 100644 index 000000000..db92359d5 --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/domconsole1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/domconsole1@2x.png b/2-ui/1-document/02-dom-nodes/domconsole1@2x.png deleted file mode 100644 index ce0fa0fff..000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole1@2x.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/elks.html b/2-ui/1-document/02-dom-nodes/elk.html similarity index 86% rename from 2-ui/1-document/02-dom-nodes/elks.html rename to 2-ui/1-document/02-dom-nodes/elk.html index 7d29f3d4e..dc5d65f54 100644 --- a/2-ui/1-document/02-dom-nodes/elks.html +++ b/2-ui/1-document/02-dom-nodes/elk.html @@ -1,7 +1,7 @@ - The truth about elks. + The truth about elk.
      1. An elk is a smart
        2. diff --git a/2-ui/1-document/02-dom-nodes/elk.svg b/2-ui/1-document/02-dom-nodes/elk.svg new file mode 100644 index 000000000..19ea221d2 --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/elk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/elks.png b/2-ui/1-document/02-dom-nodes/elks.png deleted file mode 100644 index 03177c40e..000000000 Binary files a/2-ui/1-document/02-dom-nodes/elks.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/elks@2x.png b/2-ui/1-document/02-dom-nodes/elks@2x.png deleted file mode 100644 index e8a15bd5b..000000000 Binary files a/2-ui/1-document/02-dom-nodes/elks@2x.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/inspect.png b/2-ui/1-document/02-dom-nodes/inspect.png deleted file mode 100644 index 075cf9308..000000000 Binary files a/2-ui/1-document/02-dom-nodes/inspect.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/inspect.svg b/2-ui/1-document/02-dom-nodes/inspect.svg new file mode 100644 index 000000000..658ee5ea2 --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/inspect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/inspect@2x.png b/2-ui/1-document/02-dom-nodes/inspect@2x.png deleted file mode 100644 index 8743dd297..000000000 Binary files a/2-ui/1-document/02-dom-nodes/inspect@2x.png and /dev/null differ diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md index 4a9e741a9..d97f2748a 100644 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md +++ b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md @@ -4,7 +4,7 @@ importance: 5 # DOM children -For the page: +Look at this page: ```html @@ -18,7 +18,7 @@ For the page: ``` -How to access: +For each of the following, give at least one way of how to access them: - The `
        ` DOM node? - The `