diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/solution.md b/1-js/01-a/1-a1/1-camelcase/solution.md similarity index 100% rename from 1-js/04-object-basics/01-object/8-multiply-numeric/solution.md rename to 1-js/01-a/1-a1/1-camelcase/solution.md diff --git a/1-js/01-a/1-a1/1-camelcase/solution/index.js b/1-js/01-a/1-a1/1-camelcase/solution/index.js new file mode 100644 index 0000000000..a4edefb4ab --- /dev/null +++ b/1-js/01-a/1-a1/1-camelcase/solution/index.js @@ -0,0 +1 @@ +function camelize(str) {return str.split('-').map((word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)).join('');} diff --git a/1-js/01-a/1-a1/1-camelcase/source/index.js b/1-js/01-a/1-a1/1-camelcase/source/index.js new file mode 100644 index 0000000000..c420d5da52 --- /dev/null +++ b/1-js/01-a/1-a1/1-camelcase/source/index.js @@ -0,0 +1,10 @@ +function camelize(str) { + return str + .split('-') // разбивает 'my-long-word' на массив ['my', 'long', 'word'] + .map( + // Переводит в верхний регистр первые буквы всех элементом массива за исключением первого + // превращает ['my', 'long', 'word'] в ['my', 'Long', 'Word'] + (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1) + ) + .join(''); // соединяет ['my', 'Long', 'Word'] в 'myLongWord' +} diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js b/1-js/01-a/1-a1/1-camelcase/source/test.js similarity index 54% rename from 1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js rename to 1-js/01-a/1-a1/1-camelcase/source/test.js index bcf5e95552..dadbd1a49c 100644 --- a/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js +++ b/1-js/01-a/1-a1/1-camelcase/source/test.js @@ -1,19 +1,18 @@ describe("camelize", function() { it("leaves an empty line as is", function() { - assert.equal(camelize(""), ""); + expect(camelize("")).toEqual(""); }); it("turns background-color into backgroundColor", function() { - assert.equal(camelize("background-color"), "backgroundColor"); + expect(camelize("background-color")).toEqual(["background", "color"]) }); it("turns list-style-image into listStyleImage", function() { - assert.equal(camelize("list-style-image"), "listStyleImage"); + expect(camelize("list-style-image")).toEqual("listStyleImage"); }); it("turns -webkit-transition into WebkitTransition", function() { - assert.equal(camelize("-webkit-transition"), "WebkitTransition"); + expect(camelize("-webkit-transition")).toEqual("WebkitTransition") }); - -}); \ No newline at end of file +}); diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/task.md b/1-js/01-a/1-a1/1-camelcase/task.md similarity index 98% rename from 1-js/05-data-types/05-array-methods/1-camelcase/task.md rename to 1-js/01-a/1-a1/1-camelcase/task.md index ef5944636e..8f578d940b 100644 --- a/1-js/05-data-types/05-array-methods/1-camelcase/task.md +++ b/1-js/01-a/1-a1/1-camelcase/task.md @@ -1,4 +1,5 @@ importance: 5 +type: js --- diff --git a/1-js/05-data-types/03-string/4-extract-currency/solution.md b/1-js/01-a/1-a1/2-runjs/solution.md similarity index 100% rename from 1-js/05-data-types/03-string/4-extract-currency/solution.md rename to 1-js/01-a/1-a1/2-runjs/solution.md diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/_js.view/solution.js b/1-js/01-a/1-a1/2-runjs/solution/index.js similarity index 100% rename from 1-js/05-data-types/05-array-methods/1-camelcase/_js.view/solution.js rename to 1-js/01-a/1-a1/2-runjs/solution/index.js diff --git a/1-js/01-a/1-a1/2-runjs/source/index.js b/1-js/01-a/1-a1/2-runjs/source/index.js new file mode 100644 index 0000000000..beab1ac3b2 --- /dev/null +++ b/1-js/01-a/1-a1/2-runjs/source/index.js @@ -0,0 +1 @@ +console.log("Test", "passed"); \ No newline at end of file diff --git a/1-js/01-a/1-a1/2-runjs/source/test.js b/1-js/01-a/1-a1/2-runjs/source/test.js new file mode 100644 index 0000000000..dc9f93e320 --- /dev/null +++ b/1-js/01-a/1-a1/2-runjs/source/test.js @@ -0,0 +1,6 @@ +describe("runjs", function() { + + it("passes", function() { }); + it("fails", function() { throw new Error("FAIL") }); + +}); \ No newline at end of file diff --git a/1-js/01-a/1-a1/2-runjs/task.md b/1-js/01-a/1-a1/2-runjs/task.md new file mode 100644 index 0000000000..8f578d940b --- /dev/null +++ b/1-js/01-a/1-a1/2-runjs/task.md @@ -0,0 +1,20 @@ +importance: 5 +type: js + +--- + +# Translate border-left-width to borderLeftWidth + +Write the function `camelize(str)` that changes dash-separated words like "my-short-string" into camel-cased "myShortString". + +That is: removes all dashes, each word after dash becomes uppercased. + +Examples: + +```js +camelize("background-color") == 'backgroundColor'; +camelize("list-style-image") == 'listStyleImage'; +camelize("-webkit-transition") == 'WebkitTransition'; +``` + +P.S. Hint: use `split` to split the string into an array, transform it and `join` back. diff --git a/1-js/05-data-types/05-array-methods/1-camelcase/solution.md b/1-js/01-a/1-a1/3-errorjs/solution.md similarity index 100% rename from 1-js/05-data-types/05-array-methods/1-camelcase/solution.md rename to 1-js/01-a/1-a1/3-errorjs/solution.md diff --git a/1-js/01-a/1-a1/3-errorjs/solution/index.js b/1-js/01-a/1-a1/3-errorjs/solution/index.js new file mode 100644 index 0000000000..490f570ada --- /dev/null +++ b/1-js/01-a/1-a1/3-errorjs/solution/index.js @@ -0,0 +1,10 @@ +function camelize(str) { + return str + .split('-') // splits 'my-long-word' into array ['my', 'long', 'word'] + .map( + // capitalizes first letters of all array items except the first one + // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word'] + (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1) + ) + .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord' +} diff --git a/1-js/01-a/1-a1/3-errorjs/source/index.js b/1-js/01-a/1-a1/3-errorjs/source/index.js new file mode 100644 index 0000000000..4cb7888c93 --- /dev/null +++ b/1-js/01-a/1-a1/3-errorjs/source/index.js @@ -0,0 +1,6 @@ + +function f() { + throw new Error("ERR"); +} + +f(); \ No newline at end of file diff --git a/1-js/01-a/1-a1/3-errorjs/source/test.js b/1-js/01-a/1-a1/3-errorjs/source/test.js new file mode 100644 index 0000000000..3202f2da1d --- /dev/null +++ b/1-js/01-a/1-a1/3-errorjs/source/test.js @@ -0,0 +1,6 @@ +describe("errorjs", function() { + + it("passes", function() { }); + it("fails", function() { throw new Error("FAIL") }); + +}); \ No newline at end of file diff --git a/1-js/01-a/1-a1/3-errorjs/task.md b/1-js/01-a/1-a1/3-errorjs/task.md new file mode 100644 index 0000000000..8f578d940b --- /dev/null +++ b/1-js/01-a/1-a1/3-errorjs/task.md @@ -0,0 +1,20 @@ +importance: 5 +type: js + +--- + +# Translate border-left-width to borderLeftWidth + +Write the function `camelize(str)` that changes dash-separated words like "my-short-string" into camel-cased "myShortString". + +That is: removes all dashes, each word after dash becomes uppercased. + +Examples: + +```js +camelize("background-color") == 'backgroundColor'; +camelize("list-style-image") == 'listStyleImage'; +camelize("-webkit-transition") == 'WebkitTransition'; +``` + +P.S. Hint: use `split` to split the string into an array, transform it and `join` back. diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/solution.md b/1-js/01-a/1-a1/4-syntaxerrorjs/solution.md similarity index 100% rename from 1-js/05-data-types/05-array-methods/12-reduce-object/solution.md rename to 1-js/01-a/1-a1/4-syntaxerrorjs/solution.md diff --git a/1-js/01-a/1-a1/4-syntaxerrorjs/solution/index.js b/1-js/01-a/1-a1/4-syntaxerrorjs/solution/index.js new file mode 100644 index 0000000000..490f570ada --- /dev/null +++ b/1-js/01-a/1-a1/4-syntaxerrorjs/solution/index.js @@ -0,0 +1,10 @@ +function camelize(str) { + return str + .split('-') // splits 'my-long-word' into array ['my', 'long', 'word'] + .map( + // capitalizes first letters of all array items except the first one + // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word'] + (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1) + ) + .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord' +} diff --git a/1-js/01-a/1-a1/4-syntaxerrorjs/source/index.js b/1-js/01-a/1-a1/4-syntaxerrorjs/source/index.js new file mode 100644 index 0000000000..f3a187a7cc --- /dev/null +++ b/1-js/01-a/1-a1/4-syntaxerrorjs/source/index.js @@ -0,0 +1,7 @@ +function f() { + throw new Error("ERR"); +} + +{{{ + +f(); \ No newline at end of file diff --git a/1-js/01-a/1-a1/4-syntaxerrorjs/source/test.js b/1-js/01-a/1-a1/4-syntaxerrorjs/source/test.js new file mode 100644 index 0000000000..3202f2da1d --- /dev/null +++ b/1-js/01-a/1-a1/4-syntaxerrorjs/source/test.js @@ -0,0 +1,6 @@ +describe("errorjs", function() { + + it("passes", function() { }); + it("fails", function() { throw new Error("FAIL") }); + +}); \ No newline at end of file diff --git a/1-js/01-a/1-a1/4-syntaxerrorjs/task.md b/1-js/01-a/1-a1/4-syntaxerrorjs/task.md new file mode 100644 index 0000000000..8f578d940b --- /dev/null +++ b/1-js/01-a/1-a1/4-syntaxerrorjs/task.md @@ -0,0 +1,20 @@ +importance: 5 +type: js + +--- + +# Translate border-left-width to borderLeftWidth + +Write the function `camelize(str)` that changes dash-separated words like "my-short-string" into camel-cased "myShortString". + +That is: removes all dashes, each word after dash becomes uppercased. + +Examples: + +```js +camelize("background-color") == 'backgroundColor'; +camelize("list-style-image") == 'listStyleImage'; +camelize("-webkit-transition") == 'WebkitTransition'; +``` + +P.S. Hint: use `split` to split the string into an array, transform it and `join` back. diff --git a/1-js/01-a/1-a1/article.md b/1-js/01-a/1-a1/article.md new file mode 100644 index 0000000000..d2923b8cbb --- /dev/null +++ b/1-js/01-a/1-a1/article.md @@ -0,0 +1,3 @@ +# An Introduction to JavaScript + +Let's see what's so special about JavaScript, what we can achieve with it, and which other technologies play well with it. diff --git a/1-js/01-getting-started/index.md b/1-js/01-a/index.md similarity index 100% rename from 1-js/01-getting-started/index.md rename to 1-js/01-a/index.md diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md deleted file mode 100644 index 30d08f05dc..0000000000 --- a/1-js/01-getting-started/1-intro/article.md +++ /dev/null @@ -1,120 +0,0 @@ -# An Introduction to JavaScript - -Let's see what's so special about JavaScript, what we can achieve with it, and which other technologies play well with it. - -## What is JavaScript? - -*JavaScript* was initially created to "make web pages alive". - -The programs in this language are called *scripts*. They can be written right in a web page's HTML and run automatically as the page loads. - -Scripts are provided and executed as plain text. They don't need special preparation or compilation to run. - -In this aspect, JavaScript is very different from another language called [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). - -```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. - -But as it evolved, JavaScript became a fully independent language with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all. -``` - -Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine). - -The browser has an embedded engine sometimes called a "JavaScript virtual machine". - -Different engines have different "codenames". For example: - -- [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 "Trident" and "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari, etc. - -The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome and Opera. - -```smart header="How do engines work?" - -Engines are complicated. But the basics are easy. - -1. The engine (embedded if it's a browser) reads ("parses") the script. -2. Then it converts ("compiles") the script to the machine language. -3. And then the machine code runs, pretty fast. - -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. -``` - -## What can in-browser JavaScript do? - -Modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or CPU, because it was initially created for browsers which do not require it. - -JavaScript's capabilities greatly depend on the environment it's running in. For instance, [Node.js](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc. - -In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver. - -For instance, in-browser JavaScript is able to: - -- Add new HTML to the page, change the existing content, modify styles. -- React to user actions, run on mouse clicks, pointer movements, key presses. -- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies). -- Get and set cookies, ask questions to the visitor, show messages. -- Remember the data on the client-side ("local storage"). - -## What CAN'T in-browser JavaScript do? - -JavaScript's abilities in the browser are limited for the sake of the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data. - -Examples of such restrictions include: - -- 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. - - Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `` tag. - - There are ways to interact with camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency). -- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other if they come from different sites (from a different domain, protocol or port). - - This is called the "Same Origin Policy". To work around that, *both pages* must agree for data exchange and contain a special JavaScript code that handles it. We'll cover that in the tutorial. - - This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com` and steal information from there. -- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. - -![](limitations.svg) - -Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugin/extensions which may ask for extended permissions. - -## What makes JavaScript unique? - -There are at least *three* great things about JavaScript: - -```compare -+ Full integration with HTML/CSS. -+ Simple things are done simply. -+ Support by all major browsers and enabled by default. -``` -JavaScript is the only browser technology that combines these three things. - -That's what makes JavaScript unique. That's why it's the most widespread tool for creating browser interfaces. - -That said, JavaScript also allows to create servers, mobile applications, etc. - -## Languages "over" JavaScript - -The syntax of JavaScript does not suit everyone's needs. Different people want different features. - -That's to be expected, because projects and requirements are different for everyone. - -So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser. - -Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it "under the hood". - -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. - -There are more. Of course, even if we use one of transpiled languages, we should also know JavaScript to really understand what we're doing. - -## Summary - -- JavaScript was initially created as a browser-only language, but 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 with 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. diff --git a/1-js/01-getting-started/1-intro/limitations.svg b/1-js/01-getting-started/1-intro/limitations.svg deleted file mode 100644 index a7863c63cc..0000000000 --- a/1-js/01-getting-started/1-intro/limitations.svg +++ /dev/null @@ -1 +0,0 @@ -https://javascript.info<script> ... </script>https://gmail.comhttps://javascript.info \ No newline at end of file diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md deleted file mode 100644 index 85a7737cb0..0000000000 --- a/1-js/01-getting-started/2-manuals-specifications/article.md +++ /dev/null @@ -1,42 +0,0 @@ - -# Manuals and specifications - -This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other sources. - -## 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 in developing for the browser, then there are other specs covered in the [second part](info:browser-environment) of the tutorial. - -## Manuals - -- **MDN (Mozilla) JavaScript Reference** is a manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc. - - One can find it at . - - 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. - - -- **MSDN** – Microsoft manual with a lot of information, including JavaScript (often referred to as JScript). If one needs something specific to Internet Explorer, better go there: . - - Also, we can use an internet search with phrases such as "RegExp MSDN" or "RegExp MSDN jscript". - -## Compatibility tables - -JavaScript is a developing language, new features get added regularly. - -To see their support among browser-based and other engines, see: - -- - per-feature tables of support, e.g. to see which engines support modern cryptography functions: . -- - a table with language features and engines that support those or don't support. - -All these resources are useful in real-life development, as they contain valuable information about language details, their support etc. - -Please remember them (or this page) for the cases when you need in-depth information about a particular feature. diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md deleted file mode 100644 index d03f03defb..0000000000 --- a/1-js/01-getting-started/3-code-editors/article.md +++ /dev/null @@ -1,46 +0,0 @@ -# Code editors - -A code editor is the place where programmers spend most of their time. - -There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type. - -## IDE - -The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment." - -An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff. - -If you haven't selected an IDE yet, consider the following options: - -- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). -- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, paid). - -For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/). - -Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you. - -## Lightweight editors - -"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple. - -They are mainly used to open and edit a file instantly. - -The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file. - -In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE. - -The following options deserve your attention: - -- [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. - -## Let's not argue - -The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with. - -There are other great editors in our big world. Please choose the one you like the most. - -The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences. diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md deleted file mode 100644 index 50926d4f76..0000000000 --- a/1-js/01-getting-started/4-devtools/article.md +++ /dev/null @@ -1,63 +0,0 @@ -# Developer console - -Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). - -But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. - -To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers. - -Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. - -Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. - -## Google Chrome - -Open the page [bug.html](bug.html). - -There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it. - -Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`. - -The developer tools will open on the Console tab by default. - -It looks somewhat like this: - -![chrome](chrome.png) - -The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar. - -- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command. -- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred. - -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. - -Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter . - -```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. -``` - -## Firefox, Edge, and others - -Most other browsers use `key:F12` to open developer tools. - -The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another. - -## Safari - -Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. - -Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom: - -![safari](safari.png) - -Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options. - -## Summary - -- Developer tools allow us to see errors, run commands, examine variables, and much more. -- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). - -Now we have the environment ready. In the next section, we'll get down to JavaScript. diff --git a/1-js/01-getting-started/4-devtools/bug.html b/1-js/01-getting-started/4-devtools/bug.html deleted file mode 100644 index edb02375ca..0000000000 --- a/1-js/01-getting-started/4-devtools/bug.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - There is an error in the script on this page. - - - - - \ No newline at end of file diff --git a/1-js/01-getting-started/4-devtools/chrome.png b/1-js/01-getting-started/4-devtools/chrome.png deleted file mode 100644 index 4cb3ea2f46..0000000000 Binary files a/1-js/01-getting-started/4-devtools/chrome.png and /dev/null differ diff --git a/1-js/01-getting-started/4-devtools/chrome@2x.png b/1-js/01-getting-started/4-devtools/chrome@2x.png deleted file mode 100644 index b87404a8f4..0000000000 Binary files a/1-js/01-getting-started/4-devtools/chrome@2x.png and /dev/null differ diff --git a/1-js/01-getting-started/4-devtools/safari.png b/1-js/01-getting-started/4-devtools/safari.png deleted file mode 100644 index 64c7a3f6ca..0000000000 Binary files a/1-js/01-getting-started/4-devtools/safari.png and /dev/null differ diff --git a/1-js/01-getting-started/4-devtools/safari@2x.png b/1-js/01-getting-started/4-devtools/safari@2x.png deleted file mode 100644 index 27def4d09b..0000000000 Binary files a/1-js/01-getting-started/4-devtools/safari@2x.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md b/1-js/02-b/1-b1/2-hoverintent/solution.md similarity index 100% rename from 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md rename to 1-js/02-b/1-b1/2-hoverintent/solution.md diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/1-js/02-b/1-b1/2-hoverintent/solution/hoverIntent.js similarity index 98% rename from 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js rename to 1-js/02-b/1-b1/2-hoverintent/solution/hoverIntent.js index 4e6e2a3e95..c9b307aae2 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js +++ b/1-js/02-b/1-b1/2-hoverintent/solution/hoverIntent.js @@ -1,6 +1,4 @@ -'use strict'; - -class HoverIntent { +export default class HoverIntent { constructor({ sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element" diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js b/1-js/02-b/1-b1/2-hoverintent/source/hoverIntent.js similarity index 94% rename from 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js rename to 1-js/02-b/1-b1/2-hoverintent/source/hoverIntent.js index a38b42bc24..9fd479a4e0 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js +++ b/1-js/02-b/1-b1/2-hoverintent/source/hoverIntent.js @@ -1,8 +1,6 @@ -'use strict'; - // Here's a brief sketch of the class // with things that you'll need anyway -class HoverIntent { +export default class HoverIntent { constructor({ sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element" @@ -27,10 +25,10 @@ class HoverIntent { elem.addEventListener("mouseout", this.onMouseOut); // continue from this point - } onMouseOver(event) { + console.log("OVER", event); /* ... */ } diff --git a/1-js/02-b/1-b1/2-hoverintent/source/index.html b/1-js/02-b/1-b1/2-hoverintent/source/index.html new file mode 100644 index 0000000000..3ad401bb12 --- /dev/null +++ b/1-js/02-b/1-b1/2-hoverintent/source/index.html @@ -0,0 +1,25 @@ + + +
+ 12 : + 30 : + 00 +
+ + + + diff --git a/1-js/02-b/1-b1/2-hoverintent/source/index.spec.html b/1-js/02-b/1-b1/2-hoverintent/source/index.spec.html new file mode 100755 index 0000000000..7c0d32365c --- /dev/null +++ b/1-js/02-b/1-b1/2-hoverintent/source/index.spec.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + +
+ 12 : + 30 : + 00 +
+ + + + diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css b/1-js/02-b/1-b1/2-hoverintent/source/style.css similarity index 100% rename from 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/style.css rename to 1-js/02-b/1-b1/2-hoverintent/source/style.css diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js b/1-js/02-b/1-b1/2-hoverintent/source/test.js similarity index 79% rename from 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js rename to 1-js/02-b/1-b1/2-hoverintent/source/test.js index f5d4aaffb3..aad3bca086 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js +++ b/1-js/02-b/1-b1/2-hoverintent/source/test.js @@ -1,7 +1,6 @@ -'use strict'; +import HoverIntent from './hoverIntent.js'; describe("hoverIntent", function() { - function mouse(eventType, x, y, options) { let eventOptions = Object.assign({ bubbles: true, @@ -18,14 +17,15 @@ describe("hoverIntent", function() { let isOver; let hoverIntent; + let clock; - before(function() { - this.clock = sinon.useFakeTimers(); + beforeAll(function() { + clock = jasmine.clock().install(); }); - after(function() { - this.clock.restore(); + afterAll(function() { + clock.uninstall(); }); @@ -51,13 +51,13 @@ describe("hoverIntent", function() { it("mouseover -> when the pointer just arrived, no tooltip", function() { mouse('mouseover', 10, 10); - assert.isFalse(isOver); + expect(isOver).toBeFalse(); }); it("mouseover -> after a delay, the tooltip shows up", function() { mouse('mouseover', 10, 10); - this.clock.tick(100); - assert.isTrue(isOver); + clock.tick(100); + expect(isOver).toBeTrue(); }); it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() { @@ -66,8 +66,8 @@ describe("hoverIntent", function() { () => mouse('mouseout', 300, 300, { relatedTarget: document.body}), 30 ); - this.clock.tick(100); - assert.isFalse(isOver); + clock.tick(100); + expect(isOver).toBeFalse(); }); @@ -79,8 +79,8 @@ describe("hoverIntent", function() { i ); } - this.clock.tick(200); - assert.isTrue(isOver); + clock.tick(200); + expect(isOver).toBeTrue(); }); it("mouseover -> fast move -> no tooltip", function() { @@ -91,8 +91,8 @@ describe("hoverIntent", function() { i ); } - this.clock.tick(200); - assert.isFalse(isOver); + clock.tick(200); + expect(isOver).toBeTrue(); }); }); diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/1-js/02-b/1-b1/2-hoverintent/task.md similarity index 99% rename from 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md rename to 1-js/02-b/1-b1/2-hoverintent/task.md index 72e615bdd6..9c80423b8e 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md +++ b/1-js/02-b/1-b1/2-hoverintent/task.md @@ -1,4 +1,5 @@ importance: 5 +type: html --- diff --git a/1-js/02-b/1-b1/article.md b/1-js/02-b/1-b1/article.md new file mode 100644 index 0000000000..d2923b8cbb --- /dev/null +++ b/1-js/02-b/1-b1/article.md @@ -0,0 +1,3 @@ +# An Introduction to JavaScript + +Let's see what's so special about JavaScript, what we can achieve with it, and which other technologies play well with it. diff --git a/1-js/02-b/index.md b/1-js/02-b/index.md new file mode 100644 index 0000000000..b327c78603 --- /dev/null +++ b/1-js/02-b/index.md @@ -0,0 +1,3 @@ +# An introduction + +About the JavaScript language and the environment to develop with it. 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 deleted file mode 100644 index ff1d871b08..0000000000 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - 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 deleted file mode 100644 index 81552913b9..0000000000 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md +++ /dev/null @@ -1,2 +0,0 @@ - -[html src="http://github.com/index.html"] diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html deleted file mode 100644 index 45e6744b3a..0000000000 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md deleted file mode 100644 index afed6a91d3..0000000000 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# Show an alert - -Create a page that shows a message "I'm JavaScript!". - -Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works. - -[demo src="http://github.com/solution"] - diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js deleted file mode 100644 index 4de725971d..0000000000 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js +++ /dev/null @@ -1 +0,0 @@ -alert("I'm JavaScript!"); \ No newline at end of file diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html deleted file mode 100644 index 10895f8fe2..0000000000 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md deleted file mode 100644 index f42c41e6db..0000000000 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md +++ /dev/null @@ -1,8 +0,0 @@ -The HTML code: - -[html src="http://github.com/index.html"] - -For the file `alert.js` in the same folder: - -[js src="http://github.com/alert.js"] - diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md deleted file mode 100644 index 26168d6a76..0000000000 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Show an alert with an external script - -Take the solution of the previous task . Modify it by extracting the script content into an external file `alert.js`, residing in the same folder. - -Open the page, ensure that the alert works. diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md deleted file mode 100644 index b3149f1121..0000000000 --- a/1-js/02-first-steps/01-hello-world/article.md +++ /dev/null @@ -1,132 +0,0 @@ -# Hello, world! - -This part of the tutorial is about core JavaScript, the language itself. - -But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial. - -So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. - - -## The "script" tag - -JavaScript programs can be inserted into any part of an HTML document with the help of the ` -*/!* - -

...After the script.

- - - - -``` - -```online -You can run the example by clicking the "Play" button in the right-top corner of the box above. -``` - -The ` - ``` - - This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the ` -``` - -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="http://github.com/script.js"` would mean a file `"script.js"` in the current folder. - -We can give a full URL as well. For instance: - -```html - -``` - -To attach several scripts, use multiple tags: - -```html - - -… -``` - -```smart -As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. - -The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). - -Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. - -That reduces traffic and makes pages faster. -``` - -````warn header="If `src` is set, the script content is ignored." -A single ` -``` - -We must choose either an external ` - -``` -```` - -## Summary - -- We can use a ``. - - -There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md deleted file mode 100644 index cf1dd53d2c..0000000000 --- a/1-js/02-first-steps/02-structure/article.md +++ /dev/null @@ -1,159 +0,0 @@ -# Code structure - -The first thing we'll study is the building blocks of code. - -## Statements - -Statements are syntax constructs and commands that perform actions. - -We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!". - -We can have as many statements in our code as we want. Statements can be separated with a semicolon. - -For example, here we split "Hello World" into two alerts: - -```js run no-beautify -alert('Hello'); alert('World'); -``` - -Usually, statements are written on separate lines to make the code more readable: - -```js run no-beautify -alert('Hello'); -alert('World'); -``` - -## Semicolons [#semicolon] - -A semicolon may be omitted in most cases when a line break exists. - -This would also work: - -```js run no-beautify -alert('Hello') -alert('World') -``` - -Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). - -**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!** - -There are cases when a newline does not mean a semicolon. For example: - -```js run no-beautify -alert(3 + -1 -+ 2); -``` - -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 the semicolon is not required. And in this case that works as intended. - -**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.** - -Errors which occur in such cases are quite hard to find and fix. - -````smart header="An example of an error" -If you're curious to see a concrete example of such an error, check this code out: - -```js run -[1, 2].forEach(alert) -``` - -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 the code: it shows `1` then `2`. - -Now, let's add an `alert` before the code and *not* finish it with a semicolon: - -```js run no-beautify -alert("There will be an error") - -[1, 2].forEach(alert) -``` - -Now if we run the code, only the first `alert` is shown and then we have an error! - -But everything is fine again if we add a semicolon after `alert`: -```js run -alert("All fine now"); - -[1, 2].forEach(alert) -``` - -Now we have the "All fine now" message followed by `1` and `2`. - - -The error in the no-semicolon variant occurs because JavaScript does not assume a semicolon before square brackets `[...]`. - -So, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement. Here's how the engine sees it: - -```js run no-beautify -alert("There will be an error")[1, 2].forEach(alert) -``` - -But it should be two separate statements, not one. Such a merging in this case is just wrong, hence the error. This can happen in other situations. -```` - -We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them. - -## Comments [#code-comments] - -As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why. - -Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. - -**One-line comments start with two forward slash characters `//`.** - -The rest of the line is a comment. It may occupy a full line of its own or follow a statement. - -Like here: -```js run -// This comment occupies a line of its own -alert('Hello'); - -alert('World'); // This comment follows the statement -``` - -**Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.** - -Like this: - -```js run -/* An example with two messages. -This is a multiline comment. -*/ -alert('Hello'); -alert('World'); -``` - -The content of comments is ignored, so if we put code inside /* ... */, it won't execute. - -Sometimes it can be handy to temporarily disable a part of code: - -```js run -/* Commenting out the code -alert('Hello'); -*/ -alert('World'); -``` - -```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`. -``` - -````warn header="Nested comments are not supported!" -There may not be `/*...*/` inside another `/*...*/`. - -Such code will die with an error: - -```js run no-beautify -/* - /* nested comment ?!? */ -*/ -alert( 'World' ); -``` -```` - -Please, don't hesitate to comment your code. - -Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all. - -Later in the tutorial there will be a chapter that also explains how to write better comments. diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md deleted file mode 100644 index 9586733cc8..0000000000 --- a/1-js/02-first-steps/03-strict-mode/article.md +++ /dev/null @@ -1,89 +0,0 @@ -# The modern mode, "use strict" - -For a long time, JavaScript evolved without compatibility issues. New features were added to the language while old functionality didn't change. - -That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever. - -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"`. - -## "use strict" - -The directive looks like a string: `"use strict"` or `'use strict'`. When it is located at the top of a script, the whole script works the "modern" way. - -For example: - -```js -"use strict"; - -// this code works the modern way -... -``` - -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. - -````warn header="Ensure that \"use strict\" is at the top" -Please make sure that `"use strict"` is at the top of your scripts, otherwise strict mode may not be enabled. - -Strict mode isn't enabled here: - -```js no-strict -alert("some code"); -// "use strict" below is ignored--it must be at the top - -"use strict"; - -// strict mode is not activated -``` - -Only comments may appear above `"use strict"`. -```` - -```warn header="There's no way to cancel `use strict`" -There is no directive like `"no use strict"` that reverts the engine to old behavior. - -Once we enter strict mode, there's no going back. -``` - -## Browser console - -When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default. - -Sometimes, when `use strict` makes a difference, you'll get incorrect results. - -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: - -```js -'use strict'; -// ...your code - -``` - -It works in most browsers, namely Firefox and Chrome. - -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: - -```js -(function() { - 'use strict'; - - // ...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. diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md deleted file mode 100644 index 9249e1c84e..0000000000 --- a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md +++ /dev/null @@ -1,12 +0,0 @@ -In the code below, each line corresponds to the item in the task list. - -```js run -let admin, name; // can declare two variables at once - -name = "John"; - -admin = name; - -alert( admin ); // "John" -``` - diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/task.md b/1-js/02-first-steps/04-variables/1-hello-variables/task.md deleted file mode 100644 index 84f009e8c7..0000000000 --- a/1-js/02-first-steps/04-variables/1-hello-variables/task.md +++ /dev/null @@ -1,10 +0,0 @@ -importance: 2 - ---- - -# Working with variables - -1. Declare two variables: `admin` and `name`. -2. Assign the value `"John"` to `name`. -3. Copy the value from `name` to `admin`. -4. Show the value of `admin` using `alert` (must output "John"). 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 deleted file mode 100644 index d56e54d28b..0000000000 --- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md +++ /dev/null @@ -1,21 +0,0 @@ -## The variable for our planet - -That's simple: - -```js -let ourPlanetName = "Earth"; -``` - -Note, we could use a shorter name `planet`, but it might be not 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 - -```js -let currentUserName = "John"; -``` - -Again, we could shorten that to `userName` if we know for sure that the user is current. - -Modern editors and autocomplete make long variable names easy to write. Don't save on them. A name with 3 words in it is fine. - -And if your editor does not have proper autocompletion, get [a new one](/code-editors). diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/task.md b/1-js/02-first-steps/04-variables/2-declare-variables/task.md deleted file mode 100644 index f364badf4c..0000000000 --- a/1-js/02-first-steps/04-variables/2-declare-variables/task.md +++ /dev/null @@ -1,8 +0,0 @@ -importance: 3 - ---- - -# Giving the right name - -1. Create a variable with the name of our planet. How would you name such a variable? -2. Create a variable to store the name of a current visitor to a website. How would you name that variable? 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 deleted file mode 100644 index acd643fded..0000000000 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md +++ /dev/null @@ -1,5 +0,0 @@ -We generally use upper case for constants that are "hard-coded". Or, in other words, when the value is known prior to execution and directly written into the code. - -In this code, `birthday` is exactly like that. So we could use the upper case for it. - -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. diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md deleted file mode 100644 index 5fd18f90a8..0000000000 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 4 - ---- - -# Uppercase const? - -Examine the following code: - -```js -const birthday = '18.04.1982'; - -const age = someCode(birthday); -``` - -Here we have a constant `birthday` date and the `age` is calculated from `birthday` with the help of some code (it is not provided for shortness, and because details don't matter here). - -Would it be right to use upper case for `birthday`? For `age`? Or even for both? - -```js -const BIRTHDAY = '18.04.1982'; // make uppercase? - -const AGE = someCode(BIRTHDAY); // make uppercase? -``` - diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md deleted file mode 100644 index 03eeaa6d09..0000000000 --- a/1-js/02-first-steps/04-variables/article.md +++ /dev/null @@ -1,343 +0,0 @@ -# Variables - -Most of the time, a JavaScript application needs to work with information. Here are two examples: -1. An online shop -- the information might include goods being sold and a shopping cart. -2. A chat application -- the information might include users, messages, and much more. - -Variables are used to store this information. - -## A variable - -A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors, and other data. - -To create a variable in JavaScript, use the `let` keyword. - -The statement below creates (in other words: *declares*) a variable with the name "message": - -```js -let message; -``` - -Now, we can put some data into it by using the assignment operator `=`: - -```js -let message; - -*!* -message = 'Hello'; // store the string -*/!* -``` - -The string is now saved into the memory area associated with the variable. We can access it using the variable name: - -```js run -let message; -message = 'Hello!'; - -*!* -alert(message); // shows the variable content -*/!* -``` - -To be concise, we can combine the variable declaration and assignment into a single line: - -```js run -let message = 'Hello!'; // define the variable and assign the value - -alert(message); // Hello! -``` - -We can also declare multiple variables in one line: - -```js no-beautify -let user = 'John', age = 25, message = 'Hello'; -``` - -That might seem shorter, but we don't recommend it. For the sake of better readability, please use a single line per variable. - -The multiline variant is a bit longer, but easier to read: - -```js -let user = 'John'; -let age = 25; -let message = 'Hello'; -``` - -Some people also define multiple variables in this multiline style: -```js no-beautify -let user = 'John', - age = 25, - message = 'Hello'; -``` - -...Or even in the "comma-first" style: - -```js no-beautify -let user = 'John' - , age = 25 - , message = 'Hello'; -``` - -Technically, all these variants do the same thing. So, it's a matter of personal taste and aesthetics. - -````smart header="`var` instead of `let`" -In older scripts, you may also find another keyword: `var` instead of `let`: - -```js -*!*var*/!* message = 'Hello'; -``` - -The `var` keyword is *almost* the same as `let`. It also declares a variable, but in a slightly different, "old-school" way. - -There are subtle differences between `let` and `var`, but they do not matter for us yet. We'll cover them in detail in the chapter . -```` - -## A real-life analogy - -We can easily grasp the concept of a "variable" if we imagine it as a "box" for data, with a uniquely-named sticker on it. - -For instance, the variable `message` can be imagined as a box labeled `"message"` with the value `"Hello!"` in it: - -![](variable.svg) - -We can put any value in the box. - -We can also change it as many times as we want: -```js run -let message; - -message = 'Hello!'; - -message = 'World!'; // value changed - -alert(message); -``` - -When the value is changed, the old data is removed from the variable: - -![](variable-change.svg) - -We can also declare two variables and copy data from one into the other. - -```js run -let hello = 'Hello world!'; - -let message; - -*!* -// copy 'Hello world' from hello into message -message = hello; -*/!* - -// now two variables hold the same data -alert(hello); // Hello world! -alert(message); // Hello world! -``` - -````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. - -In such languages, once the value is stored "in the box", it's there forever. If we need to store something else, the language forces us to create a new box (declare a new variable). We can't reuse the old one. - -Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits. Studying such a language (even if you're not planning to use it soon) is recommended to broaden the mind. -``` - -## Variable naming [#variable-naming] - -There are two limitations on variable names in JavaScript: - -1. The name must contain only letters, digits, or the symbols `$` and `_`. -2. The first character must not be a digit. - -Examples of valid names: - -```js -let userName; -let test123; -``` - -When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, each word except first starting with a capital letter: `myVeryLongName`. - -What's interesting -- the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning. - -These names are valid: - -```js run untrusted -let $ = 1; // declared a variable with the name "$" -let _ = 2; // and now a variable with the name "_" - -alert($ + _); // 3 -``` - -Examples of incorrect variable names: - -```js no-beautify -let 1a; // cannot start with a digit - -let my-name; // hyphens '-' aren't allowed in the name -``` - -```smart header="Case matters" -Variables named `apple` and `AppLE` are two different variables. -``` - -````smart header="Non-Latin letters are allowed, but not recommended" -It is possible to use any language, including cyrillic letters or even hieroglyphs, like this: - -```js -let имя = '...'; -let 我 = '...'; -``` - -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. -```` - -````warn header="Reserved names" -There is a [list of reserved words](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), which cannot be used as variable names because they are used by the language itself. - -For example: `let`, `class`, `return`, and `function` are reserved. - -The code below gives a syntax error: - -```js run no-beautify -let let = 5; // can't name a variable "let", error! -let return = 5; // also can't name it "return", error! -``` -```` - -````warn header="An assignment without `use strict`" - -Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`. This still works now if we don't put `use strict` in our scripts to maintain compatibility with old scripts. - -```js run no-strict -// note: no "use strict" in this example - -num = 5; // the variable "num" is created if it didn't exist - -alert(num); // 5 -``` - -This is a bad practice and would cause an error in strict mode: - -```js -"use strict"; - -*!* -num = 5; // error: num is not defined -*/!* -``` -```` - -## Constants - -To declare a constant (unchanging) variable, use `const` instead of `let`: - -```js -const myBirthday = '18.04.1982'; -``` - -Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error: - -```js run -const myBirthday = '18.04.1982'; - -myBirthday = '01.01.2001'; // error, can't reassign the constant! -``` - -When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and clearly communicate that fact to everyone. - - -### Uppercase constants - -There is a widespread practice to use constants as aliases for difficult-to-remember values that are known prior to execution. - -Such constants are named using capital letters and underscores. - -For instance, let's make constants for colors in so-called "web" (hexadecimal) format: - -```js run -const COLOR_RED = "#F00"; -const COLOR_GREEN = "#0F0"; -const COLOR_BLUE = "#00F"; -const COLOR_ORANGE = "#FF7F00"; - -// ...when we need to pick a color -let color = COLOR_ORANGE; -alert(color); // #FF7F00 -``` - -Benefits: - -- `COLOR_ORANGE` is much easier to remember than `"#FF7F00"`. -- It is much easier to mistype `"#FF7F00"` than `COLOR_ORANGE`. -- When reading the code, `COLOR_ORANGE` is much more meaningful than `#FF7F00`. - -When should we use capitals for a constant and when should we name it normally? Let's make that clear. - -Being a "constant" just means that a variable's value never changes. But there are constants that are known prior to execution (like a hexadecimal value for red) and there are constants that are *calculated* in run-time, during the execution, but do not change after their initial assignment. - -For instance: -```js -const pageLoadTime = /* time taken by a webpage to load */; -``` - -The value of `pageLoadTime` is not known prior to the page load, so it's named normally. But it's still a constant because it doesn't change after assignment. - -In other words, capital-named constants are only used as aliases for "hard-coded" values. - -## Name things right - -Talking about variables, there's one more extremely important thing. - -A variable name should have a clean, obvious meaning, describing the data that it stores. - -Variable naming is one of the most important and complex skills in programming. A quick glance at variable names can reveal which code was written by a beginner versus an experienced developer. - -In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely separate from scratch. When we return to some code after doing something else for a while, it's much easier to find information that is well-labeled. Or, in other words, when the variables have good names. - -Please spend time thinking about the right name for a variable before declaring it. Doing so will repay you handsomely. - -Some good-to-follow rules are: - -- Use human-readable names like `userName` or `shoppingCart`. -- Stay away from abbreviations or short names like `a`, `b`, `c`, unless you really know what you're doing. -- Make names maximally descriptive and concise. Examples of bad names are `data` and `value`. Such names say nothing. It's only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing. -- Agree on terms within your team and in your own mind. If a site visitor is called a "user" then we should name related variables `currentUser` or `newUser` instead of `currentVisitor` or `newManInTown`. - -Sounds simple? Indeed it is, but creating descriptive and concise variable names in practice is not. Go for it. - -```smart header="Reuse or create?" -And the last note. There are some lazy programmers who, instead of declaring new variables, tend to reuse existing ones. - -As a result, their variables are like boxes into which people throw different things without changing their stickers. What's inside the box now? Who knows? We need to come closer and check. - -Such programmers save a little bit on variable declaration but lose ten times more on debugging. - -An extra variable is good, not evil. - -Modern JavaScript minifiers and browsers optimize code well enough, so it won't create performance issues. Using different variables for different values can even help the engine optimize your code. -``` - -## Summary - -We can declare variables to store data by using the `var`, `let`, or `const` keywords. - -- `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. - -Variables should be named in a way that allows us to easily understand what's inside them. diff --git a/1-js/02-first-steps/04-variables/variable-change.svg b/1-js/02-first-steps/04-variables/variable-change.svg deleted file mode 100644 index 427a6388c6..0000000000 --- a/1-js/02-first-steps/04-variables/variable-change.svg +++ /dev/null @@ -1 +0,0 @@ -"World!""Hello!"message \ No newline at end of file diff --git a/1-js/02-first-steps/04-variables/variable.svg b/1-js/02-first-steps/04-variables/variable.svg deleted file mode 100644 index 5d15c9e4e4..0000000000 --- a/1-js/02-first-steps/04-variables/variable.svg +++ /dev/null @@ -1 +0,0 @@ -"Hello!"message \ No newline at end of file diff --git a/1-js/02-first-steps/05-types/1-string-quotes/solution.md b/1-js/02-first-steps/05-types/1-string-quotes/solution.md deleted file mode 100644 index 68a13c15b2..0000000000 --- a/1-js/02-first-steps/05-types/1-string-quotes/solution.md +++ /dev/null @@ -1,15 +0,0 @@ - -Backticks embed the expression inside `${...}` into the string. - -```js run -let name = "Ilya"; - -// the expression is a number 1 -alert( `hello ${1}` ); // hello 1 - -// the expression is a string "name" -alert( `hello ${"name"}` ); // hello name - -// the expression is a variable, embed it -alert( `hello ${name}` ); // hello Ilya -``` diff --git a/1-js/02-first-steps/05-types/1-string-quotes/task.md b/1-js/02-first-steps/05-types/1-string-quotes/task.md deleted file mode 100644 index 14ea6b4d66..0000000000 --- a/1-js/02-first-steps/05-types/1-string-quotes/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 5 - ---- - -# String quotes - -What is the output of the script? - -```js -let name = "Ilya"; - -alert( `hello ${1}` ); // ? - -alert( `hello ${"name"}` ); // ? - -alert( `hello ${name}` ); // ? -``` \ No newline at end of file diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md deleted file mode 100644 index ab8094f1d3..0000000000 --- a/1-js/02-first-steps/05-types/article.md +++ /dev/null @@ -1,273 +0,0 @@ -# Data types - -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: - -```js -// no error -let message = "hello"; -message = 123456; -``` - -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 - -```js -let n = 123; -n = 12.345; -``` - -The *number* type represents both integer and floating point numbers. - -There are many operations for numbers, e.g. multiplication `*`, division `/`, addition `+`, subtraction `-`, and so on. - -Besides regular numbers, there are so-called "special numeric values" which also belong to this data type: `Infinity`, `-Infinity` and `NaN`. - -- `Infinity` represents the mathematical [Infinity](https://en.wikipedia.org/wiki/Infinity) ∞. It is a special value that's greater than any number. - - We can get it as a result of division by zero: - - ```js run - alert( 1 / 0 ); // Infinity - ``` - - Or just reference it directly: - - ```js run - alert( Infinity ); // Infinity - ``` -- `NaN` represents a computational error. It is a result of an incorrect or an undefined mathematical operation, for instance: - - ```js run - alert( "not a number" / 2 ); // NaN, such division is erroneous - ``` - - `NaN` is sticky. Any further operation on `NaN` returns `NaN`: - - ```js run - alert( "not a number" / 2 + 5 ); // NaN - ``` - - So, if there's a `NaN` somewhere in a mathematical expression, it propagates to the whole result. - -```smart header="Mathematical operations are safe" -Doing maths is "safe" in JavaScript. We can do anything: divide by zero, treat non-numeric strings as numbers, etc. - -The script will never stop with a fatal error ("die"). At worst, we'll get `NaN` as the result. -``` - -Special numeric values formally belong to the "number" type. Of course they are not numbers in the common sense of this word. - -We'll see more about working with numbers in the chapter . - -## BigInt - -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="Compatability issues" -Right now `BigInt` is supported in Firefox/Chrome/Edge, but not in Safari/IE. -``` - -## String - -A string in JavaScript must be surrounded by quotes. - -```js -let str = "Hello"; -let str2 = 'Single quotes are ok too'; -let phrase = `can embed another ${str}`; -``` - -In JavaScript, there are 3 types of quotes. - -1. Double quotes: `"Hello"`. -2. Single quotes: `'Hello'`. -3. Backticks: `Hello`. - -Double and single quotes are "simple" quotes. There's practically no difference between them in JavaScript. - -Backticks are "extended functionality" quotes. They allow us to embed variables and expressions into a string by wrapping them in `${…}`, for example: - -```js run -let name = "John"; - -// embed a variable -alert( `Hello, *!*${name}*/!*!` ); // Hello, John! - -// embed an expression -alert( `the result is *!*${1 + 2}*/!*` ); // the result is 3 -``` - -The expression inside `${…}` is evaluated and the result becomes a part of the string. We can put anything in there: a variable like `name` or an arithmetical expression like `1 + 2` or something more complex. - -Please note that this can only be done in backticks. Other quotes don't have this embedding functionality! -```js run -alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing) -``` - -We'll cover strings more thoroughly in the chapter . - -```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 only one character or many of them. -``` - -## Boolean (logical type) - -The boolean type has only two values: `true` and `false`. - -This type is commonly used to store yes/no values: `true` means "yes, correct", and `false` means "no, incorrect". - -For instance: - -```js -let nameFieldChecked = true; // yes, name field is checked -let ageFieldChecked = false; // no, age field is not checked -``` - -Boolean values also come as a result of comparisons: - -```js run -let isGreater = 4 > 1; - -alert( isGreater ); // true (the comparison result is "yes") -``` - -We'll cover booleans more deeply in the chapter . - -## The "null" value - -The special `null` value does not belong to any of the types described above. - -It forms a separate type of its own which contains only the `null` value: - -```js -let age = null; -``` - -In JavaScript, `null` is not a "reference to a non-existing object" or a "null pointer" like in some other languages. - -It's just a special value which represents "nothing", "empty" or "value unknown". - -The code above states that `age` is unknown. - -## The "undefined" value - -The special value `undefined` also stands apart. It makes a type of its own, just like `null`. - -The meaning of `undefined` is "value is not assigned". - -If a variable is declared, but not assigned, then its value is `undefined`: - -```js run -let age; - -alert(age); // shows "undefined" -``` - -Technically, it is possible to explicitly assign `undefined` to a variable: - -```js run -let age = 100; - -// change the value to undefined -age = undefined; - -alert(age); // "undefined" -``` - -...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 - -The `object` type is special. - -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. - -## The typeof operator [#type-typeof] - -The `typeof` operator returns the type of the argument. It's useful when we want to process values of different types differently or just want to do a quick check. - -It supports two forms of syntax: - -1. As an operator: `typeof x`. -2. As a function: `typeof(x)`. - -In other words, it works with parentheses or without them. The result is the same. - -The call to `typeof x` returns a string with the type name: - -```js -typeof undefined // "undefined" - -typeof 0 // "number" - -typeof 10n // "bigint" - -typeof true // "boolean" - -typeof "foo" // "string" - -typeof Symbol("id") // "symbol" - -*!* -typeof Math // "object" (1) -*/!* - -*!* -typeof null // "object" (2) -*/!* - -*!* -typeof alert // "function" (3) -*/!* -``` - -The last three lines may need additional explanation: - -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. - -## Summary - -There are 8 basic data types in JavaScript. - -- `number` for numbers of any kind: integer or floating-point, integers are limited by ±253. -- `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. - -The `typeof` operator allows us to see which type is stored in a variable. - -- Two forms: `typeof x` or `typeof(x)`. -- Returns a string with the name of the type, like `"string"`. -- For `null` returns `"object"` -- this is an error in the language, it's not actually an object. - -In the next chapters, we'll concentrate on primitive values and once we're familiar with them, we'll move on to objects. diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md deleted file mode 100644 index 903ee7ff35..0000000000 --- a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md +++ /dev/null @@ -1,24 +0,0 @@ -JavaScript-code: - -```js demo run -let name = prompt("What is your name?", ""); -alert(name); -``` - -The full page: - -```html - - - - - - - - -``` diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md deleted file mode 100644 index a65a654e05..0000000000 --- a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 4 - ---- - -# A simple page - -Create a web-page that asks for a name and outputs it. - -[demo] diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md deleted file mode 100644 index 73b183e525..0000000000 --- a/1-js/02-first-steps/06-alert-prompt-confirm/article.md +++ /dev/null @@ -1,105 +0,0 @@ -# Interaction: alert, prompt, confirm - -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". - -For example: - -```js run -alert("Hello"); -``` - -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". - -## prompt - -The function `prompt` accepts two arguments: - -```js no-beautify -result = prompt(title, [default]); -``` - -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. - -`default` -: An optional second parameter, the initial value for the input field. - -```smart header="The square brackets in syntax `[...]`" -The square brackets around `default` in the syntax above denote that the parameter as 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`. - -The call to `prompt` returns the text from the input field or `null` if the input was canceled. - -For instance: - -```js run -let age = prompt('How old are you?', 100); - -alert(`You are ${age} years old!`); // You are 100 years old! -``` - -````warn header="In IE: always supply a `default`" -The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt. - -Run this code in Internet Explorer to see: - -```js run -let test = prompt("Test"); -``` - -So, for prompts to look good in IE, we recommend always providing the second argument: - -```js run -let test = prompt("Test", ''); // <-- for IE -``` -```` - -## confirm - -The syntax: - -```js -result = confirm(question); -``` - -The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel. - -The result is `true` if OK is pressed and `false` otherwise. - -For example: - -```js run -let isBoss = confirm("Are you the boss?"); - -alert( isBoss ); // true if OK is pressed -``` - -## Summary - -We covered 3 browser-specific functions to interact with visitors: - -`alert` -: shows a message. - -`prompt` -: 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`. - -All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed. - -There are two limitations shared by all the methods above: - -1. The exact location of the modal window is determined by the browser. Usually, it's in the center. -2. The exact look of the window also depends on the browser. We can't modify it. - -That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine. diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md deleted file mode 100644 index cf97b3307a..0000000000 --- a/1-js/02-first-steps/07-type-conversions/article.md +++ /dev/null @@ -1,150 +0,0 @@ -# Type Conversions - -Most of the time, operators and functions automatically convert the values given to them to the right type. - -For example, `alert` automatically converts any value to a string to show it. Mathematical operations convert values to numbers. - -There are also cases when we need to explicitly convert a value to the expected type. - -```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. -``` - -## String Conversion - -String conversion happens when we need the string form of a value. - -For example, `alert(value)` does it to show the value. - -We can also call the `String(value)` function to convert a value to a string: - -```js run -let value = true; -alert(typeof value); // boolean - -*!* -value = String(value); // now value is a string "true" -alert(typeof value); // string -*/!* -``` - -String conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes `"null"`, etc. - -## Numeric Conversion - -Numeric conversion happens in mathematical functions and expressions automatically. - -For example, when division `/` is applied to non-numbers: - -```js run -alert( "6" / "2" ); // 3, strings are converted to numbers -``` - -We can use the `Number(value)` function to explicitly convert a `value` to a number: - -```js run -let str = "123"; -alert(typeof str); // string - -let num = Number(str); // becomes a number 123 - -alert(typeof num); // number -``` - -Explicit conversion is usually required when we read a value from a string-based source like a text form but expect a number to be entered. - -If the string is not a valid number, the result of such a conversion is `NaN`. For instance: - -```js run -let age = Number("an arbitrary string instead of a number"); - -alert(age); // NaN, conversion failed -``` - -Numeric conversion rules: - -| Value | Becomes... | -|-------|-------------| -|`undefined`|`NaN`| -|`null`|`0`| -|true and false | `1` and `0` | -| `string` | Whitespaces from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. | - -Examples: - -```js run -alert( Number(" 123 ") ); // 123 -alert( Number("123z") ); // NaN (error reading a number at "z") -alert( Number(true) ); // 1 -alert( Number(false) ); // 0 -``` - -Please note that `null` and `undefined` behave differently here: `null` becomes zero while `undefined` becomes `NaN`. - -Most mathematical operators also perform such conversion, we'll see that in the next chapter. - -## Boolean Conversion - -Boolean conversion is the simplest one. - -It happens in logical operations (later we'll meet condition tests and other similar things) but can also be performed explicitly with a call to `Boolean(value)`. - -The conversion rule: - -- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`. -- Other values become `true`. - -For instance: - -```js run -alert( Boolean(1) ); // true -alert( Boolean(0) ); // false - -alert( Boolean("hello") ); // true -alert( Boolean("") ); // false -``` - -````warn header="Please note: the string with zero `\"0\"` is `true`" -Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript, a non-empty string is always `true`. - -```js run -alert( Boolean("0") ); // true -alert( Boolean(" ") ); // spaces, also true (any non-empty string is true) -``` -```` - -## Summary - -The three most widely used type conversions are to string, to number, and to boolean. - -**`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)`. - -The conversion follows the rules: - -| Value | Becomes... | -|-------|-------------| -|`undefined`|`NaN`| -|`null`|`0`| -|true / false | `1 / 0` | -| `string` | The string is read "as is", whitespaces from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. | - -**`Boolean Conversion`** -- Occurs in logical operations. Can be performed with `Boolean(value)`. - -Follows the rules: - -| Value | Becomes... | -|-------|-------------| -|`0`, `null`, `undefined`, `NaN`, `""` |`false`| -|any other value| `true` | - - -Most of these rules are easy to understand and memorize. The notable exceptions where people usually make mistakes are: - -- `undefined` is `NaN` as a number, not `0`. -- `"0"` and space-only strings like `" "` are true as a boolean. - -Objects aren't covered here. We'll return to them later in the chapter that is devoted exclusively to objects after we learn more basic things about JavaScript. diff --git a/1-js/02-first-steps/08-operators/1-increment-order/solution.md b/1-js/02-first-steps/08-operators/1-increment-order/solution.md deleted file mode 100644 index 8a44d798eb..0000000000 --- a/1-js/02-first-steps/08-operators/1-increment-order/solution.md +++ /dev/null @@ -1,18 +0,0 @@ - -The answer is: - -- `a = 2` -- `b = 2` -- `c = 2` -- `d = 1` - -```js run no-beautify -let a = 1, b = 1; - -alert( ++a ); // 2, prefix form returns the new value -alert( b++ ); // 1, postfix form returns the old value - -alert( a ); // 2, incremented once -alert( b ); // 2, incremented once -``` - diff --git a/1-js/02-first-steps/08-operators/1-increment-order/task.md b/1-js/02-first-steps/08-operators/1-increment-order/task.md deleted file mode 100644 index 7db0923890..0000000000 --- a/1-js/02-first-steps/08-operators/1-increment-order/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# The postfix and prefix forms - -What are the final values of all variables `a`, `b`, `c` and `d` after the code below? - -```js -let a = 1, b = 1; - -let c = ++a; // ? -let d = b++; // ? -``` diff --git a/1-js/02-first-steps/08-operators/2-assignment-result/solution.md b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md deleted file mode 100644 index e3113b4cd3..0000000000 --- a/1-js/02-first-steps/08-operators/2-assignment-result/solution.md +++ /dev/null @@ -1,5 +0,0 @@ -The answer is: - -- `a = 4` (multiplied by 2) -- `x = 5` (calculated as 1 + 4) - diff --git a/1-js/02-first-steps/08-operators/2-assignment-result/task.md b/1-js/02-first-steps/08-operators/2-assignment-result/task.md deleted file mode 100644 index 5345c9485b..0000000000 --- a/1-js/02-first-steps/08-operators/2-assignment-result/task.md +++ /dev/null @@ -1,13 +0,0 @@ -importance: 3 - ---- - -# Assignment result - -What are the values of `a` and `x` after the code below? - -```js -let a = 2; - -let x = 1 + (a *= 2); -``` diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md deleted file mode 100644 index 9a8411fbea..0000000000 --- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md +++ /dev/null @@ -1,26 +0,0 @@ - -```js no-beautify -"" + 1 + 0 = "10" // (1) -"" - 1 + 0 = -1 // (2) -true + false = 1 -6 / "3" = 2 -"2" * "3" = 6 -4 + 5 + "px" = "9px" -"$" + 4 + 5 = "$45" -"4" - 2 = 2 -"4px" - 2 = NaN -7 / 0 = Infinity -" -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. -2. The subtraction `-` (like most math operations) only works with numbers, it converts an empty string `""` to `0`. -3. The addition with a string appends the number `5` to the string. -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/08-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md deleted file mode 100644 index 930c715140..0000000000 --- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md +++ /dev/null @@ -1,27 +0,0 @@ -importance: 5 - ---- - -# Type conversions - -What are results of these expressions? - -```js no-beautify -"" + 1 + 0 -"" - 1 + 0 -true + false -6 / "3" -"2" * "3" -4 + 5 + "px" -"$" + 4 + 5 -"4" - 2 -"4px" - 2 -7 / 0 -" -9 " + 5 -" -9 " - 5 -null + 1 -undefined + 1 -" \t \n" - 2 -``` - -Think well, write down and then compare with the answer. 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 deleted file mode 100644 index 04f73fbd0b..0000000000 --- a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md +++ /dev/null @@ -1,32 +0,0 @@ -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 to 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 deleted file mode 100644 index b3ea4a3a3c..0000000000 --- a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md +++ /dev/null @@ -1,18 +0,0 @@ -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/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md deleted file mode 100644 index 48c453cec6..0000000000 --- a/1-js/02-first-steps/08-operators/article.md +++ /dev/null @@ -1,470 +0,0 @@ -# Basic operators, maths - -We know many operators from school. They are things like addition `+`, multiplication `*`, subtraction `-`, and so on. - -In this chapter, we’ll start with simple operators, then concentrate on JavaScript-specific aspects, not covered by school arithmetic. - -## Terms: "unary", "binary", "operand" - -Before we move on, let's grasp some common terminology. - -- *An operand* -- is what operators are applied to. For instance, in the multiplication of `5 * 2` there are two operands: the left operand is `5` and the right operand is `2`. Sometimes, people call these "arguments" instead of "operands". -- An operator is *unary* if it has a single operand. For example, the unary negation `-` reverses the sign of a number: - - ```js run - let x = 1; - - *!* - x = -x; - */!* - alert( x ); // -1, unary negation was applied - ``` -- An operator is *binary* if it has two operands. The same minus exists in binary form as well: - - ```js run no-beautify - let x = 1, y = 3; - alert( y - x ); // 2, binary minus subtracts values - ``` - - 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` multiplies `a` by itself `b` times. - -For instance: - -```js run -alert( 2 ** 2 ); // 4 (2 multiplied by itself 2 times) -alert( 2 ** 3 ); // 8 (2 * 2 * 2, 3 times) -alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2, 4 times) -``` - -Mathematically, the exponentiation is defined for non-integer numbers as well. For example, a square root is an exponentiation by `1/2`: - -```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. - -Usually, the plus operator `+` sums numbers. - -But, if the binary `+` is applied to strings, it merges (concatenates) them: - -```js -let s = "my" + "string"; -alert(s); // mystring -``` - -Note that if any of the operands is a string, then the other one is converted to a string too. - -For example: - -```js run -alert( '1' + 2 ); // "12" -alert( 2 + '1' ); // "21" -``` - -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`. - -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: - -```js run -alert( 6 - '2' ); // 4, converts '2' to a number -alert( '6' / '2' ); // 3, converts both operands to numbers -``` - -## Numeric conversion, unary + - -The plus `+` exists in two forms: the binary form that we used above and the unary form. - -The unary plus or, in other words, the plus operator `+` applied to a single value, doesn't do anything to numbers. But if the operand is not a number, the unary plus converts it into a number. - -For example: - -```js run -// No effect on numbers -let x = 1; -alert( +x ); // 1 - -let y = -2; -alert( +y ); // -2 - -*!* -// Converts non-numbers -alert( +true ); // 1 -alert( +"" ); // 0 -*/!* -``` - -It actually does the same thing as `Number(...)`, but is shorter. - -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: - -```js run -let apples = "2"; -let oranges = "3"; - -alert( apples + oranges ); // "23", the binary plus concatenates strings -``` - -If we want to treat them as numbers, we need to convert and then sum them: - -```js run -let apples = "2"; -let oranges = "3"; - -*!* -// both values converted to numbers before the binary plus -alert( +apples + +oranges ); // 5 -*/!* - -// the longer variant -// alert( Number(apples) + Number(oranges) ); // 5 -``` - -From a mathematician's standpoint, the abundance of pluses may seem strange. But from a programmer's standpoint, there's nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up. - -Why are unary pluses applied to values before the binary ones? As we're going to see, that's because of their *higher precedence*. - -## Operator precedence - -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. - -From school, we all know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That's exactly the precedence thing. The multiplication is said to have *a higher precedence* than the addition. - -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`. - -There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right. - -Here's an extract from the [precedence table](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones): - -| Precedence | Name | Sign | -|------------|------|------| -| ... | ... | ... | -| 17 | unary plus | `+` | -| 17 | unary negation | `-` | -| 16 | exponentiation | `**` | -| 15 | multiplication | `*` | -| 15 | division | `/` | -| 13 | addition | `+` | -| 13 | subtraction | `-` | -| ... | ... | ... | -| 3 | assignment | `=` | -| ... | ... | ... | - -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. - -## Assignment - -Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `3`. - -That's why, when we assign a variable, like `x = 2 * 2 + 1`, the calculations are done first and then the `=` is evaluated, storing the result in `x`. - -```js -let x = 2 * 2 + 1; - -alert( x ); // 5 -``` - -### Assignment = returns a value - -The fact of `=` being an operator, not a "magical" language construct has an interesting implication. - -Most operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`. - -The call `x = value` writes the `value` into `x` *and then returns it*. - -Here's a demo that uses an assignment as part of a more complex expression: - -```js run -let a = 1; -let b = 2; - -*!* -let c = 3 - (a = b + 1); -*/!* - -alert( a ); // 3 -alert( c ); // 0 -``` - -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: - -```js run -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 `*=`: - -```js run -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 -``` - -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) -``` - -## Increment/decrement - - - -Increasing or decreasing a number by one is among the most common numerical operations. - -So, there are special operators for it: - -- **Increment** `++` increases a variable by 1: - - ```js run no-beautify - let counter = 2; - counter++; // works the same as counter = counter + 1, but is shorter - alert( counter ); // 3 - ``` -- **Decrement** `--` decreases a variable by 1: - - ```js run no-beautify - let counter = 2; - counter--; // works the same as counter = counter - 1, but is shorter - alert( counter ); // 1 - ``` - -```warn -Increment/decrement can only be applied to variables. Trying to use it on a value like `5++` will give an error. -``` - -The operators `++` and `--` can be placed either before or after a variable. - -- When the operator goes after the variable, it is in "postfix form": `counter++`. -- The "prefix form" is when the operator goes before the variable: `++counter`. - -Both of these statements do the same thing: increase `counter` by `1`. - -Is there any difference? Yes, but we can only see it if we use the returned value of `++/--`. - -Let's clarify. As we know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement). - -To see the difference, here's an example: - -```js run -let counter = 1; -let a = ++counter; // (*) - -alert(a); // *!*2*/!* -``` - -In the line `(*)`, the *prefix* form `++counter` increments `counter` and returns the new value, `2`. So, the `alert` shows `2`. - -Now, let's use the postfix form: - -```js run -let counter = 1; -let a = counter++; // (*) changed ++counter to counter++ - -alert(a); // *!*1*/!* -``` - -In the line `(*)`, the *postfix* form `counter++` also increments `counter` but returns the *old* value (prior to increment). So, the `alert` shows `1`. - -To summarize: - -- If the result of increment/decrement is not used, there is no difference in which form to use: - - ```js run - let counter = 0; - counter++; - ++counter; - alert( counter ); // 2, the lines above did the same - ``` -- If we'd like to increase a value *and* immediately use the result of the operator, we need the prefix form: - - ```js run - let counter = 0; - alert( ++counter ); // 1 - ``` -- If we'd like to increment a value but use its previous value, we need the postfix form: - - ```js run - let counter = 0; - alert( counter++ ); // 0 - ``` - -````smart header="Increment/decrement among other operators" -The operators `++/--` can be used inside expressions as well. Their precedence is higher than most other arithmetical operations. - -For instance: - -```js run -let counter = 1; -alert( 2 * ++counter ); // 4 -``` - -Compare with: - -```js run -let counter = 1; -alert( 2 * counter++ ); // 2, because counter++ returns the "old" value -``` - -Though technically okay, such notation usually makes code less readable. One line does multiple things -- not good. - -While reading code, a fast "vertical" eye-scan can easily miss something like `counter++` and it won't be obvious that the variable increased. - -We advise a style of "one line -- one action": - -```js run -let counter = 1; -alert( 2 * counter ); -counter++; -``` -```` - -## Bitwise operators - -Bitwise operators treat arguments as 32-bit integer numbers and work on the level of their binary representation. - -These operators are not JavaScript-specific. They are supported in most programming languages. - -The list of operators: - -- AND ( `&` ) -- OR ( `|` ) -- XOR ( `^` ) -- NOT ( `~` ) -- LEFT SHIFT ( `<<` ) -- RIGHT SHIFT ( `>>` ) -- ZERO-FILL RIGHT SHIFT ( `>>>` ) - -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/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) article on MDN when a need arises. - -## Comma - -The comma operator `,` is one of the rarest and most unusual operators. Sometimes, it's used to write shorter code, so we need to know it in order to understand what's going on. - -The comma operator allows us to evaluate several expressions, dividing them with a comma `,`. Each of them is evaluated but only the result of the last one is returned. - -For example: - -```js run -*!* -let a = (1 + 2, 3 + 4); -*/!* - -alert( a ); // 7 (the result of 3 + 4) -``` - -Here, the first expression `1 + 2` is evaluated and its result is thrown away. Then, `3 + 4` is evaluated and returned as the result. - -```smart header="Comma has a very low precedence" -Please note that the comma operator has very low precedence, lower than `=`, so parentheses are important in the example above. - -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? - -Sometimes, people use it in more complex constructs to put several actions in one line. - -For example: - -```js -// three operations in one line -for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) { - ... -} -``` - -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. 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 deleted file mode 100644 index a86a9f73ee..0000000000 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md +++ /dev/null @@ -1,21 +0,0 @@ - - -```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 of `"2"` is greater than the first char of `"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/09-comparison/1-comparison-questions/task.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md deleted file mode 100644 index be7f75ddd9..0000000000 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md +++ /dev/null @@ -1,18 +0,0 @@ -importance: 5 - ---- - -# Comparisons - -What will be the result for these expressions? - -```js no-beautify -5 > 4 -"apple" > "pineapple" -"2" > "12" -undefined == null -undefined === null -null == "\n0\n" -null === +"\n0\n" -``` - diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md deleted file mode 100644 index a323dc93da..0000000000 --- a/1-js/02-first-steps/09-comparison/article.md +++ /dev/null @@ -1,214 +0,0 @@ -# Comparisons - -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. - -## Boolean is the result - -All comparison operators return a boolean value: - -- `true` -- means "yes", "correct" or "the truth". -- `false` -- means "no", "wrong" or "not the truth". - -For example: - -```js run -alert( 2 > 1 ); // true (correct) -alert( 2 == 1 ); // false (wrong) -alert( 2 != 1 ); // true (correct) -``` - -A comparison result can be assigned to a variable, just like any value: - -```js run -let result = 5 > 4; // assign the result of the comparison -alert( result ); // true -``` - -## String comparison - -To see whether a string is greater than another, JavaScript uses the so-called "dictionary" or "lexicographical" order. - -In other words, strings are compared letter-by-letter. - -For example: - -```js run -alert( 'Z' > 'A' ); // true -alert( 'Glow' > 'Glee' ); // true -alert( 'Bee' > 'Be' ); // true -``` - -The algorithm to compare two strings is simple: - -1. Compare the first character of both strings. -2. If the first character from the first string is greater (or less) than the other string's, then the first string is greater (or less) than the second. We're done. -3. Otherwise, if both strings' first characters are the same, compare the second characters the same way. -4. Repeat until the end of either string. -5. If both strings end at the same length, then they are equal. Otherwise, the longer string is greater. - -In the examples above, the comparison `'Z' > 'A'` gets to a result at the first step while the strings `"Glow"` and `"Glee"` are compared character-by-character: - -1. `G` is the same as `G`. -2. `l` is the same as `l`. -3. `o` is greater than `e`. Stop here. The first string is greater. - -```smart header="Not a real dictionary, but Unicode order" -The comparison algorithm given above is roughly equivalent to the one used in dictionaries or phone books, but it's not exactly the same. - -For instance, case matters. A capital letter `"A"` is not equal to the lowercase `"a"`. Which one is greater? The lowercase `"a"`. Why? Because the lowercase character has a greater index in the internal encoding table JavaScript uses (Unicode). We'll get back to specific details and consequences of this in the chapter . -``` - -## Comparison of different types - -When comparing values of different types, JavaScript converts the values to numbers. - -For example: - -```js run -alert( '2' > 1 ); // true, string '2' becomes a number 2 -alert( '01' == 1 ); // true, string '01' becomes a number 1 -``` - -For boolean values, `true` becomes `1` and `false` becomes `0`. - -For example: - -```js run -alert( true == 1 ); // true -alert( false == 0 ); // true -``` - -````smart header="A funny consequence" -It is possible that at the same time: - -- Two values are equal. -- One of them is `true` as a boolean and the other one is `false` as a boolean. - -For example: - -```js run -let a = 0; -alert( Boolean(a) ); // false - -let b = "0"; -alert( Boolean(b) ); // true - -alert(a == b); // true! -``` - -From JavaScript's standpoint, this result is quite normal. An equality check converts values using the numeric conversion (hence `"0"` becomes `0`), while the explicit `Boolean` conversion uses another set of rules. -```` - -## Strict equality - -A regular equality check `==` has a problem. It cannot differentiate `0` from `false`: - -```js run -alert( 0 == false ); // true -``` - -The same thing happens with an empty string: - -```js run -alert( '' == false ); // true -``` - -This happens because operands of different types are converted to numbers by the equality operator `==`. An empty string, just like `false`, becomes a zero. - -What to do if we'd like to differentiate `0` from `false`? - -**A strict equality operator `===` checks the equality without type conversion.** - -In other words, if `a` and `b` are of different types, then `a === b` immediately returns `false` without an attempt to convert them. - -Let's try it: - -```js run -alert( 0 === false ); // false, because the types are different -``` - -There is also a "strict non-equality" operator `!==` analogous to `!=`. - -The strict equality operator is a bit longer to write, but makes it obvious what's going on and leaves less room for errors. - -## Comparison with null and undefined - -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. - - ```js run - alert( null === undefined ); // false - ``` - -For a non-strict check `==` -: There's a special rule. These two are a "sweet couple": they equal each other (in the sense of `==`), but not any other value. - - ```js run - alert( null == undefined ); // true - ``` - -For maths and other comparisons `< > <= >=` -: `null/undefined` are converted to numbers: `null` becomes `0`, while `undefined` becomes `NaN`. - -Now let's see some funny things that happen when we apply these rules. And, what's more important, how to not fall into a trap with them. - -### Strange result: null vs 0 - -Let's compare `null` with a zero: - -```js run -alert( null > 0 ); // (1) false -alert( null == 0 ); // (2) false -alert( null >= 0 ); // (3) *!*true*/!* -``` - -Mathematically, that's strange. The last result states that "`null` is greater than or equal to zero", so in one of the comparisons above it must be `true`, but they are both false. - -The reason is that an equality check `==` and comparisons `> < >= <=` work differently. Comparisons convert `null` to a number, treating it as `0`. That's why (3) `null >= 0` is true and (1) `null > 0` is false. - -On the other hand, the equality check `==` for `undefined` and `null` is defined such that, without any conversions, they equal each other and don't equal anything else. That's why (2) `null == 0` is false. - -### An incomparable undefined - -The value `undefined` shouldn't be compared to other values: - -```js run -alert( undefined > 0 ); // false (1) -alert( undefined < 0 ); // false (2) -alert( undefined == 0 ); // false (3) -``` - -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. - -## Summary - -- Comparison operators return a boolean value. -- Strings are compared letter-by-letter in the "dictionary" order. -- When values of different types are compared, they get converted to numbers (with the exclusion of a strict equality check). -- The values `null` and `undefined` equal `==` each other and do not equal any other value. -- Be careful when using comparisons like `>` or `<` with variables that can occasionally be `null/undefined`. Checking for `null/undefined` separately is a good idea. diff --git a/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md b/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md deleted file mode 100644 index 51f1d46809..0000000000 --- a/1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md +++ /dev/null @@ -1,12 +0,0 @@ -**Yes, it will.** - -Any string except an empty one (and `"0"` is not empty) becomes `true` in the logical context. - -We can run and check: - -```js run -if ("0") { - alert( 'Hello' ); -} -``` - diff --git a/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md b/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md deleted file mode 100644 index 5f16cda857..0000000000 --- a/1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# if (a string with zero) - -Will `alert` be shown? - -```js -if ("0") { - alert( 'Hello' ); -} -``` - diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg deleted file mode 100644 index 25dc2744d4..0000000000 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg +++ /dev/null @@ -1 +0,0 @@ -BeginYou don't know? “ECMAScript”!Right!What's the “official” name of JavaScript?OtherECMAScript \ No newline at end of file diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html deleted file mode 100644 index ea99666539..0000000000 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/solution.md b/1-js/02-first-steps/10-ifelse/2-check-standard/solution.md deleted file mode 100644 index 99dea94520..0000000000 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/solution.md +++ /dev/null @@ -1,4 +0,0 @@ - - -[html run src="http://github.com/ifelse_task2/index.html"] - 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 deleted file mode 100644 index a4d9432456..0000000000 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md +++ /dev/null @@ -1,13 +0,0 @@ -importance: 2 - ---- - -# The name of JavaScript - -Using the `if..else` construct, write the code which asks: 'What is the "official" name of JavaScript?' - -If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "Didn't know? ECMAScript!" - -![](ifelse_task2.svg) - -[demo src="http://github.com/ifelse_task2"] diff --git a/1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html b/1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html deleted file mode 100644 index f168360dd7..0000000000 --- a/1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - diff --git a/1-js/02-first-steps/10-ifelse/3-sign/solution.md b/1-js/02-first-steps/10-ifelse/3-sign/solution.md deleted file mode 100644 index 262a605c2e..0000000000 --- a/1-js/02-first-steps/10-ifelse/3-sign/solution.md +++ /dev/null @@ -1,14 +0,0 @@ - - -```js run -let value = prompt('Type a number', 0); - -if (value > 0) { - alert( 1 ); -} else if (value < 0) { - alert( -1 ); -} else { - alert( 0 ); -} -``` - diff --git a/1-js/02-first-steps/10-ifelse/3-sign/task.md b/1-js/02-first-steps/10-ifelse/3-sign/task.md deleted file mode 100644 index 0c5d0e0084..0000000000 --- a/1-js/02-first-steps/10-ifelse/3-sign/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 2 - ---- - -# Show the sign - -Using `if..else`, write the code which gets a number via `prompt` and then shows in `alert`: - -- `1`, if the value is greater than zero, -- `-1`, if less than zero, -- `0`, if equals zero. - -In this task we assume that the input is always a number. - -[demo src="http://github.com/if_sign"] 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 deleted file mode 100644 index ff32354fae..0000000000 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md +++ /dev/null @@ -1,6 +0,0 @@ - - -```js -let result = (a + b < 4) ? 'Below' : 'Over'; -``` - 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 deleted file mode 100644 index 6bdf8453ea..0000000000 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 5 - ---- - -# Rewrite 'if' into '?' - -Rewrite this `if` using the conditional operator `'?'`: - -```js -let result; - -if (a + b < 4) { - result = 'Below'; -} else { - result = 'Over'; -} -``` diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md deleted file mode 100644 index 6d68e29d75..0000000000 --- a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md +++ /dev/null @@ -1,9 +0,0 @@ - - -```js -let message = (login == 'Employee') ? 'Hello' : - (login == 'Director') ? 'Greetings' : - (login == '') ? 'No login' : - ''; -``` - diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md deleted file mode 100644 index 4f7d994a21..0000000000 --- a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Rewrite 'if..else' into '?' - -Rewrite `if..else` using multiple ternary operators `'?'`. - -For readability, it's recommended to split the code into multiple lines. - -```js -let message; - -if (login == 'Employee') { - message = 'Hello'; -} else if (login == 'Director') { - message = 'Greetings'; -} else if (login == '') { - message = 'No login'; -} else { - message = ''; -} -``` diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md deleted file mode 100644 index 7327243b1c..0000000000 --- a/1-js/02-first-steps/10-ifelse/article.md +++ /dev/null @@ -1,239 +0,0 @@ -# Conditional branching: if, '?' - -Sometimes, we need to perform different actions based on different conditions. - -To do that, we can use the `if` statement and the conditional operator `?`, that's also called a "question mark" operator. - -## The "if" statement - -The `if(...)` statement evaluates a condition in parentheses and, if the result is `true`, executes a block of code. - -For example: - -```js run -let year = prompt('In which year was ECMAScript-2015 specification published?', ''); - -*!* -if (year == 2015) alert( 'You are right!' ); -*/!* -``` - -In the example above, the condition is a simple equality check (`year == 2015`), but it can be much more complex. - -If we want to execute more than one statement, we have to wrap our code block inside curly braces: - -```js -if (year == 2015) { - alert( "That's correct!" ); - alert( "You're so smart!" ); -} -``` - -We recommend wrapping your code block with curly braces `{}` every time you use an `if` statement, even if there is only one statement to execute. Doing so improves readability. - -## Boolean conversion - -The `if (…)` statement evaluates the expression in its parentheses and converts the result to a boolean. - -Let's recall the conversion rules from the chapter : - -- A number `0`, an empty string `""`, `null`, `undefined`, and `NaN` all become `false`. Because of that they are called "falsy" values. -- Other values become `true`, so they are called "truthy". - -So, the code under this condition would never execute: - -```js -if (0) { // 0 is falsy - ... -} -``` - -...and inside this condition -- it always will: - -```js -if (1) { // 1 is truthy - ... -} -``` - -We can also pass a pre-evaluated boolean value to `if`, like this: - -```js -let cond = (year == 2015); // equality evaluates to true or false - -if (cond) { - ... -} -``` - -## The "else" clause - -The `if` statement may contain an optional "else" block. It executes when the condition is false. - -For example: -```js run -let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); - -if (year == 2015) { - alert( 'You guessed it right!' ); -} else { - alert( 'How can you be so wrong?' ); // any value except 2015 -} -``` - -## Several conditions: "else if" - -Sometimes, we'd like to test several variants of a condition. The `else if` clause lets us do that. - -For example: - -```js run -let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); - -if (year < 2015) { - alert( 'Too early...' ); -} else if (year > 2015) { - alert( 'Too late' ); -} else { - alert( 'Exactly!' ); -} -``` - -In the code above, JavaScript first checks `year < 2015`. If that is falsy, it goes to the next condition `year > 2015`. If that is also falsy, it shows the last `alert`. - -There can be more `else if` blocks. The final `else` is optional. - -## Conditional operator '?' - -Sometimes, we need to assign a variable depending on a condition. - -For instance: - -```js run no-beautify -let accessAllowed; -let age = prompt('How old are you?', ''); - -*!* -if (age > 18) { - accessAllowed = true; -} else { - accessAllowed = false; -} -*/!* - -alert(accessAllowed); -``` - -The so-called "conditional" or "question mark" operator lets us do that in a shorter and simpler way. - -The operator is represented by a question mark `?`. Sometimes it's called "ternary", because the operator has three operands. It is actually the one and only operator in JavaScript which has that many. - -The syntax is: -```js -let result = condition ? value1 : value2; -``` - -The `condition` is evaluated: if it's truthy then `value1` is returned, otherwise -- `value2`. - -For example: - -```js -let accessAllowed = (age > 18) ? true : false; -``` - -Technically, we can omit the parentheses around `age > 18`. The question mark operator has a low precedence, so it executes after the comparison `>`. - -This example will do the same thing as the previous one: - -```js -// the comparison operator "age > 18" executes first anyway -// (no need to wrap it into parentheses) -let accessAllowed = age > 18 ? true : false; -``` - -But parentheses make the code more readable, so we recommend using them. - -````smart -In the example above, you can avoid using the question mark operator because the comparison itself returns `true/false`: - -```js -// the same -let accessAllowed = age > 18; -``` -```` - -## Multiple '?' - -A sequence of question mark operators `?` can return a value that depends on more than one condition. - -For instance: -```js run -let age = prompt('age?', 18); - -let message = (age < 3) ? 'Hi, baby!' : - (age < 18) ? 'Hello!' : - (age < 100) ? 'Greetings!' : - 'What an unusual age!'; - -alert( message ); -``` - -It may be difficult at first to grasp what's going on. But after a closer look, we can see that it's just an ordinary sequence of tests: - -1. The first question mark checks whether `age < 3`. -2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon '":"', checking `age < 18`. -3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon '":"', checking `age < 100`. -4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon '":"', returning `'What an unusual age!'`. - -Here's how this looks using `if..else`: - -```js -if (age < 3) { - message = 'Hi, baby!'; -} else if (age < 18) { - message = 'Hello!'; -} else if (age < 100) { - message = 'Greetings!'; -} else { - message = 'What an unusual age!'; -} -``` - -## Non-traditional use of '?' - -Sometimes the question mark `?` is used as a replacement for `if`: - -```js run no-beautify -let company = prompt('Which company created JavaScript?', ''); - -*!* -(company == 'Netscape') ? - alert('Right!') : alert('Wrong.'); -*/!* -``` - -Depending on the condition `company == 'Netscape'`, either the first or the second expression after the `?` gets executed and shows an alert. - -We don't assign a result to a variable here. Instead, we execute different code depending on the condition. - -**It's not recommended to use the question mark operator in this way.** - -The notation is shorter than the equivalent `if` statement, which appeals to some programmers. But it is less readable. - -Here is the same code using `if` for comparison: - -```js run no-beautify -let company = prompt('Which company created JavaScript?', ''); - -*!* -if (company == 'Netscape') { - alert('Right!'); -} else { - alert('Wrong.'); -} -*/!* -``` - -Our eyes scan the code vertically. Code blocks which span several lines are easier to understand than a long, horizontal instruction set. - -The purpose of the question mark operator `?` is to return one value or another depending on its condition. Please use it for exactly that. Use `if` when you need to execute different branches of code. diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md deleted file mode 100644 index 8869d32e6b..0000000000 --- a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md +++ /dev/null @@ -1,6 +0,0 @@ -The answer is `2`, that's the first truthy value. - -```js run -alert( null || 2 || undefined ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md deleted file mode 100644 index a7c9addfc7..0000000000 --- a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# What's the result of OR? - -What is the code below going to output? - -```js -alert( null || 2 || undefined ); -``` - 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 deleted file mode 100644 index f85b563662..0000000000 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -The answer: first `1`, then `2`. - -```js run -alert( alert(1) || 2 || alert(3) ); -``` - -The call to `alert` does not return a value. Or, in other words, it returns `undefined`. - -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)`. diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md deleted file mode 100644 index 3908fa2ece..0000000000 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 3 - ---- - -# What's the result of OR'ed alerts? - -What will the code below output? - -```js -alert( alert(1) || 2 || alert(3) ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md deleted file mode 100644 index 5c2455ef48..0000000000 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md +++ /dev/null @@ -1,6 +0,0 @@ -The answer: `null`, because it's the first falsy value from the list. - -```js run -alert( 1 && null && 2 ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md deleted file mode 100644 index 043d431e41..0000000000 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# What is the result of AND? - -What is this code going to show? - -```js -alert( 1 && null && 2 ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md deleted file mode 100644 index b6fb10d720..0000000000 --- a/1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md +++ /dev/null @@ -1,10 +0,0 @@ -The answer: `1`, and then `undefined`. - -```js run -alert( alert(1) && alert(2) ); -``` - -The call to `alert` returns `undefined` (it just shows a message, so there's no meaningful return). - -Because of that, `&&` evaluates the left operand (outputs `1`), and immediately stops, because `undefined` is a falsy value. And `&&` looks for a falsy value and returns it, so it's done. - diff --git a/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md b/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md deleted file mode 100644 index 69f877b955..0000000000 --- a/1-js/02-first-steps/11-logical-operators/4-alert-and/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 3 - ---- - -# What is the result of AND'ed alerts? - -What will this code show? - -```js -alert( alert(1) && alert(2) ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md deleted file mode 100644 index 25e3568f8b..0000000000 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md +++ /dev/null @@ -1,16 +0,0 @@ -The answer: `3`. - -```js run -alert( null || 2 && 3 || 4 ); -``` - -The precedence of AND `&&` is higher than `||`, so it executes first. - -The result of `2 && 3 = 3`, so the expression becomes: - -``` -null || 3 || 4 -``` - -Now the result is the first truthy value: `3`. - diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md deleted file mode 100644 index b18bb9c514..0000000000 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# The result of OR AND OR - -What will the result be? - -```js -alert( null || 2 && 3 || 4 ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md deleted file mode 100644 index 87c733b22e..0000000000 --- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md +++ /dev/null @@ -1,6 +0,0 @@ - - -```js -if (age >= 14 && age <= 90) -``` - 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 deleted file mode 100644 index cc00ca9fcd..0000000000 --- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 3 - ---- - -# Check the range between - -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`. diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md deleted file mode 100644 index d1946a9673..0000000000 --- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md +++ /dev/null @@ -1,12 +0,0 @@ -The first variant: - -```js -if (!(age >= 14 && age <= 90)) -``` - -The second variant: - -```js -if (age < 14 || age > 90) -``` - 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 deleted file mode 100644 index 7c22d6ad1d..0000000000 --- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 3 - ---- - -# Check the range outside - -Write an `if` condition to check that `age` is NOT between 14 and 90 inclusively. - -Create two variants: the first one using NOT `!`, the second one -- without it. diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md deleted file mode 100644 index 2105097584..0000000000 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md +++ /dev/null @@ -1,20 +0,0 @@ -The answer: the first and the third will execute. - -Details: - -```js run -// Runs. -// The result of -1 || 0 = -1, truthy -if (-1 || 0) alert( 'first' ); - -// Doesn't run -// -1 && 0 = 0, falsy -if (-1 && 0) alert( 'second' ); - -// Executes -// Operator && has a higher precedence than || -// so -1 && 1 executes first, giving us the chain: -// null || -1 && 1 -> null || 1 -> 1 -if (null || -1 && 1) alert( 'third' ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md deleted file mode 100644 index 55987121b0..0000000000 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md +++ /dev/null @@ -1,16 +0,0 @@ -importance: 5 - ---- - -# A question about "if" - -Which of these `alert`s are going to execute? - -What will the results of the expressions be inside `if(...)`? - -```js -if (-1 || 0) alert( 'first' ); -if (-1 && 0) alert( 'second' ); -if (null || -1 && 1) alert( 'third' ); -``` - diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg b/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg deleted file mode 100644 index ca3e0aead0..0000000000 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg +++ /dev/null @@ -1 +0,0 @@ -BeginCanceledCanceledWelcome!I don't know youWrong passwordWho's there?Password?CancelCancelAdminTheMasterOtherOther \ No newline at end of file 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 deleted file mode 100644 index a30db7aae9..0000000000 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md +++ /dev/null @@ -1,25 +0,0 @@ - - -```js run demo -let userName = prompt("Who's there?", ''); - -if (userName == 'Admin') { - - let pass = prompt('Password?', ''); - - if (pass == 'TheMaster') { - alert( 'Welcome!' ); - } else if (pass == '' || pass == null) { - alert( 'Canceled' ); - } else { - alert( 'Wrong password' ); - } - -} else if (userName == '' || userName == null) { - alert( 'Canceled' ); -} else { - alert( "I don't know you" ); -} -``` - -Note the vertical indents inside the `if` blocks. They are technically not required, but make the code more readable. 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 deleted file mode 100644 index 290a52642f..0000000000 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md +++ /dev/null @@ -1,25 +0,0 @@ -importance: 3 - ---- - -# Check the login - -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". - -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" - -The schema: - -![](ifelse_task.svg) - -Please use nested `if` blocks. Mind the overall readability of the code. - -Hint: passing an empty input to a prompt returns an empty string `''`. Pressing `key:ESC` during a prompt returns `null`. - -[demo] diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md deleted file mode 100644 index f45cbe4563..0000000000 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ /dev/null @@ -1,289 +0,0 @@ -# Logical operators - -There are three logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT). - -Although they are called "logical", they can be applied to values of any type, not only boolean. Their result can also be of any type. - -Let's see the details. - -## || (OR) - -The "OR" operator is represented with two vertical line symbols: - -```js -result = a || b; -``` - -In classical programming, the logical OR is meant to manipulate boolean values only. If any of its arguments are `true`, it returns `true`, otherwise it returns `false`. - -In JavaScript, the operator is a little bit trickier and more powerful. But first, let's see what happens with boolean values. - -There are four possible logical combinations: - -```js run -alert( true || true ); // true -alert( false || true ); // true -alert( true || false ); // true -alert( false || false ); // false -``` - -As we can see, the result is always `true` except for the case when both operands are `false`. - -If an operand is not a boolean, it's converted to a boolean for the evaluation. - -For instance, the number `1` is treated as `true`, the number `0` as `false`: - -```js run -if (1 || 0) { // works just like if( true || false ) - alert( 'truthy!' ); -} -``` - -Most of the time, OR `||` is used in an `if` statement to test if *any* of the given conditions is `true`. - -For example: - -```js run -let hour = 9; - -*!* -if (hour < 10 || hour > 18) { -*/!* - alert( 'The office is closed.' ); -} -``` - -We can pass more conditions: - -```js run -let hour = 12; -let isWeekend = true; - -if (hour < 10 || hour > 18 || isWeekend) { - alert( 'The office is closed.' ); // it is the weekend -} -``` - -## OR "||" finds the first truthy value - -The logic described above is somewhat classical. Now, let's bring in the "extra" features of JavaScript. - -The extended algorithm works as follows. - -Given multiple OR'ed values: - -```js -result = value1 || value2 || value3; -``` - -The OR `||` operator does the following: - -- Evaluates operands from left to right. -- For each operand, converts it to boolean. If the result is `true`, stops and returns the original value of that operand. -- If all operands have been evaluated (i.e. all were `false`), returns the last operand. - -A value is returned in its original form, without the conversion. - -In other words, a chain of OR `"||"` returns the first truthy value or the last one if no truthy value is found. - -For instance: - -```js run -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) -``` - -This leads to some interesting usage compared to a "pure, classical, boolean-only OR". - -1. **Getting the first truthy value from a list of variables or expressions.** - - For instance, we have `firstName`, `lastName` and `nickName` variables, all optional. - - 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 - */!* - ``` - - If all variables were falsy, `Anonymous` would show up. - -2. **Short-circuit evaluation.** - - 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. - - 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. - - In the example below, only the second message is printed: - - ```js run no-beautify - *!*true*/!* || alert("not printed"); - *!*false*/!* || alert("printed"); - ``` - - 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. - -## && (AND) - -The AND operator is represented with two ampersands `&&`: - -```js -result = a && b; -``` - -In classical programming, AND returns `true` if both operands are truthy and `false` otherwise: - -```js run -alert( true && true ); // true -alert( false && true ); // false -alert( true && false ); // false -alert( false && false ); // false -``` - -An example with `if`: - -```js run -let hour = 12; -let minute = 30; - -if (hour == 12 && minute == 30) { - alert( 'The time is 12:30' ); -} -``` - -Just as with OR, any value is allowed as an operand of AND: - -```js run -if (1 && 0) { // evaluated as true && false - alert( "won't work, because the result is falsy" ); -} -``` - - -## AND "&&" finds the first falsy value - -Given multiple AND'ed values: - -```js -result = value1 && value2 && value3; -``` - -The AND `&&` operator does the following: - -- Evaluates operands from left to right. -- For each operand, converts it to a boolean. If the result is `false`, stops and returns the original value of that operand. -- If all operands have been evaluated (i.e. all were truthy), returns the last operand. - -In other words, AND returns the first falsy value or the last value if none were found. - -The rules above are similar to OR. The difference is that AND returns the first *falsy* value while OR returns the first *truthy* one. - -Examples: - -```js run -// if the first operand is truthy, -// AND returns the second operand: -alert( 1 && 0 ); // 0 -alert( 1 && 5 ); // 5 - -// if the first operand is falsy, -// AND returns it. The second operand is ignored -alert( null && 5 ); // null -alert( 0 && "no matter what" ); // 0 -``` - -We can also pass several values in a row. See how the first falsy one is returned: - -```js run -alert( 1 && 2 && null && 3 ); // null -``` - -When all values are truthy, the last value is returned: - -```js run -alert( 1 && 2 && 3 ); // 3, the last one -``` - -````smart header="Precedence of AND `&&` is higher than OR `||`" -The precedence of AND `&&` operator is higher than OR `||`. - -So the code `a && b || c && d` is essentially the same as if the `&&` expressions were in parentheses: `(a && b) || (c && d)`. -```` - -````warn header="Don't replace `if` with || or &&" -Sometimes, people use the AND `&&` operator as a "shorter to write `if`". - -For instance: - -```js run -let x = 1; - -(x > 0) && alert( 'Greater than zero!' ); -``` - -The action in the right part of `&&` would execute only if the evaluation reaches it. That is, only if `(x > 0)` is true. - -So we basically have an analogue for: - -```js run -let x = 1; - -if (x > 0) alert( 'Greater than zero!' ); -``` - -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. -```` - - -## ! (NOT) - -The boolean NOT operator is represented with an exclamation sign `!`. - -The syntax is pretty simple: - -```js -result = !value; -``` - -The operator accepts a single argument and does the following: - -1. Converts the operand to boolean type: `true/false`. -2. Returns the inverse value. - -For instance: - -```js run -alert( !true ); // false -alert( !0 ); // true -``` - -A double NOT `!!` is sometimes used for converting a value to boolean type: - -```js run -alert( !!"non-empty string" ); // true -alert( !!null ); // false -``` - -That is, the first NOT converts the value to boolean and returns the inverse, and the second NOT inverses it again. In the end, we have a plain value-to-boolean conversion. - -There's a little more verbose way to do the same thing -- a built-in `Boolean` function: - -```js run -alert( Boolean("non-empty string") ); // true -alert( Boolean(null) ); // false -``` - -The precedence of NOT `!` is the highest of all logical operators, so it always executes first, before `&&` or `||`. 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 deleted file mode 100644 index c72dd91d6e..0000000000 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ /dev/null @@ -1,130 +0,0 @@ -# Nullish coalescing operator '??' - -[recent browser="new"] - -The nullish coalescing operator `??` provides a short syntax for selecting a first "defined" variable from the list. - -The result of `a ?? b` is: -- `a` if it's not `null` or `undefined`, -- `b`, otherwise. - -So, `x = a ?? b` is a short equivalent to: - -```js -x = (a !== null && a !== undefined) ? a : b; -``` - -Here's a longer example. - -Imagine, we have a user, and there are variables `firstName`, `lastName` or `nickName` for their first name, last name and the nick name. All of them may be undefined, if the user decided not to enter any value. - -We'd like to display the user name: one of these three variables, or show "Anonymous" if nothing is set. - -Let's use the `??` operator to select the first defined one: - -```js run -let firstName = null; -let lastName = null; -let nickName = "Supercoder"; - -// show the first not-null/undefined value -*!* -alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder -*/!* -``` - -## Comparison with || - -The OR `||` operator can be used in the same way as `??`. Actually, we can replace `??` with `||` in the code above and get the same result, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value). - -The important difference is that: -- `||` returns the first *truthy* value. -- `??` returns the first *defined* value. - -This matters a lot when we'd like to treat `null/undefined` differently from `0`. - -For example, consider this: - -```js -height = height ?? 100; -``` - -This sets `height` to `100` if it's not defined. - -Let's compare it with `||`: - -```js run -let height = 0; - -alert(height || 100); // 100 -alert(height ?? 100); // 0 -``` - -Here, `height || 100` treats zero height as unset, same as `null`, `undefined` or any other falsy value. So the result is `100`. - -The `height ?? 100` returns `100` only if `height` is exactly `null` or `undefined`. So the `alert` shows the height value `0` "as is". - -Which behavior is better depends on a particular use case. When zero height is a valid value, then `??` is preferrable. - -## Precedence - -The precedence of the `??` operator is rather low: `5` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). - -So `??` is evaluated after most other operations, but before `=` and `?`. - -If we need to choose a value with `??` in a complex expression, then 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, `*` has the higher precedence than `??` and would run first. - -That would work be the same as: - -```js -// probably not correct -let area = height ?? (100 * width) ?? 50; -``` - -There's also a related language-level limitation. - -**Due to safety reasons, it's forbidden to use `??` together with `&&` and `||` operators.** - -The code below triggers a syntax error: - -```js run -let x = 1 && 2 ?? 3; // Syntax error -``` - -The limitation is surely debatable, but it was added to the language specification with the purpose to avoid programming mistakes, as people start to switch to `??` from `||`. - -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 a "defined" value from the 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, a bit higher than `?` and `=`. -- It's forbidden to use it with `||` or `&&` without explicit parentheses. diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md deleted file mode 100644 index 43ee4aad3d..0000000000 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md +++ /dev/null @@ -1,25 +0,0 @@ -The answer: `1`. - -```js run -let i = 3; - -while (i) { - alert( i-- ); -} -``` - -Every loop iteration decreases `i` by `1`. The check `while(i)` stops the loop when `i = 0`. - -Hence, the steps of the loop form the following sequence ("loop unrolled"): - -```js -let i = 3; - -alert(i--); // shows 3, decreases i to 2 - -alert(i--) // shows 2, decreases i to 1 - -alert(i--) // shows 1, decreases i to 0 - -// done, while(i) check stops the loop -``` diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md deleted file mode 100644 index 3b847dfa2d..0000000000 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 3 - ---- - -# Last loop value - -What is the last value alerted by this code? Why? - -```js -let i = 3; - -while (i) { - alert( i-- ); -} -``` diff --git a/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md deleted file mode 100644 index 4953598769..0000000000 --- a/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md +++ /dev/null @@ -1,30 +0,0 @@ -The task demonstrates how postfix/prefix forms can lead to different results when used in comparisons. - -1. **From 1 to 4** - - ```js run - let i = 0; - while (++i < 5) alert( i ); - ``` - - The first value is `i = 1`, because `++i` first increments `i` and then returns the new value. So the first comparison is `1 < 5` and the `alert` shows `1`. - - Then follow `2, 3, 4…` -- the values show up one after another. The comparison always uses the incremented value, because `++` is before the variable. - - Finally, `i = 4` is incremented to `5`, the comparison `while(5 < 5)` fails, and the loop stops. So `5` is not shown. -2. **From 1 to 5** - - ```js run - let i = 0; - while (i++ < 5) alert( i ); - ``` - - The first value is again `i = 1`. The postfix form of `i++` increments `i` and then returns the *old* value, so the comparison `i++ < 5` will use `i = 0` (contrary to `++i < 5`). - - But the `alert` call is separate. It's another statement which executes after the increment and the comparison. So it gets the current `i = 1`. - - Then follow `2, 3, 4…` - - Let's stop on `i = 4`. The prefix form `++i` would increment it and use `5` in the comparison. But here we have the postfix form `i++`. So it increments `i` to `5`, but returns the old value. Hence the comparison is actually `while(4 < 5)` -- true, and the control goes on to `alert`. - - The value `i = 5` is the last one, because on the next step `while(5 < 5)` is false. diff --git a/1-js/02-first-steps/13-while-for/2-which-value-while/task.md b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md deleted file mode 100644 index 298213237b..0000000000 --- a/1-js/02-first-steps/13-while-for/2-which-value-while/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 4 - ---- - -# Which values does the while loop show? - -For every loop iteration, write down which value it outputs and then compare it with the solution. - -Both loops `alert` the same values, or not? - -1. The prefix form `++i`: - - ```js - let i = 0; - while (++i < 5) alert( i ); - ``` -2. The postfix form `i++` - - ```js - let i = 0; - while (i++ < 5) alert( i ); - ``` diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md deleted file mode 100644 index e2e28e75b4..0000000000 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -**The answer: from `0` to `4` in both cases.** - -```js run -for (let i = 0; i < 5; ++i) alert( i ); - -for (let i = 0; i < 5; i++) alert( i ); -``` - -That can be easily deducted from the algorithm of `for`: - -1. Execute once `i = 0` before everything (begin). -2. Check the condition `i < 5` -3. If `true` -- execute the loop body `alert(i)`, and then `i++` - -The increment `i++` is separated from the condition check (2). That's just another statement. - -The value returned by the increment is not used here, so there's no difference between `i++` and `++i`. diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md deleted file mode 100644 index bfefa63f53..0000000000 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 4 - ---- - -# Which values get shown by the "for" loop? - -For each loop write down which values it is going to show. Then compare with the answer. - -Both loops `alert` same values or not? - -1. The postfix form: - - ```js - for (let i = 0; i < 5; i++) alert( i ); - ``` -2. The prefix form: - - ```js - for (let i = 0; i < 5; ++i) alert( i ); - ``` diff --git a/1-js/02-first-steps/13-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md deleted file mode 100644 index e8e66bb47c..0000000000 --- a/1-js/02-first-steps/13-while-for/4-for-even/solution.md +++ /dev/null @@ -1,11 +0,0 @@ - - -```js run demo -for (let i = 2; i <= 10; i++) { - if (i % 2 == 0) { - alert( i ); - } -} -``` - -We use the "modulo" operator `%` to get the remainder and check for the evenness here. diff --git a/1-js/02-first-steps/13-while-for/4-for-even/task.md b/1-js/02-first-steps/13-while-for/4-for-even/task.md deleted file mode 100644 index ff34e7e40f..0000000000 --- a/1-js/02-first-steps/13-while-for/4-for-even/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Output even numbers in the loop - -Use the `for` loop to output even numbers from `2` to `10`. - -[demo] diff --git a/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md deleted file mode 100644 index 612cf559ca..0000000000 --- a/1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md +++ /dev/null @@ -1,10 +0,0 @@ - - -```js run -let i = 0; -while (i < 3) { - alert( `number ${i}!` ); - i++; -} -``` - diff --git a/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md deleted file mode 100644 index 0c69d9c2d5..0000000000 --- a/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Replace "for" with "while" - -Rewrite the code changing the `for` loop to `while` without altering its behavior (the output should stay same). - -```js run -for (let i = 0; i < 3; i++) { - alert( `number ${i}!` ); -} -``` - diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md deleted file mode 100644 index 2e04a78c43..0000000000 --- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md +++ /dev/null @@ -1,15 +0,0 @@ - -```js run demo -let num; - -do { - num = prompt("Enter a number greater than 100?", 0); -} while (num <= 100 && num); -``` - -The loop `do..while` repeats while both checks are truthy: - -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 a empty string. Then the `while` loop stops too. - -P.S. If `num` is `null` then `num <= 100` is `true`, so without the 2nd check the loop wouldn't stop if the user clicks CANCEL. Both checks are required. diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md deleted file mode 100644 index 0788ee76e4..0000000000 --- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md +++ /dev/null @@ -1,13 +0,0 @@ -importance: 5 - ---- - -# Repeat until the input is correct - -Write a loop which prompts for a number greater than `100`. If the visitor enters another number -- ask them to input again. - -The loop must ask for a number until either the visitor enters a number greater than `100` or cancels the input/enters an empty line. - -Here we can assume that the visitor only inputs numbers. There's no need to implement a special handling for a non-numeric input in this task. - -[demo] diff --git a/1-js/02-first-steps/13-while-for/7-list-primes/solution.md b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md deleted file mode 100644 index b4b64b6faa..0000000000 --- a/1-js/02-first-steps/13-while-for/7-list-primes/solution.md +++ /dev/null @@ -1,29 +0,0 @@ -There are many algorithms for this task. - -Let's use a nested loop: - -```js -For each i in the interval { - check if i has a divisor from 1..i - if yes => the value is not a prime - if no => the value is a prime, show it -} -``` - -The code using a label: - -```js run -let n = 10; - -nextPrime: -for (let i = 2; i <= n; i++) { // for each i... - - for (let j = 2; j < i; j++) { // look for a divisor.. - if (i % j == 0) continue nextPrime; // not a prime, go next i - } - - alert( i ); // a prime -} -``` - -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/13-while-for/7-list-primes/task.md b/1-js/02-first-steps/13-while-for/7-list-primes/task.md deleted file mode 100644 index 6344b9f6f8..0000000000 --- a/1-js/02-first-steps/13-while-for/7-list-primes/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 3 - ---- - -# Output prime numbers - -An integer number greater than `1` is called a [prime](https://en.wikipedia.org/wiki/Prime_number) if it cannot be divided without a remainder by anything except `1` and itself. - -In other words, `n > 1` is a prime if it can't be evenly divided by anything except `1` and `n`. - -For example, `5` is a prime, because it cannot be divided without a remainder by `2`, `3` and `4`. - -**Write the code which outputs prime numbers in the interval from `2` to `n`.** - -For `n = 10` the result will be `2,3,5,7`. - -P.S. The code should work for any `n`, not be hard-tuned for any fixed value. diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md deleted file mode 100644 index b3e3953b8f..0000000000 --- a/1-js/02-first-steps/13-while-for/article.md +++ /dev/null @@ -1,386 +0,0 @@ -# Loops: while and for - -We often need to repeat actions. - -For example, outputting goods from a list one after another or just running the same code for each number from 1 to 10. - -*Loops* are a way to repeat the same code multiple times. - -## The "while" loop - -The `while` loop has the following syntax: - -```js -while (condition) { - // code - // so-called "loop body" -} -``` - -While the `condition` is truthy, the `code` from the loop body is executed. - -For instance, the loop below outputs `i` while `i < 3`: - -```js run -let i = 0; -while (i < 3) { // shows 0, then 1, then 2 - alert( i ); - i++; -} -``` - -A single execution of the loop body is called *an iteration*. The loop in the example above makes three iterations. - -If `i++` was missing from the example above, the loop would repeat (in theory) forever. In practice, the browser provides ways to stop such loops, and in server-side JavaScript, we can kill the process. - -Any expression or variable can be a loop condition, not just comparisons: the condition is evaluated and converted to a boolean by `while`. - -For instance, a shorter way to write `while (i != 0)` is `while (i)`: - -```js run -let i = 3; -*!* -while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops -*/!* - alert( i ); - i--; -} -``` - -````smart header="Curly braces are not required for a single-line body" -If the loop body has a single statement, we can omit the curly braces `{…}`: - -```js run -let i = 3; -*!* -while (i) alert(i--); -*/!* -``` -```` - -## The "do..while" loop - -The condition check can be moved *below* the loop body using the `do..while` syntax: - -```js -do { - // loop body -} while (condition); -``` - -The loop will first execute the body, then check the condition, and, while it's truthy, execute it again and again. - -For example: - -```js run -let i = 0; -do { - alert( i ); - i++; -} while (i < 3); -``` - -This form of syntax should only be used when you want the body of the loop to execute **at least once** regardless of the condition being truthy. Usually, the other form is preferred: `while(…) {…}`. - -## The "for" loop - -The `for` loop is more complex, but it's also the most commonly used loop. - -It looks like this: - -```js -for (begin; condition; step) { - // ... loop body ... -} -``` - -Let's learn the meaning of these parts by example. The loop below runs `alert(i)` for `i` from `0` up to (but not including) `3`: - -```js run -for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2 - alert(i); -} -``` - -Let's examine the `for` statement part-by-part: - -| part | | | -|-------|----------|----------------------------------------------------------------------------| -| begin | `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: - -``` -Run begin -→ (if condition → run body and run step) -→ (if condition → run body and run step) -→ (if condition → run body and run step) -→ ... -``` - -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. - -Here's exactly what happens in our case: - -```js -// for (let i = 0; i < 3; i++) alert(i) - -// run begin -let i = 0 -// if condition → run body and run step -if (i < 3) { alert(i); i++ } -// if condition → run body and run step -if (i < 3) { alert(i); i++ } -// if condition → run body and run step -if (i < 3) { alert(i); i++ } -// ...finish, because now i == 3 -``` - -````smart header="Inline variable declaration" -Here, the "counter" variable `i` is declared right in the loop. This is called an "inline" variable declaration. Such variables are visible only inside the loop. - -```js run -for (*!*let*/!* i = 0; i < 3; i++) { - alert(i); // 0, 1, 2 -} -alert(i); // error, no such variable -``` - -Instead of defining a variable, we could use an existing one: - -```js run -let i = 0; - -for (i = 0; i < 3; i++) { // use an existing variable - alert(i); // 0, 1, 2 -} - -alert(i); // 3, visible, because declared outside of the loop -``` - -```` - - -### Skipping parts - -Any part of `for` can be skipped. - -For example, we can omit `begin` if we don't need to do anything at the loop start. - -Like here: - -```js run -let i = 0; // we have i already declared and assigned - -for (; i < 3; i++) { // no need for "begin" - alert( i ); // 0, 1, 2 -} -``` - -We can also remove the `step` part: - -```js run -let i = 0; - -for (; i < 3;) { - alert( i++ ); -} -``` - -This makes the loop identical to `while (i < 3)`. - -We can actually remove everything, creating an infinite loop: - -```js -for (;;) { - // repeats without limits -} -``` - -Please note that the two `for` semicolons `;` must be present. Otherwise, there would be a syntax error. - -## Breaking the loop - -Normally, a loop exits when its condition becomes falsy. - -But we can force the exit at any time using the special `break` directive. - -For example, the loop below asks the user for a series of numbers, "breaking" when no number is entered: - -```js run -let sum = 0; - -while (true) { - - let value = +prompt("Enter a number", ''); - -*!* - if (!value) break; // (*) -*/!* - - sum += value; - -} -alert( 'Sum: ' + sum ); -``` - -The `break` directive is activated at the line `(*)` if the user enters an empty line or cancels the input. It stops the loop immediately, passing control to the first line after the loop. Namely, `alert`. - -The combination "infinite loop + `break` as needed" is great for situations when a loop's condition must be checked not in the beginning or end of the loop, but in the middle or even in several places of its body. - -## Continue to the next iteration [#continue] - -The `continue` directive is a "lighter version" of `break`. It doesn't stop the whole loop. Instead, it stops the current iteration and forces the loop to start a new one (if the condition allows). - -We can use it if we're done with the current iteration and would like to move on to the next one. - -The loop below uses `continue` to output only odd values: - -```js run no-beautify -for (let i = 0; i < 10; i++) { - - // if true, skip the remaining part of the body - *!*if (i % 2 == 0) continue;*/!* - - alert(i); // 1, then 3, 5, 7, 9 -} -``` - -For even values of `i`, the `continue` directive stops executing the body and passes control to the next iteration of `for` (with the next number). So the `alert` is only called for odd values. - -````smart header="The `continue` directive helps decrease nesting" -A loop that shows odd values could look like this: - -```js run -for (let i = 0; i < 10; i++) { - - if (i % 2) { - alert( i ); - } - -} -``` - -From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an `if` block instead of using `continue`. - -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. -```` - -````warn header="No `break/continue` to the right side of '?'" -Please note that syntax constructs that are not expressions cannot be used with the ternary operator `?`. In particular, directives such as `break/continue` aren't allowed there. - -For example, if we take this code: - -```js -if (i > 5) { - alert(i); -} else { - continue; -} -``` - -...and rewrite it using a question mark: - - -```js no-beautify -(i > 5) ? alert(i) : *!*continue*/!*; // continue isn't allowed here -``` - -...it stops working: there's a syntax error. - -This is just another reason not to use the question mark operator `?` instead of `if`. -```` - -## Labels for break/continue - -Sometimes we need to break out from multiple nested loops at once. - -For example, in the code below we loop over `i` and `j`, prompting for the coordinates `(i, j)` from `(0,0)` to `(2,2)`: - -```js run no-beautify -for (let i = 0; i < 3; i++) { - - for (let j = 0; j < 3; j++) { - - let input = prompt(`Value at coords (${i},${j})`, ''); - - // what if we want to exit from here to Done (below)? - } -} - -alert('Done!'); -``` - -We need a way to stop the process if the user cancels the input. - -The ordinary `break` after `input` would only break the inner loop. That's not sufficient--labels, come to the rescue! - -A *label* is an identifier with a colon before a loop: -```js -labelName: for (...) { - ... -} -``` - -The `break ` statement in the loop below breaks out to the label: - -```js run no-beautify -*!*outer:*/!* for (let i = 0; i < 3; i++) { - - for (let j = 0; j < 3; j++) { - - let input = prompt(`Value at coords (${i},${j})`, ''); - - // if an empty string or canceled, then break out of both loops - if (!input) *!*break outer*/!*; // (*) - - // do something with the value... - } -} -alert('Done!'); -``` - -In the code above, `break outer` looks upwards for the label named `outer` and breaks out of that loop. - -So the control goes straight from `(*)` to `alert('Done!')`. - -We can also move the label onto a separate line: - -```js no-beautify -outer: -for (let i = 0; i < 3; i++) { ... } -``` - -The `continue` directive can also be used with a label. In this case, code execution jumps to the next iteration of the labeled loop. - -````warn header="Labels do not allow to \"jump\" anywhere" -Labels do not allow us to jump into an arbitrary place in the code. - -For example, it is impossible to do this: -```js -break label; // doesn't jumps to the label below - -label: for (...) -``` - -A call to `break/continue` is only possible from inside a loop and the label must be somewhere above the directive. -```` - -## Summary - -We covered 3 types of loops: - -- `while` -- The condition is checked before each iteration. -- `do..while` -- The condition is checked after each iteration. -- `for (;;)` -- The condition is checked before each iteration, additional settings available. - -To make an "infinite" loop, usually the `while(true)` construct is used. Such a loop, just like any other, can be stopped with the `break` directive. - -If we don't want to do anything in the current iteration and would like to forward to the next one, we can use the `continue` directive. - -`break/continue` support labels before the loop. A label is the only way for `break/continue` to escape a nested loop to go to an outer one. diff --git a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md deleted file mode 100644 index d3e397434b..0000000000 --- a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md +++ /dev/null @@ -1,20 +0,0 @@ -To precisely match the functionality of `switch`, the `if` must use a strict comparison `'==='`. - -For given strings though, a simple `'=='` works too. - -```js no-beautify -if(browser == 'Edge') { - alert("You've got the Edge!"); -} else if (browser == 'Chrome' - || browser == 'Firefox' - || browser == 'Safari' - || browser == 'Opera') { - alert( 'Okay we support these browsers too' ); -} else { - alert( 'We hope that this page looks ok!' ); -} -``` - -Please note: the construct `browser == 'Chrome' || browser == 'Firefox' …` is split into multiple lines for better readability. - -But the `switch` construct is still cleaner and more descriptive. diff --git a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md deleted file mode 100644 index f4dc0e5f19..0000000000 --- a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md +++ /dev/null @@ -1,26 +0,0 @@ -importance: 5 - ---- - -# Rewrite the "switch" into an "if" - -Write the code using `if..else` which would correspond to the following `switch`: - -```js -switch (browser) { - case 'Edge': - alert( "You've got the Edge!" ); - break; - - case 'Chrome': - case 'Firefox': - case 'Safari': - case 'Opera': - alert( 'Okay we support these browsers too' ); - break; - - default: - alert( 'We hope that this page looks ok!' ); -} -``` - diff --git a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md deleted file mode 100644 index ed87dd94b6..0000000000 --- a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md +++ /dev/null @@ -1,26 +0,0 @@ -The first two checks turn into two `case`. The third check is split into two cases: - -```js run -let a = +prompt('a?', ''); - -switch (a) { - case 0: - alert( 0 ); - break; - - case 1: - alert( 1 ); - break; - - case 2: - case 3: - alert( '2,3' ); -*!* - break; -*/!* -} -``` - -Please note: the `break` at the bottom is not required. But we put it to make the code future-proof. - -In the future, there is a chance that we'd want to add one more `case`, for example `case 4`. And if we forget to add a break before it, at the end of `case 3`, there will be an error. So that's a kind of self-insurance. diff --git a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md deleted file mode 100644 index ec99d098db..0000000000 --- a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 4 - ---- - -# Rewrite "if" into "switch" - -Rewrite the code below using a single `switch` statement: - -```js run -let a = +prompt('a?', ''); - -if (a == 0) { - alert( 0 ); -} -if (a == 1) { - alert( 1 ); -} - -if (a == 2 || a == 3) { - alert( '2,3' ); -} -``` - diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md deleted file mode 100644 index 314c6cef89..0000000000 --- a/1-js/02-first-steps/14-switch/article.md +++ /dev/null @@ -1,172 +0,0 @@ -# The "switch" statement - -A `switch` statement can replace multiple `if` checks. - -It gives a more descriptive way to compare a value with multiple variants. - -## The syntax - -The `switch` has one or more `case` blocks and an optional default. - -It looks like this: - -```js no-beautify -switch(x) { - case 'value1': // if (x === 'value1') - ... - [break] - - case 'value2': // if (x === 'value2') - ... - [break] - - default: - ... - [break] -} -``` - -- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on. -- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`). -- If no case is matched then the `default` code is executed (if it exists). - -## An example - -An example of `switch` (the executed code is highlighted): - -```js run -let a = 2 + 2; - -switch (a) { - case 3: - alert( 'Too small' ); - break; -*!* - case 4: - alert( 'Exactly!' ); - break; -*/!* - case 5: - alert( 'Too large' ); - break; - default: - alert( "I don't know such values" ); -} -``` - -Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails. - -Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`. - -**If there is no `break` then the execution continues with the next `case` without any checks.** - -An example without `break`: - -```js run -let a = 2 + 2; - -switch (a) { - case 3: - alert( 'Too small' ); -*!* - case 4: - alert( 'Exactly!' ); - case 5: - alert( 'Too big' ); - default: - alert( "I don't know such values" ); -*/!* -} -``` - -In the example above we'll see sequential execution of three `alert`s: - -```js -alert( 'Exactly!' ); -alert( 'Too big' ); -alert( "I don't know such values" ); -``` - -````smart header="Any expression can be a `switch/case` argument" -Both `switch` and `case` allow arbitrary expressions. - -For example: - -```js run -let a = "1"; -let b = 0; - -switch (+a) { -*!* - case b + 1: - alert("this runs, because +a is 1, exactly equals b+1"); - break; -*/!* - - default: - alert("this doesn't run"); -} -``` -Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed. -```` - -## Grouping of "case" - -Several variants of `case` which share the same code can be grouped. - -For example, if we want the same code to run for `case 3` and `case 5`: - -```js run no-beautify -let a = 3; - -switch (a) { - case 4: - alert('Right!'); - break; - -*!* - case 3: // (*) grouped two cases - case 5: - alert('Wrong!'); - alert("Why don't you take a math class?"); - break; -*/!* - - default: - alert('The result is strange. Really.'); -} -``` - -Now both `3` and `5` show the same message. - -The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. - -## Type matters - -Let's emphasize that the equality check is always strict. The values must be of the same type to match. - -For example, let's consider the code: - -```js run -let arg = prompt("Enter a value?"); -switch (arg) { - case '0': - case '1': - alert( 'One or zero' ); - break; - - case '2': - alert( 'Two' ); - break; - - case 3: - alert( 'Never executes!' ); - break; - default: - alert( 'An unknown value' ); -} -``` - -1. For `0`, `1`, the first `alert` runs. -2. For `2` the second `alert` runs. -3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute. diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md deleted file mode 100644 index e41c80418a..0000000000 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md +++ /dev/null @@ -1 +0,0 @@ -No difference. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md deleted file mode 100644 index 4f69a5c8c3..0000000000 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md +++ /dev/null @@ -1,38 +0,0 @@ -importance: 4 - ---- - -# Is "else" required? - -The following function returns `true` if the parameter `age` is greater than `18`. - -Otherwise it asks for a confirmation and returns its result: - -```js -function checkAge(age) { - if (age > 18) { - return true; -*!* - } else { - // ... - return confirm('Did parents allow you?'); - } -*/!* -} -``` - -Will the function work differently if `else` is removed? - -```js -function checkAge(age) { - if (age > 18) { - return true; - } -*!* - // ... - return confirm('Did parents allow you?'); -*/!* -} -``` - -Is there any difference in the behavior of these two variants? diff --git a/1-js/02-first-steps/15-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 deleted file mode 100644 index c8ee9618fc..0000000000 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -Using a question mark operator `'?'`: - -```js -function checkAge(age) { - return (age > 18) ? true : confirm('Did parents allow you?'); -} -``` - -Using OR `||` (the shortest variant): - -```js -function checkAge(age) { - return (age > 18) || confirm('Did parents allow you?'); -} -``` - -Note that the parentheses around `age > 18` are not required here. They exist for better readabilty. diff --git a/1-js/02-first-steps/15-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 deleted file mode 100644 index 46da079c0d..0000000000 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md +++ /dev/null @@ -1,26 +0,0 @@ -importance: 4 - ---- - -# Rewrite the function using '?' or '||' - -The following function returns `true` if the parameter `age` is greater than `18`. - -Otherwise it asks for a confirmation and returns its result. - -```js -function checkAge(age) { - if (age > 18) { - return true; - } else { - return confirm('Did parents allow you?'); - } -} -``` - -Rewrite it, to perform the same, but without `if`, in a single line. - -Make two variants of `checkAge`: - -1. Using a question mark operator `?` -2. Using OR `||` diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md deleted file mode 100644 index 2236d9203f..0000000000 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ /dev/null @@ -1,21 +0,0 @@ -A solution using `if`: - -```js -function min(a, b) { - if (a < b) { - return a; - } else { - return b; - } -} -``` - -A solution with a question mark operator `'?'`: - -```js -function min(a, b) { - return a < b ? a : b; -} -``` - -P.S. In the case of an equality `a == b` it does not matter what to return. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md deleted file mode 100644 index 50edd0d36f..0000000000 --- a/1-js/02-first-steps/15-function-basics/3-min/task.md +++ /dev/null @@ -1,16 +0,0 @@ -importance: 1 - ---- - -# Function min(a, b) - -Write a function `min(a,b)` which returns the least of two numbers `a` and `b`. - -For instance: - -```js -min(2, 5) == 2 -min(3, -1) == -1 -min(1, 1) == 1 -``` - diff --git a/1-js/02-first-steps/15-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md deleted file mode 100644 index 19fe9011fc..0000000000 --- a/1-js/02-first-steps/15-function-basics/4-pow/solution.md +++ /dev/null @@ -1,21 +0,0 @@ - -```js run demo -function pow(x, n) { - let result = x; - - for (let i = 1; i < n; i++) { - result *= x; - } - - return result; -} - -let x = prompt("x?", ''); -let n = prompt("n?", ''); - -if (n < 1) { - alert(`Power ${n} is not supported, use a positive integer`); -} else { - alert( pow(x, n) ); -} -``` diff --git a/1-js/02-first-steps/15-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md deleted file mode 100644 index f569320c7f..0000000000 --- a/1-js/02-first-steps/15-function-basics/4-pow/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 4 - ---- - -# Function pow(x,n) - -Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result. - -```js -pow(3, 2) = 3 * 3 = 9 -pow(3, 3) = 3 * 3 * 3 = 27 -pow(1, 100) = 1 * 1 * ...* 1 = 1 -``` - -Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`. - -[demo] - -P.S. In this task the function should support only natural values of `n`: integers up from `1`. diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md deleted file mode 100644 index b56fbc67d5..0000000000 --- a/1-js/02-first-steps/15-function-basics/article.md +++ /dev/null @@ -1,488 +0,0 @@ -# Functions - -Quite often we need to perform a similar action in many places of the script. - -For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else. - -Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition. - -We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well. - -## Function Declaration - -To create a function we can use a *function declaration*. - -It looks like this: - -```js -function showMessage() { - alert( 'Hello everyone!' ); -} -``` - -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) and finally the code of the function, also named "the function body", between curly braces. - -```js -function name(parameters) { - ...body... -} -``` - -Our new function can be called by its name: `showMessage()`. - -For instance: - -```js run -function showMessage() { - alert( 'Hello everyone!' ); -} - -*!* -showMessage(); -showMessage(); -*/!* -``` - -The call `showMessage()` executes the code of the function. Here we will see the message two times. - -This example clearly demonstrates one of the main purposes of functions: to avoid code duplication. - -If we ever need to change the message or the way it is shown, it's enough to modify the code in one place: the function which outputs it. - -## Local variables - -A variable declared inside a function is only visible inside that function. - -For example: - -```js run -function showMessage() { -*!* - let message = "Hello, I'm JavaScript!"; // local variable -*/!* - - alert( message ); -} - -showMessage(); // Hello, I'm JavaScript! - -alert( message ); // <-- Error! The variable is local to the function -``` - -## Outer variables - -A function can access an outer variable as well, for example: - -```js run no-beautify -let *!*userName*/!* = 'John'; - -function showMessage() { - let message = 'Hello, ' + *!*userName*/!*; - alert(message); -} - -showMessage(); // Hello, John -``` - -The function has full access to the outer variable. It can modify it as well. - -For instance: - -```js run -let *!*userName*/!* = 'John'; - -function showMessage() { - *!*userName*/!* = "Bob"; // (1) changed the outer variable - - let message = 'Hello, ' + *!*userName*/!*; - alert(message); -} - -alert( userName ); // *!*John*/!* before the function call - -showMessage(); - -alert( userName ); // *!*Bob*/!*, the value was modified by the function -``` - -The outer variable is only used if there's no local one. - -If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored: - -```js run -let userName = 'John'; - -function showMessage() { -*!* - let userName = "Bob"; // declare a local variable -*/!* - - let message = 'Hello, ' + userName; // *!*Bob*/!* - alert(message); -} - -// the function will create and use its own userName -showMessage(); - -alert( userName ); // *!*John*/!*, unchanged, the function did not access the outer variable -``` - -```smart header="Global variables" -Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*. - -Global variables are visible from any function (unless shadowed by locals). - -It's a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data. -``` - -## Parameters - -We can pass arbitrary data to functions using parameters (also called *function arguments*) . - -In the example below, the function has two parameters: `from` and `text`. - -```js run -function showMessage(*!*from, text*/!*) { // arguments: from, text - alert(from + ': ' + text); -} - -*!* -showMessage('Ann', 'Hello!'); // Ann: Hello! (*) -showMessage('Ann', "What's up?"); // Ann: What's up? (**) -*/!* -``` - -When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them. - -Here's one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value: - - -```js run -function showMessage(from, text) { - -*!* - from = '*' + from + '*'; // make "from" look nicer -*/!* - - alert( from + ': ' + text ); -} - -let from = "Ann"; - -showMessage(from, "Hello"); // *Ann*: Hello - -// the value of "from" is the same, the function modified a local copy -alert( from ); // Ann -``` - -## Default values - -If a parameter is not provided, then its value becomes `undefined`. - -For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument: - -```js -showMessage("Ann"); -``` - -That's not an error. Such a call would output `"Ann: undefined"`. There's no `text`, so it's assumed that `text === undefined`. - -If we want to use a "default" `text` in this case, then we can specify it after `=`: - -```js run -function showMessage(from, *!*text = "no text given"*/!*) { - alert( from + ": " + text ); -} - -showMessage("Ann"); // Ann: no text given -``` - -Now if the `text` parameter is not passed, it will get the value `"no text given"` - -Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible: - -```js run -function showMessage(from, text = anotherFunction()) { - // anotherFunction() only executed if no text given - // its result becomes the value of text -} -``` - -```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()` is called every time `showMessage()` is called without the `text` parameter. -``` - -### Alternative default parameters - -Sometimes it makes sense to set default values for parameters not in the function declaration, but at a later stage, during its execution. - -To check for an omitted parameter, we can compare it with `undefined`: - -```js run -function showMessage(text) { -*!* - if (text === undefined) { - text = 'empty message'; - } -*/!* - - alert(text); -} - -showMessage(); // empty message -``` - -...Or we could use the `||` operator: - -```js -// if text parameter is omitted or "" is passed, set it to 'empty' -function showMessage(text) { - text = text || 'empty'; - ... -} -``` - -Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when falsy values, such as `0`, are considered regular: - -```js run -// if there's no "count" parameter, show "unknown" -function showCount(count) { - alert(count ?? "unknown"); -} - -showCount(0); // 0 -showCount(null); // unknown -showCount(); // unknown -``` - -## Returning a value - -A function can return a value back into the calling code as the result. - -The simplest example would be a function that sums two values: - -```js run no-beautify -function sum(a, b) { - *!*return*/!* a + b; -} - -let result = sum(1, 2); -alert( result ); // 3 -``` - -The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above). - -There may be many occurrences of `return` in a single function. For instance: - -```js run -function checkAge(age) { - if (age >= 18) { -*!* - return true; -*/!* - } else { -*!* - return confirm('Do you have permission from your parents?'); -*/!* - } -} - -let age = prompt('How old are you?', 18); - -if ( checkAge(age) ) { - alert( 'Access granted' ); -} else { - alert( 'Access denied' ); -} -``` - -It is possible to use `return` without a value. That causes the function to exit immediately. - -For example: - -```js -function showMovie(age) { - if ( !checkAge(age) ) { -*!* - return; -*/!* - } - - alert( "Showing you the movie" ); // (*) - // ... -} -``` - -In the code above, if `checkAge(age)` returns `false`, then `showMovie` won't proceed to the `alert`. - -````smart header="A function with an empty `return` or without it returns `undefined`" -If a function does not return a value, it is the same as if it returns `undefined`: - -```js run -function doNothing() { /* empty */ } - -alert( doNothing() === undefined ); // true -``` - -An empty `return` is also the same as `return undefined`: - -```js run -function doNothing() { - return; -} - -alert( doNothing() === undefined ); // true -``` -```` - -````warn header="Never add a newline between `return` and the value" -For a long expression in `return`, it might be tempting to put it on a separate line, like this: - -```js -return - (some + long + expression + or + whatever * f(a) + f(b)) -``` -That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as: - -```js -return*!*;*/!* - (some + long + expression + or + whatever * f(a) + f(b)) -``` - -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. -```` - -## Naming a function [#function-naming] - -Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does. - -It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes. - -For instance, functions that start with `"show"` usually show something. - -Function starting with... - -- `"get…"` -- return a value, -- `"calc…"` -- calculate something, -- `"create…"` -- create something, -- `"check…"` -- check something and return a boolean, etc. - -Examples of such names: - -```js no-beautify -showMessage(..) // shows a message -getAge(..) // returns the age (gets it somehow) -calcSum(..) // calculates a sum and returns the result -createForm(..) // creates a form (and usually returns it) -checkPermission(..) // checks a permission, returns true/false -``` - -With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns. - -```smart header="One function -- one action" -A function should do exactly what is suggested by its name, no more. - -Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two). - -A few examples of breaking this rule: - -- `getAge` -- would be bad if it shows an `alert` with the age (should only get). -- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return). -- `checkPermission` -- would be bad if it displays the `access granted/denied` message (should only perform the check and return the result). - -These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they're not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge. -``` - -```smart header="Ultrashort function names" -Functions that are used *very often* sometimes have ultrashort names. - -For example, the [jQuery](http://jquery.com) framework defines a function with `$`. The [Lodash](http://lodash.com/) library has its core function named `_`. - -These are exceptions. Generally functions names should be concise and descriptive. -``` - -## Functions == Comments - -Functions should be short and do exactly one thing. If that thing is big, maybe it's worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but it's definitely a good thing. - -A separate function is not only easier to test and debug -- its very existence is a great comment! - -For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`. - -The first variant uses a label: - -```js -function showPrimes(n) { - nextPrime: for (let i = 2; i < n; i++) { - - for (let j = 2; j < i; j++) { - if (i % j == 0) continue nextPrime; - } - - alert( i ); // a prime - } -} -``` - -The second variant uses an additional function `isPrime(n)` to test for primality: - -```js -function showPrimes(n) { - - for (let i = 2; i < n; i++) { - *!*if (!isPrime(i)) continue;*/!* - - alert(i); // a prime - } -} - -function isPrime(n) { - for (let i = 2; i < n; i++) { - if ( n % i == 0) return false; - } - return true; -} -``` - -The second variant is easier to understand, isn't it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*. - -So, functions can be created even if we don't intend to reuse them. They structure the code and make it readable. - -## Summary - -A function declaration looks like this: - -```js -function name(parameters, delimited, by, comma) { - /* code */ -} -``` - -- Values passed to a function as parameters are copied to its local variables. -- A function may access outer variables. But it works only from inside out. The code outside of the function doesn't see its local variables. -- A function can return a value. If it doesn't, then its result is `undefined`. - -To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables. - -It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side-effect. - -Function naming: - -- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns. -- A function is an action, so function names are usually verbal. -- There exist many well-known function prefixes like `create…`, `show…`, `get…`, `check…` and so on. Use them to hint what a function does. - -Functions are the main building blocks of scripts. Now we've covered the basics, so we actually can start creating and using them. But that's only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md deleted file mode 100644 index a8ccd6c6c8..0000000000 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ /dev/null @@ -1,368 +0,0 @@ -# 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 deleted file mode 100644 index 3ea1124739..0000000000 --- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md +++ /dev/null @@ -1,17 +0,0 @@ - -```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 deleted file mode 100644 index 2f44db27e4..0000000000 --- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md +++ /dev/null @@ -1,17 +0,0 @@ - -# 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 deleted file mode 100644 index e0fb5bda58..0000000000 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ /dev/null @@ -1,111 +0,0 @@ -# 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 deleted file mode 100644 index 91be0aa454..0000000000 --- a/1-js/02-first-steps/18-javascript-specials/article.md +++ /dev/null @@ -1,284 +0,0 @@ -# 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/Reference/Operators/Bitwise_Operators) 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. 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/02-first-steps/index.md b/1-js/02-first-steps/index.md deleted file mode 100644 index 31281656f8..0000000000 --- a/1-js/02-first-steps/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# JavaScript Fundamentals - -Let's learn the fundamentals of script building. \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md deleted file mode 100644 index ee7dea4c40..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ /dev/null @@ -1,196 +0,0 @@ -# Debugging in Chrome - -Before writing more complex code, let's talk about debugging. - -[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 - -Your Chrome version may look a little bit different, but it still should be obvious what's there. - -- 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. - -Here's what you should see if you are doing it for the first time: - -![](chrome-open-sources.svg) - -The toggler button opens the tab with files. - -Let's click it and select `hello.js` in the tree view. Here's what should show up: - -![](chrome-tabs.svg) - -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. - -## Console - -If we press `key:Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute. - -After a statement is executed, its result is shown below. - -For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`: - -![](chrome-sources-console.svg) - -## Breakpoints - -Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. - -Congratulations! You've set a breakpoint. Please also click on the number for line `8`. - -It should look like this (blue is where you should click): - -![](chrome-sources-breakpoint.svg) - -A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. - -While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it. - -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. - -```smart header="Conditional breakpoints" -*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy. - -That's handy when we need to stop only for a certain variable value or for certain function parameters. -``` - -## Debugger command - -We can also pause the code by using the `debugger` command in it, like this: - -```js -function hello(name) { - let phrase = `Hello, ${name}!`; - -*!* - debugger; // <-- the debugger stops here -*/!* - - say(phrase); -} -``` - -That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint. - - -## Pause and look around - -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). - -As the breakpoint is set, the execution pauses at the 4th line: - -![](chrome-sources-debugger-pause.svg) - -Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state: - -1. **`Watch` -- shows current values for any expressions.** - - You can click the plus `+` and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution. - -2. **`Call Stack` -- shows the nested calls chain.** - - At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous"). - - 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.** - - `Local` shows local function variables. You can also see their values highlighted right over the source. - - `Global` has global variables (out of any functions). - - There's also `this` keyword there that we didn't study yet, but we'll do that soon. - -## Tracing the execution - -Now it's time to *trace* the script. - -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. - - Here's what we can see after a click on it: - - ![](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 the "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. -``` - -## Logging - -To output something to console from our code, there's `console.log` function. - -For instance, this outputs values from `0` to `4` to console: - -```js run -// open console to see -for (let i = 0; i < 5; i++) { - console.log("value,", i); -} -``` - -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. - -## Summary - -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. - -There are many more options in developer tools than covered here. The full manual is at . - -The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools. - -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! diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg deleted file mode 100644 index 1f7d21288c..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg +++ /dev/null @@ -1 +0,0 @@ -open sources \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg deleted file mode 100644 index 6fb4332f1d..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg +++ /dev/null @@ -1 +0,0 @@ -here's the listbreakpoints \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg deleted file mode 100644 index 25284d055d..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg deleted file mode 100644 index 40d9515ab8..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg +++ /dev/null @@ -1 +0,0 @@ -213see the outer call detailswatch expressionscurrent variables \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg deleted file mode 100644 index 0d5bde9c41..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg +++ /dev/null @@ -1 +0,0 @@ -nested calls \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg deleted file mode 100644 index 352fbcb7c3..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg +++ /dev/null @@ -1 +0,0 @@ -213 \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js b/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js deleted file mode 100644 index 4236740e8c..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js +++ /dev/null @@ -1,9 +0,0 @@ -function hello(name) { - let phrase = `Hello, ${name}!`; - - say(phrase); -} - -function say(phrase) { - alert(`** ${phrase} **`); -} diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html deleted file mode 100644 index 6c651e854d..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - An example for debugging. - - - - - diff --git a/1-js/03-code-quality/01-debugging-chrome/head.html b/1-js/03-code-quality/01-debugging-chrome/head.html deleted file mode 100644 index 615326c08e..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/head.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/1-js/03-code-quality/01-debugging-chrome/largeIcons.svg b/1-js/03-code-quality/01-debugging-chrome/largeIcons.svg deleted file mode 100644 index 83303365bd..0000000000 --- a/1-js/03-code-quality/01-debugging-chrome/largeIcons.svg +++ /dev/null @@ -1,1472 +0,0 @@ - - - - - - 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/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md deleted file mode 100644 index 4facc8b291..0000000000 --- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md +++ /dev/null @@ -1,48 +0,0 @@ - -You could note the following: - -```js no-beautify -function pow(x,n) // <- no space between arguments -{ // <- figure bracket on a separate line - let result=1; // <- no spaces before or after = - for(let i=0;i - -Now let's discuss the rules and reasons for them in detail. - -```warn header="There are no \"you must\" rules" -Nothing is set in stone here. These are style preferences, not religious dogmas. -``` - -### Curly Braces - -In most JavaScript projects curly braces are written in "Egyptian" style with the opening brace on the same line as the corresponding keyword -- not on a new line. There should also be a space before the opening bracket, like this: - -```js -if (condition) { - // do this - // ...and that - // ...and that -} -``` - -A single-line construct, such as `if (condition) doSomething()`, is an important edge case. Should we use braces at all? - -Here are the annotated variants so you can judge their readability for yourself: - -1. 😠 Beginners sometimes do that. Bad! Curly braces are not needed: - ```js - if (n < 0) *!*{*/!*alert(`Power ${n} is not supported`);*!*}*/!* - ``` -2. 😠 Split to a separate line without braces. Never do that, easy to make an error when adding new lines: - ```js - if (n < 0) - alert(`Power ${n} is not supported`); - ``` -3. 😏 One line without braces - acceptable, if it's short: - ```js - if (n < 0) alert(`Power ${n} is not supported`); - ``` -4. 😃 The best variant: - ```js - if (n < 0) { - alert(`Power ${n} is not supported`); - } - ``` - -For a very brief code, one line is allowed, e.g. `if (cond) return null`. But a code block (the last variant) is usually more readable. - -### Line Length - -No one likes to read a long horizontal line of code. It's best practice to split them. - -For example: -```js -// backtick quotes ` allow to split the string into multiple lines -let str = ` - ECMA International's TC39 is a group of JavaScript developers, - implementers, academics, and more, collaborating with the community - to maintain and evolve the definition of JavaScript. -`; -``` - -And, for `if` statements: - -```js -if ( - id === 123 && - moonPhase === 'Waning Gibbous' && - zodiacSign === 'Libra' -) { - letTheSorceryBegin(); -} -``` - -The maximum line length should be agreed upon at the team-level. It's usually 80 or 120 characters. - -### Indents - -There are two types of indents: - -- **Horizontal indents: 2 or 4 spaces.** - - A horizontal indentation is made using either 2 or 4 spaces or the horizontal tab symbol (key `key:Tab`). Which one to choose is an old holy war. Spaces are more common nowadays. - - One advantage of spaces over tabs is that spaces allow more flexible configurations of indents than the tab symbol. - - For instance, we can align the arguments with the opening bracket, like this: - - ```js no-beautify - show(parameters, - aligned, // 5 spaces padding at the left - one, - after, - another - ) { - // ... - } - ``` - -- **Vertical indents: empty lines for splitting code into logical blocks.** - - Even a single function can often be divided into logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically: - - ```js - function pow(x, n) { - let result = 1; - // <-- - for (let i = 0; i < n; i++) { - result *= x; - } - // <-- - return result; - } - ``` - - Insert an extra newline where it helps to make the code more readable. There should not be more than nine lines of code without a vertical indentation. - -### Semicolons - -A semicolon should be present after each statement, even if it could possibly be skipped. - -There are languages where a semicolon is truly optional and it is rarely used. In JavaScript, though, there are cases where a line break is not interpreted as a semicolon, leaving the code vulnerable to errors. See more about that in the chapter . - -If you're an experienced JavaScript programmer, you may choose a no-semicolon code style like [StandardJS](https://standardjs.com/). Otherwise, it's best to use semicolons to avoid possible pitfalls. The majority of developers put semicolons. - -### Nesting Levels - -Try to avoid nesting code too many levels deep. - -For example, in the loop, it's sometimes a good idea to use the [`continue`](info:while-for#continue) directive to avoid extra nesting. - -For example, instead of adding a nested `if` conditional like this: - -```js -for (let i = 0; i < 10; i++) { - if (cond) { - ... // <- one more nesting level - } -} -``` - -We can write: - -```js -for (let i = 0; i < 10; i++) { - if (!cond) *!*continue*/!*; - ... // <- no extra nesting level -} -``` - -A similar thing can be done with `if/else` and `return`. - -For example, two constructs below are identical. - -Option 1: - -```js -function pow(x, n) { - if (n < 0) { - alert("Negative 'n' not supported"); - } else { - let result = 1; - - for (let i = 0; i < n; i++) { - result *= x; - } - - return result; - } -} -``` - -Option 2: - -```js -function pow(x, n) { - if (n < 0) { - alert("Negative 'n' not supported"); - return; - } - - let result = 1; - - for (let i = 0; i < n; i++) { - result *= x; - } - - return result; -} -``` - -The second one is more readable because the "special case" of `n < 0` is handled early on. Once the check is done we can move on to the "main" code flow without the need for additional nesting. - -## Function Placement - -If you are writing several "helper" functions and the code that uses them, there are three ways to organize the functions. - -1. Declare the functions *above* the code that uses them: - - ```js - // *!*function declarations*/!* - function createElement() { - ... - } - - function setHandler(elem) { - ... - } - - function walkAround() { - ... - } - - // *!*the code which uses them*/!* - let elem = createElement(); - setHandler(elem); - walkAround(); - ``` -2. Code first, then functions - - ```js - // *!*the code which uses the functions*/!* - let elem = createElement(); - setHandler(elem); - walkAround(); - - // --- *!*helper functions*/!* --- - function createElement() { - ... - } - - function setHandler(elem) { - ... - } - - function walkAround() { - ... - } - ``` -3. Mixed: a function is declared where it's first used. - -Most of time, the second variant is preferred. - -That's because when reading code, we first want to know *what it does*. If the code goes first, then it becomes clear from the start. Then, maybe we won't need to read the functions at all, especially if their names are descriptive of what they actually do. - -## Style Guides - -A style guide contains general rules about "how to write" code, e.g. which quotes to use, how many spaces to indent, the maximal line length, etc. A lot of minor things. - -When all members of a team use the same style guide, the code looks uniform, regardless of which team member wrote it. - -Of course, a team can always write their own style guide, but usually there's no need to. There are many existing guides to choose from. - -Some popular choices: - -- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) -- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) -- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js) -- [StandardJS](https://standardjs.com/) -- (plus many more) - -If you're a novice developer, start with the cheat sheet at the beginning of this chapter. Then you can browse other style guides to pick up more ideas and decide which one you like best. - -## Automated Linters - -Linters are tools that can automatically check the style of your code and make improving suggestions. - -The great thing about them is that style-checking can also find some bugs, like typos in variable or function names. Because of this feature, using a linter is recommended even if you don't want to stick to one particular "code style". - -Here are some well-known linting tools: - -- [JSLint](http://www.jslint.com/) -- one of the first linters. -- [JSHint](http://www.jshint.com/) -- more settings than JSLint. -- [ESLint](http://eslint.org/) -- probably the newest one. - -All of them can do the job. The author uses [ESLint](http://eslint.org/). - -Most linters are integrated with many popular editors: just enable the plugin in the editor and configure the style. - -For instance, for ESLint you should do the following: - -1. Install [Node.js](https://nodejs.org/). -2. Install ESLint with the command `npm install -g eslint` (npm is a JavaScript package installer). -3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files). -4. Install/enable the plugin for your editor that integrates with ESLint. The majority of editors have one. - -Here's an example of an `.eslintrc` file: - -```js -{ - "extends": "eslint:recommended", - "env": { - "browser": true, - "node": true, - "es6": true - }, - "rules": { - "no-console": 0, - "indent": ["warning", 2] - } -} -``` - -Here the directive `"extends"` denotes that the configuration is based on the "eslint:recommended" set of settings. After that, we specify our own. - -It is also possible to download style rule sets from the web and extend them instead. See for more details about installation. - -Also certain IDEs have built-in linting, which is convenient but not as customizable as ESLint. - -## Summary - -All syntax rules described in this chapter (and in the style guides referenced) aim to increase the readability of your code. All of them are debatable. - -When we think about writing "better" code, the questions we should ask ourselves are: "What makes the code more readable and easier to understand?" and "What can help us avoid errors?" These are the main things to keep in mind when choosing and debating code styles. - -Reading popular style guides will allow you to keep up to date with the latest ideas about code style trends and best practices. diff --git a/1-js/03-code-quality/02-coding-style/code-style.svg b/1-js/03-code-quality/02-coding-style/code-style.svg deleted file mode 100644 index bd62691c62..0000000000 --- a/1-js/03-code-quality/02-coding-style/code-style.svg +++ /dev/null @@ -1 +0,0 @@ -2No space between the function name and parentheses between the parentheses and the parameterIndentation 2 spacesA space after for/if/while…} else { without a line breakSpaces around a nested callAn empty line between logical blocksLines are not very longA semicolon ; is mandatorySpaces around operatorsCurly brace { on the same line, after a spaceA space between parametersA space between parameters \ No newline at end of file diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md deleted file mode 100644 index 0d11c6c520..0000000000 --- a/1-js/03-code-quality/03-comments/article.md +++ /dev/null @@ -1,180 +0,0 @@ -# Comments - -As we know from the chapter , comments can be single-line: starting with `//` and multiline: `/* ... */`. - -We normally use them to describe how and why the code works. - -At first sight, commenting might be obvious, but novices in programming often use them wrongly. - -## Bad comments - -Novices tend to use comments to explain "what is going on in the code". Like this: - -```js -// This code will do this thing (...) and that thing (...) -// ...and who knows what else... -very; -complex; -code; -``` - -But in good code, the amount of such "explanatory" comments should be minimal. Seriously, the code should be easy to understand without them. - -There's a great rule about that: "if the code is so unclear that it requires a comment, then maybe it should be rewritten instead". - -### Recipe: factor out functions - -Sometimes it's beneficial to replace a code piece with a function, like here: - -```js -function showPrimes(n) { - nextPrime: - for (let i = 2; i < n; i++) { - -*!* - // check if i is a prime number - for (let j = 2; j < i; j++) { - if (i % j == 0) continue nextPrime; - } -*/!* - - alert(i); - } -} -``` - -The better variant, with a factored out function `isPrime`: - - -```js -function showPrimes(n) { - - for (let i = 2; i < n; i++) { - *!*if (!isPrime(i)) continue;*/!* - - alert(i); - } -} - -function isPrime(n) { - for (let i = 2; i < n; i++) { - if (n % i == 0) return false; - } - - return true; -} -``` - -Now we can understand the code easily. The function itself becomes the comment. Such code is called *self-descriptive*. - -### Recipe: create functions - -And if we have a long "code sheet" like this: - -```js -// here we add whiskey -for(let i = 0; i < 10; i++) { - let drop = getWhiskey(); - smell(drop); - add(drop, glass); -} - -// here we add juice -for(let t = 0; t < 3; t++) { - let tomato = getTomato(); - examine(tomato); - let juice = press(tomato); - add(juice, glass); -} - -// ... -``` - -Then it might be a better variant to refactor it into functions like: - -```js -addWhiskey(glass); -addJuice(glass); - -function addWhiskey(container) { - for(let i = 0; i < 10; i++) { - let drop = getWhiskey(); - //... - } -} - -function addJuice(container) { - for(let t = 0; t < 3; t++) { - let tomato = getTomato(); - //... - } -} -``` - -Once again, functions themselves tell what's going on. There's nothing to comment. And also the code structure is better when split. It's clear what every function does, what it takes and what it returns. - -In reality, we can't totally avoid "explanatory" comments. There are complex algorithms. And there are smart "tweaks" for purposes of optimization. But generally we should try to keep the code simple and self-descriptive. - -## Good comments - -So, explanatory comments are usually bad. Which comments are good? - -Describe the architecture -: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) to build high-level architecture diagrams explaining the code. Definitely worth studying. - -Document function parameters and usage -: There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value. - -For instance: -```js -/** - * Returns x raised to the n-th power. - * - * @param {number} x The number to raise. - * @param {number} n The power, must be a natural number. - * @return {number} x raised to the n-th power. - */ -function pow(x, n) { - ... -} -``` - -Such comments allow us to understand the purpose of the function and use it the right way without looking in its code. - -By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking. - -Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at . - -Why is the task solved this way? -: What's written is important. But what's *not* written may be even more important to understand what's going on. Why is the task solved exactly this way? The code gives no answer. - - If there are many ways to solve the task, why this one? Especially when it's not the most obvious one. - - Without such comments the following situation is possible: - 1. You (or your colleague) open the code written some time ago, and see that it's "suboptimal". - 2. You think: "How stupid I was then, and how much smarter I'm now", and rewrite using the "more obvious and correct" variant. - 3. ...The urge to rewrite was good. But in the process you see that the "more obvious" solution is actually lacking. You even dimly remember why, because you already tried it long ago. You revert to the correct variant, but the time was wasted. - - Comments that explain the solution are very important. They help to continue development the right way. - -Any subtle features of the code? Where they are used? -: If the code has anything subtle and counter-intuitive, it's definitely worth commenting. - -## Summary - -An important sign of a good developer is comments: their presence and even their absence. - -Good comments allow us to maintain the code well, come back to it after a delay and use it more effectively. - -**Comment this:** - -- Overall architecture, high-level view. -- Function usage. -- Important solutions, especially when not immediately obvious. - -**Avoid comments:** - -- That tell "how code works" and "what it does". -- Put them in only if it's impossible to make the code so simple and self-descriptive that it doesn't require them. - -Comments are also used for auto-documenting tools like JSDoc3: they read them and generate HTML-docs (or docs in another format). diff --git a/1-js/03-code-quality/04-ninja-code/article.md b/1-js/03-code-quality/04-ninja-code/article.md deleted file mode 100644 index 982cc0214a..0000000000 --- a/1-js/03-code-quality/04-ninja-code/article.md +++ /dev/null @@ -1,240 +0,0 @@ -# Ninja code - - -```quote author="Confucius" -Learning without thought is labor lost; thought without learning is perilous. -``` - -Programmer ninjas of the past used these tricks to sharpen the mind of code maintainers. - -Code review gurus look for them in test tasks. - -Novice developers sometimes use them even better than programmer ninjas. - -Read them carefully and find out who you are -- a ninja, a novice, or maybe a code reviewer? - - -```warn header="Irony detected" -Many try to follow ninja paths. Few succeed. -``` - - -## Brevity is the soul of wit - -Make the code as short as possible. Show how smart you are. - -Let subtle language features guide you. - -For instance, take a look at this ternary operator `'?'`: - -```js -// taken from a well-known javascript library -i = i ? i < 0 ? Math.max(0, len + i) : i : 0; -``` - -Cool, right? If you write like that, a developer who comes across this line and tries to understand what is the value of `i` is going to have a merry time. Then come to you, seeking for an answer. - -Tell them that shorter is always better. Initiate them into the paths of ninja. - -## One-letter variables - -```quote author="Laozi (Tao Te Ching)" -The Dao hides in wordlessness. Only the Dao is well begun and well -completed. -``` - -Another way to code shorter is to use single-letter variable names everywhere. Like `a`, `b` or `c`. - -A short variable disappears in the code like a real ninja in the forest. No one will be able to find it using "search" of the editor. And even if someone does, they won't be able to "decipher" what the name `a` or `b` means. - -...But there's an exception. A real ninja will never use `i` as the counter in a `"for"` loop. Anywhere, but not here. Look around, there are many more exotic letters. For instance, `x` or `y`. - -An exotic variable as a loop counter is especially cool if the loop body takes 1-2 pages (make it longer if you can). Then if someone looks deep inside the loop, they won't be able to quickly figure out that the variable named `x` is the loop counter. - -## Use abbreviations - -If the team rules forbid the use of one-letter and vague names -- shorten them, make abbreviations. - -Like this: - -- `list` -> `lst`. -- `userAgent` -> `ua`. -- `browser` -> `brsr`. -- ...etc - -Only the one with truly good intuition will be able to understand such names. Try to shorten everything. Only a worthy person should be able to uphold the development of your code. - -## Soar high. Be abstract. - -```quote author="Laozi (Tao Te Ching)" -The great square is cornerless
-The great vessel is last complete,
-The great note is rarified sound,
-The great image has no form. -``` - -While choosing a name try to use the most abstract word. Like `obj`, `data`, `value`, `item`, `elem` and so on. - -- **The ideal name for a variable is `data`.** Use it everywhere you can. Indeed, every variable holds *data*, right? - - ...But what to do if `data` is already taken? Try `value`, it's also universal. After all, a variable eventually gets a *value*. - -- **Name a variable by its type: `str`, `num`...** - - Give them a try. A young initiate may wonder -- are such names really useful for a ninja? Indeed, they are! - - Sure, the variable name still means something. It says what's inside the variable: a string, a number or something else. But when an outsider tries to understand the code, they'll be surprised to see that there's actually no information at all! And will ultimately fail to alter your well-thought code. - - The value type is easy to find out by debugging. But what's the meaning of the variable? Which string/number does it store? - - There's just no way to figure out without a good meditation! - -- **...But what if there are no more such names?** Just add a number: `data1, item2, elem5`... - -## Attention test - -Only a truly attentive programmer should be able to understand your code. But how to check that? - -**One of the ways -- use similar variable names, like `date` and `data`.** - -Mix them where you can. - -A quick read of such code becomes impossible. And when there's a typo... Ummm... We're stuck for long, time to drink tea. - - -## Smart synonyms - -```quote author="Confucius" -The hardest thing of all is to find a black cat in a dark room, especially if there is no cat. -``` - -Using *similar* names for *same* things makes life more interesting and shows your creativity to the public. - -For instance, consider function prefixes. If a function shows a message on the screen -- start it with `display…`, like `displayMessage`. And then if another function shows on the screen something else, like a user name, start it with `show…` (like `showName`). - -Insinuate that there's a subtle difference between such functions, while there is none. - -Make a pact with fellow ninjas of the team: if John starts "showing" functions with `display...` in his code, then Peter could use `render..`, and Ann -- `paint...`. Note how much more interesting and diverse the code became. - -...And now the hat trick! - -For two functions with important differences -- use the same prefix! - -For instance, the function `printPage(page)` will use a printer. And the function `printText(text)` will put the text on-screen. Let an unfamiliar reader think well over similarly named function `printMessage`: "Where does it put the message? To a printer or on the screen?". To make it really shine, `printMessage(message)` should output it in the new window! - -## Reuse names - -```quote author="Laozi (Tao Te Ching)" -Once the whole is divided, the parts
-need names.
-There are already enough names.
-One must know when to stop. -``` - -Add a new variable only when absolutely necessary. - -Instead, reuse existing names. Just write new values into them. - -In a function try to use only variables passed as parameters. - -That would make it really hard to identify what's exactly in the variable *now*. And also where it comes from. The purpose is to develop the intuition and memory of a person reading the code. A person with weak intuition would have to analyze the code line-by-line and track the changes through every code branch. - -**An advanced variant of the approach is to covertly (!) replace the value with something alike in the middle of a loop or a function.** - -For instance: - -```js -function ninjaFunction(elem) { - // 20 lines of code working with elem - - elem = clone(elem); - - // 20 more lines, now working with the clone of the elem! -} -``` - -A fellow programmer who wants to work with `elem` in the second half of the function will be surprised... Only during the debugging, after examining the code they will find out that they're working with a clone! - -Seen in code regularly. Deadly effective even against an experienced ninja. - -## Underscores for fun - -Put underscores `_` and `__` before variable names. Like `_name` or `__value`. It would be great if only you knew their meaning. Or, better, add them just for fun, without particular meaning at all. Or different meanings in different places. - -You kill two rabbits with one shot. First, the code becomes longer and less readable, and the second, a fellow developer may spend a long time trying to figure out what the underscores mean. - -A smart ninja puts underscores at one spot of code and evades them at other places. That makes the code even more fragile and increases the probability of future errors. - -## Show your love - -Let everyone see how magnificent your entities are! Names like `superElement`, `megaFrame` and `niceItem` will definitely enlighten a reader. - -Indeed, from one hand, something is written: `super..`, `mega..`, `nice..` But from the other hand -- that brings no details. A reader may decide to look for a hidden meaning and meditate for an hour or two of their paid working time. - - -## Overlap outer variables - -```quote author="Guan Yin Zi" -When in the light, can't see anything in the darkness.
-When in the darkness, can see everything in the light. -``` - -Use same names for variables inside and outside a function. As simple. No efforts to invent new names. - -```js -let *!*user*/!* = authenticateUser(); - -function render() { - let *!*user*/!* = anotherValue(); - ... - ...many lines... - ... - ... // <-- a programmer wants to work with user here and... - ... -} -``` - -A programmer who jumps inside the `render` will probably fail to notice that there's a local `user` shadowing the outer one. - -Then they'll try to work with `user` assuming that it's the external variable, the result of `authenticateUser()`... The trap is sprung! Hello, debugger... - - -## Side-effects everywhere! - -There are functions that look like they don't change anything. Like `isReady()`, `checkPermission()`, `findTags()`... They are assumed to carry out calculations, find and return the data, without changing anything outside of them. In other words, without "side-effects". - -**A really beautiful trick is to add a "useful" action to them, besides the main task.** - -An expression of dazed surprise on the face of your colleague when they see a function named `is..`, `check..` or `find...` changing something -- will definitely broaden your boundaries of reason. - -**Another way to surprise is to return a non-standard result.** - -Show your original thinking! Let the call of `checkPermission` return not `true/false`, but a complex object with the results of the check. - -Those developers who try to write `if (checkPermission(..))`, will wonder why it doesn't work. Tell them: "Read the docs!". And give this article. - - -## Powerful functions! - -```quote author="Laozi (Tao Te Ching)" -The great Tao flows everywhere,
-both to the left and to the right. -``` - -Don't limit the function by what's written in its name. Be broader. - -For instance, a function `validateEmail(email)` could (besides checking the email for correctness) show an error message and ask to re-enter the email. - -Additional actions should not be obvious from the function name. A true ninja coder will make them not obvious from the code as well. - -**Joining several actions into one protects your code from reuse.** - -Imagine, another developer wants only to check the email, and not output any message. Your function `validateEmail(email)` that does both will not suit them. So they won't break your meditation by asking anything about it. - -## Summary - -All "pieces of advice" above are from the real code... Sometimes, written by experienced developers. Maybe even more experienced than you are ;) - -- Follow some of them, and your code will become full of surprises. -- Follow many of them, and your code will become truly yours, no one would want to change it. -- Follow all, and your code will become a valuable lesson for young developers looking for enlightenment. diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md deleted file mode 100644 index 4d0571b9d8..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md +++ /dev/null @@ -1,50 +0,0 @@ -The test demonstrates one of the temptations a developer meets when writing tests. - -What we have here is actually 3 tests, but layed out as a single function with 3 asserts. - -Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong. - -If an error happens in the middle of a complex execution flow, then we'll have to figure out the data at that point. We'll actually have to *debug the test*. - -It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs. - -Like this: -```js -describe("Raises x to power n", function() { - it("5 in the power of 1 equals 5", function() { - assert.equal(pow(5, 1), 5); - }); - - it("5 in the power of 2 equals 25", function() { - assert.equal(pow(5, 2), 25); - }); - - it("5 in the power of 3 equals 125", function() { - assert.equal(pow(5, 3), 125); - }); -}); -``` - -We replaced the single `it` with `describe` and a group of `it` blocks. Now if something fails we would see clearly what the data was. - -Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`: - - -```js -describe("Raises x to power n", function() { - it("5 in the power of 1 equals 5", function() { - assert.equal(pow(5, 1), 5); - }); - -*!* - // Mocha will run only this block - it.only("5 in the power of 2 equals 25", function() { - assert.equal(pow(5, 2), 25); - }); -*/!* - - it("5 in the power of 3 equals 125", function() { - assert.equal(pow(5, 3), 125); - }); -}); -``` diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md deleted file mode 100644 index 66fece09a8..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# What's wrong in the test? - -What's wrong in the test of `pow` below? - -```js -it("Raises x to the power n", function() { - let x = 5; - - let result = x; - assert.equal(pow(x, 1), result); - - result *= x; - assert.equal(pow(x, 2), result); - - result *= x; - assert.equal(pow(x, 3), result); -}); -``` - -P.S. Syntactically the test is correct and passes. diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md deleted file mode 100644 index 68ffcae4db..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ /dev/null @@ -1,409 +0,0 @@ -# Automated testing with Mocha - -Automated testing will be used in further tasks, and it's also widely used in real projects. - -## Why we need tests? - -When we write a function, we can usually imagine what it should do: which parameters give which results. - -During development, we can check the function by running it and comparing the outcome with the expected one. For instance, we can do it in the console. - -If something is wrong -- then we fix the code, run again, check the result -- and so on till it works. - -But such manual "re-runs" are imperfect. - -**When testing a code by manual re-runs, it's easy to miss something.** - -For instance, we're creating a function `f`. Wrote some code, testing: `f(1)` works, but `f(2)` doesn't work. We fix the code and now `f(2)` works. Looks complete? But we forgot to re-test `f(1)`. That may lead to an error. - -That's very typical. When we develop something, we keep a lot of possible use cases in mind. But it's hard to expect a programmer to check all of them manually after every change. So it becomes easy to fix one thing and break another one. - -**Automated testing means that tests are written separately, in addition to the code. They run our functions in various ways and compare results with the expected.** - -## Behavior Driven Development (BDD) - -Let's start with a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD. - -**BDD is three things in one: tests AND documentation AND examples.** - -To understand BDD, we'll examine a practical case of development. - -## Development of "pow": the spec - -Let's say we want to make a function `pow(x, n)` that raises `x` to an integer power `n`. We assume that `n≥0`. - -That task is just an example: there's the `**` operator in JavaScript that can do that, but here we concentrate on the development flow that can be applied to more complex tasks as well. - -Before creating the code of `pow`, we can imagine what the function should do and describe it. - -Such description is called a *specification* or, in short, a spec, and contains descriptions of use cases together with tests for them, like this: - -```js -describe("pow", function() { - - it("raises to n-th power", function() { - assert.equal(pow(2, 3), 8); - }); - -}); -``` - -A spec has three main building blocks that you can see above: - -`describe("title", function() { ... })` -: What functionality we're describing. In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. - -`it("use case description", function() { ... })` -: In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it. - -`assert.equal(value1, value2)` -: The code inside `it` block, if the implementation is correct, should execute without errors. - - Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later. - -The specification can be executed, and it will run the test specified in `it` block. We'll see that later. - -## The development flow - -The flow of development usually looks like this: - -1. An initial spec is written, with tests for the most basic functionality. -2. An initial implementation is created. -3. To check whether it works, we run the testing framework [Mocha](http://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works. -4. Now we have a working initial implementation with tests. -5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail. -6. Go to 3, update the implementation till tests give no errors. -7. Repeat steps 3-6 till the functionality is ready. - -So, the development is *iterative*. We write the spec, implement it, make sure tests pass, then write more tests, make sure they work etc. At the end we have both a working implementation and tests for it. - -Let's see this development flow in our practical case. - -The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail). - -## The spec in action - -Here in the tutorial we'll be using the following JavaScript libraries for tests: - -- [Mocha](http://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests. -- [Chai](http://chaijs.com) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`. -- [Sinon](http://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later. - -These libraries are suitable for both in-browser and server-side testing. Here we'll consider the browser variant. - -The full HTML page with these frameworks and `pow` spec: - -```html src="http://github.com/index.html" -``` - -The page can be divided into five parts: - -1. The `` -- add third-party libraries and styles for tests. -2. The ` - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js deleted file mode 100644 index d3de82546d..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js +++ /dev/null @@ -1,18 +0,0 @@ -describe("test", function() { - - // Mocha usually waits for the tests for 2 seconds before considering them wrong - - this.timeout(200000); // With this code we increase this - in this case to 200,000 milliseconds - - // This is because of the "alert" function, because if you delay pressing the "OK" button the tests will not pass! - - before(() => alert("Testing started – before all tests")); - after(() => alert("Testing finished – after all tests")); - - beforeEach(() => alert("Before a test – enter a test")); - afterEach(() => alert("After a test – exit a test")); - - it('test 1', () => alert(1)); - it('test 2', () => alert(2)); - -}); diff --git a/1-js/03-code-quality/05-testing-mocha/index.html b/1-js/03-code-quality/05-testing-mocha/index.html deleted file mode 100644 index 28a2ea62b4..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html deleted file mode 100644 index e48a8d3a25..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js deleted file mode 100644 index 89ba412ed5..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js +++ /dev/null @@ -1,7 +0,0 @@ -describe("pow", function() { - - it("raises to n-th power", function() { - assert.equal(pow(2, 3), 8); - }); - -}); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html deleted file mode 100644 index e8d6be23d5..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js deleted file mode 100644 index c803f0e619..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js +++ /dev/null @@ -1,11 +0,0 @@ -describe("pow", function() { - - it("2 raised to power 3 is 8", function() { - assert.equal(pow(2, 3), 8); - }); - - it("3 raised to power 4 is 81", function() { - assert.equal(pow(3, 4), 81); - }); - -}); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html deleted file mode 100644 index c71b0d5d50..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js deleted file mode 100644 index 8663952aac..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js +++ /dev/null @@ -1,14 +0,0 @@ -describe("pow", function() { - - function makeTest(x) { - let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { - assert.equal(pow(x, 3), expected); - }); - } - - for (let x = 1; x <= 5; x++) { - makeTest(x); - } - -}); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html deleted file mode 100644 index c71b0d5d50..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js deleted file mode 100644 index e5ce2ce433..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js +++ /dev/null @@ -1,19 +0,0 @@ -describe("pow", function() { - - describe("raises x to power 3", function() { - - function makeTest(x) { - let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { - assert.equal(pow(x, 3), expected); - }); - } - - for (let x = 1; x <= 5; x++) { - makeTest(x); - } - - }); - - // ... more tests to follow here, both describe and it can be added -}); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html deleted file mode 100644 index 076b1e5a90..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js deleted file mode 100644 index 75ff5e99fd..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js +++ /dev/null @@ -1,26 +0,0 @@ -describe("pow", function() { - - describe("raises x to power 3", function() { - - function makeTest(x) { - let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { - assert.equal(pow(x, 3), expected); - }); - } - - for (let x = 1; x <= 5; x++) { - makeTest(x); - } - - }); - - it("if n is negative, the result is NaN", function() { - assert.isNaN(pow(2, -1)); - }); - - it("if n is not integer, the result is NaN", function() { - assert.isNaN(pow(2, 1.5)); - }); - -}); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html deleted file mode 100644 index d82a79dca2..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js deleted file mode 100644 index 89ba412ed5..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js +++ /dev/null @@ -1,7 +0,0 @@ -describe("pow", function() { - - it("raises to n-th power", function() { - assert.equal(pow(2, 3), 8); - }); - -}); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html deleted file mode 100644 index 523ae25ec0..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js deleted file mode 100644 index 75ff5e99fd..0000000000 --- a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js +++ /dev/null @@ -1,26 +0,0 @@ -describe("pow", function() { - - describe("raises x to power 3", function() { - - function makeTest(x) { - let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { - assert.equal(pow(x, 3), expected); - }); - } - - for (let x = 1; x <= 5; x++) { - makeTest(x); - } - - }); - - it("if n is negative, the result is NaN", function() { - assert.isNaN(pow(2, -1)); - }); - - it("if n is not integer, the result is NaN", function() { - assert.isNaN(pow(2, 1.5)); - }); - -}); diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md deleted file mode 100644 index 75db49d2f7..0000000000 --- a/1-js/03-code-quality/06-polyfills/article.md +++ /dev/null @@ -1,54 +0,0 @@ - -# Polyfills - -The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm). - -Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do. - -So it's quite common for an engine to implement only the part of the standard. - -A good page to see the current state of support for language features is (it's big, we have a lot to study yet). - -## Babel - -When we use modern features of the language, some engines may fail to support such code. Just as said, not all features are implemented everywhere. - -Here Babel comes to the rescue. - -[Babel](https://babeljs.io) is a [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler). It rewrites modern JavaScript code into the previous standard. - -Actually, there are two parts in Babel: - -1. First, the transpiler program, which rewrites the code. The developer runs it on their own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build systems like [webpack](http://webpack.github.io/) provide means to run transpiler automatically on every code change, so that it's very easy to integrate into development process. - -2. Second, the polyfill. - - New language features may include new built-in functions and syntax constructs. - The transpiler rewrites the code, transforming syntax constructs into older ones. But as for new built-in functions, we need to implement them. JavaScript is a highly dynamic language, scripts may add/modify any functions, so that they behave according to the modern standard. - - A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. - - Two interesting polyfills are: - - [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features. - - [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser. - -So, if we're going to use modern language features, a transpiler and a polyfill are necessary. - -## Examples in the tutorial - - -````online -Most examples are runnable at-place, like this: - -```js run -alert('Press the "Play" button in the upper-right corner to run'); -``` - -Examples that use modern JS will work only if your browser supports it. -```` - -```offline -As you're reading the offline version, in PDF examples are not runnable. In EPUB some of them can run. -``` - -Google Chrome is usually the most up-to-date with language features, good to run bleeding-edge demos without any transpilers, but other modern browsers also work fine. diff --git a/1-js/03-code-quality/index.md b/1-js/03-code-quality/index.md deleted file mode 100644 index 2ef64fa690..0000000000 --- a/1-js/03-code-quality/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Code quality - -This chapter explains coding practices that we'll use further in the development. diff --git a/1-js/04-object-basics/01-object/2-hello-object/solution.md b/1-js/04-object-basics/01-object/2-hello-object/solution.md deleted file mode 100644 index 60083b9630..0000000000 --- a/1-js/04-object-basics/01-object/2-hello-object/solution.md +++ /dev/null @@ -1,10 +0,0 @@ - - -```js -let user = {}; -user.name = "John"; -user.surname = "Smith"; -user.name = "Pete"; -delete user.name; -``` - diff --git a/1-js/04-object-basics/01-object/2-hello-object/task.md b/1-js/04-object-basics/01-object/2-hello-object/task.md deleted file mode 100644 index 2841a058f1..0000000000 --- a/1-js/04-object-basics/01-object/2-hello-object/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Hello, object - -Write the code, one line for each action: - -1. Create an empty object `user`. -2. Add the property `name` with the value `John`. -3. Add the property `surname` with the value `Smith`. -4. Change the value of the `name` to `Pete`. -5. Remove the property `name` from the object. - diff --git a/1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js b/1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js deleted file mode 100644 index db3283e49a..0000000000 --- a/1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js +++ /dev/null @@ -1,7 +0,0 @@ -function isEmpty(obj) { - for (let key in obj) { - // if the loop has started, there is a property - return false; - } - return true; -} diff --git a/1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js b/1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js deleted file mode 100644 index 4db5efabee..0000000000 --- a/1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js +++ /dev/null @@ -1,11 +0,0 @@ -describe("isEmpty", function() { - it("returns true for an empty object", function() { - assert.isTrue(isEmpty({})); - }); - - it("returns false if a property exists", function() { - assert.isFalse(isEmpty({ - anything: false - })); - }); -}); \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/3-is-empty/solution.md b/1-js/04-object-basics/01-object/3-is-empty/solution.md deleted file mode 100644 index b876973b5e..0000000000 --- a/1-js/04-object-basics/01-object/3-is-empty/solution.md +++ /dev/null @@ -1 +0,0 @@ -Just loop over the object and `return false` immediately if there's at least one property. diff --git a/1-js/04-object-basics/01-object/3-is-empty/task.md b/1-js/04-object-basics/01-object/3-is-empty/task.md deleted file mode 100644 index c438d36a2d..0000000000 --- a/1-js/04-object-basics/01-object/3-is-empty/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 5 - ---- - -# Check for emptiness - -Write the function `isEmpty(obj)` which returns `true` if the object has no properties, `false` otherwise. - -Should work like that: - -```js -let schedule = {}; - -alert( isEmpty(schedule) ); // true - -schedule["8:30"] = "get up"; - -alert( isEmpty(schedule) ); // false -``` - diff --git a/1-js/04-object-basics/01-object/5-sum-object/solution.md b/1-js/04-object-basics/01-object/5-sum-object/solution.md deleted file mode 100644 index 63df878493..0000000000 --- a/1-js/04-object-basics/01-object/5-sum-object/solution.md +++ /dev/null @@ -1,16 +0,0 @@ - -```js run -let salaries = { - John: 100, - Ann: 160, - Pete: 130 -}; - -let sum = 0; -for (let key in salaries) { - sum += salaries[key]; -} - -alert(sum); // 390 -``` - diff --git a/1-js/04-object-basics/01-object/5-sum-object/task.md b/1-js/04-object-basics/01-object/5-sum-object/task.md deleted file mode 100644 index 7e3e048d0d..0000000000 --- a/1-js/04-object-basics/01-object/5-sum-object/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 5 - ---- - -# Sum object properties - -We have an object storing salaries of our team: - -```js -let salaries = { - John: 100, - Ann: 160, - Pete: 130 -} -``` - -Write the code to sum all salaries and store in the variable `sum`. Should be `390` in the example above. - -If `salaries` is empty, then the result must be `0`. \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js deleted file mode 100644 index 4668c1dc0a..0000000000 --- a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js +++ /dev/null @@ -1,7 +0,0 @@ -function multiplyNumeric(obj) { - for (let key in obj) { - if (typeof obj[key] == 'number') { - obj[key] *= 2; - } - } -} \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js deleted file mode 100644 index a02b1e1cb7..0000000000 --- a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js +++ /dev/null @@ -1,17 +0,0 @@ -let menu = { - width: 200, - height: 300, - title: "My menu" -}; - - -function multiplyNumeric(obj) { - - /* your code */ - -} - -multiplyNumeric(menu); - -alert( "menu width=" + menu.width + " height=" + menu.height + " title=" + menu.title ); - diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js b/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js deleted file mode 100644 index 064e5414ff..0000000000 --- a/1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js +++ /dev/null @@ -1,18 +0,0 @@ -describe("multiplyNumeric", function() { - it("multiplies all numeric properties by 2", function() { - let menu = { - width: 200, - height: 300, - title: "My menu" - }; - let result = multiplyNumeric(menu); - assert.equal(menu.width, 400); - assert.equal(menu.height, 600); - assert.equal(menu.title, "My menu"); - }); - - it("returns nothing", function() { - assert.isUndefined( multiplyNumeric({}) ); - }); - -}); diff --git a/1-js/04-object-basics/01-object/8-multiply-numeric/task.md b/1-js/04-object-basics/01-object/8-multiply-numeric/task.md deleted file mode 100644 index 33eb89220c..0000000000 --- a/1-js/04-object-basics/01-object/8-multiply-numeric/task.md +++ /dev/null @@ -1,33 +0,0 @@ -importance: 3 - ---- - -# Multiply numeric properties by 2 - -Create a function `multiplyNumeric(obj)` that multiplies all numeric properties of `obj` by `2`. - -For instance: - -```js -// before the call -let menu = { - width: 200, - height: 300, - title: "My menu" -}; - -multiplyNumeric(menu); - -// after the call -menu = { - width: 400, - height: 600, - title: "My menu" -}; -``` - -Please note that `multiplyNumeric` does not need to return anything. It should modify the object in-place. - -P.S. Use `typeof` to check for a number here. - - diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md deleted file mode 100644 index 513f2f3e31..0000000000 --- a/1-js/04-object-basics/01-object/article.md +++ /dev/null @@ -1,526 +0,0 @@ - -# Objects - -As we know from the chapter , there are eight data types in JavaScript. Seven of them are called "primitive", because their values contain only a single thing (be it a string or a number or whatever). - -In contrast, objects are used to store keyed collections of various data and more complex entities. In JavaScript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else. - -An object can be created with figure brackets `{…}` with an optional list of *properties*. A property is a "key: value" pair, where `key` is a string (also called a "property name"), and `value` can be anything. - -We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file. - -![](object.svg) - -An empty object ("empty cabinet") can be created using one of two syntaxes: - -```js -let user = new Object(); // "object constructor" syntax -let user = {}; // "object literal" syntax -``` - -![](object-user-empty.svg) - -Usually, the figure brackets `{...}` are used. That declaration is called an *object literal*. - -## Literals and properties - -We can immediately put some properties into `{...}` as "key: value" pairs: - -```js -let user = { // an object - name: "John", // by key "name" store value "John" - age: 30 // by key "age" store value 30 -}; -``` - -A property has a key (also known as "name" or "identifier") before the colon `":"` and a value to the right of it. - -In the `user` object, there are two properties: - -1. The first property has the name `"name"` and the value `"John"`. -2. The second one has the name `"age"` and the value `30`. - -The resulting `user` object can be imagined as a cabinet with two signed files labeled "name" and "age". - -![user object](object-user.svg) - -We can add, remove and read files from it any time. - -Property values are accessible using the dot notation: - -```js -// get property values of the object: -alert( user.name ); // John -alert( user.age ); // 30 -``` - -The value can be of any type. Let's add a boolean one: - -```js -user.isAdmin = true; -``` - -![user object 2](object-user-isadmin.svg) - -To remove a property, we can use `delete` operator: - -```js -delete user.age; -``` - -![user object 3](object-user-delete.svg) - -We can also use multiword property names, but then they must be quoted: - -```js -let user = { - name: "John", - age: 30, - "likes birds": true // multiword property name must be quoted -}; -``` - -![](object-user-props.svg) - - -The last property in the list may end with a comma: -```js -let user = { - name: "John", - age: 30*!*,*/!* -} -``` -That is called a "trailing" or "hanging" comma. Makes it easier to add/remove/move around properties, because all lines become alike. - -````smart header="Object with const can be changed" -Please note: an object declared as `const` *can* be modified. - -For instance: - -```js run -const user = { - name: "John" -}; - -*!* -user.name = "Pete"; // (*) -*/!* - -alert(user.name); // Pete -``` - -It might seem that the line `(*)` would cause an error, but no. The `const` fixes the value of `user`, but not its contents. - -The `const` would give an error only if we try to set `user=...` as a whole. - -There's another way to make constant object properties, we'll cover it later in the chapter . -```` - -## Square brackets - -For multiword properties, the dot access doesn't work: - -```js run -// this would give a syntax error -user.likes birds = true -``` - -JavaScript doesn't understand that. It thinks that we address `user.likes`, and then gives a syntax error when comes across unexpected `birds`. - -The dot requires the key to be a valid variable identifier. That implies: contains no spaces, doesn't start with a digit and doesn't include special characters (`$` and `_` are allowed). - -There's an alternative "square bracket notation" that works with any string: - -```js run -let user = {}; - -// set -user["likes birds"] = true; - -// get -alert(user["likes birds"]); // true - -// delete -delete user["likes birds"]; -``` - -Now everything is fine. Please note that the string inside the brackets is properly quoted (any type of quotes will do). - -Square brackets also provide a way to obtain the property name as the result of any expression -- as opposed to a literal string -- like from a variable as follows: - -```js -let key = "likes birds"; - -// same as user["likes birds"] = true; -user[key] = true; -``` - -Here, the variable `key` may be calculated at run-time or depend on the user input. And then we use it to access the property. That gives us a great deal of flexibility. - -For instance: - -```js run -let user = { - name: "John", - age: 30 -}; - -let key = prompt("What do you want to know about the user?", "name"); - -// access by variable -alert( user[key] ); // John (if enter "name") -``` - -The dot notation cannot be used in a similar way: - -```js run -let user = { - name: "John", - age: 30 -}; - -let key = "name"; -alert( user.key ) // undefined -``` - -### Computed properties - -We can use square brackets in an object literal, when creating an object. That's called *computed properties*. - -For instance: - -```js run -let fruit = prompt("Which fruit to buy?", "apple"); - -let bag = { -*!* - [fruit]: 5, // the name of the property is taken from the variable fruit -*/!* -}; - -alert( bag.apple ); // 5 if fruit="apple" -``` - -The meaning of a computed property is simple: `[fruit]` means that the property name should be taken from `fruit`. - -So, if a visitor enters `"apple"`, `bag` will become `{apple: 5}`. - -Essentially, that works the same as: -```js run -let fruit = prompt("Which fruit to buy?", "apple"); -let bag = {}; - -// take property name from the fruit variable -bag[fruit] = 5; -``` - -...But looks nicer. - -We can use more complex expressions inside square brackets: - -```js -let fruit = 'apple'; -let bag = { - [fruit + 'Computers']: 5 // bag.appleComputers = 5 -}; -``` - -Square brackets are much more powerful than the dot notation. They allow any property names and variables. But they are also more cumbersome to write. - -So most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we switch to square brackets. - -## Property value shorthand - -In real code we often use existing variables as values for property names. - -For instance: - -```js run -function makeUser(name, age) { - return { - name: name, - age: age, - // ...other properties - }; -} - -let user = makeUser("John", 30); -alert(user.name); // John -``` - -In the example above, properties have the same names as variables. The use-case of making a property from a variable is so common, that there's a special *property value shorthand* to make it shorter. - -Instead of `name:name` we can just write `name`, like this: - -```js -function makeUser(name, age) { -*!* - return { - name, // same as name: name - age, // same as age: age - // ... - }; -*/!* -} -``` - -We can use both normal properties and shorthands in the same object: - -```js -let user = { - name, // same as name:name - age: 30 -}; -``` - - -## Property names limitations - -As we already know, a variable cannot have a name equal to one of language-reserved words like "for", "let", "return" etc. - -But for an object property, there's no such restriction: - -```js run -// these properties are all right -let obj = { - for: 1, - let: 2, - return: 3 -}; - -alert( obj.for + obj.let + obj.return ); // 6 -``` - -In short, there are no limitations on property names. They can be any strings or symbols (a special type for identifiers, to be covered later). - -Other types are automatically converted to strings. - -For instance, a number `0` becomes a string `"0"` when used as a property key: - -```js run -let obj = { - 0: "test" // same as "0": "test" -}; - -// both alerts access the same property (the number 0 is converted to string "0") -alert( obj["0"] ); // test -alert( obj[0] ); // test (same property) -``` - -There's a minor gotcha with a special property named `__proto__`. We can't set it to a non-object value: - -```js run -let obj = {}; -obj.__proto__ = 5; // assign a number -alert(obj.__proto__); // [object Object] - the value is an object, didn't work as intended -``` - -As we see from the code, the assignment to a primitive `5` is ignored. - -We'll cover the special nature of `__proto__` in [subsequent chapters](info:prototype-inheritance), and suggest the [ways to fix](info:prototype-methods) such behavior. - -## Property existence test, "in" operator - -A notable feature of objects in JavaScript, compared to many other languages, is that it's possible to access any property. There will be no error if the property doesn't exist! - -Reading a non-existing property just returns `undefined`. So we can easily test whether the property exists: - -```js run -let user = {}; - -alert( user.noSuchProperty === undefined ); // true means "no such property" -``` - -There's also a special operator `"in"` for that. - -The syntax is: -```js -"key" in object -``` - -For instance: - -```js run -let user = { name: "John", age: 30 }; - -alert( "age" in user ); // true, user.age exists -alert( "blabla" in user ); // false, user.blabla doesn't exist -``` - -Please note that on the left side of `in` there must be a *property name*. That's usually a quoted string. - -If we omit quotes, that means a variable, it should contain the actual name to be tested. For instance: - -```js run -let user = { age: 30 }; - -let key = "age"; -alert( *!*key*/!* in user ); // true, property "age" exists -``` - -Why does the `in` operator exist? Isn't it enough to compare against `undefined`? - -Well, most of the time the comparison with `undefined` works fine. But there's a special case when it fails, but `"in"` works correctly. - -It's when an object property exists, but stores `undefined`: - -```js run -let obj = { - test: undefined -}; - -alert( obj.test ); // it's undefined, so - no such property? - -alert( "test" in obj ); // true, the property does exist! -``` - -In the code above, the property `obj.test` technically exists. So the `in` operator works right. - -Situations like this happen very rarely, because `undefined` should not be explicitly assigned. We mostly use `null` for "unknown" or "empty" values. So the `in` operator is an exotic guest in the code. - - -## The "for..in" loop - -To walk over all keys of an object, there exists a special form of the loop: `for..in`. This is a completely different thing from the `for(;;)` construct that we studied before. - -The syntax: - -```js -for (key in object) { - // executes the body for each key among object properties -} -``` - -For instance, let's output all properties of `user`: - -```js run -let user = { - name: "John", - age: 30, - isAdmin: true -}; - -for (let key in user) { - // keys - alert( key ); // name, age, isAdmin - // values for the keys - alert( user[key] ); // John, 30, true -} -``` - -Note that all "for" constructs allow us to declare the looping variable inside the loop, like `let key` here. - -Also, we could use another variable name here instead of `key`. For instance, `"for (let prop in obj)"` is also widely used. - -### Ordered like an object - -Are objects ordered? In other words, if we loop over an object, do we get all properties in the same order they were added? Can we rely on this? - -The short answer is: "ordered in a special fashion": integer properties are sorted, others appear in creation order. The details follow. - -As an example, let's consider an object with the phone codes: - -```js run -let codes = { - "49": "Germany", - "41": "Switzerland", - "44": "Great Britain", - // .., - "1": "USA" -}; - -*!* -for (let code in codes) { - alert(code); // 1, 41, 44, 49 -} -*/!* -``` - -The object may be used to suggest a list of options to the user. If we're making a site mainly for German audience then we probably want `49` to be the first. - -But if we run the code, we see a totally different picture: - -- USA (1) goes first -- then Switzerland (41) and so on. - -The phone codes go in the ascending sorted order, because they are integers. So we see `1, 41, 44, 49`. - -````smart header="Integer properties? What's that?" -The "integer property" term here means a string that can be converted to-and-from an integer without a change. - -So, "49" is an integer property name, because when it's transformed to an integer number and back, it's still the same. But "+49" and "1.2" are not: - -```js run -// Math.trunc is a built-in function that removes the decimal part -alert( String(Math.trunc(Number("49"))) ); // "49", same, integer property -alert( String(Math.trunc(Number("+49"))) ); // "49", not same "+49" ⇒ not integer property -alert( String(Math.trunc(Number("1.2"))) ); // "1", not same "1.2" ⇒ not integer property -``` -```` - -...On the other hand, if the keys are non-integer, then they are listed in the creation order, for instance: - -```js run -let user = { - name: "John", - surname: "Smith" -}; -user.age = 25; // add one more - -*!* -// non-integer properties are listed in the creation order -*/!* -for (let prop in user) { - alert( prop ); // name, surname, age -} -``` - -So, to fix the issue with the phone codes, we can "cheat" by making the codes non-integer. Adding a plus `"+"` sign before each code is enough. - -Like this: - -```js run -let codes = { - "+49": "Germany", - "+41": "Switzerland", - "+44": "Great Britain", - // .., - "+1": "USA" -}; - -for (let code in codes) { - alert( +code ); // 49, 41, 44, 1 -} -``` - -Now it works as intended. - -## Summary - -Objects are associative arrays with several special features. - -They store properties (key-value pairs), where: -- Property keys must be strings or symbols (usually strings). -- Values can be of any type. - -To access a property, we can use: -- The dot notation: `obj.property`. -- Square brackets notation `obj["property"]`. Square brackets allow to take the key from a variable, like `obj[varWithKey]`. - -Additional operators: -- To delete a property: `delete obj.prop`. -- To check if a property with the given key exists: `"key" in obj`. -- To iterate over an object: `for (let key in obj)` loop. - -What we've studied in this chapter is called a "plain object", or just `Object`. - -There are many other kinds of objects in JavaScript: - -- `Array` to store ordered data collections, -- `Date` to store the information about the date and time, -- `Error` to store the information about an error. -- ...And so on. - -They have their special features that we'll study later. Sometimes people say something like "Array type" or "Date type", but formally they are not types of their own, but belong to a single "object" data type. And they extend it in various ways. - -Objects in JavaScript are very powerful. Here we've just scratched the surface of a topic that is really huge. We'll be closely working with objects and learning more about them in further parts of the tutorial. diff --git a/1-js/04-object-basics/01-object/object-user-delete.svg b/1-js/04-object-basics/01-object/object-user-delete.svg deleted file mode 100644 index 4bbf324b4f..0000000000 --- a/1-js/04-object-basics/01-object/object-user-delete.svg +++ /dev/null @@ -1 +0,0 @@ -nameisAdminuser \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-empty.svg b/1-js/04-object-basics/01-object/object-user-empty.svg deleted file mode 100644 index 5359c45cb4..0000000000 --- a/1-js/04-object-basics/01-object/object-user-empty.svg +++ /dev/null @@ -1 +0,0 @@ -emptyuser \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-isadmin.svg b/1-js/04-object-basics/01-object/object-user-isadmin.svg deleted file mode 100644 index f4e7b09aea..0000000000 --- a/1-js/04-object-basics/01-object/object-user-isadmin.svg +++ /dev/null @@ -1 +0,0 @@ -nameageisAdminuser \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-props.svg b/1-js/04-object-basics/01-object/object-user-props.svg deleted file mode 100644 index 92958cfbec..0000000000 --- a/1-js/04-object-basics/01-object/object-user-props.svg +++ /dev/null @@ -1 +0,0 @@ -nameagelikes birdsuser \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user.svg b/1-js/04-object-basics/01-object/object-user.svg deleted file mode 100644 index f91e48143e..0000000000 --- a/1-js/04-object-basics/01-object/object-user.svg +++ /dev/null @@ -1 +0,0 @@ -nameageuser \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object.svg b/1-js/04-object-basics/01-object/object.svg deleted file mode 100644 index 28582b94eb..0000000000 --- a/1-js/04-object-basics/01-object/object.svg +++ /dev/null @@ -1 +0,0 @@ -key1key2key3 \ No newline at end of file diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md deleted file mode 100644 index c888722326..0000000000 --- a/1-js/04-object-basics/02-object-copy/article.md +++ /dev/null @@ -1,228 +0,0 @@ -# Object copying, references - -One of the fundamental differences of objects vs primitives is that they are stored and copied "by reference". - -Primitive values: strings, numbers, booleans -- are assigned/copied "as a whole value". - -For instance: - -```js -let message = "Hello!"; -let phrase = message; -``` - -As a result we have two independent variables, each one is storing the string `"Hello!"`. - -![](variable-copy-value.svg) - -Objects are not like that. - -**A variable stores not the object itself, but its "address in memory", in other words "a reference" to it.** - -Here's the picture for the object: - -```js -let user = { - name: "John" -}; -``` - -![](variable-contains-reference.svg) - -Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it. - -**When an object variable is copied -- the reference is copied, the object is not duplicated.** - -For instance: - -```js no-beautify -let user = { name: "John" }; - -let admin = user; // copy the reference -``` - -Now we have two variables, each one with the reference to the same object: - -![](variable-copy-reference.svg) - -We can use any variable to access the object and modify its contents: - -```js run -let user = { name: 'John' }; - -let admin = user; - -*!* -admin.name = 'Pete'; // changed by the "admin" reference -*/!* - -alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference -``` - -The example above demonstrates that there is only one object. As if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use another key (`user`) we can see changes. - -## Comparison by reference - -The equality `==` and strict equality `===` operators for objects work exactly the same. - -**Two objects are equal only if they are the same object.** - -Here two variables reference the same object, thus they are equal: - -```js run -let a = {}; -let b = a; // copy the reference - -alert( a == b ); // true, both variables reference the same object -alert( a === b ); // true -``` - -And here two independent objects are not equal, even though both are empty: - -```js run -let a = {}; -let b = {}; // two independent objects - -alert( a == b ); // false -``` - -For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons occur very rarely, usually as a result of a coding mistake. - -## Cloning and merging, Object.assign - -So, copying an object variable creates one more reference to the same object. - -But what if we need to duplicate an object? Create an independent copy, a clone? - -That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. Actually, that's rarely needed. Copying by reference is good most of the time. - -But if we really want that, then we need to create a new object and replicate the structure of the existing one by iterating over its properties and copying them on the primitive level. - -Like this: - -```js run -let user = { - name: "John", - age: 30 -}; - -*!* -let clone = {}; // the new empty object - -// let's copy all user properties into it -for (let key in user) { - clone[key] = user[key]; -} -*/!* - -// now clone is a fully independent object with the same content -clone.name = "Pete"; // changed the data in it - -alert( user.name ); // still John in the original object -``` - -Also we can use the method [Object.assign](mdn:js/Object/assign) for that. - -The syntax is: - -```js -Object.assign(dest, [src1, src2, src3...]) -``` - -- The first argument `dest` is a target object. -- Further arguments `src1, ..., srcN` (can be as many as needed) are source objects. -- It copies the properties of all source objects `src1, ..., srcN` into the target `dest`. In other words, properties of all arguments starting from the second are copied into the first object. -- The call returns `dest`. - -For instance, we can use it to merge several objects into one: -```js -let user = { name: "John" }; - -let permissions1 = { canView: true }; -let permissions2 = { canEdit: true }; - -*!* -// copies all properties from permissions1 and permissions2 into user -Object.assign(user, permissions1, permissions2); -*/!* - -// now user = { name: "John", canView: true, canEdit: true } -``` - -If the copied property name already exists, it gets overwritten: - -```js run -let user = { name: "John" }; - -Object.assign(user, { name: "Pete" }); - -alert(user.name); // now user = { name: "Pete" } -``` - -We also can use `Object.assign` to replace `for..in` loop for simple cloning: - -```js -let user = { - name: "John", - age: 30 -}; - -*!* -let clone = Object.assign({}, user); -*/!* -``` - -It copies all properties of `user` into the empty object and returns it. - -## Nested cloning - -Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects. What to do with them? - -Like this: -```js run -let user = { - name: "John", - sizes: { - height: 182, - width: 50 - } -}; - -alert( user.sizes.height ); // 182 -``` - -Now it's not enough to copy `clone.sizes = user.sizes`, because the `user.sizes` is an object, it will be copied by reference. So `clone` and `user` will share the same sizes: - -Like this: - -```js run -let user = { - name: "John", - sizes: { - height: 182, - width: 50 - } -}; - -let clone = Object.assign({}, user); - -alert( user.sizes === clone.sizes ); // true, same object - -// user and clone share sizes -user.sizes.width++; // change a property from one place -alert(clone.sizes.width); // 51, see the result from the other one -``` - -To fix that, we should use the cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning". - -There's a standard algorithm for deep cloning that handles the case above and more complex cases, called the [Structured cloning algorithm](https://html.spec.whatwg.org/multipage/structured-data.html#safe-passing-of-structured-data). - -We can use recursion to implement it. Or, not to reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com). - -## Summary - -Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object. - -All operations via copied references (like adding/removing properties) are performed on the same single object. - -To make a "real copy" (a clone) we can use `Object.assign` for the so-called "shallow copy" (nested objects are copied by reference) or a "deep cloning" function, such as [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep). diff --git a/1-js/04-object-basics/02-object-copy/variable-contains-reference.svg b/1-js/04-object-basics/02-object-copy/variable-contains-reference.svg deleted file mode 100644 index a59c9210ea..0000000000 --- a/1-js/04-object-basics/02-object-copy/variable-contains-reference.svg +++ /dev/null @@ -1 +0,0 @@ -username \ No newline at end of file diff --git a/1-js/04-object-basics/02-object-copy/variable-copy-reference.svg b/1-js/04-object-basics/02-object-copy/variable-copy-reference.svg deleted file mode 100644 index 5d0bc15944..0000000000 --- a/1-js/04-object-basics/02-object-copy/variable-copy-reference.svg +++ /dev/null @@ -1 +0,0 @@ -useradminname \ No newline at end of file diff --git a/1-js/04-object-basics/02-object-copy/variable-copy-value.svg b/1-js/04-object-basics/02-object-copy/variable-copy-value.svg deleted file mode 100644 index e09f521fea..0000000000 --- a/1-js/04-object-basics/02-object-copy/variable-copy-value.svg +++ /dev/null @@ -1 +0,0 @@ -"Hello!"message"Hello!"phrase \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/article.md b/1-js/04-object-basics/03-garbage-collection/article.md deleted file mode 100644 index e20e5a5d88..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/article.md +++ /dev/null @@ -1,212 +0,0 @@ -# Garbage collection - -Memory management in JavaScript is performed automatically and invisibly to us. We create primitives, objects, functions... All that takes memory. - -What happens when something is not needed any more? How does the JavaScript engine discover it and clean it up? - -## Reachability - -The main concept of memory management in JavaScript is *reachability*. - -Simply put, "reachable" values are those that are accessible or usable somehow. They are guaranteed to be stored in memory. - -1. There's a base set of inherently reachable values, that cannot be deleted for obvious reasons. - - For instance: - - - Local variables and parameters of the current function. - - Variables and parameters for other functions on the current chain of nested calls. - - Global variables. - - (there are some other, internal ones as well) - - These values are called *roots*. - -2. Any other value is considered reachable if it's reachable from a root by a reference or by a chain of references. - - For instance, if there's an object in a global variable, and that object has a property referencing another object, that object is considered reachable. And those that it references are also reachable. Detailed examples to follow. - -There's a background process in the JavaScript engine that is called [garbage collector](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)). It monitors all objects and removes those that have become unreachable. - -## A simple example - -Here's the simplest example: - -```js -// user has a reference to the object -let user = { - name: "John" -}; -``` - -![](memory-user-john.svg) - -Here the arrow depicts an object reference. The global variable `"user"` references the object `{name: "John"}` (we'll call it John for brevity). The `"name"` property of John stores a primitive, so it's painted inside the object. - -If the value of `user` is overwritten, the reference is lost: - -```js -user = null; -``` - -![](memory-user-john-lost.svg) - -Now John becomes unreachable. There's no way to access it, no references to it. Garbage collector will junk the data and free the memory. - -## Two references - -Now let's imagine we copied the reference from `user` to `admin`: - -```js -// user has a reference to the object -let user = { - name: "John" -}; - -*!* -let admin = user; -*/!* -``` - -![](memory-user-john-admin.svg) - -Now if we do the same: -```js -user = null; -``` - -...Then the object is still reachable via `admin` global variable, so it's in memory. If we overwrite `admin` too, then it can be removed. - -## Interlinked objects - -Now a more complex example. The family: - -```js -function marry(man, woman) { - woman.husband = man; - man.wife = woman; - - return { - father: man, - mother: woman - } -} - -let family = marry({ - name: "John" -}, { - name: "Ann" -}); -``` - -Function `marry` "marries" two objects by giving them references to each other and returns a new object that contains them both. - -The resulting memory structure: - -![](family.svg) - -As of now, all objects are reachable. - -Now let's remove two references: - -```js -delete family.father; -delete family.mother.husband; -``` - -![](family-delete-refs.svg) - -It's not enough to delete only one of these two references, because all objects would still be reachable. - -But if we delete both, then we can see that John has no incoming reference any more: - -![](family-no-father.svg) - -Outgoing references do not matter. Only incoming ones can make an object reachable. So, John is now unreachable and will be removed from the memory with all its data that also became unaccessible. - -After garbage collection: - -![](family-no-father-2.svg) - -## Unreachable island - -It is possible that the whole island of interlinked objects becomes unreachable and is removed from the memory. - -The source object is the same as above. Then: - -```js -family = null; -``` - -The in-memory picture becomes: - -![](family-no-family.svg) - -This example demonstrates how important the concept of reachability is. - -It's obvious that John and Ann are still linked, both have incoming references. But that's not enough. - -The former `"family"` object has been unlinked from the root, there's no reference to it any more, so the whole island becomes unreachable and will be removed. - -## Internal algorithms - -The basic garbage collection algorithm is called "mark-and-sweep". - -The following "garbage collection" steps are regularly performed: - -- The garbage collector takes roots and "marks" (remembers) them. -- Then it visits and "marks" all references from them. -- Then it visits marked objects and marks *their* references. All visited objects are remembered, so as not to visit the same object twice in the future. -- ...And so on until every reachable (from the roots) references are visited. -- All objects except marked ones are removed. - -For instance, let our object structure look like this: - -![](garbage-collection-1.svg) - -We can clearly see an "unreachable island" to the right side. Now let's see how "mark-and-sweep" garbage collector deals with it. - -The first step marks the roots: - -![](garbage-collection-2.svg) - -Then their references are marked: - -![](garbage-collection-3.svg) - -...And their references, while possible: - -![](garbage-collection-4.svg) - -Now the objects that could not be visited in the process are considered unreachable and will be removed: - -![](garbage-collection-5.svg) - -We can also imagine the process as spilling a huge bucket of paint from the roots, that flows through all references and marks all reachable objects. The unmarked ones are then removed. - -That's the concept of how garbage collection works. JavaScript engines apply many optimizations to make it run faster and not affect the execution. - -Some of the optimizations: - -- **Generational collection** -- objects are split into two sets: "new ones" and "old ones". Many objects appear, do their job and die fast, they can be cleaned up aggressively. Those that survive for long enough, become "old" and are examined less often. -- **Incremental collection** -- if there are many objects, and we try to walk and mark the whole object set at once, it may take some time and introduce visible delays in the execution. So the engine tries to split the garbage collection into pieces. Then the pieces are executed one by one, separately. That requires some extra bookkeeping between them to track changes, but we have many tiny delays instead of a big one. -- **Idle-time collection** -- the garbage collector tries to run only while the CPU is idle, to reduce the possible effect on the execution. - -There exist other optimizations and flavours of garbage collection algorithms. As much as I'd like to describe them here, I have to hold off, because different engines implement different tweaks and techniques. And, what's even more important, things change as engines develop, so studying deeper "in advance", without a real need is probably not worth that. Unless, of course, it is a matter of pure interest, then there will be some links for you below. - -## Summary - -The main things to know: - -- Garbage collection is performed automatically. We cannot force or prevent it. -- Objects are retained in memory while they are reachable. -- Being referenced is not the same as being reachable (from a root): a pack of interlinked objects can become unreachable as a whole. - -Modern engines implement advanced algorithms of garbage collection. - -A general book "The Garbage Collection Handbook: The Art of Automatic Memory Management" (R. Jones et al) covers some of them. - -If you are familiar with low-level programming, the more detailed information about V8 garbage collector is in the article [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection). - -[V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn the garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of V8 engineers. I'm saying: "V8", because it is best covered with articles in the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects. - -In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language. diff --git a/1-js/04-object-basics/03-garbage-collection/family-delete-refs.svg b/1-js/04-object-basics/03-garbage-collection/family-delete-refs.svg deleted file mode 100644 index 2ae1f664cb..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/family-delete-refs.svg +++ /dev/null @@ -1 +0,0 @@ -<global variable>ObjectObjectwifefamilyname: "John"name: "Ann"motherObjectfatherhusband \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/family-no-family.svg b/1-js/04-object-basics/03-garbage-collection/family-no-family.svg deleted file mode 100644 index 655d1982e3..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/family-no-family.svg +++ /dev/null @@ -1 +0,0 @@ -<global>ObjectObjectfatherwifename: "John"name: "Ann"motherObjecthusbandfamily: null \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/family-no-father-2.svg b/1-js/04-object-basics/03-garbage-collection/family-no-father-2.svg deleted file mode 100644 index 11f4ada355..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/family-no-father-2.svg +++ /dev/null @@ -1 +0,0 @@ -Objectfamilyname: "Ann"motherObject<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/family-no-father.svg b/1-js/04-object-basics/03-garbage-collection/family-no-father.svg deleted file mode 100644 index b76c868e04..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/family-no-father.svg +++ /dev/null @@ -1 +0,0 @@ -ObjectObjectwifefamilyname: "John"name: "Ann"motherObject<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/family.svg b/1-js/04-object-basics/03-garbage-collection/family.svg deleted file mode 100644 index bec2f4ddcb..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/family.svg +++ /dev/null @@ -1 +0,0 @@ -ObjectObjectfatherwifefamilyname: "John"name: "Ann"motherObjecthusband<global variable> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/garbage-collection-1.svg b/1-js/04-object-basics/03-garbage-collection/garbage-collection-1.svg deleted file mode 100644 index 2563c8185a..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/garbage-collection-1.svg +++ /dev/null @@ -1 +0,0 @@ -<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/garbage-collection-2.svg b/1-js/04-object-basics/03-garbage-collection/garbage-collection-2.svg deleted file mode 100644 index acd5025e9c..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/garbage-collection-2.svg +++ /dev/null @@ -1 +0,0 @@ -<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/garbage-collection-3.svg b/1-js/04-object-basics/03-garbage-collection/garbage-collection-3.svg deleted file mode 100644 index 4421ec7846..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/garbage-collection-3.svg +++ /dev/null @@ -1 +0,0 @@ -<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/garbage-collection-4.svg b/1-js/04-object-basics/03-garbage-collection/garbage-collection-4.svg deleted file mode 100644 index 74adc81351..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/garbage-collection-4.svg +++ /dev/null @@ -1 +0,0 @@ -<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/garbage-collection-5.svg b/1-js/04-object-basics/03-garbage-collection/garbage-collection-5.svg deleted file mode 100644 index abb127ab23..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/garbage-collection-5.svg +++ /dev/null @@ -1 +0,0 @@ -<global>unreachables \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/memory-user-john-admin.svg b/1-js/04-object-basics/03-garbage-collection/memory-user-john-admin.svg deleted file mode 100644 index dc4cce1c7f..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/memory-user-john-admin.svg +++ /dev/null @@ -1 +0,0 @@ -username: "John"Objectadmin<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/memory-user-john-lost.svg b/1-js/04-object-basics/03-garbage-collection/memory-user-john-lost.svg deleted file mode 100644 index e75b8d465e..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/memory-user-john-lost.svg +++ /dev/null @@ -1 +0,0 @@ -name: "John"Objectuser: null<global> \ No newline at end of file diff --git a/1-js/04-object-basics/03-garbage-collection/memory-user-john.svg b/1-js/04-object-basics/03-garbage-collection/memory-user-john.svg deleted file mode 100644 index 0191e3f07d..0000000000 --- a/1-js/04-object-basics/03-garbage-collection/memory-user-john.svg +++ /dev/null @@ -1 +0,0 @@ -username: "John"Object<global> \ No newline at end of file diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md deleted file mode 100644 index c1aaf4f973..0000000000 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ /dev/null @@ -1,55 +0,0 @@ -**Answer: an error.** - -Try it: -```js run -function makeUser() { - return { - name: "John", - ref: this - }; -}; - -let user = makeUser(); - -alert( user.ref.name ); // Error: Cannot read property 'name' of undefined -``` - -That's because rules that set `this` do not look at object definition. Only the moment of call matters. - -Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method with "dot" syntax. - -The value of `this` is one for the whole function, code blocks and object literals do not affect it. - -So `ref: this` actually takes current `this` of the function. - -We can rewrite the function and return the same `this` with `undefined` value: - -```js run -function makeUser(){ - return this; // this time there's no object literal -} - -alert( makeUser().name ); // Error: Cannot read property 'name' of undefined -``` -As you can see the result of `alert( makeUser().name )` is the same as the result of `alert( user.ref.name )` from the previous example. - -Here's the opposite case: - -```js run -function makeUser() { - return { - name: "John", -*!* - ref() { - return this; - } -*/!* - }; -}; - -let user = makeUser(); - -alert( user.ref().name ); // John -``` - -Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`. diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md deleted file mode 100644 index 4784b082c0..0000000000 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Using "this" in object literal - -Here the function `makeUser` returns an object. - -What is the result of accessing its `ref`? Why? - -```js -function makeUser() { - return { - name: "John", - ref: this - }; -}; - -let user = makeUser(); - -alert( user.ref.name ); // What's the result? -``` - diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js b/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js deleted file mode 100644 index 9ccbe43a12..0000000000 --- a/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js +++ /dev/null @@ -1,14 +0,0 @@ -let calculator = { - sum() { - return this.a + this.b; - }, - - mul() { - return this.a * this.b; - }, - - read() { - this.a = +prompt('a?', 0); - this.b = +prompt('b?', 0); - } -}; \ No newline at end of file diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js b/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js deleted file mode 100644 index 1f71eda4c6..0000000000 --- a/1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js +++ /dev/null @@ -1,28 +0,0 @@ - - -describe("calculator", function() { - - context("when 2 and 3 entered", function() { - beforeEach(function() { - sinon.stub(window, "prompt"); - - prompt.onCall(0).returns("2"); - prompt.onCall(1).returns("3"); - - calculator.read(); - }); - - afterEach(function() { - prompt.restore(); - }); - - it("the sum is 5", function() { - assert.equal(calculator.sum(), 5); - }); - - it("the multiplication product is 6", function() { - assert.equal(calculator.mul(), 6); - }); - }); - -}); diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/solution.md b/1-js/04-object-basics/04-object-methods/7-calculator/solution.md deleted file mode 100644 index 459997624e..0000000000 --- a/1-js/04-object-basics/04-object-methods/7-calculator/solution.md +++ /dev/null @@ -1,21 +0,0 @@ - -```js run demo solution -let calculator = { - sum() { - return this.a + this.b; - }, - - mul() { - return this.a * this.b; - }, - - read() { - this.a = +prompt('a?', 0); - this.b = +prompt('b?', 0); - } -}; - -calculator.read(); -alert( calculator.sum() ); -alert( calculator.mul() ); -``` diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/task.md b/1-js/04-object-basics/04-object-methods/7-calculator/task.md deleted file mode 100644 index aa22608ece..0000000000 --- a/1-js/04-object-basics/04-object-methods/7-calculator/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# Create a calculator - -Create an object `calculator` with three methods: - -- `read()` prompts for two values and saves them as object properties. -- `sum()` returns the sum of saved values. -- `mul()` multiplies saved values and returns the result. - -```js -let calculator = { - // ... your code ... -}; - -calculator.read(); -alert( calculator.sum() ); -alert( calculator.mul() ); -``` - -[demo] - diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js b/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js deleted file mode 100644 index e98fe6410c..0000000000 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js +++ /dev/null @@ -1,15 +0,0 @@ - -let ladder = { - step: 0, - up: function() { - this.step++; - return this; - }, - down: function() { - this.step--; - return this; - }, - showStep: function() { - alert(this.step); - } -}; \ No newline at end of file diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js b/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js deleted file mode 100644 index a2b17fcc4f..0000000000 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js +++ /dev/null @@ -1,40 +0,0 @@ - -describe('Ladder', function() { - before(function() { - window.alert = sinon.stub(window, "alert"); - }); - - beforeEach(function() { - ladder.step = 0; - }); - - it('up() should return this', function() { - assert.equal(ladder.up(), ladder); - }); - - it('down() should return this', function() { - assert.equal(ladder.down(), ladder); - }); - - it('showStep() should call alert', function() { - ladder.showStep(); - assert(alert.called); - }); - - it('up() should increase step', function() { - assert.equal(ladder.up().up().step, 2); - }); - - it('down() should decrease step', function() { - assert.equal(ladder.down().step, -1); - }); - - it('down().up().up().up() ', function() { - assert.equal(ladder.down().up().up().up().step, 2); - }); - - after(function() { - ladder.step = 0; - alert.restore(); - }); -}); diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md deleted file mode 100644 index 2b47873fce..0000000000 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md +++ /dev/null @@ -1,39 +0,0 @@ -The solution is to return the object itself from every call. - -```js run demo -let ladder = { - step: 0, - up() { - this.step++; -*!* - return this; -*/!* - }, - down() { - this.step--; -*!* - return this; -*/!* - }, - showStep() { - alert( this.step ); -*!* - return this; -*/!* - } -} - -ladder.up().up().down().up().down().showStep(); // 1 -``` - -We also can write a single call per line. For long chains it's more readable: - -```js -ladder - .up() - .up() - .down() - .up() - .down() - .showStep(); // 1 -``` diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md deleted file mode 100644 index eca9f4e92f..0000000000 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ /dev/null @@ -1,39 +0,0 @@ -importance: 2 - ---- - -# Chaining - -There's a `ladder` object that allows to go up and down: - -```js -let ladder = { - step: 0, - up() { - this.step++; - }, - down() { - this.step--; - }, - showStep: function() { // shows the current step - alert( this.step ); - } -}; -``` - -Now, if we need to make several calls in sequence, can do it like this: - -```js -ladder.up(); -ladder.up(); -ladder.down(); -ladder.showStep(); // 1 -``` - -Modify the code of `up`, `down` and `showStep` to make the calls chainable, like this: - -```js -ladder.up().up().down().showStep(); // 1 -``` - -Such approach is widely used across JavaScript libraries. diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md deleted file mode 100644 index 75bd1856ab..0000000000 --- a/1-js/04-object-basics/04-object-methods/article.md +++ /dev/null @@ -1,268 +0,0 @@ -# Object methods, "this" - -Objects are usually created to represent entities of the real world, like users, orders and so on: - -```js -let user = { - name: "John", - age: 30 -}; -``` - -And, in the real world, a user can *act*: select something from the shopping cart, login, logout etc. - -Actions are represented in JavaScript by functions in properties. - -## Method examples - -For a start, let's teach the `user` to say hello: - -```js run -let user = { - name: "John", - age: 30 -}; - -*!* -user.sayHi = function() { - alert("Hello!"); -}; -*/!* - -user.sayHi(); // Hello! -``` - -Here we've just used a Function Expression to create the function and assign it to the property `user.sayHi` of the object. - -Then we can call it. The user can now speak! - -A function that is the property of an object is called its *method*. - -So, here we've got a method `sayHi` of the object `user`. - -Of course, we could use a pre-declared function as a method, like this: - -```js run -let user = { - // ... -}; - -*!* -// first, declare -function sayHi() { - alert("Hello!"); -}; - -// then add as a method -user.sayHi = sayHi; -*/!* - -user.sayHi(); // Hello! -``` - -```smart header="Object-oriented programming" -When we write our code using objects to represent entities, that's called [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP". - -OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E. Gamma, R. Helm, R. Johnson, J. Vissides or "Object-Oriented Analysis and Design with Applications" by G. Booch, and more. -``` -### Method shorthand - -There exists a shorter syntax for methods in an object literal: - -```js -// these objects do the same - -user = { - sayHi: function() { - alert("Hello"); - } -}; - -// method shorthand looks better, right? -user = { -*!* - sayHi() { // same as "sayHi: function()" -*/!* - alert("Hello"); - } -}; -``` - -As demonstrated, we can omit `"function"` and just write `sayHi()`. - -To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred. - -## "this" in methods - -It's common that an object method needs to access the information stored in the object to do its job. - -For instance, the code inside `user.sayHi()` may need the name of the `user`. - -**To access the object, a method can use the `this` keyword.** - -The value of `this` is the object "before dot", the one used to call the method. - -For instance: - -```js run -let user = { - name: "John", - age: 30, - - sayHi() { -*!* - // "this" is the "current object" - alert(this.name); -*/!* - } - -}; - -user.sayHi(); // John -``` - -Here during the execution of `user.sayHi()`, the value of `this` will be `user`. - -Technically, it's also possible to access the object without `this`, by referencing it via the outer variable: - -```js -let user = { - name: "John", - age: 30, - - sayHi() { -*!* - alert(user.name); // "user" instead of "this" -*/!* - } - -}; -``` - -...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object. - -That's demonstrated below: - -```js run -let user = { - name: "John", - age: 30, - - sayHi() { -*!* - alert( user.name ); // leads to an error -*/!* - } - -}; - - -let admin = user; -user = null; // overwrite to make things obvious - -admin.sayHi(); // Whoops! inside sayHi(), the old name is used! error! -``` - -If we used `this.name` instead of `user.name` inside the `alert`, then the code would work. - -## "this" is not bound - -In JavaScript, keyword `this` behaves unlike most other programming languages. It can be used in any function. - -There's no syntax error in the following example: - -```js -function sayHi() { - alert( *!*this*/!*.name ); -} -``` - -The value of `this` is evaluated during the run-time, depending on the context. - -For instance, here the same function is assigned to two different objects and has different "this" in the calls: - -```js run -let user = { name: "John" }; -let admin = { name: "Admin" }; - -function sayHi() { - alert( this.name ); -} - -*!* -// use the same function in two objects -user.f = sayHi; -admin.f = sayHi; -*/!* - -// these calls have different this -// "this" inside the function is the object "before the dot" -user.f(); // John (this == user) -admin.f(); // Admin (this == admin) - -admin['f'](); // Admin (dot or square brackets access the method – doesn't matter) -``` - -The rule is simple: if `obj.f()` is called, then `this` is `obj` during the call of `f`. So it's either `user` or `admin` in the example above. - -````smart header="Calling without an object: `this == undefined`" -We can even call the function without an object at all: - -```js run -function sayHi() { - alert(this); -} - -sayHi(); // undefined -``` - -In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error. - -In non-strict mode the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later in the chapter [](info:global-object)). This is a historical behavior that `"use strict"` fixes. - -Usually such call is a programming error. If there's `this` inside a function, it expects to be called in an object context. -```` - -```smart header="The consequences of unbound `this`" -If you come from another programming language, then you are probably used to the idea of a "bound `this`", where methods defined in an object always have `this` referencing that object. - -In JavaScript `this` is "free", its value is evaluated at call-time and does not depend on where the method was declared, but rather on what object is "before the dot". - -The concept of run-time evaluated `this` has both pluses and minuses. On the one hand, a function can be reused for different objects. On the other hand, the greater flexibility creates more possibilities for mistakes. - -Here our position is not to judge whether this language design decision is good or bad. We'll understand how to work with it, how to get benefits and avoid problems. -``` - -## Arrow functions have no "this" - -Arrow functions are special: they don't have their "own" `this`. If we reference `this` from such a function, it's taken from the outer "normal" function. - -For instance, here `arrow()` uses `this` from the outer `user.sayHi()` method: - -```js run -let user = { - firstName: "Ilya", - sayHi() { - let arrow = () => alert(this.firstName); - arrow(); - } -}; - -user.sayHi(); // Ilya -``` - -That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter we'll go more deeply into arrow functions. - - -## Summary - -- Functions that are stored in object properties are called "methods". -- Methods allow objects to "act" like `object.doSomething()`. -- Methods can reference the object as `this`. - -The value of `this` is defined at run-time. -- When a function is declared, it may use `this`, but that `this` has no value until the function is called. -- A function can be copied between objects. -- When a function is called in the "method" syntax: `object.method()`, the value of `this` during the call is `object`. - -Please note that arrow functions are special: they have no `this`. When `this` is accessed inside an arrow function, it is taken from outside. diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md deleted file mode 100644 index 7d8edd7cab..0000000000 --- a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md +++ /dev/null @@ -1,14 +0,0 @@ -Yes, it's possible. - -If a function returns an object then `new` returns it instead of `this`. - -So they can, for instance, return the same externally defined object `obj`: - -```js run no-beautify -let obj = {}; - -function A() { return obj; } -function B() { return obj; } - -alert( new A() == new B() ); // true -``` diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md deleted file mode 100644 index 8c1fea8ebb..0000000000 --- a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 2 - ---- - -# Two functions – one object - -Is it possible to create functions `A` and `B` such as `new A()==new B()`? - -```js no-beautify -function A() { ... } -function B() { ... } - -let a = new A; -let b = new B; - -alert( a == b ); // true -``` - -If it is, then provide an example of their code. diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js deleted file mode 100644 index 3b51b2e693..0000000000 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js +++ /dev/null @@ -1,15 +0,0 @@ -function Calculator() { - - this.read = function() { - this.a = +prompt('a?', 0); - this.b = +prompt('b?', 0); - }; - - this.sum = function() { - return this.a + this.b; - }; - - this.mul = function() { - return this.a * this.b; - }; -} \ No newline at end of file diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js deleted file mode 100644 index 036053927c..0000000000 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js +++ /dev/null @@ -1,25 +0,0 @@ - -describe("calculator", function() { - let calculator; - before(function() { - sinon.stub(window, "prompt") - - prompt.onCall(0).returns("2"); - prompt.onCall(1).returns("3"); - - calculator = new Calculator(); - calculator.read(); - }); - - it("when 2 and 3 are entered, the sum is 5", function() { - assert.equal(calculator.sum(), 5); - }); - - it("when 2 and 3 are entered, the product is 6", function() { - assert.equal(calculator.mul(), 6); - }); - - after(function() { - prompt.restore(); - }); -}); diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md deleted file mode 100644 index 86bb65416d..0000000000 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md +++ /dev/null @@ -1,23 +0,0 @@ -```js run demo -function Calculator() { - - this.read = function() { - this.a = +prompt('a?', 0); - this.b = +prompt('b?', 0); - }; - - this.sum = function() { - return this.a + this.b; - }; - - this.mul = function() { - return this.a * this.b; - }; -} - -let calculator = new Calculator(); -calculator.read(); - -alert( "Sum=" + calculator.sum() ); -alert( "Mul=" + calculator.mul() ); -``` diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md deleted file mode 100644 index 60e7c373e0..0000000000 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Create new Calculator - -Create a constructor function `Calculator` that creates objects with 3 methods: - -- `read()` asks for two values using `prompt` and remembers them in object properties. -- `sum()` returns the sum of these properties. -- `mul()` returns the multiplication product of these properties. - -For instance: - -```js -let calculator = new Calculator(); -calculator.read(); - -alert( "Sum=" + calculator.sum() ); -alert( "Mul=" + calculator.mul() ); -``` - -[demo] diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js deleted file mode 100644 index 585287c542..0000000000 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js +++ /dev/null @@ -1,8 +0,0 @@ -function Accumulator(startingValue) { - this.value = startingValue; - - this.read = function() { - this.value += +prompt('How much to add?', 0); - }; - -} diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js deleted file mode 100644 index a719cf45cb..0000000000 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js +++ /dev/null @@ -1,30 +0,0 @@ -describe("Accumulator", function() { - - beforeEach(function() { - sinon.stub(window, "prompt") - }); - - afterEach(function() { - prompt.restore(); - }); - - it("initial value is the argument of the constructor", function() { - let accumulator = new Accumulator(1); - - assert.equal(accumulator.value, 1); - }); - - it("after reading 0, the value is 1", function() { - let accumulator = new Accumulator(1); - prompt.returns("0"); - accumulator.read(); - assert.equal(accumulator.value, 1); - }); - - it("after reading 1, the value is 2", function() { - let accumulator = new Accumulator(1); - prompt.returns("1"); - accumulator.read(); - assert.equal(accumulator.value, 2); - }); -}); diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md deleted file mode 100644 index eb145e79d1..0000000000 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md +++ /dev/null @@ -1,17 +0,0 @@ - - -```js run demo -function Accumulator(startingValue) { - this.value = startingValue; - - this.read = function() { - this.value += +prompt('How much to add?', 0); - }; - -} - -let accumulator = new Accumulator(1); -accumulator.read(); -accumulator.read(); -alert(accumulator.value); -``` diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md deleted file mode 100644 index c2c44881e8..0000000000 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md +++ /dev/null @@ -1,27 +0,0 @@ -importance: 5 - ---- - -# Create new Accumulator - -Create a constructor function `Accumulator(startingValue)`. - -Object that it creates should: - -- Store the "current value" in the property `value`. The starting value is set to the argument of the constructor `startingValue`. -- The `read()` method should use `prompt` to read a new number and add it to `value`. - -In other words, the `value` property is the sum of all user-entered values with the initial value `startingValue`. - -Here's the demo of the code: - -```js -let accumulator = new Accumulator(1); // initial value 1 - -accumulator.read(); // adds the user-entered value -accumulator.read(); // adds the user-entered value - -alert(accumulator.value); // shows the sum of these values -``` - -[demo] diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md deleted file mode 100644 index a885e35ff4..0000000000 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ /dev/null @@ -1,230 +0,0 @@ -# Constructor, operator "new" - -The regular `{...}` syntax allows to create one object. But often we need to create many similar objects, like multiple users or menu items and so on. - -That can be done using constructor functions and the `"new"` operator. - -## Constructor function - -Constructor functions technically are regular functions. There are two conventions though: - -1. They are named with capital letter first. -2. They should be executed only with `"new"` operator. - -For instance: - -```js run -function User(name) { - this.name = name; - this.isAdmin = false; -} - -*!* -let user = new User("Jack"); -*/!* - -alert(user.name); // Jack -alert(user.isAdmin); // false -``` - -When a function is executed with `new`, it does the following steps: - -1. A new empty object is created and assigned to `this`. -2. The function body executes. Usually it modifies `this`, adds new properties to it. -3. The value of `this` is returned. - -In other words, `new User(...)` does something like: - -```js -function User(name) { -*!* - // this = {}; (implicitly) -*/!* - - // add properties to this - this.name = name; - this.isAdmin = false; - -*!* - // return this; (implicitly) -*/!* -} -``` - -So `let user = new User("Jack")` gives the same result as: - -```js -let user = { - name: "Jack", - isAdmin: false -}; -``` - -Now if we want to create other users, we can call `new User("Ann")`, `new User("Alice")` and so on. Much shorter than using literals every time, and also easy to read. - -That's the main purpose of constructors -- to implement reusable object creation code. - -Let's note once again -- technically, any function can be used as a constructor. That is: any function can be run with `new`, and it will execute the algorithm above. The "capital letter first" is a common agreement, to make it clear that a function is to be run with `new`. - -````smart header="new function() { ... }" -If we have many lines of code all about creation of a single complex object, we can wrap them in constructor function, like this: - -```js -let user = new function() { - this.name = "John"; - this.isAdmin = false; - - // ...other code for user creation - // maybe complex logic and statements - // local variables etc -}; -``` - -The constructor can't be called again, because it is not saved anywhere, just created and called. So this trick aims to encapsulate the code that constructs the single object, without future reuse. -```` - -## Constructor mode test: new.target - -```smart header="Advanced stuff" -The syntax from this section is rarely used, skip it unless you want to know everything. -``` - -Inside a function, we can check whether it was called with `new` or without it, using a special `new.target` property. - -It is empty for regular calls and equals the function if called with `new`: - -```js run -function User() { - alert(new.target); -} - -// without "new": -*!* -User(); // undefined -*/!* - -// with "new": -*!* -new User(); // function User { ... } -*/!* -``` - -That can be used inside the function to know whether it was called with `new`, "in constructor mode", or without it, "in regular mode". - -We can also make both `new` and regular calls to do the same, like this: - -```js run -function User(name) { - if (!new.target) { // if you run me without new - return new User(name); // ...I will add new for you - } - - this.name = name; -} - -let john = User("John"); // redirects call to new User -alert(john.name); // John -``` - -This approach is sometimes used in libraries to make the syntax more flexible. So that people may call the function with or without `new`, and it still works. - -Probably not a good thing to use everywhere though, because omitting `new` makes it a bit less obvious what's going on. With `new` we all know that the new object is being created. - -## Return from constructors - -Usually, constructors do not have a `return` statement. Their task is to write all necessary stuff into `this`, and it automatically becomes the result. - -But if there is a `return` statement, then the rule is simple: - -- If `return` is called with an object, then the object is returned instead of `this`. -- If `return` is called with a primitive, it's ignored. - -In other words, `return` with an object returns that object, in all other cases `this` is returned. - -For instance, here `return` overrides `this` by returning an object: - -```js run -function BigUser() { - - this.name = "John"; - - return { name: "Godzilla" }; // <-- returns this object -} - -alert( new BigUser().name ); // Godzilla, got that object -``` - -And here's an example with an empty `return` (or we could place a primitive after it, doesn't matter): - -```js run -function SmallUser() { - - this.name = "John"; - - return; // <-- returns this -} - -alert( new SmallUser().name ); // John -``` - -Usually constructors don't have a `return` statement. Here we mention the special behavior with returning objects mainly for the sake of completeness. - -````smart header="Omitting parentheses" -By the way, we can omit parentheses after `new`, if it has no arguments: - -```js -let user = new User; // <-- no parentheses -// same as -let user = new User(); -``` - -Omitting parentheses here is not considered a "good style", but the syntax is permitted by specification. -```` - -## Methods in constructor - -Using constructor functions to create objects gives a great deal of flexibility. The constructor function may have parameters that define how to construct the object, and what to put in it. - -Of course, we can add to `this` not only properties, but methods as well. - -For instance, `new User(name)` below creates an object with the given `name` and the method `sayHi`: - -```js run -function User(name) { - this.name = name; - - this.sayHi = function() { - alert( "My name is: " + this.name ); - }; -} - -*!* -let john = new User("John"); - -john.sayHi(); // My name is: John -*/!* - -/* -john = { - name: "John", - sayHi: function() { ... } -} -*/ -``` - -To create complex objects, there's a more advanced syntax, [classes](info:classes), that we'll cover later. - -## Summary - -- Constructor functions or, briefly, constructors, are regular functions, but there's a common agreement to name them with capital letter first. -- Constructor functions should only be called using `new`. Such a call implies a creation of empty `this` at the start and returning the populated one at the end. - -We can use constructor functions to make multiple similar objects. - -JavaScript provides constructor functions for many built-in language objects: like `Date` for dates, `Set` for sets and others that we plan to study. - -```smart header="Objects, we'll be back!" -In this chapter we only cover the basics about objects and constructors. They are essential for learning more about data types and functions in the next chapters. - -After we learn that, we return to objects and cover them in-depth in the chapters and . -``` diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md deleted file mode 100644 index 974689020b..0000000000 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ /dev/null @@ -1,175 +0,0 @@ - -# Optional chaining '?.' - -[recent browser="new"] - -The optional chaining `?.` is an error-proof way to access nested object properties, even if an intermediate property doesn't exist. - -## The problem - -If you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common. - -For example, some of our users have addresses, but few did not provide them. Then we can't safely read `user.address.street`: - -```js run -let user = {}; // the user happens to be without address - -alert(user.address.street); // Error! -``` - -Or, in the web development, we'd like to get an information about an element on the page, but it may not exist: - -```js run -// Error if the result of querySelector(...) is null -let html = document.querySelector('.my-element').innerHTML; -``` - -Before `?.` appeared in the language, the `&&` operator was used to work around that. - -For example: - -```js run -let user = {}; // user has no address - -alert( user && user.address && user.address.street ); // undefined (no error) -``` - -AND'ing the whole path to the property ensures that all components exist, but is cumbersome to write. - -## Optional chaining - -The optional chaining `?.` stops the evaluation and returns `undefined` if the part before `?.` is `undefined` or `null`. - -**Further in this article, for brevity, we'll be saying that something "exists" if it's not `null` and not `undefined`.** - -Here's the safe way to access `user.address.street`: - -```js run -let user = {}; // user has no address - -alert( user?.address?.street ); // undefined (no error) -``` - -Reading the address with `user?.address` works even if `user` object doesn't exist: - -```js run -let user = null; - -alert( user?.address ); // undefined -alert( user?.address.street ); // undefined -``` - -Please note: the `?.` syntax makes optional the value before it, but not any further. - -In the example above, `user?.` allows only `user` to be `null/undefined`. - -On the other hand, if `user` does exist, then it must have `user.address` property, otherwise `user?.address.street` gives an error at the second dot. - -```warn header="Don't overuse the optional chaining" -We should use `?.` only where it's ok that something doesn't exist. - -For example, if according to our coding logic `user` object must be there, but `address` is optional, then `user.address?.street` would be better. - -So, if `user` happens to be undefined due to a mistake, we'll know about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug. -``` - -````warn header="The variable before `?.` must be declared" -If there's no variable `user` at all, then `user?.anything` triggers an error: - -```js run -// ReferenceError: user is not defined -user?.address; -``` -There must be `let/const/var user`. The optional chaining works only for declared variables. -```` - -## Short-circuiting - -As it was said before, the `?.` immediately stops ("short-circuits") the evaluation if the left part doesn't exist. - -So, if there are any further function calls or side effects, they don't occur: - -```js run -let user = null; -let x = 0; - -user?.sayHi(x++); // nothing happens - -alert(x); // 0, value not incremented -``` - -## Other cases: ?.(), ?.[] - -The optional chaining `?.` is not an operator, but a special syntax construct, that also works with functions and square brackets. - -For example, `?.()` is used to call a function that may not exist. - -In the code below, some of our users have `admin` method, and some don't: - -```js run -let user1 = { - admin() { - alert("I am admin"); - } -} - -let user2 = {}; - -*!* -user1.admin?.(); // I am admin -user2.admin?.(); -*/!* -``` - -Here, in both lines we first use the dot `.` to get `admin` property, because the user object must exist, so it's safe read from it. - -Then `?.()` checks the left part: if the admin function exists, then it runs (for `user1`). Otherwise (for `user2`) the evaluation stops without errors. - -The `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist. - -```js run -let user1 = { - firstName: "John" -}; - -let user2 = null; // Imagine, we couldn't authorize the user - -let key = "firstName"; - -alert( user1?.[key] ); // John -alert( user2?.[key] ); // undefined - -alert( user1?.[key]?.something?.not?.existing); // undefined -``` - -Also we can use `?.` with `delete`: - -```js run -delete user?.name; // delete user.name if user exists -``` - -```warn header="We can use `?.` for safe reading and deleting, but not writing" -The optional chaining `?.` has no use at the left side of an assignment: - -```js run -// the idea of the code below is to write user.name, if user exists - -user?.name = "John"; // Error, doesn't work -// because it evaluates to undefined = "John" -``` - -## Summary - -The `?.` syntax has three forms: - -1. `obj?.prop` -- returns `obj.prop` if `obj` exists, otherwise `undefined`. -2. `obj?.[prop]` -- returns `obj[prop]` if `obj` exists, otherwise `undefined`. -3. `obj?.method()` -- calls `obj.method()` if `obj` exists, otherwise returns `undefined`. - -As we can see, all of them are straightforward and simple to use. The `?.` checks the left part for `null/undefined` and allows the evaluation to proceed if it's not so. - -A chain of `?.` allows to safely access nested properties. - -Still, we should apply `?.` carefully, only where it's ok that the left part doesn't to exist. - -So that it won't hide programming errors from us, if they occur. diff --git a/1-js/04-object-basics/08-symbol/article.md b/1-js/04-object-basics/08-symbol/article.md deleted file mode 100644 index e469bb0baf..0000000000 --- a/1-js/04-object-basics/08-symbol/article.md +++ /dev/null @@ -1,277 +0,0 @@ - -# Symbol type - -By specification, object property keys may be either of string type, or of symbol type. Not numbers, not booleans, only strings or symbols, these two types. - -Till now we've been using only strings. Now let's see the benefits that symbols can give us. - -## Symbols - -A "symbol" represents a unique identifier. - -A value of this type can be created using `Symbol()`: - -```js -// id is a new symbol -let id = Symbol(); -``` - -Upon creation, we can give symbol a description (also called a symbol name), mostly useful for debugging purposes: - -```js -// id is a symbol with the description "id" -let id = Symbol("id"); -``` - -Symbols are guaranteed to be unique. Even if we create many symbols with the same description, they are different values. The description is just a label that doesn't affect anything. - -For instance, here are two symbols with the same description -- they are not equal: - -```js run -let id1 = Symbol("id"); -let id2 = Symbol("id"); - -*!* -alert(id1 == id2); // false -*/!* -``` - -If you are familiar with Ruby or another language that also has some sort of "symbols" -- please don't be misguided. JavaScript symbols are different. - -````warn header="Symbols don't auto-convert to a string" -Most values in JavaScript support implicit conversion to a string. For instance, we can `alert` almost any value, and it will work. Symbols are special. They don't auto-convert. - -For instance, this `alert` will show an error: - -```js run -let id = Symbol("id"); -*!* -alert(id); // TypeError: Cannot convert a Symbol value to a string -*/!* -``` - -That's a "language guard" against messing up, because strings and symbols are fundamentally different and should not accidentally convert one into another. - -If we really want to show a symbol, we need to explicitly call `.toString()` on it, like here: -```js run -let id = Symbol("id"); -*!* -alert(id.toString()); // Symbol(id), now it works -*/!* -``` - -Or get `symbol.description` property to show the description only: -```js run -let id = Symbol("id"); -*!* -alert(id.description); // id -*/!* -``` - -```` - -## "Hidden" properties - -Symbols allow us to create "hidden" properties of an object, that no other part of code can accidentally access or overwrite. - -For instance, if we're working with `user` objects, that belong to a third-party code. We'd like to add identifiers to them. - -Let's use a symbol key for it: - -```js run -let user = { // belongs to another code - name: "John" -}; - -let id = Symbol("id"); - -user[id] = 1; - -alert( user[id] ); // we can access the data using the symbol as the key -``` - -What's the benefit of using `Symbol("id")` over a string `"id"`? - -As `user` objects belongs to another code, and that code also works with them, we shouldn't just add any fields to it. That's unsafe. But a symbol cannot be accessed accidentally, the third-party code probably won't even see it, so it's probably all right to do. - -Also, imagine that another script wants to have its own identifier inside `user`, for its own purposes. That may be another JavaScript library, so that the scripts are completely unaware of each other. - -Then that script can create its own `Symbol("id")`, like this: - -```js -// ... -let id = Symbol("id"); - -user[id] = "Their id value"; -``` - -There will be no conflict between our and their identifiers, because symbols are always different, even if they have the same name. - -...But if we used a string `"id"` instead of a symbol for the same purpose, then there *would* be a conflict: - -```js run -let user = { name: "John" }; - -// Our script uses "id" property -user.id = "Our id value"; - -// ...Another script also wants "id" for its purposes... - -user.id = "Their id value" -// Boom! overwritten by another script! -``` - -### Symbols in an object literal - -If we want to use a symbol in an object literal `{...}`, we need square brackets around it. - -Like this: - -```js -let id = Symbol("id"); - -let user = { - name: "John", -*!* - [id]: 123 // not "id": 123 -*/!* -}; -``` -That's because we need the value from the variable `id` as the key, not the string "id". - -### Symbols are skipped by for..in - -Symbolic properties do not participate in `for..in` loop. - -For instance: - -```js run -let id = Symbol("id"); -let user = { - name: "John", - age: 30, - [id]: 123 -}; - -*!* -for (let key in user) alert(key); // name, age (no symbols) -*/!* - -// the direct access by the symbol works -alert( "Direct: " + user[id] ); -``` - -`Object.keys(user)` also ignores them. That's a part of the general "hiding symbolic properties" principle. If another script or a library loops over our object, it won't unexpectedly access a symbolic property. - -In contrast, [Object.assign](mdn:js/Object/assign) copies both string and symbol properties: - -```js run -let id = Symbol("id"); -let user = { - [id]: 123 -}; - -let clone = Object.assign({}, user); - -alert( clone[id] ); // 123 -``` - -There's no paradox here. That's by design. The idea is that when we clone an object or merge objects, we usually want *all* properties to be copied (including symbols like `id`). - -## Global symbols - -As we've seen, usually all symbols are different, even if they have the same name. But sometimes we want same-named symbols to be same entities. For instance, different parts of our application want to access symbol `"id"` meaning exactly the same property. - -To achieve that, there exists a *global symbol registry*. We can create symbols in it and access them later, and it guarantees that repeated accesses by the same name return exactly the same symbol. - -In order to read (create if absent) a symbol from the registry, use `Symbol.for(key)`. - -That call checks the global registry, and if there's a symbol described as `key`, then returns it, otherwise creates a new symbol `Symbol(key)` and stores it in the registry by the given `key`. - -For instance: - -```js run -// read from the global registry -let id = Symbol.for("id"); // if the symbol did not exist, it is created - -// read it again (maybe from another part of the code) -let idAgain = Symbol.for("id"); - -// the same symbol -alert( id === idAgain ); // true -``` - -Symbols inside the registry are called *global symbols*. If we want an application-wide symbol, accessible everywhere in the code -- that's what they are for. - -```smart header="That sounds like Ruby" -In some programming languages, like Ruby, there's a single symbol per name. - -In JavaScript, as we can see, that's right for global symbols. -``` - -### Symbol.keyFor - -For global symbols, not only `Symbol.for(key)` returns a symbol by name, but there's a reverse call: `Symbol.keyFor(sym)`, that does the reverse: returns a name by a global symbol. - -For instance: - -```js run -// get symbol by name -let sym = Symbol.for("name"); -let sym2 = Symbol.for("id"); - -// get name by symbol -alert( Symbol.keyFor(sym) ); // name -alert( Symbol.keyFor(sym2) ); // id -``` - -The `Symbol.keyFor` internally uses the global symbol registry to look up the key for the symbol. So it doesn't work for non-global symbols. If the symbol is not global, it won't be able to find it and returns `undefined`. - -That said, any symbols have `description` property. - -For instance: - -```js run -let globalSymbol = Symbol.for("name"); -let localSymbol = Symbol("name"); - -alert( Symbol.keyFor(globalSymbol) ); // name, global symbol -alert( Symbol.keyFor(localSymbol) ); // undefined, not global - -alert( localSymbol.description ); // name -``` - -## System symbols - -There exist many "system" symbols that JavaScript uses internally, and we can use them to fine-tune various aspects of our objects. - -They are listed in the specification in the [Well-known symbols](https://tc39.github.io/ecma262/#sec-well-known-symbols) table: - -- `Symbol.hasInstance` -- `Symbol.isConcatSpreadable` -- `Symbol.iterator` -- `Symbol.toPrimitive` -- ...and so on. - -For instance, `Symbol.toPrimitive` allows us to describe object to primitive conversion. We'll see its use very soon. - -Other symbols will also become familiar when we study the corresponding language features. - -## Summary - -`Symbol` is a primitive type for unique identifiers. - -Symbols are created with `Symbol()` call with an optional description (name). - -Symbols are always different values, even if they have the same name. If we want same-named symbols to be equal, then we should use the global registry: `Symbol.for(key)` returns (creates if needed) a global symbol with `key` as the name. Multiple calls of `Symbol.for` with the same `key` return exactly the same symbol. - -Symbols have two main use cases: - -1. "Hidden" object properties. - If we want to add a property into an object that "belongs" to another script or a library, we can create a symbol and use it as a property key. A symbolic property does not appear in `for..in`, so it won't be accidentally processed together with other properties. Also it won't be accessed directly, because another script does not have our symbol. So the property will be protected from accidental use or overwrite. - - So we can "covertly" hide something into objects that we need, but others should not see, using symbolic properties. - -2. There are many system symbols used by JavaScript which are accessible as `Symbol.*`. We can use them to alter some built-in behaviors. For instance, later in the tutorial we'll use `Symbol.iterator` for [iterables](info:iterable), `Symbol.toPrimitive` to setup [object-to-primitive conversion](info:object-toprimitive) and so on. - -Technically, symbols are not 100% hidden. There is a built-in method [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) that allows us to get all symbols. Also there is a method named [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys of an object including symbolic ones. So they are not really hidden. But most libraries, built-in functions and syntax constructs don't use these methods. diff --git a/1-js/04-object-basics/09-object-toprimitive/article.md b/1-js/04-object-basics/09-object-toprimitive/article.md deleted file mode 100644 index 36b6c64603..0000000000 --- a/1-js/04-object-basics/09-object-toprimitive/article.md +++ /dev/null @@ -1,255 +0,0 @@ - -# Object to primitive conversion - -What happens when objects are added `obj1 + obj2`, subtracted `obj1 - obj2` or printed using `alert(obj)`? - -In that case, objects are auto-converted to primitives, and then the operation is carried out. - -In the chapter we've seen the rules for numeric, string and boolean conversions of primitives. But we left a gap for objects. Now, as we know about methods and symbols it becomes possible to fill it. - -1. All objects are `true` in a boolean context. There are only numeric and string conversions. -2. The numeric conversion happens when we subtract objects or apply mathematical functions. For instance, `Date` objects (to be covered in the chapter ) can be subtracted, and the result of `date1 - date2` is the time difference between two dates. -3. As for the string conversion -- it usually happens when we output an object like `alert(obj)` and in similar contexts. - -## ToPrimitive - -We can fine-tune string and numeric conversion, using special object methods. - -There are three variants of type conversion, so-called "hints", described in the [specification](https://tc39.github.io/ecma262/#sec-toprimitive): - -`"string"` -: For an object-to-string conversion, when we're doing an operation on an object that expects a string, like `alert`: - - ```js - // output - alert(obj); - - // using object as a property key - anotherObj[obj] = 123; - ``` - -`"number"` -: For an object-to-number conversion, like when we're doing maths: - - ```js - // explicit conversion - let num = Number(obj); - - // maths (except binary plus) - let n = +obj; // unary plus - let delta = date1 - date2; - - // less/greater comparison - let greater = user1 > user2; - ``` - -`"default"` -: Occurs in rare cases when the operator is "not sure" what type to expect. - - For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them), so both strings and numbers would do. So if a binary plus gets an object as an argument, it uses the `"default"` hint to convert it. - - Also, if an object is compared using `==` with a string, number or a symbol, it's also unclear which conversion should be done, so the `"default"` hint is used. - - ```js - // binary plus uses the "default" hint - let total = obj1 + obj2; - - // obj == number uses the "default" hint - if (user == 1) { ... }; - ``` - - The greater and less comparison operators, such as `<` `>`, can work with both strings and numbers too. Still, they use the `"number"` hint, not `"default"`. That's for historical reasons. - - In practice though, we don't need to remember these peculiar details, because all built-in objects except for one case (`Date` object, we'll learn it later) implement `"default"` conversion the same way as `"number"`. And we can do the same. - -```smart header="No `\"boolean\"` hint" -Please note -- there are only three hints. It's that simple. - -There is no "boolean" hint (all objects are `true` in boolean context) or anything else. And if we treat `"default"` and `"number"` the same, like most built-ins do, then there are only two conversions. -``` - -**To do the conversion, JavaScript tries to find and call three object methods:** - -1. Call `obj[Symbol.toPrimitive](hint)` - the method with the symbolic key `Symbol.toPrimitive` (system symbol), if such method exists, -2. Otherwise if hint is `"string"` - - try `obj.toString()` and `obj.valueOf()`, whatever exists. -3. Otherwise if hint is `"number"` or `"default"` - - try `obj.valueOf()` and `obj.toString()`, whatever exists. - -## Symbol.toPrimitive - -Let's start from the first method. There's a built-in symbol named `Symbol.toPrimitive` that should be used to name the conversion method, like this: - -```js -obj[Symbol.toPrimitive] = function(hint) { - // must return a primitive value - // hint = one of "string", "number", "default" -}; -``` - -For instance, here `user` object implements it: - -```js run -let user = { - name: "John", - money: 1000, - - [Symbol.toPrimitive](hint) { - alert(`hint: ${hint}`); - return hint == "string" ? `{name: "${this.name}"}` : this.money; - } -}; - -// conversions demo: -alert(user); // hint: string -> {name: "John"} -alert(+user); // hint: number -> 1000 -alert(user + 500); // hint: default -> 1500 -``` - -As we can see from the code, `user` becomes a self-descriptive string or a money amount depending on the conversion. The single method `user[Symbol.toPrimitive]` handles all conversion cases. - - -## toString/valueOf - -Methods `toString` and `valueOf` come from ancient times. They are not symbols (symbols did not exist that long ago), but rather "regular" string-named methods. They provide an alternative "old-style" way to implement the conversion. - -If there's no `Symbol.toPrimitive` then JavaScript tries to find them and try in the order: - -- `toString -> valueOf` for "string" hint. -- `valueOf -> toString` otherwise. - -These methods must return a primitive value. If `toString` or `valueOf` returns an object, then it's ignored (same as if there were no method). - -By default, a plain object has following `toString` and `valueOf` methods: - -- The `toString` method returns a string `"[object Object]"`. -- The `valueOf` method returns the object itself. - -Here's the demo: - -```js run -let user = {name: "John"}; - -alert(user); // [object Object] -alert(user.valueOf() === user); // true -``` - -So if we try to use an object as a string, like in an `alert` or so, then by default we see `[object Object]`. - -And the default `valueOf` is mentioned here only for the sake of completeness, to avoid any confusion. As you can see, it returns the object itself, and so is ignored. Don't ask me why, that's for historical reasons. So we can assume it doesn't exist. - -Let's implement these methods. - -For instance, here `user` does the same as above using a combination of `toString` and `valueOf` instead of `Symbol.toPrimitive`: - -```js run -let user = { - name: "John", - money: 1000, - - // for hint="string" - toString() { - return `{name: "${this.name}"}`; - }, - - // for hint="number" or "default" - valueOf() { - return this.money; - } - -}; - -alert(user); // toString -> {name: "John"} -alert(+user); // valueOf -> 1000 -alert(user + 500); // valueOf -> 1500 -``` - -As we can see, the behavior is the same as the previous example with `Symbol.toPrimitive`. - -Often we want a single "catch-all" place to handle all primitive conversions. In this case, we can implement `toString` only, like this: - -```js run -let user = { - name: "John", - - toString() { - return this.name; - } -}; - -alert(user); // toString -> John -alert(user + 500); // toString -> John500 -``` - -In the absence of `Symbol.toPrimitive` and `valueOf`, `toString` will handle all primitive conversions. - -## Return types - -The important thing to know about all primitive-conversion methods is that they do not necessarily return the "hinted" primitive. - -There is no control whether `toString` returns exactly a string, or whether `Symbol.toPrimitive` method returns a number for a hint `"number"`. - -The only mandatory thing: these methods must return a primitive, not an object. - -```smart header="Historical notes" -For historical reasons, if `toString` or `valueOf` returns an object, there's no error, but such value is ignored (like if the method didn't exist). That's because in ancient times there was no good "error" concept in JavaScript. - -In contrast, `Symbol.toPrimitive` *must* return a primitive, otherwise there will be an error. -``` - -## Further conversions - -As we know already, many operators and functions perform type conversions, e.g. multiplication `*` converts operands to numbers. - -If we pass an object as an argument, then there are two stages: -1. The object is converted to a primitive (using the rules described above). -2. If the resulting primitive isn't of the right type, it's converted. - -For instance: - -```js run -let obj = { - // toString handles all conversions in the absence of other methods - toString() { - return "2"; - } -}; - -alert(obj * 2); // 4, object converted to primitive "2", then multiplication made it a number -``` - -1. The multiplication `obj * 2` first converts the object to primitive (that's a string `"2"`). -2. Then `"2" * 2` becomes `2 * 2` (the string is converted to number). - -Binary plus will concatenate strings in the same situation, as it gladly accepts a string: - -```js run -let obj = { - toString() { - return "2"; - } -}; - -alert(obj + 2); // 22 ("2" + 2), conversion to primitive returned a string => concatenation -``` - -## Summary - -The object-to-primitive conversion is called automatically by many built-in functions and operators that expect a primitive as a value. - -There are 3 types (hints) of it: -- `"string"` (for `alert` and other operations that need a string) -- `"number"` (for maths) -- `"default"` (few operators) - -The specification describes explicitly which operator uses which hint. There are very few operators that "don't know what to expect" and use the `"default"` hint. Usually for built-in objects `"default"` hint is handled the same way as `"number"`, so in practice the last two are often merged together. - -The conversion algorithm is: - -1. Call `obj[Symbol.toPrimitive](hint)` if the method exists, -2. Otherwise if hint is `"string"` - - try `obj.toString()` and `obj.valueOf()`, whatever exists. -3. Otherwise if hint is `"number"` or `"default"` - - try `obj.valueOf()` and `obj.toString()`, whatever exists. - -In practice, it's often enough to implement only `obj.toString()` as a "catch-all" method for all conversions that return a "human-readable" representation of an object, for logging or debugging purposes. diff --git a/1-js/04-object-basics/index.md b/1-js/04-object-basics/index.md deleted file mode 100644 index d2387aafa7..0000000000 --- a/1-js/04-object-basics/index.md +++ /dev/null @@ -1 +0,0 @@ -# Objects: the basics diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md deleted file mode 100644 index fd22a46539..0000000000 --- a/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md +++ /dev/null @@ -1,24 +0,0 @@ - -Try running it: - -```js run -let str = "Hello"; - -str.test = 5; // (*) - -alert(str.test); -``` - -Depending on whether you have `use strict` or not, the result may be: -1. `undefined` (no strict mode) -2. An error (strict mode). - -Why? Let's replay what's happening at line `(*)`: - -1. When a property of `str` is accessed, a "wrapper object" is created. -2. In strict mode, writing into it is an error. -3. Otherwise, the operation with the property is carried on, the object gets the `test` property, but after that the "wrapper object" disappears, so in the last line `str` has no trace of the property. - -**This example clearly shows that primitives are not objects.** - -They can't store additional data. diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md deleted file mode 100644 index 50c781ea5d..0000000000 --- a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md +++ /dev/null @@ -1,18 +0,0 @@ -importance: 5 - ---- - -# Can I add a string property? - - -Consider the following code: - -```js -let str = "Hello"; - -str.test = 5; - -alert(str.test); -``` - -How do you think, will it work? What will be shown? diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md deleted file mode 100644 index 6c13acda66..0000000000 --- a/1-js/05-data-types/01-primitives-methods/article.md +++ /dev/null @@ -1,128 +0,0 @@ -# Methods of primitives - -JavaScript allows us to work with primitives (strings, numbers, etc.) as if they were objects. They also provide methods to call as such. We will study those soon, but first we'll see how it works because, of course, primitives are not objects (and here we will make it even clearer). - -Let's look at the key distinctions between primitives and objects. - -A primitive - -- Is a value of a primitive type. -- There are 7 primitive types: `string`, `number`, `bigint`, `boolean`, `symbol`, `null` and `undefined`. - -An object - -- Is capable of storing multiple values as properties. -- Can be created with `{}`, for instance: `{name: "John", age: 30}`. There are other kinds of objects in JavaScript: functions, for example, are objects. - -One of the best things about objects is that we can store a function as one of its properties. - -```js run -let john = { - name: "John", - sayHi: function() { - alert("Hi buddy!"); - } -}; - -john.sayHi(); // Hi buddy! -``` - -So here we've made an object `john` with the method `sayHi`. - -Many built-in objects already exist, such as those that work with dates, errors, HTML elements, etc. They have different properties and methods. - -But, these features come with a cost! - -Objects are "heavier" than primitives. They require additional resources to support the internal machinery. - -## A primitive as an object - -Here's the paradox faced by the creator of JavaScript: - -- There are many things one would want to do with a primitive like a string or a number. It would be great to access them as methods. -- Primitives must be as fast and lightweight as possible. - -The solution looks a little bit awkward, but here it is: - -1. Primitives are still primitive. A single value, as desired. -2. The language allows access to methods and properties of strings, numbers, booleans and symbols. -3. In order for that to work, a special "object wrapper" that provides the extra functionality is created, and then is destroyed. - -The "object wrappers" are different for each primitive type and are called: `String`, `Number`, `Boolean` and `Symbol`. Thus, they provide different sets of methods. - -For instance, there exists a string method [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) that returns a capitalized `str`. - -Here's how it works: - -```js run -let str = "Hello"; - -alert( str.toUpperCase() ); // HELLO -``` - -Simple, right? Here's what actually happens in `str.toUpperCase()`: - -1. The string `str` is a primitive. So in the moment of accessing its property, a special object is created that knows the value of the string, and has useful methods, like `toUpperCase()`. -2. That method runs and returns a new string (shown by `alert`). -3. The special object is destroyed, leaving the primitive `str` alone. - -So primitives can provide methods, but they still remain lightweight. - -The JavaScript engine highly optimizes this process. It may even skip the creation of the extra object at all. But it must still adhere to the specification and behave as if it creates one. - -A number has methods of its own, for instance, [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) rounds the number to the given precision: - -```js run -let n = 1.23456; - -alert( n.toFixed(2) ); // 1.23 -``` - -We'll see more specific methods in chapters and . - - -````warn header="Constructors `String/Number/Boolean` are for internal use only" -Some languages like Java allow us to explicitly create "wrapper objects" for primitives using a syntax like `new Number(1)` or `new Boolean(false)`. - -In JavaScript, that's also possible for historical reasons, but highly **unrecommended**. Things will go crazy in several places. - -For instance: - -```js run -alert( typeof 0 ); // "number" - -alert( typeof new Number(0) ); // "object"! -``` - -Objects are always truthy in `if`, so here the alert will show up: - -```js run -let zero = new Number(0); - -if (zero) { // zero is true, because it's an object - alert( "zero is truthy!?!" ); -} -``` - -On the other hand, using the same functions `String/Number/Boolean` without `new` is a totally sane and useful thing. They convert a value to the corresponding type: to a string, a number, or a boolean (primitive). - -For example, this is entirely valid: -```js -let num = Number("123"); // convert a string to number -``` -```` - - -````warn header="null/undefined have no methods" -The special primitives `null` and `undefined` are exceptions. They have no corresponding "wrapper objects" and provide no methods. In a sense, they are "the most primitive". - -An attempt to access a property of such value would give the error: - -```js run -alert(null.test); // error -```` - -## Summary - -- Primitives except `null` and `undefined` provide many helpful methods. We will study those in the upcoming chapters. -- Formally, these methods work via temporary objects, but JavaScript engines are well tuned to optimize that internally, so they are not expensive to call. diff --git a/1-js/05-data-types/02-number/1-sum-interface/solution.md b/1-js/05-data-types/02-number/1-sum-interface/solution.md deleted file mode 100644 index f2c81437d9..0000000000 --- a/1-js/05-data-types/02-number/1-sum-interface/solution.md +++ /dev/null @@ -1,12 +0,0 @@ - - -```js run demo -let a = +prompt("The first number?", ""); -let b = +prompt("The second number?", ""); - -alert( a + b ); -``` - -Note the unary plus `+` before `prompt`. It immediately converts the value to a number. - -Otherwise, `a` and `b` would be string their sum would be their concatenation, that is: `"1" + "2" = "12"`. \ No newline at end of file diff --git a/1-js/05-data-types/02-number/1-sum-interface/task.md b/1-js/05-data-types/02-number/1-sum-interface/task.md deleted file mode 100644 index 7801266402..0000000000 --- a/1-js/05-data-types/02-number/1-sum-interface/task.md +++ /dev/null @@ -1,11 +0,0 @@ -importance: 5 - ---- - -# Sum numbers from the visitor - -Create a script that prompts the visitor to enter two numbers and then shows their sum. - -[demo] - -P.S. There is a gotcha with types. diff --git a/1-js/05-data-types/02-number/2-why-rounded-down/solution.md b/1-js/05-data-types/02-number/2-why-rounded-down/solution.md deleted file mode 100644 index a17a4671a1..0000000000 --- a/1-js/05-data-types/02-number/2-why-rounded-down/solution.md +++ /dev/null @@ -1,33 +0,0 @@ -Internally the decimal fraction `6.35` is an endless binary. As always in such cases, it is stored with a precision loss. - -Let's see: - -```js run -alert( 6.35.toFixed(20) ); // 6.34999999999999964473 -``` - -The precision loss can cause both increase and decrease of a number. In this particular case the number becomes a tiny bit less, that's why it rounded down. - -And what's for `1.35`? - -```js run -alert( 1.35.toFixed(20) ); // 1.35000000000000008882 -``` - -Here the precision loss made the number a little bit greater, so it rounded up. - -**How can we fix the problem with `6.35` if we want it to be rounded the right way?** - -We should bring it closer to an integer prior to rounding: - -```js run -alert( (6.35 * 10).toFixed(20) ); // 63.50000000000000000000 -``` - -Note that `63.5` has no precision loss at all. That's because the decimal part `0.5` is actually `1/2`. Fractions divided by powers of `2` are exactly represented in the binary system, now we can round it: - - -```js run -alert( Math.round(6.35 * 10) / 10); // 6.35 -> 63.5 -> 64(rounded) -> 6.4 -``` - diff --git a/1-js/05-data-types/02-number/2-why-rounded-down/task.md b/1-js/05-data-types/02-number/2-why-rounded-down/task.md deleted file mode 100644 index 568c264805..0000000000 --- a/1-js/05-data-types/02-number/2-why-rounded-down/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 4 - ---- - -# Why 6.35.toFixed(1) == 6.3? - -According to the documentation `Math.round` and `toFixed` both round to the nearest number: `0..4` lead down while `5..9` lead up. - -For instance: - -```js run -alert( 1.35.toFixed(1) ); // 1.4 -``` - -In the similar example below, why is `6.35` rounded to `6.3`, not `6.4`? - -```js run -alert( 6.35.toFixed(1) ); // 6.3 -``` - -How to round `6.35` the right way? - diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js b/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js deleted file mode 100644 index a8c30c0109..0000000000 --- a/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js +++ /dev/null @@ -1,12 +0,0 @@ - -function readNumber() { - let num; - - do { - num = prompt("Enter a number please?", 0); - } while ( !isFinite(num) ); - - if (num === null || num === '') return null; - - return +num; -} \ No newline at end of file diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js b/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js deleted file mode 100644 index 6bd0123dba..0000000000 --- a/1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js +++ /dev/null @@ -1,38 +0,0 @@ -beforeEach(function() { - sinon.stub(window, "prompt"); -}); - -afterEach(function() { - prompt.restore(); -}); - -describe("readNumber", function() { - - it("if a number, returns it", function() { - prompt.returns("123"); - assert.strictEqual(readNumber(), 123); - }); - - it("if 0, returns it", function() { - prompt.returns("0"); - assert.strictEqual(readNumber(), 0); - }); - - it("continues the loop until meets a number", function() { - prompt.onCall(0).returns("not a number"); - prompt.onCall(1).returns("not a number again"); - prompt.onCall(2).returns("1"); - assert.strictEqual(readNumber(), 1); - }); - - it("if an empty line, returns null", function() { - prompt.returns(""); - assert.isNull(readNumber()); - }); - - it("if cancel, returns null", function() { - prompt.returns(null); - assert.isNull(readNumber()); - }); - -}); diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/solution.md b/1-js/05-data-types/02-number/3-repeat-until-number/solution.md deleted file mode 100644 index 005116d17a..0000000000 --- a/1-js/05-data-types/02-number/3-repeat-until-number/solution.md +++ /dev/null @@ -1,23 +0,0 @@ - -```js run demo -function readNumber() { - let num; - - do { - num = prompt("Enter a number please?", 0); - } while ( !isFinite(num) ); - - if (num === null || num === '') return null; - - return +num; -} - -alert(`Read: ${readNumber()}`); -``` - -The solution is a little bit more intricate that it could be because we need to handle `null`/empty lines. - -So we actually accept the input until it is a "regular number". Both `null` (cancel) and empty line also fit that condition, because in numeric form they are `0`. - -After we stopped, we need to treat `null` and empty line specially (return `null`), because converting them to a number would return `0`. - diff --git a/1-js/05-data-types/02-number/3-repeat-until-number/task.md b/1-js/05-data-types/02-number/3-repeat-until-number/task.md deleted file mode 100644 index 9b172fa8a2..0000000000 --- a/1-js/05-data-types/02-number/3-repeat-until-number/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Repeat until the input is a number - -Create a function `readNumber` which prompts for a number until the visitor enters a valid numeric value. - -The resulting value must be returned as a number. - -The visitor can also stop the process by entering an empty line or pressing "CANCEL". In that case, the function should return `null`. - -[demo] - diff --git a/1-js/05-data-types/02-number/4-endless-loop-error/solution.md b/1-js/05-data-types/02-number/4-endless-loop-error/solution.md deleted file mode 100644 index 8bc55bd027..0000000000 --- a/1-js/05-data-types/02-number/4-endless-loop-error/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -That's because `i` would never equal `10`. - -Run it to see the *real* values of `i`: - -```js run -let i = 0; -while (i < 11) { - i += 0.2; - if (i > 9.8 && i < 10.2) alert( i ); -} -``` - -None of them is exactly `10`. - -Such things happen because of the precision losses when adding fractions like `0.2`. - -Conclusion: evade equality checks when working with decimal fractions. \ No newline at end of file diff --git a/1-js/05-data-types/02-number/4-endless-loop-error/task.md b/1-js/05-data-types/02-number/4-endless-loop-error/task.md deleted file mode 100644 index 592ece31c0..0000000000 --- a/1-js/05-data-types/02-number/4-endless-loop-error/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 4 - ---- - -# An occasional infinite loop - -This loop is infinite. It never ends. Why? - -```js -let i = 0; -while (i != 10) { - i += 0.2; -} -``` - diff --git a/1-js/05-data-types/02-number/8-random-min-max/solution.md b/1-js/05-data-types/02-number/8-random-min-max/solution.md deleted file mode 100644 index 8736c3d561..0000000000 --- a/1-js/05-data-types/02-number/8-random-min-max/solution.md +++ /dev/null @@ -1,19 +0,0 @@ -We need to "map" all values from the interval 0..1 into values from `min` to `max`. - -That can be done in two stages: - -1. If we multiply a random number from 0..1 by `max-min`, then the interval of possible values increases `0..1` to `0..max-min`. -2. Now if we add `min`, the possible interval becomes from `min` to `max`. - -The function: - -```js run -function random(min, max) { - return min + Math.random() * (max - min); -} - -alert( random(1, 5) ); -alert( random(1, 5) ); -alert( random(1, 5) ); -``` - diff --git a/1-js/05-data-types/02-number/8-random-min-max/task.md b/1-js/05-data-types/02-number/8-random-min-max/task.md deleted file mode 100644 index 7037cfcbb9..0000000000 --- a/1-js/05-data-types/02-number/8-random-min-max/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 2 - ---- - -# A random number from min to max - -The built-in function `Math.random()` creates a random value from `0` to `1` (not including `1`). - -Write the function `random(min, max)` to generate a random floating-point number from `min` to `max` (not including `max`). - -Examples of its work: - -```js -alert( random(1, 5) ); // 1.2345623452 -alert( random(1, 5) ); // 3.7894332423 -alert( random(1, 5) ); // 4.3435234525 -``` diff --git a/1-js/05-data-types/02-number/9-random-int-min-max/solution.md b/1-js/05-data-types/02-number/9-random-int-min-max/solution.md deleted file mode 100644 index 0950ff812f..0000000000 --- a/1-js/05-data-types/02-number/9-random-int-min-max/solution.md +++ /dev/null @@ -1,66 +0,0 @@ -# The simple but wrong solution - -The simplest, but wrong solution would be to generate a value from `min` to `max` and round it: - -```js run -function randomInteger(min, max) { - let rand = min + Math.random() * (max - min); - return Math.round(rand); -} - -alert( randomInteger(1, 3) ); -``` - -The function works, but it is incorrect. The probability to get edge values `min` and `max` is two times less than any other. - -If you run the example above many times, you would easily see that `2` appears the most often. - -That happens because `Math.round()` gets random numbers from the interval `1..3` and rounds them as follows: - -```js no-beautify -values from 1 ... to 1.4999999999 become 1 -values from 1.5 ... to 2.4999999999 become 2 -values from 2.5 ... to 2.9999999999 become 3 -``` - -Now we can clearly see that `1` gets twice less values than `2`. And the same with `3`. - -# The correct solution - -There are many correct solutions to the task. One of them is to adjust interval borders. To ensure the same intervals, we can generate values from `0.5 to 3.5`, thus adding the required probabilities to the edges: - -```js run -*!* -function randomInteger(min, max) { - // now rand is from (min-0.5) to (max+0.5) - let rand = min - 0.5 + Math.random() * (max - min + 1); - return Math.round(rand); -} -*/!* - -alert( randomInteger(1, 3) ); -``` - -An alternative way could be to use `Math.floor` for a random number from `min` to `max+1`: - -```js run -*!* -function randomInteger(min, max) { - // here rand is from min to (max+1) - let rand = min + Math.random() * (max + 1 - min); - return Math.floor(rand); -} -*/!* - -alert( randomInteger(1, 3) ); -``` - -Now all intervals are mapped this way: - -```js no-beautify -values from 1 ... to 1.9999999999 become 1 -values from 2 ... to 2.9999999999 become 2 -values from 3 ... to 3.9999999999 become 3 -``` - -All intervals have the same length, making the final distribution uniform. diff --git a/1-js/05-data-types/02-number/9-random-int-min-max/task.md b/1-js/05-data-types/02-number/9-random-int-min-max/task.md deleted file mode 100644 index 4ac7b5fbbd..0000000000 --- a/1-js/05-data-types/02-number/9-random-int-min-max/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 2 - ---- - -# A random integer from min to max - -Create a function `randomInteger(min, max)` that generates a random *integer* number from `min` to `max` including both `min` and `max` as possible values. - -Any number from the interval `min..max` must appear with the same probability. - - -Examples of its work: - -```js -alert( randomInteger(1, 5) ); // 1 -alert( randomInteger(1, 5) ); // 3 -alert( randomInteger(1, 5) ); // 5 -``` - -You can use the solution of the [previous task](info:task/random-min-max) as the base. diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md deleted file mode 100644 index e768f4d473..0000000000 --- a/1-js/05-data-types/02-number/article.md +++ /dev/null @@ -1,435 +0,0 @@ -# Numbers - -In modern JavaScript, there are two types of numbers: - -1. Regular numbers in JavaScript are stored in 64-bit format [IEEE-754](https://en.wikipedia.org/wiki/IEEE_754-2008_revision), also known as "double precision floating point numbers". These are numbers that we're using most of the time, and we'll talk about them in this chapter. - -2. BigInt numbers, to represent integers of arbitrary length. They are sometimes needed, because a regular number can't exceed 253 or be less than -253. As bigints are used in few special areas, we devote them a special chapter . - -So here we'll talk about regular numbers. Let's expand our knowledge of them. - -## More ways to write a number - -Imagine we need to write 1 billion. The obvious way is: - -```js -let billion = 1000000000; -``` - -But in real life, we usually avoid writing a long string of zeroes as it's easy to mistype. Also, we are lazy. We will usually write something like `"1bn"` for a billion or `"7.3bn"` for 7 billion 300 million. The same is true for most large numbers. - -In JavaScript, we shorten a number by appending the letter `"e"` to the number and specifying the zeroes count: - -```js run -let billion = 1e9; // 1 billion, literally: 1 and 9 zeroes - -alert( 7.3e9 ); // 7.3 billions (7,300,000,000) -``` - -In other words, `"e"` multiplies the number by `1` with the given zeroes count. - -```js -1e3 = 1 * 1000 -1.23e6 = 1.23 * 1000000 -``` - -Now let's write something very small. Say, 1 microsecond (one millionth of a second): - -```js -let ms = 0.000001; -``` - -Just like before, using `"e"` can help. If we'd like to avoid writing the zeroes explicitly, we could say the same as: - -```js -let ms = 1e-6; // six zeroes to the left from 1 -``` - -If we count the zeroes in `0.000001`, there are 6 of them. So naturally it's `1e-6`. - -In other words, a negative number after `"e"` means a division by 1 with the given number of zeroes: - -```js -// -3 divides by 1 with 3 zeroes -1e-3 = 1 / 1000 (=0.001) - -// -6 divides by 1 with 6 zeroes -1.23e-6 = 1.23 / 1000000 (=0.00000123) -``` - -### Hex, binary and octal numbers - -[Hexadecimal](https://en.wikipedia.org/wiki/Hexadecimal) numbers are widely used in JavaScript to represent colors, encode characters, and for many other things. So naturally, there exists a shorter way to write them: `0x` and then the number. - -For instance: - -```js run -alert( 0xff ); // 255 -alert( 0xFF ); // 255 (the same, case doesn't matter) -``` - -Binary and octal numeral systems are rarely used, but also supported using the `0b` and `0o` prefixes: - - -```js run -let a = 0b11111111; // binary form of 255 -let b = 0o377; // octal form of 255 - -alert( a == b ); // true, the same number 255 at both sides -``` - -There are only 3 numeral systems with such support. For other numeral systems, we should use the function `parseInt` (which we will see later in this chapter). - -## toString(base) - -The method `num.toString(base)` returns a string representation of `num` in the numeral system with the given `base`. - -For example: -```js run -let num = 255; - -alert( num.toString(16) ); // ff -alert( num.toString(2) ); // 11111111 -``` - -The `base` can vary from `2` to `36`. By default it's `10`. - -Common use cases for this are: - -- **base=16** is used for hex colors, character encodings etc, digits can be `0..9` or `A..F`. -- **base=2** is mostly for debugging bitwise operations, digits can be `0` or `1`. -- **base=36** is the maximum, digits can be `0..9` or `A..Z`. The whole latin alphabet is used to represent a number. A funny, but useful case for `36` is when we need to turn a long numeric identifier into something shorter, for example to make a short url. Can simply represent it in the numeral system with base `36`: - - ```js run - alert( 123456..toString(36) ); // 2n9c - ``` - -```warn header="Two dots to call a method" -Please note that two dots in `123456..toString(36)` is not a typo. If we want to call a method directly on a number, like `toString` in the example above, then we need to place two dots `..` after it. - -If we placed a single dot: `123456.toString(36)`, then there would be an error, because JavaScript syntax implies the decimal part after the first dot. And if we place one more dot, then JavaScript knows that the decimal part is empty and now goes the method. - -Also could write `(123456).toString(36)`. -``` - -## Rounding - -One of the most used operations when working with numbers is rounding. - -There are several built-in functions for rounding: - -`Math.floor` -: Rounds down: `3.1` becomes `3`, and `-1.1` becomes `-2`. - -`Math.ceil` -: Rounds up: `3.1` becomes `4`, and `-1.1` becomes `-1`. - -`Math.round` -: Rounds to the nearest integer: `3.1` becomes `3`, `3.6` becomes `4` and `-1.1` becomes `-1`. - -`Math.trunc` (not supported by Internet Explorer) -: Removes anything after the decimal point without rounding: `3.1` becomes `3`, `-1.1` becomes `-1`. - -Here's the table to summarize the differences between them: - -| | `Math.floor` | `Math.ceil` | `Math.round` | `Math.trunc` | -|---|---------|--------|---------|---------| -|`3.1`| `3` | `4` | `3` | `3` | -|`3.6`| `3` | `4` | `4` | `3` | -|`-1.1`| `-2` | `-1` | `-1` | `-1` | -|`-1.6`| `-2` | `-1` | `-2` | `-1` | - - -These functions cover all of the possible ways to deal with the decimal part of a number. But what if we'd like to round the number to `n-th` digit after the decimal? - -For instance, we have `1.2345` and want to round it to 2 digits, getting only `1.23`. - -There are two ways to do so: - -1. Multiply-and-divide. - - For example, to round the number to the 2nd digit after the decimal, we can multiply the number by `100` (or a bigger power of 10), call the rounding function and then divide it back. - ```js run - let num = 1.23456; - - alert( Math.floor(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23 - ``` - -2. The method [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) rounds the number to `n` digits after the point and returns a string representation of the result. - - ```js run - let num = 12.34; - alert( num.toFixed(1) ); // "12.3" - ``` - - This rounds up or down to the nearest value, similar to `Math.round`: - - ```js run - let num = 12.36; - alert( num.toFixed(1) ); // "12.4" - ``` - - Please note that result of `toFixed` is a string. If the decimal part is shorter than required, zeroes are appended to the end: - - ```js run - let num = 12.34; - alert( num.toFixed(5) ); // "12.34000", added zeroes to make exactly 5 digits - ``` - - We can convert it to a number using the unary plus or a `Number()` call: `+num.toFixed(5)`. - -## Imprecise calculations - -Internally, a number is represented in 64-bit format [IEEE-754](https://en.wikipedia.org/wiki/IEEE_754-2008_revision), so there are exactly 64 bits to store a number: 52 of them are used to store the digits, 11 of them store the position of the decimal point (they are zero for integer numbers), and 1 bit is for the sign. - -If a number is too big, it would overflow the 64-bit storage, potentially giving an infinity: - -```js run -alert( 1e500 ); // Infinity -``` - -What may be a little less obvious, but happens quite often, is the loss of precision. - -Consider this (falsy!) test: - -```js run -alert( 0.1 + 0.2 == 0.3 ); // *!*false*/!* -``` - -That's right, if we check whether the sum of `0.1` and `0.2` is `0.3`, we get `false`. - -Strange! What is it then if not `0.3`? - -```js run -alert( 0.1 + 0.2 ); // 0.30000000000000004 -``` - -Ouch! There are more consequences than an incorrect comparison here. Imagine you're making an e-shopping site and the visitor puts `$0.10` and `$0.20` goods into their cart. The order total will be `$0.30000000000000004`. That would surprise anyone. - -But why does this happen? - -A number is stored in memory in its binary form, a sequence of bits - ones and zeroes. But fractions like `0.1`, `0.2` that look simple in the decimal numeric system are actually unending fractions in their binary form. - -In other words, what is `0.1`? It is one divided by ten `1/10`, one-tenth. In decimal numeral system such numbers are easily representable. Compare it to one-third: `1/3`. It becomes an endless fraction `0.33333(3)`. - -So, division by powers `10` is guaranteed to work well in the decimal system, but division by `3` is not. For the same reason, in the binary numeral system, the division by powers of `2` is guaranteed to work, but `1/10` becomes an endless binary fraction. - -There's just no way to store *exactly 0.1* or *exactly 0.2* using the binary system, just like there is no way to store one-third as a decimal fraction. - -The numeric format IEEE-754 solves this by rounding to the nearest possible number. These rounding rules normally don't allow us to see that "tiny precision loss", but it exists. - -We can see this in action: -```js run -alert( 0.1.toFixed(20) ); // 0.10000000000000000555 -``` - -And when we sum two numbers, their "precision losses" add up. - -That's why `0.1 + 0.2` is not exactly `0.3`. - -```smart header="Not only JavaScript" -The same issue exists in many other programming languages. - -PHP, Java, C, Perl, Ruby give exactly the same result, because they are based on the same numeric format. -``` - -Can we work around the problem? Sure, the most reliable method is to round the result with the help of a method [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed): - -```js run -let sum = 0.1 + 0.2; -alert( sum.toFixed(2) ); // 0.30 -``` - -Please note that `toFixed` always returns a string. It ensures that it has 2 digits after the decimal point. That's actually convenient if we have an e-shopping and need to show `$0.30`. For other cases, we can use the unary plus to coerce it into a number: - -```js run -let sum = 0.1 + 0.2; -alert( +sum.toFixed(2) ); // 0.3 -``` - -We also can temporarily multiply the numbers by 100 (or a bigger number) to turn them into integers, do the maths, and then divide back. Then, as we're doing maths with integers, the error somewhat decreases, but we still get it on division: - -```js run -alert( (0.1 * 10 + 0.2 * 10) / 10 ); // 0.3 -alert( (0.28 * 100 + 0.14 * 100) / 100); // 0.4200000000000001 -``` - -So, multiply/divide approach reduces the error, but doesn't remove it totally. - -Sometimes we could try to evade fractions at all. Like if we're dealing with a shop, then we can store prices in cents instead of dollars. But what if we apply a discount of 30%? In practice, totally evading fractions is rarely possible. Just round them to cut "tails" when needed. - -````smart header="The funny thing" -Try running this: - -```js run -// Hello! I'm a self-increasing number! -alert( 9999999999999999 ); // shows 10000000000000000 -``` - -This suffers from the same issue: a loss of precision. There are 64 bits for the number, 52 of them can be used to store digits, but that's not enough. So the least significant digits disappear. - -JavaScript doesn't trigger an error in such events. It does its best to fit the number into the desired format, but unfortunately, this format is not big enough. -```` - -```smart header="Two zeroes" -Another funny consequence of the internal representation of numbers is the existence of two zeroes: `0` and `-0`. - -That's because a sign is represented by a single bit, so it can be set or not set for any number including a zero. - -In most cases the distinction is unnoticeable, because operators are suited to treat them as the same. -``` - -## Tests: isFinite and isNaN - -Remember these two special numeric values? - -- `Infinity` (and `-Infinity`) is a special numeric value that is greater (less) than anything. -- `NaN` represents an error. - -They belong to the type `number`, but are not "normal" numbers, so there are special functions to check for them: - - -- `isNaN(value)` converts its argument to a number and then tests it for being `NaN`: - - ```js run - alert( isNaN(NaN) ); // true - alert( isNaN("str") ); // true - ``` - - But do we need this function? Can't we just use the comparison `=== NaN`? Sorry, but the answer is no. The value `NaN` is unique in that it does not equal anything, including itself: - - ```js run - alert( NaN === NaN ); // false - ``` - -- `isFinite(value)` converts its argument to a number and returns `true` if it's a regular number, not `NaN/Infinity/-Infinity`: - - ```js run - alert( isFinite("15") ); // true - alert( isFinite("str") ); // false, because a special value: NaN - alert( isFinite(Infinity) ); // false, because a special value: Infinity - ``` - -Sometimes `isFinite` is used to validate whether a string value is a regular number: - - -```js run -let num = +prompt("Enter a number", ''); - -// will be true unless you enter Infinity, -Infinity or not a number -alert( isFinite(num) ); -``` - -Please note that an empty or a space-only string is treated as `0` in all numeric functions including `isFinite`. - -```smart header="Compare with `Object.is`" - -There is a special built-in method [`Object.is`](mdn:js/Object/is) that compares values like `===`, but is more reliable for two edge cases: - -1. It works with `NaN`: `Object.is(NaN, NaN) === true`, that's a good thing. -2. Values `0` and `-0` are different: `Object.is(0, -0) === false`, technically that's true, because internally the number has a sign bit that may be different even if all other bits are zeroes. - -In all other cases, `Object.is(a, b)` is the same as `a === b`. - -This way of comparison is often used in JavaScript specification. When an internal algorithm needs to compare two values for being exactly the same, it uses `Object.is` (internally called [SameValue](https://tc39.github.io/ecma262/#sec-samevalue)). -``` - - -## parseInt and parseFloat - -Numeric conversion using a plus `+` or `Number()` is strict. If a value is not exactly a number, it fails: - -```js run -alert( +"100px" ); // NaN -``` - -The sole exception is spaces at the beginning or at the end of the string, as they are ignored. - -But in real life we often have values in units, like `"100px"` or `"12pt"` in CSS. Also in many countries the currency symbol goes after the amount, so we have `"19€"` and would like to extract a numeric value out of that. - -That's what `parseInt` and `parseFloat` are for. - -They "read" a number from a string until they can't. In case of an error, the gathered number is returned. The function `parseInt` returns an integer, whilst `parseFloat` will return a floating-point number: - -```js run -alert( parseInt('100px') ); // 100 -alert( parseFloat('12.5em') ); // 12.5 - -alert( parseInt('12.3') ); // 12, only the integer part is returned -alert( parseFloat('12.3.4') ); // 12.3, the second point stops the reading -``` - -There are situations when `parseInt/parseFloat` will return `NaN`. It happens when no digits could be read: - -```js run -alert( parseInt('a123') ); // NaN, the first symbol stops the process -``` - -````smart header="The second argument of `parseInt(str, radix)`" -The `parseInt()` function has an optional second parameter. It specifies the base of the numeral system, so `parseInt` can also parse strings of hex numbers, binary numbers and so on: - -```js run -alert( parseInt('0xff', 16) ); // 255 -alert( parseInt('ff', 16) ); // 255, without 0x also works - -alert( parseInt('2n9c', 36) ); // 123456 -``` -```` - -## Other math functions - -JavaScript has a built-in [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object which contains a small library of mathematical functions and constants. - -A few examples: - -`Math.random()` -: Returns a random number from 0 to 1 (not including 1) - - ```js run - alert( Math.random() ); // 0.1234567894322 - alert( Math.random() ); // 0.5435252343232 - alert( Math.random() ); // ... (any random numbers) - ``` - -`Math.max(a, b, c...)` / `Math.min(a, b, c...)` -: Returns the greatest/smallest from the arbitrary number of arguments. - - ```js run - alert( Math.max(3, 5, -10, 0, 1) ); // 5 - alert( Math.min(1, 2) ); // 1 - ``` - -`Math.pow(n, power)` -: Returns `n` raised the given power - - ```js run - alert( Math.pow(2, 10) ); // 2 in power 10 = 1024 - ``` - -There are more functions and constants in `Math` object, including trigonometry, which you can find in the [docs for the Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object. - -## Summary - -To write numbers with many zeroes: - -- Append `"e"` with the zeroes count to the number. Like: `123e6` is the same as `123` with 6 zeroes `123000000`. -- A negative number after `"e"` causes the number to be divided by 1 with given zeroes. E.g. `123e-6` means `0.000123` (`123` millionths). - -For different numeral systems: - -- Can write numbers directly in hex (`0x`), octal (`0o`) and binary (`0b`) systems. -- `parseInt(str, base)` parses the string `str` into an integer in numeral system with given `base`, `2 ≤ base ≤ 36`. -- `num.toString(base)` converts a number to a string in the numeral system with the given `base`. - -For converting values like `12pt` and `100px` to a number: - -- Use `parseInt/parseFloat` for the "soft" conversion, which reads a number from a string and then returns the value they could read before the error. - -For fractions: - -- Round using `Math.floor`, `Math.ceil`, `Math.trunc`, `Math.round` or `num.toFixed(precision)`. -- Make sure to remember there's a loss of precision when working with fractions. - -More mathematical functions: - -- See the [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object when you need them. The library is very small, but can cover basic needs. diff --git a/1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js b/1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js deleted file mode 100644 index 20e687a4d5..0000000000 --- a/1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js +++ /dev/null @@ -1,5 +0,0 @@ -function ucFirst(str) { - if (!str) return str; - - return str[0].toUpperCase() + str.slice(1); -} \ No newline at end of file diff --git a/1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js b/1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js deleted file mode 100644 index d5c50ff574..0000000000 --- a/1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js +++ /dev/null @@ -1,9 +0,0 @@ -describe("ucFirst", function() { - it('Uppercases the first symbol', function() { - assert.strictEqual(ucFirst("john"), "John"); - }); - - it("Doesn't die on an empty string", function() { - assert.strictEqual(ucFirst(""), ""); - }); -}); \ No newline at end of file diff --git a/1-js/05-data-types/03-string/1-ucfirst/solution.md b/1-js/05-data-types/03-string/1-ucfirst/solution.md deleted file mode 100644 index f7a332d0dc..0000000000 --- a/1-js/05-data-types/03-string/1-ucfirst/solution.md +++ /dev/null @@ -1,27 +0,0 @@ -We can't "replace" the first character, because strings in JavaScript are immutable. - -But we can make a new string based on the existing one, with the uppercased first character: - -```js -let newStr = str[0].toUpperCase() + str.slice(1); -``` - -There's a small problem though. If `str` is empty, then `str[0]` is `undefined`, and as `undefined` doesn't have the `toUpperCase()` method, we'll get an error. - -There are two variants here: - -1. Use `str.charAt(0)`, as it always returns a string (maybe empty). -2. Add a test for an empty string. - -Here's the 2nd variant: - -```js run demo -function ucFirst(str) { - if (!str) return str; - - return str[0].toUpperCase() + str.slice(1); -} - -alert( ucFirst("john") ); // John -``` - diff --git a/1-js/05-data-types/03-string/1-ucfirst/task.md b/1-js/05-data-types/03-string/1-ucfirst/task.md deleted file mode 100644 index ed8a1e6a71..0000000000 --- a/1-js/05-data-types/03-string/1-ucfirst/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# Uppercase the first character - -Write a function `ucFirst(str)` that returns the string `str` with the uppercased first character, for instance: - -```js -ucFirst("john") == "John"; -``` - diff --git a/1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js b/1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js deleted file mode 100644 index 105d70eaef..0000000000 --- a/1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js +++ /dev/null @@ -1,5 +0,0 @@ -function checkSpam(str) { - let lowerStr = str.toLowerCase(); - - return lowerStr.includes('viagra') || lowerStr.includes('xxx'); -} \ No newline at end of file diff --git a/1-js/05-data-types/03-string/2-check-spam/_js.view/test.js b/1-js/05-data-types/03-string/2-check-spam/_js.view/test.js deleted file mode 100644 index 85eb24fcb9..0000000000 --- a/1-js/05-data-types/03-string/2-check-spam/_js.view/test.js +++ /dev/null @@ -1,13 +0,0 @@ -describe("checkSpam", function() { - it('finds spam in "buy ViAgRA now"', function() { - assert.isTrue(checkSpam('buy ViAgRA now')); - }); - - it('finds spam in "free xxxxx"', function() { - assert.isTrue(checkSpam('free xxxxx')); - }); - - it('no spam in "innocent rabbit"', function() { - assert.isFalse(checkSpam('innocent rabbit')); - }); -}); \ No newline at end of file diff --git a/1-js/05-data-types/03-string/2-check-spam/solution.md b/1-js/05-data-types/03-string/2-check-spam/solution.md deleted file mode 100644 index de8dde57d3..0000000000 --- a/1-js/05-data-types/03-string/2-check-spam/solution.md +++ /dev/null @@ -1,14 +0,0 @@ -To make the search case-insensitive, let's bring the string to lower case and then search: - -```js run demo -function checkSpam(str) { - let lowerStr = str.toLowerCase(); - - return lowerStr.includes('viagra') || lowerStr.includes('xxx'); -} - -alert( checkSpam('buy ViAgRA now') ); -alert( checkSpam('free xxxxx') ); -alert( checkSpam("innocent rabbit") ); -``` - diff --git a/1-js/05-data-types/03-string/2-check-spam/task.md b/1-js/05-data-types/03-string/2-check-spam/task.md deleted file mode 100644 index 98b5dd8a04..0000000000 --- a/1-js/05-data-types/03-string/2-check-spam/task.md +++ /dev/null @@ -1,16 +0,0 @@ -importance: 5 - ---- - -# Check for spam - -Write a function `checkSpam(str)` that returns `true` if `str` contains 'viagra' or 'XXX', otherwise `false`. - -The function must be case-insensitive: - -```js -checkSpam('buy ViAgRA now') == true -checkSpam('free xxxxx') == true -checkSpam("innocent rabbit") == false -``` - diff --git a/1-js/05-data-types/03-string/3-truncate/_js.view/solution.js b/1-js/05-data-types/03-string/3-truncate/_js.view/solution.js deleted file mode 100644 index f587df1fa3..0000000000 --- a/1-js/05-data-types/03-string/3-truncate/_js.view/solution.js +++ /dev/null @@ -1,4 +0,0 @@ -function truncate(str, maxlength) { - return (str.length > maxlength) ? - str.slice(0, maxlength - 1) + '…' : str; -} \ No newline at end of file diff --git a/1-js/05-data-types/03-string/3-truncate/_js.view/test.js b/1-js/05-data-types/03-string/3-truncate/_js.view/test.js deleted file mode 100644 index 9914923315..0000000000 --- a/1-js/05-data-types/03-string/3-truncate/_js.view/test.js +++ /dev/null @@ -1,16 +0,0 @@ -describe("truncate", function() { - it("truncate the long string to the given length (including the ellipsis)", function() { - assert.equal( - truncate("What I'd like to tell on this topic is:", 20), - "What I'd like to te…" - ); - }); - - it("doesn't change short strings", function() { - assert.equal( - truncate("Hi everyone!", 20), - "Hi everyone!" - ); - }); - -}); diff --git a/1-js/05-data-types/03-string/3-truncate/solution.md b/1-js/05-data-types/03-string/3-truncate/solution.md deleted file mode 100644 index 5546c47eea..0000000000 --- a/1-js/05-data-types/03-string/3-truncate/solution.md +++ /dev/null @@ -1,10 +0,0 @@ -The maximal length must be `maxlength`, so we need to cut it a little shorter, to give space for the ellipsis. - -Note that there is actually a single unicode character for an ellipsis. That's not three dots. - -```js run demo -function truncate(str, maxlength) { - return (str.length > maxlength) ? - str.slice(0, maxlength - 1) + '…' : str; -} -``` diff --git a/1-js/05-data-types/03-string/3-truncate/task.md b/1-js/05-data-types/03-string/3-truncate/task.md deleted file mode 100644 index 6382029f40..0000000000 --- a/1-js/05-data-types/03-string/3-truncate/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 5 - ---- - -# Truncate the text - -Create a function `truncate(str, maxlength)` that checks the length of the `str` and, if it exceeds `maxlength` -- replaces the end of `str` with the ellipsis character `"…"`, to make its length equal to `maxlength`. - -The result of the function should be the truncated (if needed) string. - -For instance: - -```js -truncate("What I'd like to tell on this topic is:", 20) = "What I'd like to te…" - -truncate("Hi everyone!", 20) = "Hi everyone!" -``` diff --git a/1-js/05-data-types/03-string/4-extract-currency/_js.view/solution.js b/1-js/05-data-types/03-string/4-extract-currency/_js.view/solution.js deleted file mode 100644 index 828030dbad..0000000000 --- a/1-js/05-data-types/03-string/4-extract-currency/_js.view/solution.js +++ /dev/null @@ -1,3 +0,0 @@ -function extractCurrencyValue(str) { - return +str.slice(1); -} \ No newline at end of file diff --git a/1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js b/1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js deleted file mode 100644 index 1c3f0bbc19..0000000000 --- a/1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js +++ /dev/null @@ -1,8 +0,0 @@ -describe("extractCurrencyValue", function() { - - it("for the string $120 returns the number 120", function() { - assert.strictEqual(extractCurrencyValue('$120'), 120); - }); - - -}); \ No newline at end of file diff --git a/1-js/05-data-types/03-string/4-extract-currency/task.md b/1-js/05-data-types/03-string/4-extract-currency/task.md deleted file mode 100644 index feb16e6421..0000000000 --- a/1-js/05-data-types/03-string/4-extract-currency/task.md +++ /dev/null @@ -1,16 +0,0 @@ -importance: 4 - ---- - -# Extract the money - -We have a cost in the form `"$120"`. That is: the dollar sign goes first, and then the number. - -Create a function `extractCurrencyValue(str)` that would extract the numeric value from such string and return it. - -The example: - -```js -alert( extractCurrencyValue('$120') === 120 ); // true -``` - diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md deleted file mode 100644 index 765823d7c0..0000000000 --- a/1-js/05-data-types/03-string/article.md +++ /dev/null @@ -1,679 +0,0 @@ -# Strings - -In JavaScript, the textual data is stored as strings. There is no separate type for a single character. - -The internal format for strings is always [UTF-16](https://en.wikipedia.org/wiki/UTF-16), it is not tied to the page encoding. - -## Quotes - -Let's recall the kinds of quotes. - -Strings can be enclosed within either single quotes, double quotes or backticks: - -```js -let single = 'single-quoted'; -let double = "double-quoted"; - -let backticks = `backticks`; -``` - -Single and double quotes are essentially the same. Backticks, however, allow us to embed any expression into the string, by wrapping it in `${…}`: - -```js run -function sum(a, b) { - return a + b; -} - -alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. -``` - -Another advantage of using backticks is that they allow a string to span multiple lines: - -```js run -let guestList = `Guests: - * John - * Pete - * Mary -`; - -alert(guestList); // a list of guests, multiple lines -``` - -Looks natural, right? But single or double quotes do not work this way. - -If we use them and try to use multiple lines, there'll be an error: - -```js run -let guestList = "Guests: // Error: Unexpected token ILLEGAL - * John"; -``` - -Single and double quotes come from ancient times of language creation when the need for multiline strings was not taken into account. Backticks appeared much later and thus are more versatile. - -Backticks also allow us to specify a "template function" before the first backtick. The syntax is: func`string`. The function `func` is called automatically, receives the string and embedded expressions and can process them. This is called "tagged templates". This feature makes it easier to implement custom templating, but is rarely used in practice. You can read more about it in the [manual](mdn:/JavaScript/Reference/Template_literals#Tagged_templates). - -## Special characters - -It is still possible to create multiline strings with single and double quotes by using a so-called "newline character", written as `\n`, which denotes a line break: - -```js run -let guestList = "Guests:\n * John\n * Pete\n * Mary"; - -alert(guestList); // a multiline list of guests -``` - -For example, these two lines are equal, just written differently: - -```js run -let str1 = "Hello\nWorld"; // two lines using a "newline symbol" - -// two lines using a normal newline and backticks -let str2 = `Hello -World`; - -alert(str1 == str2); // true -``` - -There are other, less common "special" characters. - -Here's the full list: - -| Character | Description | -|-----------|-------------| -|`\n`|New line| -|`\r`|Carriage return: not used alone. Windows text files use a combination of two characters `\r\n` to represent a line break. | -|`\'`, `\"`|Quotes| -|`\\`|Backslash| -|`\t`|Tab| -|`\b`, `\f`, `\v`| Backspace, Form Feed, Vertical Tab -- kept for compatibility, not used nowadays. | -|`\xXX`|Unicode character with the given hexadecimal unicode `XX`, e.g. `'\x7A'` is the same as `'z'`.| -|`\uXXXX`|A unicode symbol with the hex code `XXXX` in UTF-16 encoding, for instance `\u00A9` -- is a unicode for the copyright symbol `©`. It must be exactly 4 hex digits. | -|`\u{X…XXXXXX}` (1 to 6 hex characters)|A unicode symbol with the given UTF-32 encoding. Some rare characters are encoded with two unicode symbols, taking 4 bytes. This way we can insert long codes. | - -Examples with unicode: - -```js run -alert( "\u00A9" ); // © -alert( "\u{20331}" ); // 佫, a rare Chinese hieroglyph (long unicode) -alert( "\u{1F60D}" ); // 😍, a smiling face symbol (another long unicode) -``` - -All special characters start with a backslash character `\`. It is also called an "escape character". - -We might also use it if we wanted to insert a quote into the string. - -For instance: - -```js run -alert( 'I*!*\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus! -``` - -As you can see, we have to prepend the inner quote by the backslash `\'`, because otherwise it would indicate the string end. - -Of course, only to the quotes that are the same as the enclosing ones need to be escaped. So, as a more elegant solution, we could switch to double quotes or backticks instead: - -```js run -alert( `I'm the Walrus!` ); // I'm the Walrus! -``` - -Note that the backslash `\` serves for the correct reading of the string by JavaScript, then disappears. The in-memory string has no `\`. You can clearly see that in `alert` from the examples above. - -But what if we need to show an actual backslash `\` within the string? - -That's possible, but we need to double it like `\\`: - -```js run -alert( `The backslash: \\` ); // The backslash: \ -``` - -## String length - -The `length` property has the string length: - -```js run -alert( `My\n`.length ); // 3 -``` - -Note that `\n` is a single "special" character, so the length is indeed `3`. - -```warn header="`length` is a property" -People with a background in some other languages sometimes mistype by calling `str.length()` instead of just `str.length`. That doesn't work. - -Please note that `str.length` is a numeric property, not a function. There is no need to add parenthesis after it. -``` - -## Accessing characters - -To get a character at position `pos`, use square brackets `[pos]` or call the method [str.charAt(pos)](mdn:js/String/charAt). The first character starts from the zero position: - -```js run -let str = `Hello`; - -// the first character -alert( str[0] ); // H -alert( str.charAt(0) ); // H - -// the last character -alert( str[str.length - 1] ); // o -``` - -The square brackets are a modern way of getting a character, while `charAt` exists mostly for historical reasons. - -The only difference between them is that if no character is found, `[]` returns `undefined`, and `charAt` returns an empty string: - -```js run -let str = `Hello`; - -alert( str[1000] ); // undefined -alert( str.charAt(1000) ); // '' (an empty string) -``` - -We can also iterate over characters using `for..of`: - -```js run -for (let char of "Hello") { - alert(char); // H,e,l,l,o (char becomes "H", then "e", then "l" etc) -} -``` - -## Strings are immutable - -Strings can't be changed in JavaScript. It is impossible to change a character. - -Let's try it to show that it doesn't work: - -```js run -let str = 'Hi'; - -str[0] = 'h'; // error -alert( str[0] ); // doesn't work -``` - -The usual workaround is to create a whole new string and assign it to `str` instead of the old one. - -For instance: - -```js run -let str = 'Hi'; - -str = 'h' + str[1]; // replace the string - -alert( str ); // hi -``` - -In the following sections we'll see more examples of this. - -## Changing the case - -Methods [toLowerCase()](mdn:js/String/toLowerCase) and [toUpperCase()](mdn:js/String/toUpperCase) change the case: - -```js run -alert( 'Interface'.toUpperCase() ); // INTERFACE -alert( 'Interface'.toLowerCase() ); // interface -``` - -Or, if we want a single character lowercased: - -```js -alert( 'Interface'[0].toLowerCase() ); // 'i' -``` - -## Searching for a substring - -There are multiple ways to look for a substring within a string. - -### str.indexOf - -The first method is [str.indexOf(substr, pos)](mdn:js/String/indexOf). - -It looks for the `substr` in `str`, starting from the given position `pos`, and returns the position where the match was found or `-1` if nothing can be found. - -For instance: - -```js run -let str = 'Widget with id'; - -alert( str.indexOf('Widget') ); // 0, because 'Widget' is found at the beginning -alert( str.indexOf('widget') ); // -1, not found, the search is case-sensitive - -alert( str.indexOf("id") ); // 1, "id" is found at the position 1 (..idget with id) -``` - -The optional second parameter allows us to search starting from the given position. - -For instance, the first occurrence of `"id"` is at position `1`. To look for the next occurrence, let's start the search from position `2`: - -```js run -let str = 'Widget with id'; - -alert( str.indexOf('id', 2) ) // 12 -``` - -If we're interested in all occurrences, we can run `indexOf` in a loop. Every new call is made with the position after the previous match: - -```js run -let str = 'As sly as a fox, as strong as an ox'; - -let target = 'as'; // let's look for it - -let pos = 0; -while (true) { - let foundPos = str.indexOf(target, pos); - if (foundPos == -1) break; - - alert( `Found at ${foundPos}` ); - pos = foundPos + 1; // continue the search from the next position -} -``` - -The same algorithm can be layed out shorter: - -```js run -let str = "As sly as a fox, as strong as an ox"; -let target = "as"; - -*!* -let pos = -1; -while ((pos = str.indexOf(target, pos + 1)) != -1) { - alert( pos ); -} -*/!* -``` - -```smart header="`str.lastIndexOf(substr, position)`" -There is also a similar method [str.lastIndexOf(substr, position)](mdn:js/String/lastIndexOf) that searches from the end of a string to its beginning. - -It would list the occurrences in the reverse order. -``` - -There is a slight inconvenience with `indexOf` in the `if` test. We can't put it in the `if` like this: - -```js run -let str = "Widget with id"; - -if (str.indexOf("Widget")) { - alert("We found it"); // doesn't work! -} -``` - -The `alert` in the example above doesn't show because `str.indexOf("Widget")` returns `0` (meaning that it found the match at the starting position). Right, but `if` considers `0` to be `false`. - -So, we should actually check for `-1`, like this: - -```js run -let str = "Widget with id"; - -*!* -if (str.indexOf("Widget") != -1) { -*/!* - alert("We found it"); // works now! -} -``` - -#### The bitwise NOT trick - -One of the old tricks used here is the [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~` operator. It converts the number to a 32-bit integer (removes the decimal part if exists) and then reverses all bits in its binary representation. - -In practice, that means a simple thing: for 32-bit integers `~n` equals `-(n+1)`. - -For instance: - -```js run -alert( ~2 ); // -3, the same as -(2+1) -alert( ~1 ); // -2, the same as -(1+1) -alert( ~0 ); // -1, the same as -(0+1) -*!* -alert( ~-1 ); // 0, the same as -(-1+1) -*/!* -``` - -As we can see, `~n` is zero only if `n == -1` (that's for any 32-bit signed integer `n`). - -So, the test `if ( ~str.indexOf("...") )` is truthy only if the result of `indexOf` is not `-1`. In other words, when there is a match. - -People use it to shorten `indexOf` checks: - -```js run -let str = "Widget"; - -if (~str.indexOf("Widget")) { - alert( 'Found it!' ); // works -} -``` - -It is usually not recommended to use language features in a non-obvious way, but this particular trick is widely used in old code, so we should understand it. - -Just remember: `if (~str.indexOf(...))` reads as "if found". - -To be precise though, as big numbers are truncated to 32 bits by `~` operator, there exist other numbers that give `0`, the smallest is `~4294967295=0`. That makes such check is correct only if a string is not that long. - -Right now we can see this trick only in the old code, as modern JavaScript provides `.includes` method (see below). - -### includes, startsWith, endsWith - -The more modern method [str.includes(substr, pos)](mdn:js/String/includes) returns `true/false` depending on whether `str` contains `substr` within. - -It's the right choice if we need to test for the match, but don't need its position: - -```js run -alert( "Widget with id".includes("Widget") ); // true - -alert( "Hello".includes("Bye") ); // false -``` - -The optional second argument of `str.includes` is the position to start searching from: - -```js run -alert( "Widget".includes("id") ); // true -alert( "Widget".includes("id", 3) ); // false, from position 3 there is no "id" -``` - -The methods [str.startsWith](mdn:js/String/startsWith) and [str.endsWith](mdn:js/String/endsWith) do exactly what they say: - -```js run -alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid" -alert( "Widget".endsWith("get") ); // true, "Widget" ends with "get" -``` - -## Getting a substring - -There are 3 methods in JavaScript to get a substring: `substring`, `substr` and `slice`. - -`str.slice(start [, end])` -: Returns the part of the string from `start` to (but not including) `end`. - - For instance: - - ```js run - let str = "stringify"; - alert( str.slice(0, 5) ); // 'strin', the substring from 0 to 5 (not including 5) - alert( str.slice(0, 1) ); // 's', from 0 to 1, but not including 1, so only character at 0 - ``` - - If there is no second argument, then `slice` goes till the end of the string: - - ```js run - let str = "st*!*ringify*/!*"; - alert( str.slice(2) ); // 'ringify', from the 2nd position till the end - ``` - - Negative values for `start/end` are also possible. They mean the position is counted from the string end: - - ```js run - let str = "strin*!*gif*/!*y"; - - // start at the 4th position from the right, end at the 1st from the right - alert( str.slice(-4, -1) ); // 'gif' - ``` - -`str.substring(start [, end])` -: Returns the part of the string *between* `start` and `end`. - - This is almost the same as `slice`, but it allows `start` to be greater than `end`. - - For instance: - - ```js run - let str = "st*!*ring*/!*ify"; - - // these are same for substring - alert( str.substring(2, 6) ); // "ring" - alert( str.substring(6, 2) ); // "ring" - - // ...but not for slice: - alert( str.slice(2, 6) ); // "ring" (the same) - alert( str.slice(6, 2) ); // "" (an empty string) - - ``` - - Negative arguments are (unlike slice) not supported, they are treated as `0`. - -`str.substr(start [, length])` -: Returns the part of the string from `start`, with the given `length`. - - In contrast with the previous methods, this one allows us to specify the `length` instead of the ending position: - - ```js run - let str = "st*!*ring*/!*ify"; - alert( str.substr(2, 4) ); // 'ring', from the 2nd position get 4 characters - ``` - - The first argument may be negative, to count from the end: - - ```js run - let str = "strin*!*gi*/!*fy"; - alert( str.substr(-4, 2) ); // 'gi', from the 4th position get 2 characters - ``` - -Let's recap these methods to avoid any confusion: - -| method | selects... | negatives | -|--------|-----------|-----------| -| `slice(start, end)` | from `start` to `end` (not including `end`) | allows negatives | -| `substring(start, end)` | between `start` and `end` | negative values mean `0` | -| `substr(start, length)` | from `start` get `length` characters | allows negative `start` | - -```smart header="Which one to choose?" -All of them can do the job. Formally, `substr` has a minor drawback: it is described not in the core JavaScript specification, but in Annex B, which covers browser-only features that exist mainly for historical reasons. So, non-browser environments may fail to support it. But in practice it works everywhere. - -Of the other two variants, `slice` is a little bit more flexible, it allows negative arguments and shorter to write. So, it's enough to remember solely `slice` of these three methods. -``` - -## Comparing strings - -As we know from the chapter , strings are compared character-by-character in alphabetical order. - -Although, there are some oddities. - -1. A lowercase letter is always greater than the uppercase: - - ```js run - alert( 'a' > 'Z' ); // true - ``` - -2. Letters with diacritical marks are "out of order": - - ```js run - alert( 'Österreich' > 'Zealand' ); // true - ``` - - This may lead to strange results if we sort these country names. Usually people would expect `Zealand` to come after `Österreich` in the list. - -To understand what happens, let's review the internal representation of strings in JavaScript. - -All strings are encoded using [UTF-16](https://en.wikipedia.org/wiki/UTF-16). That is: each character has a corresponding numeric code. There are special methods that allow to get the character for the code and back. - -`str.codePointAt(pos)` -: Returns the code for the character at position `pos`: - - ```js run - // different case letters have different codes - alert( "z".codePointAt(0) ); // 122 - alert( "Z".codePointAt(0) ); // 90 - ``` - -`String.fromCodePoint(code)` -: Creates a character by its numeric `code` - - ```js run - alert( String.fromCodePoint(90) ); // Z - ``` - - We can also add unicode characters by their codes using `\u` followed by the hex code: - - ```js run - // 90 is 5a in hexadecimal system - alert( '\u005a' ); // Z - ``` - -Now let's see the characters with codes `65..220` (the latin alphabet and a little bit extra) by making a string of them: - -```js run -let str = ''; - -for (let i = 65; i <= 220; i++) { - str += String.fromCodePoint(i); -} -alert( str ); -// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„ -// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ -``` - -See? Capital characters go first, then a few special ones, then lowercase characters, and `Ö` near the end of the output. - -Now it becomes obvious why `a > Z`. - -The characters are compared by their numeric code. The greater code means that the character is greater. The code for `a` (97) is greater than the code for `Z` (90). - -- All lowercase letters go after uppercase letters because their codes are greater. -- Some letters like `Ö` stand apart from the main alphabet. Here, it's code is greater than anything from `a` to `z`. - -### Correct comparisons - -The "right" algorithm to do string comparisons is more complex than it may seem, because alphabets are different for different languages. - -So, the browser needs to know the language to compare. - -Luckily, all modern browsers (IE10- requires the additional library [Intl.js](https://github.com/andyearnshaw/Intl.js/)) support the internationalization standard [ECMA-402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf). - -It provides a special method to compare strings in different languages, following their rules. - -The call [str.localeCompare(str2)](mdn:js/String/localeCompare) returns an integer indicating whether `str` is less, equal or greater than `str2` according to the language rules: - -- Returns a negative number if `str` is less than `str2`. -- Returns a positive number if `str` is greater than `str2`. -- Returns `0` if they are equivalent. - -For instance: - -```js run -alert( 'Österreich'.localeCompare('Zealand') ); // -1 -``` - -This method actually has two additional arguments specified in [the documentation](mdn:js/String/localeCompare), which allows it to specify the language (by default taken from the environment, letter order depends on the language) and setup additional rules like case sensitivity or should `"a"` and `"á"` be treated as the same etc. - -## Internals, Unicode - -```warn header="Advanced knowledge" -The section goes deeper into string internals. This knowledge will be useful for you if you plan to deal with emoji, rare mathematical or hieroglyphic characters or other rare symbols. - -You can skip the section if you don't plan to support them. -``` - -### Surrogate pairs - -All frequently used characters have 2-byte codes. Letters in most european languages, numbers, and even most hieroglyphs, have a 2-byte representation. - -But 2 bytes only allow 65536 combinations and that's not enough for every possible symbol. So rare symbols are encoded with a pair of 2-byte characters called "a surrogate pair". - -The length of such symbols is `2`: - -```js run -alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X -alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY -alert( '𩷶'.length ); // 2, a rare Chinese hieroglyph -``` - -Note that surrogate pairs did not exist at the time when JavaScript was created, and thus are not correctly processed by the language! - -We actually have a single symbol in each of the strings above, but the `length` shows a length of `2`. - -`String.fromCodePoint` and `str.codePointAt` are few rare methods that deal with surrogate pairs right. They recently appeared in the language. Before them, there were only [String.fromCharCode](mdn:js/String/fromCharCode) and [str.charCodeAt](mdn:js/String/charCodeAt). These methods are actually the same as `fromCodePoint/codePointAt`, but don't work with surrogate pairs. - -Getting a symbol can be tricky, because surrogate pairs are treated as two characters: - -```js run -alert( '𝒳'[0] ); // strange symbols... -alert( '𝒳'[1] ); // ...pieces of the surrogate pair -``` - -Note that pieces of the surrogate pair have no meaning without each other. So the alerts in the example above actually display garbage. - -Technically, surrogate pairs are also detectable by their codes: if a character has the code in the interval of `0xd800..0xdbff`, then it is the first part of the surrogate pair. The next character (second part) must have the code in interval `0xdc00..0xdfff`. These intervals are reserved exclusively for surrogate pairs by the standard. - -In the case above: - -```js run -// charCodeAt is not surrogate-pair aware, so it gives codes for parts - -alert( '𝒳'.charCodeAt(0).toString(16) ); // d835, between 0xd800 and 0xdbff -alert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, between 0xdc00 and 0xdfff -``` - -You will find more ways to deal with surrogate pairs later in the chapter . There are probably special libraries for that too, but nothing famous enough to suggest here. - -### Diacritical marks and normalization - -In many languages there are symbols that are composed of the base character with a mark above/under it. - -For instance, the letter `a` can be the base character for: `àáâäãåā`. Most common "composite" character have their own code in the UTF-16 table. But not all of them, because there are too many possible combinations. - -To support arbitrary compositions, UTF-16 allows us to use several unicode characters: the base character followed by one or many "mark" characters that "decorate" it. - -For instance, if we have `S` followed by the special "dot above" character (code `\u0307`), it is shown as Ṡ. - -```js run -alert( 'S\u0307' ); // Ṡ -``` - -If we need an additional mark above the letter (or below it) -- no problem, just add the necessary mark character. - -For instance, if we append a character "dot below" (code `\u0323`), then we'll have "S with dots above and below": `Ṩ`. - -For example: - -```js run -alert( 'S\u0307\u0323' ); // Ṩ -``` - -This provides great flexibility, but also an interesting problem: two characters may visually look the same, but be represented with different unicode compositions. - -For instance: - -```js run -let s1 = 'S\u0307\u0323'; // Ṩ, S + dot above + dot below -let s2 = 'S\u0323\u0307'; // Ṩ, S + dot below + dot above - -alert( `s1: ${s1}, s2: ${s2}` ); - -alert( s1 == s2 ); // false though the characters look identical (?!) -``` - -To solve this, there exists a "unicode normalization" algorithm that brings each string to the single "normal" form. - -It is implemented by [str.normalize()](mdn:js/String/normalize). - -```js run -alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true -``` - -It's funny that in our situation `normalize()` actually brings together a sequence of 3 characters to one: `\u1e68` (S with two dots). - -```js run -alert( "S\u0307\u0323".normalize().length ); // 1 - -alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true -``` - -In reality, this is not always the case. The reason being that the symbol `Ṩ` is "common enough", so UTF-16 creators included it in the main table and gave it the code. - -If you want to learn more about normalization rules and variants -- they are described in the appendix of the Unicode standard: [Unicode Normalization Forms](http://www.unicode.org/reports/tr15/), but for most practical purposes the information from this section is enough. - -## Summary - -- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions `${…}`. -- Strings in JavaScript are encoded using UTF-16. -- We can use special characters like `\n` and insert letters by their unicode using `\u...`. -- To get a character, use: `[]`. -- To get a substring, use: `slice` or `substring`. -- To lowercase/uppercase a string, use: `toLowerCase/toUpperCase`. -- To look for a substring, use: `indexOf`, or `includes/startsWith/endsWith` for simple checks. -- To compare strings according to the language, use: `localeCompare`, otherwise they are compared by character codes. - -There are several other helpful methods in strings: - -- `str.trim()` -- removes ("trims") spaces from the beginning and end of the string. -- `str.repeat(n)` -- repeats the string `n` times. -- ...and more to be found in the [manual](mdn:js/String). - -Strings also have methods for doing search/replace with regular expressions. But that's big topic, so it's explained in a separate tutorial section . diff --git a/1-js/05-data-types/04-array/1-item-value/solution.md b/1-js/05-data-types/04-array/1-item-value/solution.md deleted file mode 100644 index e631f1c708..0000000000 --- a/1-js/05-data-types/04-array/1-item-value/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -The result is `4`: - - -```js run -let fruits = ["Apples", "Pear", "Orange"]; - -let shoppingCart = fruits; - -shoppingCart.push("Banana"); - -*!* -alert( fruits.length ); // 4 -*/!* -``` - -That's because arrays are objects. So both `shoppingCart` and `fruits` are the references to the same array. - diff --git a/1-js/05-data-types/04-array/1-item-value/task.md b/1-js/05-data-types/04-array/1-item-value/task.md deleted file mode 100644 index 4fcf384fbb..0000000000 --- a/1-js/05-data-types/04-array/1-item-value/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 3 - ---- - -# Is array copied? - -What is this code going to show? - -```js -let fruits = ["Apples", "Pear", "Orange"]; - -// push a new value into the "copy" -let shoppingCart = fruits; -shoppingCart.push("Banana"); - -// what's in fruits? -alert( fruits.length ); // ? -``` - diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js b/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js deleted file mode 100644 index 5163283790..0000000000 --- a/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js +++ /dev/null @@ -1,11 +0,0 @@ -function getMaxSubSum(arr) { - let maxSum = 0; - let partialSum = 0; - - for (let item of arr) { - partialSum += item; - maxSum = Math.max(maxSum, partialSum); - if (partialSum < 0) partialSum = 0; - } - return maxSum; -} \ No newline at end of file diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js b/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js deleted file mode 100644 index b44e76fe7e..0000000000 --- a/1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js +++ /dev/null @@ -1,37 +0,0 @@ -describe("getMaxSubSum", function() { - it("maximal subsum of [1, 2, 3] equals 6", function() { - assert.equal(getMaxSubSum([1, 2, 3]), 6); - }); - - it("maximal subsum of [-1, 2, 3, -9] equals 5", function() { - assert.equal(getMaxSubSum([-1, 2, 3, -9]), 5); - }); - - it("maximal subsum of [-1, 2, 3, -9, 11] equals 11", function() { - assert.equal(getMaxSubSum([-1, 2, 3, -9, 11]), 11); - }); - - it("maximal subsum of [-2, -1, 1, 2] equals 3", function() { - assert.equal(getMaxSubSum([-2, -1, 1, 2]), 3); - }); - - it("maximal subsum of [100, -9, 2, -3, 5] equals 100", function() { - assert.equal(getMaxSubSum([100, -9, 2, -3, 5]), 100); - }); - - it("maximal subsum of [] equals 0", function() { - assert.equal(getMaxSubSum([]), 0); - }); - - it("maximal subsum of [-1] equals 0", function() { - assert.equal(getMaxSubSum([-1]), 0); - }); - - it("maximal subsum of [-1, -2] equals 0", function() { - assert.equal(getMaxSubSum([-1, -2]), 0); - }); - - it("maximal subsum of [2, -8, 5, -1, 2, -3, 2] equals 6", function() { - assert.equal(getMaxSubSum([2, -8, 5, -1, 2, -3, 2]), 6); - }); -}); diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/solution.md b/1-js/05-data-types/04-array/10-maximal-subarray/solution.md deleted file mode 100644 index daadf494b9..0000000000 --- a/1-js/05-data-types/04-array/10-maximal-subarray/solution.md +++ /dev/null @@ -1,94 +0,0 @@ -# Slow solution - -We can calculate all possible subsums. - -The simplest way is to take every element and calculate sums of all subarrays starting from it. - -For instance, for `[-1, 2, 3, -9, 11]`: - -```js no-beautify -// Starting from -1: --1 --1 + 2 --1 + 2 + 3 --1 + 2 + 3 + (-9) --1 + 2 + 3 + (-9) + 11 - -// Starting from 2: -2 -2 + 3 -2 + 3 + (-9) -2 + 3 + (-9) + 11 - -// Starting from 3: -3 -3 + (-9) -3 + (-9) + 11 - -// Starting from -9 --9 --9 + 11 - -// Starting from 11 -11 -``` - -The code is actually a nested loop: the external loop over array elements, and the internal counts subsums starting with the current element. - -```js run -function getMaxSubSum(arr) { - let maxSum = 0; // if we take no elements, zero will be returned - - for (let i = 0; i < arr.length; i++) { - let sumFixedStart = 0; - for (let j = i; j < arr.length; j++) { - sumFixedStart += arr[j]; - maxSum = Math.max(maxSum, sumFixedStart); - } - } - - return maxSum; -} - -alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5 -alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11 -alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3 -alert( getMaxSubSum([1, 2, 3]) ); // 6 -alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100 -``` - -The solution has a time complexety of [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation). In other words, if we increase the array size 2 times, the algorithm will work 4 times longer. - -For big arrays (1000, 10000 or more items) such algorithms can lead to a serious sluggishness. - -# Fast solution - -Let's walk the array and keep the current partial sum of elements in the variable `s`. If `s` becomes negative at some point, then assign `s=0`. The maximum of all such `s` will be the answer. - -If the description is too vague, please see the code, it's short enough: - -```js run demo -function getMaxSubSum(arr) { - let maxSum = 0; - let partialSum = 0; - - for (let item of arr) { // for each item of arr - partialSum += item; // add it to partialSum - maxSum = Math.max(maxSum, partialSum); // remember the maximum - if (partialSum < 0) partialSum = 0; // zero if negative - } - - return maxSum; -} - -alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5 -alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11 -alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3 -alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100 -alert( getMaxSubSum([1, 2, 3]) ); // 6 -alert( getMaxSubSum([-1, -2, -3]) ); // 0 -``` - -The algorithm requires exactly 1 array pass, so the time complexity is O(n). - -You can find more detail information about the algorithm here: [Maximum subarray problem](http://en.wikipedia.org/wiki/Maximum_subarray_problem). If it's still not obvious why that works, then please trace the algorithm on the examples above, see how it works, that's better than any words. diff --git a/1-js/05-data-types/04-array/10-maximal-subarray/task.md b/1-js/05-data-types/04-array/10-maximal-subarray/task.md deleted file mode 100644 index f1a1d9f956..0000000000 --- a/1-js/05-data-types/04-array/10-maximal-subarray/task.md +++ /dev/null @@ -1,30 +0,0 @@ -importance: 2 - ---- - -# A maximal subarray - -The input is an array of numbers, e.g. `arr = [1, -2, 3, 4, -9, 6]`. - -The task is: find the contiguous subarray of `arr` with the maximal sum of items. - -Write the function `getMaxSubSum(arr)` that will return that sum. - -For instance: - -```js -getMaxSubSum([-1, *!*2, 3*/!*, -9]) == 5 (the sum of highlighted items) -getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) == 6 -getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) == 11 -getMaxSubSum([-2, -1, *!*1, 2*/!*]) == 3 -getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) == 100 -getMaxSubSum([*!*1, 2, 3*/!*]) == 6 (take all) -``` - -If all items are negative, it means that we take none (the subarray is empty), so the sum is zero: - -```js -getMaxSubSum([-1, -2, -3]) = 0 -``` - -Please try to think of a fast solution: [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation) or even O(n) if you can. diff --git a/1-js/05-data-types/04-array/2-create-array/solution.md b/1-js/05-data-types/04-array/2-create-array/solution.md deleted file mode 100644 index f032b55f0c..0000000000 --- a/1-js/05-data-types/04-array/2-create-array/solution.md +++ /dev/null @@ -1,10 +0,0 @@ - - -```js run -let styles = ["Jazz", "Blues"]; -styles.push("Rock-n-Roll"); -styles[Math.floor((styles.length - 1) / 2)] = "Classics"; -alert( styles.shift() ); -styles.unshift("Rap", "Reggae"); -``` - diff --git a/1-js/05-data-types/04-array/2-create-array/task.md b/1-js/05-data-types/04-array/2-create-array/task.md deleted file mode 100644 index 16d14071f7..0000000000 --- a/1-js/05-data-types/04-array/2-create-array/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# Array operations. - -Let's try 5 array operations. - -1. Create an array `styles` with items "Jazz" and "Blues". -2. Append "Rock-n-Roll" to the end. -3. Replace the value in the middle by "Classics". Your code for finding the middle value should work for any arrays with odd length. -4. Strip off the first value of the array and show it. -5. Prepend `Rap` and `Reggae` to the array. - -The array in the process: - -```js no-beautify -Jazz, Blues -Jazz, Blues, Rock-n-Roll -Jazz, Classics, Rock-n-Roll -Classics, Rock-n-Roll -Rap, Reggae, Classics, Rock-n-Roll -``` - diff --git a/1-js/05-data-types/04-array/3-call-array-this/solution.md b/1-js/05-data-types/04-array/3-call-array-this/solution.md deleted file mode 100644 index 3cb0317cf8..0000000000 --- a/1-js/05-data-types/04-array/3-call-array-this/solution.md +++ /dev/null @@ -1,15 +0,0 @@ -The call `arr[2]()` is syntactically the good old `obj[method]()`, in the role of `obj` we have `arr`, and in the role of `method` we have `2`. - -So we have a call of the function `arr[2]` as an object method. Naturally, it receives `this` referencing the object `arr` and outputs the array: - -```js run -let arr = ["a", "b"]; - -arr.push(function() { - alert( this ); -}) - -arr[2](); // a,b,function(){...} -``` - -The array has 3 values: initially it had two, plus the function. diff --git a/1-js/05-data-types/04-array/3-call-array-this/task.md b/1-js/05-data-types/04-array/3-call-array-this/task.md deleted file mode 100644 index 340c5feefc..0000000000 --- a/1-js/05-data-types/04-array/3-call-array-this/task.md +++ /dev/null @@ -1,18 +0,0 @@ -importance: 5 - ---- - -# Calling in an array context - -What is the result? Why? - -```js -let arr = ["a", "b"]; - -arr.push(function() { - alert( this ); -}) - -arr[2](); // ? -``` - diff --git a/1-js/05-data-types/04-array/5-array-input-sum/solution.md b/1-js/05-data-types/04-array/5-array-input-sum/solution.md deleted file mode 100644 index 75bd683b55..0000000000 --- a/1-js/05-data-types/04-array/5-array-input-sum/solution.md +++ /dev/null @@ -1,28 +0,0 @@ -Please note the subtle, but important detail of the solution. We don't convert `value` to number instantly after `prompt`, because after `value = +value` we would not be able to tell an empty string (stop sign) from the zero (valid number). We do it later instead. - - -```js run demo -function sumInput() { - - let numbers = []; - - while (true) { - - let value = prompt("A number please?", 0); - - // should we cancel? - if (value === "" || value === null || !isFinite(value)) break; - - numbers.push(+value); - } - - let sum = 0; - for (let number of numbers) { - sum += number; - } - return sum; -} - -alert( sumInput() ); -``` - diff --git a/1-js/05-data-types/04-array/5-array-input-sum/task.md b/1-js/05-data-types/04-array/5-array-input-sum/task.md deleted file mode 100644 index 4af8e7c95f..0000000000 --- a/1-js/05-data-types/04-array/5-array-input-sum/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 4 - ---- - -# Sum input numbers - -Write the function `sumInput()` that: - -- Asks the user for values using `prompt` and stores the values in the array. -- Finishes asking when the user enters a non-numeric value, an empty string, or presses "Cancel". -- Calculates and returns the sum of array items. - -P.S. A zero `0` is a valid number, please don't stop the input on zero. - -[demo] diff --git a/1-js/05-data-types/04-array/array-pop.svg b/1-js/05-data-types/04-array/array-pop.svg deleted file mode 100644 index 351916051a..0000000000 --- a/1-js/05-data-types/04-array/array-pop.svg +++ /dev/null @@ -1 +0,0 @@ -0123"Apple""Orange""Pear""Lemon"length = 4clear012"Apple""Orange""Pear"length = 3 \ No newline at end of file diff --git a/1-js/05-data-types/04-array/array-shift.svg b/1-js/05-data-types/04-array/array-shift.svg deleted file mode 100644 index 09236b9d19..0000000000 --- a/1-js/05-data-types/04-array/array-shift.svg +++ /dev/null @@ -1 +0,0 @@ -123"Orange""Pear""Lemon"length = 423"Orange""Pear""Lemon"length = 3clearmove elements to the left0"Apple"012"Orange""Pear""Lemon"11 \ No newline at end of file diff --git a/1-js/05-data-types/04-array/array-speed.svg b/1-js/05-data-types/04-array/array-speed.svg deleted file mode 100644 index 5660cd5ec7..0000000000 --- a/1-js/05-data-types/04-array/array-speed.svg +++ /dev/null @@ -1 +0,0 @@ -0123popunshiftpushshift \ No newline at end of file diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md deleted file mode 100644 index 33498f40a1..0000000000 --- a/1-js/05-data-types/04-array/article.md +++ /dev/null @@ -1,463 +0,0 @@ -# Arrays - -Objects allow you to store keyed collections of values. That's fine. - -But quite often we find that we need an *ordered collection*, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. - -It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. - -There exists a special data structure named `Array`, to store ordered collections. - -## Declaration - -There are two syntaxes for creating an empty array: - -```js -let arr = new Array(); -let arr = []; -``` - -Almost all the time, the second syntax is used. We can supply initial elements in the brackets: - -```js -let fruits = ["Apple", "Orange", "Plum"]; -``` - -Array elements are numbered, starting with zero. - -We can get an element by its number in square brackets: - -```js run -let fruits = ["Apple", "Orange", "Plum"]; - -alert( fruits[0] ); // Apple -alert( fruits[1] ); // Orange -alert( fruits[2] ); // Plum -``` - -We can replace an element: - -```js -fruits[2] = 'Pear'; // now ["Apple", "Orange", "Pear"] -``` - -...Or add a new one to the array: - -```js -fruits[3] = 'Lemon'; // now ["Apple", "Orange", "Pear", "Lemon"] -``` - -The total count of the elements in the array is its `length`: - -```js run -let fruits = ["Apple", "Orange", "Plum"]; - -alert( fruits.length ); // 3 -``` - -We can also use `alert` to show the whole array. - -```js run -let fruits = ["Apple", "Orange", "Plum"]; - -alert( fruits ); // Apple,Orange,Plum -``` - -An array can store elements of any type. - -For instance: - -```js run no-beautify -// mix of values -let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ]; - -// get the object at index 1 and then show its name -alert( arr[1].name ); // John - -// get the function at index 3 and run it -arr[3](); // hello -``` - - -````smart header="Trailing comma" -An array, just like an object, may end with a comma: -```js -let fruits = [ - "Apple", - "Orange", - "Plum"*!*,*/!* -]; -``` - -The "trailing comma" style makes it easier to insert/remove items, because all lines become alike. -```` - - -## Methods pop/push, shift/unshift - -A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of the most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations: - -- `push` appends an element to the end. -- `shift` get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st. - -![](queue.svg) - -Arrays support both operations. - -In practice we need it very often. For example, a queue of messages that need to be shown on-screen. - -There's another use case for arrays -- the data structure named [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). - -It supports two operations: - -- `push` adds an element to the end. -- `pop` takes an element from the end. - -So new elements are added or taken always from the "end". - -A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top: - -![](stack.svg) - -For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out). - -Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements both to/from the beginning or the end. - -In computer science the data structure that allows this, is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue). - -**Methods that work with the end of the array:** - -`pop` -: Extracts the last element of the array and returns it: - - ```js run - let fruits = ["Apple", "Orange", "Pear"]; - - alert( fruits.pop() ); // remove "Pear" and alert it - - alert( fruits ); // Apple, Orange - ``` - -`push` -: Append the element to the end of the array: - - ```js run - let fruits = ["Apple", "Orange"]; - - fruits.push("Pear"); - - alert( fruits ); // Apple, Orange, Pear - ``` - - The call `fruits.push(...)` is equal to `fruits[fruits.length] = ...`. - -**Methods that work with the beginning of the array:** - -`shift` -: Extracts the first element of the array and returns it: - - ```js run - let fruits = ["Apple", "Orange", "Pear"]; - - alert( fruits.shift() ); // remove Apple and alert it - - alert( fruits ); // Orange, Pear - ``` - -`unshift` -: Add the element to the beginning of the array: - - ```js run - let fruits = ["Orange", "Pear"]; - - fruits.unshift('Apple'); - - alert( fruits ); // Apple, Orange, Pear - ``` - -Methods `push` and `unshift` can add multiple elements at once: - -```js run -let fruits = ["Apple"]; - -fruits.push("Orange", "Peach"); -fruits.unshift("Pineapple", "Lemon"); - -// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"] -alert( fruits ); -``` - -## Internals - -An array is a special kind of object. The square brackets used to access a property `arr[0]` actually come from the object syntax. That's essentially the same as `obj[key]`, where `arr` is the object, while numbers are used as keys. - -They extend objects providing special methods to work with ordered collections of data and also the `length` property. But at the core it's still an object. - -Remember, there are only 7 basic types in JavaScript. Array is an object and thus behaves like an object. - -For instance, it is copied by reference: - -```js run -let fruits = ["Banana"] - -let arr = fruits; // copy by reference (two variables reference the same array) - -alert( arr === fruits ); // true - -arr.push("Pear"); // modify the array by reference - -alert( fruits ); // Banana, Pear - 2 items now -``` - -...But what makes arrays really special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast. - -But they all break if we quit working with an array as with an "ordered collection" and start working with it as if it were a regular object. - -For instance, technically we can do this: - -```js -let fruits = []; // make an array - -fruits[99999] = 5; // assign a property with the index far greater than its length - -fruits.age = 25; // create a property with an arbitrary name -``` - -That's possible, because arrays are objects at their base. We can add any properties to them. - -But the engine will see that we're working with the array as with a regular object. Array-specific optimizations are not suited for such cases and will be turned off, their benefits disappear. - -The ways to misuse an array: - -- Add a non-numeric property like `arr.test = 5`. -- Make holes, like: add `arr[0]` and then `arr[1000]` (and nothing between them). -- Fill the array in the reverse order, like `arr[1000]`, `arr[999]` and so on. - -Please think of arrays as special structures to work with the *ordered data*. They provide special methods for that. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object `{}`. - -## Performance - -Methods `push/pop` run fast, while `shift/unshift` are slow. - -![](array-speed.svg) - -Why is it faster to work with the end of an array than with its beginning? Let's see what happens during the execution: - -```js -fruits.shift(); // take 1 element from the start -``` - -It's not enough to take and remove the element with the number `0`. Other elements need to be renumbered as well. - -The `shift` operation must do 3 things: - -1. Remove the element with the index `0`. -2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on. -3. Update the `length` property. - -![](array-shift.svg) - -**The more elements in the array, the more time to move them, more in-memory operations.** - -The similar thing happens with `unshift`: to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes. - -And what's with `push/pop`? They do not need to move anything. To extract an element from the end, the `pop` method cleans the index and shortens `length`. - -The actions for the `pop` operation: - -```js -fruits.pop(); // take 1 element from the end -``` - -![](array-pop.svg) - -**The `pop` method does not need to move anything, because other elements keep their indexes. That's why it's blazingly fast.** - -The similar thing with the `push` method. - -## Loops - -One of the oldest ways to cycle array items is the `for` loop over indexes: - -```js run -let arr = ["Apple", "Orange", "Pear"]; - -*!* -for (let i = 0; i < arr.length; i++) { -*/!* - alert( arr[i] ); -} -``` - -But for arrays there is another form of loop, `for..of`: - -```js run -let fruits = ["Apple", "Orange", "Plum"]; - -// iterates over array elements -for (let fruit of fruits) { - alert( fruit ); -} -``` - -The `for..of` doesn't give access to the number of the current element, just its value, but in most cases that's enough. And it's shorter. - -Technically, because arrays are objects, it is also possible to use `for..in`: - -```js run -let arr = ["Apple", "Orange", "Pear"]; - -*!* -for (let key in arr) { -*/!* - alert( arr[key] ); // Apple, Orange, Pear -} -``` - -But that's actually a bad idea. There are potential problems with it: - -1. The loop `for..in` iterates over *all properties*, not only the numeric ones. - - There are so-called "array-like" objects in the browser and in other environments, that *look like arrays*. That is, they have `length` and indexes properties, but they may also have other non-numeric properties and methods, which we usually don't need. The `for..in` loop will list them though. So if we need to work with array-like objects, then these "extra" properties can become a problem. - -2. The `for..in` loop is optimized for generic objects, not arrays, and thus is 10-100 times slower. Of course, it's still very fast. The speedup may only matter in bottlenecks. But still we should be aware of the difference. - -Generally, we shouldn't use `for..in` for arrays. - - -## A word about "length" - -The `length` property automatically updates when we modify the array. To be precise, it is actually not the count of values in the array, but the greatest numeric index plus one. - -For instance, a single element with a large index gives a big length: - -```js run -let fruits = []; -fruits[123] = "Apple"; - -alert( fruits.length ); // 124 -``` - -Note that we usually don't use arrays like that. - -Another interesting thing about the `length` property is that it's writable. - -If we increase it manually, nothing interesting happens. But if we decrease it, the array is truncated. The process is irreversible, here's the example: - -```js run -let arr = [1, 2, 3, 4, 5]; - -arr.length = 2; // truncate to 2 elements -alert( arr ); // [1, 2] - -arr.length = 5; // return length back -alert( arr[3] ); // undefined: the values do not return -``` - -So, the simplest way to clear the array is: `arr.length = 0;`. - - -## new Array() [#new-array] - -There is one more syntax to create an array: - -```js -let arr = *!*new Array*/!*("Apple", "Pear", "etc"); -``` - -It's rarely used, because square brackets `[]` are shorter. Also there's a tricky feature with it. - -If `new Array` is called with a single argument which is a number, then it creates an array *without items, but with the given length*. - -Let's see how one can shoot themself in the foot: - -```js run -let arr = new Array(2); // will it create an array of [2] ? - -alert( arr[0] ); // undefined! no elements. - -alert( arr.length ); // length 2 -``` - -In the code above, `new Array(number)` has all elements `undefined`. - -To evade such surprises, we usually use square brackets, unless we really know what we're doing. - -## Multidimensional arrays - -Arrays can have items that are also arrays. We can use it for multidimensional arrays, for example to store matrices: - -```js run -let matrix = [ - [1, 2, 3], - [4, 5, 6], - [7, 8, 9] -]; - -alert( matrix[1][1] ); // 5, the central element -``` - -## toString - -Arrays have their own implementation of `toString` method that returns a comma-separated list of elements. - -For instance: - - -```js run -let arr = [1, 2, 3]; - -alert( arr ); // 1,2,3 -alert( String(arr) === '1,2,3' ); // true -``` - -Also, let's try this: - -```js run -alert( [] + 1 ); // "1" -alert( [1] + 1 ); // "11" -alert( [1,2] + 1 ); // "1,21" -``` - -Arrays do not have `Symbol.toPrimitive`, neither a viable `valueOf`, they implement only `toString` conversion, so here `[]` becomes an empty string, `[1]` becomes `"1"` and `[1,2]` becomes `"1,2"`. - -When the binary plus `"+"` operator adds something to a string, it converts it to a string as well, so the next step looks like this: - -```js run -alert( "" + 1 ); // "1" -alert( "1" + 1 ); // "11" -alert( "1,2" + 1 ); // "1,21" -``` - -## Summary - -Array is a special kind of object, suited to storing and managing ordered data items. - -- The declaration: - - ```js - // square brackets (usual) - let arr = [item1, item2...]; - - // new Array (exceptionally rare) - let arr = new Array(item1, item2...); - ``` - - The call to `new Array(number)` creates an array with the given length, but without elements. - -- The `length` property is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods. -- If we shorten `length` manually, the array is truncated. - -We can use an array as a deque with the following operations: - -- `push(...items)` adds `items` to the end. -- `pop()` removes the element from the end and returns it. -- `shift()` removes the element from the beginning and returns it. -- `unshift(...items)` adds `items` to the beginning. - -To loop over the elements of the array: - - `for (let i=0; i. diff --git a/1-js/05-data-types/04-array/queue.svg b/1-js/05-data-types/04-array/queue.svg deleted file mode 100644 index 0ed2f1cd70..0000000000 --- a/1-js/05-data-types/04-array/queue.svg +++ /dev/null @@ -1 +0,0 @@ -pushshift \ No newline at end of file diff --git a/1-js/05-data-types/04-array/stack.svg b/1-js/05-data-types/04-array/stack.svg deleted file mode 100644 index dcc600e714..0000000000 --- a/1-js/05-data-types/04-array/stack.svg +++ /dev/null @@ -1 +0,0 @@ -pushpop \ No newline at end of file diff --git a/1-js/05-data-types/05-array-methods/10-average-age/solution.md b/1-js/05-data-types/05-array-methods/10-average-age/solution.md deleted file mode 100644 index f5d4df9318..0000000000 --- a/1-js/05-data-types/05-array-methods/10-average-age/solution.md +++ /dev/null @@ -1,14 +0,0 @@ -```js run -function getAverageAge(users) { - return users.reduce((prev, user) => prev + user.age, 0) / users.length; -} - -let john = { name: "John", age: 25 }; -let pete = { name: "Pete", age: 30 }; -let mary = { name: "Mary", age: 29 }; - -let arr = [ john, pete, mary ]; - -alert( getAverageAge(arr) ); // 28 -``` - diff --git a/1-js/05-data-types/05-array-methods/10-average-age/task.md b/1-js/05-data-types/05-array-methods/10-average-age/task.md deleted file mode 100644 index bf5f85df38..0000000000 --- a/1-js/05-data-types/05-array-methods/10-average-age/task.md +++ /dev/null @@ -1,21 +0,0 @@ -importance: 4 - ---- - -# Get average age - -Write the function `getAverageAge(users)` that gets an array of objects with property `age` and returns the average age. - -The formula for the average is `(age1 + age2 + ... + ageN) / N`. - -For instance: - -```js no-beautify -let john = { name: "John", age: 25 }; -let pete = { name: "Pete", age: 30 }; -let mary = { name: "Mary", age: 29 }; - -let arr = [ john, pete, mary ]; - -alert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28 -``` diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js b/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js deleted file mode 100644 index d15cea2c7e..0000000000 --- a/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js +++ /dev/null @@ -1,11 +0,0 @@ -function unique(arr) { - let result = []; - - for (let str of arr) { - if (!result.includes(str)) { - result.push(str); - } - } - - return result; -} diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js b/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js deleted file mode 100644 index cfc7b1fc30..0000000000 --- a/1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js +++ /dev/null @@ -1,15 +0,0 @@ -describe("unique", function() { - it("removes non-unique elements", function() { - let strings = ["Hare", "Krishna", "Hare", "Krishna", - "Krishna", "Krishna", "Hare", "Hare", ":-O" - ]; - - assert.deepEqual(unique(strings), ["Hare", "Krishna", ":-O"]); - }); - - it("does not change the source array", function() { - let strings = ["Krishna", "Krishna", "Hare", "Hare"]; - unique(strings); - assert.deepEqual(strings, ["Krishna", "Krishna", "Hare", "Hare"]); - }); -}); diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/solution.md b/1-js/05-data-types/05-array-methods/11-array-unique/solution.md deleted file mode 100644 index b9d627a0a3..0000000000 --- a/1-js/05-data-types/05-array-methods/11-array-unique/solution.md +++ /dev/null @@ -1,39 +0,0 @@ -Let's walk the array items: -- For each item we'll check if the resulting array already has that item. -- If it is so, then ignore, otherwise add to results. - -```js run demo -function unique(arr) { - let result = []; - - for (let str of arr) { - if (!result.includes(str)) { - result.push(str); - } - } - - return result; -} - -let strings = ["Hare", "Krishna", "Hare", "Krishna", - "Krishna", "Krishna", "Hare", "Hare", ":-O" -]; - -alert( unique(strings) ); // Hare, Krishna, :-O -``` - -The code works, but there's a potential performance problem in it. - -The method `result.includes(str)` internally walks the array `result` and compares each element against `str` to find the match. - -So if there are `100` elements in `result` and no one matches `str`, then it will walk the whole `result` and do exactly `100` comparisons. And if `result` is large, like `10000`, then there would be `10000` comparisons. - -That's not a problem by itself, because JavaScript engines are very fast, so walk `10000` array is a matter of microseconds. - -But we do such test for each element of `arr`, in the `for` loop. - -So if `arr.length` is `10000` we'll have something like `10000*10000` = 100 millions of comparisons. That's a lot. - -So the solution is only good for small arrays. - -Further in the chapter we'll see how to optimize it. diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/task.md b/1-js/05-data-types/05-array-methods/11-array-unique/task.md deleted file mode 100644 index 5b56d36218..0000000000 --- a/1-js/05-data-types/05-array-methods/11-array-unique/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 4 - ---- - -# Filter unique array members - -Let `arr` be an array. - -Create a function `unique(arr)` that should return an array with unique items of `arr`. - -For instance: - -```js -function unique(arr) { - /* your code */ -} - -let strings = ["Hare", "Krishna", "Hare", "Krishna", - "Krishna", "Krishna", "Hare", "Hare", ":-O" -]; - -alert( unique(strings) ); // Hare, Krishna, :-O -``` diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js b/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js deleted file mode 100644 index 8dea23a06a..0000000000 --- a/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js +++ /dev/null @@ -1,6 +0,0 @@ -function groupById(array) { - return array.reduce((obj, value) => { - obj[value.id] = value; - return obj; - }, {}) -} diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js b/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js deleted file mode 100644 index e48ba138db..0000000000 --- a/1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js +++ /dev/null @@ -1,21 +0,0 @@ -describe("groupById", function() { - - it("creates an object grouped by id", function() { - let users = [ - {id: 'john', name: "John Smith", age: 20}, - {id: 'ann', name: "Ann Smith", age: 24}, - {id: 'pete', name: "Pete Peterson", age: 31}, - ]; - - assert.deepEqual(groupById(users), { - john: {id: 'john', name: "John Smith", age: 20}, - ann: {id: 'ann', name: "Ann Smith", age: 24}, - pete: {id: 'pete', name: "Pete Peterson", age: 31}, - }); - }); - - it("works with an empty array", function() { - users = []; - assert.deepEqual(groupById(users), {}); - }); -}); diff --git a/1-js/05-data-types/05-array-methods/12-reduce-object/task.md b/1-js/05-data-types/05-array-methods/12-reduce-object/task.md deleted file mode 100644 index d3c8f8eb1a..0000000000 --- a/1-js/05-data-types/05-array-methods/12-reduce-object/task.md +++ /dev/null @@ -1,37 +0,0 @@ -importance: 4 - ---- - -# Create keyed object from array - -Let's say we received an array of users in the form `{id:..., name:..., age... }`. - -Create a function `groupById(arr)` that creates an object from it, with `id` as the key, and array items as values. - -For example: - -```js -let users = [ - {id: 'john', name: "John Smith", age: 20}, - {id: 'ann', name: "Ann Smith", age: 24}, - {id: 'pete', name: "Pete Peterson", age: 31}, -]; - -let usersById = groupById(users); - -/* -// after the call we should have: - -usersById = { - john: {id: 'john', name: "John Smith", age: 20}, - ann: {id: 'ann', name: "Ann Smith", age: 24}, - pete: {id: 'pete', name: "Pete Peterson", age: 31}, -} -*/ -``` - -Such function is really handy when working with server data. - -In this task we assume that `id` is unique. There may be no two array items with the same `id`. - -Please use array `.reduce` method in the solution. diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js b/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js deleted file mode 100644 index 0bdfbae5a6..0000000000 --- a/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js +++ /dev/null @@ -1,5 +0,0 @@ - -function filterRange(arr, a, b) { - // added brackets around the expression for better readability - return arr.filter(item => (a <= item && item <= b)); -} \ No newline at end of file diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js b/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js deleted file mode 100644 index fb26c8dc02..0000000000 --- a/1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js +++ /dev/null @@ -1,21 +0,0 @@ -describe("filterRange", function() { - - it("returns the filtered values", function() { - - let arr = [5, 3, 8, 1]; - - let filtered = filterRange(arr, 1, 4); - - assert.deepEqual(filtered, [3, 1]); - }); - - it("doesn't change the array", function() { - - let arr = [5, 3, 8, 1]; - - let filtered = filterRange(arr, 1, 4); - - assert.deepEqual(arr, [5,3,8,1]); - }); - -}); \ No newline at end of file diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/solution.md b/1-js/05-data-types/05-array-methods/2-filter-range/solution.md deleted file mode 100644 index 73993a07a0..0000000000 --- a/1-js/05-data-types/05-array-methods/2-filter-range/solution.md +++ /dev/null @@ -1,14 +0,0 @@ -```js run demo -function filterRange(arr, a, b) { - // added brackets around the expression for better readability - return arr.filter(item => (a <= item && item <= b)); -} - -let arr = [5, 3, 8, 1]; - -let filtered = filterRange(arr, 1, 4); - -alert( filtered ); // 3,1 (matching values) - -alert( arr ); // 5,3,8,1 (not modified) -``` diff --git a/1-js/05-data-types/05-array-methods/2-filter-range/task.md b/1-js/05-data-types/05-array-methods/2-filter-range/task.md deleted file mode 100644 index 18b2c1d9b5..0000000000 --- a/1-js/05-data-types/05-array-methods/2-filter-range/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 4 - ---- - -# Filter range - -Write a function `filterRange(arr, a, b)` that gets an array `arr`, looks for elements between `a` and `b` in it and returns an array of them. - -The function should not modify the array. It should return the new array. - -For instance: - -```js -let arr = [5, 3, 8, 1]; - -let filtered = filterRange(arr, 1, 4); - -alert( filtered ); // 3,1 (matching values) - -alert( arr ); // 5,3,8,1 (not modified) -``` - diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js deleted file mode 100644 index 488db3755b..0000000000 --- a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js +++ /dev/null @@ -1,14 +0,0 @@ - -function filterRangeInPlace(arr, a, b) { - - for (let i = 0; i < arr.length; i++) { - let val = arr[i]; - - // remove if outside of the interval - if (val < a || val > b) { - arr.splice(i, 1); - i--; - } - } - -} diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js deleted file mode 100644 index db32d9a115..0000000000 --- a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js +++ /dev/null @@ -1,16 +0,0 @@ -describe("filterRangeInPlace", function() { - - it("returns the filtered values", function() { - - let arr = [5, 3, 8, 1]; - - filterRangeInPlace(arr, 1, 4); - - assert.deepEqual(arr, [3, 1]); - }); - - it("doesn't return anything", function() { - assert.isUndefined(filterRangeInPlace([1,2,3], 1, 4)); - }); - -}); \ No newline at end of file diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/solution.md b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/solution.md deleted file mode 100644 index 36e3130ff0..0000000000 --- a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/solution.md +++ /dev/null @@ -1,21 +0,0 @@ -```js run demo -function filterRangeInPlace(arr, a, b) { - - for (let i = 0; i < arr.length; i++) { - let val = arr[i]; - - // remove if outside of the interval - if (val < a || val > b) { - arr.splice(i, 1); - i--; - } - } - -} - -let arr = [5, 3, 8, 1]; - -filterRangeInPlace(arr, 1, 4); // removed the numbers except from 1 to 4 - -alert( arr ); // [3, 1] -``` diff --git a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md b/1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md deleted file mode 100644 index 7066a51ab2..0000000000 --- a/1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md +++ /dev/null @@ -1,18 +0,0 @@ -importance: 4 - ---- - -# Filter range "in place" - -Write a function `filterRangeInPlace(arr, a, b)` that gets an array `arr` and removes from it all values except those that are between `a` and `b`. The test is: `a ≤ arr[i] ≤ b`. - -The function should only modify the array. It should not return anything. - -For instance: -```js -let arr = [5, 3, 8, 1]; - -filterRangeInPlace(arr, 1, 4); // removed the numbers except from 1 to 4 - -alert( arr ); // [3, 1] -``` diff --git a/1-js/05-data-types/05-array-methods/4-sort-back/solution.md b/1-js/05-data-types/05-array-methods/4-sort-back/solution.md deleted file mode 100644 index cdf1335116..0000000000 --- a/1-js/05-data-types/05-array-methods/4-sort-back/solution.md +++ /dev/null @@ -1,10 +0,0 @@ - - -```js run -let arr = [5, 2, 1, -10, 8]; - -arr.sort((a, b) => b - a); - -alert( arr ); -``` - diff --git a/1-js/05-data-types/05-array-methods/4-sort-back/task.md b/1-js/05-data-types/05-array-methods/4-sort-back/task.md deleted file mode 100644 index 0e3eeab76e..0000000000 --- a/1-js/05-data-types/05-array-methods/4-sort-back/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 4 - ---- - -# Sort in decreasing order - -```js -let arr = [5, 2, 1, -10, 8]; - -// ... your code to sort it in decreasing order - -alert( arr ); // 8, 5, 2, 1, -10 -``` - diff --git a/1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md b/1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md deleted file mode 100644 index 8537b129e6..0000000000 --- a/1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -We can use `slice()` to make a copy and run the sort on it: - -```js run -function copySorted(arr) { - return arr.slice().sort(); -} - -let arr = ["HTML", "JavaScript", "CSS"]; - -*!* -let sorted = copySorted(arr); -*/!* - -alert( sorted ); -alert( arr ); -``` - diff --git a/1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md b/1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md deleted file mode 100644 index c1395b4adf..0000000000 --- a/1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md +++ /dev/null @@ -1,18 +0,0 @@ -importance: 5 - ---- - -# Copy and sort array - -We have an array of strings `arr`. We'd like to have a sorted copy of it, but keep `arr` unmodified. - -Create a function `copySorted(arr)` that returns such a copy. - -```js -let arr = ["HTML", "JavaScript", "CSS"]; - -let sorted = copySorted(arr); - -alert( sorted ); // CSS, HTML, JavaScript -alert( arr ); // HTML, JavaScript, CSS (no changes) -``` diff --git a/1-js/05-data-types/05-array-methods/6-array-get-names/solution.md b/1-js/05-data-types/05-array-methods/6-array-get-names/solution.md deleted file mode 100644 index f44a2b8129..0000000000 --- a/1-js/05-data-types/05-array-methods/6-array-get-names/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -```js run - -let john = { name: "John", age: 25 }; -let pete = { name: "Pete", age: 30 }; -let mary = { name: "Mary", age: 28 }; - -let users = [ john, pete, mary ]; - -let names = users.map(item => item.name); - -alert( names ); // John, Pete, Mary -``` - diff --git a/1-js/05-data-types/05-array-methods/6-array-get-names/task.md b/1-js/05-data-types/05-array-methods/6-array-get-names/task.md deleted file mode 100644 index 74c8a9d749..0000000000 --- a/1-js/05-data-types/05-array-methods/6-array-get-names/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 5 - ---- - -# Map to names - -You have an array of `user` objects, each one has `user.name`. Write the code that converts it into an array of names. - -For instance: - -```js no-beautify -let john = { name: "John", age: 25 }; -let pete = { name: "Pete", age: 30 }; -let mary = { name: "Mary", age: 28 }; - -let users = [ john, pete, mary ]; - -let names = /* ... your code */ - -alert( names ); // John, Pete, Mary -``` - diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js b/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js deleted file mode 100644 index 45ef1619da..0000000000 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js +++ /dev/null @@ -1,25 +0,0 @@ -function Calculator() { - - this.methods = { - "-": (a, b) => a - b, - "+": (a, b) => a + b - }; - - this.calculate = function(str) { - - let split = str.split(' '), - a = +split[0], - op = split[1], - b = +split[2] - - if (!this.methods[op] || isNaN(a) || isNaN(b)) { - return NaN; - } - - return this.methods[op](a, b); - } - - this.addMethod = function(name, func) { - this.methods[name] = func; - }; -} diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/test.js b/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/test.js deleted file mode 100644 index eac4f54a0d..0000000000 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/test.js +++ /dev/null @@ -1,25 +0,0 @@ -describe("Calculator", function() { - let calculator; - - before(function() { - calculator = new Calculator; - }); - - it("calculate(12 + 34) = 46", function() { - assert.equal(calculator.calculate("12 + 34"), 46); - }); - - it("calculate(34 - 12) = 22", function() { - assert.equal(calculator.calculate("34 - 12"), 22); - }); - - it("add multiplication: calculate(2 * 3) = 6", function() { - calculator.addMethod("*", (a, b) => a * b); - assert.equal(calculator.calculate("2 * 3"), 6); - }); - - it("add power: calculate(2 ** 3) = 8", function() { - calculator.addMethod("**", (a, b) => a ** b); - assert.equal(calculator.calculate("2 ** 3"), 8); - }); -}); diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/solution.md b/1-js/05-data-types/05-array-methods/6-calculator-extendable/solution.md deleted file mode 100644 index ebe0714cfb..0000000000 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/solution.md +++ /dev/null @@ -1,3 +0,0 @@ - -- Please note how methods are stored. They are simply added to `this.methods` property. -- All tests and numeric conversions are done in the `calculate` method. In future it may be extended to support more complex expressions. diff --git a/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md b/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md deleted file mode 100644 index e0d302f4ce..0000000000 --- a/1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md +++ /dev/null @@ -1,36 +0,0 @@ -importance: 5 - ---- - -# Create an extendable calculator - -Create a constructor function `Calculator` that creates "extendable" calculator objects. - -The task consists of two parts. - -1. First, implement the method `calculate(str)` that takes a string like `"1 + 2"` in the format "NUMBER operator NUMBER" (space-delimited) and returns the result. Should understand plus `+` and minus `-`. - - Usage example: - - ```js - let calc = new Calculator; - - alert( calc.calculate("3 + 7") ); // 10 - ``` -2. Then add the method `addMethod(name, func)` that teaches the calculator a new operation. It takes the operator `name` and the two-argument function `func(a,b)` that implements it. - - For instance, let's add the multiplication `*`, division `/` and power `**`: - - ```js - let powerCalc = new Calculator; - powerCalc.addMethod("*", (a, b) => a * b); - powerCalc.addMethod("/", (a, b) => a / b); - powerCalc.addMethod("**", (a, b) => a ** b); - - let result = powerCalc.calculate("2 ** 3"); - alert( result ); // 8 - ``` - -- No parentheses or complex expressions in this task. -- The numbers and the operator are delimited with exactly one space. -- There may be error handling if you'd like to add it. diff --git a/1-js/05-data-types/05-array-methods/7-map-objects/solution.md b/1-js/05-data-types/05-array-methods/7-map-objects/solution.md deleted file mode 100644 index 5d8bf4a13d..0000000000 --- a/1-js/05-data-types/05-array-methods/7-map-objects/solution.md +++ /dev/null @@ -1,51 +0,0 @@ - -```js run no-beautify -let john = { name: "John", surname: "Smith", id: 1 }; -let pete = { name: "Pete", surname: "Hunt", id: 2 }; -let mary = { name: "Mary", surname: "Key", id: 3 }; - -let users = [ john, pete, mary ]; - -*!* -let usersMapped = users.map(user => ({ - fullName: `${user.name} ${user.surname}`, - id: user.id -})); -*/!* - -/* -usersMapped = [ - { fullName: "John Smith", id: 1 }, - { fullName: "Pete Hunt", id: 2 }, - { fullName: "Mary Key", id: 3 } -] -*/ - -alert( usersMapped[0].id ); // 1 -alert( usersMapped[0].fullName ); // John Smith -``` - -Please note that in for the arrow functions we need to use additional brackets. - -We can't write like this: -```js -let usersMapped = users.map(user => *!*{*/!* - fullName: `${user.name} ${user.surname}`, - id: user.id -}); -``` - -As we remember, there are two arrow functions: without body `value => expr` and with body `value => {...}`. - -Here JavaScript would treat `{` as the start of function body, not the start of the object. The workaround is to wrap them in the "normal" brackets: - -```js -let usersMapped = users.map(user => *!*({*/!* - fullName: `${user.name} ${user.surname}`, - id: user.id -})); -``` - -Now fine. - - diff --git a/1-js/05-data-types/05-array-methods/7-map-objects/task.md b/1-js/05-data-types/05-array-methods/7-map-objects/task.md deleted file mode 100644 index b11d121554..0000000000 --- a/1-js/05-data-types/05-array-methods/7-map-objects/task.md +++ /dev/null @@ -1,36 +0,0 @@ -importance: 5 - ---- - -# Map to objects - -You have an array of `user` objects, each one has `name`, `surname` and `id`. - -Write the code to create another array from it, of objects with `id` and `fullName`, where `fullName` is generated from `name` and `surname`. - -For instance: - -```js no-beautify -let john = { name: "John", surname: "Smith", id: 1 }; -let pete = { name: "Pete", surname: "Hunt", id: 2 }; -let mary = { name: "Mary", surname: "Key", id: 3 }; - -let users = [ john, pete, mary ]; - -*!* -let usersMapped = /* ... your code ... */ -*/!* - -/* -usersMapped = [ - { fullName: "John Smith", id: 1 }, - { fullName: "Pete Hunt", id: 2 }, - { fullName: "Mary Key", id: 3 } -] -*/ - -alert( usersMapped[0].id ) // 1 -alert( usersMapped[0].fullName ) // John Smith -``` - -So, actually you need to map one array of objects to another. Try using `=>` here. There's a small catch. \ No newline at end of file diff --git a/1-js/05-data-types/05-array-methods/8-sort-objects/solution.md b/1-js/05-data-types/05-array-methods/8-sort-objects/solution.md deleted file mode 100644 index 9f1ade7075..0000000000 --- a/1-js/05-data-types/05-array-methods/8-sort-objects/solution.md +++ /dev/null @@ -1,18 +0,0 @@ -```js run no-beautify -function sortByAge(arr) { - arr.sort((a, b) => a.age > b.age ? 1 : -1); -} - -let john = { name: "John", age: 25 }; -let pete = { name: "Pete", age: 30 }; -let mary = { name: "Mary", age: 28 }; - -let arr = [ pete, john, mary ]; - -sortByAge(arr); - -// now sorted is: [john, mary, pete] -alert(arr[0].name); // John -alert(arr[1].name); // Mary -alert(arr[2].name); // Pete -``` diff --git a/1-js/05-data-types/05-array-methods/8-sort-objects/task.md b/1-js/05-data-types/05-array-methods/8-sort-objects/task.md deleted file mode 100644 index 9a215c9f4d..0000000000 --- a/1-js/05-data-types/05-array-methods/8-sort-objects/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# Sort users by age - -Write the function `sortByAge(users)` that gets an array of objects with the `age` property and sorts them by `age`. - -For instance: - -```js no-beautify -let john = { name: "John", age: 25 }; -let pete = { name: "Pete", age: 30 }; -let mary = { name: "Mary", age: 28 }; - -let arr = [ pete, john, mary ]; - -sortByAge(arr); - -// now: [john, mary, pete] -alert(arr[0].name); // John -alert(arr[1].name); // Mary -alert(arr[2].name); // Pete -``` diff --git a/1-js/05-data-types/05-array-methods/9-shuffle/solution.md b/1-js/05-data-types/05-array-methods/9-shuffle/solution.md deleted file mode 100644 index 6674c444f8..0000000000 --- a/1-js/05-data-types/05-array-methods/9-shuffle/solution.md +++ /dev/null @@ -1,127 +0,0 @@ -The simple solution could be: - -```js run -*!* -function shuffle(array) { - array.sort(() => Math.random() - 0.5); -} -*/!* - -let arr = [1, 2, 3]; -shuffle(arr); -alert(arr); -``` - -That somewhat works, because `Math.random() - 0.5` is a random number that may be positive or negative, so the sorting function reorders elements randomly. - -But because the sorting function is not meant to be used this way, not all permutations have the same probability. - -For instance, consider the code below. It runs `shuffle` 1000000 times and counts appearances of all possible results: - -```js run -function shuffle(array) { - array.sort(() => Math.random() - 0.5); -} - -// counts of appearances for all possible permutations -let count = { - '123': 0, - '132': 0, - '213': 0, - '231': 0, - '321': 0, - '312': 0 -}; - -for (let i = 0; i < 1000000; i++) { - let array = [1, 2, 3]; - shuffle(array); - count[array.join('')]++; -} - -// show counts of all possible permutations -for (let key in count) { - alert(`${key}: ${count[key]}`); -} -``` - -An example result (depends on JS engine): - -```js -123: 250706 -132: 124425 -213: 249618 -231: 124880 -312: 125148 -321: 125223 -``` - -We can see the bias clearly: `123` and `213` appear much more often than others. - -The result of the code may vary between JavaScript engines, but we can already see that the approach is unreliable. - -Why it doesn't work? Generally speaking, `sort` is a "black box": we throw an array and a comparison function into it and expect the array to be sorted. But due to the utter randomness of the comparison the black box goes mad, and how exactly it goes mad depends on the concrete implementation that differs between engines. - -There are other good ways to do the task. For instance, there's a great algorithm called [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle). The idea is to walk the array in the reverse order and swap each element with a random one before it: - -```js -function shuffle(array) { - for (let i = array.length - 1; i > 0; i--) { - let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i - - // swap elements array[i] and array[j] - // we use "destructuring assignment" syntax to achieve that - // you'll find more details about that syntax in later chapters - // same can be written as: - // let t = array[i]; array[i] = array[j]; array[j] = t - [array[i], array[j]] = [array[j], array[i]]; - } -} -``` - -Let's test it the same way: - -```js run -function shuffle(array) { - for (let i = array.length - 1; i > 0; i--) { - let j = Math.floor(Math.random() * (i + 1)); - [array[i], array[j]] = [array[j], array[i]]; - } -} - -// counts of appearances for all possible permutations -let count = { - '123': 0, - '132': 0, - '213': 0, - '231': 0, - '321': 0, - '312': 0 -}; - -for (let i = 0; i < 1000000; i++) { - let array = [1, 2, 3]; - shuffle(array); - count[array.join('')]++; -} - -// show counts of all possible permutations -for (let key in count) { - alert(`${key}: ${count[key]}`); -} -``` - -The example output: - -```js -123: 166693 -132: 166647 -213: 166628 -231: 167517 -312: 166199 -321: 166316 -``` - -Looks good now: all permutations appear with the same probability. - -Also, performance-wise the Fisher-Yates algorithm is much better, there's no "sorting" overhead. diff --git a/1-js/05-data-types/05-array-methods/9-shuffle/task.md b/1-js/05-data-types/05-array-methods/9-shuffle/task.md deleted file mode 100644 index 970c534172..0000000000 --- a/1-js/05-data-types/05-array-methods/9-shuffle/task.md +++ /dev/null @@ -1,25 +0,0 @@ -importance: 3 - ---- - -# Shuffle an array - -Write the function `shuffle(array)` that shuffles (randomly reorders) elements of the array. - -Multiple runs of `shuffle` may lead to different orders of elements. For instance: - -```js -let arr = [1, 2, 3]; - -shuffle(arr); -// arr = [3, 2, 1] - -shuffle(arr); -// arr = [2, 1, 3] - -shuffle(arr); -// arr = [3, 1, 2] -// ... -``` - -All element orders should have an equal probability. For instance, `[1,2,3]` can be reordered as `[1,2,3]` or `[1,3,2]` or `[3,1,2]` etc, with equal probability of each case. diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md deleted file mode 100644 index 3016964405..0000000000 --- a/1-js/05-data-types/05-array-methods/article.md +++ /dev/null @@ -1,755 +0,0 @@ -# Array methods - -Arrays provide a lot of methods. To make things easier, in this chapter they are split into groups. - -## Add/remove items - -We already know methods that add and remove items from the beginning or the end: - -- `arr.push(...items)` -- adds items to the end, -- `arr.pop()` -- extracts an item from the end, -- `arr.shift()` -- extracts an item from the beginning, -- `arr.unshift(...items)` -- adds items to the beginning. - -Here are a few others. - -### splice - -How to delete an element from the array? - -The arrays are objects, so we can try to use `delete`: - -```js run -let arr = ["I", "go", "home"]; - -delete arr[1]; // remove "go" - -alert( arr[1] ); // undefined - -// now arr = ["I", , "home"]; -alert( arr.length ); // 3 -``` - -The element was removed, but the array still has 3 elements, we can see that `arr.length == 3`. - -That's natural, because `delete obj.key` removes a value by the `key`. It's all it does. Fine for objects. But for arrays we usually want the rest of elements to shift and occupy the freed place. We expect to have a shorter array now. - -So, special methods should be used. - -The [arr.splice(start)](mdn:js/Array/splice) method is a swiss army knife for arrays. It can do everything: insert, remove and replace elements. - -The syntax is: - -```js -arr.splice(index[, deleteCount, elem1, ..., elemN]) -``` - -It starts from the position `index`: removes `deleteCount` elements and then inserts `elem1, ..., elemN` at their place. Returns the array of removed elements. - -This method is easy to grasp by examples. - -Let's start with the deletion: - -```js run -let arr = ["I", "study", "JavaScript"]; - -*!* -arr.splice(1, 1); // from index 1 remove 1 element -*/!* - -alert( arr ); // ["I", "JavaScript"] -``` - -Easy, right? Starting from the index `1` it removed `1` element. - -In the next example we remove 3 elements and replace them with the other two: - -```js run -let arr = [*!*"I", "study", "JavaScript",*/!* "right", "now"]; - -// remove 3 first elements and replace them with another -arr.splice(0, 3, "Let's", "dance"); - -alert( arr ) // now [*!*"Let's", "dance"*/!*, "right", "now"] -``` - -Here we can see that `splice` returns the array of removed elements: - -```js run -let arr = [*!*"I", "study",*/!* "JavaScript", "right", "now"]; - -// remove 2 first elements -let removed = arr.splice(0, 2); - -alert( removed ); // "I", "study" <-- array of removed elements -``` - -The `splice` method is also able to insert the elements without any removals. For that we need to set `deleteCount` to `0`: - -```js run -let arr = ["I", "study", "JavaScript"]; - -// from index 2 -// delete 0 -// then insert "complex" and "language" -arr.splice(2, 0, "complex", "language"); - -alert( arr ); // "I", "study", "complex", "language", "JavaScript" -``` - -````smart header="Negative indexes allowed" -Here and in other array methods, negative indexes are allowed. They specify the position from the end of the array, like here: - -```js run -let arr = [1, 2, 5]; - -// from index -1 (one step from the end) -// delete 0 elements, -// then insert 3 and 4 -arr.splice(-1, 0, 3, 4); - -alert( arr ); // 1,2,3,4,5 -``` -```` - -### slice - -The method [arr.slice](mdn:js/Array/slice) is much simpler than similar-looking `arr.splice`. - -The syntax is: - -```js -arr.slice([start], [end]) -``` - -It returns a new array copying to it all items from index `start` to `end` (not including `end`). Both `start` and `end` can be negative, in that case position from array end is assumed. - -It's similar to a string method `str.slice`, but instead of substrings it makes subarrays. - -For instance: - -```js run -let arr = ["t", "e", "s", "t"]; - -alert( arr.slice(1, 3) ); // e,s (copy from 1 to 3) - -alert( arr.slice(-2) ); // s,t (copy from -2 till the end) -``` - -We can also call it without arguments: `arr.slice()` creates a copy of `arr`. That's often used to obtain a copy for further transformations that should not affect the original array. - -### concat - -The method [arr.concat](mdn:js/Array/concat) creates a new array that includes values from other arrays and additional items. - -The syntax is: - -```js -arr.concat(arg1, arg2...) -``` - -It accepts any number of arguments -- either arrays or values. - -The result is a new array containing items from `arr`, then `arg1`, `arg2` etc. - -If an argument `argN` is an array, then all its elements are copied. Otherwise, the argument itself is copied. - -For instance: - -```js run -let arr = [1, 2]; - -// create an array from: arr and [3,4] -alert( arr.concat([3, 4]) ); // 1,2,3,4 - -// create an array from: arr and [3,4] and [5,6] -alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6 - -// create an array from: arr and [3,4], then add values 5 and 6 -alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6 -``` - -Normally, it only copies elements from arrays. Other objects, even if they look like arrays, are added as a whole: - -```js run -let arr = [1, 2]; - -let arrayLike = { - 0: "something", - length: 1 -}; - -alert( arr.concat(arrayLike) ); // 1,2,[object Object] -``` - -...But if an array-like object has a special `Symbol.isConcatSpreadable` property, then it's treated as an array by `concat`: its elements are added instead: - -```js run -let arr = [1, 2]; - -let arrayLike = { - 0: "something", - 1: "else", -*!* - [Symbol.isConcatSpreadable]: true, -*/!* - length: 2 -}; - -alert( arr.concat(arrayLike) ); // 1,2,something,else -``` - -## Iterate: forEach - -The [arr.forEach](mdn:js/Array/forEach) method allows to run a function for every element of the array. - -The syntax: -```js -arr.forEach(function(item, index, array) { - // ... do something with item -}); -``` - -For instance, this shows each element of the array: - -```js run -// for each element call alert -["Bilbo", "Gandalf", "Nazgul"].forEach(alert); -``` - -And this code is more elaborate about their positions in the target array: - -```js run -["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => { - alert(`${item} is at index ${index} in ${array}`); -}); -``` - -The result of the function (if it returns any) is thrown away and ignored. - - -## Searching in array - -Now let's cover methods that search in an array. - -### indexOf/lastIndexOf and includes - -The methods [arr.indexOf](mdn:js/Array/indexOf), [arr.lastIndexOf](mdn:js/Array/lastIndexOf) and [arr.includes](mdn:js/Array/includes) have the same syntax and do essentially the same as their string counterparts, but operate on items instead of characters: - -- `arr.indexOf(item, from)` -- looks for `item` starting from index `from`, and returns the index where it was found, otherwise `-1`. -- `arr.lastIndexOf(item, from)` -- same, but looks for from right to left. -- `arr.includes(item, from)` -- looks for `item` starting from index `from`, returns `true` if found. - -For instance: - -```js run -let arr = [1, 0, false]; - -alert( arr.indexOf(0) ); // 1 -alert( arr.indexOf(false) ); // 2 -alert( arr.indexOf(null) ); // -1 - -alert( arr.includes(1) ); // true -``` - -Note that the methods use `===` comparison. So, if we look for `false`, it finds exactly `false` and not the zero. - -If we want to check for inclusion, and don't want to know the exact index, then `arr.includes` is preferred. - -Also, a very minor difference of `includes` is that it correctly handles `NaN`, unlike `indexOf/lastIndexOf`: - -```js run -const arr = [NaN]; -alert( arr.indexOf(NaN) ); // -1 (should be 0, but === equality doesn't work for NaN) -alert( arr.includes(NaN) );// true (correct) -``` - -### find and findIndex - -Imagine we have an array of objects. How do we find an object with the specific condition? - -Here the [arr.find(fn)](mdn:js/Array/find) method comes in handy. - -The syntax is: -```js -let result = arr.find(function(item, index, array) { - // if true is returned, item is returned and iteration is stopped - // for falsy scenario returns undefined -}); -``` - -The function is called for elements of the array, one after another: - -- `item` is the element. -- `index` is its index. -- `array` is the array itself. - -If it returns `true`, the search is stopped, the `item` is returned. If nothing found, `undefined` is returned. - -For example, we have an array of users, each with the fields `id` and `name`. Let's find the one with `id == 1`: - -```js run -let users = [ - {id: 1, name: "John"}, - {id: 2, name: "Pete"}, - {id: 3, name: "Mary"} -]; - -let user = users.find(item => item.id == 1); - -alert(user.name); // John -``` - -In real life arrays of objects is a common thing, so the `find` method is very useful. - -Note that in the example we provide to `find` the function `item => item.id == 1` with one argument. That's typical, other arguments of this function are rarely used. - -The [arr.findIndex](mdn:js/Array/findIndex) method is essentially the same, but it returns the index where the element was found instead of the element itself and `-1` is returned when nothing is found. - -### filter - -The `find` method looks for a single (first) element that makes the function return `true`. - -If there may be many, we can use [arr.filter(fn)](mdn:js/Array/filter). - -The syntax is similar to `find`, but `filter` returns an array of all matching elements: - -```js -let results = arr.filter(function(item, index, array) { - // if true item is pushed to results and the iteration continues - // returns empty array if nothing found -}); -``` - -For instance: - -```js run -let users = [ - {id: 1, name: "John"}, - {id: 2, name: "Pete"}, - {id: 3, name: "Mary"} -]; - -// returns array of the first two users -let someUsers = users.filter(item => item.id < 3); - -alert(someUsers.length); // 2 -``` - -## Transform an array - -Let's move on to methods that transform and reorder an array. - -### map - -The [arr.map](mdn:js/Array/map) method is one of the most useful and often used. - -It calls the function for each element of the array and returns the array of results. - -The syntax is: - -```js -let result = arr.map(function(item, index, array) { - // returns the new value instead of item -}); -``` - -For instance, here we transform each element into its length: - -```js run -let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length); -alert(lengths); // 5,7,6 -``` - -### sort(fn) - -The call to [arr.sort()](mdn:js/Array/sort) sorts the array *in place*, changing its element order. - -It also returns the sorted array, but the returned value is usually ignored, as `arr` itself is modified. - -For instance: - -```js run -let arr = [ 1, 2, 15 ]; - -// the method reorders the content of arr -arr.sort(); - -alert( arr ); // *!*1, 15, 2*/!* -``` - -Did you notice anything strange in the outcome? - -The order became `1, 15, 2`. Incorrect. But why? - -**The items are sorted as strings by default.** - -Literally, all elements are converted to strings for comparisons. For strings, lexicographic ordering is applied and indeed `"2" > "15"`. - -To use our own sorting order, we need to supply a function as the argument of `arr.sort()`. - -The function should compare two arbitrary values and return: -```js -function compare(a, b) { - if (a > b) return 1; // if the first value is greater than the second - if (a == b) return 0; // if values are equal - if (a < b) return -1; // if the first value is less than the second -} -``` - -For instance, to sort as numbers: - -```js run -function compareNumeric(a, b) { - if (a > b) return 1; - if (a == b) return 0; - if (a < b) return -1; -} - -let arr = [ 1, 2, 15 ]; - -*!* -arr.sort(compareNumeric); -*/!* - -alert(arr); // *!*1, 2, 15*/!* -``` - -Now it works as intended. - -Let's step aside and think what's happening. The `arr` can be array of anything, right? It may contain numbers or strings or objects or whatever. We have a set of *some items*. To sort it, we need an *ordering function* that knows how to compare its elements. The default is a string order. - -The `arr.sort(fn)` method implements a generic sorting algorithm. We don't need to care how it internally works (an optimized [quicksort](https://en.wikipedia.org/wiki/Quicksort) most of the time). It will walk the array, compare its elements using the provided function and reorder them, all we need is to provide the `fn` which does the comparison. - -By the way, if we ever want to know which elements are compared -- nothing prevents from alerting them: - -```js run -[1, -2, 15, 2, 0, 8].sort(function(a, b) { - alert( a + " <> " + b ); -}); -``` - -The algorithm may compare an element with multiple others in the process, but it tries to make as few comparisons as possible. - -````smart header="A comparison function may return any number" -Actually, a comparison function is only required to return a positive number to say "greater" and a negative number to say "less". - -That allows to write shorter functions: - -```js run -let arr = [ 1, 2, 15 ]; - -arr.sort(function(a, b) { return a - b; }); - -alert(arr); // *!*1, 2, 15*/!* -``` -```` - -````smart header="Arrow functions for the best" -Remember [arrow functions](info:arrow-functions-basics)? We can use them here for neater sorting: - -```js -arr.sort( (a, b) => a - b ); -``` - -This works exactly the same as the longer version above. -```` - -````smart header="Use `localeCompare` for strings" -Remember [strings](info:string#correct-comparisons) comparison algorithm? It compares letters by their codes by default. - -For many alphabets, it's better to use `str.localeCompare` method to correctly sort letters, such as `Ö`. - -For example, let's sort a few countries in German: - -```js run -let countries = ['Österreich', 'Andorra', 'Vietnam']; - -alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, Österreich (wrong) - -alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam (correct!) -``` -```` - -### reverse - -The method [arr.reverse](mdn:js/Array/reverse) reverses the order of elements in `arr`. - -For instance: - -```js run -let arr = [1, 2, 3, 4, 5]; -arr.reverse(); - -alert( arr ); // 5,4,3,2,1 -``` - -It also returns the array `arr` after the reversal. - -### split and join - -Here's the situation from real life. We are writing a messaging app, and the person enters the comma-delimited list of receivers: `John, Pete, Mary`. But for us an array of names would be much more comfortable than a single string. How to get it? - -The [str.split(delim)](mdn:js/String/split) method does exactly that. It splits the string into an array by the given delimiter `delim`. - -In the example below, we split by a comma followed by space: - -```js run -let names = 'Bilbo, Gandalf, Nazgul'; - -let arr = names.split(', '); - -for (let name of arr) { - alert( `A message to ${name}.` ); // A message to Bilbo (and other names) -} -``` - -The `split` method has an optional second numeric argument -- a limit on the array length. If it is provided, then the extra elements are ignored. In practice it is rarely used though: - -```js run -let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2); - -alert(arr); // Bilbo, Gandalf -``` - -````smart header="Split into letters" -The call to `split(s)` with an empty `s` would split the string into an array of letters: - -```js run -let str = "test"; - -alert( str.split('') ); // t,e,s,t -``` -```` - -The call [arr.join(glue)](mdn:js/Array/join) does the reverse to `split`. It creates a string of `arr` items joined by `glue` between them. - -For instance: - -```js run -let arr = ['Bilbo', 'Gandalf', 'Nazgul']; - -let str = arr.join(';'); // glue the array into a string using ; - -alert( str ); // Bilbo;Gandalf;Nazgul -``` - -### reduce/reduceRight - -When we need to iterate over an array -- we can use `forEach`, `for` or `for..of`. - -When we need to iterate and return the data for each element -- we can use `map`. - -The methods [arr.reduce](mdn:js/Array/reduce) and [arr.reduceRight](mdn:js/Array/reduceRight) also belong to that breed, but are a little bit more intricate. They are used to calculate a single value based on the array. - -The syntax is: - -```js -let value = arr.reduce(function(accumulator, item, index, array) { - // ... -}, [initial]); -``` - -The function is applied to all array elements one after another and "carries on" its result to the next call. - -Arguments: - -- `accumulator` -- is the result of the previous function call, equals `initial` the first time (if `initial` is provided). -- `item` -- is the current array item. -- `index` -- is its position. -- `array` -- is the array. - -As function is applied, the result of the previous function call is passed to the next one as the first argument. - -So, the first argument is essentially the accumulator that stores the combined result of all previous executions. And at the end it becomes the result of `reduce`. - -Sounds complicated? - -The easiest way to grasp that is by example. - -Here we get a sum of an array in one line: - -```js run -let arr = [1, 2, 3, 4, 5]; - -let result = arr.reduce((sum, current) => sum + current, 0); - -alert(result); // 15 -``` - -The function passed to `reduce` uses only 2 arguments, that's typically enough. - -Let's see the details of what's going on. - -1. On the first run, `sum` is the `initial` value (the last argument of `reduce`), equals `0`, and `current` is the first array element, equals `1`. So the function result is `1`. -2. On the second run, `sum = 1`, we add the second array element (`2`) to it and return. -3. On the 3rd run, `sum = 3` and we add one more element to it, and so on... - -The calculation flow: - -![](reduce.svg) - -Or in the form of a table, where each row represents a function call on the next array element: - -| |`sum`|`current`|result| -|---|-----|---------|---------| -|the first call|`0`|`1`|`1`| -|the second call|`1`|`2`|`3`| -|the third call|`3`|`3`|`6`| -|the fourth call|`6`|`4`|`10`| -|the fifth call|`10`|`5`|`15`| - -Here we can clearly see how the result of the previous call becomes the first argument of the next one. - -We also can omit the initial value: - -```js run -let arr = [1, 2, 3, 4, 5]; - -// removed initial value from reduce (no 0) -let result = arr.reduce((sum, current) => sum + current); - -alert( result ); // 15 -``` - -The result is the same. That's because if there's no initial, then `reduce` takes the first element of the array as the initial value and starts the iteration from the 2nd element. - -The calculation table is the same as above, minus the first row. - -But such use requires an extreme care. If the array is empty, then `reduce` call without initial value gives an error. - -Here's an example: - -```js run -let arr = []; - -// Error: Reduce of empty array with no initial value -// if the initial value existed, reduce would return it for the empty arr. -arr.reduce((sum, current) => sum + current); -``` - -So it's advised to always specify the initial value. - -The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left. - - -## Array.isArray - -Arrays do not form a separate language type. They are based on objects. - -So `typeof` does not help to distinguish a plain object from an array: - -```js run -alert(typeof {}); // object -alert(typeof []); // same -``` - -...But arrays are used so often that there's a special method for that: [Array.isArray(value)](mdn:js/Array/isArray). It returns `true` if the `value` is an array, and `false` otherwise. - -```js run -alert(Array.isArray({})); // false - -alert(Array.isArray([])); // true -``` - -## Most methods support "thisArg" - -Almost all array methods that call functions -- like `find`, `filter`, `map`, with a notable exception of `sort`, accept an optional additional parameter `thisArg`. - -That parameter is not explained in the sections above, because it's rarely used. But for completeness we have to cover it. - -Here's the full syntax of these methods: - -```js -arr.find(func, thisArg); -arr.filter(func, thisArg); -arr.map(func, thisArg); -// ... -// thisArg is the optional last argument -``` - -The value of `thisArg` parameter becomes `this` for `func`. - -For example, here we use a method of `army` object as a filter, and `thisArg` passes the context: - -```js run -let army = { - minAge: 18, - maxAge: 27, - canJoin(user) { - return user.age >= this.minAge && user.age < this.maxAge; - } -}; - -let users = [ - {age: 16}, - {age: 20}, - {age: 23}, - {age: 30} -]; - -*!* -// find users, for who army.canJoin returns true -let soldiers = users.filter(army.canJoin, army); -*/!* - -alert(soldiers.length); // 2 -alert(soldiers[0].age); // 20 -alert(soldiers[1].age); // 23 -``` - -If in the example above we used `users.filter(army.canJoin)`, then `army.canJoin` would be called as a standalone function, with `this=undefined`, thus leading to an instant error. - -A call to `users.filter(army.canJoin, army)` can be replaced with `users.filter(user => army.canJoin(user))`, that does the same. The former is used more often, as it's a bit easier to understand for most people. - -## Summary - -A cheat sheet of array methods: - -- To add/remove elements: - - `push(...items)` -- adds items to the end, - - `pop()` -- extracts an item from the end, - - `shift()` -- extracts an item from the beginning, - - `unshift(...items)` -- adds items to the beginning. - - `splice(pos, deleteCount, ...items)` -- at index `pos` delete `deleteCount` elements and insert `items`. - - `slice(start, end)` -- creates a new array, copies elements from position `start` till `end` (not inclusive) into it. - - `concat(...items)` -- returns a new array: copies all members of the current one and adds `items` to it. If any of `items` is an array, then its elements are taken. - -- To search among elements: - - `indexOf/lastIndexOf(item, pos)` -- look for `item` starting from position `pos`, return the index or `-1` if not found. - - `includes(value)` -- returns `true` if the array has `value`, otherwise `false`. - - `find/filter(func)` -- filter elements through the function, return first/all values that make it return `true`. - - `findIndex` is like `find`, but returns the index instead of a value. - -- To iterate over elements: - - `forEach(func)` -- calls `func` for every element, does not return anything. - -- To transform the array: - - `map(func)` -- creates a new array from results of calling `func` for every element. - - `sort(func)` -- sorts the array in-place, then returns it. - - `reverse()` -- reverses the array in-place, then returns it. - - `split/join` -- convert a string to array and back. - - `reduce(func, initial)` -- calculate a single value over the array by calling `func` for each element and passing an intermediate result between the calls. - -- Additionally: - - `Array.isArray(arr)` checks `arr` for being an array. - -Please note that methods `sort`, `reverse` and `splice` modify the array itself. - -These methods are the most used ones, they cover 99% of use cases. But there are few others: - -- [arr.some(fn)](mdn:js/Array/some)/[arr.every(fn)](mdn:js/Array/every) checks the array. - - The function `fn` is called on each element of the array similar to `map`. If any/all results are `true`, returns `true`, otherwise `false`. - -- [arr.fill(value, start, end)](mdn:js/Array/fill) -- fills the array with repeating `value` from index `start` to `end`. - -- [arr.copyWithin(target, start, end)](mdn:js/Array/copyWithin) -- copies its elements from position `start` till position `end` into *itself*, at position `target` (overwrites existing). - -For the full list, see the [manual](mdn:js/Array). - -From the first sight it may seem that there are so many methods, quite difficult to remember. But actually that's much easier. - -Look through the cheat sheet just to be aware of them. Then solve the tasks of this chapter to practice, so that you have experience with array methods. - -Afterwards whenever you need to do something with an array, and you don't know how -- come here, look at the cheat sheet and find the right method. Examples will help you to write it correctly. Soon you'll automatically remember the methods, without specific efforts from your side. diff --git a/1-js/05-data-types/05-array-methods/reduce.svg b/1-js/05-data-types/05-array-methods/reduce.svg deleted file mode 100644 index fcac711cbe..0000000000 --- a/1-js/05-data-types/05-array-methods/reduce.svg +++ /dev/null @@ -1 +0,0 @@ -1sum 0 current 12sum 0+1 current 23sum 0+1+2 current 34sum 0+1+2+3 current 45sum 0+1+2+3+4 current 50+1+2+3+4+5 = 15 \ No newline at end of file diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md deleted file mode 100644 index 8a38516e1c..0000000000 --- a/1-js/05-data-types/06-iterable/article.md +++ /dev/null @@ -1,307 +0,0 @@ - -# Iterables - -*Iterable* objects is a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop. - -Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, strings are also iterable. - -If an object isn't technically an array, but represents a collection (list, set) of something, then `for..of` is a great syntax to loop over it, so let's see how to make it work. - - -## Symbol.iterator - -We can easily grasp the concept of iterables by making one of our own. - -For instance, we have an object that is not an array, but looks suitable for `for..of`. - -Like a `range` object that represents an interval of numbers: - -```js -let range = { - from: 1, - to: 5 -}; - -// We want the for..of to work: -// for(let num of range) ... num=1,2,3,4,5 -``` - -To make the `range` iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that). - -1. When `for..of` starts, it calls that method once (or errors if not found). The method must return an *iterator* -- an object with the method `next`. -2. Onward, `for..of` works *only with that returned object*. -3. When `for..of` wants the next value, it calls `next()` on that object. -4. The result of `next()` must have the form `{done: Boolean, value: any}`, where `done=true` means that the iteration is finished, otherwise `value` is the next value. - -Here's the full implementation for `range` with remarks: - -```js run -let range = { - from: 1, - to: 5 -}; - -// 1. call to for..of initially calls this -range[Symbol.iterator] = function() { - - // ...it returns the iterator object: - // 2. Onward, for..of works only with this iterator, asking it for next values - return { - current: this.from, - last: this.to, - - // 3. next() is called on each iteration by the for..of loop - next() { - // 4. it should return the value as an object {done:.., value :...} - if (this.current <= this.last) { - return { done: false, value: this.current++ }; - } else { - return { done: true }; - } - } - }; -}; - -// now it works! -for (let num of range) { - alert(num); // 1, then 2, 3, 4, 5 -} -``` - -Please note the core feature of iterables: separation of concerns. - -- The `range` itself does not have the `next()` method. -- Instead, another object, a so-called "iterator" is created by the call to `range[Symbol.iterator]()`, and its `next()` generates values for the iteration. - -So, the iterator object is separate from the object it iterates over. - -Technically, we may merge them and use `range` itself as the iterator to make the code simpler. - -Like this: - -```js run -let range = { - from: 1, - to: 5, - - [Symbol.iterator]() { - this.current = this.from; - return this; - }, - - next() { - if (this.current <= this.to) { - return { done: false, value: this.current++ }; - } else { - return { done: true }; - } - } -}; - -for (let num of range) { - alert(num); // 1, then 2, 3, 4, 5 -} -``` - -Now `range[Symbol.iterator]()` returns the `range` object itself: it has the necessary `next()` method and remembers the current iteration progress in `this.current`. Shorter? Yes. And sometimes that's fine too. - -The downside is that now it's impossible to have two `for..of` loops running over the object simultaneously: they'll share the iteration state, because there's only one iterator -- the object itself. But two parallel for-ofs is a rare thing, even in async scenarios. - -```smart header="Infinite iterators" -Infinite iterators are also possible. For instance, the `range` becomes infinite for `range.to = Infinity`. Or we can make an iterable object that generates an infinite sequence of pseudorandom numbers. Also can be useful. - -There are no limitations on `next`, it can return more and more values, that's normal. - -Of course, the `for..of` loop over such an iterable would be endless. But we can always stop it using `break`. -``` - - -## String is iterable - -Arrays and strings are most widely used built-in iterables. - -For a string, `for..of` loops over its characters: - -```js run -for (let char of "test") { - // triggers 4 times: once for each character - alert( char ); // t, then e, then s, then t -} -``` - -And it works correctly with surrogate pairs! - -```js run -let str = '𝒳😂'; -for (let char of str) { - alert( char ); // 𝒳, and then 😂 -} -``` - -## Calling an iterator explicitly - -For deeper understanding let's see how to use an iterator explicitly. - -We'll iterate over a string in exactly the same way as `for..of`, but with direct calls. This code creates a string iterator and gets values from it "manually": - -```js run -let str = "Hello"; - -// does the same as -// for (let char of str) alert(char); - -*!* -let iterator = str[Symbol.iterator](); -*/!* - -while (true) { - let result = iterator.next(); - if (result.done) break; - alert(result.value); // outputs characters one by one -} -``` - -That is rarely needed, but gives us more control over the process than `for..of`. For instance, we can split the iteration process: iterate a bit, then stop, do something else, and then resume later. - -## Iterables and array-likes [#array-like] - -There are two official terms that look similar, but are very different. Please make sure you understand them well to avoid the confusion. - -- *Iterables* are objects that implement the `Symbol.iterator` method, as described above. -- *Array-likes* are objects that have indexes and `length`, so they look like arrays. - -When we use JavaScript for practical tasks in browser or other environments, we may meet objects that are iterables or array-likes, or both. - -For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`). - -But an iterable may be not array-like. And vice versa an array-like may be not iterable. - -For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`. - -And here's the object that is array-like, but not iterable: - -```js run -let arrayLike = { // has indexes and length => array-like - 0: "Hello", - 1: "World", - length: 2 -}; - -*!* -// Error (no Symbol.iterator) -for (let item of arrayLike) {} -*/!* -``` - -Both iterables and array-likes are usually *not arrays*, they don't have `push`, `pop` etc. That's rather inconvenient if we have such an object and want to work with it as with an array. E.g. we would like to work with `range` using array methods. How to achieve that? - -## Array.from - -There's a universal method [Array.from](mdn:js/Array/from) that takes an iterable or array-like value and makes a "real" `Array` from it. Then we can call array methods on it. - -For instance: - -```js run -let arrayLike = { - 0: "Hello", - 1: "World", - length: 2 -}; - -*!* -let arr = Array.from(arrayLike); // (*) -*/!* -alert(arr.pop()); // World (method works) -``` - -`Array.from` at the line `(*)` takes the object, examines it for being an iterable or array-like, then makes a new array and copies all items to it. - -The same happens for an iterable: - -```js -// assuming that range is taken from the example above -let arr = Array.from(range); -alert(arr); // 1,2,3,4,5 (array toString conversion works) -``` - -The full syntax for `Array.from` also allows us to provide an optional "mapping" function: -```js -Array.from(obj[, mapFn, thisArg]) -``` - -The optional second argument `mapFn` can be a function that will be applied to each element before adding it to the array, and `thisArg` allows us to set `this` for it. - -For instance: - -```js -// assuming that range is taken from the example above - -// square each number -let arr = Array.from(range, num => num * num); - -alert(arr); // 1,4,9,16,25 -``` - -Here we use `Array.from` to turn a string into an array of characters: - -```js run -let str = '𝒳😂'; - -// splits str into array of characters -let chars = Array.from(str); - -alert(chars[0]); // 𝒳 -alert(chars[1]); // 😂 -alert(chars.length); // 2 -``` - -Unlike `str.split`, it relies on the iterable nature of the string and so, just like `for..of`, correctly works with surrogate pairs. - -Technically here it does the same as: - -```js run -let str = '𝒳😂'; - -let chars = []; // Array.from internally does the same loop -for (let char of str) { - chars.push(char); -} - -alert(chars); -``` - -...But it is shorter. - -We can even build surrogate-aware `slice` on it: - -```js run -function slice(str, start, end) { - return Array.from(str).slice(start, end).join(''); -} - -let str = '𝒳😂𩷶'; - -alert( slice(str, 1, 3) ); // 😂𩷶 - -// the native method does not support surrogate pairs -alert( str.slice(1, 3) ); // garbage (two pieces from different surrogate pairs) -``` - - -## Summary - -Objects that can be used in `for..of` are called *iterable*. - -- Technically, iterables must implement the method named `Symbol.iterator`. - - The result of `obj[Symbol.iterator]` is called an *iterator*. It handles the further iteration process. - - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. -- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly. -- Built-in iterables like strings or arrays, also implement `Symbol.iterator`. -- String iterator knows about surrogate pairs. - - -Objects that have indexed properties and `length` are called *array-like*. Such objects may also have other properties and methods, but lack the built-in methods of arrays. - -If we look inside the specification -- we'll see that most built-in methods assume that they work with iterables or array-likes instead of "real" arrays, because that's more abstract. - -`Array.from(obj[, mapFn, thisArg])` makes a real `Array` of an iterable or array-like `obj`, and we can then use array methods on it. The optional arguments `mapFn` and `thisArg` allow us to apply a function to each item. diff --git a/1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/solution.js b/1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/solution.js deleted file mode 100644 index de504e1eff..0000000000 --- a/1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/solution.js +++ /dev/null @@ -1,3 +0,0 @@ -function unique(arr) { - return Array.from(new Set(arr)); -} diff --git a/1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/test.js b/1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/test.js deleted file mode 100644 index cfc7b1fc30..0000000000 --- a/1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/test.js +++ /dev/null @@ -1,15 +0,0 @@ -describe("unique", function() { - it("removes non-unique elements", function() { - let strings = ["Hare", "Krishna", "Hare", "Krishna", - "Krishna", "Krishna", "Hare", "Hare", ":-O" - ]; - - assert.deepEqual(unique(strings), ["Hare", "Krishna", ":-O"]); - }); - - it("does not change the source array", function() { - let strings = ["Krishna", "Krishna", "Hare", "Hare"]; - unique(strings); - assert.deepEqual(strings, ["Krishna", "Krishna", "Hare", "Hare"]); - }); -}); diff --git a/1-js/05-data-types/07-map-set/01-array-unique-map/solution.md b/1-js/05-data-types/07-map-set/01-array-unique-map/solution.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/1-js/05-data-types/07-map-set/01-array-unique-map/task.md b/1-js/05-data-types/07-map-set/01-array-unique-map/task.md deleted file mode 100644 index d68030032e..0000000000 --- a/1-js/05-data-types/07-map-set/01-array-unique-map/task.md +++ /dev/null @@ -1,27 +0,0 @@ -importance: 5 - ---- - -# Filter unique array members - -Let `arr` be an array. - -Create a function `unique(arr)` that should return an array with unique items of `arr`. - -For instance: - -```js -function unique(arr) { - /* your code */ -} - -let values = ["Hare", "Krishna", "Hare", "Krishna", - "Krishna", "Krishna", "Hare", "Hare", ":-O" -]; - -alert( unique(values) ); // Hare, Krishna, :-O -``` - -P.S. Here strings are used, but can be values of any type. - -P.P.S. Use `Set` to store unique values. diff --git a/1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/solution.js b/1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/solution.js deleted file mode 100644 index b9f5016f80..0000000000 --- a/1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/solution.js +++ /dev/null @@ -1,11 +0,0 @@ - -function aclean(arr) { - let map = new Map(); - - for(let word of arr) { - let sorted = word.toLowerCase().split("").sort().join(""); - map.set(sorted, word); - } - - return Array.from(map.values()); -} \ No newline at end of file diff --git a/1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/test.js b/1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/test.js deleted file mode 100644 index 75acb36b79..0000000000 --- a/1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/test.js +++ /dev/null @@ -1,24 +0,0 @@ -function intersection(arr1, arr2) { - return arr1.filter(item => arr2.includes(item)); -} - -describe("aclean", function() { - - it("returns exactly 1 word from each anagram set", function() { - let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"]; - - let result = aclean(arr); - assert.equal(result.length, 3); - - assert.equal(intersection(result, ["nap", "PAN"]).length, 1); - assert.equal(intersection(result, ["teachers", "cheaters", "hectares"]).length, 1); - assert.equal(intersection(result, ["ear", "era"]).length, 1); - - }); - - it("is case-insensitive", function() { - let arr = ["era", "EAR"]; - assert.equal(aclean(arr).length, 1); - }); - -}); \ No newline at end of file diff --git a/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md b/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md deleted file mode 100644 index 1606751852..0000000000 --- a/1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md +++ /dev/null @@ -1,77 +0,0 @@ -To find all anagrams, let's split every word to letters and sort them. When letter-sorted, all anagrams are same. - -For instance: - -``` -nap, pan -> anp -ear, era, are -> aer -cheaters, hectares, teachers -> aceehrst -... -``` - -We'll use the letter-sorted variants as map keys to store only one value per each key: - -```js run -function aclean(arr) { - let map = new Map(); - - for (let word of arr) { - // split the word by letters, sort them and join back -*!* - let sorted = word.toLowerCase().split('').sort().join(''); // (*) -*/!* - map.set(sorted, word); - } - - return Array.from(map.values()); -} - -let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"]; - -alert( aclean(arr) ); -``` - -Letter-sorting is done by the chain of calls in the line `(*)`. - -For convenience let's split it into multiple lines: - -```js -let sorted = word // PAN - .toLowerCase() // pan - .split('') // ['p','a','n'] - .sort() // ['a','n','p'] - .join(''); // anp -``` - -Two different words `'PAN'` and `'nap'` receive the same letter-sorted form `'anp'`. - -The next line put the word into the map: - -```js -map.set(sorted, word); -``` - -If we ever meet a word the same letter-sorted form again, then it would overwrite the previous value with the same key in the map. So we'll always have at maximum one word per letter-form. - -At the end `Array.from(map.values())` takes an iterable over map values (we don't need keys in the result) and returns an array of them. - -Here we could also use a plain object instead of the `Map`, because keys are strings. - -That's how the solution can look: - -```js run demo -function aclean(arr) { - let obj = {}; - - for (let i = 0; i < arr.length; i++) { - let sorted = arr[i].toLowerCase().split("").sort().join(""); - obj[sorted] = arr[i]; - } - - return Object.values(obj); -} - -let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"]; - -alert( aclean(arr) ); -``` diff --git a/1-js/05-data-types/07-map-set/02-filter-anagrams/task.md b/1-js/05-data-types/07-map-set/02-filter-anagrams/task.md deleted file mode 100644 index 731fd2c256..0000000000 --- a/1-js/05-data-types/07-map-set/02-filter-anagrams/task.md +++ /dev/null @@ -1,28 +0,0 @@ -importance: 4 - ---- - -# Filter anagrams - -[Anagrams](https://en.wikipedia.org/wiki/Anagram) are words that have the same number of same letters, but in different order. - -For instance: - -``` -nap - pan -ear - are - era -cheaters - hectares - teachers -``` - -Write a function `aclean(arr)` that returns an array cleaned from anagrams. - -For instance: - -```js -let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"]; - -alert( aclean(arr) ); // "nap,teachers,ear" or "PAN,cheaters,era" -``` - -From every anagram group should remain only one word, no matter which one. - diff --git a/1-js/05-data-types/07-map-set/03-iterable-keys/solution.md b/1-js/05-data-types/07-map-set/03-iterable-keys/solution.md deleted file mode 100644 index 7310d1d36f..0000000000 --- a/1-js/05-data-types/07-map-set/03-iterable-keys/solution.md +++ /dev/null @@ -1,19 +0,0 @@ - -That's because `map.keys()` returns an iterable, but not an array. - -We can convert it into an array using `Array.from`: - - -```js run -let map = new Map(); - -map.set("name", "John"); - -*!* -let keys = Array.from(map.keys()); -*/!* - -keys.push("more"); - -alert(keys); // name, more -``` diff --git a/1-js/05-data-types/07-map-set/03-iterable-keys/task.md b/1-js/05-data-types/07-map-set/03-iterable-keys/task.md deleted file mode 100644 index 25c74bfc20..0000000000 --- a/1-js/05-data-types/07-map-set/03-iterable-keys/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# Iterable keys - -We'd like to get an array of `map.keys()` in a variable and then do apply array-specific methods to it, e.g. `.push`. - -But that doesn't work: - -```js run -let map = new Map(); - -map.set("name", "John"); - -let keys = map.keys(); - -*!* -// Error: keys.push is not a function -keys.push("more"); -*/!* -``` - -Why? How can we fix the code to make `keys.push` work? diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md deleted file mode 100644 index e08c84084f..0000000000 --- a/1-js/05-data-types/07-map-set/article.md +++ /dev/null @@ -1,330 +0,0 @@ - -# Map and Set - -Now we've learned about the following complex data structures: - -- Objects for storing keyed collections. -- Arrays for storing ordered collections. - -But that's not enough for real life. That's why `Map` and `Set` also exist. - -## Map - -[Map](mdn:js/Map) is a collection of keyed data items, just like an `Object`. But the main difference is that `Map` allows keys of any type. - -Methods and properties are: - -- `new Map()` -- creates the map. -- `map.set(key, value)` -- stores the value by the key. -- `map.get(key)` -- returns the value by the key, `undefined` if `key` doesn't exist in map. -- `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise. -- `map.delete(key)` -- removes the value by the key. -- `map.clear()` -- removes everything from the map. -- `map.size` -- returns the current element count. - -For instance: - -```js run -let map = new Map(); - -map.set('1', 'str1'); // a string key -map.set(1, 'num1'); // a numeric key -map.set(true, 'bool1'); // a boolean key - -// remember the regular Object? it would convert keys to string -// Map keeps the type, so these two are different: -alert( map.get(1) ); // 'num1' -alert( map.get('1') ); // 'str1' - -alert( map.size ); // 3 -``` - -As we can see, unlike objects, keys are not converted to strings. Any type of key is possible. - -```smart header="`map[key]` isn't the right way to use a `Map`" -Although `map[key]` also works, e.g. we can set `map[key] = 2`, this is treating `map` as a plain JavaScript object, so it implies all corresponding limitations (no object keys and so on). - -So we should use `map` methods: `set`, `get` and so on. -``` - -**Map can also use objects as keys.** - -For instance: - -```js run -let john = { name: "John" }; - -// for every user, let's store their visits count -let visitsCountMap = new Map(); - -// john is the key for the map -visitsCountMap.set(john, 123); - -alert( visitsCountMap.get(john) ); // 123 -``` - -Using objects as keys is one of most notable and important `Map` features. For string keys, `Object` can be fine, but not for object keys. - -Let's try: - -```js run -let john = { name: "John" }; - -let visitsCountObj = {}; // try to use an object - -visitsCountObj[john] = 123; // try to use john object as the key - -*!* -// That's what got written! -alert( visitsCountObj["[object Object]"] ); // 123 -*/!* -``` - -As `visitsCountObj` is an object, it converts all keys, such as `john` to strings, so we've got the string key `"[object Object]"`. Definitely not what we want. - -```smart header="How `Map` compares keys" -To test keys for equivalence, `Map` uses the algorithm [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). It is roughly the same as strict equality `===`, but the difference is that `NaN` is considered equal to `NaN`. So `NaN` can be used as the key as well. - -This algorithm can't be changed or customized. -``` - -````smart header="Chaining" -Every `map.set` call returns the map itself, so we can "chain" the calls: - -```js -map.set('1', 'str1') - .set(1, 'num1') - .set(true, 'bool1'); -``` -```` - - -## Iteration over Map - -For looping over a `map`, there are 3 methods: - -- `map.keys()` -- returns an iterable for keys, -- `map.values()` -- returns an iterable for values, -- `map.entries()` -- returns an iterable for entries `[key, value]`, it's used by default in `for..of`. - -For instance: - -```js run -let recipeMap = new Map([ - ['cucumber', 500], - ['tomatoes', 350], - ['onion', 50] -]); - -// iterate over keys (vegetables) -for (let vegetable of recipeMap.keys()) { - alert(vegetable); // cucumber, tomatoes, onion -} - -// iterate over values (amounts) -for (let amount of recipeMap.values()) { - alert(amount); // 500, 350, 50 -} - -// iterate over [key, value] entries -for (let entry of recipeMap) { // the same as of recipeMap.entries() - alert(entry); // cucumber,500 (and so on) -} -``` - -```smart header="The insertion order is used" -The iteration goes in the same order as the values were inserted. `Map` preserves this order, unlike a regular `Object`. -``` - -Besides that, `Map` has a built-in `forEach` method, similar to `Array`: - -```js -// runs the function for each (key, value) pair -recipeMap.forEach( (value, key, map) => { - alert(`${key}: ${value}`); // cucumber: 500 etc -}); -``` - -## Object.entries: Map from Object - -When a `Map` is created, we can pass an array (or another iterable) with key/value pairs for initialization, like this: - -```js run -// array of [key, value] pairs -let map = new Map([ - ['1', 'str1'], - [1, 'num1'], - [true, 'bool1'] -]); - -alert( map.get('1') ); // str1 -``` - -If we have a plain object, and we'd like to create a `Map` from it, then we can use built-in method [Object.entries(obj)](mdn:js/Object/entries) that returns an array of key/value pairs for an object exactly in that format. - -So we can create a map from an object like this: - -```js run -let obj = { - name: "John", - age: 30 -}; - -*!* -let map = new Map(Object.entries(obj)); -*/!* - -alert( map.get('name') ); // John -``` - -Here, `Object.entries` returns the array of key/value pairs: `[ ["name","John"], ["age", 30] ]`. That's what `Map` needs. - - -## Object.fromEntries: Object from Map - -We've just seen how to create `Map` from a plain object with `Object.entries(obj)`. - -There's `Object.fromEntries` method that does the reverse: given an array of `[key, value]` pairs, it creates an object from them: - -```js run -let prices = Object.fromEntries([ - ['banana', 1], - ['orange', 2], - ['meat', 4] -]); - -// now prices = { banana: 1, orange: 2, meat: 4 } - -alert(prices.orange); // 2 -``` - -We can use `Object.fromEntries` to get a plain object from `Map`. - -E.g. we store the data in a `Map`, but we need to pass it to a 3rd-party code that expects a plain object. - -Here we go: - -```js run -let map = new Map(); -map.set('banana', 1); -map.set('orange', 2); -map.set('meat', 4); - -*!* -let obj = Object.fromEntries(map.entries()); // make a plain object (*) -*/!* - -// done! -// obj = { banana: 1, orange: 2, meat: 4 } - -alert(obj.orange); // 2 -``` - -A call to `map.entries()` returns an iterable of key/value pairs, exactly in the right format for `Object.fromEntries`. - -We could also make line `(*)` shorter: -```js -let obj = Object.fromEntries(map); // omit .entries() -``` - -That's the same, because `Object.fromEntries` expects an iterable object as the argument. Not necessarily an array. And the standard iteration for `map` returns same key/value pairs as `map.entries()`. So we get a plain object with same key/values as the `map`. - -## Set - -A `Set` is a special type collection - "set of values" (without keys), where each value may occur only once. - -Its main methods are: - -- `new Set(iterable)` -- creates the set, and if an `iterable` object is provided (usually an array), copies values from it into the set. -- `set.add(value)` -- adds a value, returns the set itself. -- `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`. -- `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`. -- `set.clear()` -- removes everything from the set. -- `set.size` -- is the elements count. - -The main feature is that repeated calls of `set.add(value)` with the same value don't do anything. That's the reason why each value appears in a `Set` only once. - -For example, we have visitors coming, and we'd like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be "counted" only once. - -`Set` is just the right thing for that: - -```js run -let set = new Set(); - -let john = { name: "John" }; -let pete = { name: "Pete" }; -let mary = { name: "Mary" }; - -// visits, some users come multiple times -set.add(john); -set.add(pete); -set.add(mary); -set.add(john); -set.add(mary); - -// set keeps only unique values -alert( set.size ); // 3 - -for (let user of set) { - alert(user.name); // John (then Pete and Mary) -} -``` - -The alternative to `Set` could be an array of users, and the code to check for duplicates on every insertion using [arr.find](mdn:js/Array/find). But the performance would be much worse, because this method walks through the whole array checking every element. `Set` is much better optimized internally for uniqueness checks. - -## Iteration over Set - -We can loop over a set either with `for..of` or using `forEach`: - -```js run -let set = new Set(["oranges", "apples", "bananas"]); - -for (let value of set) alert(value); - -// the same with forEach: -set.forEach((value, valueAgain, set) => { - alert(value); -}); -``` - -Note the funny thing. The callback function passed in `forEach` has 3 arguments: a `value`, then *the same value* `valueAgain`, and then the target object. Indeed, the same value appears in the arguments twice. - -That's for compatibility with `Map` where the callback passed `forEach` has three arguments. Looks a bit strange, for sure. But may help to replace `Map` with `Set` in certain cases with ease, and vice versa. - -The same methods `Map` has for iterators are also supported: - -- `set.keys()` -- returns an iterable object for values, -- `set.values()` -- same as `set.keys()`, for compatibility with `Map`, -- `set.entries()` -- returns an iterable object for entries `[value, value]`, exists for compatibility with `Map`. - -## Summary - -`Map` -- is a collection of keyed values. - -Methods and properties: - -- `new Map([iterable])` -- creates the map, with optional `iterable` (e.g. array) of `[key,value]` pairs for initialization. -- `map.set(key, value)` -- stores the value by the key. -- `map.get(key)` -- returns the value by the key, `undefined` if `key` doesn't exist in map. -- `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise. -- `map.delete(key)` -- removes the value by the key. -- `map.clear()` -- removes everything from the map. -- `map.size` -- returns the current element count. - -The differences from a regular `Object`: - -- Any keys, objects can be keys. -- Additional convenient methods, the `size` property. - -`Set` -- is a collection of unique values. - -Methods and properties: - -- `new Set([iterable])` -- creates the set, with optional `iterable` (e.g. array) of values for initialization. -- `set.add(value)` -- adds a value (does nothing if `value` exists), returns the set itself. -- `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`. -- `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`. -- `set.clear()` -- removes everything from the set. -- `set.size` -- is the elements count. - -Iteration over `Map` and `Set` is always in the insertion order, so we can't say that these collections are unordered, but we can't reorder elements or directly get an element by its number. diff --git a/1-js/05-data-types/08-weakmap-weakset/01-recipients-read/solution.md b/1-js/05-data-types/08-weakmap-weakset/01-recipients-read/solution.md deleted file mode 100644 index 6a4c20baf7..0000000000 --- a/1-js/05-data-types/08-weakmap-weakset/01-recipients-read/solution.md +++ /dev/null @@ -1,43 +0,0 @@ -Let's store read messages in `WeakSet`: - -```js run -let messages = [ - {text: "Hello", from: "John"}, - {text: "How goes?", from: "John"}, - {text: "See you soon", from: "Alice"} -]; - -let readMessages = new WeakSet(); - -// two messages have been read -readMessages.add(messages[0]); -readMessages.add(messages[1]); -// readMessages has 2 elements - -// ...let's read the first message again! -readMessages.add(messages[0]); -// readMessages still has 2 unique elements - -// answer: was the message[0] read? -alert("Read message 0: " + readMessages.has(messages[0])); // true - -messages.shift(); -// now readMessages has 1 element (technically memory may be cleaned later) -``` - -The `WeakSet` allows to store a set of messages and easily check for the existance of a message in it. - -It cleans up itself automatically. The tradeoff is that we can't iterate over it, can't get "all read messages" from it directly. But we can do it by iterating over all messages and filtering those that are in the set. - -Another, different solution could be to add a property like `message.isRead=true` to a message after it's read. As messages objects are managed by another code, that's generally discouraged, but we can use a symbolic property to avoid conflicts. - -Like this: -```js -// the symbolic property is only known to our code -let isRead = Symbol("isRead"); -messages[0][isRead] = true; -``` - -Now third-party code probably won't see our extra property. - -Although symbols allow to lower the probability of problems, using `WeakSet` is better from the architectural point of view. diff --git a/1-js/05-data-types/08-weakmap-weakset/01-recipients-read/task.md b/1-js/05-data-types/08-weakmap-weakset/01-recipients-read/task.md deleted file mode 100644 index fd31a891b7..0000000000 --- a/1-js/05-data-types/08-weakmap-weakset/01-recipients-read/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Store "unread" flags - -There's an array of messages: - -```js -let messages = [ - {text: "Hello", from: "John"}, - {text: "How goes?", from: "John"}, - {text: "See you soon", from: "Alice"} -]; -``` - -Your code can access it, but the messages are managed by someone else's code. New messages are added, old ones are removed regularly by that code, and you don't know the exact moments when it happens. - -Now, which data structure could you use to store information about whether the message "has been read"? The structure must be well-suited to give the answer "was it read?" for the given message object. - -P.S. When a message is removed from `messages`, it should disappear from your structure as well. - -P.P.S. We shouldn't modify message objects, add our properties to them. As they are managed by someone else's code, that may lead to bad consequences. diff --git a/1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/solution.md b/1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/solution.md deleted file mode 100644 index 2af0547c1f..0000000000 --- a/1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/solution.md +++ /dev/null @@ -1,15 +0,0 @@ - -To store a date, we can use `WeakMap`: - -```js -let messages = [ - {text: "Hello", from: "John"}, - {text: "How goes?", from: "John"}, - {text: "See you soon", from: "Alice"} -]; - -let readMap = new WeakMap(); - -readMap.set(messages[0], new Date(2017, 1, 1)); -// Date object we'll study later -``` diff --git a/1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/task.md b/1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/task.md deleted file mode 100644 index 8e341c1841..0000000000 --- a/1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/task.md +++ /dev/null @@ -1,21 +0,0 @@ -importance: 5 - ---- - -# Store read dates - -There's an array of messages as in the [previous task](info:task/recipients-read). The situation is similar. - -```js -let messages = [ - {text: "Hello", from: "John"}, - {text: "How goes?", from: "John"}, - {text: "See you soon", from: "Alice"} -]; -``` - -The question now is: which data structure you'd suggest to store the information: "when the message was read?". - -In the previous task we only needed to store the "yes/no" fact. Now we need to store the date, and it should only remain in memory until the message is garbage collected. - -P.S. Dates can be stored as objects of built-in `Date` class, that we'll cover later. diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md deleted file mode 100644 index bcc5e5e6f5..0000000000 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ /dev/null @@ -1,288 +0,0 @@ -# WeakMap and WeakSet - -As we know from the chapter , JavaScript engine stores a value in memory while it is reachable (and can potentially be used). - -For instance: -```js -let john = { name: "John" }; - -// the object can be accessed, john is the reference to it - -// overwrite the reference -john = null; - -*!* -// the object will be removed from memory -*/!* -``` - -Usually, properties of an object or elements of an array or another data structure are considered reachable and kept in memory while that data structure is in memory. - -For instance, if we put an object into an array, then while the array is alive, the object will be alive as well, even if there are no other references to it. - -Like this: - -```js -let john = { name: "John" }; - -let array = [ john ]; - -john = null; // overwrite the reference - -*!* -// john is stored inside the array, so it won't be garbage-collected -// we can get it as array[0] -*/!* -``` - -Similar to that, if we use an object as the key in a regular `Map`, then while the `Map` exists, that object exists as well. It occupies memory and may not be garbage collected. - -For instance: - -```js -let john = { name: "John" }; - -let map = new Map(); -map.set(john, "..."); - -john = null; // overwrite the reference - -*!* -// john is stored inside the map, -// we can get it by using map.keys() -*/!* -``` - -`WeakMap` is fundamentally different in this aspect. It doesn't prevent garbage-collection of key objects. - -Let's see what it means on examples. - -## WeakMap - -The first difference from `Map` is that `WeakMap` keys must be objects, not primitive values: - -```js run -let weakMap = new WeakMap(); - -let obj = {}; - -weakMap.set(obj, "ok"); // works fine (object key) - -*!* -// can't use a string as the key -weakMap.set("test", "Whoops"); // Error, because "test" is not an object -*/!* -``` - -Now, if we use an object as the key in it, and there are no other references to that object -- it will be removed from memory (and from the map) automatically. - -```js -let john = { name: "John" }; - -let weakMap = new WeakMap(); -weakMap.set(john, "..."); - -john = null; // overwrite the reference - -// john is removed from memory! -``` - -Compare it with the regular `Map` example above. Now if `john` only exists as the key of `WeakMap` -- it will be automatically deleted from the map (and memory). - -`WeakMap` does not support iteration and methods `keys()`, `values()`, `entries()`, so there's no way to get all keys or values from it. - -`WeakMap` has only the following methods: - -- `weakMap.get(key)` -- `weakMap.set(key, value)` -- `weakMap.delete(key)` -- `weakMap.has(key)` - -Why such a limitation? That's for technical reasons. If an object has lost all other references (like `john` in the code above), then it is to be garbage-collected automatically. But technically it's not exactly specified *when the cleanup happens*. - -The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically the current element count of a `WeakMap` is not known. The engine may have cleaned it up or not, or did it partially. For that reason, methods that access all keys/values are not supported. - -Now where do we need such data structure? - -## Use case: additional data - -The main area of application for `WeakMap` is an *additional data storage*. - -If we're working with an object that "belongs" to another code, maybe even a third-party library, and would like to store some data associated with it, that should only exist while the object is alive - then `WeakMap` is exactly what's needed. - -We put the data to a `WeakMap`, using the object as the key, and when the object is garbage collected, that data will automatically disappear as well. - -```js -weakMap.set(john, "secret documents"); -// if john dies, secret documents will be destroyed automatically -``` - -Let's look at an example. - -For instance, we have code that keeps a visit count for users. The information is stored in a map: a user object is the key and the visit count is the value. When a user leaves (its object gets garbage collected), we don't want to store their visit count anymore. - -Here's an example of a counting function with `Map`: - -```js -// 📁 visitsCount.js -let visitsCountMap = new Map(); // map: user => visits count - -// increase the visits count -function countUser(user) { - let count = visitsCountMap.get(user) || 0; - visitsCountMap.set(user, count + 1); -} -``` - -And here's another part of the code, maybe another file using it: - -```js -// 📁 main.js -let john = { name: "John" }; - -countUser(john); // count his visits - -// later john leaves us -john = null; -``` - -Now `john` object should be garbage collected, but remains in memory, as it's a key in `visitsCountMap`. - -We need to clean `visitsCountMap` when we remove users, otherwise it will grow in memory indefinitely. Such cleaning can become a tedious task in complex architectures. - -We can avoid it by switching to `WeakMap` instead: - -```js -// 📁 visitsCount.js -let visitsCountMap = new WeakMap(); // weakmap: user => visits count - -// increase the visits count -function countUser(user) { - let count = visitsCountMap.get(user) || 0; - visitsCountMap.set(user, count + 1); -} -``` - -Now we don't have to clean `visitsCountMap`. After `john` object becomes unreachable by all means except as a key of `WeakMap`, it gets removed from memory, along with the information by that key from `WeakMap`. - -## Use case: caching - -Another common example is caching: when a function result should be remembered ("cached"), so that future calls on the same object reuse it. - -We can use `Map` to store results, like this: - -```js run -// 📁 cache.js -let cache = new Map(); - -// calculate and remember the result -function process(obj) { - if (!cache.has(obj)) { - let result = /* calculations of the result for */ obj; - - cache.set(obj, result); - } - - return cache.get(obj); -} - -*!* -// Now we use process() in another file: -*/!* - -// 📁 main.js -let obj = {/* let's say we have an object */}; - -let result1 = process(obj); // calculated - -// ...later, from another place of the code... -let result2 = process(obj); // remembered result taken from cache - -// ...later, when the object is not needed any more: -obj = null; - -alert(cache.size); // 1 (Ouch! The object is still in cache, taking memory!) -``` - -For multiple calls of `process(obj)` with the same object, it only calculates the result the first time, and then just takes it from `cache`. The downside is that we need to clean `cache` when the object is not needed any more. - -If we replace `Map` with `WeakMap`, then this problem disappears: the cached result will be removed from memory automatically after the object gets garbage collected. - -```js run -// 📁 cache.js -*!* -let cache = new WeakMap(); -*/!* - -// calculate and remember the result -function process(obj) { - if (!cache.has(obj)) { - let result = /* calculate the result for */ obj; - - cache.set(obj, result); - } - - return cache.get(obj); -} - -// 📁 main.js -let obj = {/* some object */}; - -let result1 = process(obj); -let result2 = process(obj); - -// ...later, when the object is not needed any more: -obj = null; - -// Can't get cache.size, as it's a WeakMap, -// but it's 0 or soon be 0 -// When obj gets garbage collected, cached data will be removed as well -``` - -## WeakSet - -`WeakSet` behaves similarly: - -- It is analogous to `Set`, but we may only add objects to `WeakSet` (not primitives). -- An object exists in the set while it is reachable from somewhere else. -- Like `Set`, it supports `add`, `has` and `delete`, but not `size`, `keys()` and no iterations. - -Being "weak", it also serves as an additional storage. But not for an arbitrary data, but rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object. - -For instance, we can add users to `WeakSet` to keep track of those who visited our site: - -```js run -let visitedSet = new WeakSet(); - -let john = { name: "John" }; -let pete = { name: "Pete" }; -let mary = { name: "Mary" }; - -visitedSet.add(john); // John visited us -visitedSet.add(pete); // Then Pete -visitedSet.add(john); // John again - -// visitedSet has 2 users now - -// check if John visited? -alert(visitedSet.has(john)); // true - -// check if Mary visited? -alert(visitedSet.has(mary)); // false - -john = null; - -// visitedSet will be cleaned automatically -``` - -The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterations, and inability to get all current content. That may appear inconvenient, but does not prevent `WeakMap/WeakSet` from doing their main job -- be an "additional" storage of data for objects which are stored/managed at another place. - -## Summary - -`WeakMap` is `Map`-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means. - -`WeakSet` is `Set`-like collection that stores only objects and removes them once they become inaccessible by other means. - -Both of them do not support methods and properties that refer to all keys or their count. Only individual operations are allowed. - -`WeakMap` and `WeakSet` are used as "secondary" data structures in addition to the "main" object storage. Once the object is removed from the main storage, if it is only found as the key of `WeakMap` or in a `WeakSet`, it will be cleaned up automatically. diff --git a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/solution.js b/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/solution.js deleted file mode 100644 index 509b358937..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/solution.js +++ /dev/null @@ -1,10 +0,0 @@ -function sumSalaries(salaries) { - - let sum = 0; - for (let salary of Object.values(salaries)) { - sum += salary; - } - - return sum; -} - diff --git a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/test.js b/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/test.js deleted file mode 100644 index 684b0894a4..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/test.js +++ /dev/null @@ -1,15 +0,0 @@ -describe("sumSalaries", function() { - it("returns sum of salaries", function() { - let salaries = { - "John": 100, - "Pete": 300, - "Mary": 250 - }; - - assert.equal( sumSalaries(salaries), 650 ); - }); - - it("returns 0 for the empty object", function() { - assert.strictEqual( sumSalaries({}), 0); - }); -}); \ No newline at end of file diff --git a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/solution.md b/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/solution.md deleted file mode 100644 index 27a7b418ab..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/solution.md +++ /dev/null @@ -1,29 +0,0 @@ -```js run demo -function sumSalaries(salaries) { - - let sum = 0; - for (let salary of Object.values(salaries)) { - sum += salary; - } - - return sum; // 650 -} - -let salaries = { - "John": 100, - "Pete": 300, - "Mary": 250 -}; - -alert( sumSalaries(salaries) ); // 650 -``` -Or, optionally, we could also get the sum using `Object.values` and `reduce`: - -```js -// reduce loops over array of salaries, -// adding them up -// and returns the result -function sumSalaries(salaries) { - return Object.values(salaries).reduce((a, b) => a + b, 0) // 650 -} -``` diff --git a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/task.md b/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/task.md deleted file mode 100644 index 211357d03a..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/01-sum-salaries/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# Sum the properties - -There is a `salaries` object with arbitrary number of salaries. - -Write the function `sumSalaries(salaries)` that returns the sum of all salaries using `Object.values` and the `for..of` loop. - -If `salaries` is empty, then the result must be `0`. - -For instance: - -```js -let salaries = { - "John": 100, - "Pete": 300, - "Mary": 250 -}; - -alert( sumSalaries(salaries) ); // 650 -``` - diff --git a/1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/solution.js b/1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/solution.js deleted file mode 100644 index 1853d20e6a..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/solution.js +++ /dev/null @@ -1,4 +0,0 @@ -function count(obj) { - return Object.keys(obj).length; -} - diff --git a/1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/test.js b/1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/test.js deleted file mode 100644 index e568c32058..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/test.js +++ /dev/null @@ -1,13 +0,0 @@ -describe("count", function() { - it("counts the number of properties", function() { - assert.equal( count({a: 1, b: 2}), 2 ); - }); - - it("returns 0 for an empty object", function() { - assert.equal( count({}), 0 ); - }); - - it("ignores symbolic properties", function() { - assert.equal( count({ [Symbol('id')]: 1 }), 0 ); - }); -}); \ No newline at end of file diff --git a/1-js/05-data-types/09-keys-values-entries/02-count-properties/solution.md b/1-js/05-data-types/09-keys-values-entries/02-count-properties/solution.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/1-js/05-data-types/09-keys-values-entries/02-count-properties/task.md b/1-js/05-data-types/09-keys-values-entries/02-count-properties/task.md deleted file mode 100644 index d7aebb1faa..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/02-count-properties/task.md +++ /dev/null @@ -1,21 +0,0 @@ -importance: 5 - ---- - -# Count properties - -Write a function `count(obj)` that returns the number of properties in the object: - -```js -let user = { - name: 'John', - age: 30 -}; - -alert( count(user) ); // 2 -``` - -Try to make the code as short as possible. - -P.S. Ignore symbolic properties, count only "regular" ones. - diff --git a/1-js/05-data-types/09-keys-values-entries/article.md b/1-js/05-data-types/09-keys-values-entries/article.md deleted file mode 100644 index b633dc274a..0000000000 --- a/1-js/05-data-types/09-keys-values-entries/article.md +++ /dev/null @@ -1,102 +0,0 @@ - -# Object.keys, values, entries - -Let's step away from the individual data structures and talk about the iterations over them. - -In the previous chapter we saw methods `map.keys()`, `map.values()`, `map.entries()`. - -These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too. - -They are supported for: - -- `Map` -- `Set` -- `Array` - -Plain objects also support similar methods, but the syntax is a bit different. - -## Object.keys, values, entries - -For plain objects, the following methods are available: - -- [Object.keys(obj)](mdn:js/Object/keys) -- returns an array of keys. -- [Object.values(obj)](mdn:js/Object/values) -- returns an array of values. -- [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of `[key, value]` pairs. - -Please note the distinctions (compared to map for example): - -| | Map | Object | -|-------------|------------------|--------------| -| Call syntax | `map.keys()` | `Object.keys(obj)`, but not `obj.keys()` | -| Returns | iterable | "real" Array | - -The first difference is that we have to call `Object.keys(obj)`, and not `obj.keys()`. - -Why so? The main reason is flexibility. Remember, objects are a base of all complex structures in JavaScript. So we may have an object of our own like `data` that implements its own `data.values()` method. And we still can call `Object.values(data)` on it. - -The second difference is that `Object.*` methods return "real" array objects, not just an iterable. That's mainly for historical reasons. - -For instance: - -```js -let user = { - name: "John", - age: 30 -}; -``` - -- `Object.keys(user) = ["name", "age"]` -- `Object.values(user) = ["John", 30]` -- `Object.entries(user) = [ ["name","John"], ["age",30] ]` - -Here's an example of using `Object.values` to loop over property values: - -```js run -let user = { - name: "John", - age: 30 -}; - -// loop over values -for (let value of Object.values(user)) { - alert(value); // John, then 30 -} -``` - -```warn header="Object.keys/values/entries ignore symbolic properties" -Just like a `for..in` loop, these methods ignore properties that use `Symbol(...)` as keys. - -Usually that's convenient. But if we want symbolic keys too, then there's a separate method [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) that returns an array of only symbolic keys. Also, there exist a method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys. -``` - - -## Transforming objects - -Objects lack many methods that exist for arrays, e.g. `map`, `filter` and others. - -If we'd like to apply them, then we can use `Object.entries` followed by `Object.fromEntries`: - -1. Use `Object.entries(obj)` to get an array of key/value pairs from `obj`. -2. Use array methods on that array, e.g. `map`. -3. Use `Object.fromEntries(array)` on the resulting array to turn it back into an object. - -For example, we have an object with prices, and would like to double them: - -```js run -let prices = { - banana: 1, - orange: 2, - meat: 4, -}; - -*!* -let doublePrices = Object.fromEntries( - // convert to array, map, and then fromEntries gives back the object - Object.entries(prices).map(([key, value]) => [key, value * 2]) -); -*/!* - -alert(doublePrices.meat); // 8 -``` - -It may look difficult from the first sight, but becomes easy to understand after you use it once or twice. We can make powerful chains of transforms this way. diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md deleted file mode 100644 index cc226e7c5f..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md +++ /dev/null @@ -1,13 +0,0 @@ - -```js run -let user = { - name: "John", - years: 30 -}; - -let {name, years: age, isAdmin = false} = user; - -alert( name ); // John -alert( age ); // 30 -alert( isAdmin ); // false -``` \ No newline at end of file diff --git a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md b/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md deleted file mode 100644 index b68db5c593..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md +++ /dev/null @@ -1,33 +0,0 @@ -importance: 5 - ---- - -# Destructuring assignment - -We have an object: - -```js -let user = { - name: "John", - years: 30 -}; -``` - -Write the destructuring assignment that reads: - -- `name` property into the variable `name`. -- `years` property into the variable `age`. -- `isAdmin` property into the variable `isAdmin` (false, if no such property) - -Here's an example of the values after your assignment: - -```js -let user = { name: "John", years: 30 }; - -// your code to the left side: -// ... = user - -alert( name ); // John -alert( age ); // 30 -alert( isAdmin ); // false -``` diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/solution.js b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/solution.js deleted file mode 100644 index f4bd5c761c..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/solution.js +++ /dev/null @@ -1,16 +0,0 @@ -function topSalary(salaries) { - - let max = 0; - let maxName = null; - - for(const [name, salary] of Object.entries(salaries)) { - if (max < salary) { - max = salary; - maxName = name; - } - } - - return maxName; -} - - diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/test.js b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/test.js deleted file mode 100644 index e1da754bab..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/test.js +++ /dev/null @@ -1,15 +0,0 @@ -describe("topSalary", function() { - it("returns top-paid person", function() { - let salaries = { - "John": 100, - "Pete": 300, - "Mary": 250 - }; - - assert.equal( topSalary(salaries), "Pete" ); - }); - - it("returns null for the empty object", function() { - assert.isNull( topSalary({}) ); - }); -}); \ No newline at end of file diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/solution.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/solution.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md b/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md deleted file mode 100644 index 9f33de0897..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 5 - ---- - -# The maximal salary - -There is a `salaries` object: - -```js -let salaries = { - "John": 100, - "Pete": 300, - "Mary": 250 -}; -``` - -Create the function `topSalary(salaries)` that returns the name of the top-paid person. - -- If `salaries` is empty, it should return `null`. -- If there are multiple top-paid persons, return any of them. - -P.S. Use `Object.entries` and destructuring to iterate over key/value pairs. diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md deleted file mode 100644 index 46aa760a98..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ /dev/null @@ -1,552 +0,0 @@ -# Destructuring assignment - -The two most used data structures in JavaScript are `Object` and `Array`. - -Objects allow us to create a single entity that stores data items by key, and arrays allow us to gather data items into an ordered collection. - -But when we pass those to a function, it may need not an object/array as a whole, but rather individual pieces. - -*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. - -## Array destructuring - -An example of how the array is destructured into variables: - -```js -// we have an array with the name and surname -let arr = ["Ilya", "Kantor"] - -*!* -// destructuring assignment -// sets firstName = arr[0] -// and surname = arr[1] -let [firstName, surname] = arr; -*/!* - -alert(firstName); // Ilya -alert(surname); // Kantor -``` - -Now we can work with variables instead of array members. - -It looks great when combined with `split` or other array-returning methods: - -```js -let [firstName, surname] = "Ilya Kantor".split(' '); -``` - -````smart header="\"Destructuring\" does not mean \"destructive\"." -It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified. - -It's just a shorter way to write: -```js -// let [firstName, surname] = arr; -let firstName = arr[0]; -let surname = arr[1]; -``` -```` - -````smart header="Ignore elements using commas" -Unwanted elements of the array can also be thrown away via an extra comma: - -```js run -*!* -// second element is not needed -let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; -*/!* - -alert( title ); // Consul -``` - -In the code above, the second element of the array is skipped, the third one is assigned to `title`, and the rest of the array items is also skipped (as there are no variables for them). -```` - -````smart header="Works with any iterable on the right-side" - -...Actually, we can use it with any iterable, not only arrays: - -```js -let [a, b, c] = "abc"; // ["a", "b", "c"] -let [one, two, three] = new Set([1, 2, 3]); -``` - -```` - - -````smart header="Assign to anything at the left-side" - -We can use any "assignables" at the left side. - -For instance, an object property: -```js run -let user = {}; -[user.name, user.surname] = "Ilya Kantor".split(' '); - -alert(user.name); // Ilya -``` - -```` - -````smart header="Looping with .entries()" - -In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method. - -We can use it with destructuring to loop over keys-and-values of an object: - -```js run -let user = { - name: "John", - age: 30 -}; - -// loop over keys-and-values -*!* -for (let [key, value] of Object.entries(user)) { -*/!* - alert(`${key}:${value}`); // name:John, then age:30 -} -``` - -...And the same for a map: - -```js run -let user = new Map(); -user.set("name", "John"); -user.set("age", "30"); - -*!* -for (let [key, value] of user) { -*/!* - alert(`${key}:${value}`); // name:John, then age:30 -} -``` -```` - -```smart header="Swap variables trick" -A well-known trick for swapping values of two variables: - -```js run -let guest = "Jane"; -let admin = "Pete"; - -// Swap values: make guest=Pete, admin=Jane -[guest, admin] = [admin, guest]; - -alert(`${guest} ${admin}`); // Pete Jane (successfully swapped!) -``` - -Here we create a temporary array of two variables and immediately destructure it in swapped order. - -We can swap more than two variables this way. - - -### The rest '...' - -If we want not just to get first values, but also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`: - -```js run -let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*]; - -alert(name1); // Julius -alert(name2); // Caesar - -*!* -// Note that type of `rest` is Array. -alert(rest[0]); // Consul -alert(rest[1]); // of the Roman Republic -alert(rest.length); // 2 -*/!* -``` - -The value of `rest` is the array of the remaining array elements. We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment. - -### Default values - -If there are fewer values in the array than variables in the assignment, there will be no error. Absent values are considered undefined: - -```js run -*!* -let [firstName, surname] = []; -*/!* - -alert(firstName); // undefined -alert(surname); // undefined -``` - -If we want a "default" value to replace the missing one, we can provide it using `=`: - -```js run -*!* -// default values -let [name = "Guest", surname = "Anonymous"] = ["Julius"]; -*/!* - -alert(name); // Julius (from array) -alert(surname); // Anonymous (default used) -``` - -Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided. - -For instance, here we use the `prompt` function for two defaults. But it will run only for the missing one: - -```js run -// runs only prompt for surname -let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; - -alert(name); // Julius (from array) -alert(surname); // whatever prompt gets -``` - - - -## Object destructuring - -The destructuring assignment also works with objects. - -The basic syntax is: - -```js -let {var1, var2} = {var1:…, var2:…} -``` - -We have an existing object at the right side, that we want to split into variables. The left side contains a "pattern" for corresponding properties. In the simple case, that's a list of variable names in `{...}`. - -For instance: - -```js run -let options = { - title: "Menu", - width: 100, - height: 200 -}; - -*!* -let {title, width, height} = options; -*/!* - -alert(title); // Menu -alert(width); // 100 -alert(height); // 200 -``` - -Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. The order does not matter. This works too: - -```js -// changed the order in let {...} -let {height, width, title} = { title: "Menu", height: 200, width: 100 } -``` - -The pattern on the left side may be more complex and specify the mapping between properties and variables. - -If we want to assign a property to a variable with another name, for instance, `options.width` to go into the variable named `w`, then we can set it using a colon: - -```js run -let options = { - title: "Menu", - width: 100, - height: 200 -}; - -*!* -// { sourceProperty: targetVariable } -let {width: w, height: h, title} = options; -*/!* - -// width -> w -// height -> h -// title -> title - -alert(title); // Menu -alert(w); // 100 -alert(h); // 200 -``` - -The colon shows "what : goes where". In the example above the property `width` goes to `w`, property `height` goes to `h`, and `title` is assigned to the same name. - -For potentially missing properties we can set default values using `"="`, like this: - -```js run -let options = { - title: "Menu" -}; - -*!* -let {width = 100, height = 200, title} = options; -*/!* - -alert(title); // Menu -alert(width); // 100 -alert(height); // 200 -``` - -Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided. - -In the code below `prompt` asks for `width`, but not for `title`: - -```js run -let options = { - title: "Menu" -}; - -*!* -let {width = prompt("width?"), title = prompt("title?")} = options; -*/!* - -alert(title); // Menu -alert(width); // (whatever the result of prompt is) -``` - -We also can combine both the colon and equality: - -```js run -let options = { - title: "Menu" -}; - -*!* -let {width: w = 100, height: h = 200, title} = options; -*/!* - -alert(title); // Menu -alert(w); // 100 -alert(h); // 200 -``` - -If we have a complex object with many properties, we can extract only what we need: - -```js run -let options = { - title: "Menu", - width: 100, - height: 200 -}; - -// only extract title as a variable -let { title } = options; - -alert(title); // Menu -``` - -### The rest pattern "..." - -What if the object has more properties than we have variables? Can we take some and then assign the "rest" somewhere? - -We can use the rest pattern, just like we did with arrays. It's not supported by some older browsers (IE, use Babel to polyfill it), but works in modern ones. - -It looks like this: - -```js run -let options = { - title: "Menu", - height: 200, - width: 100 -}; - -*!* -// title = property named title -// rest = object with the rest of properties -let {title, ...rest} = options; -*/!* - -// now title="Menu", rest={height: 200, width: 100} -alert(rest.height); // 200 -alert(rest.width); // 100 -``` - -````smart header="Gotcha if there's no `let`" -In the examples above variables were declared right in the assignment: `let {…} = {…}`. Of course, we could use existing variables too, without `let`. But there's a catch. - -This won't work: -```js run -let title, width, height; - -// error in this line -{title, width, height} = {title: "Menu", width: 200, height: 100}; -``` - -The problem is that JavaScript treats `{...}` in the main code flow (not inside another expression) as a code block. Such code blocks can be used to group statements, like this: - -```js run -{ - // a code block - let message = "Hello"; - // ... - alert( message ); -} -``` - -So here JavaScript assumes that we have a code block, that's why there's an error. We want destructuring instead. - -To show JavaScript that it's not a code block, we can wrap the expression in parentheses `(...)`: - -```js run -let title, width, height; - -// okay now -*!*(*/!*{title, width, height} = {title: "Menu", width: 200, height: 100}*!*)*/!*; - -alert( title ); // Menu -``` -```` - -## Nested destructuring - -If an object or an array contain other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions. - -In the code below `options` has another object in the property `size` and an array in the property `items`. The pattern at the left side of the assignment has the same structure to extract values from them: - -```js run -let options = { - size: { - width: 100, - height: 200 - }, - items: ["Cake", "Donut"], - extra: true -}; - -// destructuring assignment split in multiple lines for clarity -let { - size: { // put size here - width, - height - }, - items: [item1, item2], // assign items here - title = "Menu" // not present in the object (default value is used) -} = options; - -alert(title); // Menu -alert(width); // 100 -alert(height); // 200 -alert(item1); // Cake -alert(item2); // Donut -``` - -All properties of `options` object except `extra` that is absent in the left part, are assigned to corresponding variables: - -![](destructuring-complex.svg) - -Finally, we have `width`, `height`, `item1`, `item2` and `title` from the default value. - -Note that there are no variables for `size` and `items`, as we take their content instead. - -## Smart function parameters - -There are times when a function has many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on. - -Here's a bad way to write such function: - -```js -function showMenu(title = "Untitled", width = 200, height = 100, items = []) { - // ... -} -``` - -In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default. - -Like this? - -```js -// undefined where default values are fine -showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]) -``` - -That's ugly. And becomes unreadable when we deal with more parameters. - -Destructuring comes to the rescue! - -We can pass parameters as an object, and the function immediately destructurizes them into variables: - -```js run -// we pass object to function -let options = { - title: "My menu", - items: ["Item1", "Item2"] -}; - -// ...and it immediately expands it to variables -function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) { - // title, items – taken from options, - // width, height – defaults used - alert( `${title} ${width} ${height}` ); // My Menu 200 100 - alert( items ); // Item1, Item2 -} - -showMenu(options); -``` - -We can also use more complex destructuring with nested objects and colon mappings: - -```js run -let options = { - title: "My menu", - items: ["Item1", "Item2"] -}; - -*!* -function showMenu({ - title = "Untitled", - width: w = 100, // width goes to w - height: h = 200, // height goes to h - items: [item1, item2] // items first element goes to item1, second to item2 -}) { -*/!* - alert( `${title} ${w} ${h}` ); // My Menu 100 200 - alert( item1 ); // Item1 - alert( item2 ); // Item2 -} - -showMenu(options); -``` - -The full syntax is the same as for a destructuring assignment: -```js -function({ - incomingProperty: varName = defaultValue - ... -}) -``` - -Then, for an object of parameters, there will be a variable `varName` for property `incomingProperty`, with `defaultValue` by default. - -Please note that such destructuring assumes that `showMenu()` does have an argument. If we want all values by default, then we should specify an empty object: - -```js -showMenu({}); // ok, all values are default - -showMenu(); // this would give an error -``` - -We can fix this by making `{}` the default value for the whole object of parameters: - -```js run -function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { - alert( `${title} ${width} ${height}` ); -} - -showMenu(); // Menu 100 200 -``` - -In the code above, the whole arguments object is `{}` by default, so there's always something to destructurize. - -## Summary - -- Destructuring assignment allows for instantly mapping an object or array onto many variables. -- The full object syntax: - ```js - let {prop : varName = default, ...rest} = object - ``` - - This means that property `prop` should go into the variable `varName` and, if no such property exists, then the `default` value should be used. - - Object properties that have no mapping are copied to the `rest` object. - -- The full array syntax: - - ```js - let [item1 = default, item2, ...rest] = array - ``` - - The first item goes to `item1`; the second goes into `item2`, all the rest makes the array `rest`. - -- It's possible to extract data from nested arrays/objects, for that the left side must have the same structure as the right one. diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg deleted file mode 100644 index cb496bf669..0000000000 --- a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/1-js/05-data-types/11-date/1-new-date/solution.md b/1-js/05-data-types/11-date/1-new-date/solution.md deleted file mode 100644 index 9bb1d749ce..0000000000 --- a/1-js/05-data-types/11-date/1-new-date/solution.md +++ /dev/null @@ -1,8 +0,0 @@ -The `new Date` constructor uses the local time zone. So the only important thing to remember is that months start from zero. - -So February has number 1. - -```js run -let d = new Date(2012, 1, 20, 3, 12); -alert( d ); -``` diff --git a/1-js/05-data-types/11-date/1-new-date/task.md b/1-js/05-data-types/11-date/1-new-date/task.md deleted file mode 100644 index 1b40d5ac04..0000000000 --- a/1-js/05-data-types/11-date/1-new-date/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Create a date - -Create a `Date` object for the date: Feb 20, 2012, 3:12am. The time zone is local. - -Show it using `alert`. diff --git a/1-js/05-data-types/11-date/2-get-week-day/_js.view/solution.js b/1-js/05-data-types/11-date/2-get-week-day/_js.view/solution.js deleted file mode 100644 index 642c376a94..0000000000 --- a/1-js/05-data-types/11-date/2-get-week-day/_js.view/solution.js +++ /dev/null @@ -1,5 +0,0 @@ -function getWeekDay(date) { - let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA']; - - return days[date.getDay()]; -} diff --git a/1-js/05-data-types/11-date/2-get-week-day/_js.view/test.js b/1-js/05-data-types/11-date/2-get-week-day/_js.view/test.js deleted file mode 100644 index 3cdc91830e..0000000000 --- a/1-js/05-data-types/11-date/2-get-week-day/_js.view/test.js +++ /dev/null @@ -1,29 +0,0 @@ -describe("getWeekDay", function() { - it("3 January 2014 - friday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 3)), 'FR'); - }); - - it("4 January 2014 - saturday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 4)), 'SA'); - }); - - it("5 January 2014 - sunday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 5)), 'SU'); - }); - - it("6 January 2014 - monday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 6)), 'MO'); - }); - - it("7 January 2014 - tuesday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 7)), 'TU'); - }); - - it("8 January 2014 - wednesday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 8)), 'WE'); - }); - - it("9 January 2014 - thursday", function() { - assert.equal(getWeekDay(new Date(2014, 0, 9)), 'TH'); - }); -}); diff --git a/1-js/05-data-types/11-date/2-get-week-day/solution.md b/1-js/05-data-types/11-date/2-get-week-day/solution.md deleted file mode 100644 index 58d75c1c31..0000000000 --- a/1-js/05-data-types/11-date/2-get-week-day/solution.md +++ /dev/null @@ -1,14 +0,0 @@ -The method `date.getDay()` returns the number of the weekday, starting from sunday. - -Let's make an array of weekdays, so that we can get the proper day name by its number: - -```js run demo -function getWeekDay(date) { - let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA']; - - return days[date.getDay()]; -} - -let date = new Date(2014, 0, 3); // 3 Jan 2014 -alert( getWeekDay(date) ); // FR -``` diff --git a/1-js/05-data-types/11-date/2-get-week-day/task.md b/1-js/05-data-types/11-date/2-get-week-day/task.md deleted file mode 100644 index 5cf31565da..0000000000 --- a/1-js/05-data-types/11-date/2-get-week-day/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Show a weekday - -Write a function `getWeekDay(date)` to show the weekday in short format: 'MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'. - -For instance: - -```js no-beautify -let date = new Date(2012, 0, 3); // 3 Jan 2012 -alert( getWeekDay(date) ); // should output "TU" -``` diff --git a/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js b/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js deleted file mode 100644 index fb9e3d2a4f..0000000000 --- a/1-js/05-data-types/11-date/3-weekday/_js.view/solution.js +++ /dev/null @@ -1,10 +0,0 @@ -function getLocalDay(date) { - - let day = date.getDay(); - - if (day == 0) { // weekday 0 (sunday) is 7 in european - day = 7; - } - - return day; -} diff --git a/1-js/05-data-types/11-date/3-weekday/_js.view/test.js b/1-js/05-data-types/11-date/3-weekday/_js.view/test.js deleted file mode 100644 index 57032154f0..0000000000 --- a/1-js/05-data-types/11-date/3-weekday/_js.view/test.js +++ /dev/null @@ -1,29 +0,0 @@ -describe("getLocalDay returns the \"european\" weekday", function() { - it("3 January 2014 - friday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 3)), 5); - }); - - it("4 January 2014 - saturday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 4)), 6); - }); - - it("5 January 2014 - sunday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 5)), 7); - }); - - it("6 January 2014 - monday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 6)), 1); - }); - - it("7 January 2014 - tuesday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 7)), 2); - }); - - it("8 January 2014 - wednesday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 8)), 3); - }); - - it("9 January 2014 - thursday", function() { - assert.equal(getLocalDay(new Date(2014, 0, 9)), 4); - }); -}); diff --git a/1-js/05-data-types/11-date/3-weekday/solution.md b/1-js/05-data-types/11-date/3-weekday/solution.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/1-js/05-data-types/11-date/3-weekday/task.md b/1-js/05-data-types/11-date/3-weekday/task.md deleted file mode 100644 index ba62790cf7..0000000000 --- a/1-js/05-data-types/11-date/3-weekday/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# European weekday - -European countries have days of week starting with Monday (number 1), then Tuesday (number 2) and till Sunday (number 7). Write a function `getLocalDay(date)` that returns the "European" day of week for `date`. - -```js no-beautify -let date = new Date(2012, 0, 3); // 3 Jan 2012 -alert( getLocalDay(date) ); // tuesday, should show 2 -``` diff --git a/1-js/05-data-types/11-date/4-get-date-ago/_js.view/solution.js b/1-js/05-data-types/11-date/4-get-date-ago/_js.view/solution.js deleted file mode 100644 index 9cce0fb905..0000000000 --- a/1-js/05-data-types/11-date/4-get-date-ago/_js.view/solution.js +++ /dev/null @@ -1,6 +0,0 @@ -function getDateAgo(date, days) { - let dateCopy = new Date(date); - - dateCopy.setDate(date.getDate() - days); - return dateCopy.getDate(); -} diff --git a/1-js/05-data-types/11-date/4-get-date-ago/_js.view/test.js b/1-js/05-data-types/11-date/4-get-date-ago/_js.view/test.js deleted file mode 100644 index 255acffe01..0000000000 --- a/1-js/05-data-types/11-date/4-get-date-ago/_js.view/test.js +++ /dev/null @@ -1,27 +0,0 @@ -describe("getDateAgo", function() { - - it("1 day before 02.01.2015 -> day 1", function() { - assert.equal(getDateAgo(new Date(2015, 0, 2), 1), 1); - }); - - - it("2 days before 02.01.2015 -> day 31", function() { - assert.equal(getDateAgo(new Date(2015, 0, 2), 2), 31); - }); - - it("100 days before 02.01.2015 -> day 24", function() { - assert.equal(getDateAgo(new Date(2015, 0, 2), 100), 24); - }); - - it("365 days before 02.01.2015 -> day 2", function() { - assert.equal(getDateAgo(new Date(2015, 0, 2), 365), 2); - }); - - it("does not modify the given date", function() { - let date = new Date(2015, 0, 2); - let dateCopy = new Date(date); - getDateAgo(dateCopy, 100); - assert.equal(date.getTime(), dateCopy.getTime()); - }); - -}); diff --git a/1-js/05-data-types/11-date/4-get-date-ago/solution.md b/1-js/05-data-types/11-date/4-get-date-ago/solution.md deleted file mode 100644 index 5c394c100b..0000000000 --- a/1-js/05-data-types/11-date/4-get-date-ago/solution.md +++ /dev/null @@ -1,27 +0,0 @@ -The idea is simple: to substract given number of days from `date`: - -```js -function getDateAgo(date, days) { - date.setDate(date.getDate() - days); - return date.getDate(); -} -``` - -...But the function should not change `date`. That's an important thing, because the outer code which gives us the date does not expect it to change. - -To implement it let's clone the date, like this: - -```js run demo -function getDateAgo(date, days) { - let dateCopy = new Date(date); - - dateCopy.setDate(date.getDate() - days); - return dateCopy.getDate(); -} - -let date = new Date(2015, 0, 2); - -alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015) -alert( getDateAgo(date, 2) ); // 31, (31 Dec 2014) -alert( getDateAgo(date, 365) ); // 2, (2 Jan 2014) -``` diff --git a/1-js/05-data-types/11-date/4-get-date-ago/task.md b/1-js/05-data-types/11-date/4-get-date-ago/task.md deleted file mode 100644 index 058d39c7ea..0000000000 --- a/1-js/05-data-types/11-date/4-get-date-ago/task.md +++ /dev/null @@ -1,21 +0,0 @@ -importance: 4 - ---- - -# Which day of month was many days ago? - -Create a function `getDateAgo(date, days)` to return the day of month `days` ago from the `date`. - -For instance, if today is 20th, then `getDateAgo(new Date(), 1)` should be 19th and `getDateAgo(new Date(), 2)` should be 18th. - -Should work reliably for `days=365` or more: - -```js -let date = new Date(2015, 0, 2); - -alert( getDateAgo(date, 1) ); // 1, (1 Jan 2015) -alert( getDateAgo(date, 2) ); // 31, (31 Dec 2014) -alert( getDateAgo(date, 365) ); // 2, (2 Jan 2014) -``` - -P.S. The function should not modify the given `date`. diff --git a/1-js/05-data-types/11-date/5-last-day-of-month/_js.view/solution.js b/1-js/05-data-types/11-date/5-last-day-of-month/_js.view/solution.js deleted file mode 100644 index d0d7d37ffa..0000000000 --- a/1-js/05-data-types/11-date/5-last-day-of-month/_js.view/solution.js +++ /dev/null @@ -1,4 +0,0 @@ -function getLastDayOfMonth(year, month) { - let date = new Date(year, month + 1, 0); - return date.getDate(); -} diff --git a/1-js/05-data-types/11-date/5-last-day-of-month/_js.view/test.js b/1-js/05-data-types/11-date/5-last-day-of-month/_js.view/test.js deleted file mode 100644 index 4ff3e116a1..0000000000 --- a/1-js/05-data-types/11-date/5-last-day-of-month/_js.view/test.js +++ /dev/null @@ -1,13 +0,0 @@ -describe("getLastDayOfMonth", function() { - it("last day of 01.01.2012 - 31", function() { - assert.equal(getLastDayOfMonth(2012, 0), 31); - }); - - it("last day of 01.02.2012 - 29 (leap year)", function() { - assert.equal(getLastDayOfMonth(2012, 1), 29); - }); - - it("last day of 01.02.2013 - 28", function() { - assert.equal(getLastDayOfMonth(2013, 1), 28); - }); -}); diff --git a/1-js/05-data-types/11-date/5-last-day-of-month/solution.md b/1-js/05-data-types/11-date/5-last-day-of-month/solution.md deleted file mode 100644 index 4f642536e1..0000000000 --- a/1-js/05-data-types/11-date/5-last-day-of-month/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -Let's create a date using the next month, but pass zero as the day: -```js run demo -function getLastDayOfMonth(year, month) { - let date = new Date(year, month + 1, 0); - return date.getDate(); -} - -alert( getLastDayOfMonth(2012, 0) ); // 31 -alert( getLastDayOfMonth(2012, 1) ); // 29 -alert( getLastDayOfMonth(2013, 1) ); // 28 -``` - -Normally, dates start from 1, but technically we can pass any number, the date will autoadjust itself. So when we pass 0, then it means "one day before 1st day of the month", in other words: "the last day of the previous month". diff --git a/1-js/05-data-types/11-date/5-last-day-of-month/task.md b/1-js/05-data-types/11-date/5-last-day-of-month/task.md deleted file mode 100644 index 10dfb7a7a2..0000000000 --- a/1-js/05-data-types/11-date/5-last-day-of-month/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Last day of month? - -Write a function `getLastDayOfMonth(year, month)` that returns the last day of month. Sometimes it is 30th, 31st or even 28/29th for Feb. - -Parameters: - -- `year` -- four-digits year, for instance 2012. -- `month` -- month, from 0 to 11. - -For instance, `getLastDayOfMonth(2012, 1) = 29` (leap year, Feb). diff --git a/1-js/05-data-types/11-date/6-get-seconds-today/solution.md b/1-js/05-data-types/11-date/6-get-seconds-today/solution.md deleted file mode 100644 index 8f8e52b68d..0000000000 --- a/1-js/05-data-types/11-date/6-get-seconds-today/solution.md +++ /dev/null @@ -1,28 +0,0 @@ -To get the number of seconds, we can generate a date using the current day and time 00:00:00, then substract it from "now". - -The difference is the number of milliseconds from the beginning of the day, that we should divide by 1000 to get seconds: - -```js run -function getSecondsToday() { - let now = new Date(); - - // create an object using the current day/month/year - let today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); - - let diff = now - today; // ms difference - return Math.round(diff / 1000); // make seconds -} - -alert( getSecondsToday() ); -``` - -An alternative solution would be to get hours/minutes/seconds and convert them to seconds: - -```js run -function getSecondsToday() { - let d = new Date(); - return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds(); -} - -alert( getSecondsToday() ); -``` diff --git a/1-js/05-data-types/11-date/6-get-seconds-today/task.md b/1-js/05-data-types/11-date/6-get-seconds-today/task.md deleted file mode 100644 index 4567909286..0000000000 --- a/1-js/05-data-types/11-date/6-get-seconds-today/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 5 - ---- - -# How many seconds have passed today? - -Write a function `getSecondsToday()` that returns the number of seconds from the beginning of today. - -For instance, if now were `10:00 am`, and there was no daylight savings shift, then: - -```js -getSecondsToday() == 36000 // (3600 * 10) -``` - -The function should work in any day. That is, it should not have a hard-coded value of "today". diff --git a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md b/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md deleted file mode 100644 index c337d11995..0000000000 --- a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md +++ /dev/null @@ -1,32 +0,0 @@ -To get the number of milliseconds till tomorrow, we can from "tomorrow 00:00:00" substract the current date. - -First, we generate that "tomorrow", and then do it: - -```js run -function getSecondsToTomorrow() { - let now = new Date(); - - // tomorrow date - let tomorrow = new Date(now.getFullYear(), now.getMonth(), *!*now.getDate()+1*/!*); - - let diff = tomorrow - now; // difference in ms - return Math.round(diff / 1000); // convert to seconds -} -``` - -Alternative solution: - -```js run -function getSecondsToTomorrow() { - let now = new Date(); - let hour = now.getHours(); - let minutes = now.getMinutes(); - let seconds = now.getSeconds(); - let totalSecondsToday = (hour * 60 + minutes) * 60 + seconds; - let totalSecondsInADay = 86400; - - return totalSecondsInADay - totalSecondsToday; -} -``` - -Please note that many countries have Daylight Savings Time (DST), so there may be days with 23 or 25 hours. We may want to treat such days separately. diff --git a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md b/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md deleted file mode 100644 index e059030268..0000000000 --- a/1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 5 - ---- - -# How many seconds till tomorrow? - -Create a function `getSecondsToTomorrow()` that returns the number of seconds till tomorrow. - -For instance, if now is `23:00`, then: - -```js -getSecondsToTomorrow() == 3600 -``` - -P.S. The function should work at any day, the "today" is not hardcoded. diff --git a/1-js/05-data-types/11-date/8-format-date-relative/_js.view/solution.js b/1-js/05-data-types/11-date/8-format-date-relative/_js.view/solution.js deleted file mode 100644 index 4695354a5c..0000000000 --- a/1-js/05-data-types/11-date/8-format-date-relative/_js.view/solution.js +++ /dev/null @@ -1,33 +0,0 @@ - -function formatDate(date) { - let diff = new Date() - date; // the difference in milliseconds - - if (diff < 1000) { // less than 1 second - return 'right now'; - } - - let sec = Math.floor(diff / 1000); // convert diff to seconds - - if (sec < 60) { - return sec + ' sec. ago'; - } - - let min = Math.floor(diff / 60000); // convert diff to minutes - if (min < 60) { - return min + ' min. ago'; - } - - // format the date - // add leading zeroes to single-digit day/month/hours/minutes - let d = date; - d = [ - '0' + d.getDate(), - '0' + (d.getMonth() + 1), - '' + d.getFullYear(), - '0' + d.getHours(), - '0' + d.getMinutes() - ].map(component => component.slice(-2)); // take last 2 digits of every component - - // join the components into date - return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':'); -} diff --git a/1-js/05-data-types/11-date/8-format-date-relative/_js.view/test.js b/1-js/05-data-types/11-date/8-format-date-relative/_js.view/test.js deleted file mode 100644 index 9b4cb2f584..0000000000 --- a/1-js/05-data-types/11-date/8-format-date-relative/_js.view/test.js +++ /dev/null @@ -1,18 +0,0 @@ -describe("formatDate", function() { - it("shows 1ms ago as \"right now\"", function() { - assert.equal(formatDate(new Date(new Date - 1)), 'right now'); - }); - - it('"30 seconds ago"', function() { - assert.equal(formatDate(new Date(new Date - 30 * 1000)), "30 sec. ago"); - }); - - it('"5 minutes ago"', function() { - assert.equal(formatDate(new Date(new Date - 5 * 60 * 1000)), "5 min. ago"); - }); - - it("older dates as DD.MM.YY HH:mm", function() { - assert.equal(formatDate(new Date(2014, 2, 1, 11, 22, 33)), "01.03.14 11:22"); - }); - -}); diff --git a/1-js/05-data-types/11-date/8-format-date-relative/solution.md b/1-js/05-data-types/11-date/8-format-date-relative/solution.md deleted file mode 100644 index 3724856857..0000000000 --- a/1-js/05-data-types/11-date/8-format-date-relative/solution.md +++ /dev/null @@ -1,78 +0,0 @@ -To get the time from `date` till now -- let's substract the dates. - -```js run demo -function formatDate(date) { - let diff = new Date() - date; // the difference in milliseconds - - if (diff < 1000) { // less than 1 second - return 'right now'; - } - - let sec = Math.floor(diff / 1000); // convert diff to seconds - - if (sec < 60) { - return sec + ' sec. ago'; - } - - let min = Math.floor(diff / 60000); // convert diff to minutes - if (min < 60) { - return min + ' min. ago'; - } - - // format the date - // add leading zeroes to single-digit day/month/hours/minutes - let d = date; - d = [ - '0' + d.getDate(), - '0' + (d.getMonth() + 1), - '' + d.getFullYear(), - '0' + d.getHours(), - '0' + d.getMinutes() - ].map(component => component.slice(-2)); // take last 2 digits of every component - - // join the components into date - return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':'); -} - -alert( formatDate(new Date(new Date - 1)) ); // "right now" - -alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" - -alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" - -// yesterday's date like 31.12.2016 20:00 -alert( formatDate(new Date(new Date - 86400 * 1000)) ); -``` - -Alternative solution: - -```js run -function formatDate(date) { - let dayOfMonth = date.getDate(); - let month = date.getMonth() + 1; - let year = date.getFullYear(); - let hour = date.getHours(); - let minutes = date.getMinutes(); - let diffMs = new Date() - date; - let diffSec = Math.round(diffMs / 1000); - let diffMin = diffSec / 60; - let diffHour = diffMin / 60; - - // formatting - year = year.toString().slice(-2); - month = month < 10 ? '0' + month : month; - dayOfMonth = dayOfMonth < 10 ? '0' + dayOfMonth : dayOfMonth; - hour = hour < 10 ? '0' + hour : hour; - minutes = minutes < 10 ? '0' + minutes : minutes; - - if (diffSec < 1) { - return 'right now'; - } else if (diffMin < 1) { - return `${diffSec} sec. ago` - } else if (diffHour < 1) { - return `${diffMin} min. ago` - } else { - return `${dayOfMonth}.${month}.${year} ${hour}:${minutes}` - } -} -``` diff --git a/1-js/05-data-types/11-date/8-format-date-relative/task.md b/1-js/05-data-types/11-date/8-format-date-relative/task.md deleted file mode 100644 index 9651b305f5..0000000000 --- a/1-js/05-data-types/11-date/8-format-date-relative/task.md +++ /dev/null @@ -1,25 +0,0 @@ -importance: 4 - ---- - -# Format the relative date - -Write a function `formatDate(date)` that should format `date` as follows: - -- If since `date` passed less than 1 second, then `"right now"`. -- Otherwise, if since `date` passed less than 1 minute, then `"n sec. ago"`. -- Otherwise, if less than an hour, then `"m min. ago"`. -- Otherwise, the full date in the format `"DD.MM.YY HH:mm"`. That is: `"day.month.year hours:minutes"`, all in 2-digit format, e.g. `31.12.16 10:00`. - -For instance: - -```js -alert( formatDate(new Date(new Date - 1)) ); // "right now" - -alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" - -alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" - -// yesterday's date like 31.12.16 20:00 -alert( formatDate(new Date(new Date - 86400 * 1000)) ); -``` diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md deleted file mode 100644 index a2de63ae40..0000000000 --- a/1-js/05-data-types/11-date/article.md +++ /dev/null @@ -1,433 +0,0 @@ -# Date and time - -Let's meet a new built-in object: [Date](mdn:js/Date). It stores the date, time and provides methods for date/time management. - -For instance, we can use it to store creation/modification times, to measure time, or just to print out the current date. - -## Creation - -To create a new `Date` object call `new Date()` with one of the following arguments: - -`new Date()` -: Without arguments -- create a `Date` object for the current date and time: - - ```js run - let now = new Date(); - alert( now ); // shows current date/time - ``` - -`new Date(milliseconds)` -: Create a `Date` object with the time equal to number of milliseconds (1/1000 of a second) passed after the Jan 1st of 1970 UTC+0. - - ```js run - // 0 means 01.01.1970 UTC+0 - let Jan01_1970 = new Date(0); - alert( Jan01_1970 ); - - // now add 24 hours, get 02.01.1970 UTC+0 - let Jan02_1970 = new Date(24 * 3600 * 1000); - alert( Jan02_1970 ); - ``` - - An integer number representing the number of milliseconds that has passed since the beginning of 1970 is called a *timestamp*. - - It's a lightweight numeric representation of a date. We can always create a date from a timestamp using `new Date(timestamp)` and convert the existing `Date` object to a timestamp using the `date.getTime()` method (see below). - - Dates before 01.01.1970 have negative timestamps, e.g.: - ```js run - // 31 Dec 1969 - let Dec31_1969 = new Date(-24 * 3600 * 1000); - alert( Dec31_1969 ); - ``` - -`new Date(datestring)` -: If there is a single argument, and it's a string, then it is parsed automatically. The algorithm is the same as `Date.parse` uses, we'll cover it later. - - ```js run - let date = new Date("2017-01-26"); - alert(date); - // The time is not set, so it's assumed to be midnight GMT and - // is adjusted according to the timezone the code is run in - // So the result could be - // Thu Jan 26 2017 11:00:00 GMT+1100 (Australian Eastern Daylight Time) - // or - // Wed Jan 25 2017 16:00:00 GMT-0800 (Pacific Standard Time) - ``` - -`new Date(year, month, date, hours, minutes, seconds, ms)` -: Create the date with the given components in the local time zone. Only the first two arguments are obligatory. - - - The `year` must have 4 digits: `2013` is okay, `98` is not. - - The `month` count starts with `0` (Jan), up to `11` (Dec). - - The `date` parameter is actually the day of month, if absent then `1` is assumed. - - If `hours/minutes/seconds/ms` is absent, they are assumed to be equal `0`. - - For instance: - - ```js - new Date(2011, 0, 1, 0, 0, 0, 0); // 1 Jan 2011, 00:00:00 - new Date(2011, 0, 1); // the same, hours etc are 0 by default - ``` - - The minimal precision is 1 ms (1/1000 sec): - - ```js run - let date = new Date(2011, 0, 1, 2, 3, 4, 567); - alert( date ); // 1.01.2011, 02:03:04.567 - ``` - -## Access date components - -There are methods to access the year, month and so on from the `Date` object: - -[getFullYear()](mdn:js/Date/getFullYear) -: Get the year (4 digits) - -[getMonth()](mdn:js/Date/getMonth) -: Get the month, **from 0 to 11**. - -[getDate()](mdn:js/Date/getDate) -: Get the day of month, from 1 to 31, the name of the method does look a little bit strange. - -[getHours()](mdn:js/Date/getHours), [getMinutes()](mdn:js/Date/getMinutes), [getSeconds()](mdn:js/Date/getSeconds), [getMilliseconds()](mdn:js/Date/getMilliseconds) -: Get the corresponding time components. - -```warn header="Not `getYear()`, but `getFullYear()`" -Many JavaScript engines implement a non-standard method `getYear()`. This method is deprecated. It returns 2-digit year sometimes. Please never use it. There is `getFullYear()` for the year. -``` - -Additionally, we can get a day of week: - -[getDay()](mdn:js/Date/getDay) -: Get the day of week, from `0` (Sunday) to `6` (Saturday). The first day is always Sunday, in some countries that's not so, but can't be changed. - -**All the methods above return the components relative to the local time zone.** - -There are also their UTC-counterparts, that return day, month, year and so on for the time zone UTC+0: [getUTCFullYear()](mdn:js/Date/getUTCFullYear), [getUTCMonth()](mdn:js/Date/getUTCMonth), [getUTCDay()](mdn:js/Date/getUTCDay). Just insert the `"UTC"` right after `"get"`. - -If your local time zone is shifted relative to UTC, then the code below shows different hours: - -```js run -// current date -let date = new Date(); - -// the hour in your current time zone -alert( date.getHours() ); - -// the hour in UTC+0 time zone (London time without daylight savings) -alert( date.getUTCHours() ); -``` - -Besides the given methods, there are two special ones that do not have a UTC-variant: - -[getTime()](mdn:js/Date/getTime) -: Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0. - -[getTimezoneOffset()](mdn:js/Date/getTimezoneOffset) -: Returns the difference between UTC and the local time zone, in minutes: - - ```js run - // if you are in timezone UTC-1, outputs 60 - // if you are in timezone UTC+3, outputs -180 - alert( new Date().getTimezoneOffset() ); - - ``` - -## Setting date components - -The following methods allow to set date/time components: - -- [`setFullYear(year, [month], [date])`](mdn:js/Date/setFullYear) -- [`setMonth(month, [date])`](mdn:js/Date/setMonth) -- [`setDate(date)`](mdn:js/Date/setDate) -- [`setHours(hour, [min], [sec], [ms])`](mdn:js/Date/setHours) -- [`setMinutes(min, [sec], [ms])`](mdn:js/Date/setMinutes) -- [`setSeconds(sec, [ms])`](mdn:js/Date/setSeconds) -- [`setMilliseconds(ms)`](mdn:js/Date/setMilliseconds) -- [`setTime(milliseconds)`](mdn:js/Date/setTime) (sets the whole date by milliseconds since 01.01.1970 UTC) - -Every one of them except `setTime()` has a UTC-variant, for instance: `setUTCHours()`. - -As we can see, some methods can set multiple components at once, for example `setHours`. The components that are not mentioned are not modified. - -For instance: - -```js run -let today = new Date(); - -today.setHours(0); -alert(today); // still today, but the hour is changed to 0 - -today.setHours(0, 0, 0, 0); -alert(today); // still today, now 00:00:00 sharp. -``` - -## Autocorrection - -The *autocorrection* is a very handy feature of `Date` objects. We can set out-of-range values, and it will auto-adjust itself. - -For instance: - -```js run -let date = new Date(2013, 0, *!*32*/!*); // 32 Jan 2013 ?!? -alert(date); // ...is 1st Feb 2013! -``` - -Out-of-range date components are distributed automatically. - -Let's say we need to increase the date "28 Feb 2016" by 2 days. It may be "2 Mar" or "1 Mar" in case of a leap-year. We don't need to think about it. Just add 2 days. The `Date` object will do the rest: - -```js run -let date = new Date(2016, 1, 28); -*!* -date.setDate(date.getDate() + 2); -*/!* - -alert( date ); // 1 Mar 2016 -``` - -That feature is often used to get the date after the given period of time. For instance, let's get the date for "70 seconds after now": - -```js run -let date = new Date(); -date.setSeconds(date.getSeconds() + 70); - -alert( date ); // shows the correct date -``` - -We can also set zero or even negative values. For example: - -```js run -let date = new Date(2016, 0, 2); // 2 Jan 2016 - -date.setDate(1); // set day 1 of month -alert( date ); - -date.setDate(0); // min day is 1, so the last day of the previous month is assumed -alert( date ); // 31 Dec 2015 -``` - -## Date to number, date diff - -When a `Date` object is converted to number, it becomes the timestamp same as `date.getTime()`: - -```js run -let date = new Date(); -alert(+date); // the number of milliseconds, same as date.getTime() -``` - -The important side effect: dates can be subtracted, the result is their difference in ms. - -That can be used for time measurements: - -```js run -let start = new Date(); // start measuring time - -// do the job -for (let i = 0; i < 100000; i++) { - let doSomething = i * i * i; -} - -let end = new Date(); // end measuring time - -alert( `The loop took ${end - start} ms` ); -``` - -## Date.now() - -If we only want to measure time, we don't need the `Date` object. - -There's a special method `Date.now()` that returns the current timestamp. - -It is semantically equivalent to `new Date().getTime()`, but it doesn't create an intermediate `Date` object. So it's faster and doesn't put pressure on garbage collection. - -It is used mostly for convenience or when performance matters, like in games in JavaScript or other specialized applications. - -So this is probably better: - -```js run -*!* -let start = Date.now(); // milliseconds count from 1 Jan 1970 -*/!* - -// do the job -for (let i = 0; i < 100000; i++) { - let doSomething = i * i * i; -} - -*!* -let end = Date.now(); // done -*/!* - -alert( `The loop took ${end - start} ms` ); // subtract numbers, not dates -``` - -## Benchmarking - -If we want a reliable benchmark of CPU-hungry function, we should be careful. - -For instance, let's measure two functions that calculate the difference between two dates: which one is faster? - -Such performance measurements are often called "benchmarks". - -```js -// we have date1 and date2, which function faster returns their difference in ms? -function diffSubtract(date1, date2) { - return date2 - date1; -} - -// or -function diffGetTime(date1, date2) { - return date2.getTime() - date1.getTime(); -} -``` - -These two do exactly the same thing, but one of them uses an explicit `date.getTime()` to get the date in ms, and the other one relies on a date-to-number transform. Their result is always the same. - -So, which one is faster? - -The first idea may be to run them many times in a row and measure the time difference. For our case, functions are very simple, so we have to do it at least 100000 times. - -Let's measure: - -```js run -function diffSubtract(date1, date2) { - return date2 - date1; -} - -function diffGetTime(date1, date2) { - return date2.getTime() - date1.getTime(); -} - -function bench(f) { - let date1 = new Date(0); - let date2 = new Date(); - - let start = Date.now(); - for (let i = 0; i < 100000; i++) f(date1, date2); - return Date.now() - start; -} - -alert( 'Time of diffSubtract: ' + bench(diffSubtract) + 'ms' ); -alert( 'Time of diffGetTime: ' + bench(diffGetTime) + 'ms' ); -``` - -Wow! Using `getTime()` is so much faster! That's because there's no type conversion, it is much easier for engines to optimize. - -Okay, we have something. But that's not a good benchmark yet. - -Imagine that at the time of running `bench(diffSubtract)` CPU was doing something in parallel, and it was taking resources. And by the time of running `bench(diffGetTime)` that work has finished. - -A pretty real scenario for a modern multi-process OS. - -As a result, the first benchmark will have less CPU resources than the second. That may lead to wrong results. - -**For more reliable benchmarking, the whole pack of benchmarks should be rerun multiple times.** - -For example, like this: - -```js run -function diffSubtract(date1, date2) { - return date2 - date1; -} - -function diffGetTime(date1, date2) { - return date2.getTime() - date1.getTime(); -} - -function bench(f) { - let date1 = new Date(0); - let date2 = new Date(); - - let start = Date.now(); - for (let i = 0; i < 100000; i++) f(date1, date2); - return Date.now() - start; -} - -let time1 = 0; -let time2 = 0; - -*!* -// run bench(upperSlice) and bench(upperLoop) each 10 times alternating -for (let i = 0; i < 10; i++) { - time1 += bench(diffSubtract); - time2 += bench(diffGetTime); -} -*/!* - -alert( 'Total time for diffSubtract: ' + time1 ); -alert( 'Total time for diffGetTime: ' + time2 ); -``` - -Modern JavaScript engines start applying advanced optimizations only to "hot code" that executes many times (no need to optimize rarely executed things). So, in the example above, first executions are not well-optimized. We may want to add a heat-up run: - -```js -// added for "heating up" prior to the main loop -bench(diffSubtract); -bench(diffGetTime); - -// now benchmark -for (let i = 0; i < 10; i++) { - time1 += bench(diffSubtract); - time2 += bench(diffGetTime); -} -``` - -```warn header="Be careful doing microbenchmarking" -Modern JavaScript engines perform many optimizations. They may tweak results of "artificial tests" compared to "normal usage", especially when we benchmark something very small, such as how an operator works, or a built-in function. So if you seriously want to understand performance, then please study how the JavaScript engine works. And then you probably won't need microbenchmarks at all. - -The great pack of articles about V8 can be found at . -``` - -## Date.parse from a string - -The method [Date.parse(str)](mdn:js/Date/parse) can read a date from a string. - -The string format should be: `YYYY-MM-DDTHH:mm:ss.sssZ`, where: - -- `YYYY-MM-DD` -- is the date: year-month-day. -- The character `"T"` is used as the delimiter. -- `HH:mm:ss.sss` -- is the time: hours, minutes, seconds and milliseconds. -- The optional `'Z'` part denotes the time zone in the format `+-hh:mm`. A single letter `Z` that would mean UTC+0. - -Shorter variants are also possible, like `YYYY-MM-DD` or `YYYY-MM` or even `YYYY`. - -The call to `Date.parse(str)` parses the string in the given format and returns the timestamp (number of milliseconds from 1 Jan 1970 UTC+0). If the format is invalid, returns `NaN`. - -For instance: - -```js run -let ms = Date.parse('2012-01-26T13:51:50.417-07:00'); - -alert(ms); // 1327611110417 (timestamp) -``` - -We can instantly create a `new Date` object from the timestamp: - -```js run -let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') ); - -alert(date); -``` - -## Summary - -- Date and time in JavaScript are represented with the [Date](mdn:js/Date) object. We can't create "only date" or "only time": `Date` objects always carry both. -- Months are counted from zero (yes, January is a zero month). -- Days of week in `getDay()` are also counted from zero (that's Sunday). -- `Date` auto-corrects itself when out-of-range components are set. Good for adding/subtracting days/months/hours. -- Dates can be subtracted, giving their difference in milliseconds. That's because a `Date` becomes the timestamp when converted to a number. -- Use `Date.now()` to get the current timestamp fast. - -Note that unlike many other systems, timestamps in JavaScript are in milliseconds, not in seconds. - -Sometimes we need more precise time measurements. JavaScript itself does not have a way to measure time in microseconds (1 millionth of a second), but most environments provide it. For instance, browser has [performance.now()](mdn:api/Performance/now) that gives the number of milliseconds from the start of page loading with microsecond precision (3 digits after the point): - -```js run -alert(`Loading started ${performance.now()}ms ago`); -// Something like: "Loading started 34731.26000000001ms ago" -// .26 is microseconds (260 microseconds) -// more than 3 digits after the decimal point are precision errors, but only the first 3 are correct -``` - -Node.js has `microtime` module and other ways. Technically, almost any device and environment allows to get more precision, it's just not in `Date`. diff --git a/1-js/05-data-types/12-json/1-serialize-object/solution.md b/1-js/05-data-types/12-json/1-serialize-object/solution.md deleted file mode 100644 index db1bcaa811..0000000000 --- a/1-js/05-data-types/12-json/1-serialize-object/solution.md +++ /dev/null @@ -1,13 +0,0 @@ - - -```js -let user = { - name: "John Smith", - age: 35 -}; - -*!* -let user2 = JSON.parse(JSON.stringify(user)); -*/!* -``` - diff --git a/1-js/05-data-types/12-json/1-serialize-object/task.md b/1-js/05-data-types/12-json/1-serialize-object/task.md deleted file mode 100644 index 53343e4c3e..0000000000 --- a/1-js/05-data-types/12-json/1-serialize-object/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 5 - ---- - -# Turn the object into JSON and back - -Turn the `user` into JSON and then read it back into another variable. - -```js -let user = { - name: "John Smith", - age: 35 -}; -``` diff --git a/1-js/05-data-types/12-json/2-serialize-event-circular/solution.md b/1-js/05-data-types/12-json/2-serialize-event-circular/solution.md deleted file mode 100644 index 7a3a533b03..0000000000 --- a/1-js/05-data-types/12-json/2-serialize-event-circular/solution.md +++ /dev/null @@ -1,30 +0,0 @@ - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - occupiedBy: [{name: "John"}, {name: "Alice"}], - place: room -}; - -room.occupiedBy = meetup; -meetup.self = meetup; - -alert( JSON.stringify(meetup, function replacer(key, value) { - return (key != "" && value == meetup) ? undefined : value; -})); - -/* -{ - "title":"Conference", - "occupiedBy":[{"name":"John"},{"name":"Alice"}], - "place":{"number":23} -} -*/ -``` - -Here we also need to test `key==""` to exclude the first call where it is normal that `value` is `meetup`. - diff --git a/1-js/05-data-types/12-json/2-serialize-event-circular/task.md b/1-js/05-data-types/12-json/2-serialize-event-circular/task.md deleted file mode 100644 index 3755a24aa2..0000000000 --- a/1-js/05-data-types/12-json/2-serialize-event-circular/task.md +++ /dev/null @@ -1,41 +0,0 @@ -importance: 5 - ---- - -# Exclude backreferences - -In simple cases of circular references, we can exclude an offending property from serialization by its name. - -But sometimes we can't just use the name, as it may be used both in circular references and normal properties. So we can check the property by its value. - -Write `replacer` function to stringify everything, but remove properties that reference `meetup`: - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - occupiedBy: [{name: "John"}, {name: "Alice"}], - place: room -}; - -*!* -// circular references -room.occupiedBy = meetup; -meetup.self = meetup; -*/!* - -alert( JSON.stringify(meetup, function replacer(key, value) { - /* your code */ -})); - -/* result should be: -{ - "title":"Conference", - "occupiedBy":[{"name":"John"},{"name":"Alice"}], - "place":{"number":23} -} -*/ -``` diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md deleted file mode 100644 index a5f2974af0..0000000000 --- a/1-js/05-data-types/12-json/article.md +++ /dev/null @@ -1,527 +0,0 @@ -# JSON methods, toJSON - -Let's say we have a complex object, and we'd like to convert it into a string, to send it over a network, or just to output it for logging purposes. - -Naturally, such a string should include all important properties. - -We could implement the conversion like this: - -```js run -let user = { - name: "John", - age: 30, - -*!* - toString() { - return `{name: "${this.name}", age: ${this.age}}`; - } -*/!* -}; - -alert(user); // {name: "John", age: 30} -``` - -...But in the process of development, new properties are added, old properties are renamed and removed. Updating such `toString` every time can become a pain. We could try to loop over properties in it, but what if the object is complex and has nested objects in properties? We'd need to implement their conversion as well. - -Luckily, there's no need to write the code to handle all this. The task has been solved already. - -## JSON.stringify - -The [JSON](http://en.wikipedia.org/wiki/JSON) (JavaScript Object Notation) is a general format to represent values and objects. It is described as in [RFC 4627](http://tools.ietf.org/html/rfc4627) standard. Initially it was made for JavaScript, but many other languages have libraries to handle it as well. So it's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever. - -JavaScript provides methods: - -- `JSON.stringify` to convert objects into JSON. -- `JSON.parse` to convert JSON back into an object. - -For instance, here we `JSON.stringify` a student: -```js run -let student = { - name: 'John', - age: 30, - isAdmin: false, - courses: ['html', 'css', 'js'], - wife: null -}; - -*!* -let json = JSON.stringify(student); -*/!* - -alert(typeof json); // we've got a string! - -alert(json); -*!* -/* JSON-encoded object: -{ - "name": "John", - "age": 30, - "isAdmin": false, - "courses": ["html", "css", "js"], - "wife": null -} -*/ -*/!* -``` - -The method `JSON.stringify(student)` takes the object and converts it into a string. - -The resulting `json` string is called a *JSON-encoded* or *serialized* or *stringified* or *marshalled* object. We are ready to send it over the wire or put into a plain data store. - - -Please note that a JSON-encoded object has several important differences from the object literal: - -- Strings use double quotes. No single quotes or backticks in JSON. So `'John'` becomes `"John"`. -- Object property names are double-quoted also. That's obligatory. So `age:30` becomes `"age":30`. - -`JSON.stringify` can be applied to primitives as well. - -JSON supports following data types: - -- Objects `{ ... }` -- Arrays `[ ... ]` -- Primitives: - - strings, - - numbers, - - boolean values `true/false`, - - `null`. - -For instance: - -```js run -// a number in JSON is just a number -alert( JSON.stringify(1) ) // 1 - -// a string in JSON is still a string, but double-quoted -alert( JSON.stringify('test') ) // "test" - -alert( JSON.stringify(true) ); // true - -alert( JSON.stringify([1, 2, 3]) ); // [1,2,3] -``` - -JSON is data-only language-independent specification, so some JavaScript-specific object properties are skipped by `JSON.stringify`. - -Namely: - -- Function properties (methods). -- Symbolic properties. -- Properties that store `undefined`. - -```js run -let user = { - sayHi() { // ignored - alert("Hello"); - }, - [Symbol("id")]: 123, // ignored - something: undefined // ignored -}; - -alert( JSON.stringify(user) ); // {} (empty object) -``` - -Usually that's fine. If that's not what we want, then soon we'll see how to customize the process. - -The great thing is that nested objects are supported and converted automatically. - -For instance: - -```js run -let meetup = { - title: "Conference", -*!* - room: { - number: 23, - participants: ["john", "ann"] - } -*/!* -}; - -alert( JSON.stringify(meetup) ); -/* The whole structure is stringified: -{ - "title":"Conference", - "room":{"number":23,"participants":["john","ann"]}, -} -*/ -``` - -The important limitation: there must be no circular references. - -For instance: - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - participants: ["john", "ann"] -}; - -meetup.place = room; // meetup references room -room.occupiedBy = meetup; // room references meetup - -*!* -JSON.stringify(meetup); // Error: Converting circular structure to JSON -*/!* -``` - -Here, the conversion fails, because of circular reference: `room.occupiedBy` references `meetup`, and `meetup.place` references `room`: - -![](json-meetup.svg) - - -## Excluding and transforming: replacer - -The full syntax of `JSON.stringify` is: - -```js -let json = JSON.stringify(value[, replacer, space]) -``` - -value -: A value to encode. - -replacer -: Array of properties to encode or a mapping function `function(key, value)`. - -space -: Amount of space to use for formatting - -Most of the time, `JSON.stringify` is used with the first argument only. But if we need to fine-tune the replacement process, like to filter out circular references, we can use the second argument of `JSON.stringify`. - -If we pass an array of properties to it, only these properties will be encoded. - -For instance: - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - participants: [{name: "John"}, {name: "Alice"}], - place: room // meetup references room -}; - -room.occupiedBy = meetup; // room references meetup - -alert( JSON.stringify(meetup, *!*['title', 'participants']*/!*) ); -// {"title":"Conference","participants":[{},{}]} -``` - -Here we are probably too strict. The property list is applied to the whole object structure. So the objects in `participants` are empty, because `name` is not in the list. - -Let's include in the list every property except `room.occupiedBy` that would cause the circular reference: - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - participants: [{name: "John"}, {name: "Alice"}], - place: room // meetup references room -}; - -room.occupiedBy = meetup; // room references meetup - -alert( JSON.stringify(meetup, *!*['title', 'participants', 'place', 'name', 'number']*/!*) ); -/* -{ - "title":"Conference", - "participants":[{"name":"John"},{"name":"Alice"}], - "place":{"number":23} -} -*/ -``` - -Now everything except `occupiedBy` is serialized. But the list of properties is quite long. - -Fortunately, we can use a function instead of an array as the `replacer`. - -The function will be called for every `(key, value)` pair and should return the "replaced" value, which will be used instead of the original one. Or `undefined` if the value is to be skipped. - -In our case, we can return `value` "as is" for everything except `occupiedBy`. To ignore `occupiedBy`, the code below returns `undefined`: - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - participants: [{name: "John"}, {name: "Alice"}], - place: room // meetup references room -}; - -room.occupiedBy = meetup; // room references meetup - -alert( JSON.stringify(meetup, function replacer(key, value) { - alert(`${key}: ${value}`); - return (key == 'occupiedBy') ? undefined : value; -})); - -/* key:value pairs that come to replacer: -: [object Object] -title: Conference -participants: [object Object],[object Object] -0: [object Object] -name: John -1: [object Object] -name: Alice -place: [object Object] -number: 23 -*/ -``` - -Please note that `replacer` function gets every key/value pair including nested objects and array items. It is applied recursively. The value of `this` inside `replacer` is the object that contains the current property. - -The first call is special. It is made using a special "wrapper object": `{"": meetup}`. In other words, the first `(key, value)` pair has an empty key, and the value is the target object as a whole. That's why the first line is `":[object Object]"` in the example above. - -The idea is to provide as much power for `replacer` as possible: it has a chance to analyze and replace/skip even the whole object if necessary. - - -## Formatting: space - -The third argument of `JSON.stringify(value, replacer, space)` is the number of spaces to use for pretty formatting. - -Previously, all stringified objects had no indents and extra spaces. That's fine if we want to send an object over a network. The `space` argument is used exclusively for a nice output. - -Here `space = 2` tells JavaScript to show nested objects on multiple lines, with indentation of 2 spaces inside an object: - -```js run -let user = { - name: "John", - age: 25, - roles: { - isAdmin: false, - isEditor: true - } -}; - -alert(JSON.stringify(user, null, 2)); -/* two-space indents: -{ - "name": "John", - "age": 25, - "roles": { - "isAdmin": false, - "isEditor": true - } -} -*/ - -/* for JSON.stringify(user, null, 4) the result would be more indented: -{ - "name": "John", - "age": 25, - "roles": { - "isAdmin": false, - "isEditor": true - } -} -*/ -``` - -The `space` parameter is used solely for logging and nice-output purposes. - -## Custom "toJSON" - -Like `toString` for string conversion, an object may provide method `toJSON` for to-JSON conversion. `JSON.stringify` automatically calls it if available. - -For instance: - -```js run -let room = { - number: 23 -}; - -let meetup = { - title: "Conference", - date: new Date(Date.UTC(2017, 0, 1)), - room -}; - -alert( JSON.stringify(meetup) ); -/* - { - "title":"Conference", -*!* - "date":"2017-01-01T00:00:00.000Z", // (1) -*/!* - "room": {"number":23} // (2) - } -*/ -``` - -Here we can see that `date` `(1)` became a string. That's because all dates have a built-in `toJSON` method which returns such kind of string. - -Now let's add a custom `toJSON` for our object `room` `(2)`: - -```js run -let room = { - number: 23, -*!* - toJSON() { - return this.number; - } -*/!* -}; - -let meetup = { - title: "Conference", - room -}; - -*!* -alert( JSON.stringify(room) ); // 23 -*/!* - -alert( JSON.stringify(meetup) ); -/* - { - "title":"Conference", -*!* - "room": 23 -*/!* - } -*/ -``` - -As we can see, `toJSON` is used both for the direct call `JSON.stringify(room)` and when `room` is nested in another encoded object. - - -## JSON.parse - -To decode a JSON-string, we need another method named [JSON.parse](mdn:js/JSON/parse). - -The syntax: -```js -let value = JSON.parse(str, [reviver]); -``` - -str -: JSON-string to parse. - -reviver -: Optional function(key,value) that will be called for each `(key, value)` pair and can transform the value. - -For instance: - -```js run -// stringified array -let numbers = "[0, 1, 2, 3]"; - -numbers = JSON.parse(numbers); - -alert( numbers[1] ); // 1 -``` - -Or for nested objects: - -```js run -let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }'; - -let user = JSON.parse(userData); - -alert( user.friends[1] ); // 1 -``` - -The JSON may be as complex as necessary, objects and arrays can include other objects and arrays. But they must obey the same JSON format. - -Here are typical mistakes in hand-written JSON (sometimes we have to write it for debugging purposes): - -```js -let json = `{ - *!*name*/!*: "John", // mistake: property name without quotes - "surname": *!*'Smith'*/!*, // mistake: single quotes in value (must be double) - *!*'isAdmin'*/!*: false // mistake: single quotes in key (must be double) - "birthday": *!*new Date(2000, 2, 3)*/!*, // mistake: no "new" is allowed, only bare values - "friends": [0,1,2,3] // here all fine -}`; -``` - -Besides, JSON does not support comments. Adding a comment to JSON makes it invalid. - -There's another format named [JSON5](http://json5.org/), which allows unquoted keys, comments etc. But this is a standalone library, not in the specification of the language. - -The regular JSON is that strict not because its developers are lazy, but to allow easy, reliable and very fast implementations of the parsing algorithm. - -## Using reviver - -Imagine, we got a stringified `meetup` object from the server. - -It looks like this: - -```js -// title: (meetup title), date: (meetup date) -let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'; -``` - -...And now we need to *deserialize* it, to turn back into JavaScript object. - -Let's do it by calling `JSON.parse`: - -```js run -let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'; - -let meetup = JSON.parse(str); - -*!* -alert( meetup.date.getDate() ); // Error! -*/!* -``` - -Whoops! An error! - -The value of `meetup.date` is a string, not a `Date` object. How could `JSON.parse` know that it should transform that string into a `Date`? - -Let's pass to `JSON.parse` the reviving function as the second argument, that returns all values "as is", but `date` will become a `Date`: - -```js run -let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'; - -*!* -let meetup = JSON.parse(str, function(key, value) { - if (key == 'date') return new Date(value); - return value; -}); -*/!* - -alert( meetup.date.getDate() ); // now works! -``` - -By the way, that works for nested objects as well: - -```js run -let schedule = `{ - "meetups": [ - {"title":"Conference","date":"2017-11-30T12:00:00.000Z"}, - {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"} - ] -}`; - -schedule = JSON.parse(schedule, function(key, value) { - if (key == 'date') return new Date(value); - return value; -}); - -*!* -alert( schedule.meetups[1].date.getDate() ); // works! -*/!* -``` - - - -## Summary - -- JSON is a data format that has its own independent standard and libraries for most programming languages. -- JSON supports plain objects, arrays, strings, numbers, booleans, and `null`. -- JavaScript provides methods [JSON.stringify](mdn:js/JSON/stringify) to serialize into JSON and [JSON.parse](mdn:js/JSON/parse) to read from JSON. -- Both methods support transformer functions for smart reading/writing. -- If an object has `toJSON`, then it is called by `JSON.stringify`. diff --git a/1-js/05-data-types/12-json/json-meetup.svg b/1-js/05-data-types/12-json/json-meetup.svg deleted file mode 100644 index e446749046..0000000000 --- a/1-js/05-data-types/12-json/json-meetup.svg +++ /dev/null @@ -1 +0,0 @@ -number: 23title: "Conference"...placeoccupiedByparticipants \ No newline at end of file diff --git a/1-js/05-data-types/index.md b/1-js/05-data-types/index.md deleted file mode 100644 index 246e2bc913..0000000000 --- a/1-js/05-data-types/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Data types - -More data structures and more in-depth study of the types. diff --git a/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md b/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md deleted file mode 100644 index 3a281ef3f5..0000000000 --- a/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md +++ /dev/null @@ -1,40 +0,0 @@ -The solution using a loop: - -```js run -function sumTo(n) { - let sum = 0; - for (let i = 1; i <= n; i++) { - sum += i; - } - return sum; -} - -alert( sumTo(100) ); -``` - -The solution using recursion: - -```js run -function sumTo(n) { - if (n == 1) return 1; - return n + sumTo(n - 1); -} - -alert( sumTo(100) ); -``` - -The solution using the formula: `sumTo(n) = n*(n+1)/2`: - -```js run -function sumTo(n) { - return n * (n + 1) / 2; -} - -alert( sumTo(100) ); -``` - -P.S. Naturally, the formula is the fastest solution. It uses only 3 operations for any number `n`. The math helps! - -The loop variant is the second in terms of speed. In both the recursive and the loop variant we sum the same numbers. But the recursion involves nested calls and execution stack management. That also takes resources, so it's slower. - -P.P.S. Some engines support the "tail call" optimization: if a recursive call is the very last one in the function (like in `sumTo` above), then the outer function will not need to resume the execution, so the engine doesn't need to remember its execution context. That removes the burden on memory, so counting `sumTo(100000)` becomes possible. But if the JavaScript engine does not support tail call optimization (most of them don't), there will be an error: maximum stack size exceeded, because there's usually a limitation on the total stack size. diff --git a/1-js/06-advanced-functions/01-recursion/01-sum-to/task.md b/1-js/06-advanced-functions/01-recursion/01-sum-to/task.md deleted file mode 100644 index cabc13290a..0000000000 --- a/1-js/06-advanced-functions/01-recursion/01-sum-to/task.md +++ /dev/null @@ -1,36 +0,0 @@ -importance: 5 - ---- - -# Sum all numbers till the given one - -Write a function `sumTo(n)` that calculates the sum of numbers `1 + 2 + ... + n`. - -For instance: - -```js no-beautify -sumTo(1) = 1 -sumTo(2) = 2 + 1 = 3 -sumTo(3) = 3 + 2 + 1 = 6 -sumTo(4) = 4 + 3 + 2 + 1 = 10 -... -sumTo(100) = 100 + 99 + ... + 2 + 1 = 5050 -``` - -Make 3 solution variants: - -1. Using a for loop. -2. Using a recursion, cause `sumTo(n) = n + sumTo(n-1)` for `n > 1`. -3. Using the [arithmetic progression](https://en.wikipedia.org/wiki/Arithmetic_progression) formula. - -An example of the result: - -```js -function sumTo(n) { /*... your code ... */ } - -alert( sumTo(100) ); // 5050 -``` - -P.S. Which solution variant is the fastest? The slowest? Why? - -P.P.S. Can we use recursion to count `sumTo(100000)`? diff --git a/1-js/06-advanced-functions/01-recursion/02-factorial/solution.md b/1-js/06-advanced-functions/01-recursion/02-factorial/solution.md deleted file mode 100644 index 59040a2b7a..0000000000 --- a/1-js/06-advanced-functions/01-recursion/02-factorial/solution.md +++ /dev/null @@ -1,21 +0,0 @@ -By definition, a factorial is `n!` can be written as `n * (n-1)!`. - -In other words, the result of `factorial(n)` can be calculated as `n` multiplied by the result of `factorial(n-1)`. And the call for `n-1` can recursively descend lower, and lower, till `1`. - -```js run -function factorial(n) { - return (n != 1) ? n * factorial(n - 1) : 1; -} - -alert( factorial(5) ); // 120 -``` - -The basis of recursion is the value `1`. We can also make `0` the basis here, doesn't matter much, but gives one more recursive step: - -```js run -function factorial(n) { - return n ? n * factorial(n - 1) : 1; -} - -alert( factorial(5) ); // 120 -``` diff --git a/1-js/06-advanced-functions/01-recursion/02-factorial/task.md b/1-js/06-advanced-functions/01-recursion/02-factorial/task.md deleted file mode 100644 index d2aef2d903..0000000000 --- a/1-js/06-advanced-functions/01-recursion/02-factorial/task.md +++ /dev/null @@ -1,31 +0,0 @@ -importance: 4 - ---- - -# Calculate factorial - -The [factorial](https://en.wikipedia.org/wiki/Factorial) of a natural number is a number multiplied by `"number minus one"`, then by `"number minus two"`, and so on till `1`. The factorial of `n` is denoted as `n!` - -We can write a definition of factorial like this: - -```js -n! = n * (n - 1) * (n - 2) * ...*1 -``` - -Values of factorials for different `n`: - -```js -1! = 1 -2! = 2 * 1 = 2 -3! = 3 * 2 * 1 = 6 -4! = 4 * 3 * 2 * 1 = 24 -5! = 5 * 4 * 3 * 2 * 1 = 120 -``` - -The task is to write a function `factorial(n)` that calculates `n!` using recursive calls. - -```js -alert( factorial(5) ); // 120 -``` - -P.S. Hint: `n!` can be written as `n * (n-1)!` For instance: `3! = 3*2! = 3*2*1! = 6` diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg deleted file mode 100644 index 59e6a52c41..0000000000 --- a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg +++ /dev/null @@ -1 +0,0 @@ -fib ( 5 )fib(4)fib(3)fib(3)fib(2)fib(0)fib(1)fib(1)fib(2)fib(0)fib(1)fib(1)fib(2)fib(0)fib(1) \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md deleted file mode 100644 index 36524a45aa..0000000000 --- a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md +++ /dev/null @@ -1,110 +0,0 @@ -The first solution we could try here is the recursive one. - -Fibonacci numbers are recursive by definition: - -```js run -function fib(n) { - return n <= 1 ? n : fib(n - 1) + fib(n - 2); -} - -alert( fib(3) ); // 2 -alert( fib(7) ); // 13 -// fib(77); // will be extremely slow! -``` - -...But for big values of `n` it's very slow. For instance, `fib(77)` may hang up the engine for some time eating all CPU resources. - -That's because the function makes too many subcalls. The same values are re-evaluated again and again. - -For instance, let's see a piece of calculations for `fib(5)`: - -```js no-beautify -... -fib(5) = fib(4) + fib(3) -fib(4) = fib(3) + fib(2) -... -``` - -Here we can see that the value of `fib(3)` is needed for both `fib(5)` and `fib(4)`. So `fib(3)` will be called and evaluated two times completely independently. - -Here's the full recursion tree: - -![fibonacci recursion tree](fibonacci-recursion-tree.svg) - -We can clearly notice that `fib(3)` is evaluated two times and `fib(2)` is evaluated three times. The total amount of computations grows much faster than `n`, making it enormous even for `n=77`. - -We can optimize that by remembering already-evaluated values: if a value of say `fib(3)` is calculated once, then we can just reuse it in future computations. - -Another variant would be to give up recursion and use a totally different loop-based algorithm. - -Instead of going from `n` down to lower values, we can make a loop that starts from `1` and `2`, then gets `fib(3)` as their sum, then `fib(4)` as the sum of two previous values, then `fib(5)` and goes up and up, till it gets to the needed value. On each step we only need to remember two previous values. - -Here are the steps of the new algorithm in details. - -The start: - -```js -// a = fib(1), b = fib(2), these values are by definition 1 -let a = 1, b = 1; - -// get c = fib(3) as their sum -let c = a + b; - -/* we now have fib(1), fib(2), fib(3) -a b c -1, 1, 2 -*/ -``` - -Now we want to get `fib(4) = fib(2) + fib(3)`. - -Let's shift the variables: `a,b` will get `fib(2),fib(3)`, and `c` will get their sum: - -```js no-beautify -a = b; // now a = fib(2) -b = c; // now b = fib(3) -c = a + b; // c = fib(4) - -/* now we have the sequence: - a b c -1, 1, 2, 3 -*/ -``` - -The next step gives another sequence number: - -```js no-beautify -a = b; // now a = fib(3) -b = c; // now b = fib(4) -c = a + b; // c = fib(5) - -/* now the sequence is (one more number): - a b c -1, 1, 2, 3, 5 -*/ -``` - -...And so on until we get the needed value. That's much faster than recursion and involves no duplicate computations. - -The full code: - -```js run -function fib(n) { - let a = 1; - let b = 1; - for (let i = 3; i <= n; i++) { - let c = a + b; - a = b; - b = c; - } - return b; -} - -alert( fib(3) ); // 2 -alert( fib(7) ); // 13 -alert( fib(77) ); // 5527939700884757 -``` - -The loop starts with `i=3`, because the first and the second sequence values are hard-coded into variables `a=1`, `b=1`. - -The approach is called [dynamic programming bottom-up](https://en.wikipedia.org/wiki/Dynamic_programming). diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md deleted file mode 100644 index 3cdadd219b..0000000000 --- a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md +++ /dev/null @@ -1,25 +0,0 @@ -importance: 5 - ---- - -# Fibonacci numbers - -The sequence of [Fibonacci numbers](https://en.wikipedia.org/wiki/Fibonacci_number) has the formula Fn = Fn-1 + Fn-2. In other words, the next number is a sum of the two preceding ones. - -First two numbers are `1`, then `2(1+1)`, then `3(1+2)`, `5(2+3)` and so on: `1, 1, 2, 3, 5, 8, 13, 21...`. - -Fibonacci numbers are related to the [Golden ratio](https://en.wikipedia.org/wiki/Golden_ratio) and many natural phenomena around us. - -Write a function `fib(n)` that returns the `n-th` Fibonacci number. - -An example of work: - -```js -function fib(n) { /* your code */ } - -alert(fib(3)); // 2 -alert(fib(7)); // 13 -alert(fib(77)); // 5527939700884757 -``` - -P.S. The function should be fast. The call to `fib(77)` should take no more than a fraction of a second. diff --git a/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md b/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md deleted file mode 100644 index cfcbffea57..0000000000 --- a/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md +++ /dev/null @@ -1,88 +0,0 @@ -# Loop-based solution - -The loop-based variant of the solution: - -```js run -let list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printList(list) { - let tmp = list; - - while (tmp) { - alert(tmp.value); - tmp = tmp.next; - } - -} - -printList(list); -``` - -Please note that we use a temporary variable `tmp` to walk over the list. Technically, we could use a function parameter `list` instead: - -```js -function printList(list) { - - while(*!*list*/!*) { - alert(list.value); - list = list.next; - } - -} -``` - -...But that would be unwise. In the future we may need to extend a function, do something else with the list. If we change `list`, then we lose such ability. - -Talking about good variable names, `list` here is the list itself. The first element of it. And it should remain like that. That's clear and reliable. - -From the other side, the role of `tmp` is exclusively a list traversal, like `i` in the `for` loop. - -# Recursive solution - -The recursive variant of `printList(list)` follows a simple logic: to output a list we should output the current element `list`, then do the same for `list.next`: - -```js run -let list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printList(list) { - - alert(list.value); // output the current item - - if (list.next) { - printList(list.next); // do the same for the rest of the list - } - -} - -printList(list); -``` - -Now what's better? - -Technically, the loop is more effective. These two variants do the same, but the loop does not spend resources for nested function calls. - -From the other side, the recursive variant is shorter and sometimes easier to understand. diff --git a/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md b/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md deleted file mode 100644 index 1076b952af..0000000000 --- a/1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md +++ /dev/null @@ -1,29 +0,0 @@ -importance: 5 - ---- - -# Output a single-linked list - -Let's say we have a single-linked list (as described in the chapter ): - -```js -let list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; -``` - -Write a function `printList(list)` that outputs list items one-by-one. - -Make two variants of the solution: using a loop and using recursion. - -What's better: with recursion or without it? diff --git a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md deleted file mode 100644 index 4357ff208b..0000000000 --- a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md +++ /dev/null @@ -1,74 +0,0 @@ -# Using a recursion - -The recursive logic is a little bit tricky here. - -We need to first output the rest of the list and *then* output the current one: - -```js run -let list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printReverseList(list) { - - if (list.next) { - printReverseList(list.next); - } - - alert(list.value); -} - -printReverseList(list); -``` - -# Using a loop - -The loop variant is also a little bit more complicated then the direct output. - -There is no way to get the last value in our `list`. We also can't "go back". - -So what we can do is to first go through the items in the direct order and remember them in an array, and then output what we remembered in the reverse order: - -```js run -let list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printReverseList(list) { - let arr = []; - let tmp = list; - - while (tmp) { - arr.push(tmp.value); - tmp = tmp.next; - } - - for (let i = arr.length - 1; i >= 0; i--) { - alert( arr[i] ); - } -} - -printReverseList(list); -``` - -Please note that the recursive solution actually does exactly the same: it follows the list, remembers the items in the chain of nested calls (in the execution context stack), and then outputs them. diff --git a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md deleted file mode 100644 index 81b1f3e33a..0000000000 --- a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Output a single-linked list in the reverse order - -Output a single-linked list from the previous task in the reverse order. - -Make two solutions: using a loop and using a recursion. diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md deleted file mode 100644 index 320de62f05..0000000000 --- a/1-js/06-advanced-functions/01-recursion/article.md +++ /dev/null @@ -1,542 +0,0 @@ -# Recursion and stack - -Let's return to functions and study them more in-depth. - -Our first topic will be *recursion*. - -If you are not new to programming, then it is probably familiar and you could skip this chapter. - -Recursion is a programming pattern that is useful in situations when a task can be naturally split into several tasks of the same kind, but simpler. Or when a task can be simplified into an easy action plus a simpler variant of the same task. Or, as we'll see soon, to deal with certain data structures. - -When a function solves a task, in the process it can call many other functions. A partial case of this is when a function calls *itself*. That's called *recursion*. - -## Two ways of thinking - -For something simple to start with -- let's write a function `pow(x, n)` that raises `x` to a natural power of `n`. In other words, multiplies `x` by itself `n` times. - -```js -pow(2, 2) = 4 -pow(2, 3) = 8 -pow(2, 4) = 16 -``` - -There are two ways to implement it. - -1. Iterative thinking: the `for` loop: - - ```js run - function pow(x, n) { - let result = 1; - - // multiply result by x n times in the loop - for (let i = 0; i < n; i++) { - result *= x; - } - - return result; - } - - alert( pow(2, 3) ); // 8 - ``` - -2. Recursive thinking: simplify the task and call self: - - ```js run - function pow(x, n) { - if (n == 1) { - return x; - } else { - return x * pow(x, n - 1); - } - } - - alert( pow(2, 3) ); // 8 - ``` - -Please note how the recursive variant is fundamentally different. - -When `pow(x, n)` is called, the execution splits into two branches: - -```js - if n==1 = x - / -pow(x, n) = - \ - else = x * pow(x, n - 1) -``` - -1. If `n == 1`, then everything is trivial. It is called *the base* of recursion, because it immediately produces the obvious result: `pow(x, 1)` equals `x`. -2. Otherwise, we can represent `pow(x, n)` as `x * pow(x, n - 1)`. In maths, one would write xn = x * xn-1. This is called *a recursive step*: we transform the task into a simpler action (multiplication by `x`) and a simpler call of the same task (`pow` with lower `n`). Next steps simplify it further and further until `n` reaches `1`. - -We can also say that `pow` *recursively calls itself* till `n == 1`. - -![recursive diagram of pow](recursion-pow.svg) - - -For example, to calculate `pow(2, 4)` the recursive variant does these steps: - -1. `pow(2, 4) = 2 * pow(2, 3)` -2. `pow(2, 3) = 2 * pow(2, 2)` -3. `pow(2, 2) = 2 * pow(2, 1)` -4. `pow(2, 1) = 2` - -So, the recursion reduces a function call to a simpler one, and then -- to even more simpler, and so on, until the result becomes obvious. - -````smart header="Recursion is usually shorter" -A recursive solution is usually shorter than an iterative one. - -Here we can rewrite the same using the conditional operator `?` instead of `if` to make `pow(x, n)` more terse and still very readable: - -```js run -function pow(x, n) { - return (n == 1) ? x : (x * pow(x, n - 1)); -} -``` -```` - -The maximal number of nested calls (including the first one) is called *recursion depth*. In our case, it will be exactly `n`. - -The maximal recursion depth is limited by JavaScript engine. We can rely on it being 10000, some engines allow more, but 100000 is probably out of limit for the majority of them. There are automatic optimizations that help alleviate this ("tail calls optimizations"), but they are not yet supported everywhere and work only in simple cases. - -That limits the application of recursion, but it still remains very wide. There are many tasks where recursive way of thinking gives simpler code, easier to maintain. - -## The execution context and stack - -Now let's examine how recursive calls work. For that we'll look under the hood of functions. - -The information about the process of execution of a running function is stored in its *execution context*. - -The [execution context](https://tc39.github.io/ecma262/#sec-execution-contexts) is an internal data structure that contains details about the execution of a function: where the control flow is now, the current variables, the value of `this` (we don't use it here) and few other internal details. - -One function call has exactly one execution context associated with it. - -When a function makes a nested call, the following happens: - -- The current function is paused. -- The execution context associated with it is remembered in a special data structure called *execution context stack*. -- The nested call executes. -- After it ends, the old execution context is retrieved from the stack, and the outer function is resumed from where it stopped. - -Let's see what happens during the `pow(2, 3)` call. - -### pow(2, 3) - -In the beginning of the call `pow(2, 3)` the execution context will store variables: `x = 2, n = 3`, the execution flow is at line `1` of the function. - -We can sketch it as: - -
    -
  • - Context: { x: 2, n: 3, at line 1 } - pow(2, 3) -
    • -
- -That's when the function starts to execute. The condition `n == 1` is false, so the flow continues into the second branch of `if`: - -```js run -function pow(x, n) { - if (n == 1) { - return x; - } else { -*!* - return x * pow(x, n - 1); -*/!* - } -} - -alert( pow(2, 3) ); -``` - - -The variables are same, but the line changes, so the context is now: - -
    -
  • - Context: { x: 2, n: 3, at line 5 } - pow(2, 3) -
    • -
- -To calculate `x * pow(x, n - 1)`, we need to make a subcall of `pow` with new arguments `pow(2, 2)`. - -### pow(2, 2) - -To do a nested call, JavaScript remembers the current execution context in the *execution context stack*. - -Here we call the same function `pow`, but it absolutely doesn't matter. The process is the same for all functions: - -1. The current context is "remembered" on top of the stack. -2. The new context is created for the subcall. -3. When the subcall is finished -- the previous context is popped from the stack, and its execution continues. - -Here's the context stack when we entered the subcall `pow(2, 2)`: - -
    -
  • - Context: { x: 2, n: 2, at line 1 } - pow(2, 2) -
    • -
  • - Context: { x: 2, n: 3, at line 5 } - pow(2, 3) -
    • -
- -The new current execution context is on top (and bold), and previous remembered contexts are below. - -When we finish the subcall -- it is easy to resume the previous context, because it keeps both variables and the exact place of the code where it stopped. - -```smart -Here in the picture we use the word "line", as our example there's only one subcall in line, but generally a single line of code may contain multiple subcalls, like `pow(…) + pow(…) + somethingElse(…)`. - -So it would be more precise to say that the execution resumes "immediately after the subcall". -``` - -### pow(2, 1) - -The process repeats: a new subcall is made at line `5`, now with arguments `x=2`, `n=1`. - -A new execution context is created, the previous one is pushed on top of the stack: - -
    -
  • - Context: { x: 2, n: 1, at line 1 } - pow(2, 1) -
    • -
  • - Context: { x: 2, n: 2, at line 5 } - pow(2, 2) -
    • -
  • - Context: { x: 2, n: 3, at line 5 } - pow(2, 3) -
    • -
- -There are 2 old contexts now and 1 currently running for `pow(2, 1)`. - -### The exit - -During the execution of `pow(2, 1)`, unlike before, the condition `n == 1` is truthy, so the first branch of `if` works: - -```js -function pow(x, n) { - if (n == 1) { -*!* - return x; -*/!* - } else { - return x * pow(x, n - 1); - } -} -``` - -There are no more nested calls, so the function finishes, returning `2`. - -As the function finishes, its execution context is not needed anymore, so it's removed from the memory. The previous one is restored off the top of the stack: - - -
    -
  • - Context: { x: 2, n: 2, at line 5 } - pow(2, 2) -
    • -
  • - Context: { x: 2, n: 3, at line 5 } - pow(2, 3) -
    • -
- -The execution of `pow(2, 2)` is resumed. It has the result of the subcall `pow(2, 1)`, so it also can finish the evaluation of `x * pow(x, n - 1)`, returning `4`. - -Then the previous context is restored: - -
    -
  • - Context: { x: 2, n: 3, at line 5 } - pow(2, 3) -
    • -
- -When it finishes, we have a result of `pow(2, 3) = 8`. - -The recursion depth in this case was: **3**. - -As we can see from the illustrations above, recursion depth equals the maximal number of context in the stack. - -Note the memory requirements. Contexts take memory. In our case, raising to the power of `n` actually requires the memory for `n` contexts, for all lower values of `n`. - -A loop-based algorithm is more memory-saving: - -```js -function pow(x, n) { - let result = 1; - - for (let i = 0; i < n; i++) { - result *= x; - } - - return result; -} -``` - -The iterative `pow` uses a single context changing `i` and `result` in the process. Its memory requirements are small, fixed and do not depend on `n`. - -**Any recursion can be rewritten as a loop. The loop variant usually can be made more effective.** - -...But sometimes the rewrite is non-trivial, especially when function uses different recursive subcalls depending on conditions and merges their results or when the branching is more intricate. And the optimization may be unneeded and totally not worth the efforts. - -Recursion can give a shorter code, easier to understand and support. Optimizations are not required in every place, mostly we need a good code, that's why it's used. - -## Recursive traversals - -Another great application of the recursion is a recursive traversal. - -Imagine, we have a company. The staff structure can be presented as an object: - -```js -let company = { - sales: [{ - name: 'John', - salary: 1000 - }, { - name: 'Alice', - salary: 1600 - }], - - development: { - sites: [{ - name: 'Peter', - salary: 2000 - }, { - name: 'Alex', - salary: 1800 - }], - - internals: [{ - name: 'Jack', - salary: 1300 - }] - } -}; -``` - -In other words, a company has departments. - -- A department may have an array of staff. For instance, `sales` department has 2 employees: John and Alice. -- Or a department may split into subdepartments, like `development` has two branches: `sites` and `internals`. Each of them has their own staff. -- It is also possible that when a subdepartment grows, it divides into subsubdepartments (or teams). - - For instance, the `sites` department in the future may be split into teams for `siteA` and `siteB`. And they, potentially, can split even more. That's not on the picture, just something to have in mind. - -Now let's say we want a function to get the sum of all salaries. How can we do that? - -An iterative approach is not easy, because the structure is not simple. The first idea may be to make a `for` loop over `company` with nested subloop over 1st level departments. But then we need more nested subloops to iterate over the staff in 2nd level departments like `sites`... And then another subloop inside those for 3rd level departments that might appear in the future? If we put 3-4 nested subloops in the code to traverse a single object, it becomes rather ugly. - -Let's try recursion. - -As we can see, when our function gets a department to sum, there are two possible cases: - -1. Either it's a "simple" department with an *array* of people -- then we can sum the salaries in a simple loop. -2. Or it's *an object* with `N` subdepartments -- then we can make `N` recursive calls to get the sum for each of the subdeps and combine the results. - -The 1st case is the base of recursion, the trivial case, when we get an array. - -The 2nd case when we get an object is the recursive step. A complex task is split into subtasks for smaller departments. They may in turn split again, but sooner or later the split will finish at (1). - -The algorithm is probably even easier to read from the code: - - -```js run -let company = { // the same object, compressed for brevity - sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 1600 }], - development: { - sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }], - internals: [{name: 'Jack', salary: 1300}] - } -}; - -// The function to do the job -*!* -function sumSalaries(department) { - if (Array.isArray(department)) { // case (1) - return department.reduce((prev, current) => prev + current.salary, 0); // sum the array - } else { // case (2) - let sum = 0; - for (let subdep of Object.values(department)) { - sum += sumSalaries(subdep); // recursively call for subdepartments, sum the results - } - return sum; - } -} -*/!* - -alert(sumSalaries(company)); // 7700 -``` - -The code is short and easy to understand (hopefully?). That's the power of recursion. It also works for any level of subdepartment nesting. - -Here's the diagram of calls: - -![recursive salaries](recursive-salaries.svg) - -We can easily see the principle: for an object `{...}` subcalls are made, while arrays `[...]` are the "leaves" of the recursion tree, they give immediate result. - -Note that the code uses smart features that we've covered before: - -- Method `arr.reduce` explained in the chapter to get the sum of the array. -- Loop `for(val of Object.values(obj))` to iterate over object values: `Object.values` returns an array of them. - - -## Recursive structures - -A recursive (recursively-defined) data structure is a structure that replicates itself in parts. - -We've just seen it in the example of a company structure above. - -A company *department* is: -- Either an array of people. -- Or an object with *departments*. - -For web-developers there are much better-known examples: HTML and XML documents. - -In the HTML document, an *HTML-tag* may contain a list of: -- Text pieces. -- HTML-comments. -- Other *HTML-tags* (that in turn may contain text pieces/comments or other tags etc). - -That's once again a recursive definition. - -For better understanding, we'll cover one more recursive structure named "Linked list" that might be a better alternative for arrays in some cases. - -### Linked list - -Imagine, we want to store an ordered list of objects. - -The natural choice would be an array: - -```js -let arr = [obj1, obj2, obj3]; -``` - -...But there's a problem with arrays. The "delete element" and "insert element" operations are expensive. For instance, `arr.unshift(obj)` operation has to renumber all elements to make room for a new `obj`, and if the array is big, it takes time. Same with `arr.shift()`. - -The only structural modifications that do not require mass-renumbering are those that operate with the end of array: `arr.push/pop`. So an array can be quite slow for big queues, when we have to work with the beginning. - -Alternatively, if we really need fast insertion/deletion, we can choose another data structure called a [linked list](https://en.wikipedia.org/wiki/Linked_list). - -The *linked list element* is recursively defined as an object with: -- `value`. -- `next` property referencing the next *linked list element* or `null` if that's the end. - -For instance: - -```js -let list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; -``` - -Graphical representation of the list: - -![linked list](linked-list.svg) - -An alternative code for creation: - -```js no-beautify -let list = { value: 1 }; -list.next = { value: 2 }; -list.next.next = { value: 3 }; -list.next.next.next = { value: 4 }; -list.next.next.next.next = null; -``` - -Here we can even more clearly see that there are multiple objects, each one has the `value` and `next` pointing to the neighbour. The `list` variable is the first object in the chain, so following `next` pointers from it we can reach any element. - -The list can be easily split into multiple parts and later joined back: - -```js -let secondList = list.next.next; -list.next.next = null; -``` - -![linked list split](linked-list-split.svg) - -To join: - -```js -list.next.next = secondList; -``` - -And surely we can insert or remove items in any place. - -For instance, to prepend a new value, we need to update the head of the list: - -```js -let list = { value: 1 }; -list.next = { value: 2 }; -list.next.next = { value: 3 }; -list.next.next.next = { value: 4 }; - -*!* -// prepend the new value to the list -list = { value: "new item", next: list }; -*/!* -``` - -![linked list](linked-list-0.svg) - -To remove a value from the middle, change `next` of the previous one: - -```js -list.next = list.next.next; -``` - -![linked list](linked-list-remove-1.svg) - -We made `list.next` jump over `1` to value `2`. The value `1` is now excluded from the chain. If it's not stored anywhere else, it will be automatically removed from the memory. - -Unlike arrays, there's no mass-renumbering, we can easily rearrange elements. - -Naturally, lists are not always better than arrays. Otherwise everyone would use only lists. - -The main drawback is that we can't easily access an element by its number. In an array that's easy: `arr[n]` is a direct reference. But in the list we need to start from the first item and go `next` `N` times to get the Nth element. - -...But we don't always need such operations. For instance, when we need a queue or even a [deque](https://en.wikipedia.org/wiki/Double-ended_queue) -- the ordered structure that must allow very fast adding/removing elements from both ends, but access to its middle is not needed. - -Lists can be enhanced: -- We can add property `prev` in addition to `next` to reference the previous element, to move back easily. -- We can also add a variable named `tail` referencing the last element of the list (and update it when adding/removing elements from the end). -- ...The data structure may vary according to our needs. - -## Summary - -Terms: -- *Recursion* is a programming term that means calling a function from itself. Recursive functions can be used to solve tasks in elegant ways. - - When a function calls itself, that's called a *recursion step*. The *basis* of recursion is function arguments that make the task so simple that the function does not make further calls. - -- A [recursively-defined](https://en.wikipedia.org/wiki/Recursive_data_type) data structure is a data structure that can be defined using itself. - - For instance, the linked list can be defined as a data structure consisting of an object referencing a list (or null). - - ```js - list = { value, next -> list } - ``` - - Trees like HTML elements tree or the department tree from this chapter are also naturally recursive: they branch and every branch can have other branches. - - Recursive functions can be used to walk them as we've seen in the `sumSalary` example. - -Any recursive function can be rewritten into an iterative one. And that's sometimes required to optimize stuff. But for many tasks a recursive solution is fast enough and easier to write and support. diff --git a/1-js/06-advanced-functions/01-recursion/head.html b/1-js/06-advanced-functions/01-recursion/head.html deleted file mode 100644 index bb7fe8772f..0000000000 --- a/1-js/06-advanced-functions/01-recursion/head.html +++ /dev/null @@ -1,26 +0,0 @@ - diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-0.svg b/1-js/06-advanced-functions/01-recursion/linked-list-0.svg deleted file mode 100644 index f18c6ffb64..0000000000 --- a/1-js/06-advanced-functions/01-recursion/linked-list-0.svg +++ /dev/null @@ -1 +0,0 @@ -value1nextvalue"new item"nextvalue2nextvalue3nextvalue4nextnulllist \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg deleted file mode 100644 index edec239124..0000000000 --- a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg +++ /dev/null @@ -1 +0,0 @@ -value"new item"nextvalue1nextvalue2nextvalue3nextvalue4nextnulllist \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-split.svg b/1-js/06-advanced-functions/01-recursion/linked-list-split.svg deleted file mode 100644 index cba81e648d..0000000000 --- a/1-js/06-advanced-functions/01-recursion/linked-list-split.svg +++ /dev/null @@ -1 +0,0 @@ -value1nextvalue2nextvalue3nextvalue4nextnullnullsecondListlist \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list.svg b/1-js/06-advanced-functions/01-recursion/linked-list.svg deleted file mode 100644 index 63a070fd28..0000000000 --- a/1-js/06-advanced-functions/01-recursion/linked-list.svg +++ /dev/null @@ -1 +0,0 @@ -value1nextvalue2nextvalue3nextvalue4nextnulllist \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/recursion-pow.svg b/1-js/06-advanced-functions/01-recursion/recursion-pow.svg deleted file mode 100644 index 8bd4a43fef..0000000000 --- a/1-js/06-advanced-functions/01-recursion/recursion-pow.svg +++ /dev/null @@ -1 +0,0 @@ -pow(x,n)xx * pow(x, n-1)n == 1 ?YesNorecursive call until n==1 \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg b/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg deleted file mode 100644 index f47f0668bc..0000000000 --- a/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md deleted file mode 100644 index 1f139d7a4a..0000000000 --- a/1-js/06-advanced-functions/02-rest-parameters-spread/article.md +++ /dev/null @@ -1,289 +0,0 @@ -# Rest parameters and spread syntax - -Many JavaScript built-in functions support an arbitrary number of arguments. - -For instance: - -- `Math.max(arg1, arg2, ..., argN)` -- returns the greatest of the arguments. -- `Object.assign(dest, src1, ..., srcN)` -- copies properties from `src1..N` into `dest`. -- ...and so on. - -In this chapter we'll learn how to do the same. And also, how to pass arrays to such functions as parameters. - -## Rest parameters `...` - -A function can be called with any number of arguments, no matter how it is defined. - -Like here: -```js run -function sum(a, b) { - return a + b; -} - -alert( sum(1, 2, 3, 4, 5) ); -``` - -There will be no error because of "excessive" arguments. But of course in the result only the first two will be counted. - -The rest of the parameters can be included in the function definition by using three dots `...` followed by the name of the array that will contain them. The dots literally mean "gather the remaining parameters into an array". - -For instance, to gather all arguments into array `args`: - -```js run -function sumAll(...args) { // args is the name for the array - let sum = 0; - - for (let arg of args) sum += arg; - - return sum; -} - -alert( sumAll(1) ); // 1 -alert( sumAll(1, 2) ); // 3 -alert( sumAll(1, 2, 3) ); // 6 -``` - -We can choose to get the first parameters as variables, and gather only the rest. - -Here the first two arguments go into variables and the rest go into `titles` array: - -```js run -function showName(firstName, lastName, ...titles) { - alert( firstName + ' ' + lastName ); // Julius Caesar - - // the rest go into titles array - // i.e. titles = ["Consul", "Imperator"] - alert( titles[0] ); // Consul - alert( titles[1] ); // Imperator - alert( titles.length ); // 2 -} - -showName("Julius", "Caesar", "Consul", "Imperator"); -``` - -````warn header="The rest parameters must be at the end" -The rest parameters gather all remaining arguments, so the following does not make sense and causes an error: - -```js -function f(arg1, ...rest, arg2) { // arg2 after ...rest ?! - // error -} -``` - -The `...rest` must always be last. -```` - -## The "arguments" variable - -There is also a special array-like object named `arguments` that contains all arguments by their index. - -For instance: - -```js run -function showName() { - alert( arguments.length ); - alert( arguments[0] ); - alert( arguments[1] ); - - // it's iterable - // for(let arg of arguments) alert(arg); -} - -// shows: 2, Julius, Caesar -showName("Julius", "Caesar"); - -// shows: 1, Ilya, undefined (no second argument) -showName("Ilya"); -``` - -In old times, rest parameters did not exist in the language, and using `arguments` was the only way to get all arguments of the function. And it still works, we can find it in the old code. - -But the downside is that although `arguments` is both array-like and iterable, it's not an array. It does not support array methods, so we can't call `arguments.map(...)` for example. - -Also, it always contains all arguments. We can't capture them partially, like we did with rest parameters. - -So when we need these features, then rest parameters are preferred. - -````smart header="Arrow functions do not have `\"arguments\"`" -If we access the `arguments` object from an arrow function, it takes them from the outer "normal" function. - -Here's an example: - -```js run -function f() { - let showArg = () => alert(arguments[0]); - showArg(); -} - -f(1); // 1 -``` - -As we remember, arrow functions don't have their own `this`. Now we know they don't have the special `arguments` object either. -```` - - -## Spread syntax [#spread-syntax] - -We've just seen how to get an array from the list of parameters. - -But sometimes we need to do exactly the reverse. - -For instance, there's a built-in function [Math.max](mdn:js/Math/max) that returns the greatest number from a list: - -```js run -alert( Math.max(3, 5, 1) ); // 5 -``` - -Now let's say we have an array `[3, 5, 1]`. How do we call `Math.max` with it? - -Passing it "as is" won't work, because `Math.max` expects a list of numeric arguments, not a single array: - -```js run -let arr = [3, 5, 1]; - -*!* -alert( Math.max(arr) ); // NaN -*/!* -``` - -And surely we can't manually list items in the code `Math.max(arr[0], arr[1], arr[2])`, because we may be unsure how many there are. As our script executes, there could be a lot, or there could be none. And that would get ugly. - -*Spread syntax* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite. - -When `...arr` is used in the function call, it "expands" an iterable object `arr` into the list of arguments. - -For `Math.max`: - -```js run -let arr = [3, 5, 1]; - -alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments) -``` - -We also can pass multiple iterables this way: - -```js run -let arr1 = [1, -2, 3, 4]; -let arr2 = [8, 3, -8, 1]; - -alert( Math.max(...arr1, ...arr2) ); // 8 -``` - -We can even combine the spread syntax with normal values: - - -```js run -let arr1 = [1, -2, 3, 4]; -let arr2 = [8, 3, -8, 1]; - -alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25 -``` - -Also, the spread syntax can be used to merge arrays: - -```js run -let arr = [3, 5, 1]; -let arr2 = [8, 9, 15]; - -*!* -let merged = [0, ...arr, 2, ...arr2]; -*/!* - -alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2) -``` - -In the examples above we used an array to demonstrate the spread syntax, but any iterable will do. - -For instance, here we use the spread syntax to turn the string into array of characters: - -```js run -let str = "Hello"; - -alert( [...str] ); // H,e,l,l,o -``` - -The spread syntax internally uses iterators to gather elements, the same way as `for..of` does. - -So, for a string, `for..of` returns characters and `...str` becomes `"H","e","l","l","o"`. The list of characters is passed to array initializer `[...str]`. - -For this particular task we could also use `Array.from`, because it converts an iterable (like a string) into an array: - -```js run -let str = "Hello"; - -// Array.from converts an iterable into an array -alert( Array.from(str) ); // H,e,l,l,o -``` - -The result is the same as `[...str]`. - -But there's a subtle difference between `Array.from(obj)` and `[...obj]`: - -- `Array.from` operates on both array-likes and iterables. -- The spread syntax works only with iterables. - -So, for the task of turning something into an array, `Array.from` tends to be more universal. - - -## Get a new copy of an array/object - -Remember when we talked about `Object.assign()` [in the past](info:object-copy#cloning-and-merging-object-assign)? - -It is possible to do the same thing with the spread syntax. - -```js run -let arr = [1, 2, 3]; -let arrCopy = [...arr]; // spread the array into a list of parameters - // then put the result into a new array - -// do the arrays have the same contents? -alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true - -// are the arrays equal? -alert(arr === arrCopy); // false (not same reference) - -// modifying our initial array does not modify the copy: -arr.push(4); -alert(arr); // 1, 2, 3, 4 -alert(arrCopy); // 1, 2, 3 -``` - -Note that it is possible to do the same thing to make a copy of an object: - -```js run -let obj = { a: 1, b: 2, c: 3 }; -let objCopy = { ...obj }; // spread the object into a list of parameters - // then return the result in a new object - -// do the objects have the same contents? -alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true - -// are the objects equal? -alert(obj === objCopy); // false (not same reference) - -// modifying our initial object does not modify the copy: -obj.d = 4; -alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4} -alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3} -``` - -This way of copying an object is much shorter than `let objCopy = Object.assign({}, obj);` or for an array `let arrCopy = Object.assign([], arr);` so we prefer to use it whenever we can. - - -## Summary - -When we see `"..."` in the code, it is either rest parameters or the spread syntax. - -There's an easy way to distinguish between them: - -- When `...` is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array. -- When `...` occurs in a function call or alike, it's called a "spread syntax" and expands an array into a list. - -Use patterns: - -- Rest parameters are used to create functions that accept any number of arguments. -- The spread syntax is used to pass an array to functions that normally require a list of many arguments. - -Together they help to travel between a list and an array of parameters with ease. - -All arguments of a function call are also available in "old-style" `arguments`: array-like iterable object. diff --git a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md deleted file mode 100644 index 7cbd85ab75..0000000000 --- a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md +++ /dev/null @@ -1,5 +0,0 @@ -The answer is: **Pete**. - -A function gets outer variables as they are now, it uses the most recent values. - -Old variable values are not saved anywhere. When a function wants a variable, it takes the current value from its own Lexical Environment or the outer one. diff --git a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md b/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md deleted file mode 100644 index 819189773c..0000000000 --- a/1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Does a function pickup latest changes? - -The function sayHi uses an external variable name. When the function runs, which value is it going to use? - -```js -let name = "John"; - -function sayHi() { - alert("Hi, " + name); -} - -name = "Pete"; - -sayHi(); // what will it show: "John" or "Pete"? -``` - -Such situations are common both in browser and server-side development. A function may be scheduled to execute later than it is created, for instance after a user action or a network request. - -So, the question is: does it pick up the latest changes? diff --git a/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js deleted file mode 100644 index a26578ae1b..0000000000 --- a/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js +++ /dev/null @@ -1,13 +0,0 @@ -function makeArmy() { - - let shooters = []; - - for(let i = 0; i < 10; i++) { - let shooter = function() { // shooter function - alert( i ); // should show its number - }; - shooters.push(shooter); - } - - return shooters; -} diff --git a/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js b/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js deleted file mode 100644 index 7c7aaa1e38..0000000000 --- a/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js +++ /dev/null @@ -1,22 +0,0 @@ -function makeArmy() { - let shooters = []; - - let i = 0; - while (i < 10) { - let shooter = function() { // shooter function - alert( i ); // should show its number - }; - shooters.push(shooter); - i++; - } - - return shooters; -} - -/* -let army = makeArmy(); - -army[0](); // the shooter number 0 shows 10 -army[5](); // and number 5 also outputs 10... -// ... all shooters show 10 instead of their 0, 1, 2, 3... -*/ diff --git a/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js b/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js deleted file mode 100644 index b61e6e4db5..0000000000 --- a/1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js +++ /dev/null @@ -1,25 +0,0 @@ -describe("army", function() { - - let army; - - before(function() { - army = makeArmy(); - window.alert = sinon.stub(window, "alert"); - }); - - it("army[0] shows 0", function() { - army[0](); - assert(alert.calledWith(0)); - }); - - - it("army[5] shows 5", function() { - army[5](); - assert(alert.calledWith(5)); - }); - - after(function() { - window.alert.restore(); - }); - -}); diff --git a/1-js/06-advanced-functions/03-closure/10-make-army/lexenv-makearmy.svg b/1-js/06-advanced-functions/03-closure/10-make-army/lexenv-makearmy.svg deleted file mode 100644 index c0a312ec7f..0000000000 --- a/1-js/06-advanced-functions/03-closure/10-make-army/lexenv-makearmy.svg +++ /dev/null @@ -1 +0,0 @@ -outeri: 0i: 1i: 2i: 10...makeArmy() LexicalEnvironmentfor block LexicalEnvironment \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/10-make-army/solution.md b/1-js/06-advanced-functions/03-closure/10-make-army/solution.md deleted file mode 100644 index 0fb0b4a49a..0000000000 --- a/1-js/06-advanced-functions/03-closure/10-make-army/solution.md +++ /dev/null @@ -1,120 +0,0 @@ - -Let's examine what's done inside `makeArmy`, and the solution will become obvious. - -1. It creates an empty array `shooters`: - - ```js - let shooters = []; - ``` -2. Fills it in the loop via `shooters.push(function...)`. - - Every element is a function, so the resulting array looks like this: - - ```js no-beautify - shooters = [ - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); }, - function () { alert(i); } - ]; - ``` - -3. The array is returned from the function. - -Then, later, the call to `army[5]()` will get the element `army[5]` from the array (it will be a function) and call it. - -Now why all such functions show the same? - -That's because there's no local variable `i` inside `shooter` functions. When such a function is called, it takes `i` from its outer lexical environment. - -What will be the value of `i`? - -If we look at the source: - -```js -function makeArmy() { - ... - let i = 0; - while (i < 10) { - let shooter = function() { // shooter function - alert( i ); // should show its number - }; - ... - } - ... -} -``` - -...We can see that it lives in the lexical environment associated with the current `makeArmy()` run. But when `army[5]()` is called, `makeArmy` has already finished its job, and `i` has the last value: `10` (the end of `while`). - -As a result, all `shooter` functions get from the outer lexical envrironment the same, last value `i=10`. - -We can fix it by moving the variable definition into the loop: - -```js run demo -function makeArmy() { - - let shooters = []; - -*!* - for(let i = 0; i < 10; i++) { -*/!* - let shooter = function() { // shooter function - alert( i ); // should show its number - }; - shooters.push(shooter); - } - - return shooters; -} - -let army = makeArmy(); - -army[0](); // 0 -army[5](); // 5 -``` - -Now it works correctly, because every time the code block in `for (let i=0...) {...}` is executed, a new Lexical Environment is created for it, with the corresponding variable `i`. - -So, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration. That's why now it works. - -![](lexenv-makearmy.svg) - -Here we rewrote `while` into `for`. - -Another trick could be possible, let's see it for better understanding of the subject: - -```js run -function makeArmy() { - let shooters = []; - - let i = 0; - while (i < 10) { -*!* - let j = i; -*/!* - let shooter = function() { // shooter function - alert( *!*j*/!* ); // should show its number - }; - shooters.push(shooter); - i++; - } - - return shooters; -} - -let army = makeArmy(); - -army[0](); // 0 -army[5](); // 5 -``` - -The `while` loop, just like `for`, makes a new Lexical Environment for each run. So here we make sure that it gets the right value for a `shooter`. - -We copy `let j = i`. This makes a loop body local `j` and copies the value of `i` to it. Primitives are copied "by value", so we actually get a complete independent copy of `i`, belonging to the current loop iteration. diff --git a/1-js/06-advanced-functions/03-closure/10-make-army/task.md b/1-js/06-advanced-functions/03-closure/10-make-army/task.md deleted file mode 100644 index 93e64f2d02..0000000000 --- a/1-js/06-advanced-functions/03-closure/10-make-army/task.md +++ /dev/null @@ -1,35 +0,0 @@ -importance: 5 - ---- - -# Army of functions - -The following code creates an array of `shooters`. - -Every function is meant to output its number. But something is wrong... - -```js run -function makeArmy() { - let shooters = []; - - let i = 0; - while (i < 10) { - let shooter = function() { // shooter function - alert( i ); // should show its number - }; - shooters.push(shooter); - i++; - } - - return shooters; -} - -let army = makeArmy(); - -army[0](); // the shooter number 0 shows 10 -army[5](); // and number 5 also outputs 10... -// ... all shooters show 10 instead of their 0, 1, 2, 3... -``` - -Why do all of the shooters show the same value? Fix the code so that they work as intended. - diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/lexenv-nested-work.svg b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/lexenv-nested-work.svg deleted file mode 100644 index 5cdf7f1a47..0000000000 --- a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/lexenv-nested-work.svg +++ /dev/null @@ -1 +0,0 @@ -makeWorker: function name: "John"<empty>outerouterouternullname: "Pete" \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md deleted file mode 100644 index 0a522132fe..0000000000 --- a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md +++ /dev/null @@ -1,9 +0,0 @@ -The answer is: **Pete**. - -The `work()` function in the code below gets `name` from the place of its origin through the outer lexical environment reference: - -![](lexenv-nested-work.svg) - -So, the result is `"Pete"` here. - -But if there were no `let name` in `makeWorker()`, then the search would go outside and take the global variable as we can see from the chain above. In that case the result would be `"John"`. diff --git a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md b/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md deleted file mode 100644 index d12a385c81..0000000000 --- a/1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md +++ /dev/null @@ -1,29 +0,0 @@ -importance: 5 - ---- - -# Which variables are available? - -The function `makeWorker` below makes another function and returns it. That new function can be called from somewhere else. - -Will it have access to the outer variables from its creation place, or the invocation place, or both? - -```js -function makeWorker() { - let name = "Pete"; - - return function() { - alert(name); - }; -} - -let name = "John"; - -// create a function -let work = makeWorker(); - -// call it -work(); // what will it show? -``` - -Which value it will show? "Pete" or "John"? diff --git a/1-js/06-advanced-functions/03-closure/3-counter-independent/solution.md b/1-js/06-advanced-functions/03-closure/3-counter-independent/solution.md deleted file mode 100644 index 25ecbea4cc..0000000000 --- a/1-js/06-advanced-functions/03-closure/3-counter-independent/solution.md +++ /dev/null @@ -1,5 +0,0 @@ -The answer: **0,1.** - -Functions `counter` and `counter2` are created by different invocations of `makeCounter`. - -So they have independent outer Lexical Environments, each one has its own `count`. diff --git a/1-js/06-advanced-functions/03-closure/3-counter-independent/task.md b/1-js/06-advanced-functions/03-closure/3-counter-independent/task.md deleted file mode 100644 index e8c17dd31c..0000000000 --- a/1-js/06-advanced-functions/03-closure/3-counter-independent/task.md +++ /dev/null @@ -1,31 +0,0 @@ -importance: 5 - ---- - -# Are counters independent? - -Here we make two counters: `counter` and `counter2` using the same `makeCounter` function. - -Are they independent? What is the second counter going to show? `0,1` or `2,3` or something else? - -```js -function makeCounter() { - let count = 0; - - return function() { - return count++; - }; -} - -let counter = makeCounter(); -let counter2 = makeCounter(); - -alert( counter() ); // 0 -alert( counter() ); // 1 - -*!* -alert( counter2() ); // ? -alert( counter2() ); // ? -*/!* -``` - diff --git a/1-js/06-advanced-functions/03-closure/4-counter-object-independent/solution.md b/1-js/06-advanced-functions/03-closure/4-counter-object-independent/solution.md deleted file mode 100644 index cd4e641e42..0000000000 --- a/1-js/06-advanced-functions/03-closure/4-counter-object-independent/solution.md +++ /dev/null @@ -1,24 +0,0 @@ - -Surely it will work just fine. - -Both nested functions are created within the same outer Lexical Environment, so they share access to the same `count` variable: - -```js run -function Counter() { - let count = 0; - - this.up = function() { - return ++count; - }; - - this.down = function() { - return --count; - }; -} - -let counter = new Counter(); - -alert( counter.up() ); // 1 -alert( counter.up() ); // 2 -alert( counter.down() ); // 1 -``` diff --git a/1-js/06-advanced-functions/03-closure/4-counter-object-independent/task.md b/1-js/06-advanced-functions/03-closure/4-counter-object-independent/task.md deleted file mode 100644 index d770b0ffc9..0000000000 --- a/1-js/06-advanced-functions/03-closure/4-counter-object-independent/task.md +++ /dev/null @@ -1,29 +0,0 @@ -importance: 5 - ---- - -# Counter object - -Here a counter object is made with the help of the constructor function. - -Will it work? What will it show? - -```js -function Counter() { - let count = 0; - - this.up = function() { - return ++count; - }; - this.down = function() { - return --count; - }; -} - -let counter = new Counter(); - -alert( counter.up() ); // ? -alert( counter.up() ); // ? -alert( counter.down() ); // ? -``` - diff --git a/1-js/06-advanced-functions/03-closure/5-function-in-if/solution.md b/1-js/06-advanced-functions/03-closure/5-function-in-if/solution.md deleted file mode 100644 index e2e7a91b33..0000000000 --- a/1-js/06-advanced-functions/03-closure/5-function-in-if/solution.md +++ /dev/null @@ -1,3 +0,0 @@ -The result is **an error**. - -The function `sayHi` is declared inside the `if`, so it only lives inside it. There is no `sayHi` outside. \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md b/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md deleted file mode 100644 index d02c53b99e..0000000000 --- a/1-js/06-advanced-functions/03-closure/5-function-in-if/task.md +++ /dev/null @@ -1,20 +0,0 @@ - -# Function in if - -Look at the code. What will be the result of the call at the last line? - -```js run -let phrase = "Hello"; - -if (true) { - let user = "John"; - - function sayHi() { - alert(`${phrase}, ${user}`); - } -} - -*!* -sayHi(); -*/!* -``` diff --git a/1-js/06-advanced-functions/03-closure/6-closure-sum/solution.md b/1-js/06-advanced-functions/03-closure/6-closure-sum/solution.md deleted file mode 100644 index a6679cd209..0000000000 --- a/1-js/06-advanced-functions/03-closure/6-closure-sum/solution.md +++ /dev/null @@ -1,17 +0,0 @@ -For the second parentheses to work, the first ones must return a function. - -Like this: - -```js run -function sum(a) { - - return function(b) { - return a + b; // takes "a" from the outer lexical environment - }; - -} - -alert( sum(1)(2) ); // 3 -alert( sum(5)(-1) ); // 4 -``` - diff --git a/1-js/06-advanced-functions/03-closure/6-closure-sum/task.md b/1-js/06-advanced-functions/03-closure/6-closure-sum/task.md deleted file mode 100644 index b45758562e..0000000000 --- a/1-js/06-advanced-functions/03-closure/6-closure-sum/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 4 - ---- - -# Sum with closures - -Write function `sum` that works like this: `sum(a)(b) = a+b`. - -Yes, exactly this way, using double parentheses (not a mistype). - -For instance: - -```js -sum(1)(2) = 3 -sum(5)(-1) = 4 -``` - diff --git a/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md b/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md deleted file mode 100644 index 346e4060a3..0000000000 --- a/1-js/06-advanced-functions/03-closure/7-let-scope/solution.md +++ /dev/null @@ -1,40 +0,0 @@ -The result is: **error**. - -Try running it: - -```js run -let x = 1; - -function func() { -*!* - console.log(x); // ReferenceError: Cannot access 'x' before initialization -*/!* - let x = 2; -} - -func(); -``` - -In this example we can observe the peculiar difference between a "non-existing" and "uninitialized" variable. - -As you may have read in the article [](info:closure), a variable starts in the "uninitialized" state from the moment when the execution enters a code block (or a function). And it stays uninitalized until the corresponding `let` statement. - -In other words, a variable technically exists, but can't be used before `let`. - -The code above demonstrates it. - -```js -function func() { -*!* - // the local variable x is known to the engine from the beginning of the function, - // but "unitialized" (unusable) until let ("dead zone") - // hence the error -*/!* - - console.log(x); // ReferenceError: Cannot access 'x' before initialization - - let x = 2; -} -``` - -This zone of temporary unusability of a variable (from the beginning of the code block till `let`) is sometimes called the "dead zone". diff --git a/1-js/06-advanced-functions/03-closure/7-let-scope/task.md b/1-js/06-advanced-functions/03-closure/7-let-scope/task.md deleted file mode 100644 index fb7445e66a..0000000000 --- a/1-js/06-advanced-functions/03-closure/7-let-scope/task.md +++ /dev/null @@ -1,21 +0,0 @@ -importance: 4 - ---- - -# Is variable visible? - -What will be the result of this code? - -```js -let x = 1; - -function func() { - console.log(x); // ? - - let x = 2; -} - -func(); -``` - -P.S. There's a pitfall in this task. The solution is not obvious. diff --git a/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/solution.js deleted file mode 100644 index 66a149d981..0000000000 --- a/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/solution.js +++ /dev/null @@ -1,8 +0,0 @@ - -function inArray(arr) { - return x => arr.includes(x); -} - -function inBetween(a, b) { - return x => (x >= a && x <= b); -} \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/source.js b/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/source.js deleted file mode 100644 index 74989df28d..0000000000 --- a/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/source.js +++ /dev/null @@ -1,10 +0,0 @@ - -let arr = [1, 2, 3, 4, 5, 6, 7]; - -function inBetween(a, b) { - // ...your code... -} - -function inArray(arr) { - // ...your code... -} diff --git a/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/test.js b/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/test.js deleted file mode 100644 index 86d2d3b48f..0000000000 --- a/1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/test.js +++ /dev/null @@ -1,21 +0,0 @@ - -describe("inArray", function() { - let arr = [1, 2, 3, 4, 5, 6, 7]; - - it("returns the filter for values in array", function() { - - let filter = inArray(arr); - assert.isTrue(filter(5)); - assert.isFalse(filter(0)); - }); -}); - - -describe("inBetween", function() { - - it("returns the filter for values between", function() { - let filter = inBetween(3, 6); - assert.isTrue(filter(5)); - assert.isFalse(filter(0)); - }); -}); diff --git a/1-js/06-advanced-functions/03-closure/8-filter-through-function/solution.md b/1-js/06-advanced-functions/03-closure/8-filter-through-function/solution.md deleted file mode 100644 index 46c5514a8d..0000000000 --- a/1-js/06-advanced-functions/03-closure/8-filter-through-function/solution.md +++ /dev/null @@ -1,26 +0,0 @@ - -# Filter inBetween - -```js run -function inBetween(a, b) { - return function(x) { - return x >= a && x <= b; - }; -} - -let arr = [1, 2, 3, 4, 5, 6, 7]; -alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6 -``` - -# Filter inArray - -```js run demo -function inArray(arr) { - return function(x) { - return arr.includes(x); - }; -} - -let arr = [1, 2, 3, 4, 5, 6, 7]; -alert( arr.filter(inArray([1, 2, 10])) ); // 1,2 -``` diff --git a/1-js/06-advanced-functions/03-closure/8-filter-through-function/task.md b/1-js/06-advanced-functions/03-closure/8-filter-through-function/task.md deleted file mode 100644 index d1c39f949c..0000000000 --- a/1-js/06-advanced-functions/03-closure/8-filter-through-function/task.md +++ /dev/null @@ -1,29 +0,0 @@ -importance: 5 - ---- - -# Filter through function - -We have a built-in method `arr.filter(f)` for arrays. It filters all elements through the function `f`. If it returns `true`, then that element is returned in the resulting array. - -Make a set of "ready to use" filters: - -- `inBetween(a, b)` -- between `a` and `b` or equal to them (inclusively). -- `inArray([...])` -- in the given array. - -The usage must be like this: - -- `arr.filter(inBetween(3,6))` -- selects only values between 3 and 6. -- `arr.filter(inArray([1,2,3]))` -- selects only elements matching with one of the members of `[1,2,3]`. - -For instance: - -```js -/* .. your code for inBetween and inArray */ -let arr = [1, 2, 3, 4, 5, 6, 7]; - -alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6 - -alert( arr.filter(inArray([1, 2, 10])) ); // 1,2 -``` - diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js deleted file mode 100644 index 8a71c869d9..0000000000 --- a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js +++ /dev/null @@ -1,3 +0,0 @@ -function byField(fieldName){ - return (a, b) => a[fieldName] > b[fieldName] ? 1 : -1; -} diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js deleted file mode 100644 index 23b4338340..0000000000 --- a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js +++ /dev/null @@ -1,5 +0,0 @@ -function byField(fieldName){ - - // Your code goes here. - -} diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js b/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js deleted file mode 100644 index e3c335e03a..0000000000 --- a/1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js +++ /dev/null @@ -1,39 +0,0 @@ -describe("byField", function(){ - - let users = [ - { name: "John", age: 20, surname: "Johnson" }, - { name: "Pete", age: 18, surname: "Peterson" }, - { name: "Ann", age: 19, surname: "Hathaway" }, - ]; - - it("sorts users by name", function(){ - let nameSortedKey = [ - { name: "Ann", age: 19, surname: "Hathaway" }, - { name: "John", age: 20, surname: "Johnson"}, - { name: "Pete", age: 18, surname: "Peterson" }, - ]; - let nameSortedAnswer = users.sort(byField("name")); - assert.deepEqual(nameSortedKey, nameSortedAnswer); - }); - - it("sorts users by age", function(){ - let ageSortedKey = [ - { name: "Pete", age: 18, surname: "Peterson" }, - { name: "Ann", age: 19, surname: "Hathaway" }, - { name: "John", age: 20, surname: "Johnson"}, - ]; - let ageSortedAnswer = users.sort(byField("age")); - assert.deepEqual(ageSortedKey, ageSortedKey); - }); - - it("sorts users by surname", function(){ - let surnameSortedKey = [ - { name: "Ann", age: 19, surname: "Hathaway" }, - { name: "John", age: 20, surname: "Johnson"}, - { name: "Pete", age: 18, surname: "Peterson" }, - ]; - let surnameSortedAnswer = users.sort(byField("surname")); - assert.deepEqual(surnameSortedAnswer, surnameSortedKey); - }); - -}); diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md b/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md deleted file mode 100644 index 8b13789179..0000000000 --- a/1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md +++ /dev/null @@ -1 +0,0 @@ - diff --git a/1-js/06-advanced-functions/03-closure/9-sort-by-field/task.md b/1-js/06-advanced-functions/03-closure/9-sort-by-field/task.md deleted file mode 100644 index 08fb5cc343..0000000000 --- a/1-js/06-advanced-functions/03-closure/9-sort-by-field/task.md +++ /dev/null @@ -1,36 +0,0 @@ -importance: 5 - ---- - -# Sort by field - -We've got an array of objects to sort: - -```js -let users = [ - { name: "John", age: 20, surname: "Johnson" }, - { name: "Pete", age: 18, surname: "Peterson" }, - { name: "Ann", age: 19, surname: "Hathaway" } -]; -``` - -The usual way to do that would be: - -```js -// by name (Ann, John, Pete) -users.sort((a, b) => a.name > b.name ? 1 : -1); - -// by age (Pete, Ann, John) -users.sort((a, b) => a.age > b.age ? 1 : -1); -``` - -Can we make it even less verbose, like this? - -```js -users.sort(byField('name')); -users.sort(byField('age')); -``` - -So, instead of writing a function, just put `byField(fieldName)`. - -Write the function `byField` that can be used for that. diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md deleted file mode 100644 index 4d06c9db7f..0000000000 --- a/1-js/06-advanced-functions/03-closure/article.md +++ /dev/null @@ -1,418 +0,0 @@ - -# Variable scope, closure - -JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created at any moment, passed as an argument to another function, and then called from a totally different place of code later. - -We already know that a function can access variables outside of it ("outer" variables). - -But what happens if outer variables change since a function is created? Will the function get newer values or the old ones? - -And what if a function is passed along as a parameter and called from another place of code, will it get access to outer variables at the new place? - -Let's expand our knowledge to understand these scenarios and more complex ones. - -```smart header="We'll talk about `let/const` variables here" -In JavaScript, there are 3 ways to declare a variable: `let`, `const` (the modern ones), and `var` (the remnant of the past). - -- In this article we'll use `let` variables in examples. -- Variables, declared with `const`, behave the same, so this article is about `const` too. -- The old `var` has some notable differences, they will be covered in the article . -``` - -## Code blocks - -If a variable is declared inside a code block `{...}`, it's only visible inside that block. - -For example: - -```js run -{ - // do some job with local variables that should not be seen outside - - let message = "Hello"; // only visible in this block - - alert(message); // Hello -} - -alert(message); // Error: message is not defined -``` - -We can use this to isolate a piece of code that does its own task, with variables that only belong to it: - -```js run -{ - // show message - let message = "Hello"; - alert(message); -} - -{ - // show another message - let message = "Goodbye"; - alert(message); -} -``` - -````smart header="There'd be an error without blocks" -Please note, without separate blocks there would be an error, if we use `let` with the existing variable name: - -```js run -// show message -let message = "Hello"; -alert(message); - -// show another message -*!* -let message = "Goodbye"; // Error: variable already declared -*/!* -alert(message); -``` -```` - -For `if`, `for`, `while` and so on, variables declared in `{...}` are also only visible inside: - -```js run -if (true) { - let phrase = "Hello!"; - - alert(phrase); // Hello! -} - -alert(phrase); // Error, no such variable! -``` - -Here, after `if` finishes, the `alert` below won't see the `phrase`, hence the error. - -That's great, as it allows us to create block-local variables, specific to an `if` branch. - -The similar thing holds true for `for` and `while` loops: - -```js run -for (let i = 0; i < 3; i++) { - // the variable i is only visible inside this for - alert(i); // 0, then 1, then 2 -} - -alert(i); // Error, no such variable -``` - -Visually, `let i` is outside of `{...}`. But the `for` construct is special here: the variable, declared inside it, is considered a part of the block. - -## Nested functions - -A function is called "nested" when it is created inside another function. - -It is easily possible to do this with JavaScript. - -We can use it to organize our code, like this: - -```js -function sayHiBye(firstName, lastName) { - - // helper nested function to use below - function getFullName() { - return firstName + " " + lastName; - } - - alert( "Hello, " + getFullName() ); - alert( "Bye, " + getFullName() ); - -} -``` - -Here the *nested* function `getFullName()` is made for convenience. It can access the outer variables and so can return the full name. Nested functions are quite common in JavaScript. - -What's much more interesting, a nested function can be returned: either as a property of a new object or as a result by itself. It can then be used somewhere else. No matter where, it still has access to the same outer variables. - -Below, `makeCounter` creates the "counter" function that returns the next number on each invocation: - -```js run -function makeCounter() { - let count = 0; - - return function() { - return count++; - }; -} - -let counter = makeCounter(); - -alert( counter() ); // 0 -alert( counter() ); // 1 -alert( counter() ); // 2 -``` - -Despite being simple, slightly modified variants of that code have practical uses, for instance, as a [random number generator](https://en.wikipedia.org/wiki/Pseudorandom_number_generator) to generate random values for automated tests. - -How does this work? If we create multiple counters, will they be independent? What's going on with the variables here? - -Undestanding such things is great for the overall knowledge of JavaScript and beneficial for more complex scenarios. So let's go a bit in-depth. - -## Lexical Environment - -```warn header="Here be dragons!" -The in-depth technical explanation lies ahead. - -As far as I'd like to avoid low-level language details, any understanding without them would be lacking and incomplete, so get ready. -``` - -For clarity, the explanation is split into multiple steps. - -### Step 1. Variables - -In JavaScript, every running function, code block `{...}`, and the script as a whole have an internal (hidden) associated object known as the *Lexical Environment*. - -The Lexical Environment object consists of two parts: - -1. *Environment Record* -- an object that stores all local variables as its properties (and some other information like the value of `this`). -2. A reference to the *outer lexical environment*, the one associated with the outer code. - -**A "variable" is just a property of the special internal object, `Environment Record`. "To get or change a variable" means "to get or change a property of that object".** - -In this simple code without functions, there is only one Lexical Environment: - -![lexical environment](lexical-environment-global.svg) - -This is the so-called *global* Lexical Environment, associated with the whole script. - -On the picture above, the rectangle means Environment Record (variable store) and the arrow means the outer reference. The global Lexical Environment has no outer reference, that's why the arrow points to `null`. - -As the code starts executing and goes on, the Lexical Environment changes. - -Here's a little bit longer code: - -![lexical environment](closure-variable-phrase.svg) - -Rectangles on the right-hand side demonstrate how the global Lexical Environment changes during the execution: - -1. When the script starts, the Lexical Environment is pre-populated with all declared variables. - - Initially, they are in the "Uninitialized" state. That's a special internal state, it means that the engine knows about the variable, but it cannot be referenced until it has been declared with `let`. It's almost the same as if the variable didn't exist. -2. Then `let phrase` definition appears. There's no assignment yet, so its value is `undefined`. We can use the variable from this point forward. -3. `phrase` is assigned a value. -4. `phrase` changes the value. - -Everything looks simple for now, right? - -- A variable is a property of a special internal object, associated with the currently executing block/function/script. -- Working with variables is actually working with the properties of that object. - -```smart header="Lexical Environment is a specification object" -"Lexical Environment" is a specification object: it only exists "theoretically" in the [language specification](https://tc39.es/ecma262/#sec-lexical-environments) to describe how things work. We can't get this object in our code and manipulate it directly. - -JavaScript engines also may optimize it, discard variables that are unused to save memory and perform other internal tricks, as long as the visible behavior remains as described. -``` - -### Step 2. Function Declarations - -A function is also a value, like a variable. - -**The difference is that a Function Declaration is instantly fully initialized.** - -When a Lexical Environment is created, a Function Declaration immediately becomes a ready-to-use function (unlike `let`, that is unusable till the declaration). - -That's why we can use a function, declared as Function Declaration, even before the declaration itself. - -For example, here's the initial state of the global Lexical Environment when we add a function: - -![](closure-function-declaration.svg) - -Naturally, this behavior only applies to Function Declarations, not Function Expressions where we assign a function to a variable, such as `let say = function(name)...`. - -### Step 3. Inner and outer Lexical Environment - -When a function runs, at the beginning of the call, a new Lexical Environment is created automatically to store local variables and parameters of the call. - -For instance, for `say("John")`, it looks like this (the execution is at the line, labelled with an arrow): - - - -![](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. - -So we have two nested Lexical Environments, just like in the example above: - -![](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. - -...But 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. All 3 of them in the code below: - -```js -function f() { - let value = Math.random(); - - return function() { alert(value); }; -} - -// 3 functions in array, every one of them links to Lexical Environment -// from the corresponding f() run -let arr = [f(), f(), f()]; -``` - -A Lexical Environment object dies when it becomes unreachable (just like any other object). In other words, it exists only while there's at least one nested function referencing it. - -In the code below, after the nested function is removed, its enclosing Lexical Environment (and hence the `value`) is cleaned from memory: - -```js -function f() { - let value = 123; - - return function() { - alert(value); - } -} - -let g = f(); // while g function exists, the value stays in memory - -g = null; // ...and now the memory is cleaned up -``` - -### Real-life optimizations - -As we've seen, in theory while a function is alive, all outer variables are also retained. - -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. - -**An important side effect in V8 (Chrome, Opera) is that such variable will become unavailable in debugging.** - -Try running the example below in Chrome with the Developer Tools open. - -When it pauses, in the console type `alert(value)`. - -```js run -function f() { - let value = Math.random(); - - function g() { - debugger; // in console: type alert(value); No such variable! - } - - return g; -} - -let g = f(); -g(); -``` - -As you could see -- there is no such variable! In theory, it should be accessible, but the engine optimized it out. - -That may lead to funny (if not such time-consuming) debugging issues. One of them -- we can see a same-named outer variable instead of the expected one: - -```js run global -let value = "Surprise!"; - -function f() { - let value = "the closest value"; - - function g() { - debugger; // in console: type alert(value); Surprise! - } - - return g; -} - -let g = f(); -g(); -``` - -This feature of V8 is good to know. If you are debugging with Chrome/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 always can check for it by running the examples on this page. 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 deleted file mode 100644 index 97f76e5691..0000000000 --- a/1-js/06-advanced-functions/03-closure/closure-function-declaration.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index b9060bc8a2..0000000000 --- a/1-js/06-advanced-functions/03-closure/closure-makecounter-environment.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 3e4206ca6d..0000000000 --- a/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call-2.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index e1bb8cc8f9..0000000000 --- a/1-js/06-advanced-functions/03-closure/closure-makecounter-nested-call.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 2a1c4a7296..0000000000 --- a/1-js/06-advanced-functions/03-closure/closure-makecounter.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 741c054487..0000000000 --- a/1-js/06-advanced-functions/03-closure/closure-variable-phrase.svg +++ /dev/null @@ -1 +0,0 @@ -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/lexenv-if.svg b/1-js/06-advanced-functions/03-closure/lexenv-if.svg deleted file mode 100644 index b644fe1541..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-if.svg +++ /dev/null @@ -1 +0,0 @@ -phrase: "Hello"outerouternulluser: "John" \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg deleted file mode 100644 index a14df70925..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg +++ /dev/null @@ -1 +0,0 @@ -makeCounter: function[[Environment]]outernull \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg deleted file mode 100644 index 66e5200f8f..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg +++ /dev/null @@ -1 +0,0 @@ -makeCounter: functioncounter: undefinedcount: 0outerouternullglobal LexicalEnvironmentLexicalEnvironment of makeCounter() call \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg deleted file mode 100644 index 28c526c4fe..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg +++ /dev/null @@ -1 +0,0 @@ -makeCounter: functioncounter: undefinedcount: 0outerouternull[[Environment]] \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg deleted file mode 100644 index acc1e8fb98..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg +++ /dev/null @@ -1 +0,0 @@ -makeCounter: functioncounter: functioncount: 0outerouternull[[Environment]] \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg deleted file mode 100644 index cf91c331d9..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg +++ /dev/null @@ -1 +0,0 @@ -makeCounter: functioncounter: functioncount: 0<empty>outerouterouternull[[Environment]] \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg deleted file mode 100644 index def542cebf..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg +++ /dev/null @@ -1 +0,0 @@ -makeCounter: functioncounter: functioncount: 1outerouternull[[Environment]]modified here \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg deleted file mode 100644 index 2e956cbbff..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg +++ /dev/null @@ -1 +0,0 @@ -phrase: "Bye"phrase: "Hello"phrase: undefined<empty>outernullexecution start \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg deleted file mode 100644 index d0f4a8e644..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg +++ /dev/null @@ -1 +0,0 @@ -say: function phrase: "Hello"say: functionouternullexecution start \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg deleted file mode 100644 index 9620f04854..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg +++ /dev/null @@ -1 +0,0 @@ -phrase: "Hello"outernullLexical Environment \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg deleted file mode 100644 index ff0486edea..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg +++ /dev/null @@ -1 +0,0 @@ -say: function phrase: "Hello"name: "John"outerouternull \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg deleted file mode 100644 index abd77fff9a..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg +++ /dev/null @@ -1 +0,0 @@ -say: function phrase: "Hello"name: "John"outerouternullLexical Environment of the call \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-search-order.svg b/1-js/06-advanced-functions/03-closure/lexical-search-order.svg deleted file mode 100644 index 89a9d110a7..0000000000 --- a/1-js/06-advanced-functions/03-closure/lexical-search-order.svg +++ /dev/null @@ -1 +0,0 @@ -123 \ 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 deleted file mode 100644 index 674437196a..0000000000 --- a/1-js/06-advanced-functions/03-closure/variable-scope-lookup.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 1e8bb5baee..0000000000 --- a/1-js/06-advanced-functions/04-var/article.md +++ /dev/null @@ -1,285 +0,0 @@ - -# 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 a new code. -``` - -In the very first chapter about [variables](info:variables), we mentioned three ways of variable declaration: - -1. `let` -2. `const` -3. `var` - -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-wide or global. They are visible through blocks. - -For instance: - -```js run -if (true) { - var test = true; // use "var" instead of "let" -} - -*!* -alert(test); // true, the variable lives after if -*/!* -``` - -As `var` ignores code blocks, we've got a global variable `test`. - -If we used `let test` instead of `var test`, then the variable would only be visible inside `if`: - -```js run -if (true) { - let test = true; // use "let" -} - -*!* -alert(test); // Error: test is not defined -*/!* -``` - -The same thing for loops: `var` cannot be block- or loop-local: - -```js -for (var i = 0; i < 10; i++) { - // ... -} - -*!* -alert(i); // 10, "i" is visible after loop, it's a global variable -*/!* -``` - -If a code block is inside a function, then `var` becomes a function-level variable: - -```js run -function sayHi() { - if (true) { - var phrase = "Hello"; - } - - alert(phrase); // works -} - -sayHi(); -alert(phrase); // Error: phrase is not defined (Check the Developer Console) -``` - -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 - -`var` declarations are processed when the function starts (or script starts for globals). - -In other words, `var` variables are defined from the beginning of the function, no matter where the definition is (assuming that the definition is not in the nested function). - -So this code: - -```js run -function sayHi() { - phrase = "Hello"; - - alert(phrase); - -*!* - var phrase; -*/!* -} -sayHi(); -``` - -...Is technically the same as this (moved `var phrase` above): - -```js run -function sayHi() { -*!* - var phrase; -*/!* - - phrase = "Hello"; - - alert(phrase); -} -sayHi(); -``` - -...Or even as this (remember, code blocks are ignored): - -```js run -function sayHi() { - phrase = "Hello"; // (*) - - *!* - if (false) { - var phrase; - } - */!* - - alert(phrase); -} -sayHi(); -``` - -People also call such behavior "hoisting" (raising), because all `var` are "hoisted" (raised) to the top of the function. - -So in the example above, `if (false)` branch never executes, but that doesn't matter. The `var` inside it is processed in the beginning of the function, so at the moment of `(*)` the variable exists. - -**Declarations are hoisted, but assignments are not.** - -That's best demonstrated with an example: - -```js run -function sayHi() { - alert(phrase); - -*!* - var phrase = "Hello"; -*/!* -} - -sayHi(); -``` - -The line `var phrase = "Hello"` has two actions in it: - -1. Variable declaration `var` -2. Variable assignment `=`. - -The declaration is processed at the start of function execution ("hoisted"), but the assignment always works at the place where it appears. So the code works essentially like this: - -```js run -function sayHi() { -*!* - var phrase; // declaration works at the start... -*/!* - - alert(phrase); // undefined - -*!* - phrase = "Hello"; // ...assignment - when the execution reaches it. -*/!* -} - -sayHi(); -``` - -Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments. - -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 - -As in the past 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() { - - let 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 meets `"function"` in the main code flow, 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 -// Try to declare and immediately call a function -function() { // <-- Error: Function statements require a function name - - let 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. - -## Summary - -There are two main differences of `var` compared to `let/const`: - -1. `var` variables have no block scope, they are visible minimum at the function level. -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. - -These differences make `var` worse than `let` most of the time. Block-level variables is such a great thing. That's why `let` was introduced in the standard long ago, and is now a major way (along with `const`) to declare a variable. diff --git a/1-js/06-advanced-functions/05-global-object/article.md b/1-js/06-advanced-functions/05-global-object/article.md deleted file mode 100644 index 3d195a9780..0000000000 --- a/1-js/06-advanced-functions/05-global-object/article.md +++ /dev/null @@ -1,87 +0,0 @@ - -# Global object - -The global object provides variables and functions that are available anywhere. By default, those that are built into the language or the environment. - -In a browser it is named `window`, for Node.js it is `global`, for other environments it may have another name. - -Recently, `globalThis` was added to the language, as a standardized name for a global object, that should be supported across all environments. In some browsers, namely non-Chromium Edge, `globalThis` is not yet supported, but can be easily polyfilled. - -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. - -All properties of the global object can be accessed directly: - -```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: - -```js run untrusted refresh -var gVar = 5; - -alert(window.gVar); // 5 (became a property of the global object) -``` - -Please don't rely on that! This behavior exists for compatibility reasons. Modern scripts use [JavaScript modules](info:modules) where such thing doesn't happen. - -If we used `let` instead, such thing wouldn't happen: - -```js run untrusted refresh -let gLet = 5; - -alert(window.gLet); // undefined (doesn't become a property of the global object) -``` - -If a value is so important that you'd like to make it available globally, write it directly as a property: - -```js run -*!* -// make current user information global, to let all scripts access it -window.currentUser = { - name: "John" -}; -*/!* - -// somewhere else in code -alert(currentUser.name); // John - -// or, if we have a local variable with the name "currentUser" -// get it from window explicitly (safe!) -alert(window.currentUser.name); // John -``` - -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. - -## Using for polyfills - -We use the global object to test for support of modern language features. - -For instance, test if a built-in `Promise` object exists (it doesn't in really old browsers): -```js run -if (!window.Promise) { - alert("Your browser is really old!"); -} -``` - -If there's none (say, we're in an old browser), we can create "polyfills": add functions that are not supported by the environment, but exist in the modern standard. - -```js run -if (!window.Promise) { - window.Promise = ... // custom implementation of the modern language feature -} -``` - -## Summary - -- The global object holds variables that should be available everywhere. - - 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). -- 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/_js.view/solution.js b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/solution.js deleted file mode 100644 index ce894698d0..0000000000 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/solution.js +++ /dev/null @@ -1,13 +0,0 @@ -function makeCounter() { - let count = 0; - - function counter() { - return count++; - } - - counter.set = value => count = value; - - counter.decrease = () => count--; - - return counter; -} diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js deleted file mode 100644 index 5bf29aa2d6..0000000000 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js +++ /dev/null @@ -1,18 +0,0 @@ -function makeCounter() { - let count = 0; - - // ... your code ... -} - -let counter = makeCounter(); - -alert( counter() ); // 0 -alert( counter() ); // 1 - -counter.set(10); // set the new count - -alert( counter() ); // 10 - -counter.decrease(); // decrease the count by 1 - -alert( counter() ); // 10 (instead of 11) diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js deleted file mode 100644 index 0e613aba7a..0000000000 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js +++ /dev/null @@ -1,41 +0,0 @@ -describe("counter", function() { - - it("increases from call to call", function() { - - let counter = makeCounter(); - - assert.equal( counter(), 0 ); - assert.equal( counter(), 1 ); - assert.equal( counter(), 2 ); - }); - - - describe("counter.set", function() { - it("sets the count", function() { - - let counter = makeCounter(); - - counter.set(10); - - assert.equal( counter(), 10 ); - assert.equal( counter(), 11 ); - }); - }); - - describe("counter.decrease", function() { - it("decreases the count", function() { - - let counter = makeCounter(); - - counter.set(10); - - assert.equal( counter(), 10 ); - - counter.decrease(); - - assert.equal( counter(), 10 ); - - }); - }); - -}); \ No newline at end of file diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md deleted file mode 100644 index e829d96ee6..0000000000 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md +++ /dev/null @@ -1,2 +0,0 @@ - -The solution uses `count` in the local variable, but addition methods are written right into the `counter`. They share the same outer lexical environment and also can access the current `count`. 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 deleted file mode 100644 index a11821d679..0000000000 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 5 - ---- - -# Set and decrease for counter - -Modify the code of `makeCounter()` so that the counter can also decrease and set the number: - -- `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. - -See the sandbox code for the complete usage example. - -P.S. You can use either a closure or the function property to keep the current count. Or write both variants. 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 deleted file mode 100644 index c7d7d734ea..0000000000 --- a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js +++ /dev/null @@ -1,15 +0,0 @@ -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 deleted file mode 100644 index f10dca5dc8..0000000000 --- a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js +++ /dev/null @@ -1,12 +0,0 @@ -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 deleted file mode 100644 index ed567d3306..0000000000 --- a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 5c93269123..0000000000 --- a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md +++ /dev/null @@ -1,55 +0,0 @@ - -1. For the whole thing to work *anyhow*, the result of `sum` must be function. -2. That function must keep in memory the current value between calls. -3. According to the task, the function must become the number when used in `==`. Functions are objects, so the conversion happens as described in the chapter , and we can provide our own method that returns the number. - -Now the code: - -```js run -function sum(a) { - - let currentSum = a; - - function f(b) { - currentSum += b; - return f; - } - - f.toString = function() { - return currentSum; - }; - - return f; -} - -alert( sum(1)(2) ); // 3 -alert( sum(5)(-1)(2) ); // 6 -alert( sum(6)(-1)(-2)(-3) ); // 0 -alert( sum(0)(1)(2)(3)(4)(5) ); // 15 -``` - -Please note that the `sum` function actually works only once. It returns function `f`. - -Then, on each subsequent call, `f` adds its parameter to the sum `currentSum`, and returns itself. - -**There is no recursion in the last line of `f`.** - -Here is what recursion looks like: - -```js -function f(b) { - currentSum += b; - return f(); // <-- recursive call -} -``` - -And in our case, we just return the function, without calling it: - -```js -function f(b) { - currentSum += b; - return f; // <-- does not call itself, returns itself -} -``` - -This `f` will be used in the next call, again return itself, so 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. diff --git a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md b/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md deleted file mode 100644 index dc13f260b9..0000000000 --- a/1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 2 - ---- - -# Sum with an arbitrary amount of brackets - -Write function `sum` that would work like this: - -```js -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 -``` - -P.S. Hint: you may need to setup custom object to primitive conversion for your function. \ No newline at end of file diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md deleted file mode 100644 index ed848c0c59..0000000000 --- a/1-js/06-advanced-functions/06-function-object/article.md +++ /dev/null @@ -1,353 +0,0 @@ - -# Function object, NFE - -As we already know, a function in JavaScript is a value. - -Every value in JavaScript has a type. What type is a function? - -In JavaScript, functions are objects. - -A good way to imagine functions is as callable "action objects". We can not only call them, but also treat them as objects: add/remove properties, pass by reference etc. - - -## The "name" property - -Function objects contain some useable properties. - -For instance, a function's name is accessible as the "name" property: - -```js run -function sayHi() { - alert("Hi"); -} - -alert(sayHi.name); // sayHi -``` - -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!) -``` - -It also works if the assignment is done via a default value: - -```js run -function f(sayHi = function() {}) { - alert(sayHi.name); // sayHi (works!) -} - -f(); -``` - -In the specification, this feature is called a "contextual name". If the function does not provide one, then in an assignment it is figured out from the context. - -Object methods have names too: - -```js run -let user = { - - sayHi() { - // ... - }, - - sayBye: function() { - // ... - } - -} - -alert(user.sayHi.name); // sayHi -alert(user.sayBye.name); // sayBye -``` - -There's no magic though. There are cases when there's no way to figure out the right name. In that case, the name property is empty, like here: - -```js run -// function created inside array -let arr = [function() {}]; - -alert( arr[0].name ); // -// the engine has no way to set up the right name, so there is none -``` - -In practice, however, most functions do have a name. - -## The "length" property - -There is another built-in property "length" that returns the number of function parameters, for instance: - -```js run -function f1(a) {} -function f2(a, b) {} -function many(a, b, ...more) {} - -alert(f1.length); // 1 -alert(f2.length); // 2 -alert(many.length); // 2 -``` - -Here we can see that rest parameters are not counted. - -The `length` property is sometimes used for [introspection](https://en.wikipedia.org/wiki/Type_introspection) in functions that operate on other functions. - -For instance, in the code below the `ask` function accepts a `question` to ask and an arbitrary number of `handler` functions to call. - -Once a user provides their answer, the function calls the handlers. We can pass two kinds of handlers: - -- A zero-argument function, which is only called when the user gives a positive answer. -- A function with arguments, which is called in either case and returns an answer. - -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: - -```js run -function ask(question, ...handlers) { - let isYes = confirm(question); - - for(let handler of handlers) { - if (handler.length == 0) { - if (isYes) handler(); - } else { - handler(isYes); - } - } - -} - -// for positive answer, both handlers are called -// for negative answer, only the second one -ask("Question?", () => alert('You said yes'), result => alert(result)); -``` - -This is a particular case of so-called [polymorphism](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)) -- treating arguments differently depending on their type or, in our case depending on the `length`. The idea does have a use in JavaScript libraries. - -## Custom properties - -We can also add properties of our own. - -Here we add the `counter` property to track the total calls count: - -```js run -function sayHi() { - alert("Hi"); - - *!* - // let's count how many times we run - sayHi.counter++; - */!* -} -sayHi.counter = 0; // initial value - -sayHi(); // Hi -sayHi(); // Hi - -alert( `Called ${sayHi.counter} times` ); // Called 2 times -``` - -```warn header="A property is not a variable" -A property assigned to a function like `sayHi.counter = 0` does *not* define a local variable `counter` inside it. In other words, a property `counter` and a variable `let counter` are two unrelated things. - -We can treat a function as an object, store properties in it, but that has no effect on its execution. Variables are not function properties and vice versa. These are just parallel worlds. -``` - -Function properties can replace closures sometimes. For instance, we can rewrite the counter function example from the chapter to use a function property: - -```js run -function makeCounter() { - // instead of: - // let count = 0 - - function counter() { - return counter.count++; - }; - - counter.count = 0; - - return counter; -} - -let counter = makeCounter(); -alert( counter() ); // 0 -alert( counter() ); // 1 -``` - -The `count` is now stored in the function directly, not in its outer Lexical Environment. - -Is it better or worse than using a closure? - -The main difference is that if the value of `count` lives in an outer variable, then external code is unable to access it. Only nested functions may modify it. And if it's bound to a function, then such a thing is possible: - -```js run -function makeCounter() { - - function counter() { - return counter.count++; - }; - - counter.count = 0; - - return counter; -} - -let counter = makeCounter(); - -*!* -counter.count = 10; -alert( counter() ); // 10 -*/!* -``` - -So the choice of implementation depends on our aims. - -## Named Function Expression - -Named Function Expression, or NFE, is a term for Function Expressions that have a name. - -For instance, let's take an ordinary Function Expression: - -```js -let sayHi = function(who) { - alert(`Hello, ${who}`); -}; -``` - -And add a name to it: - -```js -let sayHi = function *!*func*/!*(who) { - alert(`Hello, ${who}`); -}; -``` - -Did we achieve anything here? What's the purpose of that additional `"func"` name? - -First let's note, that we still have a Function Expression. Adding the name `"func"` after `function` did not make it a Function Declaration, because it is still created as a part of an assignment expression. - -Adding such a name also did not break anything. - -The function is still available as `sayHi()`: - -```js run -let sayHi = function *!*func*/!*(who) { - alert(`Hello, ${who}`); -}; - -sayHi("John"); // Hello, John -``` - -There are two special things about the name `func`, that are the reasons for it: - -1. It allows the function to reference itself internally. -2. It is not visible outside of the function. - -For instance, the function `sayHi` below calls itself again with `"Guest"` if no `who` is provided: - -```js run -let sayHi = function *!*func*/!*(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - func("Guest"); // use func to re-call itself -*/!* - } -}; - -sayHi(); // Hello, Guest - -// But this won't work: -func(); // Error, func is not defined (not visible outside of the function) -``` - -Why do we use `func`? Maybe just use `sayHi` for the nested call? - - -Actually, in most cases we can: - -```js -let sayHi = function(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - sayHi("Guest"); -*/!* - } -}; -``` - -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: - -```js run -let sayHi = function(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - sayHi("Guest"); // Error: sayHi is not a function -*/!* - } -}; - -let welcome = sayHi; -sayHi = null; - -welcome(); // Error, the nested sayHi call doesn't work any more! -``` - -That happens because the function takes `sayHi` from its outer lexical environment. There's no local `sayHi`, so the outer variable is used. And at the moment of the call that outer `sayHi` is `null`. - -The optional name which we can put into the Function Expression is meant to solve exactly these kinds of problems. - -Let's use it to fix our code: - -```js run -let sayHi = function *!*func*/!*(who) { - if (who) { - alert(`Hello, ${who}`); - } else { -*!* - func("Guest"); // Now all fine -*/!* - } -}; - -let welcome = sayHi; -sayHi = null; - -welcome(); // Hello, Guest (nested call works) -``` - -Now it works, because the name `"func"` is function-local. It is not taken from outside (and not visible there). The specification guarantees that it will always reference the current function. - -The outer code still has it's 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. - -Sometimes, when we need a reliable internal name, it's the reason to rewrite a Function Declaration to Named Function Expression form. -``` - -## Summary - -Functions are objects. - -Here we covered their properties: - -- `name` -- the function name. Usually taken from the function definition, but if there's none, JavaScript tries to guess it from the context (e.g. an assignment). -- `length` -- the number of arguments in the function definition. Rest parameters are not counted. - -If the function is declared as a Function Expression (not in the main code flow), and it carries the name, then it is called a Named Function Expression. The name can be used inside to reference itself, for recursive calls or such. - -Also, functions may carry additional properties. Many well-known JavaScript libraries make great use of this feature. - -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 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. - - -So, a function can do a useful job by itself and also carry a bunch of other functionality in properties. diff --git a/1-js/06-advanced-functions/07-new-function/article.md b/1-js/06-advanced-functions/07-new-function/article.md deleted file mode 100644 index 3214ba3769..0000000000 --- a/1-js/06-advanced-functions/07-new-function/article.md +++ /dev/null @@ -1,123 +0,0 @@ - -# The "new Function" syntax - -There's one more way to create a function. It's rarely used, but sometimes there's no alternative. - -## Syntax - -The syntax for creating a function: - -```js -let func = new Function ([arg1, arg2, ...argN], functionBody); -``` - -The function is created with the arguments `arg1...argN` and the given `functionBody`. - -It's easier to understand by looking at an example. Here's a function with two arguments: - -```js run -let sum = new Function('a', 'b', 'return a + b'); - -alert( sum(1, 2) ); // 3 -``` - -And here there's a function without arguments, with only the function body: - -```js run -let sayHi = new Function('alert("Hello")'); - -sayHi(); // Hello -``` - -The major difference from other ways we've seen is that the function is created literally from a string, that is passed at run time. - -All previous declarations required us, programmers, to write the function code in the script. - -But `new Function` allows to turn any string into a function. For example, we can receive a new function from a server and then execute it: - -```js -let str = ... receive the code from a server dynamically ... - -let func = new Function(str); -func(); -``` - -It is used in very specific cases, like when we receive code from a server, or to dynamically compile a function from a template, in complex web-applications. - -## Closure - -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"; - -*!* - let func = new Function('alert(value)'); -*/!* - - return func; -} - -getFunc()(); // error: value is not defined -``` - -Compare it with the regular behavior: - -```js run -function getFunc() { - let value = "test"; - -*!* - let func = function() { alert(value); }; -*/!* - - return func; -} - -getFunc()(); // *!*"test"*/!*, from the Lexical Environment of getFunc -``` - -This special feature of `new Function` looks strange, but appears very useful in practice. - -Imagine that we must create a function from a string. The code of that function is not known at the time of writing the script (that's why we don't use regular functions), but will be known in the process of execution. We may receive it from the server or from another source. - -Our new function needs to interact with the main script. - -What if it could access the outer variables? - -The problem is that before JavaScript is published to production, it's compressed using a *minifier* -- a special program that shrinks code by removing extra comments, spaces and -- what's important, renames local variables into shorter ones. - -For instance, if a function has `let userName`, minifier replaces it `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. - -So if `new Function` had access to outer variables, it would be unable to find renamed `userName`. - -**If `new Function` had access to outer variables, it would have problems with minifiers.** - -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. - -## Summary - -The syntax: - -```js -let func = new Function ([arg1, arg2, ...argN], functionBody); -``` - -For historical reasons, arguments can also be given as a comma-separated list. - -These three declarations mean the same: - -```js -new Function('a', 'b', 'return a + b'); // basic syntax -new Function('a,b', 'return a + b'); // comma-separated -new Function('a , b', 'return a + b'); // comma-separated with spaces -``` - -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. 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 deleted file mode 100644 index b5b1da7a6a..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md +++ /dev/null @@ -1,64 +0,0 @@ - -Using `setInterval`: - -```js run -function printNumbers(from, to) { - let current = from; - - let timerId = setInterval(function() { - alert(current); - if (current == to) { - clearInterval(timerId); - } - current++; - }, 1000); -} - -// usage: -printNumbers(5, 10); -``` - -Using nested `setTimeout`: - - -```js run -function printNumbers(from, to) { - let current = from; - - setTimeout(function go() { - alert(current); - if (current < to) { - setTimeout(go, 1000); - } - current++; - }, 1000); -} - -// usage: -printNumbers(5, 10); -``` - -Note that in both solutions, there is an initial delay before the first output. The function is called after `1000ms` the first time. - -If we also want the function to run immediately, then we can add an additional call on a separate line, like this: - -```js run -function printNumbers(from, to) { - let current = from; - - function go() { - alert(current); - if (current == to) { - clearInterval(timerId); - } - current++; - } - -*!* - go(); -*/!* - let timerId = setInterval(go, 1000); -} - -printNumbers(5, 10); -``` 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 deleted file mode 100644 index 84bb0c39c0..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md +++ /dev/null @@ -1,12 +0,0 @@ -importance: 5 - ---- - -# Output every second - -Write a function `printNumbers(from, to)` that outputs a number every second, starting from `from` and ending with `to`. - -Make two variants of the solution. - -1. Using `setInterval`. -2. Using nested `setTimeout`. diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md b/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md deleted file mode 100644 index e652a3b369..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md +++ /dev/null @@ -1,15 +0,0 @@ - -Any `setTimeout` will run only after the current code has finished. - -The `i` will be the last one: `100000000`. - -```js run -let i = 0; - -setTimeout(() => alert(i), 100); // 100000000 - -// assume that the time to execute this function is >100ms -for(let j = 0; j < 100000000; j++) { - i++; -} -``` diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md b/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md deleted file mode 100644 index 667c8ffa6f..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md +++ /dev/null @@ -1,27 +0,0 @@ -importance: 5 - ---- - -# What will setTimeout show? - -In the code below there's a `setTimeout` call scheduled, then a heavy calculation is run, that takes more than 100ms to finish. - -When will the scheduled function run? - -1. After the loop. -2. Before the loop. -3. In the beginning of the loop. - - -What is `alert` going to show? - -```js -let i = 0; - -setTimeout(() => alert(i), 100); // ? - -// assume that the time to execute this function is >100ms -for(let j = 0; j < 100000000; j++) { - i++; -} -``` diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md deleted file mode 100644 index 95fddea652..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md +++ /dev/null @@ -1,302 +0,0 @@ -# Scheduling: setTimeout and setInterval - -We may decide to execute a function not right now, but at a certain time later. That's called "scheduling a call". - -There are two methods for it: - -- `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. - -These methods are not a part of JavaScript specification. But most environments have the internal scheduler and provide these methods. In particular, they are supported in all browsers and Node.js. - -## setTimeout - -The syntax: - -```js -let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) -``` - -Parameters: - -`func|code` -: Function or a string of code to execute. -Usually, that's a function. For historical reasons, a string of code can be passed, but that's not recommended. - -`delay` -: The delay before run, in milliseconds (1000 ms = 1 second), by default 0. - -`arg1`, `arg2`... -: Arguments for the function (not supported in IE9-) - -For instance, this code calls `sayHi()` after one second: - -```js run -function sayHi() { - alert('Hello'); -} - -*!* -setTimeout(sayHi, 1000); -*/!* -``` - -With arguments: - -```js run -function sayHi(phrase, who) { - alert( phrase + ', ' + who ); -} - -*!* -setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John -*/!* -``` - -If the first argument is a string, then JavaScript creates a function from it. - -So, this will also work: - -```js run no-beautify -setTimeout("alert('Hello')", 1000); -``` - -But using strings is not recommended, use arrow functions instead of them, like this: - -```js run no-beautify -setTimeout(() => alert('Hello'), 1000); -``` - -````smart header="Pass a function, but don't run it" -Novice developers sometimes make a mistake by adding brackets `()` after the function: - -```js -// wrong! -setTimeout(sayHi(), 1000); -``` -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. -```` - -### Canceling with clearTimeout - -A call to `setTimeout` returns a "timer identifier" `timerId` that we can use to cancel the execution. - -The syntax to cancel: - -```js -let timerId = setTimeout(...); -clearTimeout(timerId); -``` - -In the code below, we schedule the function and then cancel it (changed our mind). As a result, nothing happens: - -```js run no-beautify -let timerId = setTimeout(() => alert("never happens"), 1000); -alert(timerId); // timer identifier - -clearTimeout(timerId); -alert(timerId); // same identifier (doesn't become null after canceling) -``` - -As we can see from `alert` output, in a browser the timer identifier is a number. In other environments, this can be something else. For instance, Node.js returns a timer object with additional methods. - -Again, there is no universal specification for these methods, so that's fine. - -For browsers, timers are described in the [timers section](https://www.w3.org/TR/html5/webappapis.html#timers) of HTML5 standard. - -## setInterval - -The `setInterval` method has the same syntax as `setTimeout`: - -```js -let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...) -``` - -All arguments have the same meaning. But unlike `setTimeout` it runs the function not only once, but regularly after the given interval of time. - -To stop further calls, we should call `clearInterval(timerId)`. - -The following example will show the message every 2 seconds. After 5 seconds, the output is stopped: - -```js run -// repeat with the interval of 2 seconds -let timerId = setInterval(() => alert('tick'), 2000); - -// after 5 seconds stop -setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000); -``` - -```smart header="Time goes on while `alert` is shown" -In most browsers, including Chrome and Firefox the internal timer continues "ticking" while showing `alert/confirm/prompt`. - -So if you run the code above and don't dismiss the `alert` window for some time, then in the next `alert` will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds. -``` - -## Nested setTimeout - -There are two ways of running something regularly. - -One is `setInterval`. The other one is a nested `setTimeout`, like this: - -```js -/** instead of: -let timerId = setInterval(() => alert('tick'), 2000); -*/ - -let timerId = setTimeout(function tick() { - alert('tick'); -*!* - timerId = setTimeout(tick, 2000); // (*) -*/!* -}, 2000); -``` - -The `setTimeout` above schedules the next call right at the end of the current one `(*)`. - -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. - -For instance, we need to write a service that sends a request to the server every 5 seconds asking for data, but in case the server is overloaded, it should increase the interval to 10, 20, 40 seconds... - -Here's the pseudocode: -```js -let delay = 5000; - -let timerId = setTimeout(function request() { - ...send request... - - if (request failed due to server overload) { - // increase the interval to the next run - delay *= 2; - } - - timerId = setTimeout(request, delay); - -}, delay); -``` - - -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`.** - -Let's compare two code fragments. The first one uses `setInterval`: - -```js -let i = 1; -setInterval(function() { - func(i++); -}, 100); -``` - -The second one uses nested `setTimeout`: - -```js -let i = 1; -setTimeout(function run() { - func(i++); - setTimeout(run, 100); -}, 100); -``` - -For `setInterval` the internal scheduler will run `func(i++)` every 100ms: - -![](setinterval-interval.svg) - -Did you notice? - -**The real delay between `func` calls for `setInterval` is less than in the code!** - -That's normal, because the time taken by `func`'s execution "consumes" a part of the interval. - -It is possible that `func`'s execution turns out to be longer than we expected and takes more than 100ms. - -In this case the engine waits for `func` to complete, then checks the scheduler and if the time is up, runs it again *immediately*. - -In the edge case, if the function always executes longer than `delay` ms, then the calls will happen without a pause at all. - -And here is the picture for the nested `setTimeout`: - -![](settimeout-interval.svg) - -**The nested `setTimeout` guarantees the fixed delay (here 100ms).** - -That's because a new call is planned at the end of the previous one. - -````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. - -```js -// the function stays in memory until the scheduler calls it -setTimeout(function() {...}, 100); -``` - -For `setInterval` the function stays in memory until `clearInterval` is called. - -There's a side-effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don't need the scheduled function anymore, it's better to cancel it, even if it's very small. -```` - -## Zero delay setTimeout - -There's a special use case: `setTimeout(func, 0)`, or just `setTimeout(func)`. - -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. - -For instance, this outputs "Hello", then immediately "World": - -```js run -setTimeout(() => alert("World")); - -alert("Hello"); -``` - -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: - -```js run -let start = Date.now(); -let times = []; - -setTimeout(function run() { - times.push(Date.now() - start); // remember delay from the previous call - - if (start + 100 < Date.now()) alert(times); // show the delays after 100ms - else setTimeout(run); // else re-schedule -}); - -// an example of the output: -// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100 -``` - -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. - -That limitation comes from ancient times and many scripts rely on it, so it exists for historical reasons. - -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) 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 call 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. - -For example, the in-browser timer may slow down for a lot of reasons: -- The CPU is overloaded. -- The browser tab is in the background mode. -- The laptop is on battery. - -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. diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg deleted file mode 100644 index 9a214c548f..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg +++ /dev/null @@ -1 +0,0 @@ -func(1)func(2)func(3)100200300 \ No newline at end of file diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg deleted file mode 100644 index a559f6163a..0000000000 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg +++ /dev/null @@ -1 +0,0 @@ -func(1)func(2)func(3)100100 \ No newline at end of file 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 deleted file mode 100644 index d5a09efb36..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js +++ /dev/null @@ -1,12 +0,0 @@ -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, args); - } - - wrapper.calls = []; - - return wrapper; -} diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js deleted file mode 100644 index 38da0105f2..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js +++ /dev/null @@ -1,5 +0,0 @@ -function spy(func) { - // your code -} - - diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js deleted file mode 100644 index 5adfcb9787..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js +++ /dev/null @@ -1,44 +0,0 @@ -describe("spy", function() { - it("records calls into its property", function() { - function work() {} - - work = spy(work); - assert.deepEqual(work.calls, []); - - work(1, 2); - assert.deepEqual(work.calls, [ - [1, 2] - ]); - - work(3, 4); - assert.deepEqual(work.calls, [ - [1, 2], - [3, 4] - ]); - }); - - it("transparently wraps functions", function() { - - let sum = sinon.spy((a, b) => a + b); - - let wrappedSum = spy(sum); - - assert.equal(wrappedSum(1, 2), 3); - assert(sum.calledWith(1, 2)); - }); - - - it("transparently wraps methods", function() { - - let calc = { - sum: sinon.spy((a, b) => a + b) - }; - - calc.wrappedSum = spy(calc.sum); - - assert.equal(calc.wrappedSum(1, 2), 3); - assert(calc.sum.calledWith(1, 2)); - assert(calc.sum.calledOn(calc)); - }); - -}); 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 deleted file mode 100644 index 0c8a211b49..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md +++ /dev/null @@ -1 +0,0 @@ -The wrapper returned by `spy(f)` should store all arguments and then use `f.apply` to forward the call. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md deleted file mode 100644 index a3843107c9..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md +++ /dev/null @@ -1,30 +0,0 @@ -importance: 5 - ---- - -# Spy decorator - -Create a decorator `spy(func)` that should return a wrapper that saves all calls to function in its `calls` property. - -Every call is saved as an array of arguments. - -For instance: - -```js -function work(a, b) { - alert( a + b ); // work is an arbitrary function or method -} - -*!* -work = spy(work); -*/!* - -work(1, 2); // 3 -work(4, 5); // 9 - -for (let args of work.calls) { - alert( 'call:' + args.join() ); // "call:1,2", "call:4,5" -} -``` - -P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js deleted file mode 100644 index 127cff9888..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js +++ /dev/null @@ -1,7 +0,0 @@ -function delay(f, ms) { - - return function() { - setTimeout(() => f.apply(this, arguments), ms); - }; - -}; \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js deleted file mode 100644 index d9295da51d..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js +++ /dev/null @@ -1,46 +0,0 @@ -describe("delay", function() { - before(function() { - this.clock = sinon.useFakeTimers(); - }); - - after(function() { - this.clock.restore(); - }); - - it("calls the function after the specified timeout", function() { - let start = Date.now(); - - function f(x) { - assert.equal(Date.now() - start, 1000); - } - f = sinon.spy(f); - - let f1000 = delay(f, 1000); - f1000("test"); - this.clock.tick(2000); - assert(f.calledOnce, 'calledOnce check fails'); - }); - - it("passes arguments and this", function() { - let start = Date.now(); - let user = { - sayHi: function(phrase, who) { - assert.equal(this, user); - assert.equal(phrase, "Hello"); - assert.equal(who, "John"); - assert.equal(Date.now() - start, 1500); - } - }; - - user.sayHi = sinon.spy(user.sayHi); - - let spy = user.sayHi; - user.sayHi = delay(user.sayHi, 1500); - - user.sayHi("Hello", "John"); - - this.clock.tick(2000); - - assert(spy.calledOnce, 'calledOnce check failed'); - }); -}); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md deleted file mode 100644 index 24bb4d4484..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ /dev/null @@ -1,34 +0,0 @@ -The solution: - -```js run demo -function delay(f, ms) { - - return function() { - setTimeout(() => f.apply(this, arguments), ms); - }; - -} - -let f1000 = delay(alert, 1000); - -f1000("test"); // shows "test" after 1000ms -``` - -Please note how an arrow function is used here. As we know, arrow functions do not have own `this` and `arguments`, so `f.apply(this, arguments)` takes `this` and `arguments` from the wrapper. - -If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (assuming we're in the browser). - -We still can pass the right `this` by using an intermediate variable, but that's a little bit more cumbersome: - -```js -function delay(f, ms) { - - return function(...args) { - let savedThis = this; // store this into an intermediate variable - setTimeout(function() { - f.apply(savedThis, args); // use it here - }, ms); - }; - -} -``` diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md deleted file mode 100644 index c04c68d7ef..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ /dev/null @@ -1,26 +0,0 @@ -importance: 5 - ---- - -# Delaying decorator - -Create a decorator `delay(f, ms)` that delays each call of `f` by `ms` milliseconds. - -For instance: - -```js -function f(x) { - alert(x); -} - -// create wrappers -let f1000 = delay(f, 1000); -let f1500 = delay(f, 1500); - -f1000("test"); // shows "test" after 1000ms -f1500("test"); // shows "test" after 1500ms -``` - -In other words, `delay(f, ms)` returns a "delayed by `ms`" variant of `f`. - -In the code above, `f` is a function of a single argument, but your solution should pass all arguments and the context `this`. 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 deleted file mode 100644 index 661dd0cf41..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js +++ /dev/null @@ -1,7 +0,0 @@ -function debounce(func, ms) { - let timeout; - return function() { - clearTimeout(timeout); - timeout = setTimeout(() => func.apply(this, arguments), ms); - }; -} 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 deleted file mode 100644 index 750e649f83..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ /dev/null @@ -1,48 +0,0 @@ -describe('debounce', function () { - before(function () { - this.clock = sinon.useFakeTimers(); - }); - - after(function () { - this.clock.restore(); - }); - - it('for one call - runs it after given ms', function () { - const f = sinon.spy(); - const debounced = debounce(f, 1000); - - debounced('test'); - assert(f.notCalled, 'not called immediately'); - this.clock.tick(1000); - assert(f.calledOnceWith('test'), 'called after 1000ms'); - }); - - it('for 3 calls - runs the last one after given ms', function () { - const f = sinon.spy(); - const debounced = debounce(f, 1000); - - 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'); - - this.clock.tick(500); - - assert(f.calledOnceWith('c'), 'called after 1500ms'); - }); - - it('keeps the context of the call', function () { - let obj = { - f() { - assert.equal(this, obj); - }, - }; - - obj.f = debounce(obj.f, 1000); - obj.f('test'); - this.clock.tick(5000); - }); - -}); 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 deleted file mode 100644 index 5896a5fa42..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index e3b4d5842f..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - -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 deleted file mode 100644 index 83e75f3158..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -```js demo -function debounce(func, ms) { - let timeout; - return function() { - clearTimeout(timeout); - timeout = setTimeout(() => func.apply(this, arguments), ms); - }; -} - -``` - -A call to `debounce` returns a wrapper. When called, it schedules the original function call after given `ms` and cancels the previous such timeout. - 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 deleted file mode 100644 index 550bf52da2..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ /dev/null @@ -1,51 +0,0 @@ -importance: 5 - ---- - -# Debounce decorator - -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. - -For instance, we had a function `f` and replaced it with `f = debounce(f, 1000)`. - -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. - -![](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="http://github.com/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 :) \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js deleted file mode 100644 index 8071be9d48..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ /dev/null @@ -1,34 +0,0 @@ -function throttle(func, ms) { - - let isThrottled = false, - savedArgs, - savedThis; - - function wrapper() { - - if (isThrottled) { - // memo last arguments to call after the cooldown - savedArgs = arguments; - savedThis = this; - return; - } - - // otherwise go to cooldown state - func.apply(this, arguments); - - isThrottled = true; - - // plan to reset isThrottled after the delay - setTimeout(function() { - isThrottled = false; - if (savedArgs) { - // if there were calls, savedThis/savedArgs have the last one - // recursive call runs the function and sets cooldown again - wrapper.apply(savedThis, savedArgs); - savedArgs = savedThis = null; - } - }, ms); - } - - return wrapper; -} \ No newline at end of file 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 deleted file mode 100644 index e671438f6f..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ /dev/null @@ -1,63 +0,0 @@ -describe("throttle(f, 1000)", function() { - let f1000; - let log = ""; - - function f(a) { - log += a; - } - - before(function() { - this.clock = sinon.useFakeTimers(); - f1000 = throttle(f, 1000); - }); - - it("the first call runs now", function() { - f1000(1); // runs now - assert.equal(log, "1"); - }); - - it("then calls are ignored till 1000ms when the last call works", function() { - f1000(2); // (throttling - less than 1000ms since the last run) - f1000(3); // (throttling - less than 1000ms since the last run) - // after 1000 ms f(3) call is scheduled - - assert.equal(log, "1"); // right now only the 1st call done - - this.clock.tick(1000); // after 1000ms... - assert.equal(log, "13"); // log==13, the call to f1000(3) is made - }); - - it("the third call waits 1000ms after the second call", function() { - this.clock.tick(100); - f1000(4); // (throttling - less than 1000ms since the last run) - this.clock.tick(100); - f1000(5); // (throttling - less than 1000ms since the last run) - this.clock.tick(700); - f1000(6); // (throttling - less than 1000ms since the last run) - - this.clock.tick(100); // now 100 + 100 + 700 + 100 = 1000ms passed - - assert.equal(log, "136"); // the last call was f(6) - }); - - after(function() { - this.clock.restore(); - }); - -}); - -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); - }); - -}); 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 deleted file mode 100644 index cf851f771f..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ /dev/null @@ -1,39 +0,0 @@ -```js demo -function throttle(func, ms) { - - let isThrottled = false, - savedArgs, - savedThis; - - function wrapper() { - - if (isThrottled) { // (2) - savedArgs = arguments; - savedThis = this; - return; - } - - func.apply(this, arguments); // (1) - - isThrottled = true; - - setTimeout(function() { - isThrottled = false; // (3) - if (savedArgs) { - wrapper.apply(savedThis, savedArgs); - savedArgs = savedThis = null; - } - }, ms); - } - - return wrapper; -} -``` - -A call to `throttle(func, ms)` returns `wrapper`. - -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. 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 deleted file mode 100644 index 0ab09e640c..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ /dev/null @@ -1,51 +0,0 @@ -importance: 5 - ---- - -# Throttle decorator - -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. - -Let's check the real-life application to better understand that requirement and to see where it comes from. - -**For instance, we want to track mouse movements.** - -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. - -Visually, it will look like this: - -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. - -A code example: - -```js -function f(a) { - console.log(a); -} - -// f1000 passes calls to f at maximum once per 1000 ms -let f1000 = throttle(f, 1000); - -f1000(1); // shows 1 -f1000(2); // (throttling, 1000ms not out yet) -f1000(3); // (throttling, 1000ms not out yet) - -// when 1000 ms time out... -// ...outputs 3, intermediate value 2 was ignored -``` - -P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`. 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 deleted file mode 100644 index d0dda4df12..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ /dev/null @@ -1,426 +0,0 @@ -# Decorators and forwarding, call/apply - -JavaScript gives exceptional flexibility when dealing with functions. They can be passed around, used as objects, and now we'll see how to *forward* calls between them and *decorate* them. - -## Transparent caching - -Let's say we have a function `slow(x)` which is CPU-heavy, but its results are stable. In other words, for the same `x` it always returns the same result. - -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. - -Here's the code, and explanations follow: - -```js run -function slow(x) { - // there can be a heavy CPU-intensive job here - alert(`Called with ${x}`); - return x; -} - -function cachingDecorator(func) { - let cache = new Map(); - - return function(x) { - 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 - return result; - }; -} - -slow = cachingDecorator(slow); - -alert( slow(1) ); // slow(1) is cached -alert( "Again: " + slow(1) ); // the same - -alert( slow(2) ); // slow(2) is cached -alert( "Again: " + slow(2) ); // the same as the previous line -``` - -In the code above `cachingDecorator` is a *decorator*: a special function that takes another function and alters its behavior. - -The idea is that we can call `cachingDecorator` for any function, and it will return the caching wrapper. That's great, because we can have many functions that could use such a feature, and all we need to do is to apply `cachingDecorator` to them. - -By separating caching from the main function code we also keep the main code simpler. - -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. - -To summarize, there are several benefits of using a separate `cachingDecorator` instead of altering the code of `slow` itself: - -- 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 - -The caching decorator mentioned above is not suited to work with object methods. - -For instance, in the code below `worker.slow()` stops working after the decoration: - -```js run -// we'll make worker.slow caching -let worker = { - someMethod() { - return 1; - }, - - slow(x) { - // scary CPU-heavy task here - alert("Called with " + x); - return x * this.someMethod(); // (*) - } -}; - -// same code as before -function cachingDecorator(func) { - let cache = new Map(); - return function(x) { - if (cache.has(x)) { - return cache.get(x); - } -*!* - let result = func(x); // (**) -*/!* - cache.set(x, result); - return result; - }; -} - -alert( worker.slow(1) ); // the original method works - -worker.slow = cachingDecorator(worker.slow); // now make it caching - -*!* -alert( worker.slow(2) ); // Whoops! Error: Cannot read property 'someMethod' of undefined -*/!* -``` - -The error occurs in the line `(*)` that tries to access `this.someMethod` and fails. Can you see why? - -The reason is that the wrapper calls the original function as `func(x)` in the line `(**)`. And, when called like that, the function gets `this = undefined`. - -We would observe a similar symptom if we tried to run: - -```js -let func = worker.slow; -func(2); -``` - -So, the wrapper passes the call to the original method, but without the context `this`. Hence the error. - -Let's fix it. - -There's a special built-in function method [func.call(context, ...args)](mdn:js/Function/call) that allows to call a function explicitly setting `this`. - -The syntax is: - -```js -func.call(context, arg1, arg2, ...) -``` - -It runs `func` providing the first argument as `this`, and the next as the arguments. - -To put it simply, these two calls do almost the same: -```js -func(1, 2, 3); -func.call(obj, 1, 2, 3) -``` - -They both call `func` with arguments `1`, `2` and `3`. The only difference is that `func.call` also sets `this` to `obj`. - -As an example, in the code below we call `sayHi` in the context of different objects: `sayHi.call(user)` runs `sayHi` providing `this=user`, and the next line sets `this=admin`: - -```js run -function sayHi() { - alert(this.name); -} - -let user = { name: "John" }; -let admin = { name: "Admin" }; - -// use call to pass different objects as "this" -sayHi.call( user ); // John -sayHi.call( admin ); // Admin -``` - -And here we use `call` to call `say` with the given context and phrase: - - -```js run -function say(phrase) { - alert(this.name + ': ' + phrase); -} - -let user = { name: "John" }; - -// user becomes this, and "Hello" becomes the first argument -say.call( user, "Hello" ); // John: Hello -``` - -In our case, we can use `call` in the wrapper to pass the context to the original function: - -```js run -let worker = { - someMethod() { - return 1; - }, - - slow(x) { - alert("Called with " + x); - return x * this.someMethod(); // (*) - } -}; - -function cachingDecorator(func) { - let cache = new Map(); - return function(x) { - if (cache.has(x)) { - return cache.get(x); - } -*!* - let result = func.call(this, x); // "this" is passed correctly now -*/!* - cache.set(x, result); - return result; - }; -} - -worker.slow = cachingDecorator(worker.slow); // now make it caching - -alert( worker.slow(2) ); // works -alert( worker.slow(2) ); // works, doesn't call the original (cached) -``` - -Now everything is fine. - -To make it all clear, let's see more deeply how `this` is passed along: - -1. After the decoration `worker.slow` is now the wrapper `function (x) { ... }`. -2. So when `worker.slow(2)` is executed, the wrapper gets `2` as an argument and `this=worker` (it's the object before dot). -3. Inside the wrapper, assuming the result is not yet cached, `func.call(this, x)` passes the current `this` (`=worker`) and the current argument (`=2`) to the original method. - -## Going multi-argument - -Now let's make `cachingDecorator` even more universal. Till now it was working only with single-argument functions. - -Now how to cache the multi-argument `worker.slow` method? - -```js -let worker = { - slow(min, max) { - return min + max; // scary CPU-hogger is assumed - } -}; - -// should remember same-argument calls -worker.slow = cachingDecorator(worker.slow); -``` - -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. - -There are many solutions possible: - -1. Implement a new (or use a third-party) map-like data structure that is more versatile and allows multi-keys. -2. Use nested maps: `cache.set(min)` will be a `Map` that stores the pair `(max, result)`. So we can get `result` as `cache.get(min).get(max)`. -3. Join two values into one. In our particular case we can just use a string `"min,max"` as the `Map` key. For flexibility, we can allow to provide a *hashing function* for the decorator, that knows how to make one value from many. - -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`: - -```js run -let worker = { - slow(min, max) { - alert(`Called with ${min},${max}`); - return min + max; - } -}; - -function cachingDecorator(func, hash) { - let cache = new Map(); - return function() { -*!* - let key = hash(arguments); // (*) -*/!* - if (cache.has(key)) { - return cache.get(key); - } - -*!* - let result = func.call(this, ...arguments); // (**) -*/!* - - cache.set(key, result); - return result; - }; -} - -function hash(args) { - return args[0] + ',' + args[1]; -} - -worker.slow = cachingDecorator(worker.slow, hash); - -alert( worker.slow(3, 5) ); // works -alert( "Again " + worker.slow(3, 5) ); // same (cached) -``` - -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); // pass an array as list with spread syntax -func.apply(context, args); // is same as using call -``` - -There's only a subtle difference: - -- The spread syntax `...` allows to pass *iterable* `args` as the list to `call`. -- The `apply` accepts only *array-like* `args`. - -So, where we expect an iterable, `call` works, and where we expect an array-like, `apply` works. - -And for objects that are both iterable and array-like, like 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`. - -## Borrowing a method [#method-borrowing] - -Now let's make one more minor improvement in the hashing function: - -```js -function hash(args) { - return args[0] + ',' + args[1]; -} -``` - -As of now, it works only on two arguments. It would be better if it could glue any number of `args`. - -The natural solution would be to use [arr.join](mdn:js/Array/join) method: - -```js -function hash(args) { - return args.join(); -} -``` - -...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: - -```js run -function hash() { -*!* - alert( arguments.join() ); // Error: arguments.join is not a function -*/!* -} - -hash(1, 2); -``` - -Still, there's an easy way to use array join: - -```js run -function hash() { -*!* - alert( [].join.call(arguments) ); // 1,2 -*/!* -} - -hash(1, 2); -``` - -The trick is called *method borrowing*. - -We take (borrow) a join method from a regular array (`[].join`) and use `[].join.call` to run it in the context of `arguments`. - -Why does it work? - -That's because the internal algorithm of the native method `arr.join(glue)` is very simple. - -Taken from the specification almost "as-is": - -1. Let `glue` be the first argument or, if no arguments, then a comma `","`. -2. Let `result` be an empty string. -3. Append `this[0]` to `result`. -4. Append `glue` and `this[1]`. -5. Append `glue` and `this[2]`. -6. ...Do so until `this.length` items are glued. -7. Return `result`. - -So, technically it takes `this` and joins `this[0]`, `this[1]` ...etc together. It's intentionally written in a way that allows any array-like `this` (not a coincidence, many methods follow this practice). That's why it also works with `this=arguments`. - -## 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 - -*Decorator* is a wrapper around a function that alters its behavior. The main job is still carried out by the function. - -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! - -To implement `cachingDecorator`, we studied methods: - -- [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- calls `func` with given context and arguments. -- [func.apply(context, args)](mdn:js/Function/apply) -- calls `func` passing `context` as `this` and array-like `args` into a list of arguments. - -The generic *call forwarding* is usually done with `apply`: - -```js -let wrapper = function() { - return original.apply(this, arguments); -}; -``` - -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. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg deleted file mode 100644 index 258fcfdfc7..0000000000 --- a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg +++ /dev/null @@ -1 +0,0 @@ -wrapperaround the function \ No newline at end of file diff --git a/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md b/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md deleted file mode 100644 index 737a14481f..0000000000 --- a/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md +++ /dev/null @@ -1,18 +0,0 @@ -The answer: `null`. - - -```js run -function f() { - alert( this ); // null -} - -let user = { - g: f.bind(null) -}; - -user.g(); -``` - -The context of a bound function is hard-fixed. There's just no way to further change it. - -So even while we run `user.g()`, the original function is called with `this=null`. diff --git a/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md b/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md deleted file mode 100644 index 6d7e1fb245..0000000000 --- a/1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 5 - ---- - -# Bound function as a method - -What will be the output? - -```js -function f() { - alert( this ); // ? -} - -let user = { - g: f.bind(null) -}; - -user.g(); -``` - diff --git a/1-js/06-advanced-functions/10-bind/3-second-bind/solution.md b/1-js/06-advanced-functions/10-bind/3-second-bind/solution.md deleted file mode 100644 index 97e1c28098..0000000000 --- a/1-js/06-advanced-functions/10-bind/3-second-bind/solution.md +++ /dev/null @@ -1,15 +0,0 @@ -The answer: **John**. - -```js run no-beautify -function f() { - alert(this.name); -} - -f = f.bind( {name: "John"} ).bind( {name: "Pete"} ); - -f(); // John -``` - -The exotic [bound function](https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects) object returned by `f.bind(...)` remembers the context (and arguments if provided) only at creation time. - -A function cannot be re-bound. diff --git a/1-js/06-advanced-functions/10-bind/3-second-bind/task.md b/1-js/06-advanced-functions/10-bind/3-second-bind/task.md deleted file mode 100644 index 5daf053c65..0000000000 --- a/1-js/06-advanced-functions/10-bind/3-second-bind/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 5 - ---- - -# Second bind - -Can we change `this` by additional binding? - -What will be the output? - -```js no-beautify -function f() { - alert(this.name); -} - -f = f.bind( {name: "John"} ).bind( {name: "Ann" } ); - -f(); -``` - diff --git a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md b/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md deleted file mode 100644 index 181555d95f..0000000000 --- a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md +++ /dev/null @@ -1,4 +0,0 @@ -The answer: `undefined`. - -The result of `bind` is another object. It does not have the `test` property. - 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 deleted file mode 100644 index d6cfb44bf8..0000000000 --- a/1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Function property after bind - -There's a value in the property of a function. Will it change after `bind`? Why, or why not? - -```js run -function sayHi() { - alert( this.name ); -} -sayHi.test = 5; - -*!* -let bound = sayHi.bind({ - name: "John" -}); - -alert( bound.test ); // what will be the output? why? -*/!* -``` - diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md deleted file mode 100644 index 403107ca68..0000000000 --- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md +++ /dev/null @@ -1,43 +0,0 @@ - -The error occurs because `ask` gets functions `loginOk/loginFail` without the object. - -When it calls them, they naturally assume `this=undefined`. - -Let's `bind` the context: - -```js run -function askPassword(ok, fail) { - let password = prompt("Password?", ''); - if (password == "rockstar") ok(); - else fail(); -} - -let user = { - name: 'John', - - loginOk() { - alert(`${this.name} logged in`); - }, - - loginFail() { - alert(`${this.name} failed to log in`); - }, - -}; - -*!* -askPassword(user.loginOk.bind(user), user.loginFail.bind(user)); -*/!* -``` - -Now it works. - -An alternative solution could be: -```js -//... -askPassword(() => user.loginOk(), () => user.loginFail()); -``` - -Usually that also works and looks good. - -It's a bit less reliable though in more complex situations where `user` variable might change *after* `askPassword` is called, but *before* the visitor answers and calls `() => user.loginOk()`. diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md deleted file mode 100644 index fe6a9b4eb9..0000000000 --- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md +++ /dev/null @@ -1,36 +0,0 @@ -importance: 5 - ---- - -# Fix a function that loses "this" - -The call to `askPassword()` in the code below should check the password and then call `user.loginOk/loginFail` depending on the answer. - -But it leads to an error. Why? - -Fix the highlighted line for everything to start working right (other lines are not to be changed). - -```js run -function askPassword(ok, fail) { - let password = prompt("Password?", ''); - if (password == "rockstar") ok(); - else fail(); -} - -let user = { - name: 'John', - - loginOk() { - alert(`${this.name} logged in`); - }, - - loginFail() { - alert(`${this.name} failed to log in`); - }, - -}; - -*!* -askPassword(user.loginOk, user.loginFail); -*/!* -``` diff --git a/1-js/06-advanced-functions/10-bind/6-ask-partial/solution.md b/1-js/06-advanced-functions/10-bind/6-ask-partial/solution.md deleted file mode 100644 index 3284c943b0..0000000000 --- a/1-js/06-advanced-functions/10-bind/6-ask-partial/solution.md +++ /dev/null @@ -1,16 +0,0 @@ - - -1. Either use a wrapper function, an arrow to be concise: - - ```js - askPassword(() => user.login(true), () => user.login(false)); - ``` - - Now it gets `user` from outer variables and runs it the normal way. - -2. Or create a partial function from `user.login` that uses `user` as the context and has the correct first argument: - - - ```js - askPassword(user.login.bind(user, true), user.login.bind(user, false)); - ``` diff --git a/1-js/06-advanced-functions/10-bind/6-ask-partial/task.md b/1-js/06-advanced-functions/10-bind/6-ask-partial/task.md deleted file mode 100644 index c90851c2bd..0000000000 --- a/1-js/06-advanced-functions/10-bind/6-ask-partial/task.md +++ /dev/null @@ -1,34 +0,0 @@ -importance: 5 - ---- - -# Partial application for login - -The task is a little more complex variant of . - -The `user` object was modified. Now instead of two functions `loginOk/loginFail`, it has a single function `user.login(true/false)`. - -What should we pass `askPassword` in the code below, so that it calls `user.login(true)` as `ok` and `user.login(false)` as `fail`? - -```js -function askPassword(ok, fail) { - let password = prompt("Password?", ''); - if (password == "rockstar") ok(); - else fail(); -} - -let user = { - name: 'John', - - login(result) { - alert( this.name + (result ? ' logged in' : ' failed to log in') ); - } -}; - -*!* -askPassword(?, ?); // ? -*/!* -``` - -Your changes should only modify the highlighted fragment. - diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md deleted file mode 100644 index 8de8e6fd12..0000000000 --- a/1-js/06-advanced-functions/10-bind/article.md +++ /dev/null @@ -1,328 +0,0 @@ -libs: - - lodash - ---- - -# Function binding - -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. - -## Losing "this" - -We've already seen examples of losing `this`. Once a method is passed somewhere separately from the object -- `this` is lost. - -Here's how it may happen with `setTimeout`: - -```js run -let user = { - firstName: "John", - sayHi() { - alert(`Hello, ${this.firstName}!`); - } -}; - -*!* -setTimeout(user.sayHi, 1000); // Hello, undefined! -*/!* -``` - -As we can see, the output shows not "John" as `this.firstName`, but `undefined`! - -That's because `setTimeout` got the function `user.sayHi`, separately from the object. The last line can be rewritten as: - -```js -let f = user.sayHi; -setTimeout(f, 1000); // lost user context -``` - -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`. - -The task is quite typical -- we want to pass an object method somewhere else (here -- to the scheduler) where it will be called. How to make sure that it will be called in the right context? - -## Solution 1: a wrapper - -The simplest solution is to use a wrapping function: - -```js run -let user = { - firstName: "John", - sayHi() { - alert(`Hello, ${this.firstName}!`); - } -}; - -*!* -setTimeout(function() { - user.sayHi(); // Hello, John! -}, 1000); -*/!* -``` - -Now it works, because it receives `user` from the outer lexical environment, and then calls the method normally. - -The same, but shorter: - -```js -setTimeout(() => user.sayHi(), 1000); // Hello, John! -``` - -Looks fine, but a slight vulnerability appears in our code structure. - -What if before `setTimeout` triggers (there's one second delay!) `user` changes value? Then, suddenly, it will call the wrong object! - - -```js run -let user = { - firstName: "John", - sayHi() { - alert(`Hello, ${this.firstName}!`); - } -}; - -setTimeout(() => user.sayHi(), 1000); - -// ...the value of user changes within 1 second -user = { - sayHi() { alert("Another user in setTimeout!"); } -}; - -// Another user in setTimeout! -``` - -The next solution guarantees that such thing won't happen. - -## Solution 2: bind - -Functions provide a built-in method [bind](mdn:js/Function/bind) that allows to fix `this`. - -The basic syntax is: - -```js -// more complex syntax will come a little later -let boundFunc = func.bind(context); -``` - -The result of `func.bind(context)` is a special function-like "exotic object", that is callable as function and transparently passes the call to `func` setting `this=context`. - -In other words, calling `boundFunc` is like `func` with fixed `this`. - -For instance, here `funcUser` passes a call to `func` with `this=user`: - -```js run -let user = { - firstName: "John" -}; - -function func() { - alert(this.firstName); -} - -*!* -let funcUser = func.bind(user); -funcUser(); // John -*/!* -``` - -Here `func.bind(user)` as a "bound variant" of `func`, with fixed `this=user`. - -All arguments are passed to the original `func` "as is", for instance: - -```js run -let user = { - firstName: "John" -}; - -function func(phrase) { - alert(phrase + ', ' + this.firstName); -} - -// bind this to user -let funcUser = func.bind(user); - -*!* -funcUser("Hello"); // Hello, John (argument "Hello" is passed, and this=user) -*/!* -``` - -Now let's try with an object method: - - -```js run -let user = { - firstName: "John", - sayHi() { - alert(`Hello, ${this.firstName}!`); - } -}; - -*!* -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!"); } -}; -``` - -In the line `(*)` we take the method `user.sayHi` and bind it to `user`. The `sayHi` is a "bound" function, that can be called alone or passed to `setTimeout` -- doesn't matter, the context will be right. - -Here we can see that arguments are passed "as is", only `this` is fixed by `bind`: - -```js run -let user = { - firstName: "John", - say(phrase) { - alert(`${phrase}, ${this.firstName}!`); - } -}; - -let say = user.say.bind(user); - -say("Hello"); // Hello, John ("Hello" argument is passed to say) -say("Bye"); // Bye, John ("Bye" is passed to say) -``` - -````smart header="Convenience method: `bindAll`" -If an object has many methods and we plan to actively pass it around, then we could bind them all in a loop: - -```js -for (let key in user) { - if (typeof user[key] == 'function') { - user[key] = user[key].bind(user); - } -} -``` - -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 here 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 - -Method `func.bind(context, ...args)` returns a "bound variant" of function `func` that fixes the context `this` and first arguments if given. - -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. diff --git a/1-js/06-advanced-functions/10-bind/head.html b/1-js/06-advanced-functions/10-bind/head.html deleted file mode 100644 index afdb888df2..0000000000 --- a/1-js/06-advanced-functions/10-bind/head.html +++ /dev/null @@ -1,21 +0,0 @@ - \ No newline at end of file diff --git a/1-js/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md deleted file mode 100644 index f5caeaecef..0000000000 --- a/1-js/06-advanced-functions/12-arrow-functions/article.md +++ /dev/null @@ -1,126 +0,0 @@ -# Arrow functions revisited - -Let's revisit arrow functions. - -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. - -For instance: - -- `arr.forEach(func)` -- `func` is executed by `forEach` for every array item. -- `setTimeout(func)` -- `func` is executed by the built-in scheduler. -- ...there are more. - -It's in the very spirit of JavaScript to create a function and pass it somewhere. - -And in such functions we usually don't want to leave the current context. That's where arrow functions come in handy. - -## Arrow functions have no "this" - -As we remember from the chapter , arrow functions do not have `this`. If `this` is accessed, it is taken from the outside. - -For instance, we can use it to iterate inside an object method: - -```js run -let group = { - title: "Our Group", - students: ["John", "Pete", "Alice"], - - showList() { -*!* - this.students.forEach( - student => alert(this.title + ': ' + student) - ); -*/!* - } -}; - -group.showList(); -``` - -Here in `forEach`, the arrow function is used, so `this.title` in it is exactly the same as in the outer method `showList`. That is: `group.title`. - -If we used a "regular" function, there would be an error: - -```js run -let group = { - title: "Our Group", - students: ["John", "Pete", "Alice"], - - showList() { -*!* - this.students.forEach(function(student) { - // Error: Cannot read property 'title' of undefined - alert(this.title + ': ' + student) - }); -*/!* - } -}; - -group.showList(); -``` - -The error occurs because `forEach` runs functions with `this=undefined` by default, so the attempt to access `undefined.title` is made. - -That doesn't affect arrow functions, because they just don't have `this`. - -```warn header="Arrow functions can't run with `new`" -Not having `this` naturally means another limitation: arrow functions can't be used as constructors. They can't be called with `new`. -``` - -```smart header="Arrow functions VS bind" -There's a subtle difference between an arrow function `=>` and a regular function called with `.bind(this)`: - -- `.bind(this)` creates a "bound version" of the function. -- The arrow `=>` doesn't create any binding. The function simply doesn't have `this`. The lookup of `this` is made exactly the same way as a regular variable search: in the outer lexical environment. -``` - -## Arrows have no "arguments" - -Arrow functions also have no `arguments` variable. - -That's great for decorators, when we need to forward a call with the current `this` and `arguments`. - -For instance, `defer(f, ms)` gets a function and returns a wrapper around it that delays the call by `ms` milliseconds: - -```js run -function defer(f, ms) { - return function() { - setTimeout(() => f.apply(this, arguments), ms) - }; -} - -function sayHi(who) { - alert('Hello, ' + who); -} - -let sayHiDeferred = defer(sayHi, 2000); -sayHiDeferred("John"); // Hello, John after 2 seconds -``` - -The same without an arrow function would look like: - -```js -function defer(f, ms) { - return function(...args) { - let ctx = this; - setTimeout(function() { - return f.apply(ctx, args); - }, ms); - }; -} -``` - -Here we had to create additional variables `args` and `ctx` so that the function inside `setTimeout` could take them. - -## Summary - -Arrow functions: - -- 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. diff --git a/1-js/06-advanced-functions/index.md b/1-js/06-advanced-functions/index.md deleted file mode 100644 index 7800dcc424..0000000000 --- a/1-js/06-advanced-functions/index.md +++ /dev/null @@ -1 +0,0 @@ -# Advanced working with functions diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md deleted file mode 100644 index 3593bffae5..0000000000 --- a/1-js/07-object-properties/01-property-descriptors/article.md +++ /dev/null @@ -1,331 +0,0 @@ - -# Property flags and descriptors - -As we know, objects can store properties. - -Until now, a property was a simple "key-value" pair to us. But an object property is actually a more flexible and powerful thing. - -In this chapter we'll study additional configuration options, and in the next we'll see how to invisibly turn them into getter/setter functions. - -## Property flags - -Object properties, besides a **`value`**, have three special attributes (so-called "flags"): - -- **`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. - -We didn't see them yet, because generally they do not show up. When we create a property "the usual way", all of them are `true`. But we also can change them anytime. - -First, let's see how to get those flags. - -The method [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) allows to query the *full* information about a property. - -The syntax is: -```js -let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName); -``` - -`obj` -: The object to get information from. - -`propertyName` -: The name of the property. - -The returned value is a so-called "property descriptor" object: it contains the value and all the flags. - -For instance: - -```js run -let user = { - name: "John" -}; - -let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); - -alert( JSON.stringify(descriptor, null, 2 ) ); -/* property descriptor: -{ - "value": "John", - "writable": true, - "enumerable": true, - "configurable": true -} -*/ -``` - -To change the flags, we can use [Object.defineProperty](mdn:js/Object/defineProperty). - -The syntax is: - -```js -Object.defineProperty(obj, propertyName, descriptor) -``` - -`obj`, `propertyName` -: The object and its property to apply the descriptor. - -`descriptor` -: Property descriptor object to apply. - -If the property exists, `defineProperty` updates its flags. Otherwise, it creates the property with the given value and flags; in that case, if a flag is not supplied, it is assumed `false`. - -For instance, here a property `name` is created with all falsy flags: - -```js run -let user = {}; - -*!* -Object.defineProperty(user, "name", { - value: "John" -}); -*/!* - -let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); - -alert( JSON.stringify(descriptor, null, 2 ) ); -/* -{ - "value": "John", -*!* - "writable": false, - "enumerable": false, - "configurable": false -*/!* -} - */ -``` - -Compare it with "normally created" `user.name` above: now all flags are falsy. If that's not what we want then we'd better set them to `true` in `descriptor`. - -Now let's see effects of the flags by example. - -## Non-writable - -Let's make `user.name` non-writable (can't be reassigned) by changing `writable` flag: - -```js run -let user = { - name: "John" -}; - -Object.defineProperty(user, "name", { -*!* - writable: false -*/!* -}); - -*!* -user.name = "Pete"; // Error: Cannot assign to read only property 'name' -*/!* -``` - -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: - -```js run -let user = { }; - -Object.defineProperty(user, "name", { -*!* - value: "John", - // for new properties we need to explicitly list what's true - enumerable: true, - configurable: true -*/!* -}); - -alert(user.name); // John -user.name = "Pete"; // Error -``` - -## Non-enumerable - -Now let's add a custom `toString` to `user`. - -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: - -```js run -let user = { - name: "John", - toString() { - return this.name; - } -}; - -// By default, both our properties are listed: -for (let key in user) alert(key); // name, toString -``` - -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: - -```js run -let user = { - name: "John", - toString() { - return this.name; - } -}; - -Object.defineProperty(user, "toString", { -*!* - enumerable: false -*/!* -}); - -*!* -// Now our toString disappears: -*/!* -for (let key in user) alert(key); // name -``` - -Non-enumerable properties are also excluded from `Object.keys`: - -```js -alert(Object.keys(user)); // name -``` - -## Non-configurable - -The non-configurable flag (`configurable:false`) is sometimes preset for built-in objects and properties. - -A non-configurable property can not be deleted. - -For instance, `Math.PI` is non-writable, non-enumerable and non-configurable: - -```js run -let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI'); - -alert( JSON.stringify(descriptor, null, 2 ) ); -/* -{ - "value": 3.141592653589793, - "writable": false, - "enumerable": false, - "configurable": false -} -*/ -``` -So, a programmer is unable to change the value of `Math.PI` or overwrite it. - -```js run -Math.PI = 3; // Error - -// delete Math.PI won't work either -``` - -Making a property non-configurable is a one-way road. We cannot change it back with `defineProperty`. - -To be precise, non-configurability imposes several restrictions on `defineProperty`: -1. Can't change `configurable` flag. -2. Can't change `enumerable` flag. -3. Can't change `writable: false` to `true` (the other way round works). -4. Can't change `get/set` for an accessor property (but can assign them if absent). - -Here we are making `user.name` a "forever sealed" constant: - -```js run -let user = { }; - -Object.defineProperty(user, "name", { - value: "John", - writable: false, - configurable: false -}); - -*!* -// won't be able to change user.name or its flags -// all this won't work: -// user.name = "Pete" -// delete user.name -// defineProperty(user, "name", { value: "Pete" }) -Object.defineProperty(user, "name", {writable: true}); // Error -*/!* -``` - -```smart header="\"Non-configurable\" doesn't mean \"non-writable\"" -Notable exception: a value of non-configurable, but writable property can be changed. - -The idea of `configurable: false` is to prevent changes to property flags and its deletion, not changes to its value. -``` - -## Object.defineProperties - -There's a method [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties) that allows to define many properties at once. - -The syntax is: - -```js -Object.defineProperties(obj, { - prop1: descriptor1, - prop2: descriptor2 - // ... -}); -``` - -For instance: - -```js -Object.defineProperties(user, { - name: { value: "John", writable: false }, - surname: { value: "Smith", writable: false }, - // ... -}); -``` - -So, we can set many properties at once. - -## Object.getOwnPropertyDescriptors - -To get all property descriptors at once, we can use the method [Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors). - -Together with `Object.defineProperties` it can be used as a "flags-aware" way of cloning an object: - -```js -let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj)); -``` - -Normally when we clone an object, we use an assignment to copy properties, like this: - -```js -for (let key in user) { - clone[key] = user[key] -} -``` - -...But that does not copy flags. So if we want a "better" clone then `Object.defineProperties` is preferred. - -Another difference is that `for..in` ignores symbolic properties, but `Object.getOwnPropertyDescriptors` returns *all* property descriptors including symbolic ones. - -## Sealing an object globally - -Property descriptors work at the level of individual properties. - -There are also methods that limit access to the *whole* object: - -[Object.preventExtensions(obj)](mdn:js/Object/preventExtensions) -: Forbids the addition of new properties to the object. - -[Object.seal(obj)](mdn:js/Object/seal) -: Forbids adding/removing of properties. Sets `configurable: false` for all existing properties. - -[Object.freeze(obj)](mdn:js/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)](mdn:js/Object/isExtensible) -: Returns `false` if adding properties is forbidden, otherwise `true`. - -[Object.isSealed(obj)](mdn:js/Object/isSealed) -: Returns `true` if adding/removing properties is forbidden, and all existing properties have `configurable: false`. - -[Object.isFrozen(obj)](mdn:js/Object/isFrozen) -: Returns `true` if adding/removing/changing properties is forbidden, and all current properties are `configurable: false, writable: false`. - -These methods are rarely used in practice. diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md deleted file mode 100644 index 45b9e70ed2..0000000000 --- a/1-js/07-object-properties/02-property-accessors/article.md +++ /dev/null @@ -1,244 +0,0 @@ - -# Property getters and setters - -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. - -## Getters and setters - -Accessor properties are represented by "getter" and "setter" methods. In an object literal they are denoted by `get` and `set`: - -```js -let obj = { - *!*get propName()*/!* { - // getter, the code executed on getting obj.propName - }, - - *!*set propName(value)*/!* { - // setter, the code executed on setting obj.propName = value - } -}; -``` - -The getter works when `obj.propName` is read, the setter -- when it is assigned. - -For instance, we have a `user` object with `name` and `surname`: - -```js -let user = { - name: "John", - surname: "Smith" -}; -``` - -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: - -```js run -let user = { - name: "John", - surname: "Smith", - -*!* - get fullName() { - return `${this.name} ${this.surname}`; - } -*/!* -}; - -*!* -alert(user.fullName); // John Smith -*/!* -``` - -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) -*/!* -``` - -Let's fix it by adding a setter for `user.fullName`: - -```js run -let user = { - name: "John", - surname: "Smith", - - get fullName() { - return `${this.name} ${this.surname}`; - }, - -*!* - set fullName(value) { - [this.name, this.surname] = value.split(" "); - } -*/!* -}; - -// set fullName is executed with the given value. -user.fullName = "Alice Cooper"; - -alert(user.name); // Alice -alert(user.surname); // Cooper -``` - -As the result, we have a "virtual" property `fullName`. It is readable and writable. - -## Accessor descriptors - -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: - -- **`get`** -- a function without arguments, that works when a property is read, -- **`set`** -- a function with one argument, that is called when the property is set, -- **`enumerable`** -- same as for data properties, -- **`configurable`** -- same as for data properties. - -For instance, to create an accessor `fullName` with `defineProperty`, we can pass a descriptor with `get` and `set`: - -```js run -let user = { - name: "John", - surname: "Smith" -}; - -*!* -Object.defineProperty(user, 'fullName', { - get() { - return `${this.name} ${this.surname}`; - }, - - set(value) { - [this.name, this.surname] = value.split(" "); - } -*/!* -}); - -alert(user.fullName); // John Smith - -for(let key in user) alert(key); // name, surname -``` - -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: - -```js run -*!* -// Error: Invalid property descriptor. -*/!* -Object.defineProperty({}, 'prop', { - get() { - return 1 - }, - - value: 2 -}); -``` - -## Smarter getters/setters - -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`: - -```js run -let user = { - get name() { - return this._name; - }, - - set name(value) { - if (value.length < 4) { - alert("Name is too short, need at least 4 characters"); - return; - } - this._name = value; - } -}; - -user.name = "Pete"; -alert(user.name); // Pete - -user.name = ""; // Name is too short... -``` - -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`: - -```js -function User(name, age) { - this.name = name; - this.age = age; -} - -let john = new User("John", 25); - -alert( john.age ); // 25 -``` - -...But sooner or later, things may change. Instead of `age` we may decide to store `birthday`, because it's more precise and convenient: - -```js -function User(name, birthday) { - this.name = name; - this.birthday = birthday; -} - -let john = new User("John", new Date(1992, 6, 1)); -``` - -Now what to do with the old code that still uses `age` property? - -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: - -```js run no-beautify -function User(name, birthday) { - this.name = name; - this.birthday = birthday; - -*!* - // age is calculated from the current date and birthday - Object.defineProperty(this, "age", { - get() { - let todayYear = new Date().getFullYear(); - return todayYear - this.birthday.getFullYear(); - } - }); -*/!* -} - -let john = new User("John", new Date(1992, 6, 1)); - -alert( john.birthday ); // birthday is available -alert( john.age ); // ...as well as the age -``` - -Now the old code works too and we've got a nice additional property. diff --git a/1-js/07-object-properties/index.md b/1-js/07-object-properties/index.md deleted file mode 100644 index 67fcccaffc..0000000000 --- a/1-js/07-object-properties/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Object properties configuration - -In this section we return to objects and study their properties even more in-depth. diff --git a/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md deleted file mode 100644 index 6d25a462ae..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md +++ /dev/null @@ -1,4 +0,0 @@ - -1. `true`, taken from `rabbit`. -2. `null`, taken from `animal`. -3. `undefined`, there's no such property any more. diff --git a/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md deleted file mode 100644 index f38fb6f97a..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md +++ /dev/null @@ -1,31 +0,0 @@ -importance: 5 - ---- - -# Working with prototype - -Here's the code that creates a pair of objects, then modifies them. - -Which values are shown in the process? - -```js -let animal = { - jumps: null -}; -let rabbit = { - __proto__: animal, - jumps: true -}; - -alert( rabbit.jumps ); // ? (1) - -delete rabbit.jumps; - -alert( rabbit.jumps ); // ? (2) - -delete animal.jumps; - -alert( rabbit.jumps ); // ? (3) -``` - -There should be 3 answers. diff --git a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md deleted file mode 100644 index a16796f9cc..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md +++ /dev/null @@ -1,32 +0,0 @@ - -1. Let's add `__proto__`: - - ```js run - let head = { - glasses: 1 - }; - - let table = { - pen: 3, - __proto__: head - }; - - let bed = { - sheet: 1, - pillow: 2, - __proto__: table - }; - - let pockets = { - money: 2000, - __proto__: bed - }; - - alert( pockets.pen ); // 3 - alert( bed.glasses ); // 1 - alert( table.money ); // undefined - ``` - -2. In modern engines, performance-wise, there's no difference whether we take a property from an object or its prototype. They remember where the property was found and reuse it in the next request. - - For instance, for `pockets.glasses` they remember where they found `glasses` (in `head`), and next time will search right there. They are also smart enough to update internal caches if something changes, so that optimization is safe. 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 deleted file mode 100644 index bc2db47fed..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md +++ /dev/null @@ -1,31 +0,0 @@ -importance: 5 - ---- - -# Searching algorithm - -The task has two parts. - -Given the following objects: - -```js -let head = { - glasses: 1 -}; - -let table = { - pen: 3 -}; - -let bed = { - sheet: 1, - pillow: 2 -}; - -let pockets = { - money: 2000 -}; -``` - -1. Use `__proto__` to assign prototypes in a way that any property lookup will follow the path: `pockets` -> `bed` -> `table` -> `head`. For instance, `pockets.pen` should be `3` (found in `table`), and `bed.glasses` should be `1` (found in `head`). -2. Answer the question: is it faster to get `glasses` as `pockets.glasses` or `head.glasses`? Benchmark if needed. 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 deleted file mode 100644 index 4d6ea2653c..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md +++ /dev/null @@ -1,7 +0,0 @@ -**The answer: `rabbit`.** - -That's because `this` is an object before the dot, so `rabbit.eat()` modifies `rabbit`. - -Property lookup and execution are two different things. - -The method `rabbit.eat` is first found in the prototype, then executed with `this=rabbit`. 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 deleted file mode 100644 index ed8482c072..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md +++ /dev/null @@ -1,23 +0,0 @@ -importance: 5 - ---- - -# Where does it write? - -We have `rabbit` inheriting from `animal`. - -If we call `rabbit.eat()`, which object receives the `full` property: `animal` or `rabbit`? - -```js -let animal = { - eat() { - this.full = true; - } -}; - -let rabbit = { - __proto__: animal -}; - -rabbit.eat(); -``` 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 deleted file mode 100644 index c141b2ecdc..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md +++ /dev/null @@ -1,80 +0,0 @@ -Let's look carefully at what's going on in the call `speedy.eat("apple")`. - -1. The method `speedy.eat` is found in the prototype (`=hamster`), then executed with `this=speedy` (the object before the dot). - -2. Then `this.stomach.push()` needs to find `stomach` property and call `push` on it. It looks for `stomach` in `this` (`=speedy`), but nothing found. - -3. Then it follows the prototype chain and finds `stomach` in `hamster`. - -4. Then it calls `push` on it, adding the food into *the stomach of the prototype*. - -So all hamsters share a single stomach! - -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. - -Please note that such thing doesn't happen in case of a simple assignment `this.stomach=`: - -```js run -let hamster = { - stomach: [], - - eat(food) { -*!* - // assign to this.stomach instead of this.stomach.push - this.stomach = [food]; -*/!* - } -}; - -let speedy = { - __proto__: hamster -}; - -let lazy = { - __proto__: hamster -}; - -// Speedy one found the food -speedy.eat("apple"); -alert( speedy.stomach ); // apple - -// Lazy one's stomach is empty -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. - -Also we can totally avoid the problem by making sure that each hamster has their own stomach: - -```js run -let hamster = { - stomach: [], - - eat(food) { - this.stomach.push(food); - } -}; - -let speedy = { - __proto__: hamster, -*!* - stomach: [] -*/!* -}; - -let lazy = { - __proto__: hamster, -*!* - stomach: [] -*/!* -}; - -// Speedy one found the food -speedy.eat("apple"); -alert( speedy.stomach ); // apple - -// Lazy one's stomach is empty -alert( lazy.stomach ); // -``` - -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 deleted file mode 100644 index 50171123d4..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md +++ /dev/null @@ -1,35 +0,0 @@ -importance: 5 - ---- - -# Why are both hamsters full? - -We have two hamsters: `speedy` and `lazy` inheriting from the general `hamster` object. - -When we feed one of them, the other one is also full. Why? How can we fix it? - -```js run -let hamster = { - stomach: [], - - eat(food) { - this.stomach.push(food); - } -}; - -let speedy = { - __proto__: hamster -}; - -let lazy = { - __proto__: hamster -}; - -// This one found the food -speedy.eat("apple"); -alert( speedy.stomach ); // apple - -// This one also has it, why? fix please. -alert( lazy.stomach ); // apple -``` - diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md deleted file mode 100644 index 710390f15d..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ /dev/null @@ -1,329 +0,0 @@ -# Prototypal inheritance - -In programming, we often want to take something and extend it. - -For instance, we have a `user` object with its properties and methods, and want to make `admin` and `guest` as slightly modified variants of it. We'd like to reuse what we have in `user`, not copy/reimplement its methods, just build a new object on top of it. - -*Prototypal inheritance* is a language feature that helps in that. - -## [[Prototype]] - -In JavaScript, objects have a special hidden property `[[Prototype]]` (as named in the specification), that is either `null` or references another object. That object is called "a prototype": - -![prototype](object-prototype-empty.svg) - -The prototype is a little bit "magical". When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it. - -The property `[[Prototype]]` is internal and hidden, but there are many ways to set it. - -One of them is to use the special name `__proto__`, like this: - -```js run -let animal = { - eats: true -}; -let rabbit = { - jumps: true -}; - -*!* -rabbit.__proto__ = animal; -*/!* -``` - -```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`" -Please note that `__proto__` is *not the same* as `[[Prototype]]`. It's a getter/setter for it. - -It exists for historical reasons. In modern language it is replaced with functions `Object.getPrototypeOf/Object.setPrototypeOf` that also get/set the prototype. We'll study the reasons for that and these functions later. - -By the specification, `__proto__` must only be supported by browsers, but in fact all environments including server-side support it. For now, as `__proto__` notation is a little bit more intuitively obvious, we'll use it in the examples. -``` - -If we look for a property in `rabbit`, and it's missing, JavaScript automatically takes it from `animal`. - -For instance: - -```js -let animal = { - eats: true -}; -let rabbit = { - jumps: true -}; - -*!* -rabbit.__proto__ = animal; // (*) -*/!* - -// we can find both properties in rabbit now: -*!* -alert( rabbit.eats ); // true (**) -*/!* -alert( rabbit.jumps ); // true -``` - -Here the line `(*)` sets `animal` to be a prototype of `rabbit`. - -Then, when `alert` tries to read property `rabbit.eats` `(**)`, it's not in `rabbit`, so JavaScript follows the `[[Prototype]]` reference and finds it in `animal` (look from the bottom up): - -![](proto-animal-rabbit.svg) - -Here we can say that "`animal` is the prototype of `rabbit`" or "`rabbit` prototypically inherits from `animal`". - -So if `animal` has a lot of useful properties and methods, then they become automatically available in `rabbit`. Such properties are called "inherited". - -If we have a method in `animal`, it can be called on `rabbit`: - -```js run -let animal = { - eats: true, -*!* - walk() { - alert("Animal walk"); - } -*/!* -}; - -let rabbit = { - jumps: true, - __proto__: animal -}; - -// walk is taken from the prototype -*!* -rabbit.walk(); // Animal walk -*/!* -``` - -The method is automatically taken from the prototype, like this: - -![](proto-animal-rabbit-walk.svg) - -The prototype chain can be longer: - -```js run -let animal = { - eats: true, - walk() { - alert("Animal walk"); - } -}; - -let rabbit = { - jumps: true, -*!* - __proto__: animal -*/!* -}; - -let longEar = { - earLength: 10, -*!* - __proto__: rabbit -*/!* -}; - -// walk is taken from the prototype chain -longEar.walk(); // Animal walk -alert(longEar.jumps); // true (from rabbit) -``` - -![](proto-animal-rabbit-chain.svg) - -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. - -Also it may be obvious, but still: there can be only one `[[Prototype]]`. An object may not inherit from two others. - -## Writing doesn't use prototype - -The prototype is only used for reading properties. - -Write/delete operations work directly with the object. - -In the example below, we assign its own `walk` method to `rabbit`: - -```js run -let animal = { - eats: true, - walk() { - /* this method won't be used by rabbit */ - } -}; - -let rabbit = { - __proto__: animal -}; - -*!* -rabbit.walk = function() { - alert("Rabbit! Bounce-bounce!"); -}; -*/!* - -rabbit.walk(); // Rabbit! Bounce-bounce! -``` - -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. - -For that reason `admin.fullName` works correctly in the code below: - -```js run -let user = { - name: "John", - surname: "Smith", - - set fullName(value) { - [this.name, this.surname] = value.split(" "); - }, - - get fullName() { - return `${this.name} ${this.surname}`; - } -}; - -let admin = { - __proto__: user, - isAdmin: true -}; - -alert(admin.fullName); // John Smith (*) - -// setter triggers! -admin.fullName = "Alice Cooper"; // (**) -``` - -Here in the line `(*)` the property `admin.fullName` has a getter in the prototype `user`, so it is called. And in the line `(**)` the property has a setter in the prototype, so it is called. - -## The value of "this" - -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`? - -The answer is simple: `this` is not affected by prototypes at all. - -**No matter where the method is found: in an object or its prototype. In a method call, `this` is always the object before the dot.** - -So, the setter call `admin.fullName=` uses `admin` as `this`, not `user`. - -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. - -For instance, here `animal` represents a "method storage", and `rabbit` makes use of it. - -The call `rabbit.sleep()` sets `this.isSleeping` on the `rabbit` object: - -```js run -// animal has methods -let animal = { - walk() { - if (!this.isSleeping) { - alert(`I walk`); - } - }, - sleep() { - this.isSleeping = true; - } -}; - -let rabbit = { - name: "White Rabbit", - __proto__: animal -}; - -// modifies rabbit.isSleeping -rabbit.sleep(); - -alert(rabbit.isSleeping); // true -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 - } -} -``` - -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) - -Note, there's one funny thing. Where is the method `rabbit.hasOwnProperty` coming from? We did not define it. Looking at the chain we can see that the method is provided by `Object.prototype.hasOwnProperty`. In other words, it's inherited. - -...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. -``` - -## Summary - -- 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. diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg deleted file mode 100644 index da48a7ccd9..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg +++ /dev/null @@ -1 +0,0 @@ -prototype objectobject[[Prototype]] \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg deleted file mode 100644 index 520bf87edc..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg +++ /dev/null @@ -1 +0,0 @@ -eats: true walk: functionanimaljumps: truerabbit[[Prototype]]earLength: 10longEar[[Prototype]] \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg deleted file mode 100644 index 8b6573574d..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg +++ /dev/null @@ -1 +0,0 @@ -eats: true walk: functionanimalwalk: functionrabbit[[Prototype]] \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg deleted file mode 100644 index 6e3b6f5554..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg +++ /dev/null @@ -1 +0,0 @@ -walk: function sleep: functionanimalrabbit[[Prototype]]name: "White Rabbit" isSleeping: true \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg deleted file mode 100644 index b83933a87d..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg +++ /dev/null @@ -1 +0,0 @@ -eats: true walk: functionanimaljumps: truerabbit[[Prototype]] \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg deleted file mode 100644 index 538f5afb36..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg +++ /dev/null @@ -1 +0,0 @@ -eats: trueanimaljumps: truerabbit[[Prototype]] \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg deleted file mode 100644 index ed9fea4a04..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg +++ /dev/null @@ -1 +0,0 @@ -name: "John" surname: "Smith" set fullName: functionisAdmin: true name: "Alice" surname: "Cooper"useradmin[[Prototype]] \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg deleted file mode 100644 index 782a858bdb..0000000000 --- a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg +++ /dev/null @@ -1 +0,0 @@ -toString: function hasOwnProperty: function ...Object.prototypeanimal[[Prototype]][[Prototype]][[Prototype]]nulleats: truerabbitjumps: true \ No newline at end of file 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 deleted file mode 100644 index ebbdf3a7c1..0000000000 --- a/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md +++ /dev/null @@ -1,20 +0,0 @@ - -Answers: - -1. `true`. - - The assignment to `Rabbit.prototype` sets up `[[Prototype]]` for new objects, but it does not affect the existing ones. - -2. `false`. - - 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. - -3. `true`. - - All `delete` operations are applied directly to the object. Here `delete rabbit.eats` tries to remove `eats` property from `rabbit`, but it doesn't have it. So the operation won't have any effect. - -4. `undefined`. - - The property `eats` is deleted from the prototype, it doesn't exist any more. 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 deleted file mode 100644 index 2838c125ad..0000000000 --- a/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md +++ /dev/null @@ -1,89 +0,0 @@ -importance: 5 - ---- - -# Changing "prototype" - -In the code below we create `new Rabbit`, and then try to modify its prototype. - -In the start, we have this code: - -```js run -function Rabbit() {} -Rabbit.prototype = { - eats: true -}; - -let rabbit = new Rabbit(); - -alert( rabbit.eats ); // true -``` - - -1. We added one more string (emphasized). What will `alert` show now? - - ```js - function Rabbit() {} - Rabbit.prototype = { - eats: true - }; - - let rabbit = new Rabbit(); - - *!* - Rabbit.prototype = {}; - */!* - - alert( rabbit.eats ); // ? - ``` - -2. ...And if the code is like this (replaced one line)? - - ```js - function Rabbit() {} - Rabbit.prototype = { - eats: true - }; - - let rabbit = new Rabbit(); - - *!* - Rabbit.prototype.eats = false; - */!* - - alert( rabbit.eats ); // ? - ``` - -3. And like this (replaced one line)? - - ```js - function Rabbit() {} - Rabbit.prototype = { - eats: true - }; - - let rabbit = new Rabbit(); - - *!* - delete rabbit.eats; - */!* - - alert( rabbit.eats ); // ? - ``` - -4. The last variant: - - ```js - function Rabbit() {} - Rabbit.prototype = { - eats: true - }; - - let rabbit = new Rabbit(); - - *!* - delete Rabbit.prototype.eats; - */!* - - alert( rabbit.eats ); // ? - ``` 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 deleted file mode 100644 index 0073e252ea..0000000000 --- a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md +++ /dev/null @@ -1,44 +0,0 @@ -We can use such approach if we are sure that `"constructor"` property has the correct value. - -For instance, if we don't touch the default `"prototype"`, then this code works for sure: - -```js run -function User(name) { - this.name = name; -} - -let user = new User('John'); -let user2 = new user.constructor('Pete'); - -alert( user2.name ); // Pete (worked!) -``` - -It worked, because `User.prototype.constructor == User`. - -..But if someone, so to speak, overwrites `User.prototype` and forgets to recreate `constructor` to reference `User`, then it would fail. - -For instance: - -```js run -function User(name) { - this.name = name; -} -*!* -User.prototype = {}; // (*) -*/!* - -let user = new User('John'); -let user2 = new user.constructor('Pete'); - -alert( user2.name ); // undefined -``` - -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. - -At the end, we have `let user2 = new Object('Pete')`. The built-in `Object` constructor ignores arguments, it always creates an empty object, similar to `let user2 = {}`, that's what we have in `user2` after all. diff --git a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md deleted file mode 100644 index 934f3470b9..0000000000 --- a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 5 - ---- - -# Create an object with the same constructor - -Imagine, we have an arbitrary object `obj`, created by a constructor function -- we don't know which one, but we'd like to create a new object using it. - -Can we do it like that? - -```js -let obj2 = new obj.constructor(); -``` - -Give an example of a constructor function for `obj` which lets such code work right. And an example that makes it work wrong. diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md deleted file mode 100644 index b1ef518266..0000000000 --- a/1-js/08-prototypes/02-function-prototype/article.md +++ /dev/null @@ -1,175 +0,0 @@ -# F.prototype - -Remember, new objects can be created with a constructor function, like `new F()`. - -If `F.prototype` is an object, then the `new` operator uses it to set `[[Prototype]]` for the new object. - -```smart -JavaScript had prototypal inheritance from the beginning. It was one of the core features of the language. - -But in the old times, there was no direct access to it. The only thing that worked reliably was a `"prototype"` property of the constructor function, described in this chapter. So there are many scripts that still use it. -``` - -Please note that `F.prototype` here means a regular property named `"prototype"` on `F`. It sounds something similar to the term "prototype", but here we really mean a regular property with this name. - -Here's the example: - -```js run -let animal = { - eats: true -}; - -function Rabbit(name) { - this.name = name; -} - -*!* -Rabbit.prototype = animal; -*/!* - -let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal - -alert( rabbit.eats ); // true -``` - -Setting `Rabbit.prototype = animal` literally states the following: "When a `new Rabbit` is created, assign its `[[Prototype]]` to `animal`". - -That's the resulting picture: - -![](proto-constructor-animal-rabbit.svg) - -On the picture, `"prototype"` is a horizontal arrow, meaning a regular property, and `[[Prototype]]` is vertical, meaning the inheritance of `rabbit` from `animal`. - -```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. - -If, after the creation, `F.prototype` property changes (`F.prototype = `), then new objects created by `new F` will have another object as `[[Prototype]]`, but already existing objects keep the old one. -``` - -## Default F.prototype, constructor property - -Every function has the `"prototype"` property even if we don't supply it. - -The default `"prototype"` is an object with the only property `constructor` that points back to the function itself. - -Like this: - -```js -function Rabbit() {} - -/* default prototype -Rabbit.prototype = { constructor: Rabbit }; -*/ -``` - -![](function-prototype-constructor.svg) - -We can check it: - -```js run -function Rabbit() {} -// by default: -// Rabbit.prototype = { constructor: Rabbit } - -alert( Rabbit.prototype.constructor == Rabbit ); // true -``` - -Naturally, if we do nothing, the `constructor` property is available to all rabbits through `[[Prototype]]`: - -```js run -function Rabbit() {} -// by default: -// Rabbit.prototype = { constructor: Rabbit } - -let rabbit = new Rabbit(); // inherits from {constructor: Rabbit} - -alert(rabbit.constructor == Rabbit); // true (from prototype) -``` - -![](rabbit-prototype-constructor.svg) - -We can use `constructor` property to create a new object using the same constructor as the existing one. - -Like here: - -```js run -function Rabbit(name) { - this.name = name; - alert(name); -} - -let rabbit = new Rabbit("White Rabbit"); - -*!* -let rabbit2 = new rabbit.constructor("Black Rabbit"); -*/!* -``` - -That's handy when we have an object, don't know which constructor was used for it (e.g. it comes from a 3rd party library), and we need to create another one of the same kind. - -But probably the most important thing about `"constructor"` is that... - -**...JavaScript itself does not ensure the right `"constructor"` value.** - -Yes, it exists in the default `"prototype"` for functions, but that's all. What happens with it later -- is totally on us. - -In particular, if we replace the default prototype as a whole, then there will be no `"constructor"` in it. - -For instance: - -```js run -function Rabbit() {} -Rabbit.prototype = { - jumps: true -}; - -let rabbit = new Rabbit(); -*!* -alert(rabbit.constructor === Rabbit); // false -*/!* -``` - -So, to keep the right `"constructor"` we can choose to add/remove properties to the default `"prototype"` instead of overwriting it as a whole: - -```js -function Rabbit() {} - -// Not overwrite Rabbit.prototype totally -// just add to it -Rabbit.prototype.jumps = true -// the default Rabbit.prototype.constructor is preserved -``` - -Or, alternatively, recreate the `constructor` property manually: - -```js -Rabbit.prototype = { - jumps: true, -*!* - constructor: Rabbit -*/!* -}; - -// now constructor is also correct, because we added it -``` - - -## Summary - -In this chapter we briefly described the way of setting a `[[Prototype]]` for objects created via a constructor function. Later we'll see more advanced programming patterns that rely on it. - -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`. - -On regular objects the `prototype` is nothing special: -```js -let user = { - name: "John", - prototype: "Bla-bla" // no magic at all -}; -``` - -By default all functions have `F.prototype = { constructor: F }`, so we can get the constructor of an object by accessing its `"constructor"` property. diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg deleted file mode 100644 index 187b899e48..0000000000 --- a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg +++ /dev/null @@ -1 +0,0 @@ -Rabbitprototypeconstructordefault "prototype" \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg deleted file mode 100644 index a2c19d8505..0000000000 --- a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg +++ /dev/null @@ -1 +0,0 @@ -eats: truename: "White Rabbit"animalRabbitrabbit[[Prototype]]prototype \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg deleted file mode 100644 index 4d6b10e303..0000000000 --- a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg +++ /dev/null @@ -1 +0,0 @@ -default "prototype"Rabbitrabbit[[Prototype]]prototypeconstructor \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md b/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md deleted file mode 100644 index ebd2f44e9c..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md +++ /dev/null @@ -1,13 +0,0 @@ - - -```js run -Function.prototype.defer = function(ms) { - setTimeout(this, ms); -}; - -function f() { - alert("Hello!"); -} - -f.defer(1000); // shows "Hello!" after 1 sec -``` diff --git a/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md b/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md deleted file mode 100644 index d3b3a51c2a..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md +++ /dev/null @@ -1,17 +0,0 @@ -importance: 5 - ---- - -# Add method "f.defer(ms)" to functions - -Add to the prototype of all functions the method `defer(ms)`, that runs the function after `ms` milliseconds. - -After you do it, such code should work: - -```js -function f() { - alert("Hello!"); -} - -f.defer(1000); // shows "Hello!" after 1 second -``` 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 deleted file mode 100644 index 99c358c9b0..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md +++ /dev/null @@ -1,41 +0,0 @@ - - -```js run -Function.prototype.defer = function(ms) { - let f = this; - return function(...args) { - setTimeout(() => f.apply(this, args), ms); - } -}; - -// check it -function f(a, b) { - alert( a + b ); -} - -f.defer(1000)(1, 2); // shows 3 after 1 sec -``` - -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/2-defer-to-prototype-extended/task.md b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md deleted file mode 100644 index 4d3823bb85..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 4 - ---- - -# Add the decorating "defer()" to functions - -Add to the prototype of all functions the method `defer(ms)`, that returns a wrapper, delaying the call by `ms` milliseconds. - -Here's an example of how it should work: - -```js -function f(a, b) { - alert( a + b ); -} - -f.defer(1000)(1, 2); // shows 3 after 1 second -``` - -Please note that the arguments should be passed to the original function. diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md deleted file mode 100644 index 378936c9ab..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/article.md +++ /dev/null @@ -1,196 +0,0 @@ -# Native prototypes - -The `"prototype"` property is widely used by the core of JavaScript itself. All built-in constructor functions use it. - -First we'll see at the details, and then how to use it for adding new capabilities to built-in objects. - -## Object.prototype - -Let's say we output an empty object: - -```js run -let obj = {}; -alert( obj ); // "[object Object]" ? -``` - -Where's the code that generates the string `"[object Object]"`? That's a built-in `toString` method, but where is it? The `obj` is empty! - -...But the short notation `obj = {}` is the same as `obj = new Object()`, where `Object` is a built-in object constructor function, with its own `prototype` referencing a huge object with `toString` and other methods. - -Here's what's going on: - -![](object-prototype.svg) - -When `new Object()` is called (or a literal object `{...}` is created), the `[[Prototype]]` of it is set to `Object.prototype` according to the rule that we discussed in the previous chapter: - -![](object-prototype-1.svg) - -So then when `obj.toString()` is called the method is taken from `Object.prototype`. - -We can check it like this: - -```js run -let obj = {}; - -alert(obj.__proto__ === Object.prototype); // true -// obj.toString === obj.__proto__.toString == Object.prototype.toString -``` - -Please note that there is no more `[[Prototype]]` in the chain above `Object.prototype`: - -```js run -alert(Object.prototype.__proto__); // null -``` - -## Other built-in prototypes - -Other built-in objects such as `Array`, `Date`, `Function` and others also keep methods in prototypes. - -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". - -Here's the overall picture (for 3 built-ins to fit): - -![](native-prototypes-classes.svg) - -Let's check the prototypes manually: - -```js run -let arr = [1, 2, 3]; - -// it inherits from Array.prototype? -alert( arr.__proto__ === Array.prototype ); // true - -// then from Object.prototype? -alert( arr.__proto__.__proto__ === Object.prototype ); // true - -// and null on the top. -alert( arr.__proto__.__proto__.__proto__ ); // null -``` - -Some methods in prototypes may overlap, for instance, `Array.prototype` has its own `toString` that lists comma-delimited elements: - -```js run -let arr = [1, 2, 3] -alert(arr); // 1,2,3 <-- the result of Array.prototype.toString -``` - -As we've seen before, `Object.prototype` has `toString` as well, but `Array.prototype` is closer in the chain, so the array variant is used. - - -![](native-prototypes-array-tostring.svg) - - -In-browser tools like Chrome developer console also show inheritance (`console.dir` may need to be used for built-in objects): - -![](console_dir_array.png) - -Other built-in objects also work the same way. Even functions -- they are objects of a built-in `Function` constructor, and their methods (`call`/`apply` and others) are taken from `Function.prototype`. Functions have their own `toString` too. - -```js run -function f() {} - -alert(f.__proto__ == Function.prototype); // true -alert(f.__proto__.__proto__ == Object.prototype); // true, inherit from objects -``` - -## Primitives - -The most intricate thing happens with strings, numbers and booleans. - -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. - -These objects are created invisibly to us and most engines optimize them out, but the specification describes it exactly this way. Methods of these objects also reside in prototypes, available as `String.prototype`, `Number.prototype` and `Boolean.prototype`. - -```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. -``` - -## Changing native prototypes [#native-prototype-change] - -Native prototypes can be modified. For instance, if we add a method to `String.prototype`, it becomes available to all strings: - -```js run -String.prototype.show = function() { - alert(this); -}; - -"BOOM!".show(); // BOOM! -``` - -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: - -```js run -if (!String.prototype.repeat) { // if there's no such method - // add it to the prototype - - String.prototype.repeat = function(n) { - // repeat the string n times - - // actually, the code should be a little bit more complex than that - // (the full algorithm is in the specification) - // but even an imperfect polyfill is often considered good enough - return new Array(n + 1).join(this); - }; -} - -alert( "La".repeat(3) ); // LaLaLa -``` - - -## 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. - -```js run -let obj = { - 0: "Hello", - 1: "world!", - length: 2, -}; - -*!* -obj.join = Array.prototype.join; -*/!* - -alert( obj.join(',') ); // Hello,world! -``` - -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. - -## Summary - -- 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 diff --git a/1-js/08-prototypes/03-native-prototypes/console_dir_array.png b/1-js/08-prototypes/03-native-prototypes/console_dir_array.png deleted file mode 100644 index a58db646db..0000000000 Binary files a/1-js/08-prototypes/03-native-prototypes/console_dir_array.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg deleted file mode 100644 index 187b899e48..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg +++ /dev/null @@ -1 +0,0 @@ -Rabbitprototypeconstructordefault "prototype" \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg deleted file mode 100644 index 8475560b3f..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg +++ /dev/null @@ -1 +0,0 @@ -toString: function ...Array.prototypetoString: function ...Object.prototype[[Prototype]][[Prototype]][1, 2, 3] \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg deleted file mode 100644 index 36cc81cd9d..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg +++ /dev/null @@ -1 +0,0 @@ -toString: function other object methodsObject.prototypenullslice: function other array methods[[Prototype]][[Prototype]][[Prototype]][[Prototype]][[Prototype]][[Prototype]][[Prototype]]Array.prototypecall: function other function methodsFunction.prototypetoFixed: function other number methodsNumber.prototype[1, 2, 3]function f(args) { ... }5 \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg deleted file mode 100644 index c111e07255..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg +++ /dev/null @@ -1 +0,0 @@ -constructor: Object toString: function ...Object.prototypeObjectobj = new Object()[[Prototype]]prototype \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg deleted file mode 100644 index 8b802eb442..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg +++ /dev/null @@ -1 +0,0 @@ -obj[[Prototype]]null \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg deleted file mode 100644 index b5014f9f00..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg +++ /dev/null @@ -1 +0,0 @@ -constructor: Object toString: function ...Object.prototypeObjectprototype \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg deleted file mode 100644 index a2c19d8505..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg +++ /dev/null @@ -1 +0,0 @@ -eats: truename: "White Rabbit"animalRabbitrabbit[[Prototype]]prototype \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg deleted file mode 100644 index 4d6b10e303..0000000000 --- a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg +++ /dev/null @@ -1 +0,0 @@ -default "prototype"Rabbitrabbit[[Prototype]]prototypeconstructor \ No newline at end of file diff --git a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md deleted file mode 100644 index a92e17900e..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md +++ /dev/null @@ -1,31 +0,0 @@ - -The method can take all enumerable keys using `Object.keys` and output their list. - -To make `toString` non-enumerable, let's define it using a property descriptor. The syntax of `Object.create` allows us to provide an object with property descriptors as the second argument. - -```js run -*!* -let dictionary = Object.create(null, { - toString: { // define toString property - value() { // the value is a function - return Object.keys(this).join(); - } - } -}); -*/!* - -dictionary.apple = "Apple"; -dictionary.__proto__ = "test"; - -// apple and __proto__ is in the loop -for(let key in dictionary) { - alert(key); // "apple", then "__proto__" -} - -// comma-separated list of properties by toString -alert(dictionary); // "apple,__proto__" -``` - -When we create a property using a descriptor, its flags are `false` by default. So in the code above, `dictionary.toString` is non-enumerable. - -See the the chapter [](info:property-descriptors) for review. diff --git a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md deleted file mode 100644 index 0d831f2cc5..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md +++ /dev/null @@ -1,31 +0,0 @@ -importance: 5 - ---- - -# Add toString to the dictionary - -There's an object `dictionary`, created as `Object.create(null)`, to store any `key/value` pairs. - -Add method `dictionary.toString()` into it, that should return a comma-delimited list of keys. Your `toString` should not show up in `for..in` over the object. - -Here's how it should work: - -```js -let dictionary = Object.create(null); - -*!* -// your code to add dictionary.toString method -*/!* - -// add some data -dictionary.apple = "Apple"; -dictionary.__proto__ = "test"; // __proto__ is a regular property key here - -// only apple and __proto__ are in the loop -for(let key in dictionary) { - alert(key); // "apple", then "__proto__" -} - -// your toString in action -alert(dictionary); // "apple,__proto__" -``` diff --git a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md deleted file mode 100644 index 90d3118bfd..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md +++ /dev/null @@ -1,20 +0,0 @@ - -The first call has `this == rabbit`, the other ones have `this` equal to `Rabbit.prototype`, because it's actually the object before the dot. - -So only the first call shows `Rabbit`, other ones show `undefined`: - -```js run -function Rabbit(name) { - this.name = name; -} -Rabbit.prototype.sayHi = function() { - alert( this.name ); -} - -let rabbit = new Rabbit("Rabbit"); - -rabbit.sayHi(); // Rabbit -Rabbit.prototype.sayHi(); // undefined -Object.getPrototypeOf(rabbit).sayHi(); // undefined -rabbit.__proto__.sayHi(); // undefined -``` diff --git a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md deleted file mode 100644 index 09bb7f1ed8..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md +++ /dev/null @@ -1,27 +0,0 @@ -importance: 5 - ---- - -# The difference between calls - -Let's create a new `rabbit` object: - -```js -function Rabbit(name) { - this.name = name; -} -Rabbit.prototype.sayHi = function() { - alert(this.name); -}; - -let rabbit = new Rabbit("Rabbit"); -``` - -These calls do the same thing or not? - -```js -rabbit.sayHi(); -Rabbit.prototype.sayHi(); -Object.getPrototypeOf(rabbit).sayHi(); -rabbit.__proto__.sayHi(); -``` diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md deleted file mode 100644 index e460ef016c..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/article.md +++ /dev/null @@ -1,204 +0,0 @@ - -# Prototype methods, objects without __proto__ - -In the first chapter of this section, we mentioned that there are modern methods to setup a prototype. - -The `__proto__` is considered outdated and somewhat deprecated (in browser-only part of the JavaScript standard). - -The modern methods are: - -- [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`. - -These should be used instead of `__proto__`. - -For instance: - -```js run -let animal = { - eats: true -}; - -// create a new object with animal as a prototype -*!* -let rabbit = Object.create(animal); -*/!* - -alert(rabbit.eats); // true - -*!* -alert(Object.getPrototypeOf(rabbit) === animal); // true -*/!* - -*!* -Object.setPrototypeOf(rabbit, {}); // change the prototype of rabbit to {} -*/!* -``` - -`Object.create` has an optional second argument: property descriptors. We can provide additional properties to the new object there, like this: - -```js run -let animal = { - eats: true -}; - -let rabbit = Object.create(animal, { - jumps: { - value: true - } -}); - -alert(rabbit.jumps); // true -``` - -The descriptors are in the same format as described in the chapter . - -We can use `Object.create` to perform an object cloning more powerful than copying properties in `for..in`: - -```js -let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); -``` - -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? - -That's for historical reasons. - -- 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. - -As of now we have all these ways at our disposal. - -Why was `__proto__` replaced by the functions `getPrototypeOf/setPrototypeOf`? That's an interesting question, requiring us to understand why `__proto__` is bad. Read on to get the answer. - -```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] - -As we know, objects can be used as associative arrays to store key/value pairs. - -...But if we try to store *user-provided* keys in it (for instance, a user-entered dictionary), we can see an interesting glitch: all keys work fine except `"__proto__"`. - -Check out the example: - -```js run -let obj = {}; - -let key = prompt("What's the key?", "__proto__"); -obj[key] = "some value"; - -alert(obj[key]); // [object Object], not "some value"! -``` - -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. - -But we didn't *intend* to implement such behavior, right? We want to store key/value pairs, and the key named `"__proto__"` was not properly saved. So that's a bug! - -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) - -So, if `obj.__proto__` is read or set, the corresponding getter/setter is called from its prototype, and it gets/sets `[[Prototype]]`. - -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: - -```js run -*!* -let obj = Object.create(null); -*/!* - -let key = prompt("What's the key?", "__proto__"); -obj[key] = "some value"; - -alert(obj[key]); // "some value" -``` - -`Object.create(null)` creates an empty object without a prototype (`[[Prototype]]` is `null`): - -![](object-prototype-null.svg) - -So, there is no inherited getter/setter for `__proto__`. Now it is processed as a regular data property, so the example above works right. - -We can call such objects "very plain" or "pure dictionary" objects, because they are even simpler than the regular plain object `{...}`. - -A downside is that such objects lack any built-in object methods, e.g. `toString`: - -```js run -*!* -let obj = Object.create(null); -*/!* - -alert(obj); // Error (no toString) -``` - -...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: - - -```js run -let chineseDictionary = Object.create(null); -chineseDictionary.hello = "你好"; -chineseDictionary.bye = "再见"; - -alert(Object.keys(chineseDictionary)); // hello,bye -``` - -## Summary - -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. - -So we can either use `Object.create(null)` to create a "very plain" object without `__proto__`, or stick to `Map` objects for that. - -Also, `Object.create` provides an easy way to shallow-copy an object with all descriptors: - -```js -let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); -``` - -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`. diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg deleted file mode 100644 index c3717ad509..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg +++ /dev/null @@ -1 +0,0 @@ -... get __proto__: function set __proto__: functionObject.prototypeObjectobj[[Prototype]]prototype \ No newline at end of file diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg deleted file mode 100644 index 8b802eb442..0000000000 --- a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg +++ /dev/null @@ -1 +0,0 @@ -obj[[Prototype]]null \ No newline at end of file diff --git a/1-js/08-prototypes/index.md b/1-js/08-prototypes/index.md deleted file mode 100644 index 8554a0e30b..0000000000 --- a/1-js/08-prototypes/index.md +++ /dev/null @@ -1 +0,0 @@ -# Prototypes, inheritance diff --git a/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js b/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js deleted file mode 100644 index 0b31cf334e..0000000000 --- a/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js +++ /dev/null @@ -1,38 +0,0 @@ -class Clock { - constructor({ template }) { - this.template = template; - } - - render() { - let date = new Date(); - - let hours = date.getHours(); - if (hours < 10) hours = '0' + hours; - - let mins = date.getMinutes(); - if (mins < 10) mins = '0' + mins; - - let secs = date.getSeconds(); - if (secs < 10) secs = '0' + secs; - - let output = this.template - .replace('h', hours) - .replace('m', mins) - .replace('s', secs); - - console.log(output); - } - - stop() { - clearInterval(this.timer); - } - - start() { - this.render(); - this.timer = setInterval(() => this.render(), 1000); - } -} - - -let clock = new Clock({template: 'h:m:s'}); -clock.start(); diff --git a/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js b/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js deleted file mode 100644 index f1749c8ba5..0000000000 --- a/1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js +++ /dev/null @@ -1,37 +0,0 @@ -function Clock({ template }) { - - let timer; - - function render() { - let date = new Date(); - - let hours = date.getHours(); - if (hours < 10) hours = '0' + hours; - - let mins = date.getMinutes(); - if (mins < 10) mins = '0' + mins; - - let secs = date.getSeconds(); - if (secs < 10) secs = '0' + secs; - - let output = template - .replace('h', hours) - .replace('m', mins) - .replace('s', secs); - - console.log(output); - } - - this.stop = function() { - clearInterval(timer); - }; - - this.start = function() { - render(); - timer = setInterval(render, 1000); - }; - -} - -let clock = new Clock({template: 'h:m:s'}); -clock.start(); diff --git a/1-js/09-classes/01-class/1-rewrite-to-class/solution.md b/1-js/09-classes/01-class/1-rewrite-to-class/solution.md deleted file mode 100644 index e69de29bb2..0000000000 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 deleted file mode 100644 index 05365e4104..0000000000 --- a/1-js/09-classes/01-class/1-rewrite-to-class/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Rewrite to class - -The `Clock` class is written in functional style. Rewrite it the "class" syntax. - -P.S. The clock ticks in the console, open it to see. diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md deleted file mode 100644 index 49a891b71c..0000000000 --- a/1-js/09-classes/01-class/article.md +++ /dev/null @@ -1,428 +0,0 @@ - -# Class basic syntax - -```quote author="Wikipedia" -In object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods). -``` - -In practice, we often need to create many objects of the same kind, like users, or goods or whatever. - -As we already know from the chapter , `new function` can help with that. - -But in the modern JavaScript, there's a more advanced "class" construct, that introduces great new features which are useful for object-oriented programming. - -## The "class" syntax - -The basic syntax is: -```js -class MyClass { - // class methods - constructor() { ... } - method1() { ... } - method2() { ... } - method3() { ... } - ... -} -``` - -Then use `new MyClass()` to create a new object with all the listed methods. - -The `constructor()` method is called automatically by `new`, so we can initialize the object there. - -For example: - -```js run -class User { - - constructor(name) { - this.name = name; - } - - sayHi() { - alert(this.name); - } - -} - -// Usage: -let user = new User("John"); -user.sayHi(); -``` - -When `new User("John")` is called: -1. A new object is created. -2. The `constructor` runs with the given argument and assigns `this.name` to it. - -...Then we can call object methods, such as `user.sayHi()`. - - -```warn header="No comma between class methods" -A common pitfall for novice developers is to put a comma between class methods, which would result in a syntax error. - -The notation here is not to be confused with object literals. Within the class, no commas are required. -``` - -## What is a class? - -So, what exactly is a `class`? That's not an entirely new language-level entity, as one might think. - -Let's unveil any magic and see what a class really is. That'll help in understanding many complex aspects. - -In JavaScript, a class is a kind of function. - -Here, take a look: - -```js run -class User { - constructor(name) { this.name = name; } - sayHi() { alert(this.name); } -} - -// proof: User is a function -*!* -alert(typeof User); // function -*/!* -``` - -What `class User {...}` construct really does is: - -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`. - -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: - -![](class-user.svg) - -Here's the code to introspect it: - -```js run -class User { - constructor(name) { this.name = name; } - sayHi() { alert(this.name); } -} - -// class is a function -alert(typeof User); // function - -// ...or, more precisely, the constructor method -alert(User === User.prototype.constructor); // true - -// The methods are in User.prototype, e.g: -alert(User.prototype.sayHi); // alert(this.name); - -// there are exactly two methods in the prototype -alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi -``` - -## Not just a syntactic sugar - -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 - -// 1. Create constructor function -function User(name) { - this.name = name; -} -// a function prototype has "constructor" property by default, -// so we don't need to create it - -// 2. Add the method to prototype -User.prototype.sayHi = function() { - alert(this.name); -}; - -// Usage: -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 syntactic sugar to define a constructor together with its prototype methods. - -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. - - 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 { - constructor() {} - } - - alert(typeof User); // function - User(); // Error: Class constructor User cannot be invoked without 'new' - ``` - - Also, a string representation of a class constructor in most JavaScript engines starts with the "class..." - - ```js run - class User { - constructor() {} - } - - 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"`. - - That's good, because if we `for..in` over an object, we usually don't want its class methods. - -3. Classes always `use strict`. - All code inside the class construct is automatically in strict mode. - -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. - -Here's an example of a class expression: - -```js -let User = class { - sayHi() { - alert("Hello"); - } -}; -``` - -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: - -```js run -// "Named Class Expression" -// (no such term in the spec, but that's similar to Named Function Expression) -let User = class *!*MyClass*/!* { - sayHi() { - alert(MyClass); // MyClass name is visible only inside the class - } -}; - -new User().sayHi(); // works, shows MyClass definition - -alert(MyClass); // error, MyClass name isn't visible outside of the class -``` - -We can even make classes dynamically "on-demand", like this: - -```js run -function makeClass(phrase) { - // declare a class and return it - return class { - sayHi() { - alert(phrase); - }; - }; -} - -// Create a new class -let User = makeClass("Hello"); - -new User().sayHi(); // Hello -``` - - -## Getters/setters - -Just like literal objects, classes may include getters/setters, computed properties etc. - -Here's an example for `user.name` implemented using `get/set`: - -```js run -class User { - - constructor(name) { - // invokes the setter - this.name = name; - } - -*!* - get name() { -*/!* - return this._name; - } - -*!* - set name(value) { -*/!* - if (value.length < 4) { - alert("Name is too short."); - return; - } - this._name = value; - } - -} - -let user = new User("John"); -alert(user.name); // John - -user = new User(""); // Name is too short. -``` - -Technically, such class declaration works by creating getters and setters in `User.prototype`. - -## Computed names [...] - -Here's an example with a computed method name using brackets `[...]`: - -```js run -class User { - -*!* - ['say' + 'Hi']() { -*/!* - alert("Hello"); - } - -} - -new User().sayHi(); -``` - -Such features are easy to remember, as they resemble that of literal objects. - -## Class fields - -```warn header="Old browsers may need a polyfill" -Class fields are a recent addition to the language. -``` - -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 = "John"; -*/!* - - sayHi() { - alert(`Hello, ${this.name}!`); - } -} - -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 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 - -The basic class syntax looks like this: - -```js -class MyClass { - prop = value; // property - - constructor(...) { // constructor - // ... - } - - method(...) {} // method - - get something(...) {} // getter method - set something(...) {} // setter method - - [Symbol.iterator]() {} // method with computed name (symbol here) - // ... -} -``` - -`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/01-class/class-user.svg b/1-js/09-classes/01-class/class-user.svg deleted file mode 100644 index 95b58179b6..0000000000 --- a/1-js/09-classes/01-class/class-user.svg +++ /dev/null @@ -1 +0,0 @@ -sayHi: functionUserUser.prototypeprototypeconstructor: User \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md b/1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md deleted file mode 100644 index 4711e48271..0000000000 --- a/1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md +++ /dev/null @@ -1,27 +0,0 @@ -That's because the child constructor must call `super()`. - -Here's the corrected code: - -```js run -class Animal { - - constructor(name) { - this.name = name; - } - -} - -class Rabbit extends Animal { - constructor(name) { - *!* - super(name); - */!* - this.created = Date.now(); - } -} - -*!* -let rabbit = new Rabbit("White Rabbit"); // ok now -*/!* -alert(rabbit.name); // White Rabbit -``` diff --git a/1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md b/1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md deleted file mode 100644 index 380a4720b2..0000000000 --- a/1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md +++ /dev/null @@ -1,30 +0,0 @@ -importance: 5 - ---- - -# Error creating an instance - -Here's the code with `Rabbit` extending `Animal`. - -Unfortunately, `Rabbit` objects can't be created. What's wrong? Fix it. -```js run -class Animal { - - constructor(name) { - this.name = name; - } - -} - -class Rabbit extends Animal { - constructor(name) { - this.name = name; - this.created = Date.now(); - } -} - -*!* -let rabbit = new Rabbit("White Rabbit"); // Error: this is not defined -*/!* -alert(rabbit.name); -``` diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md deleted file mode 100644 index dcb4ffe59a..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md +++ /dev/null @@ -1 +0,0 @@ -[js src="http://github.com/solution.view/extended-clock.js"] diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js deleted file mode 100644 index d701c0caeb..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js +++ /dev/null @@ -1,34 +0,0 @@ -class Clock { - constructor({ template }) { - this.template = template; - } - - render() { - let date = new Date(); - - let hours = date.getHours(); - if (hours < 10) hours = '0' + hours; - - let mins = date.getMinutes(); - if (mins < 10) mins = '0' + mins; - - let secs = date.getSeconds(); - if (secs < 10) secs = '0' + secs; - - let output = this.template - .replace('h', hours) - .replace('m', mins) - .replace('s', secs); - - console.log(output); - } - - stop() { - clearInterval(this.timer); - } - - start() { - this.render(); - this.timer = setInterval(() => this.render(), 1000); - } -} 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 deleted file mode 100644 index be2053cfcf..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js +++ /dev/null @@ -1,12 +0,0 @@ -class ExtendedClock extends Clock { - constructor(options) { - super(options); - let { precision = 1000 } = options; - this.precision = precision; - } - - start() { - this.render(); - this.timer = setInterval(() => this.render(), this.precision); - } -}; diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html deleted file mode 100644 index f76a436238..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js deleted file mode 100644 index d701c0caeb..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js +++ /dev/null @@ -1,34 +0,0 @@ -class Clock { - constructor({ template }) { - this.template = template; - } - - render() { - let date = new Date(); - - let hours = date.getHours(); - if (hours < 10) hours = '0' + hours; - - let mins = date.getMinutes(); - if (mins < 10) mins = '0' + mins; - - let secs = date.getSeconds(); - if (secs < 10) secs = '0' + secs; - - let output = this.template - .replace('h', hours) - .replace('m', mins) - .replace('s', secs); - - console.log(output); - } - - stop() { - clearInterval(this.timer); - } - - start() { - this.render(); - this.timer = setInterval(() => this.render(), 1000); - } -} diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html deleted file mode 100644 index c0609858b8..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md deleted file mode 100644 index bbc2c6a43c..0000000000 --- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md +++ /dev/null @@ -1,15 +0,0 @@ -importance: 5 - ---- - -# Extended clock - -We've got a `Clock` class. As of now, it prints the time every second. - - -[js src="http://github.com/source.view/clock.js"] - -Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default. - -- Your code should be in the file `extended-clock.js` -- Don't modify the original `clock.js`. Extend it. diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg deleted file mode 100644 index 3471904ab9..0000000000 --- a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg +++ /dev/null @@ -1 +0,0 @@ -constructor: Animal run: function stop: functionAnimal.prototypeconstructor: Rabbit hide: functionRabbit.prototypeAnimalRabbitnew Rabbit[[Prototype]][[Prototype]]prototypeprototypename: "White Rabbit"constructorconstructorextends \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md deleted file mode 100644 index 3ce6d2995e..0000000000 --- a/1-js/09-classes/02-class-inheritance/article.md +++ /dev/null @@ -1,630 +0,0 @@ - -# Class inheritance - -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 -*!* -class Rabbit extends Animal { -*/!* - hide() { - alert(`${this.name} hides!`); - } -} - -let rabbit = new Rabbit("White Rabbit"); - -rabbit.run(5); // White Rabbit runs with speed 5. -rabbit.hide(); // White Rabbit hides! -``` - -Object of `Rabbit` class have access to both `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. - -````smart header="Any expression is allowed after `extends`" -Class syntax allows to specify not just a class, but any expression after `extends`. - -For instance, a function call that generates the parent class: - -```js run -function f(phrase) { - return class { - sayHi() { alert(phrase) } - } -} - -*!* -class User extends f("Hello") {} -*/!* - -new User().sayHi(); // Hello -``` -Here `class User` inherits from the result of `f("Hello")`. - -That may be useful for advanced programming patterns when we use functions to generate classes depending on many conditions and can inherit from them. -```` - -## Overriding a method - -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: - -```js -class Rabbit extends Animal { - stop() { - // ...now this will be used for rabbit.stop() - // instead of stop() from class Animal - } -} -``` - -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. - -Classes provide `"super"` keyword for that. - -- `super.method(...)` to call a parent method. -- `super(...)` to call a parent constructor (inside our constructor only). - -For instance, let our rabbit autohide when stopped: - -```js run -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.`); - } - -} - -class Rabbit extends Animal { - hide() { - alert(`${this.name} hides!`); - } - -*!* - stop() { - super.stop(); // call parent stop - this.hide(); // and then hide - } -*/!* -} - -let rabbit = new Rabbit("White Rabbit"); - -rabbit.run(5); // White Rabbit runs with speed 5. -rabbit.stop(); // White Rabbit stands still. White rabbit hides! -``` - -Now `Rabbit` has the `stop` method that calls the parent `super.stop()` in the process. - -````smart header="Arrow functions have no `super`" -As was mentioned in the chapter , arrow functions do not have `super`. - -If accessed, it's taken from the outer function. For instance: -```js -class Rabbit extends Animal { - stop() { - setTimeout(() => super.stop(), 1000); // call parent stop after 1sec - } -} -``` - -The `super` in the arrow function is the same as in `stop()`, so it works as intended. If we specified a "regular" function here, there would be an error: - -```js -// Unexpected super -setTimeout(function() { super.stop() }, 1000); -``` -```` - - -## Overriding constructor - -With constructors it gets a little bit tricky. - -Until now, `Rabbit` did not have its own `constructor`. - -According to the [specification](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation), if a class extends another class and has no `constructor`, then the following "empty" `constructor` is generated: - -```js -class Rabbit extends Animal { - // generated for extending classes without own constructors -*!* - constructor(...args) { - super(...args); - } -*/!* -} -``` - -As we can see, it basically calls the parent `constructor` passing it all the arguments. That happens if we don't write a constructor of our own. - -Now let's add a custom constructor to `Rabbit`. It will specify the `earLength` in addition to `name`: - -```js run -class Animal { - constructor(name) { - this.speed = 0; - this.name = name; - } - // ... -} - -class Rabbit extends Animal { - -*!* - constructor(name, earLength) { - this.speed = 0; - this.name = name; - this.earLength = earLength; - } -*/!* - - // ... -} - -*!* -// Doesn't work! -let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined. -*/!* -``` - -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`.** - -...But why? What's going on here? Indeed, the requirement seems strange. - -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: - -```js run -class Animal { - - constructor(name) { - this.speed = 0; - this.name = name; - } - - // ... -} - -class Rabbit extends Animal { - - constructor(name, earLength) { -*!* - super(name); -*/!* - this.earLength = earLength; - } - - // ... -} - -*!* -// now fine -let rabbit = new Rabbit("White Rabbit", 10); -alert(rabbit.name); // White Rabbit -alert(rabbit.earLength); // 10 -*/!* -``` - - - -### 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), -- Imediately 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. - -First to say, from all that we've learned till now, it's impossible for `super` to work at all! - -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? - -The task may seem simple, but it isn't. The engine knows the current object `this`, so it could get the parent `method` as `this.__proto__.method`. Unfortunately, such a "naive" solution won't work. - -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__`: - -```js run -let animal = { - name: "Animal", - eat() { - alert(`${this.name} eats.`); - } -}; - -let rabbit = { - __proto__: animal, - name: "Rabbit", - eat() { -*!* - // that's how super.eat() could presumably work - this.__proto__.eat.call(this); // (*) -*/!* - } -}; - -rabbit.eat(); // Rabbit eats. -``` - -At the line `(*)` we take `eat` from the prototype (`animal`) and call it in the context of the current object. Please note that `.call(this)` is important here, because a simple `this.__proto__.eat()` would execute parent `eat` in the context of the prototype, not the current object. - -And in the code above it actually works as intended: we have the correct `alert`. - -Now let's add one more object to the chain. We'll see how things break: - -```js run -let animal = { - name: "Animal", - eat() { - alert(`${this.name} eats.`); - } -}; - -let rabbit = { - __proto__: animal, - eat() { - // ...bounce around rabbit-style and call parent (animal) method - this.__proto__.eat.call(this); // (*) - } -}; - -let longEar = { - __proto__: rabbit, - eat() { - // ...do something with long ears and call parent (rabbit) method - this.__proto__.eat.call(this); // (**) - } -}; - -*!* -longEar.eat(); // Error: Maximum call stack size exceeded -*/!* -``` - -The code doesn't work anymore! We can see the error trying to call `longEar.eat()`. - -It may be not that obvious, but if we trace `longEar.eat()` call, then we can see why. In both lines `(*)` and `(**)` the value of `this` is the current object (`longEar`). That's essential: all object methods get the current object as `this`, not a prototype or something. - -So, in both lines `(*)` and `(**)` the value of `this.__proto__` is exactly the same: `rabbit`. They both call `rabbit.eat` without going up the chain in the endless loop. - -Here's the picture of what happens: - -![](this-super-loop.svg) - -1. Inside `longEar.eat()`, the line `(**)` calls `rabbit.eat` providing it with `this=longEar`. - ```js - // inside longEar.eat() we have this = longEar - this.__proto__.eat.call(this) // (**) - // becomes - longEar.__proto__.eat.call(this) - // that is - rabbit.eat.call(this); - ``` -2. Then in the line `(*)` of `rabbit.eat`, we'd like to pass the call even higher in the chain, but `this=longEar`, so `this.__proto__.eat` is again `rabbit.eat`! - - ```js - // inside rabbit.eat() we also have this = longEar - this.__proto__.eat.call(this) // (*) - // becomes - longEar.__proto__.eat.call(this) - // or (again) - rabbit.eat.call(this); - ``` - -3. ...So `rabbit.eat` calls itself in the endless loop, because it can't ascend any further. - -The problem can't be solved by using `this` alone. - -### `[[HomeObject]]` - -To provide the solution, JavaScript adds one more special internal property for functions: `[[HomeObject]]`. - -When a function is specified as a class or object method, its `[[HomeObject]]` property becomes that object. - -Then `super` uses it to resolve the parent prototype and its methods. - -Let's see how it works, first with plain objects: - -```js run -let animal = { - name: "Animal", - eat() { // animal.eat.[[HomeObject]] == animal - alert(`${this.name} eats.`); - } -}; - -let rabbit = { - __proto__: animal, - name: "Rabbit", - eat() { // rabbit.eat.[[HomeObject]] == rabbit - super.eat(); - } -}; - -let longEar = { - __proto__: rabbit, - name: "Long Ear", - eat() { // longEar.eat.[[HomeObject]] == longEar - super.eat(); - } -}; - -*!* -// works correctly -longEar.eat(); // Long Ear eats. -*/!* -``` - -It works as intended, due to `[[HomeObject]]` mechanics. A method, such as `longEar.eat`, knows its `[[HomeObject]]` and takes the parent method from its prototype. Without any use of `this`. - -### Methods are not "free" - -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 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` result after copying: - -```js run -let animal = { - sayHi() { - console.log(`I'm an animal`); - } -}; - -// rabbit inherits from animal -let rabbit = { - __proto__: animal, - sayHi() { - super.sayHi(); - } -}; - -let plant = { - sayHi() { - console.log("I'm a plant"); - } -}; - -// tree inherits from plant -let tree = { - __proto__: plant, -*!* - sayHi: rabbit.sayHi // (*) -*/!* -}; - -*!* -tree.sayHi(); // I'm an animal (?!?) -*/!* -``` - -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? -- 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`. - -Here's the diagram of what happens: - -![](super-homeobject-wrong.svg) - -### Methods, not function properties - -`[[HomeObject]]` is defined for methods both in classes and in plain objects. But for objects, methods must be specified exactly as `method()`, not as `"method: function()"`. - -The difference may be non-essential for us, but it's important for JavaScript. - -In the example below a non-method syntax is used for comparison. `[[HomeObject]]` property is not set and the inheritance doesn't work: - -```js run -let animal = { - eat: function() { // intentionally writing like this instead of eat() {... - // ... - } -}; - -let rabbit = { - __proto__: animal, - eat: function() { - super.eat(); - } -}; - -*!* -rabbit.eat(); // Error calling super (because there's no [[HomeObject]]) -*/!* -``` - -## Summary - -1. To extend a class: `class Child extends Parent`: - - That means `Child.prototype.__proto__` will be `Parent.prototype`, so methods are inherited. -2. When overriding a constructor: - - We must call parent constructor as `super()` in `Child` constructor before using `this`. -3. When overriding another method: - - We can use `super.method()` in a `Child` method to call `Parent` method. -4. Internals: - - Methods remember their class/object in the internal `[[HomeObject]]` property. That's how `super` resolves parent methods. - - So it's not safe to copy a method with `super` from one object to another. - -Also: -- 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/02-class-inheritance/class-inheritance-array-object.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg deleted file mode 100644 index 10af6c4c23..0000000000 --- a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg +++ /dev/null @@ -1 +0,0 @@ -slice: function ...Array.prototypearrhasOwnProperty: function ...Object.prototype[1, 2, 3][[Prototype]][[Prototype]] \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg deleted file mode 100644 index a81676e25c..0000000000 --- a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg +++ /dev/null @@ -1 +0,0 @@ -jump: functionRabbit.prototyperabbiteat: functionAnimal.prototypename: "White Rabbit"[[Prototype]][[Prototype]]Rabbit.prototype.__proto__ = Animal.prototype sets thistoString: function hasOwnProperty: function ...Object.prototype[[Prototype]][[Prototype]]null \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg deleted file mode 100644 index 35529aa432..0000000000 --- a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg +++ /dev/null @@ -1 +0,0 @@ -methods of RabbitRabbit.prototyperabbitmethods of AnimalAnimal.prototype[[Prototype]][[Prototype]]properties of rabbit \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg deleted file mode 100644 index 905efe37a5..0000000000 --- a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg +++ /dev/null @@ -1 +0,0 @@ - constructor: Animal run: function stop: functionAnimal.prototypeAnimalnew Animal[[Prototype]]prototypename: "My animal" \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg deleted file mode 100644 index 81bf1850b0..0000000000 --- a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg +++ /dev/null @@ -1 +0,0 @@ - constructor: Rabbit hide: functionRabbit.prototypeRabbitnew Rabbit[[Prototype]]prototypename: "My rabbit" \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg deleted file mode 100644 index f13d441c92..0000000000 --- a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg +++ /dev/null @@ -1 +0,0 @@ -sayHiplantsayHitreesayHianimalrabbit[[HomeObject]]sayHi \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop.svg b/1-js/09-classes/02-class-inheritance/this-super-loop.svg deleted file mode 100644 index bc200fab33..0000000000 --- a/1-js/09-classes/02-class-inheritance/this-super-loop.svg +++ /dev/null @@ -1 +0,0 @@ -rabbitlongEarrabbitlongEar \ No newline at end of file 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 deleted file mode 100644 index 34d783b4de..0000000000 --- a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/rabbit-extends-object.svg +++ /dev/null @@ -1 +0,0 @@ -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/03-static-properties-methods/3-class-extend-object/solution.md b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md deleted file mode 100644 index ca9e80601b..0000000000 --- a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md +++ /dev/null @@ -1,81 +0,0 @@ -First, let's see why the latter code doesn't work. - -The reason becomes obvious if we try to run it. An inheriting class constructor must call `super()`. Otherwise `"this"` won't be "defined". - -So here's the fix: - -```js run -class Rabbit extends Object { - constructor(name) { -*!* - super(); // need to call the parent constructor when inheriting -*/!* - this.name = name; - } -} - -let rabbit = new Rabbit("Rab"); - -alert( rabbit.hasOwnProperty('name') ); // true -``` - -But that's not all yet. - -Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`. - -As we know, the "extends" syntax sets up two prototypes: - -1. Between `"prototype"` of the constructor functions (for methods). -2. Between the constructor functions themselves (for static methods). - -In our case, for `class Rabbit extends Object` it means: - -```js run -class Rabbit extends Object {} - -alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true -alert( Rabbit.__proto__ === Object ); // (2) true -``` - -So `Rabbit` now provides access to static methods of `Object` via `Rabbit`, like this: - -```js run -class Rabbit extends Object {} - -*!* -// normally we call Object.getOwnPropertyNames -alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b -*/!* -``` - -But if we don't have `extends Object`, then `Rabbit.__proto__` is not set to `Object`. - -Here's the demo: - -```js run -class Rabbit {} - -alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true -alert( Rabbit.__proto__ === Object ); // (2) false (!) -alert( Rabbit.__proto__ === Function.prototype ); // as any function by default - -*!* -// error, no such function in Rabbit -alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error -*/!* -``` - -So `Rabbit` doesn't provide access to static methods of `Object` in that case. - -By the way, `Function.prototype` has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`. - -Here's the picture: - -![](rabbit-extends-object.svg) - -So, to put it short, there are two differences: - -| class Rabbit | class Rabbit extends Object | -|--------------|------------------------------| -| -- | needs to call `super()` in constructor | -| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` | diff --git a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md deleted file mode 100644 index 1d0f98a74e..0000000000 --- a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md +++ /dev/null @@ -1,42 +0,0 @@ -importance: 3 - ---- - -# Class extends Object? - -As we know, all objects normally inherit from `Object.prototype` and get access to "generic" object methods like `hasOwnProperty` etc. - -For instance: - -```js run -class Rabbit { - constructor(name) { - this.name = name; - } -} - -let rabbit = new Rabbit("Rab"); - -*!* -// hasOwnProperty method is from Object.prototype -alert( rabbit.hasOwnProperty('name') ); // true -*/!* -``` - -But if we spell it out explicitly like `"class Rabbit extends Object"`, then the result would be different from a simple `"class Rabbit"`? - -What's the difference? - -Here's an example of such code (it doesn't work -- why? fix it?): - -```js -class Rabbit extends Object { - constructor(name) { - this.name = name; - } -} - -let rabbit = new Rabbit("Rab"); - -alert( rabbit.hasOwnProperty('name') ); // Error -``` diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg deleted file mode 100644 index 18093d7cfc..0000000000 --- a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg +++ /dev/null @@ -1 +0,0 @@ -constructor: Animal run: functionAnimal.prototypeconstructor: Rabbit hide: functionRabbit.prototypeAnimalRabbitrabbit[[Prototype]][[Prototype]][[Prototype]]prototypeprototypecomparename: "White Rabbit" \ No newline at end of file diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md deleted file mode 100644 index ab08f2ded5..0000000000 --- a/1-js/09-classes/03-static-properties-methods/article.md +++ /dev/null @@ -1,234 +0,0 @@ - -# Static properties and methods - -We can also assign a method to the class function itself, not to its `"prototype"`. Such methods are called *static*. - -In a class, they are prepended by `static` keyword, like this: - -```js run -class User { -*!* - static staticMethod() { -*/!* - alert(this === User); - } -} - -User.staticMethod(); // true -``` - -That actually does the same as assigning it as a property directly: - -```js run -class User { } - -User.staticMethod = function() { - alert(this === User); -}; - -User.staticMethod(); // true -``` - -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. A natural solution would be to add `Article.compare` method, like this: - -```js run -class Article { - constructor(title, date) { - this.title = title; - this.date = date; - } - -*!* - static compare(articleA, articleB) { - return articleA.date - articleB.date; - } -*/!* -} - -// usage -let articles = [ - new Article("HTML", new Date(2019, 1, 1)), - new Article("CSS", new Date(2019, 0, 1)), - new Article("JavaScript", new Date(2019, 11, 1)) -]; - -*!* -articles.sort(Article.compare); -*/!* - -alert( articles[0].title ); // CSS -``` - -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. ...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. - -Like `Article.createTodays()` here: - -```js run -class Article { - constructor(title, date) { - this.title = title; - this.date = date; - } - -*!* - static createTodays() { - // remember, this = Article - return new this("Today's digest", new Date()); - } -*/!* -} - -let article = Article.createTodays(); - -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. - -Static methods are also used in database-related classes to search/save/remove entries from the database, like this: - -```js -// assuming Article is a special class for managing articles -// static method to remove the article: -Article.remove({id: 12345}); -``` - -## Static properties - -[recent browser=Chrome] - -Static properties are also possible, they look like regular class properties, but prepended by `static`: - -```js run -class Article { - static publisher = "Ilya Kantor"; -} - -alert( Article.publisher ); // Ilya Kantor -``` - -That is the same as a direct assignment to `Article`: - -```js -Article.publisher = "Ilya Kantor"; -``` - -## Inheritance of static properties and methods - -Static properties and methods are inherited. - -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; - this.name = name; - } - - run(speed = 0) { - this.speed += speed; - alert(`${this.name} runs with speed ${this.speed}.`); - } - -*!* - static compare(animalA, animalB) { - return animalA.speed - animalB.speed; - } -*/!* - -} - -// Inherit from Animal -class Rabbit extends Animal { - hide() { - alert(`${this.name} hides!`); - } -} - -let rabbits = [ - new Rabbit("White Rabbit", 10), - new Rabbit("Black Rabbit", 5) -]; - -*!* -rabbits.sort(Rabbit.compare); -*/!* - -rabbits[0].run(); // Black Rabbit runs with speed 5. - -alert(Rabbit.planet); // Earth -``` - -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) - -So, `Rabbit extends Animal` creates two `[[Prototype]]` references: - -1. `Rabbit` function prototypally inherits from `Animal` function. -2. `Rabbit.prototype` prototypally inherits from `Animal.prototype`. - -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 statics -alert(Rabbit.__proto__ === Animal); // true - -// for regular methods -alert(Rabbit.prototype.__proto__ === Animal.prototype); // true -``` - -## Summary - -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. - -The syntax is: - -```js -class MyClass { - static property = ...; - - static method() { - ... - } -} -``` - -Technically, static declaration is the same as assigning to the class itself: - -```js -MyClass.property = ... -MyClass.method = ... -``` - -Static properties and methods are inherited. - -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 deleted file mode 100644 index 60ed0ef1bf..0000000000 --- a/1-js/09-classes/04-private-protected-properties-methods/article.md +++ /dev/null @@ -1,316 +0,0 @@ - -# Private and protected properties and methods - -One of the most important principles of object oriented programming -- delimiting internal interface from the external one. - -That is "a must" practice in developing anything more complex than a "hello world" app. - -To understand this, let's break away from development and turn our eyes into the real world. - -Usually, devices that we're using are quite complex. But delimiting the internal interface from the external one allows to use them without problems. - -## A real-life example - -For instance, a coffee machine. Simple from outside: a button, a display, a few holes...And, surely, the result -- great coffee! :) - -![](coffee.jpg) - -But inside... (a picture from the repair manual) - -![](coffee-inside.jpg) - -A lot of details. But we can use it without knowing anything. - -Coffee machines are quite reliable, aren't they? We can use one for years, and only if something goes wrong -- bring it for repairs. - -The secret of reliability and simplicity of a coffee machine -- all details are well-tuned and *hidden* inside. - -If we remove the protective cover from the coffee machine, then using it will be much more complex (where to press?), and dangerous (it can electrocute). - -As we'll see, in programming objects are like coffee machines. - -But in order to hide inner details, we'll use not a protective cover, but rather special syntax of the language and conventions. - -## Internal and external interface - -In object-oriented programming, properties and methods are split into two groups: - -- *Internal interface* -- methods and properties, accessible from other methods of the class, but not from the outside. -- *External interface* -- methods and properties, accessible also from outside the class. - -If we continue the analogy with the coffee machine -- what's hidden inside: a boiler tube, heating element, and so on -- is its internal interface. - -An internal interface is used for the object to work, its details use each other. For instance, a boiler tube is attached to the heating element. - -But from the outside a coffee machine is closed by the protective cover, so that no one can reach those. Details are hidden and inaccessible. We can use its features via the external interface. - -So, all we need to use an object is to know its external interface. We may be completely unaware how it works inside, and that's great. - -That was a general introduction. - -In JavaScript, there are two types of object fields (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 (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. - -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" - -Let's make a simple coffee machine class first: - -```js run -class CoffeeMachine { - waterAmount = 0; // the amount of water inside - - constructor(power) { - this.power = power; - alert( `Created a coffee-machine, power: ${power}` ); - } - -} - -// create the coffee machine -let coffeeMachine = new CoffeeMachine(100); - -// add water -coffeeMachine.waterAmount = 200; -``` - -Right now the properties `waterAmount` and `power` are public. We can easily get/set them from the outside to any value. - -Let's change `waterAmount` property to protected to have more control over it. For instance, we don't want anyone to set it below zero. - -**Protected properties are usually prefixed with an underscore `_`.** - -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`: - -```js run -class CoffeeMachine { - _waterAmount = 0; - - set waterAmount(value) { - if (value < 0) throw new Error("Negative water"); - this._waterAmount = value; - } - - get waterAmount() { - return this._waterAmount; - } - - constructor(power) { - this._power = power; - } - -} - -// create the coffee machine -let coffeeMachine = new CoffeeMachine(100); - -// add water -coffeeMachine.waterAmount = -10; // Error: Negative water -``` - -Now the access is under control, so setting the water below zero fails. - -## Read-only "power" - -For `power` property, let's make it read-only. It sometimes happens that a property must be set at creation time only, and then never modified. - -That's exactly the case for a coffee machine: power never changes. - -To do so, we only need to make getter, but not the setter: - -```js run -class CoffeeMachine { - // ... - - constructor(power) { - this._power = power; - } - - get power() { - return this._power; - } - -} - -// create the coffee machine -let coffeeMachine = new CoffeeMachine(100); - -alert(`Power is: ${coffeeMachine.power}W`); // Power is: 100W - -coffeeMachine.power = 25; // Error (no setter) -``` - -````smart header="Getter/setter functions" -Here we used getter/setter syntax. - -But most of the time `get.../set...` functions are preferred, like this: - -```js -class CoffeeMachine { - _waterAmount = 0; - - *!*setWaterAmount(value)*/!* { - if (value < 0) throw new Error("Negative water"); - this._waterAmount = value; - } - - *!*getWaterAmount()*/!* { - return this._waterAmount; - } -} - -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). - -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" -If we inherit `class MegaMachine extends CoffeeMachine`, then nothing prevents us from accessing `this._waterAmount` or `this._power` from the methods of the new class. - -So protected fields are naturally inheritable. Unlike private ones that we'll see below. -``` - -## Private "#waterLimit" - -[recent browser=none] - -There's a finished JavaScript proposal, almost in the standard, that provides language-level support for private properties and methods. - -Privates should start with `#`. They are only accessible from inside the class. - -For instance, here's a private `#waterLimit` property and the water-checking private method `#checkWater`: - -```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"); - } -*/!* - -} - -let coffeeMachine = new CoffeeMachine(); - -*!* -// can't access privates from outside of the class -coffeeMachine.#checkWater(); // Error -coffeeMachine.#waterLimit = 1000; // Error -*/!* -``` - -On the language level, `#` is a special sign that the field is private. We can't access it from outside or from inheriting classes. - -Private fields do not conflict with public ones. We can have both private `#waterAmount` and public `waterAmount` fields at the same time. - -For instance, let's make `waterAmount` an accessor for `#waterAmount`: - -```js run -class CoffeeMachine { - - #waterAmount = 0; - - get waterAmount() { - return this.#waterAmount; - } - - set waterAmount(value) { - if (value < 0) throw new Error("Negative water"); - this.#waterAmount = value; - } -} - -let machine = new CoffeeMachine(); - -machine.waterAmount = 100; -alert(machine.#waterAmount); // Error -``` - -Unlike protected ones, private fields are enforced by the language itself. That's a good thing. - -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 { - method() { -*!* - alert( this.#waterAmount ); // Error: can only access from CoffeeMachine -*/!* - } -} -``` - -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 header="Private fields are not available as this[name]" -Private fields are special. - -As we know, usually we can access fields using `this[name]`: - -```js -class User { - ... - sayHi() { - let fieldName = "name"; - alert(`Hello, ${*!*this[fieldName]*/!*}`); - } -} -``` - -With private fields that's impossible: `this['#name']` doesn't work. That's a syntax limitation to ensure privacy. -```` - -## 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)). - -It gives the following benefits: - -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. - - That's surely not John's fault, but rather the person who removed the protective cover and let John do his manipulations. - - The same in programming. If a user of a class will change things not intended to be changed from the outside -- the consequences are unpredictable. - -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 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 internally, but still simple to upgrade if the external interface is the same. - -Hiding complexity -: 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 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 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/04-private-protected-properties-methods/coffee-inside.jpg b/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg deleted file mode 100644 index 60f84664d1..0000000000 Binary files a/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg and /dev/null differ diff --git a/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg b/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg deleted file mode 100644 index ee26e1c064..0000000000 Binary files a/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg and /dev/null differ diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md deleted file mode 100644 index 28b4c6eb64..0000000000 --- a/1-js/09-classes/05-extend-natives/article.md +++ /dev/null @@ -1,89 +0,0 @@ - -# Extending built-in classes - -Built-in classes like Array, Map and others are extendable also. - -For instance, here `PowerArray` inherits from the native `Array`: - -```js run -// add one more method to it (can do more) -class PowerArray extends Array { - isEmpty() { - return this.length === 0; - } -} - -let arr = new PowerArray(1, 2, 5, 10, 50); -alert(arr.isEmpty()); // false - -let filteredArr = arr.filter(item => item >= 10); -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 `PowerArray`. Their internal implementation uses the object's `constructor` property for that. - -In the example above, -```js -arr.constructor === PowerArray -``` - -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 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` or `filter` to return regular arrays, we can return `Array` in `Symbol.species`, like here: - -```js run -class PowerArray extends Array { - isEmpty() { - return this.length === 0; - } - -*!* - // built-in methods will use this as the constructor - static get [Symbol.species]() { - return Array; - } -*/!* -} - -let arr = new PowerArray(1, 2, 5, 10, 50); -alert(arr.isEmpty()); // false - -// filter creates new array using arr.constructor[Symbol.species] as constructor -let filteredArr = arr.filter(item => item >= 10); - -*!* -// filteredArr is not PowerArray, but Array -*/!* -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. That was thoroughly explained in the article [](info:static-properties-methods#statics-and-inheritance). - -But built-in classes are an exception. They don't inherit statics 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 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) - -As you can see, there's no link between `Date` and `Object`. They are independent, only `Date.prototype` inherits from `Object.prototype`. - -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/05-extend-natives/object-date-inheritance.svg b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg deleted file mode 100644 index 470aabf7f8..0000000000 --- a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg +++ /dev/null @@ -1 +0,0 @@ -constructor: Object toString: function hasOwnProperty: function ...Object.prototypeconstructor: Date toString: function getDate: function ...Date.prototypeObjectDatenew Date()[[Prototype]][[Prototype]]prototypeprototypedefineProperty keys ...now parse ...1 Jan 2019 \ No newline at end of file diff --git a/1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md b/1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md deleted file mode 100644 index d41d90edf4..0000000000 --- a/1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md +++ /dev/null @@ -1,7 +0,0 @@ -Yeah, looks strange indeed. - -But `instanceof` does not care about the function, but rather about its `prototype`, that it matches against the prototype chain. - -And here `a.__proto__ == B.prototype`, so `instanceof` returns `true`. - -So, by the logic of `instanceof`, the `prototype` actually defines the type, not the constructor function. 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 deleted file mode 100644 index 5b8dc7de3c..0000000000 --- a/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 5 - ---- - -# Strange instanceof - -In the code below, why does `instanceof` return `true`? We can easily see that `a` is not created by `B()`. - -```js run -function A() {} -function B() {} - -A.prototype = B.prototype = {}; - -let a = new A(); - -*!* -alert( a instanceof B ); // true -*/!* -``` diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md deleted file mode 100644 index dd3d61ca64..0000000000 --- a/1-js/09-classes/06-instanceof/article.md +++ /dev/null @@ -1,218 +0,0 @@ -# Class checking: "instanceof" - -The `instanceof` operator allows to check whether an object belongs to a certain class. It also takes inheritance into account. - -Such a check may be necessary in many cases. Here we'll use it for building a *polymorphic* function, the one that treats arguments differently depending on their type. - -## The instanceof operator [#ref-instanceof] - -The syntax is: -```js -obj instanceof Class -``` - -It returns `true` if `obj` belongs to the `Class` or a class inheriting from it. - -For instance: - -```js run -class Rabbit {} -let rabbit = new Rabbit(); - -// is it an object of Rabbit class? -*!* -alert( rabbit instanceof Rabbit ); // true -*/!* -``` - -It also works with constructor functions: - -```js run -*!* -// instead of class -function Rabbit() {} -*/!* - -alert( new Rabbit() instanceof Rabbit ); // true -``` - -...And with built-in classes like `Array`: - -```js run -let arr = [1, 2, 3]; -alert( arr instanceof Array ); // true -alert( arr instanceof Object ); // true -``` - -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`. - -The algorithm of `obj instanceof Class` works roughly as follows: - -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 - class Animal { - static [Symbol.hasInstance](obj) { - if (obj.canEat) return true; - } - } - - let obj = { canEat: true }; - - alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) is called - ``` - -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? - ... - // if any answer is true, return true - // otherwise, if we reached the end of the chain, return false - ``` - - 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: - - ```js run - class Animal {} - class Rabbit extends Animal {} - - let rabbit = new Rabbit(); - *!* - alert(rabbit instanceof Animal); // true - */!* - - // rabbit.__proto__ === Rabbit.prototype - *!* - // rabbit.__proto__.__proto__ === Animal.prototype (match!) - */!* - ``` - -Here's the illustration of what `rabbit instanceof Animal` compares with `Animal.prototype`: - -![](instanceof.svg) - -By the way, there's also a method [objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf), that returns `true` if `objA` is somewhere in the chain of prototypes for `objB`. So the test of `obj instanceof Class` can be rephrased as `Class.prototype.isPrototypeOf(obj)`. - -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. - -Like here: - -```js run -function Rabbit() {} -let rabbit = new Rabbit(); - -// changed the prototype -Rabbit.prototype = {}; - -// ...not a rabbit any more! -*!* -alert( rabbit instanceof Rabbit ); // false -*/!* -``` - -## Bonus: Object.prototype.toString for the type - -We already know that plain objects are converted to string as `[object Object]`: - -```js run -let obj = {}; - -alert(obj); // [object Object] -alert(obj.toString()); // the same -``` - -That's their implementation of `toString`. But there's a hidden feature that makes `toString` actually much more powerful than that. We can use it as an extended `typeof` and an alternative for `instanceof`. - -Sounds strange? Indeed. Let's demystify. - -By [specification](https://tc39.github.io/ecma262/#sec-object.prototype.tostring), the built-in `toString` can be extracted from the object and executed in the context of any other value. And its result depends on that value. - -- For a number, it will be `[object Number]` -- For a boolean, it will be `[object Boolean]` -- For `null`: `[object Null]` -- For `undefined`: `[object Undefined]` -- For arrays: `[object Array]` -- ...etc (customizable). - -Let's demonstrate: - -```js run -// copy toString method into a variable for convenience -let objectToString = Object.prototype.toString; - -// what type is this? -let arr = []; - -alert( objectToString.call(arr) ); // [object *!*Array*/!*] -``` - -Here we used [call](mdn:js/function/call) as described in the chapter [](info:call-apply-decorators) to execute the function `objectToString` in the context `this=arr`. - -Internally, the `toString` algorithm examines `this` and returns the corresponding result. More examples: - -```js run -let s = Object.prototype.toString; - -alert( s.call(123) ); // [object Number] -alert( s.call(null) ); // [object Null] -alert( s.call(alert) ); // [object Function] -``` - -### Symbol.toStringTag - -The behavior of Object `toString` can be customized using a special object property `Symbol.toStringTag`. - -For instance: - -```js run -let user = { - [Symbol.toStringTag]: "User" -}; - -alert( {}.toString.call(user) ); // [object User] -``` - -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 -alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest - -alert( {}.toString.call(window) ); // [object Window] -alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest] -``` - -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. - -## Summary - -Let's summarize the type-checking methods that we know: - -| | works for | returns | -|---------------|-------------|---------------| -| `typeof` | primitives | string | -| `{}.toString` | primitives, built-in objects, objects with `Symbol.toStringTag` | string | -| `instanceof` | objects | true/false | - -As we can see, `{}.toString` is technically a "more advanced" `typeof`. - -And `instanceof` operator really shines when we are working with a class hierarchy and want to check for the class taking into account inheritance. diff --git a/1-js/09-classes/06-instanceof/instanceof.svg b/1-js/09-classes/06-instanceof/instanceof.svg deleted file mode 100644 index 78bff9f12f..0000000000 --- a/1-js/09-classes/06-instanceof/instanceof.svg +++ /dev/null @@ -1 +0,0 @@ -Animal.prototypeObject.prototypeRabbit.prototype[[Prototype]]rabbit[[Prototype]][[Prototype]]null[[Prototype]]= Animal.prototype? \ No newline at end of file diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md deleted file mode 100644 index d43b96c963..0000000000 --- a/1-js/09-classes/07-mixins/article.md +++ /dev/null @@ -1,208 +0,0 @@ -# Mixins - -In JavaScript we can only inherit from a single object. There can be only one `[[Prototype]]` for an object. And a class may extend only one other class. - -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. - -There's a concept that can help here, called "mixins". - -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. - -In other words, a *mixin* provides methods that implement a certain behavior, but we do not use it alone, we use it to add the behavior to other classes. - -## A mixin example - -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. - -For instance here the mixin `sayHiMixin` is used to add some "speech" for `User`: - -```js run -*!* -// mixin -*/!* -let sayHiMixin = { - sayHi() { - alert(`Hello ${this.name}`); - }, - sayBye() { - alert(`Bye ${this.name}`); - } -}; - -*!* -// usage: -*/!* -class User { - constructor(name) { - this.name = name; - } -} - -// copy the methods -Object.assign(User.prototype, sayHiMixin); - -// now User can say hi -new User("Dude").sayHi(); // Hello Dude! -``` - -There's no inheritance, but a simple method copying. So `User` may inherit from another class and also include the mixin to "mix-in" the additional methods, like this: - -```js -class User extends Person { - // ... -} - -Object.assign(User.prototype, sayHiMixin); -``` - -Mixins can make use of inheritance inside themselves. - -For instance, here `sayHiMixin` inherits from `sayMixin`: - -```js run -let sayMixin = { - say(phrase) { - alert(phrase); - } -}; - -let sayHiMixin = { - __proto__: sayMixin, // (or we could use Object.create to set the prototype here) - - sayHi() { - *!* - // call parent method - */!* - super.say(`Hello ${this.name}`); // (*) - }, - sayBye() { - super.say(`Bye ${this.name}`); // (*) - } -}; - -class User { - constructor(name) { - this.name = name; - } -} - -// copy the methods -Object.assign(User.prototype, sayHiMixin); - -// now User can say hi -new User("Dude").sayHi(); // Hello Dude! -``` - -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]]`. - -## EventMixin - -Now let's make a mixin for real life. - -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. - -Or, a `menu` can generate the event `"select"` when a menu item is selected, and other objects may assign handlers to react on that event. And so on. - -Here's the code: - -```js run -let eventMixin = { - /** - * Subscribe to event, usage: - * menu.on('select', function(item) { ... } - */ - on(eventName, handler) { - if (!this._eventHandlers) this._eventHandlers = {}; - if (!this._eventHandlers[eventName]) { - this._eventHandlers[eventName] = []; - } - this._eventHandlers[eventName].push(handler); - }, - - /** - * Cancel the subscription, usage: - * menu.off('select', handler) - */ - off(eventName, handler) { - let handlers = this._eventHandlers?.[eventName]; - if (!handlers) return; - for (let i = 0; i < handlers.length; i++) { - if (handlers[i] === handler) { - handlers.splice(i--, 1); - } - } - }, - - /** - * Generate an event with the given name and data - * this.trigger('select', data1, data2); - */ - trigger(eventName, ...args) { - if (!this._eventHandlers?.[eventName]) { - return; // no handlers for that event name - } - - // call the handlers - this._eventHandlers[eventName].forEach(handler => handler.apply(this, args)); - } -}; -``` - - -- `.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`. - -Usage: - -```js run -// Make a class -class Menu { - choose(value) { - this.trigger("select", value); - } -} -// Add the mixin with event-related methods -Object.assign(Menu.prototype, eventMixin); - -let menu = new Menu(); - -// add a handler, to be called on selection: -*!* -menu.on("select", value => alert(`Value selected: ${value}`)); -*/!* - -// triggers the event => the handler above runs and shows: -// Value selected: 123 -menu.choose("123"); -``` - -Now, if we'd like any code to react to a menu selection, we can listen for it with `menu.on(...)`. - -And `eventMixin` mixin makes it easy to add such behavior to as many classes as we'd like, without interfering with the inheritance chain. - -## Summary - -*Mixin* -- is a generic object-oriented programming term: a class that contains methods for other classes. - -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. diff --git a/1-js/09-classes/07-mixins/head.html b/1-js/09-classes/07-mixins/head.html deleted file mode 100644 index 20e3a63547..0000000000 --- a/1-js/09-classes/07-mixins/head.html +++ /dev/null @@ -1,43 +0,0 @@ - diff --git a/1-js/09-classes/07-mixins/mixin-inheritance.svg b/1-js/09-classes/07-mixins/mixin-inheritance.svg deleted file mode 100644 index aaa8cb7d0d..0000000000 --- a/1-js/09-classes/07-mixins/mixin-inheritance.svg +++ /dev/null @@ -1 +0,0 @@ -sayHi: function sayBye: functionsayHiMixinsay: functionsayMixin[[Prototype]]constructor: User sayHi: function sayBye: functionUser.prototype[[Prototype]]name: ...user[[HomeObject] \ No newline at end of file diff --git a/1-js/09-classes/index.md b/1-js/09-classes/index.md deleted file mode 100644 index 87846ef6ba..0000000000 --- a/1-js/09-classes/index.md +++ /dev/null @@ -1 +0,0 @@ -# Classes 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 deleted file mode 100644 index 303431d6d0..0000000000 --- a/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md +++ /dev/null @@ -1,47 +0,0 @@ -The difference becomes obvious when we look at the code inside a function. - -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. - -```js run -function f() { - try { - alert('start'); -*!* - return "result"; -*/!* - } catch (e) { - /// ... - } finally { - alert('cleanup!'); - } -} - -f(); // cleanup! -``` - -...Or when there's a `throw`, like here: - -```js run -function f() { - try { - alert('start'); - throw new Error("an error"); - } catch (e) { - // ... - if("can't handle the error") { -*!* - throw e; -*/!* - } - - } finally { - alert('cleanup!') - } -} - -f(); // cleanup! -``` - -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. 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 deleted file mode 100644 index c573cc2327..0000000000 --- a/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md +++ /dev/null @@ -1,38 +0,0 @@ -importance: 5 - ---- - -# Finally or just the code? - -Compare the two code fragments. - -1. The first one uses `finally` to execute the code after `try..catch`: - - ```js - try { - work work - } catch (e) { - handle errors - } finally { - *!* - cleanup the working space - */!* - } - ``` -2. The second fragment puts the cleaning right after `try..catch`: - - ```js - try { - work work - } catch (e) { - handle errors - } - - *!* - cleanup the working space - */!* - ``` - -We definitely need the cleanup after the work, doesn't matter if there was an error or not. - -Is there an advantage here in using `finally` or both code fragments are equal? If there is such an advantage, then give an example when it matters. diff --git a/1-js/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md deleted file mode 100644 index 3a2dc4ed4e..0000000000 --- a/1-js/10-error-handling/1-try-catch/article.md +++ /dev/null @@ -1,675 +0,0 @@ -# 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. - -Usually, a script "dies" (immediately stops) in case of an error, printing it to console. - -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`: - -```js -try { - - // code... - -} catch (err) { - - // error handling - -} -``` - -It works like this: - -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. - -- An errorless example: shows `alert` `(1)` and `(2)`: - - ```js run - try { - - alert('Start of try runs'); // *!*(1) <--*/!* - - // ...no errors here - - alert('End of try runs'); // *!*(2) <--*/!* - - } catch(err) { - - alert('Catch is ignored, because there are no errors'); // (3) - - } - ``` -- An example with an error: shows `(1)` and `(3)`: - - ```js run - try { - - alert('Start of try runs'); // *!*(1) <--*/!* - - *!* - lalala; // error, variable is not defined! - */!* - - alert('End of try (never reached)'); // (2) - - } catch(err) { - - alert(`Error has occurred!`); // *!*(3) <--*/!* - - } - ``` - - -````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. - -It won't work if the code is syntactically wrong, for instance it has unmatched curly braces: - -```js run -try { - {{{{{{{{{{{{ -} catch(e) { - 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: - -```js run -try { - setTimeout(function() { - noSuchVariable; // script will die here - }, 1000); -} catch (e) { - alert( "won't work" ); -} -``` - -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!" ); - } -}, 1000); -``` -```` - -## Error object - -When an error occurs, JavaScript generates an object containing the details about it. The object is then passed as an argument to `catch`: - -```js -try { - // ... -} catch(err) { // <-- the "error object", could use another word instead of err - // ... -} -``` - -For all built-in errors, the error object has two main properties: - -`name` -: Error name. For instance, for an undefined variable that's `"ReferenceError"`. - -`message` -: Textual message about error details. - -There are other non-standard properties available in most environments. One of most widely used and supported is: - -`stack` -: Current call stack: a string with information about the sequence of nested calls that led to the error. Used for debugging purposes. - -For instance: - -```js run untrusted -try { -*!* - lalala; // error, variable is not defined! -*/!* -} catch(err) { - alert(err.name); // ReferenceError - alert(err.message); // lalala is not defined - alert(err.stack); // ReferenceError: lalala is not defined at (...call stack) - - // Can also show an error as a whole - // The error is converted to string as "name: message" - alert(err); // ReferenceError: lalala is not defined -} -``` - -## Optional "catch" binding - -[recent browser=new] - -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`. - -As we already know, JavaScript supports the [JSON.parse(str)](mdn:js/JSON/parse) method to read JSON-encoded values. - -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: - -```js run -let json = '{"name":"John", "age": 30}'; // data from the server - -*!* -let user = JSON.parse(json); // convert the text representation to JS object -*/!* - -// now user is an object with properties from the string -alert( user.name ); // John -alert( user.age ); // 30 -``` - -You can find more detailed information about JSON in the chapter. - -**If `json` is malformed, `JSON.parse` generates an error, so the script "dies".** - -Should we be satisfied with that? Of course not! - -This way, if something's wrong with the data, the visitor will never know that (unless they open the developer console). And people really don't like when something "just dies" without any error message. - -Let's use `try..catch` to handle the error: - -```js run -let json = "{ bad json }"; - -try { - -*!* - let user = JSON.parse(json); // <-- when an error occurs... -*/!* - alert( user.name ); // doesn't work - -} catch (e) { -*!* - // ...the execution jumps here - alert( "Our apologies, the data has errors, we'll try to request it one more time." ); - alert( e.name ); - alert( e.message ); -*/!* -} -``` - -Here we use the `catch` block only to show the message, but we can do much more: send a new network request, suggest an alternative to the visitor, send information about the error to a logging facility, ... . All much better than just dying. - -## Throwing our own errors - -What if `json` is syntactically correct, but doesn't have a required `name` property? - -Like this: - -```js run -let json = '{ "age": 30 }'; // incomplete data - -try { - - let user = JSON.parse(json); // <-- no errors -*!* - alert( user.name ); // no name! -*/!* - -} catch (e) { - alert( "doesn't execute" ); -} -``` - -Here `JSON.parse` runs normally, but the absence of `name` is actually an error for us. - -To unify error handling, we'll use the `throw` operator. - -### "Throw" operator - -The `throw` operator generates an error. - -The syntax is: - -```js -throw -``` - -Technically, we can use anything as an error object. That may be even a primitive, like a number or a string, but it's better to use objects, preferably with `name` and `message` properties (to stay somewhat compatible with built-in errors). - -JavaScript has many built-in constructors for standard errors: `Error`, `SyntaxError`, `ReferenceError`, `TypeError` and others. We can use them to create error objects as well. - -Their syntax is: - -```js -let error = new Error(message); -// or -let error = new SyntaxError(message); -let error = new ReferenceError(message); -// ... -``` - -For built-in errors (not for any objects, just for errors), the `name` property is exactly the name of the constructor. And `message` is taken from the argument. - -For instance: - -```js run -let error = new Error("Things happen o_O"); - -alert(error.name); // Error -alert(error.message); // Things happen o_O -``` - -Let's see what kind of error `JSON.parse` generates: - -```js run -try { - JSON.parse("{ bad json o_O }"); -} catch(e) { -*!* - alert(e.name); // SyntaxError -*/!* - alert(e.message); // Unexpected token b in JSON at position 2 -} -``` - -As we can see, that's a `SyntaxError`. - -And in our case, the absence of `name` is an error, as users must have a `name`. - -So let's throw it: - -```js run -let json = '{ "age": 30 }'; // incomplete data - -try { - - let user = JSON.parse(json); // <-- no errors - - if (!user.name) { -*!* - throw new SyntaxError("Incomplete data: no name"); // (*) -*/!* - } - - alert( user.name ); - -} catch(e) { - alert( "JSON Error: " + e.message ); // JSON Error: Incomplete data: no name -} -``` - -In the line `(*)`, the `throw` operator generates a `SyntaxError` with the given `message`, the same way as JavaScript would generate it itself. The execution of `try` immediately stops and the control flow jumps into `catch`. - -Now `catch` became a single place for all error handling: both for `JSON.parse` and other cases. - -## Rethrowing - -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: - -```js run -let json = '{ "age": 30 }'; // incomplete data - -try { - user = JSON.parse(json); // <-- forgot to put "let" before user - - // ... -} catch(err) { - alert("JSON Error: " + err); // JSON Error: ReferenceError: user is not defined - // (no JSON Error actually) -} -``` - -Of course, everything's possible! Programmers do make mistakes. Even in open-source utilities used by millions for decades -- suddenly a bug may be discovered that leads to terrible hacks. - -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: - -```js run -try { - user = { /*...*/ }; -} catch(err) { -*!* - if (err instanceof ReferenceError) { -*/!* - alert('ReferenceError'); // "ReferenceError" for accessing an undefined variable - } -} -``` - -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`. - -In the code below, we use rethrowing so that `catch` only handles `SyntaxError`: - -```js run -let json = '{ "age": 30 }'; // incomplete data -try { - - let user = JSON.parse(json); - - if (!user.name) { - throw new SyntaxError("Incomplete data: no name"); - } - -*!* - blabla(); // unexpected error -*/!* - - alert( user.name ); - -} catch(e) { - -*!* - if (e instanceof SyntaxError) { - alert( "JSON Error: " + e.message ); - } else { - throw e; // rethrow (*) - } -*/!* - -} -``` - -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`: - -```js run -function readData() { - let json = '{ "age": 30 }'; - - try { - // ... -*!* - blabla(); // error! -*/!* - } catch (e) { - // ... - if (!(e instanceof SyntaxError)) { -*!* - throw e; // rethrow (don't know how to deal with it) -*/!* - } - } -} - -try { - readData(); -} catch (e) { -*!* - alert( "External catch got: " + e ); // caught it! -*/!* -} -``` - -Here `readData` only knows how to handle `SyntaxError`, while the outer `try..catch` knows how to handle everything. - -## try..catch..finally - -Wait, that's not all. - -The `try..catch` construct may have one more code clause: `finally`. - -If it exists, it runs in all cases: - -- after `try`, if there were no errors, -- after `catch`, if there were errors. - -The extended syntax looks like this: - -```js -*!*try*/!* { - ... try to execute the code ... -} *!*catch*/!*(e) { - ... handle errors ... -} *!*finally*/!* { - ... execute always ... -} -``` - -Try running this code: - -```js run -try { - alert( 'try' ); - if (confirm('Make an error?')) BAD_CODE(); -} catch (e) { - alert( 'catch' ); -} finally { - alert( 'finally' ); -} -``` - -The code has two ways of execution: - -1. If you answer "Yes" to "Make an error?", then `try -> catch -> finally`. -2. If you say "No", then `try -> finally`. - -The `finally` clause is often used when we start doing something and want to finalize it in any case of outcome. - -For instance, we want to measure the time that a Fibonacci numbers function `fib(n)` takes. Naturally, we can start measuring before it runs and finish afterwards. But what if there's an error during the function call? In particular, the implementation of `fib(n)` in the code below returns an error for negative or non-integer numbers. - -The `finally` clause is a great place to finish the measurements no matter what. - -Here `finally` guarantees that the time will be measured correctly in both situations -- in case of a successful execution of `fib` and in case of an error in it: - -```js run -let num = +prompt("Enter a positive integer number?", 35) - -let diff, result; - -function fib(n) { - if (n < 0 || Math.trunc(n) != n) { - throw new Error("Must not be negative, and also an integer."); - } - return n <= 1 ? n : fib(n - 1) + fib(n - 2); -} - -let start = Date.now(); - -try { - result = fib(num); -} catch (e) { - result = 0; -*!* -} finally { - diff = Date.now() - start; -} -*/!* - -alert(result || "error occurred"); - -alert( `execution took ${diff}ms` ); -``` - -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. - -In other words, the function may finish with `return` or `throw`, that doesn't matter. The `finally` clause executes in both cases. - - -```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`. - -In the example below, there's a `return` in `try`. In this case, `finally` is executed just before the control returns to the outer code. - -```js run -function func() { - - try { -*!* - return 1; -*/!* - - } catch (e) { - /* ... */ - } finally { -*!* - alert( 'finally' ); -*/!* - } -} - -alert( func() ); // first works alert from finally, and then this one -``` -```` - -````smart header="`try..finally`" - -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. - -```js -function func() { - // start doing something that needs completion (like measurements) - try { - // ... - } finally { - // complete that thing even if all dies - } -} -``` -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. -```` - -## Global catch - -```warn header="Environment-specific" -The information from this section is not a part of the core JavaScript. -``` - -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. - -The syntax: - -```js -window.onerror = function(message, url, line, col, error) { - // ... -}; -``` - -`message` -: Error message. - -`url` -: URL of the script where error happened. - -`line`, `col` -: Line and column numbers where error happened. - -`error` -: Error object. - -For instance: - -```html run untrusted refresh height=1 - -``` - -The role of the global handler `window.onerror` is usually not to recover the script execution -- that's probably impossible in case of programming errors, but to send the error message to developers. - -There are also web-services that provide error-logging for such cases, like or . - -They work like this: - -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. - -## Summary - -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. - -The syntax is: - -```js -try { - // run this code -} catch(err) { - // if an error happened, then jump here - // err is the error object -} finally { - // do in any case after try/catch -} -``` - -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) {`. - -We can also generate our own errors using the `throw` operator. Technically, the argument of `throw` can be anything, but usually it's an error object inheriting from the built-in `Error` class. More on extending errors in the next chapter. - -*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`. diff --git a/1-js/10-error-handling/1-try-catch/try-catch-flow.svg b/1-js/10-error-handling/1-try-catch/try-catch-flow.svg deleted file mode 100644 index ac816e356b..0000000000 --- a/1-js/10-error-handling/1-try-catch/try-catch-flow.svg +++ /dev/null @@ -1 +0,0 @@ -BeginNo ErrorsAn error occured in the codeIgnore catch blockIgnore the rest of tryExecute catch blocktry { }// code... \ No newline at end of file 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 deleted file mode 100644 index 754e68f9a4..0000000000 --- a/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md +++ /dev/null @@ -1,16 +0,0 @@ -```js run untrusted -class FormatError extends SyntaxError { - constructor(message) { - super(message); - this.name = this.constructor.name; - } -} - -let err = new FormatError("formatting error"); - -alert( err.message ); // formatting error -alert( err.name ); // FormatError -alert( err.stack ); // stack - -alert( err instanceof SyntaxError ); // true -``` diff --git a/1-js/10-error-handling/2-custom-errors/1-format-error/task.md b/1-js/10-error-handling/2-custom-errors/1-format-error/task.md deleted file mode 100644 index 2c8e910fc0..0000000000 --- a/1-js/10-error-handling/2-custom-errors/1-format-error/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 5 - ---- - -# Inherit from SyntaxError - -Create a class `FormatError` that inherits from the built-in `SyntaxError` class. - -It should support `message`, `name` and `stack` properties. - -Usage example: - -```js -let err = new FormatError("formatting error"); - -alert( err.message ); // formatting error -alert( err.name ); // FormatError -alert( err.stack ); // stack - -alert( err instanceof FormatError ); // true -alert( err instanceof SyntaxError ); // true (because inherits from SyntaxError) -``` diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md deleted file mode 100644 index ff2e4c529e..0000000000 --- a/1-js/10-error-handling/2-custom-errors/article.md +++ /dev/null @@ -1,330 +0,0 @@ -# Custom errors, extending Error - -When we develop something, we often need our own error classes to reflect specific things that may go wrong in our tasks. For errors in network operations we may need `HttpError`, for database operations `DbError`, for searching operations `NotFoundError` and so on. - -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`. - -JavaScript allows to use `throw` with any argument, so technically our custom error classes don't need to inherit from `Error`. But if we inherit, then it becomes possible to use `obj instanceof Error` to identify error objects. So it's better to inherit from it. - -As the application grows, our own errors naturally form a hierarchy. For instance, `HttpTimeoutError` may inherit from `HttpError`, and so on. - -## Extending Error - -As an example, let's consider a function `readUser(json)` that should read JSON with user data. - -Here's an example of how a valid `json` may look: -```js -let json = `{ "name": "John", "age": 30 }`; -``` - -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. - -Our function `readUser(json)` will not only read JSON, but check ("validate") the data. If there are no required fields, or the format is wrong, then that's an error. And that's not a `SyntaxError`, because the data is syntactically correct, but another kind of error. We'll call it `ValidationError` and create a class for it. An error of that kind should also carry the information about the offending field. - -Our `ValidationError` class should inherit from the built-in `Error` class. - -That class is built-in, but here's its approximate code so we can understand what we're extending: - -```js -// The "pseudocode" for the built-in Error class defined by JavaScript itself -class Error { - constructor(message) { - this.message = message; - 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: - -```js run untrusted -*!* -class ValidationError extends Error { -*/!* - constructor(message) { - super(message); // (1) - this.name = "ValidationError"; // (2) - } -} - -function test() { - throw new ValidationError("Whoops!"); -} - -try { - test(); -} catch(err) { - alert(err.message); // Whoops! - alert(err.name); // ValidationError - alert(err.stack); // a list of nested calls with line numbers for each -} -``` - -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)`: - -```js run -class ValidationError extends Error { - constructor(message) { - super(message); - this.name = "ValidationError"; - } -} - -// Usage -function readUser(json) { - let user = JSON.parse(json); - - if (!user.age) { - throw new ValidationError("No field: age"); - } - if (!user.name) { - throw new ValidationError("No field: name"); - } - - return user; -} - -// Working example with try..catch - -try { - let user = readUser('{ "age": 25 }'); -} catch (err) { - if (err instanceof ValidationError) { -*!* - alert("Invalid data: " + err.message); // Invalid data: No field: name -*/!* - } else if (err instanceof SyntaxError) { // (*) - alert("JSON Syntax Error: " + err.message); - } else { - throw err; // unknown error, rethrow it (**) - } -} -``` - -The `try..catch` block in the code above handles both our `ValidationError` and the built-in `SyntaxError` from `JSON.parse`. - -Please take a look at how we use `instanceof` to check for the specific error type in the line `(*)`. - -We could also look at `err.name`, like this: - -```js -// ... -// instead of (err instanceof SyntaxError) -} else if (err.name == "SyntaxError") { // (*) -// ... -``` - -The `instanceof` version is much better, because in the future we are going to extend `ValidationError`, make subtypes of it, like `PropertyRequiredError`. And `instanceof` check will continue to work for new inheriting classes. So that's future-proof. - -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 (due to a typo in the code or other unknown ones) should fall through. - -## Further inheritance - -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`). Let's make a more concrete class `PropertyRequiredError`, exactly for absent properties. It will carry additional information about the property that's missing. - -```js run -class ValidationError extends Error { - constructor(message) { - super(message); - this.name = "ValidationError"; - } -} - -*!* -class PropertyRequiredError extends ValidationError { - constructor(property) { - super("No property: " + property); - this.name = "PropertyRequiredError"; - this.property = property; - } -} -*/!* - -// Usage -function readUser(json) { - let user = JSON.parse(json); - - if (!user.age) { - throw new PropertyRequiredError("age"); - } - if (!user.name) { - throw new PropertyRequiredError("name"); - } - - return user; -} - -// Working example with try..catch - -try { - let user = readUser('{ "age": 25 }'); -} catch (err) { - if (err instanceof ValidationError) { -*!* - alert("Invalid data: " + err.message); // Invalid data: No property: name - alert(err.name); // PropertyRequiredError - alert(err.property); // name -*/!* - } else if (err instanceof SyntaxError) { - alert("JSON Syntax Error: " + err.message); - } else { - throw err; // unknown error, rethrow it - } -} -``` - -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. - -Let's call it `MyError`. - -Here's the code with `MyError` and other custom error classes, simplified: - -```js run -class MyError extends Error { - constructor(message) { - super(message); -*!* - this.name = this.constructor.name; -*/!* - } -} - -class ValidationError extends MyError { } - -class PropertyRequiredError extends ValidationError { - constructor(property) { - super("No property: " + property); - this.property = property; - } -} - -// name is correct -alert( new PropertyRequiredError("field").name ); // PropertyRequiredError -``` - -Now custom errors are much shorter, especially `ValidationError`, as we got rid of the `"this.name = ..."` line in the constructor. - -## Wrapping exceptions - -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`: - -```js run -class ReadError extends Error { - constructor(message, cause) { - super(message); - this.cause = cause; - this.name = 'ReadError'; - } -} - -class ValidationError extends Error { /*...*/ } -class PropertyRequiredError extends ValidationError { /* ... */ } - -function validateUser(user) { - if (!user.age) { - throw new PropertyRequiredError("age"); - } - - if (!user.name) { - throw new PropertyRequiredError("name"); - } -} - -function readUser(json) { - let user; - - try { - user = JSON.parse(json); - } catch (err) { -*!* - if (err instanceof SyntaxError) { - throw new ReadError("Syntax Error", err); - } else { - throw err; - } -*/!* - } - - try { - validateUser(user); - } catch (err) { -*!* - if (err instanceof ValidationError) { - throw new ReadError("Validation Error", err); - } else { - throw err; - } -*/!* - } - -} - -try { - readUser('{bad json}'); -} catch (e) { - if (e instanceof ReadError) { -*!* - alert(e); - // Original error: SyntaxError: Unexpected token b in JSON at position 1 - alert("Original error: " + e.cause); -*/!* - } else { - throw e; - } -} -``` - -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. - -## Summary - -- 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. diff --git a/1-js/10-error-handling/index.md b/1-js/10-error-handling/index.md deleted file mode 100644 index face61c6e1..0000000000 --- a/1-js/10-error-handling/index.md +++ /dev/null @@ -1 +0,0 @@ -# Error handling diff --git a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.md b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html b/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html deleted file mode 100644 index b2192681c9..0000000000 --- a/1-js/11-async/01-callbacks/01-animate-circle-callback/solution.view/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/1-js/11-async/01-callbacks/01-animate-circle-callback/task.md b/1-js/11-async/01-callbacks/01-animate-circle-callback/task.md deleted file mode 100644 index 4a20ca6047..0000000000 --- a/1-js/11-async/01-callbacks/01-animate-circle-callback/task.md +++ /dev/null @@ -1,25 +0,0 @@ - -# Animated circle with callback - -In the task an animated growing circle is shown. - -Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly. - -In the solution of the task, the function `showCircle(cx, cy, radius)` draws the circle, but gives no way to track when it's ready. - -Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle `

` as an argument. - -Here's the example: - -```js -showCircle(150, 150, 100, div => { - div.classList.add('message-ball'); - div.append("Hello, world!"); -}); -``` - -Demo: - -[iframe src="http://github.com/solution" height=260] - -Take the solution of the task as the base. diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md deleted file mode 100644 index 9d1a260d52..0000000000 --- a/1-js/11-async/01-callbacks/article.md +++ /dev/null @@ -1,310 +0,0 @@ - - -# Introduction: callbacks - -```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`: - -```js -function loadScript(src) { - // creates a - - - - diff --git a/1-js/11-async/02-promise-basics/03-animate-circle-promise/task.md b/1-js/11-async/02-promise-basics/03-animate-circle-promise/task.md deleted file mode 100644 index 7860a71dc1..0000000000 --- a/1-js/11-async/02-promise-basics/03-animate-circle-promise/task.md +++ /dev/null @@ -1,15 +0,0 @@ - -# Animated circle with promise - -Rewrite the `showCircle` function in the solution of the task so that it returns a promise instead of accepting a callback. - -The new usage: - -```js -showCircle(150, 150, 100).then(div => { - div.classList.add('message-ball'); - div.append("Hello, world!"); -}); -``` - -Take the solution of the task as the base. diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md deleted file mode 100644 index 8909df9b5d..0000000000 --- a/1-js/11-async/02-promise-basics/article.md +++ /dev/null @@ -1,340 +0,0 @@ -# Promise - -Imagine that you're a top singer, and fans ask day and night for your upcoming single. - -To get some relief, you promise to send it to them when it's published. You give your fans a list. They can fill in their email addresses, so that when the song becomes available, all subscribed parties instantly receive it. And even if something goes very wrong, say, a fire in the studio, so that you can't publish the song, they will still be notified. - -Everyone is happy: you, because the people don't crowd you anymore, and fans, because they won't miss the single. - -This is a real-life analogy for things we often have in programming: - -1. A "producing code" that does something and takes time. For instance, some code that loads the data over a network. That's a "singer". -2. A "consuming code" that wants the result of the "producing code" once it's ready. Many functions may need that result. These are the "fans". -3. A *promise* is a special JavaScript object that links the "producing code" and the "consuming code" together. In terms of our analogy: this is the "subscription list". The "producing code" takes whatever time it needs to produce the promised result, and the "promise" makes that result available to all of the subscribed code when it's ready. - -The analogy isn't terribly accurate, because JavaScript promises are more complex than a simple subscription list: they have additional features and limitations. But it's fine to begin with. - -The constructor syntax for a promise object is: - -```js -let promise = new Promise(function(resolve, reject) { - // executor (the producing code, "singer") -}); -``` - -The function passed to `new Promise` is called the *executor*. When `new Promise` is created, the executor runs automatically. It contains the producing code which should eventually produce the result. In terms of the analogy above: the executor is the "singer". - -Its arguments `resolve` and `reject` are callbacks provided by JavaScript itself. Our code is only inside the executor. - -When the executor obtains the result, be it soon or late, doesn't matter, it should call one of these callbacks: - -- `resolve(value)` — if the job finished successfully, with result `value`. -- `reject(error)` — if an error occurred, `error` is the error object. - -So to summarize: the executor runs automatically and attempts to perform a job. When it is finished with the attempt it calls `resolve` if it was successful or `reject` if there was an error. - -The `promise` object returned by the `new Promise` constructor has these internal properties: - -- `state` — initially `"pending"`, then changes to either `"fulfilled"` when `resolve` is called or `"rejected"` when `reject` is called. -- `result` — initially `undefined`, then changes to `value` when `resolve(value)` called or `error` when `reject(error)` is called. - -So the executor eventually moves `promise` to one of these states: - -![](promise-resolve-reject.svg) - -Later we'll see how "fans" can subscribe to these changes. - -Here's an example of a promise constructor and a simple executor function with "producing code" that takes time (via `setTimeout`): - -```js run -let promise = new Promise(function(resolve, reject) { - // the function is executed automatically when the promise is constructed - - // after 1 second signal that the job is done with the result "done" - setTimeout(() => *!*resolve("done")*/!*, 1000); -}); -``` - -We can see two things by running the code above: - -1. The executor is called automatically and immediately (by `new Promise`). -2. The executor receives two arguments: `resolve` and `reject`. These functions are pre-defined by the JavaScript engine, so we don't need to create them. We should only call one of them when ready. - - After one second of "processing" the executor calls `resolve("done")` to produce the result. This changes the state of the `promise` object: - - ![](promise-resolve-1.svg) - -That was an example of a successful job completion, a "fulfilled promise". - -And now an example of the executor rejecting the promise with an error: - -```js -let promise = new Promise(function(resolve, reject) { - // after 1 second signal that the job is finished with an error - setTimeout(() => *!*reject(new Error("Whoops!"))*/!*, 1000); -}); -``` - -The call to `reject(...)` moves the promise object to `"rejected"` state: - -![](promise-reject-1.svg) - -To summarize, the executor should perform a job (usually something that takes time) and then call `resolve` or `reject` to change the state of the corresponding promise object. - -A promise that is either resolved or rejected is called "settled", as opposed to an initially "pending" promise. - -````smart header="There can be only a single result or an error" -The executor should call only one `resolve` or one `reject`. Any state change is final. - -All further calls of `resolve` and `reject` are ignored: - -```js -let promise = new Promise(function(resolve, reject) { -*!* - resolve("done"); -*/!* - - reject(new Error("…")); // ignored - setTimeout(() => resolve("…")); // ignored -}); -``` - -The idea is that a job done by the executor may have only one result or an error. - -Also, `resolve`/`reject` expect only one argument (or none) and will ignore additional arguments. -```` - -```smart header="Reject with `Error` objects" -In case something goes wrong, the executor should call `reject`. That can be done with any type of argument (just like `resolve`). But it is recommended to use `Error` objects (or objects that inherit from `Error`). The reasoning for that will soon become apparent. -``` - -````smart header="Immediately calling `resolve`/`reject`" -In practice, an executor usually does something asynchronously and calls `resolve`/`reject` after some time, but it doesn't have to. We also can call `resolve` or `reject` immediately, like this: - -```js -let promise = new Promise(function(resolve, reject) { - // not taking our time to do the job - resolve(123); // immediately give the result: 123 -}); -``` - -For instance, this might happen when we start to do a job but then see that everything has already been completed and cached. - -That's fine. We immediately have a resolved promise. -```` - -```smart header="The `state` and `result` are internal" -The properties `state` and `result` of the Promise object are internal. We can't directly access them. We can use the methods `.then`/`.catch`/`.finally` for that. They are described below. -``` - -## Consumers: then, catch, finally - -A Promise object serves as a link between the executor (the "producing code" or "singer") and the consuming functions (the "fans"), which will receive the result or error. Consuming functions can be registered (subscribed) using methods `.then`, `.catch` and `.finally`. - -### then - -The most important, fundamental one is `.then`. - -The syntax is: - -```js -promise.then( - function(result) { *!*/* handle a successful result */*/!* }, - function(error) { *!*/* handle an error */*/!* } -); -``` - -The first argument of `.then` is a function that runs when the promise is resolved, and receives the result. - -The second argument of `.then` is a function that runs when the promise is rejected, and receives the error. - -For instance, here's a reaction to a successfully resolved promise: - -```js run -let promise = new Promise(function(resolve, reject) { - setTimeout(() => resolve("done!"), 1000); -}); - -// resolve runs the first function in .then -promise.then( -*!* - result => alert(result), // shows "done!" after 1 second -*/!* - error => alert(error) // doesn't run -); -``` - -The first function was executed. - -And in the case of a rejection, the second one: - -```js run -let promise = new Promise(function(resolve, reject) { - setTimeout(() => reject(new Error("Whoops!")), 1000); -}); - -// reject runs the second function in .then -promise.then( - result => alert(result), // doesn't run -*!* - error => alert(error) // shows "Error: Whoops!" after 1 second -*/!* -); -``` - -If we're interested only in successful completions, then we can provide only one function argument to `.then`: - -```js run -let promise = new Promise(resolve => { - setTimeout(() => resolve("done!"), 1000); -}); - -*!* -promise.then(alert); // shows "done!" after 1 second -*/!* -``` - -### catch - -If we're interested only in errors, then we can use `null` as the first argument: `.then(null, errorHandlingFunction)`. Or we can use `.catch(errorHandlingFunction)`, which is exactly the same: - - -```js run -let promise = new Promise((resolve, reject) => { - setTimeout(() => reject(new Error("Whoops!")), 1000); -}); - -*!* -// .catch(f) is the same as promise.then(null, f) -promise.catch(alert); // shows "Error: Whoops!" after 1 second -*/!* -``` - -The call `.catch(f)` is a complete analog of `.then(null, f)`, it's just a shorthand. - -### finally - -Just like there's a `finally` clause in a regular `try {...} catch {...}`, there's `finally` in promises. - -The call `.finally(f)` is similar to `.then(f, f)` in the sense that `f` always runs when the promise is settled: be it resolve or reject. - -`finally` is a good handler for performing cleanup, e.g. stopping our loading indicators, as they are not needed anymore, no matter what the outcome is. - -Like this: - -```js -new Promise((resolve, reject) => { - /* do something that takes time, and then call resolve/reject */ -}) -*!* - // runs when the promise is settled, doesn't matter successfully or not - .finally(() => stop loading indicator) -*/!* - .then(result => show result, err => show error) -``` - -It's not exactly an alias of `then(f,f)` though. There are several important differences: - -1. A `finally` handler has no arguments. In `finally` we don't know whether the promise is successful or not. That's all right, as our task is usually to perform "general" finalizing procedures. -2. A `finally` handler passes through results and errors to the next handler. - - For instance, here the result is passed through `finally` to `then`: - ```js run - new Promise((resolve, reject) => { - setTimeout(() => resolve("result"), 2000) - }) - .finally(() => alert("Promise ready")) - .then(result => alert(result)); // <-- .then handles the result - ``` - - And here there's an error in the promise, passed through `finally` to `catch`: - - ```js run - new Promise((resolve, reject) => { - throw new Error("error"); - }) - .finally(() => alert("Promise ready")) - .catch(err => alert(err)); // <-- .catch handles the error object - ``` - - That's very convenient, because `finally` is not meant to process a promise result. So it passes it through. - - We'll talk more about promise chaining and result-passing between handlers in the next chapter. - -3. Last, but not least, `.finally(f)` is a more convenient syntax than `.then(f, f)`: no need to duplicate the function `f`. - -````smart header="On settled promises handlers run immediately" -If a promise is pending, `.then/catch/finally` handlers wait for it. Otherwise, if a promise has already settled, they execute immediately: - -```js run -// the promise becomes resolved immediately upon creation -let promise = new Promise(resolve => resolve("done!")); - -promise.then(alert); // done! (shows up right now) -``` - -Note that this is different, and more powerful than the real life "subscription list" scenario. If the singer has already released their song and then a person signs up on the subscription list, they probably won't receive that song. Subscriptions in real life must be done prior to the event. - -Promises are more flexible. We can add handlers any time: if the result is already there, our handlers get it immediately. -```` - -Next, let's see more practical examples of how promises can help us write asynchronous code. - -## Example: loadScript [#loadscript] - -We've got the `loadScript` function for loading a script from the previous chapter. - -Here's the callback-based variant, just to remind us of it: - -```js -function loadScript(src, callback) { - let script = document.createElement('script'); - script.src = src; - - script.onload = () => callback(null, script); - script.onerror = () => callback(new Error(`Script load error for ${src}`)); - - document.head.append(script); -} -``` - -Let's rewrite it using Promises. - -The new function `loadScript` will not require a callback. Instead, it will create and return a Promise object that resolves when the loading is complete. The outer code can add handlers (subscribing functions) to it using `.then`: - -```js run -function loadScript(src) { - return new Promise(function(resolve, reject) { - let script = document.createElement('script'); - script.src = src; - - script.onload = () => resolve(script); - script.onerror = () => reject(new Error(`Script load error for ${src}`)); - - document.head.append(script); - }); -} -``` - -Usage: - -```js run -let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"); - -promise.then( - script => alert(`${script.src} is loaded!`), - error => alert(`Error: ${error.message}`) -); - -promise.then(script => alert('Another handler...')); -``` - -We can immediately see a few benefits over the callback-based pattern: - - -| Promises | Callbacks | -|----------|-----------| -| Promises allow us to do things in the natural order. First, we run `loadScript(script)`, and `.then` we write what to do with the result. | We must have a `callback` function at our disposal when calling `loadScript(script, callback)`. In other words, we must know what to do with the result *before* `loadScript` is called. | -| We can call `.then` on a Promise as many times as we want. Each time, we're adding a new "fan", a new subscribing function, to the "subscription list". More about this in the next chapter: [](info:promise-chaining). | There can be only one callback. | - -So promises give us better code flow and flexibility. But there's more. We'll see that in the next chapters. diff --git a/1-js/11-async/02-promise-basics/head.html b/1-js/11-async/02-promise-basics/head.html deleted file mode 100644 index 8dd44050c1..0000000000 --- a/1-js/11-async/02-promise-basics/head.html +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/1-js/11-async/02-promise-basics/promise-reject-1.svg b/1-js/11-async/02-promise-basics/promise-reject-1.svg deleted file mode 100644 index 809bc2430e..0000000000 --- a/1-js/11-async/02-promise-basics/promise-reject-1.svg +++ /dev/null @@ -1 +0,0 @@ -new Promise(executor)state: "pending" result: undefinedreject(error)state: "rejected" result: error \ No newline at end of file diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1.svg b/1-js/11-async/02-promise-basics/promise-resolve-1.svg deleted file mode 100644 index 07a2a95f6f..0000000000 --- a/1-js/11-async/02-promise-basics/promise-resolve-1.svg +++ /dev/null @@ -1 +0,0 @@ -new Promise(executor)state: "pending" result: undefinedresolve("done")state: "fulfilled" result: "done" \ No newline at end of file diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject.svg b/1-js/11-async/02-promise-basics/promise-resolve-reject.svg deleted file mode 100644 index 428dfd8450..0000000000 --- a/1-js/11-async/02-promise-basics/promise-resolve-reject.svg +++ /dev/null @@ -1 +0,0 @@ -new Promise(executor)state: "pending" result: undefinedresolve(value)reject(error)state: "fulfilled" result: valuestate: "rejected" result: error \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md b/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md deleted file mode 100644 index bdd1c643bd..0000000000 --- a/1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md +++ /dev/null @@ -1,20 +0,0 @@ -The short answer is: **no, they are not equal**: - -The difference is that if an error happens in `f1`, then it is handled by `.catch` here: - -```js run -promise - .then(f1) - .catch(f2); -``` - -...But not here: - -```js run -promise - .then(f1, f2); -``` - -That's because an error is passed down the chain, and in the second code piece there's no chain below `f1`. - -In other words, `.then` passes results/errors to the next `.then/catch`. So in the first example, there's a `catch` below, and in the second one there isn't, so the error is unhandled. diff --git a/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md b/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md deleted file mode 100644 index cefca60aaa..0000000000 --- a/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md +++ /dev/null @@ -1,13 +0,0 @@ -# Promise: then versus catch - -Are these code fragments equal? In other words, do they behave the same way in any circumstances, for any handler functions? - -```js -promise.then(f1).catch(f2); -``` - -Versus: - -```js -promise.then(f1, f2); -``` diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md deleted file mode 100644 index 9f3b60f3a5..0000000000 --- a/1-js/11-async/03-promise-chaining/article.md +++ /dev/null @@ -1,367 +0,0 @@ - -# Promises chaining - -Let's return to the problem mentioned in the chapter : we have a sequence of asynchronous tasks to be performed one after another — for instance, loading scripts. How can we code it well? - -Promises provide a couple of recipes to do that. - -In this chapter we cover promise chaining. - -It looks like this: - -```js run -new Promise(function(resolve, reject) { - - setTimeout(() => resolve(1), 1000); // (*) - -}).then(function(result) { // (**) - - alert(result); // 1 - return result * 2; - -}).then(function(result) { // (***) - - alert(result); // 2 - return result * 2; - -}).then(function(result) { - - alert(result); // 4 - return result * 2; - -}); -``` - -The idea is that the result is passed through the chain of `.then` handlers. - -Here the flow is: -1. The initial promise resolves in 1 second `(*)`, -2. Then the `.then` handler is called `(**)`. -3. The value that it returns is passed to the next `.then` handler `(***)` -4. ...and so on. - -As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`. - -![](promise-then-chain.svg) - -The whole thing works, because a call to `promise.then` returns a promise, so that we can call the next `.then` on it. - -When a handler returns a value, it becomes the result of that promise, so the next `.then` is called with it. - -**A classic newbie error: technically we can also add many `.then` to a single promise. This is not chaining.** - -For example: -```js run -let promise = new Promise(function(resolve, reject) { - setTimeout(() => resolve(1), 1000); -}); - -promise.then(function(result) { - alert(result); // 1 - return result * 2; -}); - -promise.then(function(result) { - alert(result); // 1 - return result * 2; -}); - -promise.then(function(result) { - alert(result); // 1 - return result * 2; -}); -``` - -What we did here is just several handlers to one promise. They don't pass the result to each other; instead they process it independently. - -Here's the picture (compare it with the chaining above): - -![](promise-then-many.svg) - -All `.then` on the same promise get the same result -- the result of that promise. So in the code above all `alert` show the same: `1`. - -In practice we rarely need multiple handlers for one promise. Chaining is used much more often. - -## Returning promises - -A handler, used in `.then(handler)` may create and return a promise. - -In that case further handlers wait until it settles, and then get its result. - -For instance: - -```js run -new Promise(function(resolve, reject) { - - setTimeout(() => resolve(1), 1000); - -}).then(function(result) { - - alert(result); // 1 - -*!* - return new Promise((resolve, reject) => { // (*) - setTimeout(() => resolve(result * 2), 1000); - }); -*/!* - -}).then(function(result) { // (**) - - alert(result); // 2 - - return new Promise((resolve, reject) => { - setTimeout(() => resolve(result * 2), 1000); - }); - -}).then(function(result) { - - alert(result); // 4 - -}); -``` - -Here the first `.then` shows `1` and returns `new Promise(…)` in the line `(*)`. After one second it resolves, and the result (the argument of `resolve`, here it's `result * 2`) is passed on to handler of the second `.then`. That handler is in the line `(**)`, it shows `2` and does the same thing. - -So the output is the same as in the previous example: 1 -> 2 -> 4, but now with 1 second delay between `alert` calls. - -Returning promises allows us to build chains of asynchronous actions. - -## Example: loadScript - -Let's use this feature with the promisified `loadScript`, defined in the [previous chapter](info:promise-basics#loadscript), to load scripts one by one, in sequence: - -```js run -loadScript("/article/promise-chaining/one.js") - .then(function(script) { - return loadScript("/article/promise-chaining/two.js"); - }) - .then(function(script) { - return loadScript("/article/promise-chaining/three.js"); - }) - .then(function(script) { - // use functions declared in scripts - // to show that they indeed loaded - one(); - two(); - three(); - }); -``` - -This code can be made bit shorter with arrow functions: - -```js run -loadScript("/article/promise-chaining/one.js") - .then(script => loadScript("/article/promise-chaining/two.js")) - .then(script => loadScript("/article/promise-chaining/three.js")) - .then(script => { - // scripts are loaded, we can use functions declared there - one(); - two(); - three(); - }); -``` - - -Here each `loadScript` call returns a promise, and the next `.then` runs when it resolves. Then it initiates the loading of the next script. So scripts are loaded one after another. - -We can add more asynchronous actions to the chain. Please note that the code is still "flat" — it grows down, not to the right. There are no signs of the "pyramid of doom". - -Technically, we could add `.then` directly to each `loadScript`, like this: - -```js run -loadScript("/article/promise-chaining/one.js").then(script1 => { - loadScript("/article/promise-chaining/two.js").then(script2 => { - loadScript("/article/promise-chaining/three.js").then(script3 => { - // this function has access to variables script1, script2 and script3 - one(); - two(); - three(); - }); - }); -}); -``` - -This code does the same: loads 3 scripts in sequence. But it "grows to the right". So we have the same problem as with callbacks. - -People who start to use promises sometimes don't know about chaining, so they write it this way. Generally, chaining is preferred. - -Sometimes it's ok to write `.then` directly, because the nested function has access to the outer scope. In the example above the most nested callback has access to all variables `script1`, `script2`, `script3`. But that's an exception rather than a rule. - - -````smart header="Thenables" -To be precise, a handler may return not exactly a promise, but a so-called "thenable" object - an arbitrary object that has a method `.then`. It will be treated the same way as a promise. - -The idea is that 3rd-party libraries may implement "promise-compatible" objects of their own. They can have an extended set of methods, but also be compatible with native promises, because they implement `.then`. - -Here's an example of a thenable object: - -```js run -class Thenable { - constructor(num) { - this.num = num; - } - then(resolve, reject) { - alert(resolve); // function() { native code } - // resolve with this.num*2 after the 1 second - setTimeout(() => resolve(this.num * 2), 1000); // (**) - } -} - -new Promise(resolve => resolve(1)) - .then(result => { -*!* - return new Thenable(result); // (*) -*/!* - }) - .then(alert); // shows 2 after 1000ms -``` - -JavaScript checks the object returned by the `.then` handler in line `(*)`: if it has a callable method named `then`, then it calls that method providing native functions `resolve`, `reject` as arguments (similar to an executor) and waits until one of them is called. In the example above `resolve(2)` is called after 1 second `(**)`. Then the result is passed further down the chain. - -This feature allows us to integrate custom objects with promise chains without having to inherit from `Promise`. -```` - - -## Bigger example: fetch - -In frontend programming promises are often used for network requests. So let's see an extended example of that. - -We'll use the [fetch](info:fetch) method to load the information about the user from the remote server. It has a lot of optional parameters covered in [separate chapters](info:fetch), but the basic syntax is quite simple: - -```js -let promise = fetch(url); -``` - -This makes a network request to the `url` and returns a promise. The promise resolves with a `response` object when the remote server responds with headers, but *before the full response is downloaded*. - -To read the full response, we should call the method `response.text()`: it returns a promise that resolves when the full text is downloaded from the remote server, with that text as a result. - -The code below makes a request to `user.json` and loads its text from the server: - -```js run -fetch('http://github.com/article/promise-chaining/user.json') - // .then below runs when the remote server responds - .then(function(response) { - // response.text() returns a new promise that resolves with the full response text - // when it loads - return response.text(); - }) - .then(function(text) { - // ...and here's the content of the remote file - alert(text); // {"name": "iliakan", "isAdmin": true} - }); -``` - -The `response` object returned from `fetch` also includes the method `response.json()` that reads the remote data and parses it as JSON. In our case that's even more convenient, so let's switch to it. - -We'll also use arrow functions for brevity: - -```js run -// same as above, but response.json() parses the remote content as JSON -fetch('http://github.com/article/promise-chaining/user.json') - .then(response => response.json()) - .then(user => alert(user.name)); // iliakan, got user name -``` - -Now let's do something with the loaded user. - -For instance, we can make one more requests to GitHub, load the user profile and show the avatar: - -```js run -// Make a request for user.json -fetch('http://github.com/article/promise-chaining/user.json') - // Load it as json - .then(response => response.json()) - // Make a request to GitHub - .then(user => fetch(`https://api.github.com/users/${user.name}`)) - // Load the response as json - .then(response => response.json()) - // Show the avatar image (githubUser.avatar_url) for 3 seconds (maybe animate it) - .then(githubUser => { - let img = document.createElement('img'); - img.src = githubUser.avatar_url; - img.className = "promise-avatar-example"; - document.body.append(img); - - setTimeout(() => img.remove(), 3000); // (*) - }); -``` - -The code works; see comments about the details. However, there's a potential problem in it, a typical error for those who begin to use promises. - -Look at the line `(*)`: how can we do something *after* the avatar has finished showing and gets removed? For instance, we'd like to show a form for editing that user or something else. As of now, there's no way. - -To make the chain extendable, we need to return a promise that resolves when the avatar finishes showing. - -Like this: - -```js run -fetch('http://github.com/article/promise-chaining/user.json') - .then(response => response.json()) - .then(user => fetch(`https://api.github.com/users/${user.name}`)) - .then(response => response.json()) -*!* - .then(githubUser => new Promise(function(resolve, reject) { // (*) -*/!* - let img = document.createElement('img'); - img.src = githubUser.avatar_url; - img.className = "promise-avatar-example"; - document.body.append(img); - - setTimeout(() => { - img.remove(); -*!* - resolve(githubUser); // (**) -*/!* - }, 3000); - })) - // triggers after 3 seconds - .then(githubUser => alert(`Finished showing ${githubUser.name}`)); -``` - -That is, the `.then` handler in line `(*)` now returns `new Promise`, that becomes settled only after the call of `resolve(githubUser)` in `setTimeout` `(**)`. The next `.then` in the chain will wait for that. - -As a good practice, an asynchronous action should always return a promise. That makes it possible to plan actions after it; even if we don't plan to extend the chain now, we may need it later. - -Finally, we can split the code into reusable functions: - -```js run -function loadJson(url) { - return fetch(url) - .then(response => response.json()); -} - -function loadGithubUser(name) { - return fetch(`https://api.github.com/users/${name}`) - .then(response => response.json()); -} - -function showAvatar(githubUser) { - return new Promise(function(resolve, reject) { - let img = document.createElement('img'); - img.src = githubUser.avatar_url; - img.className = "promise-avatar-example"; - document.body.append(img); - - setTimeout(() => { - img.remove(); - resolve(githubUser); - }, 3000); - }); -} - -// Use them: -loadJson('/article/promise-chaining/user.json') - .then(user => loadGithubUser(user.name)) - .then(showAvatar) - .then(githubUser => alert(`Finished showing ${githubUser.name}`)); - // ... -``` - -## Summary - -If a `.then` (or `catch/finally`, doesn't matter) handler returns a promise, the rest of the chain waits until it settles. When it does, its result (or error) is passed further. - -Here's a full picture: - -![](promise-handler-variants.svg) diff --git a/1-js/11-async/03-promise-chaining/getMessage.js b/1-js/11-async/03-promise-chaining/getMessage.js deleted file mode 100644 index 6c5893433a..0000000000 --- a/1-js/11-async/03-promise-chaining/getMessage.js +++ /dev/null @@ -1,3 +0,0 @@ -function getMessage() { - return "Hello, world!"; -} diff --git a/1-js/11-async/03-promise-chaining/head.html b/1-js/11-async/03-promise-chaining/head.html deleted file mode 100644 index 0a0075fb92..0000000000 --- a/1-js/11-async/03-promise-chaining/head.html +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/1-js/11-async/03-promise-chaining/one.js b/1-js/11-async/03-promise-chaining/one.js deleted file mode 100644 index 948a60e075..0000000000 --- a/1-js/11-async/03-promise-chaining/one.js +++ /dev/null @@ -1,3 +0,0 @@ -function one() { - alert(1); -} diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants.svg b/1-js/11-async/03-promise-chaining/promise-handler-variants.svg deleted file mode 100644 index fe1ae5684e..0000000000 --- a/1-js/11-async/03-promise-chaining/promise-handler-variants.svg +++ /dev/null @@ -1 +0,0 @@ -return valuereturn promisethrow errorstate: "fulfilled" result: valuestate: "rejected" result: error...with the result of the new promise...state: "pending" result: undefinedthe call of .then(handler) always returns a promise:if handler ends with…that promise settles with: \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/promise-then-chain.svg b/1-js/11-async/03-promise-chaining/promise-then-chain.svg deleted file mode 100644 index 0a3ea6d377..0000000000 --- a/1-js/11-async/03-promise-chaining/promise-then-chain.svg +++ /dev/null @@ -1 +0,0 @@ -.thennew Promiseresolve(1)return 2.thenreturn 4.then \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/promise-then-many.svg b/1-js/11-async/03-promise-chaining/promise-then-many.svg deleted file mode 100644 index ce8dc1c0c9..0000000000 --- a/1-js/11-async/03-promise-chaining/promise-then-many.svg +++ /dev/null @@ -1 +0,0 @@ -.thennew Promiseresolve(1).then.then \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/three.js b/1-js/11-async/03-promise-chaining/three.js deleted file mode 100644 index 8536e85a18..0000000000 --- a/1-js/11-async/03-promise-chaining/three.js +++ /dev/null @@ -1,3 +0,0 @@ -function three() { - alert(3); -} diff --git a/1-js/11-async/03-promise-chaining/two.js b/1-js/11-async/03-promise-chaining/two.js deleted file mode 100644 index b04795b86c..0000000000 --- a/1-js/11-async/03-promise-chaining/two.js +++ /dev/null @@ -1,3 +0,0 @@ -function two() { - alert(2); -} diff --git a/1-js/11-async/03-promise-chaining/user.json b/1-js/11-async/03-promise-chaining/user.json deleted file mode 100644 index 32f89971a8..0000000000 --- a/1-js/11-async/03-promise-chaining/user.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "iliakan", - "isAdmin": true -} diff --git a/1-js/11-async/04-promise-error-handling/01-error-async/solution.md b/1-js/11-async/04-promise-error-handling/01-error-async/solution.md deleted file mode 100644 index 0d43f55e06..0000000000 --- a/1-js/11-async/04-promise-error-handling/01-error-async/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -The answer is: **no, it won't**: - -```js run -new Promise(function(resolve, reject) { - setTimeout(() => { - throw new Error("Whoops!"); - }, 1000); -}).catch(alert); -``` - -As said in the chapter, there's an "implicit `try..catch`" around the function code. So all synchronous errors are handled. - -But here the error is generated not while the executor is running, but later. So the promise can't handle it. diff --git a/1-js/11-async/04-promise-error-handling/01-error-async/task.md b/1-js/11-async/04-promise-error-handling/01-error-async/task.md deleted file mode 100644 index bafc47ce94..0000000000 --- a/1-js/11-async/04-promise-error-handling/01-error-async/task.md +++ /dev/null @@ -1,11 +0,0 @@ -# Error in setTimeout - -What do you think? Will the `.catch` trigger? Explain your answer. - -```js -new Promise(function(resolve, reject) { - setTimeout(() => { - throw new Error("Whoops!"); - }, 1000); -}).catch(alert); -``` diff --git a/1-js/11-async/04-promise-error-handling/article.md b/1-js/11-async/04-promise-error-handling/article.md deleted file mode 100644 index 9f7159af96..0000000000 --- a/1-js/11-async/04-promise-error-handling/article.md +++ /dev/null @@ -1,204 +0,0 @@ - -# Error handling with promises - -Promise chains are great at error handling. When a promise rejects, the control jumps to the closest rejection handler. That's very convenient in practice. - -For instance, in the code below the URL to `fetch` is wrong (no such site) and `.catch` handles the error: - -```js run -*!* -fetch('http://github.com/service/https://no-such-server.blabla/') // rejects -*/!* - .then(response => response.json()) - .catch(err => alert(err)) // TypeError: failed to fetch (the text may vary) -``` - -As you can see, the `.catch` doesn't have to be immediate. It may appear after one or maybe several `.then`. - -Or, maybe, everything is all right with the site, but the response is not valid JSON. The easiest way to catch all errors is to append `.catch` to the end of chain: - -```js run -fetch('http://github.com/article/promise-chaining/user.json') - .then(response => response.json()) - .then(user => fetch(`https://api.github.com/users/${user.name}`)) - .then(response => response.json()) - .then(githubUser => new Promise((resolve, reject) => { - let img = document.createElement('img'); - img.src = githubUser.avatar_url; - img.className = "promise-avatar-example"; - document.body.append(img); - - setTimeout(() => { - img.remove(); - resolve(githubUser); - }, 3000); - })) -*!* - .catch(error => alert(error.message)); -*/!* -``` - -Normally, such `.catch` doesn't trigger at all. But if any of the promises above rejects (a network problem or invalid json or whatever), then it would catch it. - -## Implicit try..catch - -The code of a promise executor and promise handlers has an "invisible `try..catch`" around it. If an exception happens, it gets caught and treated as a rejection. - -For instance, this code: - -```js run -new Promise((resolve, reject) => { -*!* - throw new Error("Whoops!"); -*/!* -}).catch(alert); // Error: Whoops! -``` - -...Works exactly the same as this: - -```js run -new Promise((resolve, reject) => { -*!* - reject(new Error("Whoops!")); -*/!* -}).catch(alert); // Error: Whoops! -``` - -The "invisible `try..catch`" around the executor automatically catches the error and turns it into rejected promise. - -This happens not only in the executor function, but in its handlers as well. If we `throw` inside a `.then` handler, that means a rejected promise, so the control jumps to the nearest error handler. - -Here's an example: - -```js run -new Promise((resolve, reject) => { - resolve("ok"); -}).then((result) => { -*!* - throw new Error("Whoops!"); // rejects the promise -*/!* -}).catch(alert); // Error: Whoops! -``` - -This happens for all errors, not just those caused by the `throw` statement. For example, a programming error: - -```js run -new Promise((resolve, reject) => { - resolve("ok"); -}).then((result) => { -*!* - blabla(); // no such function -*/!* -}).catch(alert); // ReferenceError: blabla is not defined -``` - -The final `.catch` not only catches explicit rejections, but also accidental errors in the handlers above. - -## Rethrowing - -As we already noticed, `.catch` at the end of the chain is similar to `try..catch`. We may have as many `.then` handlers as we want, and then use a single `.catch` at the end to handle errors in all of them. - -In a regular `try..catch` we can analyze the error and maybe rethrow it if it can't be handled. The same thing is possible for promises. - -If we `throw` inside `.catch`, then the control goes to the next closest error handler. And if we handle the error and finish normally, then it continues to the next closest successful `.then` handler. - -In the example below the `.catch` successfully handles the error: - -```js run -// the execution: catch -> then -new Promise((resolve, reject) => { - - throw new Error("Whoops!"); - -}).catch(function(error) { - - alert("The error is handled, continue normally"); - -}).then(() => alert("Next successful handler runs")); -``` - -Here the `.catch` block finishes normally. So the next successful `.then` handler is called. - -In the example below we see the other situation with `.catch`. The handler `(*)` catches the error and just can't handle it (e.g. it only knows how to handle `URIError`), so it throws it again: - -```js run -// the execution: catch -> catch -new Promise((resolve, reject) => { - - throw new Error("Whoops!"); - -}).catch(function(error) { // (*) - - if (error instanceof URIError) { - // handle it - } else { - alert("Can't handle such error"); - -*!* - throw error; // throwing this or another error jumps to the next catch -*/!* - } - -}).then(function() { - /* doesn't run here */ -}).catch(error => { // (**) - - alert(`The unknown error has occurred: ${error}`); - // don't return anything => execution goes the normal way - -}); -``` - -The execution jumps from the first `.catch` `(*)` to the next one `(**)` down the chain. - -## Unhandled rejections - -What happens when an error is not handled? For instance, we forgot to append `.catch` to the end of the chain, like here: - -```js untrusted run refresh -new Promise(function() { - noSuchFunction(); // Error here (no such function) -}) - .then(() => { - // successful promise handlers, one or more - }); // without .catch at the end! -``` - -In case of an error, the promise becomes rejected, and the execution should jump to the closest rejection handler. But there is none. So the error gets "stuck". There's no code to handle it. - -In practice, just like with regular unhandled errors in code, it means that something has gone terribly wrong. - -What happens when a regular error occurs and is not caught by `try..catch`? The script dies with a message in the console. A similar thing happens with unhandled promise rejections. - -The JavaScript engine tracks such rejections and generates a global error in that case. You can see it in the console if you run the example above. - -In the browser we can catch such errors using the event `unhandledrejection`: - -```js run -*!* -window.addEventListener('unhandledrejection', function(event) { - // the event object has two special properties: - alert(event.promise); // [object Promise] - the promise that generated the error - alert(event.reason); // Error: Whoops! - the unhandled error object -}); -*/!* - -new Promise(function() { - throw new Error("Whoops!"); -}); // no catch to handle the error -``` - -The event is the part of the [HTML standard](https://html.spec.whatwg.org/multipage/webappapis.html#unhandled-promise-rejections). - -If an error occurs, and there's no `.catch`, the `unhandledrejection` handler triggers, and gets the `event` object with the information about the error, so we can do something. - -Usually such errors are unrecoverable, so our best way out is to inform the user about the problem and probably report the incident to the server. - -In non-browser environments like Node.js there are other ways to track unhandled errors. - -## Summary - -- `.catch` handles errors in promises of all kinds: be it a `reject()` call, or an error thrown in a handler. -- We should place `.catch` exactly in places where we want to handle errors and know how to handle them. The handler should analyze errors (custom error classes help) and rethrow unknown ones (maybe they are programming mistakes). -- It's ok not to use `.catch` at all, if there's no way to recover from an error. -- In any case we should have the `unhandledrejection` event handler (for browsers, and analogs for other environments) to track unhandled errors and inform the user (and probably our server) about them, so that our app never "just dies". diff --git a/1-js/11-async/04-promise-error-handling/getMessage.js b/1-js/11-async/04-promise-error-handling/getMessage.js deleted file mode 100644 index 6c5893433a..0000000000 --- a/1-js/11-async/04-promise-error-handling/getMessage.js +++ /dev/null @@ -1,3 +0,0 @@ -function getMessage() { - return "Hello, world!"; -} diff --git a/1-js/11-async/04-promise-error-handling/head.html b/1-js/11-async/04-promise-error-handling/head.html deleted file mode 100644 index a0b7419623..0000000000 --- a/1-js/11-async/04-promise-error-handling/head.html +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/1-js/11-async/04-promise-error-handling/one.js b/1-js/11-async/04-promise-error-handling/one.js deleted file mode 100644 index 948a60e075..0000000000 --- a/1-js/11-async/04-promise-error-handling/one.js +++ /dev/null @@ -1,3 +0,0 @@ -function one() { - alert(1); -} diff --git a/1-js/11-async/04-promise-error-handling/promise-then-chain.svg b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg deleted file mode 100644 index 0a3ea6d377..0000000000 --- a/1-js/11-async/04-promise-error-handling/promise-then-chain.svg +++ /dev/null @@ -1 +0,0 @@ -.thennew Promiseresolve(1)return 2.thenreturn 4.then \ No newline at end of file diff --git a/1-js/11-async/04-promise-error-handling/promise-then-many.svg b/1-js/11-async/04-promise-error-handling/promise-then-many.svg deleted file mode 100644 index ce8dc1c0c9..0000000000 --- a/1-js/11-async/04-promise-error-handling/promise-then-many.svg +++ /dev/null @@ -1 +0,0 @@ -.thennew Promiseresolve(1).then.then \ No newline at end of file diff --git a/1-js/11-async/04-promise-error-handling/three.js b/1-js/11-async/04-promise-error-handling/three.js deleted file mode 100644 index 8536e85a18..0000000000 --- a/1-js/11-async/04-promise-error-handling/three.js +++ /dev/null @@ -1,3 +0,0 @@ -function three() { - alert(3); -} diff --git a/1-js/11-async/04-promise-error-handling/two.js b/1-js/11-async/04-promise-error-handling/two.js deleted file mode 100644 index b04795b86c..0000000000 --- a/1-js/11-async/04-promise-error-handling/two.js +++ /dev/null @@ -1,3 +0,0 @@ -function two() { - alert(2); -} diff --git a/1-js/11-async/04-promise-error-handling/user.json b/1-js/11-async/04-promise-error-handling/user.json deleted file mode 100644 index 32f89971a8..0000000000 --- a/1-js/11-async/04-promise-error-handling/user.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "iliakan", - "isAdmin": true -} diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md deleted file mode 100644 index 191f6ed210..0000000000 --- a/1-js/11-async/05-promise-api/article.md +++ /dev/null @@ -1,286 +0,0 @@ -# Promise API - -There are 5 static methods in the `Promise` class. We'll quickly cover their use cases here. - -## Promise.all - -Let's say we want many promises to execute in parallel and wait until all of them are ready. - -For instance, download several URLs in parallel and process the content once they are all done. - -That's what `Promise.all` is for. - -The syntax is: - -```js -let promise = Promise.all([...promises...]); -``` - -`Promise.all` takes an array of promises (it technically can be any iterable, but is usually an array) and returns a new promise. - -The new promise resolves when all listed promises are settled, and the array of their results becomes its result. - -For instance, the `Promise.all` below settles after 3 seconds, and then its result is an array `[1, 2, 3]`: - -```js run -Promise.all([ - new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 - new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 - new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3 -]).then(alert); // 1,2,3 when promises are ready: each promise contributes an array member -``` - -Please note that the order of the resulting array members is the same as in its source promises. Even though the first promise takes the longest time to resolve, it's still first in the array of results. - -A common trick is to map an array of job data into an array of promises, and then wrap that into `Promise.all`. - -For instance, if we have an array of URLs, we can fetch them all like this: - -```js run -let urls = [ - 'https://api.github.com/users/iliakan', - 'https://api.github.com/users/remy', - 'https://api.github.com/users/jeresig' -]; - -// map every url to the promise of the fetch -let requests = urls.map(url => fetch(url)); - -// Promise.all waits until all jobs are resolved -Promise.all(requests) - .then(responses => responses.forEach( - response => alert(`${response.url}: ${response.status}`) - )); -``` - -A bigger example with fetching user information for an array of GitHub users by their names (we could fetch an array of goods by their ids, the logic is identical): - -```js run -let names = ['iliakan', 'remy', 'jeresig']; - -let requests = names.map(name => fetch(`https://api.github.com/users/${name}`)); - -Promise.all(requests) - .then(responses => { - // all responses are resolved successfully - for(let response of responses) { - alert(`${response.url}: ${response.status}`); // shows 200 for every url - } - - return responses; - }) - // map array of responses into an array of response.json() to read their content - .then(responses => Promise.all(responses.map(r => r.json()))) - // all JSON answers are parsed: "users" is the array of them - .then(users => users.forEach(user => alert(user.name))); -``` - -**If any of the promises is rejected, the promise returned by `Promise.all` immediately rejects with that error.** - -For instance: - -```js run -Promise.all([ - new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)), -*!* - new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)), -*/!* - new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)) -]).catch(alert); // Error: Whoops! -``` - -Here the second promise rejects in two seconds. That leads to an immediate rejection of `Promise.all`, so `.catch` executes: the rejection error becomes the outcome of the entire `Promise.all`. - -```warn header="In case of an error, other promises are ignored" -If one promise rejects, `Promise.all` immediately rejects, completely forgetting about the other ones in the list. Their results are ignored. - -For example, if there are multiple `fetch` calls, like in the example above, and one fails, the others will still continue to execute, but `Promise.all` won't watch them anymore. They will probably settle, but their results will be ignored. - -`Promise.all` does nothing to cancel them, as there's no concept of "cancellation" in promises. In [another chapter](info:fetch-abort) we'll cover `AbortController` that can help with that, but it's not a part of the Promise API. -``` - -````smart header="`Promise.all(iterable)` allows non-promise \"regular\" values in `iterable`" -Normally, `Promise.all(...)` accepts an iterable (in most cases an array) of promises. But if any of those objects is not a promise, it's passed to the resulting array "as is". - -For instance, here the results are `[1, 2, 3]`: - -```js run -Promise.all([ - new Promise((resolve, reject) => { - setTimeout(() => resolve(1), 1000) - }), - 2, - 3 -]).then(alert); // 1, 2, 3 -``` - -So we are able to pass ready values to `Promise.all` where convenient. -```` - -## Promise.allSettled - -[recent browser="new"] - -`Promise.all` rejects as a whole if any promise rejects. That's good for "all or nothing" cases, when we need *all* results successful to proceed: - -```js -Promise.all([ - fetch('http://github.com/template.html'), - fetch('http://github.com/style.css'), - fetch('http://github.com/data.json') -]).then(render); // render method needs results of all fetches -``` - -`Promise.allSettled` just waits for all promises to settle, regardless of the result. The resulting array has: - -- `{status:"fulfilled", value:result}` for successful responses, -- `{status:"rejected", reason:error}` for errors. - -For example, we'd like to fetch the information about multiple users. Even if one request fails, we're still interested in the others. - -Let's use `Promise.allSettled`: - -```js run -let urls = [ - 'https://api.github.com/users/iliakan', - 'https://api.github.com/users/remy', - 'https://no-such-url/' -]; - -Promise.allSettled(urls.map(url => fetch(url))) - .then(results => { // (*) - results.forEach((result, num) => { - if (result.status == "fulfilled") { - alert(`${urls[num]}: ${result.value.status}`); - } - if (result.status == "rejected") { - alert(`${urls[num]}: ${result.reason}`); - } - }); - }); -``` - -The `results` in the line `(*)` above will be: -```js -[ - {status: 'fulfilled', value: ...response...}, - {status: 'fulfilled', value: ...response...}, - {status: 'rejected', reason: ...error object...} -] -``` - -So for each promise we get its status and `value/error`. - -### Polyfill - -If the browser doesn't support `Promise.allSettled`, it's easy to polyfill: - -```js -if(!Promise.allSettled) { - Promise.allSettled = function(promises) { - return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({ - status: 'fulfilled', - value - }), reason => ({ - status: 'rejected', - reason - })))); - }; -} -``` - -In this code, `promises.map` takes input values, turns them into promises (just in case a non-promise was passed) with `p => Promise.resolve(p)`, and then adds `.then` handler to every one. - -That handler turns a successful result `value` into `{status:'fulfilled', value}`, and an error `reason` into `{status:'rejected', reason}`. That's exactly the format of `Promise.allSettled`. - -Now we can use `Promise.allSettled` to get the results of *all* given promises, even if some of them reject. - -## Promise.race - -Similar to `Promise.all`, but waits only for the first settled promise and gets its result (or error). - -The syntax is: - -```js -let promise = Promise.race(iterable); -``` - -For instance, here the result will be `1`: - -```js run -Promise.race([ - new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)), - new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)), - new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)) -]).then(alert); // 1 -``` - -The first promise here was fastest, so it became the result. After the first settled promise "wins the race", all further results/errors are ignored. - - -## Promise.resolve/reject - -Methods `Promise.resolve` and `Promise.reject` are rarely needed in modern code, because `async/await` syntax (we'll cover it [a bit later](info:async-await)) makes them somewhat obsolete. - -We cover them here for completeness and for those who can't use `async/await` for some reason. - -### Promise.resolve - -`Promise.resolve(value)` creates a resolved promise with the result `value`. - -Same as: - -```js -let promise = new Promise(resolve => resolve(value)); -``` - -The method is used for compatibility, when a function is expected to return a promise. - -For example, the `loadCached` function below fetches a URL and remembers (caches) its content. For future calls with the same URL it immediately gets the previous content from cache, but uses `Promise.resolve` to make a promise of it, so the returned value is always a promise: - -```js -let cache = new Map(); - -function loadCached(url) { - if (cache.has(url)) { -*!* - return Promise.resolve(cache.get(url)); // (*) -*/!* - } - - return fetch(url) - .then(response => response.text()) - .then(text => { - cache.set(url,text); - return text; - }); -} -``` - -We can write `loadCached(url).then(…)`, because the function is guaranteed to return a promise. We can always use `.then` after `loadCached`. That's the purpose of `Promise.resolve` in the line `(*)`. - -### Promise.reject - -`Promise.reject(error)` creates a rejected promise with `error`. - -Same as: - -```js -let promise = new Promise((resolve, reject) => reject(error)); -``` - -In practice, this method is almost never used. - -## Summary - -There are 5 static methods of `Promise` class: - -1. `Promise.all(promises)` -- waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of `Promise.all`, and all other results are ignored. -2. `Promise.allSettled(promises)` (recently added method) -- waits for all promises to settle and returns their results as an array of objects with: - - `status`: `"fulfilled"` or `"rejected"` - - `value` (if fulfilled) or `reason` (if rejected). -3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome. -4. `Promise.resolve(value)` -- makes a resolved promise with the given value. -5. `Promise.reject(error)` -- makes a rejected promise with the given error. - -Of these five, `Promise.all` is probably the most common in practice. diff --git a/1-js/11-async/05-promise-api/head.html b/1-js/11-async/05-promise-api/head.html deleted file mode 100644 index 8dd44050c1..0000000000 --- a/1-js/11-async/05-promise-api/head.html +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/1-js/11-async/05-promise-api/iliakan.json b/1-js/11-async/05-promise-api/iliakan.json deleted file mode 100644 index 32f89971a8..0000000000 --- a/1-js/11-async/05-promise-api/iliakan.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "iliakan", - "isAdmin": true -} diff --git a/1-js/11-async/05-promise-api/one.js b/1-js/11-async/05-promise-api/one.js deleted file mode 100644 index 948a60e075..0000000000 --- a/1-js/11-async/05-promise-api/one.js +++ /dev/null @@ -1,3 +0,0 @@ -function one() { - alert(1); -} diff --git a/1-js/11-async/05-promise-api/two.js b/1-js/11-async/05-promise-api/two.js deleted file mode 100644 index b04795b86c..0000000000 --- a/1-js/11-async/05-promise-api/two.js +++ /dev/null @@ -1,3 +0,0 @@ -function two() { - alert(2); -} diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md deleted file mode 100644 index 4ef6225465..0000000000 --- a/1-js/11-async/06-promisify/article.md +++ /dev/null @@ -1,114 +0,0 @@ -# Promisification - -"Promisification" is a long word for a simple transformation. It's the conversion of a function that accepts a callback into a function that returns a promise. - -Such transformations are often required in real-life, as many functions and libraries are callback-based. But promises are more convenient, so it makes sense to promisify them. - -For instance, we have `loadScript(src, callback)` from the chapter . - -```js run -function loadScript(src, callback) { - let script = document.createElement('script'); - script.src = src; - - script.onload = () => callback(null, script); - script.onerror = () => callback(new Error(`Script load error for ${src}`)); - - document.head.append(script); -} - -// usage: -// loadScript('path/script.js', (err, script) => {...}) -``` - -Let's promisify it. The new `loadScriptPromise(src)` function achieves the same result, but it accepts only `src` (no `callback`) and returns a promise. - -```js -let loadScriptPromise = function(src) { - return new Promise((resolve, reject) => { - loadScript(src, (err, script) => { - if (err) reject(err) - else resolve(script); - }); - }) -} - -// usage: -// loadScriptPromise('path/script.js').then(...) -``` - -Now `loadScriptPromise` fits well in promise-based code. - -As we can see, it delegates all the work to the original `loadScript`, providing its own callback that translates to promise `resolve/reject`. - -In practice we'll probably need to promisify many functions, so it makes sense to use a helper. We'll call it `promisify(f)`: it accepts a to-promisify function `f` and returns a wrapper function. - -That wrapper does the same as in the code above: returns a promise and passes the call to the original `f`, tracking the result in a custom callback: - -```js -function promisify(f) { - return function (...args) { // return a wrapper-function - return new Promise((resolve, reject) => { - function callback(err, result) { // our custom callback for f - if (err) { - reject(err); - } else { - resolve(result); - } - } - - args.push(callback); // append our custom callback to the end of f arguments - - f.call(this, ...args); // call the original function - }); - }; -}; - -// usage: -let loadScriptPromise = promisify(loadScript); -loadScriptPromise(...).then(...); -``` - -Here we assume that the original function expects a callback with two arguments `(err, result)`. That's what we encounter most often. Then our custom callback is in exactly the right format, and `promisify` works great for such a case. - -But what if the original `f` expects a callback with more arguments `callback(err, res1, res2, ...)`? - -Here's a more advanced version of `promisify`: if called as `promisify(f, true)`, the promise result will be an array of callback results `[res1, res2, ...]`: - -```js -// promisify(f, true) to get array of results -function promisify(f, manyArgs = false) { - return function (...args) { - return new Promise((resolve, reject) => { - function *!*callback(err, ...results*/!*) { // our custom callback for f - if (err) { - reject(err); - } else { - // resolve with all callback results if manyArgs is specified - *!*resolve(manyArgs ? results : results[0]);*/!* - } - } - - args.push(callback); - - f.call(this, ...args); - }); - }; -}; - -// usage: -f = promisify(f, true); -f(...).then(arrayOfResults => ..., err => ...) -``` - -For more exotic callback formats, like those without `err` at all: `callback(result)`, we can promisify such functions manually without using the helper. - -There are also modules with a bit more flexible promisification functions, e.g. [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify). In Node.js, there's a built-in `util.promisify` function for that. - -```smart -Promisification is a great approach, especially when you use `async/await` (see the next chapter), but not a total replacement for callbacks. - -Remember, a promise may have only one result, but a callback may technically be called many times. - -So promisification is only meant for functions that call the callback once. Further calls will be ignored. -``` diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md deleted file mode 100644 index 4e01493f0f..0000000000 --- a/1-js/11-async/07-microtask-queue/article.md +++ /dev/null @@ -1,112 +0,0 @@ - -# Microtasks - -Promise handlers `.then`/`.catch`/`.finally` are always asynchronous. - -Even when a Promise is immediately resolved, the code on the lines *below* `.then`/`.catch`/`.finally` will still execute before these handlers. - -Here's a demo: - -```js run -let promise = Promise.resolve(); - -promise.then(() => alert("promise done!")); - -alert("code finished"); // this alert shows first -``` - -If you run it, you see `code finished` first, and then `promise done!`. - -That's strange, because the promise is definitely done from the beginning. - -Why did the `.then` trigger afterwards? What's going on? - -## Microtasks queue - -Asynchronous tasks need proper management. For that, the ECMA standard specifies an internal queue `PromiseJobs`, more often referred to as the "microtask queue" (ES8 term). - -As stated in the [specification](https://tc39.github.io/ecma262/#sec-jobs-and-job-queues): - -- The queue is first-in-first-out: tasks enqueued first are run first. -- Execution of a task is initiated only when nothing else is running. - -Or, to say more simply, when a promise is ready, its `.then/catch/finally` handlers are put into the queue; they are not executed yet. When the JavaScript engine becomes free from the current code, it takes a task from the queue and executes it. - -That's why "code finished" in the example above shows first. - -![](promiseQueue.svg) - -Promise handlers always go through this internal queue. - -If there's a chain with multiple `.then/catch/finally`, then every one of them is executed asynchronously. That is, it first gets queued, then executed when the current code is complete and previously queued handlers are finished. - -**What if the order matters for us? How can we make `code finished` run after `promise done`?** - -Easy, just put it into the queue with `.then`: - -```js run -Promise.resolve() - .then(() => alert("promise done!")) - .then(() => alert("code finished")); -``` - -Now the order is as intended. - -## Unhandled rejection - -Remember the `unhandledrejection` event from the article ? - -Now we can see exactly how JavaScript finds out that there was an unhandled rejection. - -**An "unhandled rejection" occurs when a promise error is not handled at the end of the microtask queue.** - -Normally, if we expect an error, we add `.catch` to the promise chain to handle it: - -```js run -let promise = Promise.reject(new Error("Promise Failed!")); -*!* -promise.catch(err => alert('caught')); -*/!* - -// doesn't run: error handled -window.addEventListener('unhandledrejection', event => alert(event.reason)); -``` - -But if we forget to add `.catch`, then, after the microtask queue is empty, the engine triggers the event: - -```js run -let promise = Promise.reject(new Error("Promise Failed!")); - -// Promise Failed! -window.addEventListener('unhandledrejection', event => alert(event.reason)); -``` - -What if we handle the error later? Like this: - -```js run -let promise = Promise.reject(new Error("Promise Failed!")); -*!* -setTimeout(() => promise.catch(err => alert('caught')), 1000); -*/!* - -// Error: Promise Failed! -window.addEventListener('unhandledrejection', event => alert(event.reason)); -``` - -Now, if we run it, we'll see `Promise Failed!` first and then `caught`. - -If we didn't know about the microtasks queue, we could wonder: "Why did `unhandledrejection` handler run? We did catch and handle the error!" - -But now we understand that `unhandledrejection` is generated when the microtask queue is complete: the engine examines promises and, if any of them is in the "rejected" state, then the event triggers. - -In the example above, `.catch` added by `setTimeout` also triggers. But it does so later, after `unhandledrejection` has already occurred, so it doesn't change anything. - -## Summary - -Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (ES8 term). - -So `.then/catch/finally` handlers are always called after the current code is finished. - -If we need to guarantee that a piece of code is executed after `.then/catch/finally`, we can add it into a chained `.then` call. - -In most Javascript engines, including browsers and Node.js, the concept of microtasks is closely tied with the "event loop" and "macrotasks". As these have no direct relation to promises, they are covered in another part of the tutorial, in the article . diff --git a/1-js/11-async/07-microtask-queue/promiseQueue.svg b/1-js/11-async/07-microtask-queue/promiseQueue.svg deleted file mode 100644 index 7f2189849e..0000000000 --- a/1-js/11-async/07-microtask-queue/promiseQueue.svg +++ /dev/null @@ -1 +0,0 @@ -promise . then ( handler ); ... alert ( "code finished" );handler enqueuedqueued handler runsscript execution finished \ No newline at end of file diff --git a/1-js/11-async/08-async-await/01-rewrite-async/solution.md b/1-js/11-async/08-async-await/01-rewrite-async/solution.md deleted file mode 100644 index 6d9b339f65..0000000000 --- a/1-js/11-async/08-async-await/01-rewrite-async/solution.md +++ /dev/null @@ -1,33 +0,0 @@ - -The notes are below the code: - -```js run -async function loadJson(url) { // (1) - let response = await fetch(url); // (2) - - if (response.status == 200) { - let json = await response.json(); // (3) - return json; - } - - throw new Error(response.status); -} - -loadJson('no-such-user.json') - .catch(alert); // Error: 404 (4) -``` - -Notes: - -1. The function `loadJson` becomes `async`. -2. All `.then` inside are replaced with `await`. -3. We can `return response.json()` instead of awaiting for it, like this: - - ```js - if (response.status == 200) { - return response.json(); // (3) - } - ``` - - Then the outer code would have to `await` for that promise to resolve. In our case it doesn't matter. -4. The error thrown from `loadJson` is handled by `.catch`. We can't use `await loadJson(…)` there, because we're not in an `async` function. diff --git a/1-js/11-async/08-async-await/01-rewrite-async/task.md b/1-js/11-async/08-async-await/01-rewrite-async/task.md deleted file mode 100644 index e2fd375d97..0000000000 --- a/1-js/11-async/08-async-await/01-rewrite-async/task.md +++ /dev/null @@ -1,20 +0,0 @@ - -# Rewrite using async/await - -Rewrite this example code from the chapter using `async/await` instead of `.then/catch`: - -```js run -function loadJson(url) { - return fetch(url) - .then(response => { - if (response.status == 200) { - return response.json(); - } else { - throw new Error(response.status); - } - }) -} - -loadJson('no-such-user.json') - .catch(alert); // Error: 404 -``` diff --git a/1-js/11-async/08-async-await/02-rewrite-async-2/solution.md b/1-js/11-async/08-async-await/02-rewrite-async-2/solution.md deleted file mode 100644 index 105948833e..0000000000 --- a/1-js/11-async/08-async-await/02-rewrite-async-2/solution.md +++ /dev/null @@ -1,49 +0,0 @@ - -There are no tricks here. Just replace `.catch` with `try...catch` inside `demoGithubUser` and add `async/await` where needed: - -```js run -class HttpError extends Error { - constructor(response) { - super(`${response.status} for ${response.url}`); - this.name = 'HttpError'; - this.response = response; - } -} - -async function loadJson(url) { - let response = await fetch(url); - if (response.status == 200) { - return response.json(); - } else { - throw new HttpError(response); - } -} - -// Ask for a user name until github returns a valid user -async function demoGithubUser() { - - let user; - while(true) { - let name = prompt("Enter a name?", "iliakan"); - - try { - user = await loadJson(`https://api.github.com/users/${name}`); - break; // no error, exit loop - } catch(err) { - if (err instanceof HttpError && err.response.status == 404) { - // loop continues after the alert - alert("No such user, please reenter."); - } else { - // unknown error, rethrow - throw err; - } - } - } - - - alert(`Full name: ${user.name}.`); - return user; -} - -demoGithubUser(); -``` diff --git a/1-js/11-async/08-async-await/02-rewrite-async-2/task.md b/1-js/11-async/08-async-await/02-rewrite-async-2/task.md deleted file mode 100644 index a5c1c03a2d..0000000000 --- a/1-js/11-async/08-async-await/02-rewrite-async-2/task.md +++ /dev/null @@ -1,48 +0,0 @@ - -# Rewrite "rethrow" with async/await - -Below you can find the "rethrow" example from the chapter . Rewrite it using `async/await` instead of `.then/catch`. - -And get rid of the recursion in favour of a loop in `demoGithubUser`: with `async/await` that becomes easy to do. - -```js run -class HttpError extends Error { - constructor(response) { - super(`${response.status} for ${response.url}`); - this.name = 'HttpError'; - this.response = response; - } -} - -function loadJson(url) { - return fetch(url) - .then(response => { - if (response.status == 200) { - return response.json(); - } else { - throw new HttpError(response); - } - }) -} - -// Ask for a user name until github returns a valid user -function demoGithubUser() { - let name = prompt("Enter a name?", "iliakan"); - - return loadJson(`https://api.github.com/users/${name}`) - .then(user => { - alert(`Full name: ${user.name}.`); - return user; - }) - .catch(err => { - if (err instanceof HttpError && err.response.status == 404) { - alert("No such user, please reenter."); - return demoGithubUser(); - } else { - throw err; - } - }); -} - -demoGithubUser(); -``` diff --git a/1-js/11-async/08-async-await/03-async-from-regular/solution.md b/1-js/11-async/08-async-await/03-async-from-regular/solution.md deleted file mode 100644 index 7e2ab597eb..0000000000 --- a/1-js/11-async/08-async-await/03-async-from-regular/solution.md +++ /dev/null @@ -1,20 +0,0 @@ - -That's the case when knowing how it works inside is helpful. - -Just treat `async` call as promise and attach `.then` to it: -```js run -async function wait() { - await new Promise(resolve => setTimeout(resolve, 1000)); - - return 10; -} - -function f() { - // shows 10 after 1 second -*!* - wait().then(result => alert(result)); -*/!* -} - -f(); -``` diff --git a/1-js/11-async/08-async-await/03-async-from-regular/task.md b/1-js/11-async/08-async-await/03-async-from-regular/task.md deleted file mode 100644 index 18d0e2ce75..0000000000 --- a/1-js/11-async/08-async-await/03-async-from-regular/task.md +++ /dev/null @@ -1,20 +0,0 @@ - -# Call async from non-async - -We have a "regular" function. How to call `async` from it and use its result? - -```js -async function wait() { - await new Promise(resolve => setTimeout(resolve, 1000)); - - return 10; -} - -function f() { - // ...what to write here? - // we need to call async wait() and wait to get 10 - // remember, we can't use "await" -} -``` - -P.S. The task is technically very simple, but the question is quite common for developers new to async/await. diff --git a/1-js/11-async/08-async-await/article.md b/1-js/11-async/08-async-await/article.md deleted file mode 100644 index 29bfcaf516..0000000000 --- a/1-js/11-async/08-async-await/article.md +++ /dev/null @@ -1,304 +0,0 @@ -# Async/await - -There's a special syntax to work with promises in a more comfortable fashion, called "async/await". It's surprisingly easy to understand and use. - -## Async functions - -Let's start with the `async` keyword. It can be placed before a function, like this: - -```js -async function f() { - return 1; -} -``` - -The word "async" before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically. - -For instance, this function returns a resolved promise with the result of `1`; let's test it: - -```js run -async function f() { - return 1; -} - -f().then(alert); // 1 -``` - -...We could explicitly return a promise, which would be the same: - -```js run -async function f() { - return Promise.resolve(1); -} - -f().then(alert); // 1 -``` - -So, `async` ensures that the function returns a promise, and wraps non-promises in it. Simple enough, right? But not only that. There's another keyword, `await`, that works only inside `async` functions, and it's pretty cool. - -## Await - -The syntax: - -```js -// works only inside async functions -let value = await promise; -``` - -The keyword `await` makes JavaScript wait until that promise settles and returns its result. - -Here's an example with a promise that resolves in 1 second: -```js run -async function f() { - - let promise = new Promise((resolve, reject) => { - setTimeout(() => resolve("done!"), 1000) - }); - -*!* - let result = await promise; // wait until the promise resolves (*) -*/!* - - alert(result); // "done!" -} - -f(); -``` - -The function execution "pauses" at the line `(*)` and resumes when the promise settles, with `result` becoming its result. So the code above shows "done!" in one second. - -Let's emphasize: `await` literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn't cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc. - -It's just a more elegant syntax of getting the promise result than `promise.then`, easier to read and write. - -````warn header="Can't use `await` in regular functions" -If we try to use `await` in non-async function, there would be a syntax error: - -```js run -function f() { - let promise = Promise.resolve(1); -*!* - let result = await promise; // Syntax error -*/!* -} -``` - -We may get this error if we forget to put `async` before a function. As said, `await` only works inside an `async` function. -```` - -Let's take the `showAvatar()` example from the chapter and rewrite it using `async/await`: - -1. We'll need to replace `.then` calls with `await`. -2. Also we should make the function `async` for them to work. - -```js run -async function showAvatar() { - - // read our JSON - let response = await fetch('http://github.com/article/promise-chaining/user.json'); - let user = await response.json(); - - // read github user - let githubResponse = await fetch(`https://api.github.com/users/${user.name}`); - let githubUser = await githubResponse.json(); - - // show the avatar - let img = document.createElement('img'); - img.src = githubUser.avatar_url; - img.className = "promise-avatar-example"; - document.body.append(img); - - // wait 3 seconds - await new Promise((resolve, reject) => setTimeout(resolve, 3000)); - - img.remove(); - - return githubUser; -} - -showAvatar(); -``` - -Pretty clean and easy to read, right? Much better than before. - -````smart header="`await` won't work in the top-level code" -People who are just starting to use `await` tend to forget the fact that we can't use `await` in top-level code. For example, this will not work: - -```js run -// syntax error in top-level code -let response = await fetch('http://github.com/article/promise-chaining/user.json'); -let user = await response.json(); -``` - -But we can wrap it into an anonymous async function, like this: - -```js -(async () => { - let response = await fetch('http://github.com/article/promise-chaining/user.json'); - let user = await response.json(); - ... -})(); -``` -```` - -````smart header="`await` accepts \"thenables\"" -Like `promise.then`, `await` allows us to use thenable objects (those with a callable `then` method). The idea is that a third-party object may not be a promise, but promise-compatible: if it supports `.then`, that's enough to use it with `await`. - -Here's a demo `Thenable` class; the `await` below accepts its instances: - -```js run -class Thenable { - constructor(num) { - this.num = num; - } - then(resolve, reject) { - alert(resolve); - // resolve with this.num*2 after 1000ms - setTimeout(() => resolve(this.num * 2), 1000); // (*) - } -}; - -async function f() { - // waits for 1 second, then result becomes 2 - let result = await new Thenable(1); - alert(result); -} - -f(); -``` - -If `await` gets a non-promise object with `.then`, it calls that method providing the built-in functions `resolve` and `reject` as arguments (just as it does for a regular `Promise` executor). Then `await` waits until one of them is called (in the example above it happens in the line `(*)`) and then proceeds with the result. -```` - -````smart header="Async class methods" -To declare an async class method, just prepend it with `async`: - -```js run -class Waiter { -*!* - async wait() { -*/!* - return await Promise.resolve(1); - } -} - -new Waiter() - .wait() - .then(alert); // 1 -``` -The meaning is the same: it ensures that the returned value is a promise and enables `await`. - -```` -## Error handling - -If a promise resolves normally, then `await promise` returns the result. But in the case of a rejection, it throws the error, just as if there were a `throw` statement at that line. - -This code: - -```js -async function f() { -*!* - await Promise.reject(new Error("Whoops!")); -*/!* -} -``` - -...is the same as this: - -```js -async function f() { -*!* - throw new Error("Whoops!"); -*/!* -} -``` - -In real situations, the promise may take some time before it rejects. In that case there will be a delay before `await` throws an error. - -We can catch that error using `try..catch`, the same way as a regular `throw`: - -```js run -async function f() { - - try { - let response = await fetch('http://github.com/service/http://no-such-url/'); - } catch(err) { -*!* - alert(err); // TypeError: failed to fetch -*/!* - } -} - -f(); -``` - -In the case of an error, the control jumps to the `catch` block. We can also wrap multiple lines: - -```js run -async function f() { - - try { - let response = await fetch('http://github.com/no-user-here'); - let user = await response.json(); - } catch(err) { - // catches errors both in fetch and response.json - alert(err); - } -} - -f(); -``` - -If we don't have `try..catch`, then the promise generated by the call of the async function `f()` becomes rejected. We can append `.catch` to handle it: - -```js run -async function f() { - let response = await fetch('http://github.com/service/http://no-such-url/'); -} - -// f() becomes a rejected promise -*!* -f().catch(alert); // TypeError: failed to fetch // (*) -*/!* -``` - -If we forget to add `.catch` there, then we get an unhandled promise error (viewable in the console). We can catch such errors using a global `unhandledrejection` event handler as described in the chapter . - - -```smart header="`async/await` and `promise.then/catch`" -When we use `async/await`, we rarely need `.then`, because `await` handles the waiting for us. And we can use a regular `try..catch` instead of `.catch`. That's usually (but not always) more convenient. - -But at the top level of the code, when we're outside any `async` function, we're syntactically unable to use `await`, so it's a normal practice to add `.then/catch` to handle the final result or falling-through error, like in the line `(*)` of the example above. -``` - -````smart header="`async/await` works well with `Promise.all`" -When we need to wait for multiple promises, we can wrap them in `Promise.all` and then `await`: - -```js -// wait for the array of results -let results = await Promise.all([ - fetch(url1), - fetch(url2), - ... -]); -``` - -In the case of an error, it propagates as usual, from the failed promise to `Promise.all`, and then becomes an exception that we can catch using `try..catch` around the call. - -```` - -## Summary - -The `async` keyword before a function has two effects: - -1. Makes it always return a promise. -2. Allows `await` to be used in it. - -The `await` keyword before a promise makes JavaScript wait until that promise settles, and then: - -1. If it's an error, the exception is generated — same as if `throw error` were called at that very place. -2. Otherwise, it returns the result. - -Together they provide a great framework to write asynchronous code that is easy to both read and write. - -With `async/await` we rarely need to write `promise.then/catch`, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also `Promise.all` is nice when we are waiting for many tasks simultaneously. diff --git a/1-js/11-async/08-async-await/head.html b/1-js/11-async/08-async-await/head.html deleted file mode 100644 index f3457236ef..0000000000 --- a/1-js/11-async/08-async-await/head.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/1-js/11-async/index.md b/1-js/11-async/index.md deleted file mode 100644 index a6ec54397b..0000000000 --- a/1-js/11-async/index.md +++ /dev/null @@ -1,2 +0,0 @@ - -# Promises, async/await diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js deleted file mode 100644 index 45c8b071bb..0000000000 --- a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js +++ /dev/null @@ -1,9 +0,0 @@ -function* pseudoRandom(seed) { - let value = seed; - - while(true) { - value = value * 16807 % 2147483647 - yield value; - } - -}; diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js deleted file mode 100644 index 5f3a0ae87e..0000000000 --- a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js +++ /dev/null @@ -1,21 +0,0 @@ -describe("pseudoRandom", function() { - - it("follows the formula", function() { - let generator = pseudoRandom(1); - - assert.equal(generator.next().value, 16807); - assert.equal(generator.next().value, 282475249); - assert.equal(generator.next().value, 1622650073); - }); - - - it("returns same value for the same seed", function() { - let generator1 = pseudoRandom(123); - let generator2 = pseudoRandom(123); - - assert.deepEqual(generator1.next(), generator2.next()); - assert.deepEqual(generator1.next(), generator2.next()); - assert.deepEqual(generator1.next(), generator2.next()); - }); - -}); diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md deleted file mode 100644 index af2ad0eed0..0000000000 --- a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md +++ /dev/null @@ -1,38 +0,0 @@ -```js run demo -function* pseudoRandom(seed) { - let value = seed; - - while(true) { - value = value * 16807 % 2147483647 - yield value; - } - -}; - -let generator = pseudoRandom(1); - -alert(generator.next().value); // 16807 -alert(generator.next().value); // 282475249 -alert(generator.next().value); // 1622650073 -``` - -Please note, the same can be done with a regular function, like this: - -```js run -function pseudoRandom(seed) { - let value = seed; - - return function() { - value = value * 16807 % 2147483647; - return value; - } -} - -let generator = pseudoRandom(1); - -alert(generator()); // 16807 -alert(generator()); // 282475249 -alert(generator()); // 1622650073 -``` - -That also works. But then we lose ability to iterate with `for..of` and to use generator composition, that may be useful elsewhere. diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md deleted file mode 100644 index e7c251ad36..0000000000 --- a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md +++ /dev/null @@ -1,34 +0,0 @@ - -# Pseudo-random generator - -There are many areas where we need random data. - -One of them is testing. We may need random data: text, numbers, etc. to test things out well. - -In JavaScript, we could use `Math.random()`. But if something goes wrong, we'd like to be able to repeat the test, using exactly the same data. - -For that, so called "seeded pseudo-random generators" are used. They take a "seed", the first value, and then generate the next ones using a formula so that the same seed yields the same sequence, and hence the whole flow is easily reproducible. We only need to remember the seed to repeat it. - -An example of such formula, that generates somewhat uniformly distributed values: - -``` -next = previous * 16807 % 2147483647 -``` - -If we use `1` as the seed, the values will be: -1. `16807` -2. `282475249` -3. `1622650073` -4. ...and so on... - -The task is to create a generator function `pseudoRandom(seed)` that takes `seed` and creates the generator with this formula. - -Usage example: - -```js -let generator = pseudoRandom(1); - -alert(generator.next().value); // 16807 -alert(generator.next().value); // 282475249 -alert(generator.next().value); // 1622650073 -``` diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md deleted file mode 100644 index e77ceb66d3..0000000000 --- a/1-js/12-generators-iterators/1-generators/article.md +++ /dev/null @@ -1,461 +0,0 @@ -# Generators - -Regular functions return only one, single value (or nothing). - -Generators can return ("yield") multiple values, one after another, on-demand. They work great with [iterables](info:iterable), allowing to create data streams with ease. - -## Generator functions - -To create a generator, we need a special syntax construct: `function*`, so-called "generator function". - -It looks like this: - -```js -function* generateSequence() { - yield 1; - yield 2; - return 3; -} -``` - -Generator functions behave differently from regular ones. When such function is called, it doesn't run its code. Instead it returns a special object, called "generator object", to manage the execution. - -Here, take a look: - -```js run -function* generateSequence() { - yield 1; - yield 2; - return 3; -} - -// "generator function" creates "generator object" -let generator = generateSequence(); -*!* -alert(generator); // [object Generator] -*/!* -``` - -The function code execution hasn't started yet: - -![](generateSequence-1.svg) - -The main method of a generator is `next()`. When called, it runs the execution until the nearest `yield ` statement (`value` can be omitted, then it's `undefined`). Then the function execution pauses, and the yielded `value` is returned to the outer code. - -The result of `next()` is always an object with two properties: -- `value`: the yielded value. -- `done`: `true` if the function code has finished, otherwise `false`. - -For instance, here we create the generator and get its first yielded value: - -```js run -function* generateSequence() { - yield 1; - yield 2; - return 3; -} - -let generator = generateSequence(); - -*!* -let one = generator.next(); -*/!* - -alert(JSON.stringify(one)); // {value: 1, done: false} -``` - -As of now, we got the first value only, and the function execution is on the second line: - -![](generateSequence-2.svg) - -Let's call `generator.next()` again. It resumes the code execution and returns the next `yield`: - -```js -let two = generator.next(); - -alert(JSON.stringify(two)); // {value: 2, done: false} -``` - -![](generateSequence-3.svg) - -And, if we call it a third time, the execution reaches the `return` statement that finishes the function: - -```js -let three = generator.next(); - -alert(JSON.stringify(three)); // {value: 3, *!*done: true*/!*} -``` - -![](generateSequence-4.svg) - -Now the generator is done. We should see it from `done:true` and process `value:3` as the final result. - -New calls to `generator.next()` don't make sense any more. If we do them, they return the same object: `{done: true}`. - -```smart header="`function* f(…)` or `function *f(…)`?" -Both syntaxes are correct. - -But usually the first syntax is preferred, as the star `*` denotes that it's a generator function, it describes the kind, not the name, so it should stick with the `function` keyword. -``` - -## Generators are iterable - -As you probably already guessed looking at the `next()` method, generators are [iterable](info:iterable). - -We can loop over their values using `for..of`: - -```js run -function* generateSequence() { - yield 1; - yield 2; - return 3; -} - -let generator = generateSequence(); - -for(let value of generator) { - alert(value); // 1, then 2 -} -``` - -Looks a lot nicer than calling `.next().value`, right? - -...But please note: the example above shows `1`, then `2`, and that's all. It doesn't show `3`! - -It's because `for..of` iteration ignores the last `value`, when `done: true`. So, if we want all results to be shown by `for..of`, we must return them with `yield`: - -```js run -function* generateSequence() { - yield 1; - yield 2; -*!* - yield 3; -*/!* -} - -let generator = generateSequence(); - -for(let value of generator) { - alert(value); // 1, then 2, then 3 -} -``` - -As generators are iterable, we can call all related functionality, e.g. the spread syntax `...`: - -```js run -function* generateSequence() { - yield 1; - yield 2; - yield 3; -} - -let sequence = [0, ...generateSequence()]; - -alert(sequence); // 0, 1, 2, 3 -``` - -In the code above, `...generateSequence()` turns the iterable generator object into an array of items (read more about the spread syntax in the chapter [](info:rest-parameters-spread#spread-syntax)) - -## Using generators for iterables - -Some time ago, in the chapter [](info:iterable) we created an iterable `range` object that returns values `from..to`. - -Here, let's remember the code: - -```js run -let range = { - from: 1, - to: 5, - - // for..of range calls this method once in the very beginning - [Symbol.iterator]() { - // ...it returns the iterator object: - // onward, for..of works only with that object, asking it for next values - return { - current: this.from, - last: this.to, - - // next() is called on each iteration by the for..of loop - next() { - // it should return the value as an object {done:.., value :...} - if (this.current <= this.last) { - return { done: false, value: this.current++ }; - } else { - return { done: true }; - } - } - }; - } -}; - -// iteration over range returns numbers from range.from to range.to -alert([...range]); // 1,2,3,4,5 -``` - -We can use a generator function for iteration by providing it as `Symbol.iterator`. - -Here's the same `range`, but much more compact: - -```js run -let range = { - from: 1, - to: 5, - - *[Symbol.iterator]() { // a shorthand for [Symbol.iterator]: function*() - for(let value = this.from; value <= this.to; value++) { - yield value; - } - } -}; - -alert( [...range] ); // 1,2,3,4,5 -``` - -That works, because `range[Symbol.iterator]()` now returns a generator, and generator methods are exactly what `for..of` expects: -- it has a `.next()` method -- that returns values in the form `{value: ..., done: true/false}` - -That's not a coincidence, of course. Generators were added to JavaScript language with iterators in mind, to implement them easily. - -The variant with a generator is much more concise than the original iterable code of `range`, and keeps the same functionality. - -```smart header="Generators may generate values forever" -In the examples above we generated finite sequences, but we can also make a generator that yields values forever. For instance, an unending sequence of pseudo-random numbers. - -That surely would require a `break` (or `return`) in `for..of` over such generator. Otherwise, the loop would repeat forever and hang. -``` - -## Generator composition - -Generator composition is a special feature of generators that allows to transparently "embed" generators in each other. - -For instance, we have a function that generates a sequence of numbers: - -```js -function* generateSequence(start, end) { - for (let i = start; i <= end; i++) yield i; -} -``` - -Now we'd like to reuse it to generate a more complex sequence: -- first, digits `0..9` (with character codes 48..57), -- followed by uppercase alphabet letters `A..Z` (character codes 65..90) -- followed by lowercase alphabet letters `a..z` (character codes 97..122) - -We can use this sequence e.g. to create passwords by selecting characters from it (could add syntax characters as well), but let's generate it first. - -In a regular function, to combine results from multiple other functions, we call them, store the results, and then join at the end. - -For generators, there's a special `yield*` syntax to "embed" (compose) one generator into another. - -The composed generator: - -```js run -function* generateSequence(start, end) { - for (let i = start; i <= end; i++) yield i; -} - -function* generatePasswordCodes() { - -*!* - // 0..9 - yield* generateSequence(48, 57); - - // A..Z - yield* generateSequence(65, 90); - - // a..z - yield* generateSequence(97, 122); -*/!* - -} - -let str = ''; - -for(let code of generatePasswordCodes()) { - str += String.fromCharCode(code); -} - -alert(str); // 0..9A..Za..z -``` - -The `yield*` directive *delegates* the execution to another generator. This term means that `yield* gen` iterates over the generator `gen` and transparently forwards its yields outside. As if the values were yielded by the outer generator. - -The result is the same as if we inlined the code from nested generators: - -```js run -function* generateSequence(start, end) { - for (let i = start; i <= end; i++) yield i; -} - -function* generateAlphaNum() { - -*!* - // yield* generateSequence(48, 57); - for (let i = 48; i <= 57; i++) yield i; - - // yield* generateSequence(65, 90); - for (let i = 65; i <= 90; i++) yield i; - - // yield* generateSequence(97, 122); - for (let i = 97; i <= 122; i++) yield i; -*/!* - -} - -let str = ''; - -for(let code of generateAlphaNum()) { - str += String.fromCharCode(code); -} - -alert(str); // 0..9A..Za..z -``` - -A generator composition is a natural way to insert a flow of one generator into another. It doesn't use extra memory to store intermediate results. - -## "yield" is a two-way street - -Until this moment, generators were similar to iterable objects, with a special syntax to generate values. But in fact they are much more powerful and flexible. - -That's because `yield` is a two-way street: it not only returns the result to the outside, but also can pass the value inside the generator. - -To do so, we should call `generator.next(arg)`, with an argument. That argument becomes the result of `yield`. - -Let's see an example: - -```js run -function* gen() { -*!* - // Pass a question to the outer code and wait for an answer - let result = yield "2 + 2 = ?"; // (*) -*/!* - - alert(result); -} - -let generator = gen(); - -let question = generator.next().value; // <-- yield returns the value - -generator.next(4); // --> pass the result into the generator -``` - -![](genYield2.svg) - -1. The first call `generator.next()` should be always made without an argument (the argument is ignored if passed). It starts the execution and returns the result of the first `yield "2+2=?"`. At this point the generator pauses the execution, while staying on the line `(*)`. -2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code. -3. On `generator.next(4)`, the generator resumes, and `4` gets in as the result: `let result = 4`. - -Please note, the outer code does not have to immediately call `next(4)`. It may take time. That's not a problem: the generator will wait. - -For instance: - -```js -// resume the generator after some time -setTimeout(() => generator.next(4), 1000); -``` - -As we can see, unlike regular functions, a generator and the calling code can exchange results by passing values in `next/yield`. - -To make things more obvious, here's another example, with more calls: - -```js run -function* gen() { - let ask1 = yield "2 + 2 = ?"; - - alert(ask1); // 4 - - let ask2 = yield "3 * 3 = ?" - - alert(ask2); // 9 -} - -let generator = gen(); - -alert( generator.next().value ); // "2 + 2 = ?" - -alert( generator.next(4).value ); // "3 * 3 = ?" - -alert( generator.next(9).done ); // true -``` - -The execution picture: - -![](genYield2-2.svg) - -1. The first `.next()` starts the execution... It reaches the first `yield`. -2. The result is returned to the outer code. -3. The second `.next(4)` passes `4` back to the generator as the result of the first `yield`, and resumes the execution. -4. ...It reaches the second `yield`, that becomes the result of the generator call. -5. The third `next(9)` passes `9` into the generator as the result of the second `yield` and resumes the execution that reaches the end of the function, so `done: true`. - -It's like a "ping-pong" game. Each `next(value)` (excluding the first one) passes a value into the generator, that becomes the result of the current `yield`, and then gets back the result of the next `yield`. - -## generator.throw - -As we observed in the examples above, the outer code may pass a value into the generator, as the result of `yield`. - -...But it can also initiate (throw) an error there. That's natural, as an error is a kind of result. - -To pass an error into a `yield`, we should call `generator.throw(err)`. In that case, the `err` is thrown in the line with that `yield`. - -For instance, here the yield of `"2 + 2 = ?"` leads to an error: - -```js run -function* gen() { - try { - let result = yield "2 + 2 = ?"; // (1) - - alert("The execution does not reach here, because the exception is thrown above"); - } catch(e) { - alert(e); // shows the error - } -} - -let generator = gen(); - -let question = generator.next().value; - -*!* -generator.throw(new Error("The answer is not found in my database")); // (2) -*/!* -``` - -The error, thrown into the generator at line `(2)` leads to an exception in line `(1)` with `yield`. In the example above, `try..catch` catches it and shows it. - -If we don't catch it, then just like any exception, it "falls out" the generator into the calling code. - -The current line of the calling code is the line with `generator.throw`, labelled as `(2)`. So we can catch it here, like this: - -```js run -function* generate() { - let result = yield "2 + 2 = ?"; // Error in this line -} - -let generator = generate(); - -let question = generator.next().value; - -*!* -try { - generator.throw(new Error("The answer is not found in my database")); -} catch(e) { - alert(e); // shows the error -} -*/!* -``` - -If we don't catch the error there, then, as usual, it falls through to the outer calling code (if any) and, if uncaught, kills the script. - -## Summary - -- Generators are created by generator functions `function* f(…) {…}`. -- Inside generators (only) there exists a `yield` operator. -- The outer code and the generator may exchange results via `next/yield` calls. - -In modern JavaScript, generators are rarely used. But sometimes they come in handy, because the ability of a function to exchange data with the calling code during the execution is quite unique. And, surely, they are great for making iterable objects. - -Also, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data (e.g paginated fetches over a network) in `for await ... of` loops. - -In web-programming we often work with streamed data, so that's another very important use case. diff --git a/1-js/12-generators-iterators/1-generators/genYield2-2.svg b/1-js/12-generators-iterators/1-generators/genYield2-2.svg deleted file mode 100644 index 41f1633645..0000000000 --- a/1-js/12-generators-iterators/1-generators/genYield2-2.svg +++ /dev/null @@ -1 +0,0 @@ -"2 + 2 = ?""3 * 3 = ?". next ( 4 ). next ( 9 )GeneratorCalling code \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/genYield2.svg b/1-js/12-generators-iterators/1-generators/genYield2.svg deleted file mode 100644 index 6113287551..0000000000 --- a/1-js/12-generators-iterators/1-generators/genYield2.svg +++ /dev/null @@ -1 +0,0 @@ -question = "2 + 2 = ?"GeneratorCalling code.next(4) \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-1.svg b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg deleted file mode 100644 index 0a00c47120..0000000000 --- a/1-js/12-generators-iterators/1-generators/generateSequence-1.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg deleted file mode 100644 index dc2225d8a5..0000000000 --- a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg +++ /dev/null @@ -1 +0,0 @@ -{value: 1, done: false} \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg deleted file mode 100644 index 68bf8d2683..0000000000 --- a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg +++ /dev/null @@ -1 +0,0 @@ -{value: 2, done: false} \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-4.svg b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg deleted file mode 100644 index e590c59a52..0000000000 --- a/1-js/12-generators-iterators/1-generators/generateSequence-4.svg +++ /dev/null @@ -1 +0,0 @@ -{value: 3, done: true} \ No newline at end of file diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md deleted file mode 100644 index 97c8e12a5e..0000000000 --- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md +++ /dev/null @@ -1,363 +0,0 @@ - -# Async iterators and generators - -Asynchronous iterators allow us to iterate over data that comes asynchronously, on-demand. Like, for instance, when we download something chunk-by-chunk over a network. And asynchronous generators make it even more convenient. - -Let's see a simple example first, to grasp the syntax, and then review a real-life use case. - -## Async iterators - -Asynchronous iterators are similar to regular iterators, with a few syntactic differences. - -A "regular" iterable object, as described in the chapter , looks like this: - -```js run -let range = { - from: 1, - to: 5, - - // for..of calls this method once in the very beginning -*!* - [Symbol.iterator]() { -*/!* - // ...it returns the iterator object: - // onward, for..of works only with that object, - // asking it for next values using next() - return { - current: this.from, - last: this.to, - - // next() is called on each iteration by the for..of loop -*!* - next() { // (2) - // it should return the value as an object {done:.., value :...} -*/!* - if (this.current <= this.last) { - return { done: false, value: this.current++ }; - } else { - return { done: true }; - } - } - }; - } -}; - -for(let value of range) { - alert(value); // 1 then 2, then 3, then 4, then 5 -} -``` - -If necessary, please refer to the [chapter about iterables](info:iterable) for details about regular iterators. - -To make the object iterable asynchronously: -1. We need to use `Symbol.asyncIterator` instead of `Symbol.iterator`. -2. `next()` should return a promise. -3. To iterate over such an object, we should use a `for await (let item of iterable)` loop. - -Let's make an iterable `range` object, like the one before, but now it will return values asynchronously, one per second: - -```js run -let range = { - from: 1, - to: 5, - - // for await..of calls this method once in the very beginning -*!* - [Symbol.asyncIterator]() { // (1) -*/!* - // ...it returns the iterator object: - // onward, for await..of works only with that object, - // asking it for next values using next() - return { - current: this.from, - last: this.to, - - // next() is called on each iteration by the for await..of loop -*!* - async next() { // (2) - // it should return the value as an object {done:.., value :...} - // (automatically wrapped into a promise by async) -*/!* - -*!* - // can use await inside, do async stuff: - await new Promise(resolve => setTimeout(resolve, 1000)); // (3) -*/!* - - if (this.current <= this.last) { - return { done: false, value: this.current++ }; - } else { - return { done: true }; - } - } - }; - } -}; - -(async () => { - -*!* - for await (let value of range) { // (4) - alert(value); // 1,2,3,4,5 - } -*/!* - -})() -``` - -As we can see, the structure is similar to regular iterators: - -1. To make an object asynchronously iterable, it must have a method `Symbol.asyncIterator` `(1)`. -2. This method must return the object with `next()` method returning a promise `(2)`. -3. The `next()` method doesn't have to be `async`, it may be a regular method returning a promise, but `async` allows us to use `await`, so that's convenient. Here we just delay for a second `(3)`. -4. To iterate, we use `for await(let value of range)` `(4)`, namely add "await" after "for". It calls `range[Symbol.asyncIterator]()` once, and then its `next()` for values. - -Here's a small cheatsheet: - -| | Iterators | Async iterators | -|-------|-----------|-----------------| -| Object method to provide iterator | `Symbol.iterator` | `Symbol.asyncIterator` | -| `next()` return value is | any value | `Promise` | -| to loop, use | `for..of` | `for await..of` | - -````warn header="The spread syntax `...` doesn't work asynchronously" -Features that require regular, synchronous iterators, don't work with asynchronous ones. - -For instance, a spread syntax won't work: -```js -alert( [...range] ); // Error, no Symbol.iterator -``` - -That's natural, as it expects to find `Symbol.iterator`, same as `for..of` without `await`. Not `Symbol.asyncIterator`. -```` - -## Async generators - -As we already know, JavaScript also supports generators, and they are iterable. - -Let's recall a sequence generator from the chapter [](info:generators). It generates a sequence of values from `start` to `end`: - -```js run -function* generateSequence(start, end) { - for (let i = start; i <= end; i++) { - yield i; - } -} - -for(let value of generateSequence(1, 5)) { - alert(value); // 1, then 2, then 3, then 4, then 5 -} -``` - -In regular generators we can't use `await`. All values must come synchronously: there's no place for delay in `for..of`, it's a synchronous construct. - -But what if we need to use `await` in the generator body? To perform network requests, for instance. - -No problem, just prepend it with `async`, like this: - -```js run -*!*async*/!* function* generateSequence(start, end) { - - for (let i = start; i <= end; i++) { - -*!* - // yay, can use await! - await new Promise(resolve => setTimeout(resolve, 1000)); -*/!* - - yield i; - } - -} - -(async () => { - - let generator = generateSequence(1, 5); - for *!*await*/!* (let value of generator) { - alert(value); // 1, then 2, then 3, then 4, then 5 - } - -})(); -``` - -Now we have the async generator, iterable with `for await...of`. - -It's indeed very simple. We add the `async` keyword, and the generator now can use `await` inside of it, rely on promises and other async functions. - -Technically, another difference of an async generator is that its `generator.next()` method is now asynchronous also, it returns promises. - -In a regular generator we'd use `result = generator.next()` to get values. In an async generator, we should add `await`, like this: - -```js -result = await generator.next(); // result = {value: ..., done: true/false} -``` - -## Async iterables - -As we already know, to make an object iterable, we should add `Symbol.iterator` to it. - -```js -let range = { - from: 1, - to: 5, -*!* - [Symbol.iterator]() { - return - } -*/!* -} -``` - -A common practice for `Symbol.iterator` is to return a generator, rather than a plain object with `next` as in the example before. - -Let's recall an example from the chapter [](info:generators): - -```js run -let range = { - from: 1, - to: 5, - - *[Symbol.iterator]() { // a shorthand for [Symbol.iterator]: function*() - for(let value = this.from; value <= this.to; value++) { - yield value; - } - } -}; - -for(let value of range) { - alert(value); // 1, then 2, then 3, then 4, then 5 -} -``` - -Here a custom object `range` is iterable, and the generator `*[Symbol.iterator]` implements the logic for listing values. - -If we'd like to add async actions into the generator, then we should replace `Symbol.iterator` with async `Symbol.asyncIterator`: - -```js run -let range = { - from: 1, - to: 5, - -*!* - async *[Symbol.asyncIterator]() { // same as [Symbol.asyncIterator]: async function*() -*/!* - for(let value = this.from; value <= this.to; value++) { - - // make a pause between values, wait for something - await new Promise(resolve => setTimeout(resolve, 1000)); - - yield value; - } - } -}; - -(async () => { - - for *!*await*/!* (let value of range) { - alert(value); // 1, then 2, then 3, then 4, then 5 - } - -})(); -``` - -Now values come with a delay of 1 second between them. - -## Real-life example - -So far we've seen simple examples, to gain basic understanding. Now let's review a real-life use case. - -There are many online services that deliver paginated data. For instance, when we need a list of users, a request returns a pre-defined count (e.g. 100 users) - "one page", and provides a URL to the next page. - -This pattern is very common. It's not about users, but just about anything. For instance, GitHub allows us to retrieve commits in the same, paginated fashion: - -- We should make a request to URL in the form `https://api.github.com/repos//commits`. -- It responds with a JSON of 30 commits, and also provides a link to the next page in the `Link` header. -- Then we can use that link for the next request, to get more commits, and so on. - -But we'd like to have a simpler API: an iterable object with commits, so that we could go over them like this: - -```js -let repo = 'javascript-tutorial/en.javascript.info'; // GitHub repository to get commits from - -for await (let commit of fetchCommits(repo)) { - // process commit -} -``` - -We'd like to make a function `fetchCommits(repo)` that gets commits for us, making requests whenever needed. And let it care about all pagination stuff. For us it'll be a simple `for await..of`. - -With async generators that's pretty easy to implement: - -```js -async function* fetchCommits(repo) { - let url = `https://api.github.com/repos/${repo}/commits`; - - while (url) { - const response = await fetch(url, { // (1) - headers: {'User-Agent': 'Our script'}, // github requires user-agent header - }); - - const body = await response.json(); // (2) response is JSON (array of commits) - - // (3) the URL of the next page is in the headers, extract it - let nextPage = response.headers.get('Link').match(/<(.*?)>; rel="next"/); - nextPage = nextPage?.[1]; - - url = nextPage; - - for(let commit of body) { // (4) yield commits one by one, until the page ends - yield commit; - } - } -} -``` - -1. We use the browser [fetch](info:fetch) method to download from a remote URL. It allows us to supply authorization and other headers if needed -- here GitHub requires `User-Agent`. -2. The fetch result is parsed as JSON. That's again a `fetch`-specific method. -3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regexp for that. The next page URL may look like `https://api.github.com/repositories/93253246/commits?page=2`. It's generated by GitHub itself. -4. Then we yield all commits received, and when they finish, the next `while(url)` iteration will trigger, making one more request. - -An example of use (shows commit authors in console): - -```js run -(async () => { - - let count = 0; - - for await (const commit of fetchCommits('javascript-tutorial/en.javascript.info')) { - - console.log(commit.author.login); - - if (++count == 100) { // let's stop at 100 commits - break; - } - } - -})(); -``` - -That's just what we wanted. The internal mechanics of paginated requests is invisible from the outside. For us it's just an async generator that returns commits. - -## Summary - -Regular iterators and generators work fine with the data that doesn't take time to generate. - -When we expect the data to come asynchronously, with delays, their async counterparts can be used, and `for await..of` instead of `for..of`. - -Syntax differences between async and regular iterators: - -| | Iterable | Async Iterable | -|-------|-----------|-----------------| -| Method to provide iterator | `Symbol.iterator` | `Symbol.asyncIterator` | -| `next()` return value is | `{value:…, done: true/false}` | `Promise` that resolves to `{value:…, done: true/false}` | - -Syntax differences between async and regular generators: - -| | Generators | Async generators | -|-------|-----------|-----------------| -| Declaration | `function*` | `async function*` | -| `next()` return value is | `{value:…, done: true/false}` | `Promise` that resolves to `{value:…, done: true/false}` | - -In web-development we often meet streams of data, when it flows chunk-by-chunk. For instance, downloading or uploading a big file. - -We can use async generators to process such data. It's also noteworthy that in some environments, like in browsers, there's also another API called Streams, that provides special interfaces to work with such streams, to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere). diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/head.html b/1-js/12-generators-iterators/2-async-iterators-generators/head.html deleted file mode 100644 index 03f21e2bd8..0000000000 --- a/1-js/12-generators-iterators/2-async-iterators-generators/head.html +++ /dev/null @@ -1,24 +0,0 @@ - diff --git a/1-js/12-generators-iterators/index.md b/1-js/12-generators-iterators/index.md deleted file mode 100644 index ccc909d1aa..0000000000 --- a/1-js/12-generators-iterators/index.md +++ /dev/null @@ -1,2 +0,0 @@ - -# Generators, advanced iteration diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md deleted file mode 100644 index e9e1fc249a..0000000000 --- a/1-js/13-modules/01-modules-intro/article.md +++ /dev/null @@ -1,390 +0,0 @@ - -# Modules, introduction - -As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose. - -For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need. - -But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand. - -To name some (for historical reasons): - -- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](http://requirejs.org/). -- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server. -- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS. - -Now all these slowly become a part of history, but we still can find them in old scripts. - -The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study the modern JavaScript modules from now on. - -## What is a module? - -A module is just a file. One script is one module. As simple as that. - -Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one: - -- `export` keyword labels variables and functions that should be accessible from outside the current module. -- `import` allows the import of functionality from other modules. - -For instance, if we have a file `sayHi.js` exporting a function: - -```js -// 📁 sayHi.js -export function sayHi(user) { - alert(`Hello, ${user}!`); -} -``` - -...Then another file may import and use it: - -```js -// 📁 main.js -import {sayHi} from './sayHi.js'; - -alert(sayHi); // function... -sayHi('John'); // Hello, John! -``` - -The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable. - -Let's run the example in-browser. - -As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute ` -``` - -### Module-level scope - -Each module has its own top-level scope. In other words, top-level variables and functions from a module are not seen in other scripts. - -In the example below, two scripts are imported, and `hello.js` tries to use `user` variable declared in `user.js`, and fails: - -[codetabs src="http://github.com/scopes" height="140" current="index.html"] - -Modules are expected to `export` what they want to be accessible from outside and `import` what they need. - -So we should import `user.js` into `hello.js` and get the required functionality from it instead of relying on global variables. - -This is the correct variant: - -[codetabs src="http://github.com/scopes-working" height="140" current="hello.js"] - -In the browser, independent top-level scope also exists for each ` - - -``` - -If we really need to make a window-level global variable, we can explicitly assign it to `window` and access as `window.user`. But that's an exception requiring a good reason. - -### A module code is evaluated only the first time when imported - -If the same module is imported into multiple other places, its code is executed only the first time, then exports are given to all importers. - -That has important consequences. Let's look at them using examples: - -First, if executing a module code brings side-effects, like showing a message, then importing it multiple times will trigger it only once -- the first time: - -```js -// 📁 alert.js -alert("Module is evaluated!"); -``` - -```js -// Import the same module from different files - -// 📁 1.js -import `./alert.js`; // Module is evaluated! - -// 📁 2.js -import `./alert.js`; // (shows nothing) -``` - -In practice, top-level module code is mostly used for initialization, creation of internal data structures, and if we want something to be reusable -- export it. - -Now, a more advanced example. - -Let's say, a module exports an object: - -```js -// 📁 admin.js -export let admin = { - name: "John" -}; -``` - -If this module is imported from multiple files, the module is only evaluated the first time, `admin` object is created, and then passed to all further importers. - -All importers get exactly the one and only `admin` object: - -```js -// 📁 1.js -import {admin} from './admin.js'; -admin.name = "Pete"; - -// 📁 2.js -import {admin} from './admin.js'; -alert(admin.name); // Pete - -*!* -// Both 1.js and 2.js imported the same object -// Changes made in 1.js are visible in 2.js -*/!* -``` - -So, let's reiterate -- 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 allows us to *configure* modules on first import. We can setup its properties once, and then in further imports it's ready. - -For instance, the `admin.js` module may provide certain functionality, but expect the credentials to come into the `admin` object from outside: - -```js -// 📁 admin.js -export let admin = { }; - -export function sayHi() { - alert(`Ready to serve, ${admin.name}!`); -} -``` - -In `init.js`, the first script of our app, we set `admin.name`. Then everyone will see it, including calls made from inside `admin.js` itself: - -```js -// 📁 init.js -import {admin} from './admin.js'; -admin.name = "Pete"; -``` - -Another module can also see `admin.name`: - -```js -// 📁 other.js -import {admin, sayHi} from './admin.js'; - -alert(admin.name); // *!*Pete*/!* - -sayHi(); // Ready to serve, *!*Pete*/!*! -``` - -### import.meta - -The object `import.meta` contains the information about the current module. - -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 - -That's kind of a minor feature, but for completeness we should mention it. - -In a module, top-level `this` is undefined. - -Compare it to non-module scripts, where `this` is a global object: - -```html run height=0 - - - -``` - -## Browser-specific features - -There are also several browser-specific differences of scripts with `type="module"` compared to regular ones. - -You may want skip this section for now if you're reading for the first time, or if you don't use JavaScript in a browser. - -### Module scripts are deferred - -Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts. - -In other words: -- downloading external module scripts ` - -Compare to regular script below: - - - - -``` - -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. - -### Async works on inline scripts - -For non-module scripts, the `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document. - -For module scripts, it works on inline scripts as well. - -For example, the inline script below has `async`, so it doesn't wait for anything. - -It performs the import (fetches `./analytics.js`) and runs when ready, even if the HTML document is not finished yet, or if other scripts are still pending. - -That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners. - -```html - - - -``` - -### External scripts - -External scripts that have `type="module"` are different in two aspects: - -1. External scripts with the same `src` run only once: - ```html - - - - ``` - -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. - ```html - - - - ``` - - That ensures better security by default. - -### No "bare" modules allowed - -In the browser, `import` must get either a relative or absolute URL. Modules without any path are called "bare" modules. Such modules are not allowed in `import`. - -For instance, this `import` is invalid: -```js -import {sayHi} from 'sayHi'; // Error, "bare" module -// the module must have a path, e.g. './sayHi.js' or wherever the module is -``` - -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. - -### Compatibility, "nomodule" - -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: - -```html run - - - -``` - -## Build tools - -In real-life, browser modules are rarely used in their "raw" form. Usually, we bundle them together with a special tool such as [Webpack](https://webpack.js.org/) and deploy to the production server. - -One of the benefits of using bundlers -- they give more control over how modules are resolved, allowing bare modules and much more, like CSS/HTML modules. - -Build tools do the following: - -1. Take a "main" module, the one intended to be put in ` -``` - -That said, native modules are also usable. So we won't be using Webpack here: you can configure it later. - -## Summary - -To summarize, the core concepts are: - -1. A module is a file. To make `import/export` work, browsers need ` diff --git a/1-js/13-modules/01-modules-intro/say.view/say.js b/1-js/13-modules/01-modules-intro/say.view/say.js deleted file mode 100644 index 198a3be6da..0000000000 --- a/1-js/13-modules/01-modules-intro/say.view/say.js +++ /dev/null @@ -1,3 +0,0 @@ -export function sayHi(user) { - return `Hello, ${user}!`; -} diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js deleted file mode 100644 index 6c087ea81a..0000000000 --- a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js +++ /dev/null @@ -1,3 +0,0 @@ -import {user} from './user.js'; - -document.body.innerHTML = user; // John diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/index.html b/1-js/13-modules/01-modules-intro/scopes-working.view/index.html deleted file mode 100644 index b78f759126..0000000000 --- a/1-js/13-modules/01-modules-intro/scopes-working.view/index.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js deleted file mode 100644 index d289329c61..0000000000 --- a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js +++ /dev/null @@ -1 +0,0 @@ -export let user = "John"; diff --git a/1-js/13-modules/01-modules-intro/scopes.view/hello.js b/1-js/13-modules/01-modules-intro/scopes.view/hello.js deleted file mode 100644 index 714aafa1f1..0000000000 --- a/1-js/13-modules/01-modules-intro/scopes.view/hello.js +++ /dev/null @@ -1 +0,0 @@ -alert(user); // no such variable (each module has independent variables) diff --git a/1-js/13-modules/01-modules-intro/scopes.view/index.html b/1-js/13-modules/01-modules-intro/scopes.view/index.html deleted file mode 100644 index a87e96fdfb..0000000000 --- a/1-js/13-modules/01-modules-intro/scopes.view/index.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/1-js/13-modules/01-modules-intro/scopes.view/user.js b/1-js/13-modules/01-modules-intro/scopes.view/user.js deleted file mode 100644 index 12ec850d9a..0000000000 --- a/1-js/13-modules/01-modules-intro/scopes.view/user.js +++ /dev/null @@ -1 +0,0 @@ -let user = "John"; diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md deleted file mode 100644 index 4bd41a1689..0000000000 --- a/1-js/13-modules/02-import-export/article.md +++ /dev/null @@ -1,455 +0,0 @@ -# Export and Import - -Export and import directives have several syntax variants. - -In the previous article we saw a simple use, now let's explore more examples. - -## Export before declarations - -We can label any declaration as exported by placing `export` before it, be it a variable, function or a class. - -For instance, here all exports are valid: - -```js -// export an array -*!*export*/!* let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - -// export a constant -*!*export*/!* const MODULES_BECAME_STANDARD_YEAR = 2015; - -// export a class -*!*export*/!* class User { - constructor(name) { - this.name = name; - } -} -``` - -````smart header="No semicolons after export class/function" -Please note that `export` before a class or a function does not make it a [function expression](info:function-expressions). It's still a function declaration, albeit exported. - -Most JavaScript style guides don't recommend semicolons after function and class declarations. - -That's why there's no need for a semicolon at the end of `export class` and `export function`: - -```js -export function sayHi(user) { - alert(`Hello, ${user}!`); -} *!* // no ; at the end */!* -``` - -```` - -## Export apart from declarations - -Also, we can put `export` separately. - -Here we first declare, and then export: - -```js -// 📁 say.js -function sayHi(user) { - alert(`Hello, ${user}!`); -} - -function sayBye(user) { - alert(`Bye, ${user}!`); -} - -*!* -export {sayHi, sayBye}; // a list of exported variables -*/!* -``` - -...Or, technically we could put `export` above functions as well. - -## Import * - -Usually, we put a list of what to import in curly braces `import {...}`, like this: - -```js -// 📁 main.js -*!* -import {sayHi, sayBye} from './say.js'; -*/!* - -sayHi('John'); // Hello, John! -sayBye('John'); // Bye, John! -``` - -But if there's a lot to import, we can import everything as an object using `import * as `, for instance: - -```js -// 📁 main.js -*!* -import * as say from './say.js'; -*/!* - -say.sayHi('John'); -say.sayBye('John'); -``` - -At first sight, "import everything" seems such a cool thing, short to write, why should we ever explicitly list what we need to import? - -Well, there are few reasons. - -1. Modern build tools ([webpack](http://webpack.github.io) and others) bundle modules together and optimize them to speedup loading and remove unused stuff. - - Let's say, we added a 3rd-party library `say.js` to our project with many functions: - ```js - // 📁 say.js - export function sayHi() { ... } - export function sayBye() { ... } - export function becomeSilent() { ... } - ``` - - Now if we only use one of `say.js` functions in our project: - ```js - // 📁 main.js - import {sayHi} from './say.js'; - ``` - ...Then the optimizer will see that and remove the other functions from the bundled code, thus making the build smaller. That is called "tree-shaking". - -2. Explicitly listing what to import gives shorter names: `sayHi()` instead of `say.sayHi()`. -3. Explicit list of imports gives better overview of the code structure: what is used and where. It makes code support and refactoring easier. - -## Import "as" - -We can also use `as` to import under different names. - -For instance, let's import `sayHi` into the local variable `hi` for brevity, and import `sayBye` as `bye`: - -```js -// 📁 main.js -*!* -import {sayHi as hi, sayBye as bye} from './say.js'; -*/!* - -hi('John'); // Hello, John! -bye('John'); // Bye, John! -``` - -## Export "as" - -The similar syntax exists for `export`. - -Let's export functions as `hi` and `bye`: - -```js -// 📁 say.js -... -export {sayHi as hi, sayBye as bye}; -``` - -Now `hi` and `bye` are official names for outsiders, to be used in imports: - -```js -// 📁 main.js -import * as say from './say.js'; - -say.*!*hi*/!*('John'); // Hello, John! -say.*!*bye*/!*('John'); // Bye, John! -``` - -## Export default - -In practice, there are mainly two kinds of modules. - -1. Modules that contain a library, pack of functions, like `say.js` above. -2. Modules that declare a single entity, e.g. a module `user.js` exports only `class User`. - -Mostly, the second approach is preferred, so that every "thing" resides in its own module. - -Naturally, that requires a lot of files, as everything wants its own module, but that's not a problem at all. Actually, code navigation becomes easier if files are well-named and structured into folders. - -Modules provide a special `export default` ("the default export") syntax to make the "one thing per module" way look better. - -Put `export default` before the entity to export: - -```js -// 📁 user.js -export *!*default*/!* class User { // just add "default" - constructor(name) { - this.name = name; - } -} -``` - -There may be only one `export default` per file. - -...And then import it without curly braces: - -```js -// 📁 main.js -import *!*User*/!* from './user.js'; // not {User}, just User - -new User('John'); -``` - -Imports without curly braces look nicer. A common mistake when starting to use modules is to forget curly braces at all. So, remember, `import` needs curly braces for named exports and doesn't need them for the default one. - -| Named export | Default export | -|--------------|----------------| -| `export class User {...}` | `export default class User {...}` | -| `import {User} from ...` | `import User from ...`| - -Technically, we may have both default and named exports in a single module, but in practice people usually don't mix them. A module has either named exports or the default one. - -As there may be at most one default export per file, the exported entity may have no name. - -For instance, these are all perfectly valid default exports: - -```js -export default class { // no class name - constructor() { ... } -} -``` - -```js -export default function(user) { // no function name - alert(`Hello, ${user}!`); -} -``` - -```js -// export a single value, without making a variable -export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; -``` - -Not giving a name is fine, because there is only one `export default` per file, so `import` without curly braces knows what to import. - -Without `default`, such an export would give an error: - -```js -export class { // Error! (non-default export needs a name) - constructor() {} -} -``` - -### The "default" name - -In some situations the `default` keyword is used to reference the default export. - -For example, to export a function separately from its definition: - -```js -function sayHi(user) { - alert(`Hello, ${user}!`); -} - -// same as if we added "export default" before the function -export {sayHi as default}; -``` - -Or, another situation, let's say a module `user.js` exports one main "default" thing, and a few named ones (rarely the case, but it happens): - -```js -// 📁 user.js -export default class User { - constructor(name) { - this.name = name; - } -} - -export function sayHi(user) { - alert(`Hello, ${user}!`); -} -``` - -Here's how to import the default export along with a named one: - -```js -// 📁 main.js -import {*!*default as User*/!*, sayHi} from './user.js'; - -new User('John'); -``` - -And, finally, if importing everything `*` as an object, then the `default` property is exactly the default export: - -```js -// 📁 main.js -import * as user from './user.js'; - -let User = user.default; // the default export -new User('John'); -``` - -### A word against default exports - -Named exports are explicit. They exactly name what they import, so we have that information from them; that's a good thing. - -Named exports force us to use exactly the right name to import: - -```js -import {User} from './user.js'; -// import {MyUser} won't work, the name must be {User} -``` - -...While for a default export, we always choose the name when importing: - -```js -import User from './user.js'; // works -import MyUser from './user.js'; // works too -// could be import Anything... and it'll still work -``` - -So team members may use different names to import the same thing, and that's not good. - -Usually, to avoid that and keep the code consistent, there's a rule that imported variables should correspond to file names, e.g: - -```js -import User from './user.js'; -import LoginForm from './loginForm.js'; -import func from '/path/to/func.js'; -... -``` - -Still, some teams consider it a serious drawback of default exports. So they prefer to always use named exports. Even if only a single thing is exported, it's still exported under a name, without `default`. - -That also makes re-export (see below) a little bit easier. - -## Re-export - -"Re-export" syntax `export ... from ...` allows to import things and immediately export them (possibly under another name), like this: - -```js -export {sayHi} from './say.js'; // re-export sayHi - -export {default as User} from './user.js'; // re-export default -``` - -Why would that be needed? Let's see a practical use case. - -Imagine, we're writing a "package": a folder with a lot of modules, with some of the functionality exported outside (tools like NPM allow us to publish and distribute such packages), and many modules are just "helpers", for internal use in other package modules. - -The file structure could be like this: -``` -auth/ - index.js - user.js - helpers.js - tests/ - login.js - providers/ - github.js - facebook.js - ... -``` - -We'd like to expose the package functionality via a single entry point, the "main file" `auth/index.js`, to be used like this: - -```js -import {login, logout} from 'auth/index.js' -``` - -The idea is that outsiders, developers who use our package, should not meddle with its internal structure, search for files inside our package folder. We export only what's necessary in `auth/index.js` and keep the rest hidden from prying eyes. - -As the actual exported functionality is scattered among the package, we can import it into `auth/index.js` and export from it: - -```js -// 📁 auth/index.js - -// import login/logout and immediately export them -import {login, logout} from './helpers.js'; -export {login, logout}; - -// import default as User and export it -import User from './user.js'; -export {User}; -... -``` - -Now users of our package can `import {login} from "auth/index.js"`. - -The syntax `export ... from ...` is just a shorter notation for such import-export: - -```js -// 📁 auth/index.js -// import login/logout and immediately export them -export {login, logout} from './helpers.js'; - -// import default as User and export it -export {default as User} from './user.js'; -... -``` - -### Re-exporting the default export - -The default export needs separate handling when re-exporting. - -Let's say we have `user.js`, and we'd like to re-export class `User` from it: - -```js -// 📁 user.js -export default class User { - // ... -} -``` - -1. `export User from './user.js'` won't work. What can go wrong?... But that's a syntax error! - - To re-export the default export, we have to write `export {default as User}`, as in the example above. - -2. `export * from './user.js'` re-exports only named exports, but ignores the default one. - - If we'd like to re-export both named and the default export, then two statements are needed: - ```js - export * from './user.js'; // to re-export named exports - export {default} from './user.js'; // to re-export the default export - ``` - -Such oddities of re-exporting the default export are one of the reasons why some developers don't like them. - -## Summary - -Here are all types of `export` that we covered in this and previous articles. - -You can check yourself by reading them and recalling what they mean: - -- Before declaration of a class/function/..: - - `export [default] class/function/variable ...` -- Standalone export: - - `export {x [as y], ...}`. -- Re-export: - - `export {x [as y], ...} from "module"` - - `export * from "module"` (doesn't re-export default). - - `export {default [as y]} from "module"` (re-export default). - -Import: - -- Named exports from module: - - `import {x [as y], ...} from "module"` -- Default export: - - `import x from "module"` - - `import {default as x} from "module"` -- Everything: - - `import * as obj from "module"` -- Import the module (its code runs), but do not assign it to a variable: - - `import "module"` - -We can put `import/export` statements at the top or at the bottom of a script, that doesn't matter. - -So, technically this code is fine: -```js -sayHi(); - -// ... - -import {sayHi} from './say.js'; // import at the end of the file -``` - -In practice imports are usually at the start of the file, but that's only for more convenience. - -**Please note that import/export statements don't work if inside `{...}`.** - -A conditional import, like this, won't work: -```js -if (something) { - import {sayHi} from "./say.js"; // Error: import must be at top level -} -``` - -...But what if we really need to import something conditionally? Or at the right time? Like, load a module upon request, when it's really needed? - -We'll see dynamic imports in the next article. diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md deleted file mode 100644 index e48144a3ef..0000000000 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ /dev/null @@ -1,98 +0,0 @@ -# Dynamic imports - -Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. - -First, we can't dynamically generate any parameters of `import`. - -The module path must be a primitive string, can't be a function call. This won't work: - -```js -import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed -``` - -Second, we can't import conditionally or at run-time: - -```js -if(...) { - import ...; // Error, not allowed! -} - -{ - import ...; // Error, we can't put import in any block -} -``` - -That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. - -But how can we import a module dynamically, on-demand? - -## The import() expression - -The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code. - -We can use it dynamically in any place of the code, for instance: - -```js -let modulePath = prompt("Which module to load?"); - -import(modulePath) - .then(obj => ) - .catch(err => ) -``` - -Or, we could use `let module = await import(modulePath)` if inside an async function. - -For instance, if we have the following module `say.js`: - -```js -// 📁 say.js -export function hi() { - alert(`Hello`); -} - -export function bye() { - alert(`Bye`); -} -``` - -...Then dynamic import can be like this: - -```js -let {hi, bye} = await import('./say.js'); - -hi(); -bye(); -``` - -Or, if `say.js` has the default export: - -```js -// 📁 say.js -export default function() { - alert("Module loaded (export default)!"); -} -``` - -...Then, in order to access it, we can use `default` property of the module object: - -```js -let obj = await import('./say.js'); -let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); - -say(); -``` - -Here's the full example: - -[codetabs src="http://github.com/say" current="index.html"] - -```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. -``` - -```smart -Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). - -So we can't copy `import` to a variable or use `call/apply` with it. It's not a function. -``` diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html deleted file mode 100644 index 80909cf94d..0000000000 --- a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js deleted file mode 100644 index cff234b7c5..0000000000 --- a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js +++ /dev/null @@ -1,11 +0,0 @@ -export function hi() { - alert(`Hello`); -} - -export function bye() { - alert(`Bye`); -} - -export default function() { - alert("Module loaded (export default)!"); -} diff --git a/1-js/13-modules/index.md b/1-js/13-modules/index.md deleted file mode 100644 index 78fb060e89..0000000000 --- a/1-js/13-modules/index.md +++ /dev/null @@ -1,2 +0,0 @@ - -# Modules diff --git a/1-js/99-js-misc/01-proxy/01-error-nonexisting/solution.md b/1-js/99-js-misc/01-proxy/01-error-nonexisting/solution.md deleted file mode 100644 index 357a573134..0000000000 --- a/1-js/99-js-misc/01-proxy/01-error-nonexisting/solution.md +++ /dev/null @@ -1,23 +0,0 @@ - -```js run -let user = { - name: "John" -}; - -function wrap(target) { - return new Proxy(target, { - get(target, prop, receiver) { - if (prop in target) { - return Reflect.get(target, prop, receiver); - } else { - throw new ReferenceError(`Property doesn't exist: "${prop}"`) - } - } - }); -} - -user = wrap(user); - -alert(user.name); // John -alert(user.age); // ReferenceError: Property doesn't exist "age" -``` diff --git a/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md b/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md deleted file mode 100644 index d7093c0c3e..0000000000 --- a/1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md +++ /dev/null @@ -1,32 +0,0 @@ -# Error on reading non-existent property - -Usually, an attempt to read a non-existent property returns `undefined`. - -Create a proxy that throws an error for an attempt to read of a non-existent property instead. - -That can help to detect programming mistakes early. - -Write a function `wrap(target)` that takes an object `target` and return a proxy that adds this functionality aspect. - -That's how it should work: - -```js -let user = { - name: "John" -}; - -function wrap(target) { - return new Proxy(target, { -*!* - /* your code */ -*/!* - }); -} - -user = wrap(user); - -alert(user.name); // John -*!* -alert(user.age); // ReferenceError: Property doesn't exist "age" -*/!* -``` diff --git a/1-js/99-js-misc/01-proxy/02-array-negative/solution.md b/1-js/99-js-misc/01-proxy/02-array-negative/solution.md deleted file mode 100644 index 207205501f..0000000000 --- a/1-js/99-js-misc/01-proxy/02-array-negative/solution.md +++ /dev/null @@ -1,19 +0,0 @@ - -```js run -let array = [1, 2, 3]; - -array = new Proxy(array, { - get(target, prop, receiver) { - if (prop < 0) { - // even if we access it like arr[1] - // prop is a string, so need to convert it to number - prop = +prop + target.length; - } - return Reflect.get(target, prop, receiver); - } -}); - - -alert(array[-1]); // 3 -alert(array[-2]); // 2 -``` diff --git a/1-js/99-js-misc/01-proxy/02-array-negative/task.md b/1-js/99-js-misc/01-proxy/02-array-negative/task.md deleted file mode 100644 index 9b0b13f580..0000000000 --- a/1-js/99-js-misc/01-proxy/02-array-negative/task.md +++ /dev/null @@ -1,33 +0,0 @@ - -# Accessing array[-1] - -In some programming languages, we can access array elements using negative indexes, counted from the end. - -Like this: - -```js -let array = [1, 2, 3]; - -array[-1]; // 3, the last element -array[-2]; // 2, one step from the end -array[-3]; // 1, two steps from the end -``` - -In other words, `array[-N]` is the same as `array[array.length - N]`. - -Create a proxy to implement that behavior. - -That's how it should work: - -```js -let array = [1, 2, 3]; - -array = new Proxy(array, { - /* your code */ -}); - -alert( array[-1] ); // 3 -alert( array[-2] ); // 2 - -// Other array functionality should be kept "as is" -``` diff --git a/1-js/99-js-misc/01-proxy/03-observable/solution.md b/1-js/99-js-misc/01-proxy/03-observable/solution.md deleted file mode 100644 index c0797a856b..0000000000 --- a/1-js/99-js-misc/01-proxy/03-observable/solution.md +++ /dev/null @@ -1,40 +0,0 @@ -The solution consists of two parts: - -1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store handlers right in the object, using our symbol as the property key. -2. We need a proxy with `set` trap to call handlers in case of any change. - -```js run -let handlers = Symbol('handlers'); - -function makeObservable(target) { - // 1. Initialize handlers store - target[handlers] = []; - - // Store the handler function in array for future calls - target.observe = function(handler) { - this[handlers].push(handler); - }; - - // 2. Create a proxy to handle changes - return new Proxy(target, { - set(target, property, value, receiver) { - let success = Reflect.set(...arguments); // forward the operation to object - if (success) { // if there were no error while setting the property - // call all handlers - target[handlers].forEach(handler => handler(property, value)); - } - return success; - } - }); -} - -let user = {}; - -user = makeObservable(user); - -user.observe((key, value) => { - alert(`SET ${key}=${value}`); -}); - -user.name = "John"; -``` diff --git a/1-js/99-js-misc/01-proxy/03-observable/task.md b/1-js/99-js-misc/01-proxy/03-observable/task.md deleted file mode 100644 index 754d9f3bd9..0000000000 --- a/1-js/99-js-misc/01-proxy/03-observable/task.md +++ /dev/null @@ -1,27 +0,0 @@ - -# Observable - -Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy. - -Here's how it should work: - -```js run -function makeObservable(target) { - /* your code */ -} - -let user = {}; -user = makeObservable(user); - -user.observe((key, value) => { - alert(`SET ${key}=${value}`); -}); - -user.name = "John"; // alerts: SET name=John -``` - -In other words, an object returned by `makeObservable` is just like the original one, but also has the method `observe(handler)` that sets `handler` function to be called on any property change. - -Whenever a property changes, `handler(key, value)` is called with the name and value of the property. - -P.S. In this task, please only take care about writing to a property. Other operations can be implemented in a similar way. diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md deleted file mode 100644 index 3f7ef63b8d..0000000000 --- a/1-js/99-js-misc/01-proxy/article.md +++ /dev/null @@ -1,1032 +0,0 @@ -# Proxy and Reflect - -A `Proxy` object wraps another object and intercepts operations, like reading/writing properties and others, optionally handling them on its own, or transparently allowing the object to handle them. - -Proxies are used in many libraries and some browser frameworks. We'll see many practical applications in this article. - -## Proxy - -The syntax: - -```js -let proxy = new Proxy(target, handler) -``` - -- `target` -- is an object to wrap, can be anything, including functions. -- `handler` -- proxy configuration: an object with "traps", methods that intercept operations. - e.g. `get` trap for reading a property of `target`, `set` trap for writing a property into `target`, and so on. - -For operations on `proxy`, if there's a corresponding trap in `handler`, then it runs, and the proxy has a chance to handle it, otherwise the operation is performed on `target`. - -As a starting example, let's create a proxy without any traps: - -```js run -let target = {}; -let proxy = new Proxy(target, {}); // empty handler - -proxy.test = 5; // writing to proxy (1) -alert(target.test); // 5, the property appeared in target! - -alert(proxy.test); // 5, we can read it from proxy too (2) - -for(let key in proxy) alert(key); // test, iteration works (3) -``` - -As there are no traps, all operations on `proxy` are forwarded to `target`. - -1. A writing operation `proxy.test=` sets the value on `target`. -2. A reading operation `proxy.test` returns the value from `target`. -3. Iteration over `proxy` returns values from `target`. - -As we can see, without any traps, `proxy` is a transparent wrapper around `target`. - -![](proxy.svg) - -`Proxy` is a special "exotic object". It doesn't have own properties. With an empty `handler` it transparently forwards operations to `target`. - -To activate more capabilities, let's add traps. - -What can we intercept with them? - -For most operations on objects, there's a so-called "internal method" in the JavaScript specification that describes how it works at the lowest level. For instance `[[Get]]`, the internal method to read a property, `[[Set]]`, the internal method to write a property, and so on. These methods are only used in the specification, we can't call them directly by name. - -Proxy traps intercept invocations of these methods. They are listed in the [Proxy specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots) and in the table below. - -For every internal method, there's a trap in this table: the name of the method that we can add to the `handler` parameter of `new Proxy` to intercept the operation: - -| Internal Method | Handler Method | Triggers when... | -|-----------------|----------------|-------------| -| `[[Get]]` | `get` | reading a property | -| `[[Set]]` | `set` | writing to a property | -| `[[HasProperty]]` | `has` | `in` operator | -| `[[Delete]]` | `deleteProperty` | `delete` operator | -| `[[Call]]` | `apply` | function call | -| `[[Construct]]` | `construct` | `new` operator | -| `[[GetPrototypeOf]]` | `getPrototypeOf` | [Object.getPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) | -| `[[SetPrototypeOf]]` | `setPrototypeOf` | [Object.setPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) | -| `[[IsExtensible]]` | `isExtensible` | [Object.isExtensible](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible) | -| `[[PreventExtensions]]` | `preventExtensions` | [Object.preventExtensions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions) | -| `[[DefineOwnProperty]]` | `defineProperty` | [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.defineProperties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) | -| `[[GetOwnProperty]]` | `getOwnPropertyDescriptor` | [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor), `for..in`, `Object.keys/values/entries` | -| `[[OwnPropertyKeys]]` | `ownKeys` | [Object.getOwnPropertyNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames), [Object.getOwnPropertySymbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols), `for..in`, `Object/keys/values/entries` | - -```warn header="Invariants" -JavaScript enforces some invariants -- conditions that must be fulfilled by internal methods and traps. - -Most of them are for return values: -- `[[Set]]` must return `true` if the value was written successfully, otherwise `false`. -- `[[Delete]]` must return `true` if the value was deleted successfully, otherwise `false`. -- ...and so on, we'll see more in examples below. - -There are some other invariants, like: -- `[[GetPrototypeOf]]`, applied to the proxy object must return the same value as `[[GetPrototypeOf]]` applied to the proxy object's target object. In other words, reading prototype of a proxy must always return the prototype of the target object. - -Traps can intercept these operations, but they must follow these rules. - -Invariants ensure correct and consistent behavior of language features. The full invariants list is in [the specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots). You probably won't violate them if you're not doing something weird. -``` - -Let's see how that works in practical examples. - -## Default value with "get" trap - -The most common traps are for reading/writing properties. - -To intercept reading, the `handler` should have a method `get(target, property, receiver)`. - -It triggers when a property is read, with following arguments: - -- `target` -- is the target object, the one passed as the first argument to `new Proxy`, -- `property` -- property name, -- `receiver` -- if the target property is a getter, then `receiver` is the object that's going to be used as `this` in its call. Usually that's the `proxy` object itself (or an object that inherits from it, if we inherit from proxy). Right now we don't need this argument, so it will be explained in more detail later. - -Let's use `get` to implement default values for an object. - -We'll make a numeric array that returns `0` for nonexistent values. - -Usually when one tries to get a non-existing array item, they get `undefined`, but we'll wrap a regular array into the proxy that traps reading and returns `0` if there's no such property: - -```js run -let numbers = [0, 1, 2]; - -numbers = new Proxy(numbers, { - get(target, prop) { - if (prop in target) { - return target[prop]; - } else { - return 0; // default value - } - } -}); - -*!* -alert( numbers[1] ); // 1 -alert( numbers[123] ); // 0 (no such item) -*/!* -``` - -As we can see, it's quite easy to do with a `get` trap. - -We can use `Proxy` to implement any logic for "default" values. - -Imagine we have a dictionary, with phrases and their translations: - -```js run -let dictionary = { - 'Hello': 'Hola', - 'Bye': 'Adiós' -}; - -alert( dictionary['Hello'] ); // Hola -alert( dictionary['Welcome'] ); // undefined -``` - -Right now, if there's no phrase, reading from `dictionary` returns `undefined`. But in practice, leaving a phrase untranslated is usually better than `undefined`. So let's make it return an untranslated phrase in that case instead of `undefined`. - -To achieve that, we'll wrap `dictionary` in a proxy that intercepts reading operations: - -```js run -let dictionary = { - 'Hello': 'Hola', - 'Bye': 'Adiós' -}; - -dictionary = new Proxy(dictionary, { -*!* - get(target, phrase) { // intercept reading a property from dictionary -*/!* - if (phrase in target) { // if we have it in the dictionary - return target[phrase]; // return the translation - } else { - // otherwise, return the non-translated phrase - return phrase; - } - } -}); - -// Look up arbitrary phrases in the dictionary! -// At worst, they're not translated. -alert( dictionary['Hello'] ); // Hola -*!* -alert( dictionary['Welcome to Proxy']); // Welcome to Proxy (no translation) -*/!* -``` - -````smart -Please note how the proxy overwrites the variable: - -```js -dictionary = new Proxy(dictionary, ...); -``` - -The proxy should totally replace the target object everywhere. No one should ever reference the target object after it got proxied. Otherwise it's easy to mess up. -```` - -## Validation with "set" trap - -Let's say we want an array exclusively for numbers. If a value of another type is added, there should be an error. - -The `set` trap triggers when a property is written. - -`set(target, property, value, receiver)`: - -- `target` -- is the target object, the one passed as the first argument to `new Proxy`, -- `property` -- property name, -- `value` -- property value, -- `receiver` -- similar to `get` trap, matters only for setter properties. - -The `set` trap should return `true` if setting is successful, and `false` otherwise (triggers `TypeError`). - -Let's use it to validate new values: - -```js run -let numbers = []; - -numbers = new Proxy(numbers, { // (*) -*!* - set(target, prop, val) { // to intercept property writing -*/!* - if (typeof val == 'number') { - target[prop] = val; - return true; - } else { - return false; - } - } -}); - -numbers.push(1); // added successfully -numbers.push(2); // added successfully -alert("Length is: " + numbers.length); // 2 - -*!* -numbers.push("test"); // TypeError ('set' on proxy returned false) -*/!* - -alert("This line is never reached (error in the line above)"); -``` - -Please note: the built-in functionality of arrays is still working! Values are added by `push`. The `length` property auto-increases when values are added. Our proxy doesn't break anything. - -We don't have to override value-adding array methods like `push` and `unshift`, and so on, to add checks in there, because internally they use the `[[Set]]` operation that's intercepted by the proxy. - -So the code is clean and concise. - -```warn header="Don't forget to return `true`" -As said above, there are invariants to be held. - -For `set`, it must return `true` for a successful write. - -If we forget to do it or return any falsy value, the operation triggers `TypeError`. -``` - -## Iteration with "ownKeys" and "getOwnPropertyDescriptor" - -`Object.keys`, `for..in` loop and most other methods that iterate over object properties use `[[OwnPropertyKeys]]` internal method (intercepted by `ownKeys` trap) to get a list of properties. - -Such methods differ in details: -- `Object.getOwnPropertyNames(obj)` returns non-symbol keys. -- `Object.getOwnPropertySymbols(obj)` returns symbol keys. -- `Object.keys/values()` returns non-symbol keys/values with `enumerable` flag (property flags were explained in the article ). -- `for..in` loops over non-symbol keys with `enumerable` flag, and also prototype keys. - -...But all of them start with that list. - -In the example below we use `ownKeys` trap to make `for..in` loop over `user`, and also `Object.keys` and `Object.values`, to skip properties starting with an underscore `_`: - -```js run -let user = { - name: "John", - age: 30, - _password: "***" -}; - -user = new Proxy(user, { -*!* - ownKeys(target) { -*/!* - return Object.keys(target).filter(key => !key.startsWith('_')); - } -}); - -// "ownKeys" filters out _password -for(let key in user) alert(key); // name, then: age - -// same effect on these methods: -alert( Object.keys(user) ); // name,age -alert( Object.values(user) ); // John,30 -``` - -So far, it works. - -Although, if we return a key that doesn't exist in the object, `Object.keys` won't list it: - -```js run -let user = { }; - -user = new Proxy(user, { -*!* - ownKeys(target) { -*/!* - return ['a', 'b', 'c']; - } -}); - -alert( Object.keys(user) ); // -``` - -Why? The reason is simple: `Object.keys` returns only properties with the `enumerable` flag. To check for it, it calls the internal method `[[GetOwnProperty]]` for every property to get [its descriptor](info:property-descriptors). And here, as there's no property, its descriptor is empty, no `enumerable` flag, so it's skipped. - -For `Object.keys` to return a property, we need it to either exist in the object, with the `enumerable` flag, or we can intercept calls to `[[GetOwnProperty]]` (the trap `getOwnPropertyDescriptor` does it), and return a descriptor with `enumerable: true`. - -Here's an example of that: - -```js run -let user = { }; - -user = new Proxy(user, { - ownKeys(target) { // called once to get a list of properties - return ['a', 'b', 'c']; - }, - - getOwnPropertyDescriptor(target, prop) { // called for every property - return { - enumerable: true, - configurable: true - /* ...other flags, probable "value:..." */ - }; - } - -}); - -alert( Object.keys(user) ); // a, b, c -``` - -Let's note once again: we only need to intercept `[[GetOwnProperty]]` if the property is absent in the object. - -## Protected properties with "deleteProperty" and other traps - -There's a widespread convention that properties and methods prefixed by an underscore `_` are internal. They shouldn't be accessed from outside the object. - -Technically that's possible though: - -```js run -let user = { - name: "John", - _password: "secret" -}; - -alert(user._password); // secret -``` - -Let's use proxies to prevent any access to properties starting with `_`. - -We'll need the traps: -- `get` to throw an error when reading such property, -- `set` to throw an error when writing, -- `deleteProperty` to throw an error when deleting, -- `ownKeys` to exclude properties starting with `_` from `for..in` and methods like `Object.keys`. - -Here's the code: - -```js run -let user = { - name: "John", - _password: "***" -}; - -user = new Proxy(user, { -*!* - get(target, prop) { -*/!* - if (prop.startsWith('_')) { - throw new Error("Access denied"); - } - let value = target[prop]; - return (typeof value === 'function') ? value.bind(target) : value; // (*) - }, -*!* - set(target, prop, val) { // to intercept property writing -*/!* - if (prop.startsWith('_')) { - throw new Error("Access denied"); - } else { - target[prop] = val; - return true; - } - }, -*!* - deleteProperty(target, prop) { // to intercept property deletion -*/!* - if (prop.startsWith('_')) { - throw new Error("Access denied"); - } else { - delete target[prop]; - return true; - } - }, -*!* - ownKeys(target) { // to intercept property list -*/!* - return Object.keys(target).filter(key => !key.startsWith('_')); - } -}); - -// "get" doesn't allow to read _password -try { - alert(user._password); // Error: Access denied -} catch(e) { alert(e.message); } - -// "set" doesn't allow to write _password -try { - user._password = "test"; // Error: Access denied -} catch(e) { alert(e.message); } - -// "deleteProperty" doesn't allow to delete _password -try { - delete user._password; // Error: Access denied -} catch(e) { alert(e.message); } - -// "ownKeys" filters out _password -for(let key in user) alert(key); // name -``` - -Please note the important detail in the `get` trap, in the line `(*)`: - -```js -get(target, prop) { - // ... - let value = target[prop]; -*!* - return (typeof value === 'function') ? value.bind(target) : value; // (*) -*/!* -} -``` - -Why do we need a function to call `value.bind(target)`? - -The reason is that object methods, such as `user.checkPassword()`, must be able to access `_password`: - -```js -user = { - // ... - checkPassword(value) { - // object method must be able to read _password - return value === this._password; - } -} -``` - - -A call to `user.checkPassword()` call gets proxied `user` as `this` (the object before dot becomes `this`), so when it tries to access `this._password`, the `get` trap activates (it triggers on any property read) and throws an error. - -So we bind the context of object methods to the original object, `target`, in the line `(*)`. Then their future calls will use `target` as `this`, without any traps. - -That solution usually works, but isn't ideal, as a method may pass the unproxied object somewhere else, and then we'll get messed up: where's the original object, and where's the proxied one? - -Besides, an object may be proxied multiple times (multiple proxies may add different "tweaks" to the object), and if we pass an unwrapped object to a method, there may be unexpected consequences. - -So, such a proxy shouldn't be used everywhere. - -```smart header="Private properties of a class" -Modern JavaScript engines natively support private properties in classes, prefixed with `#`. They are described in the article . No proxies required. - -Such properties have their own issues though. In particular, they are not inherited. -``` - -## "In range" with "has" trap - -Let's see more examples. - -We have a range object: - -```js -let range = { - start: 1, - end: 10 -}; -``` - -We'd like to use the `in` operator to check that a number is in `range`. - -The `has` trap intercepts `in` calls. - -`has(target, property)` - -- `target` -- is the target object, passed as the first argument to `new Proxy`, -- `property` -- property name - -Here's the demo: - -```js run -let range = { - start: 1, - end: 10 -}; - -range = new Proxy(range, { -*!* - has(target, prop) { -*/!* - return prop >= target.start && prop <= target.end; - } -}); - -*!* -alert(5 in range); // true -alert(50 in range); // false -*/!* -``` - -Nice syntactic sugar, isn't it? And very simple to implement. - -## Wrapping functions: "apply" [#proxy-apply] - -We can wrap a proxy around a function as well. - -The `apply(target, thisArg, args)` trap handles calling a proxy as function: - -- `target` is the target object (function is an object in JavaScript), -- `thisArg` is the value of `this`. -- `args` is a list of arguments. - -For example, let's recall `delay(f, ms)` decorator, that we did in the article . - -In that article we did it without proxies. A call to `delay(f, ms)` returned a function that forwards all calls to `f` after `ms` milliseconds. - -Here's the previous, function-based implementation: - -```js run -function delay(f, ms) { - // return a wrapper that passes the call to f after the timeout - return function() { // (*) - setTimeout(() => f.apply(this, arguments), ms); - }; -} - -function sayHi(user) { - alert(`Hello, ${user}!`); -} - -// after this wrapping, calls to sayHi will be delayed for 3 seconds -sayHi = delay(sayHi, 3000); - -sayHi("John"); // Hello, John! (after 3 seconds) -``` - -As we've seen already, that mostly works. The wrapper function `(*)` performs the call after the timeout. - -But a wrapper function does not forward property read/write operations or anything else. After the wrapping, the access is lost to properties of the original functions, such as `name`, `length` and others: - -```js run -function delay(f, ms) { - return function() { - setTimeout(() => f.apply(this, arguments), ms); - }; -} - -function sayHi(user) { - alert(`Hello, ${user}!`); -} - -*!* -alert(sayHi.length); // 1 (function length is the arguments count in its declaration) -*/!* - -sayHi = delay(sayHi, 3000); - -*!* -alert(sayHi.length); // 0 (in the wrapper declaration, there are zero arguments) -*/!* -``` - -`Proxy` is much more powerful, as it forwards everything to the target object. - -Let's use `Proxy` instead of a wrapping function: - -```js run -function delay(f, ms) { - return new Proxy(f, { - apply(target, thisArg, args) { - setTimeout(() => target.apply(thisArg, args), ms); - } - }); -} - -function sayHi(user) { - alert(`Hello, ${user}!`); -} - -sayHi = delay(sayHi, 3000); - -*!* -alert(sayHi.length); // 1 (*) proxy forwards "get length" operation to the target -*/!* - -sayHi("John"); // Hello, John! (after 3 seconds) -``` - -The result is the same, but now not only calls, but all operations on the proxy are forwarded to the original function. So `sayHi.length` is returned correctly after the wrapping in the line `(*)`. - -We've got a "richer" wrapper. - -Other traps exist: the full list is in the beginning of this article. Their usage pattern is similar to the above. - -## Reflect - -`Reflect` is a built-in object that simplifies creation of `Proxy`. - -It was said previously that internal methods, such as `[[Get]]`, `[[Set]]` and others are specification-only, they can't be called directly. - -The `Reflect` object makes that somewhat possible. Its methods are minimal wrappers around the internal methods. - -Here are examples of operations and `Reflect` calls that do the same: - -| Operation | `Reflect` call | Internal method | -|-----------------|----------------|-------------| -| `obj[prop]` | `Reflect.get(obj, prop)` | `[[Get]]` | -| `obj[prop] = value` | `Reflect.set(obj, prop, value)` | `[[Set]]` | -| `delete obj[prop]` | `Reflect.deleteProperty(obj, prop)` | `[[Delete]]` | -| `new F(value)` | `Reflect.construct(F, value)` | `[[Construct]]` | -| ... | ... | ... | - -For example: - -```js run -let user = {}; - -Reflect.set(user, 'name', 'John'); - -alert(user.name); // John -``` - -In particular, `Reflect` allows us to call operators (`new`, `delete`...) as functions (`Reflect.construct`, `Reflect.deleteProperty`, ...). That's an interesting capability, but here another thing is important. - -**For every internal method, trappable by `Proxy`, there's a corresponding method in `Reflect`, with the same name and arguments as the `Proxy` trap.** - -So we can use `Reflect` to forward an operation to the original object. - -In this example, both traps `get` and `set` transparently (as if they didn't exist) forward reading/writing operations to the object, showing a message: - -```js run -let user = { - name: "John", -}; - -user = new Proxy(user, { - get(target, prop, receiver) { - alert(`GET ${prop}`); -*!* - return Reflect.get(target, prop, receiver); // (1) -*/!* - }, - set(target, prop, val, receiver) { - alert(`SET ${prop}=${val}`); -*!* - return Reflect.set(target, prop, val, receiver); // (2) -*/!* - } -}); - -let name = user.name; // shows "GET name" -user.name = "Pete"; // shows "SET name=Pete" -``` - -Here: - -- `Reflect.get` reads an object property. -- `Reflect.set` writes an object property and returns `true` if successful, `false` otherwise. - -That is, everything's simple: if a trap wants to forward the call to the object, it's enough to call `Reflect.` with the same arguments. - -In most cases we can do the same without `Reflect`, for instance, reading a property `Reflect.get(target, prop, receiver)` can be replaced by `target[prop]`. There are important nuances though. - -### Proxying a getter - -Let's see an example that demonstrates why `Reflect.get` is better. And we'll also see why `get/set` have the third argument `receiver`, that we didn't use before. - -We have an object `user` with `_name` property and a getter for it. - -Here's a proxy around it: - -```js run -let user = { - _name: "Guest", - get name() { - return this._name; - } -}; - -*!* -let userProxy = new Proxy(user, { - get(target, prop, receiver) { - return target[prop]; - } -}); -*/!* - -alert(userProxy.name); // Guest -``` - -The `get` trap is "transparent" here, it returns the original property, and doesn't do anything else. That's enough for our example. - -Everything seems to be all right. But let's make the example a little bit more complex. - -After inheriting another object `admin` from `user`, we can observe the incorrect behavior: - -```js run -let user = { - _name: "Guest", - get name() { - return this._name; - } -}; - -let userProxy = new Proxy(user, { - get(target, prop, receiver) { - return target[prop]; // (*) target = user - } -}); - -*!* -let admin = { - __proto__: userProxy, - _name: "Admin" -}; - -// Expected: Admin -alert(admin.name); // outputs: Guest (?!?) -*/!* -``` - -Reading `admin.name` should return `"Admin"`, not `"Guest"`! - -What's the matter? Maybe we did something wrong with the inheritance? - -But if we remove the proxy, then everything will work as expected. - -The problem is actually in the proxy, in the line `(*)`. - -1. When we read `admin.name`, as `admin` object doesn't have such own property, the search goes to its prototype. -2. The prototype is `userProxy`. -3. When reading `name` property from the proxy, its `get` trap triggers and returns it from the original object as `target[prop]` in the line `(*)`. - - A call to `target[prop]`, when `prop` is a getter, runs its code in the context `this=target`. So the result is `this._name` from the original object `target`, that is: from `user`. - -To fix such situations, we need `receiver`, the third argument of `get` trap. It keeps the correct `this` to be passed to a getter. In our case that's `admin`. - -How to pass the context for a getter? For a regular function we could use `call/apply`, but that's a getter, it's not "called", just accessed. - -`Reflect.get` can do that. Everything will work right if we use it. - -Here's the corrected variant: - -```js run -let user = { - _name: "Guest", - get name() { - return this._name; - } -}; - -let userProxy = new Proxy(user, { - get(target, prop, receiver) { // receiver = admin -*!* - return Reflect.get(target, prop, receiver); // (*) -*/!* - } -}); - - -let admin = { - __proto__: userProxy, - _name: "Admin" -}; - -*!* -alert(admin.name); // Admin -*/!* -``` - -Now `receiver` that keeps a reference to the correct `this` (that is `admin`), is passed to the getter using `Reflect.get` in the line `(*)`. - -We can rewrite the trap even shorter: - -```js -get(target, prop, receiver) { - return Reflect.get(*!*...arguments*/!*); -} -``` - - -`Reflect` calls are named exactly the same way as traps and accept the same arguments. They were specifically designed this way. - -So, `return Reflect...` provides a safe no-brainer to forward the operation and make sure we don't forget anything related to that. - -## Proxy limitations - -Proxies provide a unique way to alter or tweak the behavior of the existing objects at the lowest level. Still, it's not perfect. There are limitations. - -### Built-in objects: Internal slots - -Many built-in objects, for example `Map`, `Set`, `Date`, `Promise` and others make use of so-called "internal slots". - -These are like properties, but reserved for internal, specification-only purposes. For instance, `Map` stores items in the internal slot `[[MapData]]`. Built-in methods access them directly, not via `[[Get]]/[[Set]]` internal methods. So `Proxy` can't intercept that. - -Why care? They're internal anyway! - -Well, here's the issue. After a built-in object like that gets proxied, the proxy doesn't have these internal slots, so built-in methods will fail. - -For example: - -```js run -let map = new Map(); - -let proxy = new Proxy(map, {}); - -*!* -proxy.set('test', 1); // Error -*/!* -``` - -Internally, a `Map` stores all data in its `[[MapData]]` internal slot. The proxy doesn't have such a slot. The [built-in method `Map.prototype.set`](https://tc39.es/ecma262/#sec-map.prototype.set) method tries to access the internal property `this.[[MapData]]`, but because `this=proxy`, can't find it in `proxy` and just fails. - -Fortunately, there's a way to fix it: - -```js run -let map = new Map(); - -let proxy = new Proxy(map, { - get(target, prop, receiver) { - let value = Reflect.get(...arguments); -*!* - return typeof value == 'function' ? value.bind(target) : value; -*/!* - } -}); - -proxy.set('test', 1); -alert(proxy.get('test')); // 1 (works!) -``` - -Now it works fine, because `get` trap binds function properties, such as `map.set`, to the target object (`map`) itself. - -Unlike the previous example, the value of `this` inside `proxy.set(...)` will be not `proxy`, but the original `map`. So when the internal implementation of `set` tries to access `this.[[MapData]]` internal slot, it succeeds. - -```smart header="`Array` has no internal slots" -A notable exception: built-in `Array` doesn't use internal slots. That's for historical reasons, as it appeared so long ago. - -So there's no such problem when proxying an array. -``` - -### Private fields - -A similar thing happens with private class fields. - -For example, `getName()` method accesses the private `#name` property and breaks after proxying: - -```js run -class User { - #name = "Guest"; - - getName() { - return this.#name; - } -} - -let user = new User(); - -user = new Proxy(user, {}); - -*!* -alert(user.getName()); // Error -*/!* -``` - -The reason is that private fields are implemented using internal slots. JavaScript does not use `[[Get]]/[[Set]]` when accessing them. - -In the call `getName()` the value of `this` is the proxied `user`, and it doesn't have the slot with private fields. - -Once again, the solution with binding the method makes it work: - -```js run -class User { - #name = "Guest"; - - getName() { - return this.#name; - } -} - -let user = new User(); - -user = new Proxy(user, { - get(target, prop, receiver) { - let value = Reflect.get(...arguments); - return typeof value == 'function' ? value.bind(target) : value; - } -}); - -alert(user.getName()); // Guest -``` - -That said, the solution has drawbacks, as explained previously: it exposes the original object to the method, potentially allowing it to be passed further and breaking other proxied functionality. - -### Proxy != target - -The proxy and the original object are different objects. That's natural, right? - -So if we use the original object as a key, and then proxy it, then the proxy can't be found: - -```js run -let allUsers = new Set(); - -class User { - constructor(name) { - this.name = name; - allUsers.add(this); - } -} - -let user = new User("John"); - -alert(allUsers.has(user)); // true - -user = new Proxy(user, {}); - -*!* -alert(allUsers.has(user)); // false -*/!* -``` - -As we can see, after proxying we can't find `user` in the set `allUsers`, because the proxy is a different object. - -```warn header="Proxies can't intercept a strict equality test `===`" -Proxies can intercept many operators, such as `new` (with `construct`), `in` (with `has`), `delete` (with `deleteProperty`) and so on. - -But there's no way to intercept a strict equality test for objects. An object is strictly equal to itself only, and no other value. - -So all operations and built-in classes that compare objects for equality will differentiate between the object and the proxy. No transparent replacement here. -``` - -## Revocable proxies - -A *revocable* proxy is a proxy that can be disabled. - -Let's say we have a resource, and would like to close access to it any moment. - -What we can do is to wrap it into a revocable proxy, without any traps. Such a proxy will forward operations to object, and we can disable it at any moment. - -The syntax is: - -```js -let {proxy, revoke} = Proxy.revocable(target, handler) -``` - -The call returns an object with the `proxy` and `revoke` function to disable it. - -Here's an example: - -```js run -let object = { - data: "Valuable data" -}; - -let {proxy, revoke} = Proxy.revocable(object, {}); - -// pass the proxy somewhere instead of object... -alert(proxy.data); // Valuable data - -// later in our code -revoke(); - -// the proxy isn't working any more (revoked) -alert(proxy.data); // Error -``` - -A call to `revoke()` removes all internal references to the target object from the proxy, so they are no longer connected. The target object can be garbage-collected after that. - -We can also store `revoke` in a `WeakMap`, to be able to easily find it by a proxy object: - -```js run -*!* -let revokes = new WeakMap(); -*/!* - -let object = { - data: "Valuable data" -}; - -let {proxy, revoke} = Proxy.revocable(object, {}); - -revokes.set(proxy, revoke); - -// ..later in our code.. -revoke = revokes.get(proxy); -revoke(); - -alert(proxy.data); // Error (revoked) -``` - -The benefit of such an approach is that we don't have to carry `revoke` around. We can get it from the map by `proxy` when needed. - -We use `WeakMap` instead of `Map` here because it won't block garbage collection. If a proxy object becomes "unreachable" (e.g. no variable references it any more), `WeakMap` allows it to be wiped from memory together with its `revoke` that we won't need any more. - -## References - -- Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots). -- MDN: [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). - -## Summary - -`Proxy` is a wrapper around an object, that forwards operations on it to the object, optionally trapping some of them. - -It can wrap any kind of object, including classes and functions. - -The syntax is: - -```js -let proxy = new Proxy(target, { - /* traps */ -}); -``` - -...Then we should use `proxy` everywhere instead of `target`. A proxy doesn't have its own properties or methods. It traps an operation if the trap is provided, otherwise forwards it to `target` object. - -We can trap: -- Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one). -- Calling a function (`apply` trap). -- The `new` operator (`construct` trap). -- Many other operations (the full list is at the beginning of the article and in the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)). - -That allows us to create "virtual" properties and methods, implement default values, observable objects, function decorators and so much more. - -We can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality. - -The [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects. - -Proxies have some limitations: - -- Built-in objects have "internal slots", access to those can't be proxied. See the workaround above. -- The same holds true for private class fields, as they are internally implemented using slots. So proxied method calls must have the target object as `this` to access them. -- Object equality tests `===` can't be intercepted. -- Performance: benchmarks depend on an engine, but generally accessing a property using a simplest proxy takes a few times longer. In practice that only matters for some "bottleneck" objects though. diff --git a/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg b/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg deleted file mode 100644 index a5e158400c..0000000000 --- a/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg +++ /dev/null @@ -1 +0,0 @@ -_name: "Guest" name: getter_name: "Admin"user (proxied)original useradmin[[Prototype]] \ No newline at end of file diff --git a/1-js/99-js-misc/01-proxy/proxy-inherit.svg b/1-js/99-js-misc/01-proxy/proxy-inherit.svg deleted file mode 100644 index 510dcef1bd..0000000000 --- a/1-js/99-js-misc/01-proxy/proxy-inherit.svg +++ /dev/null @@ -1 +0,0 @@ -_name: "Guest" name: getteruser (proxied)original user \ No newline at end of file diff --git a/1-js/99-js-misc/01-proxy/proxy.svg b/1-js/99-js-misc/01-proxy/proxy.svg deleted file mode 100644 index 76a41670c0..0000000000 --- a/1-js/99-js-misc/01-proxy/proxy.svg +++ /dev/null @@ -1 +0,0 @@ -test: 5proxytargetget proxy.test5 \ No newline at end of file diff --git a/1-js/99-js-misc/02-eval/1-eval-calculator/solution.md b/1-js/99-js-misc/02-eval/1-eval-calculator/solution.md deleted file mode 100644 index 24d40c9b89..0000000000 --- a/1-js/99-js-misc/02-eval/1-eval-calculator/solution.md +++ /dev/null @@ -1,11 +0,0 @@ -Let's use `eval` to calculate the maths expression: - -```js demo run -let expr = prompt("Type an arithmetic expression?", '2*3+2'); - -alert( eval(expr) ); -``` - -The user can input any text or code though. - -To make things safe, and limit it to arithmetics only, we can check the `expr` using a [regular expression](info:regular-expressions), so that it only may contain digits and operators. diff --git a/1-js/99-js-misc/02-eval/1-eval-calculator/task.md b/1-js/99-js-misc/02-eval/1-eval-calculator/task.md deleted file mode 100644 index ece43ec9e6..0000000000 --- a/1-js/99-js-misc/02-eval/1-eval-calculator/task.md +++ /dev/null @@ -1,11 +0,0 @@ -importance: 4 - ---- - -# Eval-calculator - -Create a calculator that prompts for an arithmetic expression and returns its result. - -There's no need to check the expression for correctness in this task. Just evaluate and return the result. - -[demo] diff --git a/1-js/99-js-misc/02-eval/article.md b/1-js/99-js-misc/02-eval/article.md deleted file mode 100644 index 1fdafeeec6..0000000000 --- a/1-js/99-js-misc/02-eval/article.md +++ /dev/null @@ -1,114 +0,0 @@ -# Eval: run a code string - -The built-in `eval` function allows to execute a string of code. - -The syntax is: - -```js -let result = eval(code); -``` - -For example: - -```js run -let code = 'alert("Hello")'; -eval(code); // Hello -``` - -A string of code may be long, contain line breaks, function declarations, variables and so on. - -The result of `eval` is the result of the last statement. - -For example: -```js run -let value = eval('1+1'); -alert(value); // 2 -``` - -```js run -let value = eval('let i = 0; ++i'); -alert(value); // 1 -``` - -The eval'ed code is executed in the current lexical environment, so it can see outer variables: - -```js run no-beautify -let a = 1; - -function f() { - let a = 2; - -*!* - eval('alert(a)'); // 2 -*/!* -} - -f(); -``` - -It can change outer variables as well: - -```js untrusted refresh run -let x = 5; -eval("x = 10"); -alert(x); // 10, value modified -``` - -In strict mode, `eval` has its own lexical environment. So functions and variables, declared inside eval, are not visible outside: - -```js untrusted refresh run -// reminder: 'use strict' is enabled in runnable examples by default - -eval("let x = 5; function f() {}"); - -alert(typeof x); // undefined (no such variable) -// function f is also not visible -``` - -Without `use strict`, `eval` doesn't have its own lexical environment, so we would see `x` and `f` outside. - -## Using "eval" - -In modern programming `eval` is used very sparingly. It's often said that "eval is evil". - -The reason is simple: long, long time ago JavaScript was a much weaker language, many things could only be done with `eval`. But that time passed a decade ago. - -Right now, there's almost no reason to use `eval`. If someone is using it, there's a good chance they can replace it with a modern language construct or a [JavaScript Module](info:modules). - -Please note that its ability to access outer variables has side-effects. - -Code minifiers (tools used before JS gets to production, to compress it) rename local variables into shorter ones (like `a`, `b` etc) to make the code smaller. That's usually safe, but not if `eval` is used, as local variables may be accessed from eval'ed code string. So minifiers don't do that renaming for all variables potentially visible from `eval`. That negatively affects code compression ratio. - -Using outer local variables inside `eval` is also considered a bad programming practice, as it makes maintaining the code more difficult. - -There are two ways how to be totally safe from such problems. - -**If eval'ed code doesn't use outer variables, please call `eval` as `window.eval(...)`:** - -This way the code is executed in the global scope: - -```js untrusted refresh run -let x = 1; -{ - let x = 5; - window.eval('alert(x)'); // 1 (global variable) -} -``` - -**If eval'ed code needs local variables, change `eval` to `new Function` and pass them as arguments:** - -```js run -let f = new Function('a', 'alert(a)'); - -f(5); // 5 -``` - -The `new Function` construct is explained in the chapter . It creates a function from a string, also in the global scope. So it can't see local variables. But it's so much clearer to pass them explicitly as arguments, like in the example above. - -## Summary - -A call to `eval(code)` runs the string of code and returns the result of the last statement. -- Rarely used in modern JavaScript, as there's usually no need. -- Can access outer local variables. That's considered bad practice. -- Instead, to `eval` the code in the global scope, use `window.eval(code)`. -- Or, if your code needs some data from the outer scope, use `new Function` and pass it as arguments. diff --git a/1-js/99-js-misc/03-currying-partials/article.md b/1-js/99-js-misc/03-currying-partials/article.md deleted file mode 100644 index bb308847cd..0000000000 --- a/1-js/99-js-misc/03-currying-partials/article.md +++ /dev/null @@ -1,196 +0,0 @@ -libs: - - lodash - ---- - -# Currying - -[Currying](https://en.wikipedia.org/wiki/Currying) is an advanced technique of working with functions. It's used not only in JavaScript, but in other languages as well. - -Currying is a transformation of functions that translates a function from callable as `f(a, b, c)` into callable as `f(a)(b)(c)`. - -Currying doesn't call a function. It just transforms it. - -Let's see an example first, to better understand what we're talking about, and then practical applications. - -We'll create a helper function `curry(f)` that performs currying for a two-argument `f`. In other words, `curry(f)` for two-argument `f(a, b)` translates it into a function that runs as `f(a)(b)`: - -```js run -*!* -function curry(f) { // curry(f) does the currying transform - return function(a) { - return function(b) { - return f(a, b); - }; - }; -} -*/!* - -// usage -function sum(a, b) { - return a + b; -} - -let curriedSum = curry(sum); - -alert( curriedSum(1)(2) ); // 3 -``` - -As you can see, the implementation is straightforward: it's just two wrappers. - -- The result of `curry(func)` is a wrapper `function(a)`. -- When it is called like `curriedSum(1)`, the argument is saved in the Lexical Environment, and a new wrapper is returned `function(b)`. -- Then this wrapper is called with `2` as an argument, and it passes the call to the original `sum`. - -More advanced implementations of currying, such as [_.curry](https://lodash.com/docs#curry) from lodash library, return a wrapper that allows a function to be called both normally and partially: - -```js run -function sum(a, b) { - return a + b; -} - -let curriedSum = _.curry(sum); // using _.curry from lodash library - -alert( curriedSum(1, 2) ); // 3, still callable normally -alert( curriedSum(1)(2) ); // 3, called partially -``` - -## Currying? What for? - -To understand the benefits we need a worthy real-life example. - -For instance, we have the logging function `log(date, importance, message)` that formats and outputs the information. In real projects such functions have many useful features like sending logs over the network, here we'll just use `alert`: - -```js -function log(date, importance, message) { - alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`); -} -``` - -Let's curry it! - -```js -log = _.curry(log); -``` - -After that `log` works normally: - -```js -log(new Date(), "DEBUG", "some debug"); // log(a, b, c) -``` - -...But also works in the curried form: - -```js -log(new Date())("DEBUG")("some debug"); // log(a)(b)(c) -``` - -Now we can easily make a convenience function for current logs: - -```js -// logNow will be the partial of log with fixed first argument -let logNow = log(new Date()); - -// use it -logNow("INFO", "message"); // [HH:mm] INFO message -``` - -Now `logNow` is `log` with fixed first argument, in other words "partially applied function" or "partial" for short. - -We can go further and make a convenience function for current debug logs: - -```js -let debugNow = logNow("DEBUG"); - -debugNow("message"); // [HH:mm] DEBUG message -``` - -So: -1. We didn't lose anything after currying: `log` is still callable normally. -2. We can easily generate partial functions such as for today's logs. - -## Advanced curry implementation - -In case you'd like to get in to the details, here's the "advanced" curry implementation for multi-argument functions that we could use above. - -It's pretty short: - -```js -function curry(func) { - - return function curried(...args) { - if (args.length >= func.length) { - return func.apply(this, args); - } else { - return function(...args2) { - return curried.apply(this, args.concat(args2)); - } - } - }; - -} -``` - -Usage examples: - -```js -function sum(a, b, c) { - return a + b + c; -} - -let curriedSum = curry(sum); - -alert( curriedSum(1, 2, 3) ); // 6, still callable normally -alert( curriedSum(1)(2,3) ); // 6, currying of 1st arg -alert( curriedSum(1)(2)(3) ); // 6, full currying -``` - -The new `curry` may look complicated, but it's actually easy to understand. - -The result of `curry(func)` call is the wrapper `curried` that looks like this: - -```js -// func is the function to transform -function curried(...args) { - if (args.length >= func.length) { // (1) - return func.apply(this, args); - } else { - return function pass(...args2) { // (2) - return curried.apply(this, args.concat(args2)); - } - } -}; -``` - -When we run it, there are two `if` execution branches: - -1. Call now: if passed `args` count is the same as the original function has in its definition (`func.length`) or longer, then just pass the call to it. -2. Get a partial: otherwise, `func` is not called yet. Instead, another wrapper `pass` is returned, that will re-apply `curried` providing previous arguments together with the new ones. Then on a new call, again, we'll get either a new partial (if not enough arguments) or, finally, the result. - -For instance, let's see what happens in the case of `sum(a, b, c)`. Three arguments, so `sum.length = 3`. - -For the call `curried(1)(2)(3)`: - -1. The first call `curried(1)` remembers `1` in its Lexical Environment, and returns a wrapper `pass`. -2. The wrapper `pass` is called with `(2)`: it takes previous args (`1`), concatenates them with what it got `(2)` and calls `curried(1, 2)` with them together. As the argument count is still less than 3, `curry` returns `pass`. -3. The wrapper `pass` is called again with `(3)`, for the next call `pass(3)` takes previous args (`1`, `2`) and adds `3` to them, making the call `curried(1, 2, 3)` -- there are `3` arguments at last, they are given to the original function. - -If that's still not obvious, just trace the calls sequence in your mind or on paper. - -```smart header="Fixed-length functions only" -The currying requires the function to have a fixed number of arguments. - -A function that uses rest parameters, such as `f(...args)`, can't be curried this way. -``` - -```smart header="A little more than currying" -By definition, currying should convert `sum(a, b, c)` into `sum(a)(b)(c)`. - -But most implementations of currying in JavaScript are advanced, as described: they also keep the function callable in the multi-argument variant. -``` - -## Summary - -*Currying* is a transform that makes `f(a,b,c)` callable as `f(a)(b)(c)`. JavaScript implementations usually both keep the function callable normally and return the partial if the arguments count is not enough. - -Currying allows us to easily get partials. As we've seen in the logging example, after currying the three argument universal function `log(date, importance, message)` gives us partials when called with one argument (like `log(date)`) or two arguments (like `log(date, importance)`). diff --git a/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md b/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md deleted file mode 100644 index ba5d3bf04b..0000000000 --- a/1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md +++ /dev/null @@ -1,37 +0,0 @@ -**Error**! - -Try it: - -```js run -let user = { - name: "John", - go: function() { alert(this.name) } -} - -(user.go)() // error! -``` - -The error message in most browsers does not give us much of a clue about what went wrong. - -**The error appears because a semicolon is missing after `user = {...}`.** - -JavaScript does not auto-insert a semicolon before a bracket `(user.go)()`, so it reads the code like: - -```js no-beautify -let user = { go:... }(user.go)() -``` - -Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }` as a function with the argument `(user.go)`. And that also happens on the same line with `let user`, so the `user` object has not yet even been defined, hence the error. - -If we insert the semicolon, all is fine: - -```js run -let user = { - name: "John", - go: function() { alert(this.name) } -}*!*;*/!* - -(user.go)() // John -``` - -Please note that parentheses around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters. diff --git a/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md b/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md deleted file mode 100644 index f40d687352..0000000000 --- a/1-js/99-js-misc/04-reference-type/2-check-syntax/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 2 - ---- - -# Syntax check - -What is the result of this code? - - -```js no-beautify -let user = { - name: "John", - go: function() { alert(this.name) } -} - -(user.go)() -``` - -P.S. There's a pitfall :) diff --git a/1-js/99-js-misc/04-reference-type/3-why-this/solution.md b/1-js/99-js-misc/04-reference-type/3-why-this/solution.md deleted file mode 100644 index 31ea4ff88b..0000000000 --- a/1-js/99-js-misc/04-reference-type/3-why-this/solution.md +++ /dev/null @@ -1,22 +0,0 @@ - -Here's the explanations. - -1. That's a regular object method call. - -2. The same, parentheses do not change the order of operations here, the dot is first anyway. - -3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines: - - ```js no-beautify - f = obj.go; // calculate the expression - f(); // call what we have - ``` - - Here `f()` is executed as a function, without `this`. - -4. The similar thing as `(3)`, to the left of the dot `.` we have an expression. - -To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type. - -Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`. - diff --git a/1-js/99-js-misc/04-reference-type/3-why-this/task.md b/1-js/99-js-misc/04-reference-type/3-why-this/task.md deleted file mode 100644 index e2c073f62b..0000000000 --- a/1-js/99-js-misc/04-reference-type/3-why-this/task.md +++ /dev/null @@ -1,26 +0,0 @@ -importance: 3 - ---- - -# Explain the value of "this" - -In the code below we intend to call `obj.go()` method 4 times in a row. - -But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why? - -```js run no-beautify -let obj, method; - -obj = { - go: function() { alert(this); } -}; - -obj.go(); // (1) [object Object] - -(obj.go)(); // (2) [object Object] - -(method = obj.go)(); // (3) undefined - -(obj.go || obj.stop)(); // (4) undefined -``` - diff --git a/1-js/99-js-misc/04-reference-type/article.md b/1-js/99-js-misc/04-reference-type/article.md deleted file mode 100644 index c680c17f99..0000000000 --- a/1-js/99-js-misc/04-reference-type/article.md +++ /dev/null @@ -1,108 +0,0 @@ - -# Reference Type - -```warn header="In-depth language feature" -This article covers an advanced topic, to understand certain edge-cases better. - -It's not important. Many experienced developers live fine without knowing it. Read on if you're want to know how things work under the hood. -``` - -A dynamically evaluated method call can lose `this`. - -For instance: - -```js run -let user = { - name: "John", - hi() { alert(this.name); }, - bye() { alert("Bye"); } -}; - -user.hi(); // works - -// now let's call user.hi or user.bye depending on the name -*!* -(user.name == "John" ? user.hi : user.bye)(); // Error! -*/!* -``` - -On the last line there is a conditional operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`. - -Then the method is immediately called with parentheses `()`. But it doesn't work correctly! - -As you can see, the call results in an error, because the value of `"this"` inside the call becomes `undefined`. - -This works (object dot method): -```js -user.hi(); -``` - -This doesn't (evaluated method): -```js -(user.name == "John" ? user.hi : user.bye)(); // Error! -``` - -Why? If we want to understand why it happens, let's get under the hood of how `obj.method()` call works. - -## Reference type explained - -Looking closely, we may notice two operations in `obj.method()` statement: - -1. First, the dot `'.'` retrieves the property `obj.method`. -2. Then parentheses `()` execute it. - -So, how does the information about `this` get passed from the first part to the second one? - -If we put these operations on separate lines, then `this` will be lost for sure: - -```js run -let user = { - name: "John", - hi() { alert(this.name); } -} - -*!* -// split getting and calling the method in two lines -let hi = user.hi; -hi(); // Error, because this is undefined -*/!* -``` - -Here `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`. - -**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).** - -The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language. - -The value of Reference Type is a three-value combination `(base, name, strict)`, where: - -- `base` is the object. -- `name` is the property name. -- `strict` is true if `use strict` is in effect. - -The result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is: - -```js -// Reference Type value -(user, "hi", true) -``` - -When parentheses `()` are called on the Reference Type, they receive the full information about the object and its method, and can set the right `this` (`=user` in this case). - -Reference type is a special "intermediary" internal type, with the purpose to pass information from dot `.` to calling parentheses `()`. - -Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "loses" `this`. - -So, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj['method']()` syntax (they do the same here). Later in this tutorial, we will learn various ways to solve this problem such as [func.bind()](/bind#solution-2-bind). - -## Summary - -Reference Type is an internal type of the language. - -Reading a property, such as with dot `.` in `obj.method()` returns not exactly the property value, but a special "reference type" value that stores both the property value and the object it was taken from. - -That's for the subsequent method call `()` to get the object and set `this` to it. - -For all other operations, the reference type automatically becomes the property value (a function in our case). - -The whole mechanics is hidden from our eyes. It only matters in subtle cases, such as when a method is obtained dynamically from the object, using an expression. diff --git a/1-js/99-js-misc/05-bigint/article.md b/1-js/99-js-misc/05-bigint/article.md deleted file mode 100644 index 062dd60175..0000000000 --- a/1-js/99-js-misc/05-bigint/article.md +++ /dev/null @@ -1,130 +0,0 @@ -# BigInt - -[recent caniuse="bigint"] - -`BigInt` is a special numeric type that provides support for integers of arbitrary length. - -A bigint is created by appending `n` to the end of an integer literal or by calling the function `BigInt` that creates bigints from strings, numbers etc. - -```js -const bigint = 1234567890123456789012345678901234567890n; - -const sameBigint = BigInt("1234567890123456789012345678901234567890"); - -const bigintFromNumber = BigInt(10); // same as 10n -``` - -## Math operators - -`BigInt` can mostly be used like a regular number, for example: - -```js run -alert(1n + 2n); // 3 - -alert(5n / 2n); // 2 -``` - -Please note: the division `5/2` returns the result rounded towards zero, without the decimal part. All operations on bigints return bigints. - -We can't mix bigints and regular numbers: - -```js run -alert(1n + 2); // Error: Cannot mix BigInt and other types -``` - -We should explicitly convert them if needed: using either `BigInt()` or `Number()`, like this: - -```js run -let bigint = 1n; -let number = 2; - -// number to bigint -alert(bigint + BigInt(number)); // 3 - -// bigint to number -alert(Number(bigint) + number); // 3 -``` - -The conversion operations are always silent, never give errors, but if the bigint is too huge and won't fit the number type, then extra bits will be cut off, so we should be careful doing such conversion. - -````smart header="The unary plus is not supported on bigints" -The unary plus operator `+value` is a well-known way to convert `value` to a number. - -In order to avoid confusion, it's not supported on bigints: -```js run -let bigint = 1n; - -alert( +bigint ); // error -``` -So we should use `Number()` to convert a bigint to a number. -```` - -## Comparisons - -Comparisons, such as `<`, `>` work with bigints and numbers just fine: - -```js run -alert( 2n > 1n ); // true - -alert( 2n > 1 ); // true -``` - -Please note though, as numbers and bigints belong to different types, they can be equal `==`, but not strictly equal `===`: - -```js run -alert( 1 == 1n ); // true - -alert( 1 === 1n ); // false -``` - -## Boolean operations - -When inside `if` or other boolean operations, bigints behave like numbers. - -For instance, in `if`, bigint `0n` is falsy, other values are truthy: - -```js run -if (0n) { - // never executes -} -``` - -Boolean operators, such as `||`, `&&` and others also work with bigints similar to numbers: - -```js run -alert( 1n || 2 ); // 1 (1n is considered truthy) - -alert( 0n || 2 ); // 2 (0n is considered falsy) -``` - -## Polyfills - -Polyfilling bigints is tricky. The reason is that many JavaScript operators, such as `+`, `-` and so on behave differently with bigints compared to regular numbers. - -For example, division of bigints always returns a bigint (rounded if necessary). - -To emulate such behavior, a polyfill would need to analyze the code and replace all such operators with its functions. But doing so is cumbersome and would cost a lot of performance. - -So, there's no well-known good polyfill. - -Although, the other way around is proposed by the developers of [JSBI](https://github.com/GoogleChromeLabs/jsbi) library. - -This library implements big numbers using its own methods. We can use them instead of native bigints: - -| Operation | native `BigInt` | JSBI | -|-----------|-----------------|------| -| Creation from Number | `a = BigInt(789)` | `a = JSBI.BigInt(789)` | -| Addition | `c = a + b` | `c = JSBI.add(a, b)` | -| Subtraction | `c = a - b` | `c = JSBI.subtract(a, b)` | -| ... | ... | ... | - -...And then use the polyfill (Babel plugin) to convert JSBI calls to native bigints for those browsers that support them. - -In other words, this approach suggests that we write code in JSBI instead of native bigints. But JSBI works with numbers as with bigints internally, emulates them closely following the specification, so the code will be "bigint-ready". - -We can use such JSBI code "as is" for engines that don't support bigints and for those that do support - the polyfill will convert the calls to native bigints. - -## References - -- [MDN docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt). -- [Specification](https://tc39.es/ecma262/#sec-bigint-objects). diff --git a/1-js/99-js-misc/index.md b/1-js/99-js-misc/index.md deleted file mode 100644 index 79cd72fe7c..0000000000 --- a/1-js/99-js-misc/index.md +++ /dev/null @@ -1,2 +0,0 @@ - -# Miscellaneous diff --git a/1-js/index.md b/1-js/index.md index c313cb85c8..ad34c18aa8 100644 --- a/1-js/index.md +++ b/1-js/index.md @@ -1,6 +1 @@ # The JavaScript language - -Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP. - -We concentrate on the language itself here, with the minimum of environment-specific notes. - diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md deleted file mode 100644 index 56b568833c..0000000000 --- a/2-ui/1-document/01-browser-environment/article.md +++ /dev/null @@ -1,113 +0,0 @@ -# Browser environment, specs - -The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms. - -A platform may be a browser, or a web-server or another *host*, even a "smart" coffee machine, if it can run JavaScript. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*. - -A host environment provides own objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on. - -Here's a bird's-eye view of what we have when JavaScript runs in a web browser: - -![](windowObjects.svg) - -There's a "root" object called `window`. It has two roles: - -1. First, it is a global object for JavaScript code, as described in the chapter . -2. Second, it represents the "browser window" and provides methods to control it. - -For instance, here we use it as a global object: - -```js run -function sayHi() { - alert("Hello"); -} - -// global functions are methods of the global object: -window.sayHi(); -``` - -And here we use it as a browser window, to see the window height: - -```js run -alert(window.innerHeight); // inner window height -``` - -There are more window-specific methods and properties, we'll cover them later. - -## DOM (Document Object Model) - -Document Object Model, or DOM for short, represents all page content as objects that can be modified. - -The `document` object is the main "entry point" to the page. We can change or create anything on the page using it. - -For instance: -```js run -// change the background color to red -document.body.style.background = "red"; - -// change it back after 1 second -setTimeout(() => document.body.style.background = "", 1000); -``` - -Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org). - -```smart header="DOM is not only for browsers" -The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too. - -For instance, server-side scripts that download HTML pages and process them can also use DOM. They may support only a part of the specification though. -``` - -```smart header="CSSOM for styling" -There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them. - -CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible. -``` - -## BOM (Browser Object Model) - -The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document. - -For instance: - -- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc). -- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. - -Here's how we can use the `location` object: - -```js run -alert(location.href); // shows current URL -if (confirm("Go to Wikipedia?")) { - location.href = "https://wikipedia.org/"; // redirect the browser to another URL -} -``` - -Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user. - -```smart header="Specifications" -BOM is the part of the general [HTML specification](https://html.spec.whatwg.org). - -Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at . -``` - -## Summary - -Talking about standards, we have: - -DOM specification -: Describes the document structure, manipulations and events, see . - -CSSOM specification -: Describes stylesheets and style rules, manipulations with them and their binding to documents, see . - -HTML specification -: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes the DOM specification and extends it with many additional properties and methods. - -Additionally, some classes are described separately at . - -Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything. - -When you'd like to read about a property or a method, the Mozilla manual at is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete. - -To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g , . - -Now we'll get down to learning DOM, because the document plays the central role in the UI. diff --git a/2-ui/1-document/01-browser-environment/windowObjects.svg b/2-ui/1-document/01-browser-environment/windowObjects.svg deleted file mode 100644 index d1b280ee8f..0000000000 --- a/2-ui/1-document/01-browser-environment/windowObjects.svg +++ /dev/null @@ -1 +0,0 @@ -windowdocumentObjectnavigatorscreenlocationframeshistoryArrayFunctionXMLHttpRequestBOMJavaScriptDOM…… \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md deleted file mode 100644 index 019398be9b..0000000000 --- a/2-ui/1-document/02-dom-nodes/article.md +++ /dev/null @@ -1,282 +0,0 @@ -libs: - - d3 - - domtree - ---- - -# DOM tree - -The backbone of an HTML document is tags. - -According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well. - -All these objects are accessible using JavaScript, and we can use them to modify the page. - -For example, `document.body` is the object representing the `` tag. - -Running this code will make the `` red for 3 seconds: - -```js run -document.body.style.background = 'red'; // make the background red - -setTimeout(() => document.body.style.background = '', 3000); // return back -``` - -Here we used `style.background` to change the background color of `document.body`, but there are many other properties, such as: - -- `innerHTML` -- HTML contents of the node. -- `offsetWidth` -- the node width (in pixels) -- ...and so on. - -Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure. - -## An example of the DOM - -Let's start with the following simple document: - -```html run no-beautify - - - - About elk - - - The truth about elk. - - -``` - -The DOM represents HTML as a tree structure of tags. Here's how it looks: - -
- - - -```online -On the picture above, you can click on element nodes and their children will open/collapse. -``` - -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. - -The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree. - -For instance, the `` tag has the text `"About elk"`. - -Please note the special characters in text nodes: - -- a newline: `↵` (in JavaScript known as `\n`) -- a space: `␣` - -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. - -Here are no space-only text nodes: - -```html no-beautify -<!DOCTYPE HTML> -<html><head><title>About elkThe truth about elk. -``` - -
- - - -```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: - - -
- - - -While generating the DOM, browsers automatically process errors in the document, close tags and so on. - -A document with unclosed tags: - -```html no-beautify -

Hello -

  • Mom -
  • and -
  • Dad -``` - -...will become a normal DOM as the browser reads tags and restores the missing parts: - -
    - - - -````warn header="Tables always have ``" -An interesting "special case" is tables. By the DOM specification they must have ``, but HTML text may (officially) omit it. Then the browser creates `` in the DOM automatically. - -For the HTML: - -```html no-beautify -
    1
    -``` - -DOM-structure will be: -
    - - - -You see? The `` appeared out of nowhere. You should keep this in mind while working with tables to avoid surprises. -```` - -## Other node types - -There are some other node types besides elements and text nodes. - -For example, comments: - -```html - - - - The truth about elk. -
      -
    1. An elk is a smart
      2. -*!* - -*/!* -
    2. ...and cunning animal!
      3. -
    - - -``` - -
    - - - -We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. - -We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. - -**Everything in HTML, even comments, becomes a part of the DOM.** - -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. We are not going to touch that node, we even don't draw it on diagrams for that reason, but it's there. - -The `document` object that represents the whole document is, formally, a DOM node as well. - -There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: - -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. - -## See it for yourself - -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. - -Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. - -To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. - -It should look like this: - -![](elk.svg) - -You can see the DOM, click on elements, see their details and so on. - -Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. - -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. - -Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. - -![](inspect.svg) - -At the right part of the tools there are the following subtabs: -- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. -- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). -- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). -- ...and so on. - -The best way to study them is to click around. Most values are editable in-place. - -## Interaction with console - -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 `
  • ` in the Elements tab. -2. Press `key:Esc` -- it will open console right below the Elements tab. - -Now the last selected element is available as `$0`, the previously selected is `$1` etc. - -We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: - -![](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) - -That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript. - -The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. - -## Summary - -An HTML/XML document is represented inside the browser as the DOM tree. - -- Tags become element nodes and form the structure. -- Text becomes text nodes. -- ...etc, everything in HTML has its place in DOM, even comments. - -We can use developer tools to inspect DOM and modify it manually. - -Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at . The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. - -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. diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.svg b/2-ui/1-document/02-dom-nodes/domconsole0.svg deleted file mode 100644 index c0096060aa..0000000000 --- a/2-ui/1-document/02-dom-nodes/domconsole0.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.svg b/2-ui/1-document/02-dom-nodes/domconsole1.svg deleted file mode 100644 index db92359d5d..0000000000 --- a/2-ui/1-document/02-dom-nodes/domconsole1.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/elk.html b/2-ui/1-document/02-dom-nodes/elk.html deleted file mode 100644 index dc5d65f541..0000000000 --- a/2-ui/1-document/02-dom-nodes/elk.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - The truth about elk. -
      -
    1. An elk is a smart
      2. - -
    2. ...and cunning animal!
      3. -
    - - diff --git a/2-ui/1-document/02-dom-nodes/elk.svg b/2-ui/1-document/02-dom-nodes/elk.svg deleted file mode 100644 index 19ea221d29..0000000000 --- a/2-ui/1-document/02-dom-nodes/elk.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/head.html b/2-ui/1-document/02-dom-nodes/head.html deleted file mode 100644 index d61883c2b0..0000000000 --- a/2-ui/1-document/02-dom-nodes/head.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/2-ui/1-document/02-dom-nodes/inspect.svg b/2-ui/1-document/02-dom-nodes/inspect.svg deleted file mode 100644 index 658ee5ea26..0000000000 --- a/2-ui/1-document/02-dom-nodes/inspect.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg b/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg deleted file mode 100644 index 5bdf20a83a..0000000000 --- a/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg +++ /dev/null @@ -1,1035 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md deleted file mode 100644 index decfa62c7d..0000000000 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md +++ /dev/null @@ -1,27 +0,0 @@ -There are many ways, for instance: - - -The `
    ` DOM node: - -```js -document.body.firstElementChild -// or -document.body.children[0] -// or (the first node is space, so we take 2nd) -document.body.childNodes[1] -``` - -The `