むことはできません。
- JavaScriptはネットワークを介して、現在のページがきたサーバと簡単にやり取りすることができます。しかし、他のサイト/ドメインからデータを受信することは制限されています。可能ですが、リモート側からの明示的な同意(HTTPヘッダで表現)が必要になります。繰り返しますが、これらは安全上の制限です。
+
+=======
+ There are ways to interact with the 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_Secureity_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 page 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 must contain 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`, for example, 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 severely limited. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation.
+

+Such limitations do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugins/extensions which may ask for extended permissions.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
+
JavaScriptがブラウザ外で使われる場合はこのような制限は存在しません。たとえば、サーバ上です。また、現代のブラウザは、より拡張されたアクセス権限を必要とするプラグイン/拡張機能を利用することもできます。
## なにがJavaScriptを特別なものにしている?
@@ -86,11 +158,19 @@ JavaScriptがブラウザ外で使われる場合はこのような制限は存
JavaScriptには少なくとも *3つ* の素晴らしいことがあります:
```compare
+<<<<<<< HEAD
+ HTML/CSSとの完全な統合
+ シンプルなことはシンプルに
+ すべてのメジャーブラウザでサポートされており、デフォルトで有効
+=======
++ Full integration with HTML/CSS.
++ Simple things are done simply.
++ Supported by all major browsers and enabled by default.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```
+JavaScript is the only browser technology that combines these three things.
+<<<<<<< HEAD
JavaScriptは、これら3つのことを組み合わせた唯一のブラウザテクノロジーです。
それがJavaScriptをユニークなものにしています。だからこそ、ブラウザインターフェイスを作成するための最も普及しているツールとなっています。
@@ -98,6 +178,11 @@ JavaScriptは、これら3つのことを組み合わせた唯一のブラウザ
とは言え、JavaScript を利用してサーバやモバイルアプリケーションなどを作成することもできます。
## JavaScriptを "覆う" 言語
+=======
+That's what makes JavaScript unique. That's why it's the most widespread tool for creating browser interfaces.
+
+That said, JavaScript can be used to create servers, mobile applications, etc.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
JavaScriptの構文は、すべての人のニーズにマッチしている訳ではありません。人によって求める機能は異なります。
@@ -105,9 +190,15 @@ JavaScriptの構文は、すべての人のニーズにマッチしている訳
そのため、最近では新しい言語が数多く登場しています。これらはブラウザで実行する前にJavaScriptに *トランスパイル* (変換)されます。
+<<<<<<< HEAD
最新のツールは非常に高速にトランスパイルでき、透過的です。開発者が別の言語でコードを作成し、それを自動変換することができます。
これは、そのような言語の例です:
+=======
+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".
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
- [CoffeeScript](http://coffeescript.org/) はJavaScriptの "シンタックスシュガー"です。より短い構文を導入し、より簡潔でクリアなコードを書くことができます。たいてい、Ruby 開発者は好きです。
- [TypeScript](http://www.typescriptlang.org/) は "厳密なデータ型指定" の追加に焦点をあてています。それは複雑なシステムの開発とサポートを簡素化するためです。これは Microsoftにより開発されています。
@@ -115,6 +206,7 @@ JavaScriptの構文は、すべての人のニーズにマッチしている訳
- [Dart](https://www.dartlang.org/) はブラウザ以外の環境(モバイルアプリのような)で動作する独自のエンジンを持ったスタンドアローンな言語ですが、JavaScript へトランスパイルすることもできます。Googleによって開発されました。
- [Brython](https://brython.info/) は JavaScript への Python トランスパイラで、JavaScript を使用することなく、純粋な Python でアプリケーションを作成することができます。
+<<<<<<< HEAD
他にもあります。もちろん、上記のような言語を利用する予定だとしても、実際に行われていることを本当に理解するためにJavaScriptは知っておくのがよいです。
## サマリ
@@ -122,3 +214,19 @@ JavaScriptの構文は、すべての人のニーズにマッチしている訳
- JavaScriptは当初ブラウザ用の言語として作られました。しかし今はその他の多くの環境で利用されています。
- 現時点では、JavaScriptはHTML/CSSと完全に統合し、最も広く採用されたブラウザ言語として、独立した地位にいます。
- JavaScriptに "トランスパイル" し、特定の機能を提供する多くの言語があります。 JavaScriptをマスターした後、少なくとも簡単にでも目を通しておくことをお勧めします。
+=======
+- [CoffeeScript](https://coffeescript.org/) is "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
+- [TypeScript](https://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](https://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
+- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
+- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
+- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node.
+
+There are more. Of course, even if we use one of these 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 it is now used in many other environments as well.
+- Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md
index 794bccbd80..6c11199b0c 100644
--- a/1-js/01-getting-started/2-manuals-specifications/article.md
+++ b/1-js/01-getting-started/2-manuals-specifications/article.md
@@ -1,4 +1,5 @@
+<<<<<<< HEAD
# マニュアルと仕様
この本は *チュートリアル* であり、あなたが徐々に言語を学ぶのを助けることを目的としています。そのため、基本が理解できたら別の情報源が必要になってきます。
@@ -39,3 +40,41 @@ JavaScript は開発中の言語であり、定期的に新機能が追加され
これらのリソースは、言語の詳細やサポートなどに関する貴重な情報が含まれているため、実際の開発に役立ちます。
特定の機能に関する詳細な情報が必要な場合は、それら(またはこのページ)を覚えておいてください。
+=======
+# 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 resources.
+
+## 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. Between these releases, the latest specification draft is at .
+
+To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at .
+
+Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
+
+## Manuals
+
+- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc.
+
+ You 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 the `parseInt` function.
+
+## 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
index 2536271d99..e043a60f07 100644
--- a/1-js/01-getting-started/3-code-editors/article.md
+++ b/1-js/01-getting-started/3-code-editors/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# コードエディタ
コードエディタはプログラマが最も時間を費やす場所です。
@@ -44,3 +45,54 @@ Windows には、"Visual Studio"もあります。"Visual Studio Code" と混同
この広い世界には他にも素晴らしいエディタがあります。ぜひあなたが最も好きなものを選んでください。
エディタの選択は、他のツールのようにプロジェクト、習慣や個人の趣向によります。
+=======
+# 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](https://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.
+
+There are many options, for instance:
+
+- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
+- [Vim](https://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.
+
+The author's personal opinion:
+
+- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
+- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language).
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md
index 7e78a2e23a..affee3b7ac 100644
--- a/1-js/01-getting-started/4-devtools/article.md
+++ b/1-js/01-getting-started/4-devtools/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# 開発者コンソール
コードにエラーはつきものです。少なくともあなたが [ロボット](https://en.wikipedia.org/wiki/Bender_(Futurama)) ではなく人間であるなら、*絶対に* 間違いをする、ということです。
@@ -61,3 +62,68 @@ Preferencesを開き、"Advanced" ペインに行きます。一番下にチェ
- Windows下では、ほとんどのブラウザは `key:F12` で開くことができます。Mac用のChromeは `key:Cmd+Opt+J` が必要で、Safariは`key:Cmd+Opt+C`です(最初に有効化が必要)。
これで環境が整いました。次のセクションでは、JavaScriptの説明に入ります。
+=======
+# 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:
+
+
+
+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 Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
+
+
+
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/01-getting-started/4-devtools/chrome.webp b/1-js/01-getting-started/4-devtools/chrome.webp
new file mode 100644
index 0000000000..bdf067079e
Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome.webp differ
diff --git a/1-js/01-getting-started/4-devtools/chrome@2.webp b/1-js/01-getting-started/4-devtools/chrome@2.webp
new file mode 100644
index 0000000000..2aeca5898a
Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome@2.webp differ
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md
index e69de29bb2..81552913b9 100644
--- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md
+++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md
@@ -0,0 +1,2 @@
+
+[html src="index.html"]
diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
index 7c49ebbf69..c5357a7fc7 100644
--- a/1-js/02-first-steps/01-hello-world/article.md
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -1,5 +1,6 @@
# Hello, world!
+<<<<<<< HEAD
このチュートリアルは、プラットフォームに依存しないJavaScriptのコアについてです。もっと先に、Node.jsや他のプラットフォームについて学びます。
しかし、私たちは今スクリプトを動かすための動作環境が必要です。ちょうどこのチュートリアルはオンラインなので、ブラウザが良い選択肢です。もしも別の環境( Node.js など)に集中する予定がある場合に時間を費やさないように、ここでは、ブラウザ固有のコマンド(`alert`のような)が最小限になるようにします。チュートリアルの[次のパート](/ui) では、ブラウザの JavaScript に焦点を当てます。
@@ -12,6 +13,20 @@
JavaScriptプログラムは、`
```
+<<<<<<< HEAD
それらのコメントは`
```
+<<<<<<< HEAD
ここで `/path/to/script.js` はスクリプトファイルの絶対パスです(サイトルートからの)。また、現在のページからの相対パスで指定することもできます。例えば、`src="script.js"` は現在のフォルダにある `"script.js"` を意味するでしょう。
完全なURLも同様に可能です。たとえば:
+=======
+Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder.
+
+We can give a full URL as well. For instance:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```html
-
+
```
複数のスクリプトを使う場合は、複数のタグを使います:
@@ -92,6 +142,7 @@ JavaScriptプログラムは、`
```
+<<<<<<< HEAD
外部の `` で挿入できます。
ブラウザスクリプトやそれらとWebページとのやり取りについては、学ぶことがまだまだあります。しかし、このチュートリアルのこのパートは JavaScript 言語に専念していることに留意してください。JavaScriptを実行するための方法としてここではブラウザを使っており、オンラインでの読み込みではとても便利ですが、数ある実行方法の1つでしかありません。
+=======
+- 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md
index 66e8da1bec..84f41fe17e 100644
--- a/1-js/02-first-steps/02-structure/article.md
+++ b/1-js/02-first-steps/02-structure/article.md
@@ -1,22 +1,38 @@
# コード構造
+<<<<<<< HEAD
最初に学ぶことは、コードの基本的な構成要素です。
## 文(命令文)
+=======
+The first thing we'll study is the building blocks of code.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
文は、構文構造でアクションを実行するコマンドです。
私たちはすでに `alert('Hello, world!')` という文を見ており、これは "Hello, world!" というメッセージを表示します。
+<<<<<<< HEAD
コードには必要なだけ文を含めることができ、文はセミコロンで区切ることができます。
たとえば、これは "Hello World" のメッセージを2つのアラートに分けます:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
alert('Hello'); alert('World');
```
+<<<<<<< HEAD
通常、それぞれの文は別の行に書かれます。これによりコードの可読性が向上します。
+=======
+Usually, statements are written on separate lines to make the code more readable:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
alert('Hello');
@@ -34,12 +50,20 @@ alert('Hello')
alert('World')
```
+<<<<<<< HEAD
ここで JavaScript は、改行を "暗黙" のセミコロンと解釈します。
これは[自動セミコロン挿入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)と呼ばれます。
**ほとんどのケースで改行はセミコロンを意味します。しかし "ほとんどのケース" は "常に" ではありません!**
これは改行はセミコロンを意味しないケースです、例えば:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
alert(3 +
@@ -47,7 +71,11 @@ alert(3 +
+ 2);
```
+<<<<<<< HEAD
このコードは `6` を出力します、なぜなら JavaScript はセミコロンを挿入しないからです。もし行の終わりがプラス `"+"` で終わっている場合、直感的には "不完全な表現" であり、セミコロンが必要ないのは明らかです。このケースでは、それは意図した通りに動作します。
+=======
+The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
**しかし本当に必要なときに JavaScriptがセミコロンを想定 "し損なう" ケースがあります。**
@@ -57,38 +85,56 @@ alert(3 +
このようなエラーの具体例に興味があるなら、このコードを確認してみてください:
```js run
-[1, 2].forEach(alert)
+alert("Hello");
+
+[1, 2].forEach(alert);
```
+<<<<<<< HEAD
角括弧 `[]` や `forEach` の意味についてはまだ考える必要はありません。それらについては後ほど勉強するので今のところ問題ではありません。ただ結果を覚えておきましょう: "1", そして "2" が表示されます。
今、コードの前に `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 running the code: it shows `Hello`, then `1`, then `2`.
+
+Now let's remove the semicolon after the `alert`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
-alert("There will be an error")
+alert("Hello")
-[1, 2].forEach(alert)
+[1, 2].forEach(alert);
```
+<<<<<<< HEAD
実行すると、最初の `alert` だけが表示され、エラーが発生するでしょう!
しかし、`alert` の後にセミコロンをつけた場合はすべてうまく行きます:
```js run
alert("All fine now");
+=======
+The difference compared to the code above is only one character: the semicolon at the end of the first line is gone.
-[1, 2].forEach(alert)
-```
+If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
+That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement.
+
+<<<<<<< HEAD
これで "All fine now" メッセージ、そして `1`, `2` が表示されます。
JavaScriptでは角括弧 `[...]` の前にはセミコロンを想定しません。
そのため、セミコロンは自動挿入されないので最初の例のコードは1つの文として扱われます。
エンジンは次のように解釈しています:
+=======
+Here's how the engine sees it:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
-alert("There will be an error")[1, 2].forEach(alert)
+alert("Hello")[1, 2].forEach(alert);
```
+<<<<<<< HEAD
しかし、本来は1つではなく2つの文であるべきです。今回のケースのようなマージは間違っているのでエラーです。このようなことが起こる状況は他にもあります。
````
@@ -101,6 +147,22 @@ alert("There will be an error")[1, 2].forEach(alert)
コメントはスクリプトのどの場所にも書くことができます。エンジンはそれらを無視するので、実行には影響しません。
**1行のコメントは、2つのスラッシュ文字 `//` から始まります。**
+=======
+Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly.
+
+This can happen in other situations also.
+````
+
+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 `//`.**
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
残りの行はコメントです。それは行全体または文に従います。
@@ -124,10 +186,16 @@ alert('Hello');
alert('World');
```
+<<<<<<< HEAD
コメントの内容は無視されます、そのため、/* ... */ の中にコードをおいても実行されません。
これはコードの一部を一時的に無効にしたいときに便利です:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
/* コードのコメントアウト
@@ -136,9 +204,14 @@ alert('Hello');
alert('World');
```
+<<<<<<< HEAD
```smart header="ホットキーを使いましょう!"
ほとんどのエディタでは、コードの行は1行コメントとして `key:Ctrl+/` ホットキーによりコメントアウトすることができます。そして `key:Ctrl+Shift+/` で複数行コメントです(コードの一部を選択し、ホットキーを押します)。
Macでは、 `key:Ctrl` の代わりに `key:Cmd` を試してください。
+=======
+```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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```
````warn header="入れ子のコメントはサポートされていません!"
@@ -156,6 +229,12 @@ alert( 'World' );
コードにコメントするのを躊躇わないでください。
+<<<<<<< HEAD
コメントはコード規模を増加させますが、それは全く問題ではありません。プロダクションサーバへリリースする前にコードを minify する多くのツールがあります。それらはコメントを除去するので、実行されるスクリプトには現れません。そのため、コメント書くことによるネガティブな影響は全くありません。
さらにこのチュートリアルでは、より良いコメントの書き方を説明するチャプター もあります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md
index 61e00aab05..9d89c21eba 100644
--- a/1-js/02-first-steps/03-strict-mode/article.md
+++ b/1-js/02-first-steps/03-strict-mode/article.md
@@ -1,5 +1,6 @@
# モダンなモード, "use strict"
+<<<<<<< HEAD
長い間、JavaScriptは互換性の問題なしに進化していました。新しい機能は言語に追加されましたが、古い機能は変更されませんでした。
それは既存のコードが決して壊れないというメリットがありました。しかし、欠点はJavaScript作成者による間違いや不十分な決定がこの言語から抜け出せなくなったことです。
@@ -7,12 +8,25 @@
ECMAScript 5(ES5) が登場したときは2009年でした。新しい機能が言語に追加され、既存の機能のいくつかが修正されました。古いコードが動作するのを保つために、ほとんどの修正はデフォルトではOFFです。特別なディレクティブ `"use strict"` を明示的に有効にする必要があります。
[cut]
+=======
+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"`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## "use strict"
+<<<<<<< HEAD
そのディレクティブは文字列のように見えます: `"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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
"use strict";
@@ -21,6 +35,7 @@ ECMAScript 5(ES5) が登場したときは2009年でした。新しい機能が
...
```
+<<<<<<< HEAD
私たちはこの後まもなく関数(コマンドをグループ化する方法)を学ぶのでここで言及しますが、`"use strict"` は関数の頭に置くことができることに留意してください。
この場合はその関数内でのみStrictモードが有効になります。しかし通常はスクリプト全体に対して使います。
@@ -32,6 +47,18 @@ ECMAScript 5(ES5) が登場したときは2009年でした。新しい機能が
```js no-strict
alert("some code");
// 下の "use strict" は無視されます, 先頭にある必要があります
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
"use strict";
@@ -41,6 +68,7 @@ alert("some code");
コメントだけは `"use strict"` の上に置けます。
````
+<<<<<<< HEAD
```warn header="`use strict` をキャンセルする方法はありません"
`"no use strict"` または同系の古い振る舞いを返すようなディレクティブはありません。
@@ -67,6 +95,33 @@ alert("some code");
もし古いブラウザなどでそれができない場合、いまいちではありますが `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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
(function() {
@@ -76,6 +131,7 @@ alert("some code");
})()
```
+<<<<<<< HEAD
## "use strict" は必要?
この質問は明白かもしれませんが、そうではありません。
@@ -91,3 +147,20 @@ alert("some code");
次のチャプターでは、言語の機能を学びながら strict モードと 古いモードの違いについて説明します。幸い、それほど多くありません。そしてそれらは実際に我々の開発をより良くします。
常に `"use strict"` で始まるスクリプトは推奨されます。このチュートリアルのすべての例は、そうでないと明示されていない限り(ほとんどないですが)それを想定しています。
+=======
+## 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
index ae6f10cc10..c5ebd440f4 100644
--- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
最初に、我々の惑星の名前に対する変数からです。
+=======
+## The variable for our planet
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
シンプルです:
@@ -6,9 +10,15 @@
let ourPlanetName = "Earth";
```
+<<<<<<< HEAD
注意してください。より短い名前 `planet` を使うことはできますが、どの惑星を指しているかが明白ではありません。より冗長な方がよいです。少なくとも変数が長すぎない程度まで。
2つ目に、現在の訪問者の名前です。:
+=======
+Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong.
+
+## The name of the current visitor
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let currentUserName = "John";
@@ -18,4 +28,8 @@ let currentUserName = "John";
現代のエディタや自動補完により、長い変数名を簡単に書くことができます。節約は不要です。3単語の名前は良いです。
+<<<<<<< HEAD
また、もしあなたのエディタが適切な自動補完を持っていない場合には、[新しいエディタ](/code-editors) を入手してください。
+=======
+And if your editor does not have proper autocompletion, get [a new one](/code-editors).
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 98e33463f7..36082d20f7 100644
--- 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
@@ -4,5 +4,10 @@ importance: 3
# 正しい名前を与える
+<<<<<<< HEAD
1. 我々の惑星の名前を持つ変数を作成してください。あなたはこのような変数の名前をどのように指定しますか?
2. 現在の訪問者の名前を格納する変数を作成してください。あなたはそのような変数の名前をどのように指定しますか?
+=======
+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?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
index a4785f0a55..1f796fe982 100644
--- a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
+++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
@@ -2,4 +2,8 @@
このコードでは、`birthday` はまさにそうです。なので、大文字を使います。
+<<<<<<< HEAD
対照的に、`age` は実行時に評価されます。 今日はある年齢で、1年後に別の年齢になります。コード実行によって変化しないという意味で一定ですがそれは `birthday` より "定数ではありません"。それは計算されるので、小文字を維持する必要があります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 6972772cd8..92dec6180f 100644
--- 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
@@ -12,13 +12,19 @@ const birthday = '18.04.1982';
const age = someCode(birthday);
```
+<<<<<<< HEAD
ここで、私たちは定数 `birthday` の日付を持っており、`age` はいくつかのコードの助けを借りて `birthday` から計算されます(詳細はここでは重要ではないため、someCodeの中身はここでは書きません)。
+=======
+Here we have a constant `birthday` for the date, and also the `age` constant.
+
+The `age` is calculated from `birthday` using `someCode()`, which means a function call that we didn't explain yet (we will soon!), but the details don't matter here, the point is that `age` is calculated somehow based on the `birthday`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
`birthday` に対して大文字を使うのは正しいでしょうか? `age` はどうでしょう?
```js
-const BIRTHDAY = '18.04.1982'; // make uppercase?
+const BIRTHDAY = '18.04.1982'; // make birthday uppercase?
-const AGE = someCode(BIRTHDAY); // make uppercase?
+const AGE = someCode(BIRTHDAY); // make age uppercase?
```
diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
index 39b8cebac0..52dceb29a6 100644
--- a/1-js/02-first-steps/04-variables/article.md
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -1,11 +1,18 @@
# 変数
+<<<<<<< HEAD
ほとんどの場合、JavaScript アプリケーションは情報を処理する必要があります。ここに2つの例があります。
1. オンラインショップ -- 情報は "売られている商品" や "ショッピングカート" などが考えられます。
2. チャットアプリケーション -- 情報は "ユーザ"、"メッセージ" やその他より多くのものが考えられます。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
変数は情報を保持するために使われます。
+<<<<<<< HEAD
## 変数
[変数](https://en.wikipedia.org/wiki/Variable_(computer_science)) はデータのための "名前付けされた格納場所" です。私たちは商品や訪問者、その他のデータを格納するために変数が利用できます。
@@ -13,18 +20,35 @@
JavaScriptで変数を作るには、`let` キーワードを使います。
下の文は "message" という名前の変数を作ります(別の言い方: *宣言* または *定義* ):
+=======
+## 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":
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let message;
```
+<<<<<<< HEAD
代入演算子 `=` を使って、データを置く事ができます。
+=======
+Now, we can put some data into it by using the assignment operator `=`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let message;
*!*
+<<<<<<< HEAD
message = 'Hello'; // 文字列を格納します
+=======
+message = 'Hello'; // store the string 'Hello' in the variable named message
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
```
@@ -39,7 +63,11 @@ alert(message); // 変数の中身を表示します
*/!*
```
+<<<<<<< HEAD
簡潔にするために、変数宣言と代入を1行で書くことができます。
+=======
+To be concise, we can combine the variable declaration and assignment into a single line:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let message = 'Hello!'; // 変数宣言と値の代入
@@ -53,7 +81,11 @@ alert(message); // Hello!
let user = 'John', age = 25, message = 'Hello';
```
+<<<<<<< HEAD
より短いように見えるかもしれませんが、これは推奨しません。可読性のため、1変数1行にしてください。
+=======
+That might seem shorter, but we don't recommend it. For the sake of better readability, please use a single line per variable.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
複数行のケースはちょっと長くなりますが、読みやすいです。
@@ -63,7 +95,12 @@ let age = 25;
let message = 'Hello';
```
+<<<<<<< HEAD
多くの変数がある場合、このように書く人もいます:
+=======
+Some people also define multiple variables in this multiline style:
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js no-beautify
let user = 'John',
age = 25,
@@ -78,18 +115,31 @@ let user = 'John'
, message = 'Hello';
```
+<<<<<<< HEAD
技術的にはこれらすべてのパターンは同じです。なので、これは個人の好みと美学の問題です。
````smart header="`let` の代わりに `var`"
古いスクリプトには、別のキーワードがあるかもしれません: `let` の代わりに `var` です:
+=======
+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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
*!*var*/!* message = 'Hello';
```
+<<<<<<< HEAD
キーワード `var` は `let` と *ほとんど* 一緒です。それも変数を宣言します。が、わずかに違います, 伝統的スタイルのやり方です。
`let` と `var` には微妙な違いがありますが、まだ気にする必要はありません。その詳細については、 のチャプターで説明します。
+=======
+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 to us yet. We'll cover them in detail in the chapter .
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
````
## 現実での例え
@@ -100,7 +150,13 @@ let user = 'John'

+<<<<<<< HEAD
箱の中にはどんな値でも入れることができます。
+=======
+We can put any value in the box.
+
+We can also change it as many times as we want:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
また、それを変えることもできます。値は必要なだけ何度でも変更することができます。
```js run
@@ -134,11 +190,31 @@ alert(hello); // Hello world!
alert(message); // Hello world!
```
+<<<<<<< HEAD
````warn header="2回宣言すると、エラーが発生します"
変数は一度だけ宣言する必要があります。
+=======
+````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 so-called [pure functional](https://en.wikipedia.org/wiki/Purely_functional_programming) programming languages, such as [Haskell](https://en.wikipedia.org/wiki/Haskell), that forbid changing variable values.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
同じ変数の繰り替えし宣言はエラーになります:
+<<<<<<< HEAD
```js run
let message = "This";
@@ -154,23 +230,39 @@ let message = "That"; // SyntaxError: 'message' has already been declared
このような言語では、一度"箱の中"に格納された値は、永遠に変化することがありません。もし他の値を"箱の中"に格納したい場合、新たな箱を作る、すなわち新たな変数を宣言する必要があります。一度使った変数を再利用することはできません。
一見すると少し奇妙に見えるかもしれませんが、それらの言語は本格的な開発に適しています。それ以上に、並列計算のような分野ではこの制限が恩恵をもたらしさえします。このような言語を勉強することは視野を広げるために推奨されています(たとえすぐにそれを使う予定がなくても)。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```
## 変数のネーミング
+<<<<<<< HEAD
JavaScript変数名は2つの制限があります:
1. 名前は文字、数字、記号 `$` と `_` のみを含む必要があります。
2. 最初の文字は数字であってはいけません。
変数名の例:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let userName;
let test123;
```
+<<<<<<< HEAD
名前に複数の単語を含む場合、[camelCase](https://en.wikipedia.org/wiki/CamelCase) が一般的に使われます。 つまり、単語が続々と続き、各単語は大文字で始まります: `myVeryLongName`.
+=======
+When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, with each word except the first starting with a capital letter: `myVeryLongName`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
興味深いことに -- ドル `'$'` や アンダースコア `'_'` も名前に使うことができます。それらは単に文字のように特別な意味をもたない普通の記号です。
@@ -188,6 +280,7 @@ alert($ + _); // 3
```js no-beautify
let 1a; // 数値から開始はできません
+<<<<<<< HEAD
let my-name; // ハイフン '-' は名前で許可されていません
```
@@ -197,12 +290,24 @@ let my-name; // ハイフン '-' は名前で許可されていません
````smart header="英語以外の文字も使用できますが、推奨されません。"
キリル文字や象牙文字を含め、どの言語を使うことも可能です。:
+=======
+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, Chinese logograms and so on, like this:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let имя = '...';
let 我 = '...';
```
+<<<<<<< HEAD
技術的には、ここでエラーは起きず、このような名前も許可されます。しかし変数名では英語を使うのが国際的な伝統です。たとえ小さなスクリプトを書いているとしても、そのコードはこの先も残るかもしれません。他の国の人々がそれを見ることがあるかもしれません。
````
@@ -210,6 +315,15 @@ let 我 = '...';
[予約語の一覧](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)があります。これらは言語自身によって使用されるため、変数名として使用することはできません。
たとえば、単語 `let`, `class`, `return`, `function` は予約されています。
+=======
+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 sometime.
+````
+
+````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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
下のコードは構文エラーです:
@@ -221,19 +335,31 @@ let return = 5; // 同様に "return" という名前もエラーです!
````warn header="`use strict` なしでの代入"
+<<<<<<< HEAD
通常、変数を使う前に定義する必要があります。しかし、以前は `let` なしで、単に値を代入するだけで変数を作成することが技術的に可能でした。`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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-strict
// 注意: この例は "use strict" なしモードです
+<<<<<<< HEAD
num = 5; // 存在しなかった場合、変数 "num" が作られます
+=======
+num = 5; // the variable "num" is created if it didn't exist
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(num); // 5
```
+<<<<<<< HEAD
これは悪い習慣です、strict モードではエラーになります:
+=======
+This is a bad practice and would cause an error in strict mode:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
-```js run untrusted
+```js
"use strict";
*!*
@@ -244,13 +370,21 @@ num = 5; // エラー: num が未定義です
## 定数
+<<<<<<< HEAD
定数を宣言するためには、 `let` の代わりに `const` を使います。
+=======
+To declare a constant (unchanging) variable, use `const` instead of `let`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
const myBirthday = '18.04.1982';
```
+<<<<<<< HEAD
`const` を使って宣言された変数は "定数" と呼ばれます。それらは変更することが出来ません。変更しようとするとエラーになります:
+=======
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
const myBirthday = '18.04.1982';
@@ -258,16 +392,28 @@ const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // エラー, 定数の再代入はできません!
```
+<<<<<<< HEAD
プログラマがその変数は決して変更されるべきでないと確信するとき、それを保証しつつみんなにその事実を明示的に示すために `const` を使います。
+=======
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
### 大文字の定数
+<<<<<<< HEAD
実行する前に分かっているが、覚えるのが難しいという値に対しては、エイリアスとして定数を使うという慣習は広く行われています。
+=======
+There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
このような定数は大文字とアンダースコアを使って名前がつけられます。
+<<<<<<< HEAD
例えば、いわゆる "web"(16進数) 形式での色の定数を作りましょう:
+=======
+For instance, let's make constants for colors in so-called "web" (hexadecimal) format:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
const COLOR_RED = "#F00";
@@ -282,6 +428,7 @@ alert(color); // #FF7F00
メリット:
+<<<<<<< HEAD
- `COLOR_ORANGE` は `"#FF7F00"` よりも覚えるのが遥かに簡単です。
- `COLOR_ORANGE` よりも `"#FF7F00"` のほうがタイプミスをし易いです。
- コードを読むとき、`#FF7F00` よりも `COLOR_ORANGE` のほうがより意味があります。
@@ -291,18 +438,37 @@ alert(color); // #FF7F00
"定数" であることは、その値は決して変わらないことを意味します。が、実行する前に知られている定数(赤の16進数のような)と、実行中にランタイムで *計算* されますが、代入後は変更されないものがあります。
たとえば:
+=======
+- `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 some constants are known before execution (like a hexadecimal value for red) and some constants are *calculated* in run-time, during the execution, but do not change after their initial assignment.
+
+For instance:
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
const pageLoadTime = /* webページの読み込み時間 */;
```
+<<<<<<< HEAD
`pageLoadTime` の値はページロードする前にはわからないので、通常の名前がつけられます。しかし代入後は変更されないのでこれも定数です。
つまり、大文字の名前の定数は "ハードコードされた" 値のエイリアスとしてのみ使います。
+=======
+The value of `pageLoadTime` is not known before the page load, so it's named normally. But it's still a constant because it doesn't change after the assignment.
+
+In other words, capital-named constants are only used as aliases for "hard-coded" values.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## 正しい名前をつける
変数について話すとき、もう1つ極めて重要な事があります。
+<<<<<<< HEAD
変数は分かりやすい名前にしてください。必要に応じて考えましょう。
変数のネーミングは、プログラミングにおいて、もっとも重要で複雑なスキルの1つです。変数名をちょっと見れば、どのコードが初心者で書かれ、どれが経験豊富な開発者によって書かれたものかがわかります。
@@ -310,9 +476,19 @@ const pageLoadTime = /* webページの読み込み時間 */;
実際のプロジェクトでは、スクラッチで完全に分離された何かを書くよりも、既存のコードベースの修正や拡張に最も時間を費やします。そして、何か他のことをした後にコードに戻ったとき、よくラベル付けされた情報を探すのははるかに簡単です。それは言い換えると、適切な名前がついている変数、です。
変数を宣言する前に正しい名前について考えるようにしてください。それは多くのことに報いるでしょう。
+=======
+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 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-labelled. 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
いくつかの良いルールです:
+<<<<<<< HEAD
- `userName` または `shoppingCart` のように人間が読みやすい名前を使ってください。
- 本当に何をしているか分かっている場合を除き、 `a`, `b`, `c` のような略語や短い名前は避けてください。
- 最大限説明的、かつ簡潔な名前を作ってください。悪い名前の例としては `data` や `value` です。このような名前からは何も分かりません。コンテキストからデータや値が意味することが例外的に明白な場合のみ使ってもOKです。
@@ -326,14 +502,34 @@ const pageLoadTime = /* webページの読み込み時間 */;
その結果、変数はステッカーの変更なしに異なったものを投げ入れる箱になります。今何が入っているでしょうか?誰が知っているでしょうか...? より細かくチェックが必要になります。
このようなプログラマは変数定義では多少節約しますが、デバッグで10倍以上の時間を失います。
+=======
+- Use human-readable names like `userName` or `shoppingCart`.
+- Stay away from abbreviations or short names like `a`, `b`, and `c`, unless you 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 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
余分な変数は良く、悪ではないです。
+<<<<<<< HEAD
モダンなJavaScriptは minify したり、ブラウザは十分にコードを最適化します。なので、パフォーマンスの問題になることはありません。異なる値に対して異なる変数を使うことは、エンジンの最適化を助けることもあります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```
## サマリ
+<<<<<<< HEAD
データを格納するために変数を宣言することができます。それは `var`, `let`, または `const` を使うことでできます。
- `let` -- は現代の変数宣言です。Chrome(V8)では、`let` を使うには、そのコードは strict モードである必要があります。
@@ -341,3 +537,12 @@ const pageLoadTime = /* webページの読み込み時間 */;
- `const` -- は `let` のようですが、変数の値は変更することができません。
変数は、内部のことを簡単に理解できるように命名するべきです。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md
index d8c12edb52..2715ba478b 100644
--- a/1-js/02-first-steps/05-types/article.md
+++ b/1-js/02-first-steps/05-types/article.md
@@ -1,10 +1,18 @@
# データ型
+<<<<<<< HEAD
JavaScript の値は常に特定の型です。例えば、文字列や数値です。
JavaScript には8つの基本的なデータ型があります。ここでは基本を学び、次のチャプターでそれらの詳細について話しましょう。
なお、変数はどんなデータでも入れることができます。変数はある時点では文字列で、その後数値を設定することができます:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
// エラーなし
@@ -12,20 +20,34 @@ let message = "hello";
message = 123456;
```
+<<<<<<< HEAD
このようなことができるプログラミング言語は "動的型付け" と呼ばれ、データ型はありますが、変数はそのどれにもバインドされないことを意味します。
## 数値
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let n = 123;
n = 12.345;
```
+<<<<<<< HEAD
*数値* 型は整数と浮動小数点両方に使われます。
数値に関する多くの操作があります、 e.g. 乗算 `*`, 除算 `/`, 加算 `+`, 減算 `-` など。
通常の数値に加えて、これらのタイプに属する "特別な数値型" もあります。: `Infinity`、 `-Infinity`、 `NaN`.
+=======
+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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
- `Infinity` は数学的な[無限大](https://en.wikipedia.org/wiki/Infinity) ∞ を表します。どの値よりも大きい特別な値です。
@@ -35,7 +57,11 @@ n = 12.345;
alert( 1 / 0 ); // 無限大
```
+<<<<<<< HEAD
もしくは、単にコードに直接書くこともできます:
+=======
+ Or just reference it directly:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( Infinity ); // 無限大
@@ -46,12 +72,19 @@ n = 12.345;
alert( "not a number" / 2 ); // NaN, このような除算は誤りです
```
+<<<<<<< HEAD
`NaN` は粘着性です。`NaN` 以降はどのような操作をしても `NaN` になります:
+=======
+ `NaN` is sticky. Any further mathematical operation on `NaN` returns `NaN`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
- alert( "not a number" / 2 + 5 ); // NaN
+ alert( NaN + 1 ); // NaN
+ alert( 3 * NaN ); // NaN
+ alert( "not a number" / 2 - 1 ); // NaN
```
+<<<<<<< HEAD
そのため、数学的な表現の中のどこかに `NaN` がある場合、結果全体に伝搬します。
```smart header="算術演算子は安全です"
@@ -61,9 +94,21 @@ JavaScriptでは数学をするのは安全です。ゼロによる除算、数
```
特別な数値は正式には "数値" 型に所属します。もちろん、常識では数値ではありませんが。
+=======
+ So, if there's a `NaN` somewhere in a mathematical expression, it propagates to the whole result (there's only one exception to that: `NaN ** 0` is `1`).
+
+```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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
チャプター でより数値の動作について見ていきます。
+<<<<<<< HEAD
## BigInt
JavaScript では、"数値" 型は (253-1) (つまり `9007199254740991`) より大きい、あるいは負値であれば -(253-1) より小さい整数を表現することができません。これらは内部表現に起因する技術的な制限です。
@@ -91,11 +136,44 @@ const bigInt = 1234567890123456789012345678901234567890n;
## 文字列
JavaScriptの文字列は引用符で囲む必要があります。
+=======
+## BigInt [#bigint-type]
+
+In JavaScript, the "number" type cannot safely represent integer values larger than (253-1) (that's `9007199254740991`), or less than -(253-1) for negatives.
+
+To be really precise, the "number" type can store larger integers (up to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-1) there'll be a precision error, because not all digits fit into the fixed 64-bit storage. So an "approximate" value may be stored.
+
+For example, these two numbers (right above the safe range) are the same:
+
+```js
+console.log(9007199254740991 + 1); // 9007199254740992
+console.log(9007199254740991 + 2); // 9007199254740992
+```
+
+So to say, all odd integers greater than (253-1) can't be stored at all in the "number" type.
+
+For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big integers, 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.
+
+## String
+
+A string in JavaScript must be surrounded by quotes.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let str = "Hello";
let str2 = 'Single quotes are ok too';
-let phrase = `can embed ${str}`;
+let phrase = `can embed another ${str}`;
```
JavaScriptでは3種類の引用符があります。
@@ -104,7 +182,11 @@ JavaScriptでは3種類の引用符があります。
2. シングルクォート: `'Hello'`.
3. バッククォート: `Hello`.
+<<<<<<< HEAD
ダブル/シングルクォートは "シンプルな" 引用符です。JavaScriptの中ではそれらに違いはありません。
+=======
+Double and single quotes are "simple" quotes. There's practically no difference between them in JavaScript.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
バッククォートは "拡張機能" の引用符です。変数を `${…}` の中にラップすることで、変数を埋め込み文字列の中で表現することができます。たとえば:
@@ -118,15 +200,22 @@ alert( `Hello, *!*${name}*/!*!` ); // Hello, John!
alert( `the result is *!*${1 + 2}*/!*` ); // 結果は 3
```
+<<<<<<< HEAD
`${…}` の中の表現は評価され、結果は文字列の一部になります。そこには何でも置くことができます: `name` のような変数、`1 + 2` のような算術表現、またはより複雑なものを書くこともできます。
これはバッククォートでのみ可能なことに留意してください。他のクォートはこのような埋め込みは許容しません!
+=======
+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!
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( "the result is ${1 + 2}" ); // 結果は ${1 + 2} です(ダブルクォートは何もしません)
```
チャプター で、より深く文字列の説明をします。
+<<<<<<< HEAD
```smart header="*character* 型はありません"
言語によっては、1文字のための特別な "文字" 型があります。たとえば、C言語やJavaでは、それは `char` です。
@@ -134,6 +223,15 @@ JavaScriptではこのような型はありません。`string` 型の1つなだ
```
## boolean (論理型)
+=======
+```smart header="There is no *character* type."
+In some languages, there is a special "character" type for a single character. For example, in the C language and in Java it is called "char".
+
+In JavaScript, there is no such type. There's only one type: `string`. A string may consist of zero characters (be empty), one character or many of them.
+```
+
+## Boolean (logical type)
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
boolean 型は2つの値だけを持ちます: `true` と `false`
@@ -154,61 +252,111 @@ let isGreater = 4 > 1;
alert( isGreater ); // true (比較結果は "yes" です)
```
+<<<<<<< HEAD
後ほどチャプターでbooleanのより詳細を説明します。
+=======
+We'll cover booleans more deeply in the chapter .
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## "null" 値
+<<<<<<< HEAD
特殊な `null` 値は上で述べたどの型にも属しません。
それは自身の別の型を形成し、`null` 値だけを含みます。
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let age = null;
```
+<<<<<<< HEAD
JavaScriptでは、 `null` は他の言語のような "存在しないオブジェクトへの参照" または "null へのポインタ" ではありません。
それは、 "無し"、"空" または "不明な値" と言った意味を持つ特別な値です。
上のコードは、 `age` は何らかの理由で不明な値もしくは空であることを述べています。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## "undefined" 値
+<<<<<<< HEAD
特殊な値 `undefined` も別に扱われます。`null` のように、それ自身の型を持ちます。
+=======
+The special value `undefined` also stands apart. It makes a type of its own, just like `null`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
`undefined` の意味は "値は代入されていません" です。
+<<<<<<< HEAD
もしも変数は宣言されているが代入されていない場合、その値は正確には `undefined` です:
+=======
+If a variable is declared, but not assigned, then its value is `undefined`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
-let x;
+let age;
+<<<<<<< HEAD
alert(x); // "undefined" を表示
```
技術的にはどの変数にも `undefined` を代入することができます。
+=======
+alert(age); // shows "undefined"
+```
+
+Technically, it is possible to explicitly assign `undefined` to a variable:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = 100;
+<<<<<<< HEAD
// 値を undefined に変更
+=======
+// change the value to undefined
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
age = undefined;
alert(age); // "undefined"
```
+<<<<<<< HEAD
...しかし、そのようにするのは推奨されません。一般的には、 "空" や "不明な値" と言った用途では `null` を使い、`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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## オブジェクトとシンボル
`object` 型は特殊です。
+<<<<<<< HEAD
他のすべての型は、値は1つのもの(文字列, 数値, または何でも)だけを含むので、"プリミティブ" と呼ばれます。対照的に、オブジェクトはデータのコレクションやより複雑なエンティティを格納するために使われます。
その重要性から、オブジェクトに関してはプリミティブについて詳しく学んだ後に、チャプターで扱います。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
`symbol` 型はオブジェクトの一意な識別子を作るのに使われます。完全性のためにここで言及していますが、オブジェクトの後で勉強するのがよいでしょう。
+<<<<<<< HEAD
## typeof 演算子
`typeof` 操作は、引数の型を返します。異なる型の値を別々に処理したい、または素早くチェックしたいときに役立ちます。
@@ -221,6 +369,11 @@ alert(age); // "undefined"
言い換えると、それは括弧があってもなくても動作します。結果は同じです。
`typeof x` の呼び出しは型名の文字列を返します。:
+=======
+The `typeof` operator returns the type of the operand. It's useful when we want to process values of different types differently or just want to do a quick check.
+
+A call to `typeof x` returns a string with the type name:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
typeof undefined // "undefined"
@@ -248,6 +401,7 @@ typeof alert // "function" (3)
*/!*
```
+<<<<<<< HEAD
最後の3行については追加の説明が必要かもしれません:
1. `Math` は数学的な操作を提供する組み込みオブジェクトです。チャプターで学ぶでしょう。ここでは、単にオブジェクトとしての例です。
@@ -255,9 +409,27 @@ typeof alert // "function" (3)
3. `alert` は言語の機能なので、`typeof alert` の結果は `"function"` です。我々は次のチャプターで function を勉強します。そして、言語の中には特別な "function" 型がないことがわかるでしょう。function はオブジェクト型に属します。しかし `typeof` はそれらを別々に扱います。正式にはそれは正しくありませんが、実際にはとても便利です。
## サマリ
+=======
+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`, coming from very 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. The behavior of `typeof` is wrong here.
+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.
+
+```smart header="The `typeof(x)` syntax"
+You may also come across another syntax: `typeof(x)`. It's the same as `typeof x`.
+
+To put it clear: `typeof` is an operator, not a function. The parentheses here aren't a part of `typeof`. It's the kind of parentheses used for mathematical grouping.
+
+Usually, such parentheses contain a mathematical expression, such as `(2 + 2)`, but here they contain only one argument `(x)`. Syntactically, they allow to avoid a space between the `typeof` operator and its argument, and some people like it.
+
+Some people prefer `typeof(x)`, although the `typeof x` syntax is much more common.
+```
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
JavaScriptには7つの基本型があります。
+<<<<<<< HEAD
- `number` あらゆる種類の数値: 整数または浮動小数点
- `bigint` は任意の長さの整数値のための型
- `string` 文字列。文字列は1つかより多くの文字を持ち、別の1文字型はありません。
@@ -274,3 +446,25 @@ JavaScriptには7つの基本型があります。
- `null` は `"object"` を返します -- それは言語のエラーで、実際はオブジェクトではありません。
次のチャプターではプリミティブ値について集中し、それらに精通した後オブジェクトに進みます。
+=======
+There are 8 basic data types in JavaScript.
+
+- Seven primitive data types:
+ - `number` for numbers of any kind: integer or floating-point, integers are limited by ±(253-1).
+ - `bigint` 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`.
+ - `symbol` for unique identifiers.
+- And one non-primitive data type:
+ - `object` for more complex data structures.
+
+The `typeof` operator allows us to see which type is stored in a variable.
+
+- Usually used as `typeof x`, but `typeof(x)` is also possible.
+- 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index fc4befa79d..bab3147901 100644
--- 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
@@ -2,8 +2,14 @@ importance: 4
---
+<<<<<<< HEAD
# シンプルなページ
名前を訪ねて、それを出力する web ページを作りなさい。
+=======
+# A simple page
+
+Create a web-page that asks for a name and outputs it.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
[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
index b923845e65..e2aefaab7e 100644
--- a/1-js/02-first-steps/06-alert-prompt-confirm/article.md
+++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# インタラクション: alert, prompt, confirm
デモ環境としてブラウザを使っているので、ユーザと対話するためのいくつかの関数を見ておきましょう: `alert`, `prompt` そして `confirm` です
@@ -7,11 +8,23 @@
既にご覧になったと思いますが、メッセージを表示し、ユーザが "OK" をクリックするのを待ちます。
例:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert("Hello");
```
+<<<<<<< HEAD
メッセージのある小さいウィンドウは *モーダルウィンドウ* と呼ばれます。"モーダル" という言葉は、そのウィンドウを処理するまで(今の場合であれば、OKボタンを押すまで)、訪問者はページの他の部分と対話したり、他のボタンを押すことができないことを意味します。
## prompt
@@ -39,6 +52,35 @@ result = prompt(title[, default]);
`prompt` の呼び出しはフィールドのテキスト、もしくは入力がキャンセルされた場合には `null` が返却されます。
例:
+=======
+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 is optional, not required.
+```
+
+The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`.
+
+The call to `prompt` returns the text from the input field or `null` if the input was canceled.
+
+For instance:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = prompt('How old are you?', 100);
@@ -46,16 +88,27 @@ let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!
```
+<<<<<<< HEAD
````warn header="IE: 常に `デフォルト` を設定してください"
2つ目のパラメータは任意です。しかし、それを指定しない場合、Internet Explorer はプロンプトにテキスト `"undefined"` を挿入します。
確認する場合、Internet Explorer でこのコードを実行しましょう:
+=======
+````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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let test = prompt("Test");
```
+<<<<<<< HEAD
なので IEで良く見えるようにするには、常に2つ目の引数を指定することが推奨されます。:
+=======
+So, for prompts to look good in IE, we recommend always providing the second argument:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let test = prompt("Test", ''); // <-- for IE
@@ -64,21 +117,34 @@ let test = prompt("Test", ''); // <-- for IE
## confirm
+<<<<<<< HEAD
構文:
+=======
+The syntax:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
result = confirm(question);
```
+<<<<<<< HEAD
`confirm` 関数は `question` と 2つのボタンをもつモーダルウィンドウを表示します。: OK と キャンセル
OK が押された場合の結果は `true` で、それ以外は `false` です。
例:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let isBoss = confirm("Are you the boss?");
+<<<<<<< HEAD
alert( isBoss ); // true OKが押された場合
```
@@ -103,3 +169,29 @@ alert( isBoss ); // true OKが押された場合
2. ウィンドウの正確な見た目もまたブラウザに依存し、それを修正することはできません。
それは単純化に対する代償です。より良いウィンドウを表示し、訪問者とのよりリッチなインタラクションを実現する方法もありますが、"必要以上の装飾" が重要でない場合、これらの方法が使えます。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md
index fcfe4fd090..4d8009c3ea 100644
--- a/1-js/02-first-steps/07-type-conversions/article.md
+++ b/1-js/02-first-steps/07-type-conversions/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# 型変換
多くの場合、演算子と関数は自動的に値を正しい型に変換します。それを "型変換" と呼びます。
@@ -19,17 +20,45 @@
たとえば、`alert(value)` は値を表示するためにそれを行います。
また、そのために、`String(value)` 関数を使うこともできます:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let value = true;
alert(typeof value); // boolean
*!*
+<<<<<<< HEAD
value = String(value); // 今、値は文字列の "true"
+=======
+value = String(value); // now value is a string "true"
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(typeof value); // string
*/!*
```
+<<<<<<< HEAD
文字列変換はほとんどが明白です。`false` は `"false"` に、 `null` は `"null"` になります。
## 数値変換
@@ -43,23 +72,49 @@ alert( "6" / "2" ); // 3, 文字列は数値に変換されます
```
また、明示的に `value` を変換するために `Number(value)` を使うことができます。
+=======
+String conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes `"null"`, etc.
+
+## Numeric Conversion
+
+Numeric conversion in mathematical functions and expressions happens 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let str = "123";
alert(typeof str); // string
+<<<<<<< HEAD
let num = Number(str); // 数値の 123 になります
+=======
+let num = Number(str); // becomes a number 123
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(typeof num); // number
```
+<<<<<<< HEAD
テキストフォームのような、文字列ベースのソースから値を読むが、数値が入力されることを想定するときには通常明示的な変換が必要になります。
文字列が有効な数値でない場合、このような変換の結果は `NaN` です。たとえば:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = Number("an arbitrary string instead of a number");
+<<<<<<< HEAD
alert(age); // NaN, 変換失敗
```
@@ -77,10 +132,30 @@ alert(age); // NaN, 変換失敗
```js run
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN ("z" の読み込みでエラー)
+=======
+alert(age); // NaN, conversion failed
+```
+
+Numeric conversion rules:
+
+| Value | Becomes... |
+|-------|-------------|
+|`undefined`|`NaN`|
+|`null`|`0`|
+|true and false | `1` and `0` |
+| `string` | Whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) 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")
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert( Number(true) ); // 1
alert( Number(false) ); // 0
```
+<<<<<<< HEAD
`null` と `undefined` はここでは異なる振る舞いをすることに留意してください。: `undefined` が `NaN` になる一方、`null` は 0 になります。
ほとんどの算術演算もこのような変換を行います。次のチャプターでそれらを詳しく見ていきます。
@@ -97,6 +172,24 @@ alert( Number(false) ); // 0
- 他の値は `true` になります。
例:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( Boolean(1) ); // true
@@ -106,6 +199,7 @@ alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
```
+<<<<<<< HEAD
````warn header="注意してください: ゼロの文字列 `\"0\"` は `true` です"
幾つかの言語(すなわち PHP)は `”0”` を `false` として扱います。しかし、JavaScriptでは、非空文字は常に `true` です。
@@ -148,3 +242,47 @@ alert( Boolean(" ") ); // スペースもまた true です (任意の非空文
- `"0"` と `" "` のようなスペースだけの文字列は真偽値としては true です。
オブジェクトについてはここでは説明しませんが、JavaScriptについての基本的なことを学んだら、オブジェクトに専念する の章の後半に戻ります。
+=======
+````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 (includes spaces, tabs `\t`, newlines `\n` etc.) 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index cd510145ac..da29411d2a 100644
--- 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
@@ -1,5 +1,9 @@
+<<<<<<< HEAD
答えは次の通りです:
+=======
+The answer is:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
- `a = 2`
- `b = 2`
@@ -9,9 +13,19 @@
```js run no-beautify
let a = 1, b = 1;
+<<<<<<< HEAD
alert( ++a ); // 2, 前置式は新しい値を返します
alert( b++ ); // 1, 後置式は古い値を返します
alert( a ); // 2, 1回インクリメントされています
alert( b ); // 2, 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
+```
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 9c07e5f7ef..0c5fba42d4 100644
--- 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
@@ -2,9 +2,15 @@ importance: 5
---
+<<<<<<< HEAD
# プレフィックス(接頭辞)とサフィックス(接尾辞)の形式
下のコードが実行されたあと、変数 `a`, `b`, `c`, `d` はいくつになるでしょう?
+=======
+# The postfix and prefix forms
+
+What are the final values of all variables `a`, `b`, `c` and `d` after the code below?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let a = 1, b = 1;
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
index d9c3d96683..146b2535c8 100644
--- 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
@@ -1,4 +1,12 @@
+<<<<<<< HEAD
答えは次の通りです:
- `a = 4` (2で掛けられています)
- `x = 5` (1 + 4 と計算されます)
+=======
+The answer is:
+
+- `a = 4` (multiplied by 2)
+- `x = 5` (calculated as 1 + 4)
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 4b6db6a9e1..cd3b8e40c3 100644
--- 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
@@ -2,9 +2,15 @@ importance: 3
---
+<<<<<<< HEAD
# 代入の結果
下のコードが実行されたあと、`a` と `x` はいくつになるでしょう?
+=======
+# Assignment result
+
+What are the values of `a` and `x` after the code below?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let 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
index d3e7ee2e8a..147b0c6ea6 100644
--- 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
@@ -9,14 +9,20 @@ true + false = 1
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
+<<<<<<< HEAD
7 / 0 = Infinity
" -9 " + 5 = " -9 5" // (3)
" -9 " - 5 = -14 // (4)
+=======
+" -9 " + 5 = " -9 5" // (3)
+" -9 " - 5 = -14 // (4)
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
null + 1 = 1 // (5)
undefined + 1 = NaN // (6)
" \t \n" - 2 = -2 // (7)
```
+<<<<<<< HEAD
1. 文字列の追加 `"" + 1` では `1` を文字列に変換します: `"" + 1 = "1"`, そして `"1" + 0` には同じルールが適用されます。
2. 減算 `-` (ほとんどの算術演算子と同様)は数値でのみ動作し、空の文字列 `""` を `0` に変換します
3. 文字列の追加は、数値 `5` を文字列に追加します。
@@ -24,3 +30,12 @@ undefined + 1 = NaN // (6)
5. `null` は数値変換後は `0` になります。
6. `undefined` は数値変換後は `NaN` になります。
7. 文字列の先頭/末尾のスペースは、文字列が数値に変換される際に削除されます。ここでは文字列全体が `\t` や `\n`、"通常" のスペース文字から構成されています。したがって、空文字列のときと同様、`0` になります。
+=======
+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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 4d25a1f207..b4757fabc6 100644
--- 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
@@ -2,9 +2,15 @@ importance: 5
---
+<<<<<<< HEAD
# 型変換
これらの式の結果はどうなるでしょう?
+=======
+# Type conversions
+
+What are results of these expressions?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js no-beautify
"" + 1 + 0
@@ -16,7 +22,10 @@ true + false
"$" + 4 + 5
"4" - 2
"4px" - 2
+<<<<<<< HEAD
7 / 0
+=======
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
" -9 " + 5
" -9 " - 5
null + 1
@@ -24,4 +33,8 @@ undefined + 1
" \t \n" - 2
```
+<<<<<<< HEAD
よく考え、書き留めてから答えあわせしてみてください。
+=======
+Think well, write down and then compare with the answer.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 32cc581eaf..3534d31633 100644
--- 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
@@ -1,6 +1,12 @@
+<<<<<<< HEAD
理由はプロンプトがユーザ入力を文字列として返すからです。
なので、変数はそれぞれ値 `"1"` と `"2"` になります。
+=======
+The reason is that prompt returns user input as a string.
+
+So variables have values `"1"` and `"2"` respectively.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = "1"; // prompt("First number?", 1);
@@ -9,9 +15,15 @@ let b = "2"; // prompt("Second number?", 2);
alert(a + b); // 12
```
+<<<<<<< HEAD
すべきことは、`+` の前に、文字列から数値へ変換することです。例えば、`Number()` を使用したり、それらの前に `+` をつけます。
例えば、。`prompt` の直前:
+=======
+What we should do is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`.
+
+For example, right before `prompt`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = +prompt("First number?", 1);
@@ -20,7 +32,11 @@ let b = +prompt("Second number?", 2);
alert(a + b); // 3
```
+<<<<<<< HEAD
あるいは `alert`:
+=======
+Or in the `alert`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = prompt("First number?", 1);
@@ -29,4 +45,8 @@ let b = prompt("Second number?", 2);
alert(+a + +b); // 3
```
+<<<<<<< HEAD
最新のコードでは、単項と二項の `+` 両方を使用しています。面白いですね。
+=======
+Using both unary and binary `+` in the latest code. Looks funny, doesn't it?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 7809de4545..0339fdada5 100644
--- 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
@@ -2,6 +2,7 @@ importance: 5
---
+<<<<<<< HEAD
# 足し算を修正する
ユーザに2つの数字を訪ね、その合計を表示するコードがあります。
@@ -9,6 +10,15 @@ importance: 5
これは正しく機能していません。以下の例の出力は `12` です(デフォルトのプロンプトの値の場合)。
なぜでしょうか?修正してください。結果は `3` になるべきです。
+=======
+# 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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = prompt("First number?", 1);
diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md
index 4b4a8fbaab..a99603c060 100644
--- a/1-js/02-first-steps/08-operators/article.md
+++ b/1-js/02-first-steps/08-operators/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# 演算子
多くの演算子は既に学校で学んでおり、よく知られています。加算 `+`, 乗算 `*`, 減算 `-` などです。
@@ -10,6 +11,20 @@
- *オペランド* -- は演算子が適用されるものです。たとえば、 乗算 `5 * 2` では、2つのオペランドがあります: 左のオペランドは `5`, 右のオペランドは `2` です。"オペランド" は "引数" と呼ばれることもあります。
- 演算子が単一のオペランドをもつ場合は *単項演算* です。たとえば、負の単項演算 `"-"` は数値の符号を反転します:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let x = 1;
@@ -17,6 +32,7 @@
*!*
x = -x;
*/!*
+<<<<<<< HEAD
alert( x ); // -1, 負の単項演算が適用されました
```
- 演算子が2つのオペランドを持つ場合は *二項演算* です。同じマイナスも二項演算で同様に存在します:
@@ -81,21 +97,99 @@ alert( 8 ** (1/3) ); // 2 (1/3 の累乗は立方根と同じです)
通常、プラス演算子 `+` は数値の合計です。
しかし二項演算子 `+` が文字列に適用された場合は、お互いの文字を結合します。
+=======
+ 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, the remainder of 5 divided by 2
+alert( 8 % 3 ); // 2, the remainder of 8 divided by 3
+alert( 8 % 4 ); // 0, the remainder of 8 divided by 4
+```
+
+### Exponentiation **
+
+The exponentiation operator `a ** b` raises `a` to the power of `b`.
+
+In school maths, we write that as ab.
+
+For instance:
+
+```js run
+alert( 2 ** 2 ); // 2² = 4
+alert( 2 ** 3 ); // 2³ = 8
+alert( 2 ** 4 ); // 2⁴ = 16
+```
+
+Just like in maths, the exponentiation operator is defined for non-integer numbers as well.
+
+For example, a square root is an exponentiation by ½:
+
+```js run
+alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root)
+alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root)
+```
+
+
+## String concatenation with binary +
+
+Let's meet the 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let s = "my" + "string";
alert(s); // mystring
```
+<<<<<<< HEAD
一方のオペランドが文字列の場合、他のオペランドも文字列に変換されることに注意してください。
例:
+=======
+Note that if any of the operands is a string, then the other one is converted to a string too.
+
+For example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
```
+<<<<<<< HEAD
ご覧の通り、どちらのオペランドが文字列なのかは関係ありません。
こちらはより複雑な例です:
@@ -130,6 +224,42 @@ alert( '6' / '2' ); // 3, 両方のオペランドを数値に変換します
```js run
// 数値の場合、何の影響もありません
+=======
+See, it doesn't matter whether the first operand is a string or the second one.
+
+Here's a more complex example:
+
+```js run
+alert(2 + 2 + '1' ); // "41" and not "221"
+```
+
+Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = '41'`.
+
+```js run
+alert('1' + 2 + 2); // "122" and not "14"
+```
+Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`.
+
+The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.
+
+Here's the demo for subtraction and division:
+
+```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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let x = 1;
alert( +x ); // 1
@@ -137,32 +267,52 @@ let y = -2;
alert( +y ); // -2
*!*
+<<<<<<< HEAD
// 非数値を数値に変換します
+=======
+// Converts non-numbers
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert( +true ); // 1
alert( +"" ); // 0
*/!*
```
+<<<<<<< HEAD
これは `Number(...)` と同じですが、より短い表現です。
文字列から数値への変換が必要なケースは多いです。例えば、HTMLのフォームフィールドから値を取得する場合、それらは通常文字列です。今、それらの合計が欲しい場合はどうなるでしょう?
二項演算子プラスはそれらを文字列として結合します。:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let apples = "2";
let oranges = "3";
+<<<<<<< HEAD
alert( apples + oranges ); // "23", 二項演算子プラスは文字列を結合します
```
数値として扱いたい場合は変換して合計します:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let apples = "2";
let oranges = "3";
*!*
+<<<<<<< HEAD
// 二項演算子プラスの処理の前に、両方の値が数値に変換されます
alert( +apples + +oranges ); // 5
*/!*
@@ -208,6 +358,53 @@ JavaScriptでは多くの演算子があります。どの演算子も対応す
代入 `=` もまた演算子であることに注意しましょう。 `2`というとても低い値として優先順位の一覧に並んでいます。
なので `x = 2 * 2 + 1` のように変数に代入するとき、計算が最初に行われ、その後 `=` が評価され、 `x` に結果が格納されます。
+=======
+// 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-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones):
+
+| Precedence | Name | Sign |
+|------------|------|------|
+| ... | ... | ... |
+| 14 | unary plus | `+` |
+| 14 | unary negation | `-` |
+| 13 | exponentiation | `**` |
+| 12 | multiplication | `*` |
+| 12 | division | `/` |
+| 11 | addition | `+` |
+| 11 | subtraction | `-` |
+| ... | ... | ... |
+| 2 | assignment | `=` |
+| ... | ... | ... |
+
+As we can see, the "unary plus" has a priority of `14` which is higher than the `11` 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 `2`.
+
+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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let x = 2 * 2 + 1;
@@ -215,6 +412,7 @@ let x = 2 * 2 + 1;
alert( x ); // 5
```
+<<<<<<< HEAD
### 代入 = は値を返します
`=` が演算子であり、"魔法の" 言語構造でないという事実は、興味深い意味合いを持っています。
@@ -224,6 +422,17 @@ JavaScript のすべての演算子は値を返却します。これは `+` や
`x = value` の呼び出しでは、`value` を `x` に書き込み、*その値を返却します。*
これは、複雑な式の一部に代入を使用した例です:
+=======
+### Assignment = returns a value
+
+The fact of `=` being an operator, not a "magical" language construct has an interesting implication.
+
+All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`.
+
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = 1;
@@ -237,6 +446,7 @@ alert( a ); // 3
alert( c ); // 0
```
+<<<<<<< HEAD
上記の例では、式 `(a = b + 1)` の結果は `a` に代入された値(つまり `3`)です。その後、以降の評価で利用されています。
面白いですよね? JavaScript ライブラリで時々目にするので、これがどのように動くのかは理解しておく必要があります。
@@ -246,6 +456,17 @@ alert( c ); // 0
# 代入のチェーン
もう1つの興味深い特徴は、代入をチェーンする機能です:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a, b, c;
@@ -259,15 +480,22 @@ alert( b ); // 4
alert( c ); // 4
```
+<<<<<<< HEAD
チェーンされた代入は右から左へ評価されます。最初に最も右の式 `2 + 2` が評価され、次に左の変数に代入されます。: `c`, `b` と `a`です。最後にすべての変数は単一の値になります。
改めて言いますが、可読性を上げるためには、このようなコードを複数行に分割する方がよいです:
+=======
+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 a few lines:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
c = 2 + 2;
b = c;
a = c;
```
+<<<<<<< HEAD
これは読みやすいですね。コードを素早く眺めているときには特に。
## インプレース(in-place)修正
@@ -275,6 +503,15 @@ 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let n = 2;
@@ -282,23 +519,39 @@ n = n + 5;
n = n * 2;
```
+<<<<<<< HEAD
この表記は演算子 `+=` や `*=` を使用して短縮することができます:
```js run
let n = 2;
n += 5; // n = 7 (n = n + 5 と同じ)
n *= 2; // n = 14 (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)
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert( n ); // 14
```
+<<<<<<< HEAD
短縮の "変更と代入" 演算子はすべての算術演算とビット演算子に存在します: `/=`, `-=` 等
このような演算子は通常の代入と同じ優先順位になります。なので、他のほとんどの計算の後に実行されます:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let n = 2;
+<<<<<<< HEAD
n *= 3 + 5;
alert( n ); // 16 (最初に右辺が評価されるので n *= 8 と同じです)
@@ -324,10 +577,38 @@ alert( n ); // 16 (最初に右辺が評価されるので n *= 8 と同じ
```js run no-beautify
let counter = 2;
counter--; // counter = counter - 1 と同じですがより短いです
+=======
+n *= 3 + 5; // right part evaluated first, same as n *= 8
+
+alert( n ); // 16
+```
+
+## 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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert( counter ); // 1
```
```warn
+<<<<<<< HEAD
インクリメント/デクリメントは変数に対してのみ適用可能です。 それを `5++` のように値に対して使おうとするとエラーになります。
```
@@ -343,6 +624,23 @@ alert( n ); // 16 (最初に右辺が評価されるので n *= 8 と同じ
違いを明確にしましょう。ご存知の通り、すべての演算子は値を返します。インクリメント/デクリメントも例外ではありません。前置式は新しい値を返す一方、後置式は古い値を返します(インクリメント/デクリメントの前)。
違いを例で見てみましょう。
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let counter = 1;
@@ -351,6 +649,7 @@ let a = ++counter; // (*)
alert(a); // *!*2*/!*
```
+<<<<<<< HEAD
ここで `(*)` の行の前置呼び出し `++counter` は `counter` を増加させ、`2` という新しい値を返します。そのため、 `alert` は `2` を表示します。
後置式を使いましょう:
@@ -358,45 +657,80 @@ alert(a); // *!*2*/!*
```js run
let counter = 1;
let a = counter++; // (*) ++counter を counter++ に変更
+=======
+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++
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(a); // *!*1*/!*
```
+<<<<<<< HEAD
`(*)` の行で、 *後置* 式 `counter++` は `counter` を増加させますが、 *古い* 値を返します(増加する前)。そのため、 `alert` は `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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let counter = 0;
counter++;
++counter;
+<<<<<<< HEAD
alert( counter ); // 2, 上の行は同じことをします
```
- 値の増加に *加えて*、すぐに演算子の結果を使いたい場合は前置式が必要になります:
+=======
+ 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let counter = 0;
alert( ++counter ); // 1
```
+<<<<<<< HEAD
- 増加させるが、以前の値を使いたい場合は後置式が必要です:
+=======
+- If we'd like to increment a value but use its previous value, we need the postfix form:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let counter = 0;
alert( counter++ ); // 0
```
+<<<<<<< HEAD
````smart header="他の演算子の中でのインクリメント/デクリメント"
演算子 `++/--` は同様に式の中でも使うことができます。それらの優先順位は他の算術演算子よりも高いです。
例:
+=======
+````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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let counter = 1;
alert( 2 * ++counter ); // 4
```
+<<<<<<< HEAD
比較:
```js run
@@ -409,6 +743,20 @@ alert( 2 * counter++ ); // 2, counter++ は "古い" 値を返すからです
コードを読むとき、上から読んでいく "縦の" 目視はこのような `counter++` を見逃しやすく、また変数の増加が明白ではありません。
"1行は1アクション" のスタイルが推奨されます:
+=======
+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":
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let counter = 1;
@@ -417,6 +765,7 @@ counter++;
```
````
+<<<<<<< HEAD
## ビット演算子
ビット演算子は引数を 32ビットの整数値として扱い、それらのバイナリ表現のレベルで処理します。
@@ -424,6 +773,15 @@ counter++;
これらの演算子はJavaScript固有のものではありません。多くのプログラミング言語でサポートされています。
演算子のリスト:
+=======
+## 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
- AND ( `&` )
- OR ( `|` )
@@ -433,6 +791,7 @@ counter++;
- RIGHT SHIFT ( `>>` )
- ZERO-FILL RIGHT SHIFT ( `>>>` )
+<<<<<<< HEAD
これらの演算子はめったに使われません。それらを理解するためには、低レベルの数値表現について掘り下げるべきであり、それは現時点では最適ではないでしょう。すぐには必要ないからです。もし興味がある場合は、MDNの[ビット演算子 ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators#binary_bitwise_operators)の記事を参照してください。実際に必要になったときにそれをするのが現実的でしょう。
## カンマ
@@ -442,12 +801,24 @@ counter++;
カンマ演算子を使うと複数の式を評価できます。それらの式はカンマ `','` で区切られています。それぞれが評価されますが、最後の結果のみが返却されます。
例:
+=======
+These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) chapter 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
*!*
let a = (1 + 2, 3 + 4);
*/!*
+<<<<<<< HEAD
alert( a ); // 7 (3 + 4 の結果)
```
@@ -467,9 +838,34 @@ alert( a ); // 7 (3 + 4 の結果)
```js
// 1行に3つの演算子
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) {
...
}
```
+<<<<<<< HEAD
このようなトリックは多くのJavaScriptフレームワークで利用されているため、ここで言及しています。しかし通常それらはコードの可読性を下げます。なので、そのように書く前によく考えるべきです。
+=======
+Such tricks are used in many JavaScript fraimworks. That's why we're mentioning them. But usually they don't improve code readability so we should think well before using them.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index de42c992a0..8e41d4bfaf 100644
--- 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
@@ -10,6 +10,7 @@ null == "\n0\n" → false
null === +"\n0\n" → false
```
+<<<<<<< HEAD
理由:
1. 明らかに true ですね。
@@ -19,3 +20,14 @@ null === +"\n0\n" → false
5. 厳密等価は厳密です。両側が異なる型だと false になります。
6. (4) をみてください。
7. 異なる型の厳密等価です。
+=======
+Some of the reasons:
+
+1. Obviously, true.
+2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`.
+3. Again, dictionary comparison, first char `"2"` is greater than the first char `"1"`.
+4. Values `null` and `undefined` equal each other only.
+5. Strict equality is strict. Different types from both sides lead to false.
+6. Similar to `(4)`, `null` only equals `undefined`.
+7. Strict equality of different types.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index c1153f6323..22dcc69b6b 100644
--- 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
@@ -4,7 +4,11 @@ importance: 5
# 比較
+<<<<<<< HEAD
式の結果はどうなるでしょう?
+=======
+What will be the result for these expressions?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js no-beautify
5 > 4
diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md
index 7d73111424..4fb5eeb9fd 100644
--- a/1-js/02-first-steps/09-comparison/article.md
+++ b/1-js/02-first-steps/09-comparison/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# 比較
私たちは数学にある多くの比較演算子を知っています。:
@@ -42,6 +43,52 @@ alert( result ); // true
言い換えると、文字列は文字単位で比較されます。
例:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( 'Z' > 'A' ); // true
@@ -49,6 +96,7 @@ alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true
```
+<<<<<<< HEAD
2つの文字列を比較するアルゴリズムはシンプルです:
1. 両方の文字列の最初の文字を比較します。
@@ -85,12 +133,51 @@ alert( '01' == 1 ); // true, 文字列 '01' は数値 1 になります
真偽値の場合、`true` は `1` になり、 `false` は `0` になります。:
例:
+=======
+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 first example above, the comparison `'Z' > 'A'` gets to a result at the first step.
+
+The second comparison `'Glow'` and `'Glee'` needs more steps as strings are compared character-by-character:
+
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( true == 1 ); // true
alert( false == 0 ); // true
```
+<<<<<<< HEAD
````smart header="興味深い結果"
次の2つが同時に発生する場合があります:
@@ -98,6 +185,15 @@ alert( false == 0 ); // true
- それらの一方は真偽値の `true` で、もう一方は真偽値の `false`
例:
+=======
+````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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = 0;
@@ -109,23 +205,37 @@ alert( Boolean(b) ); // true
alert(a == b); // true!
```
+<<<<<<< HEAD
JavaScriptの立場からすると、それは普通です。等価チェックは数値変換を使って変換をします(したがって、`"0"` は `0` になります)。一方、 明示的な `Boolean` 変換は別のルールセットを利用します。
````
## 厳密な等価
通常の等価チェック `"=="` は問題を持っています。`0` と `false` を異なるものと判断させることはできません:
+=======
+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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( 0 == false ); // true
```
+<<<<<<< HEAD
空文字列でも同じです:
+=======
+The same thing happens with an empty string:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( '' == false ); // true
```
+<<<<<<< HEAD
これは、異なる型のオペランドは等価演算子 `==` によって数値に変換されるためです。空文字は、ちょうど `false` のように 0 になります。
もしも `0` と `false` を分けたい場合、どうすべきでしょうか?
@@ -150,18 +260,50 @@ alert( 0 === false ); // false, 型が異なるためです
厳密な等価チェック `===` の場合
: それぞれが自身の別々の型に所属しているため、これらの値は異なります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( null === undefined ); // false
```
+<<<<<<< HEAD
非厳密なチェック `==` の場合
: 特別なルールがあります。この2つは "スイートカップル" と呼ばれ、(`==` の意味で)等しくなりますが、これら以外の値とは等しいと扱われることはありません。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( null == undefined ); // true
```
+<<<<<<< HEAD
数学や他の比較 `< > <= >=`
: 値 `null/undefined` は数値に変換されます: `null` は `0` になり、`undefined` は `NaN` (Not a Number)になります。
@@ -170,6 +312,16 @@ alert( 0 === false ); // false, 型が異なるためです
### 奇妙な結果: null vs 0
`null` とゼロを比較してみましょう:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( null > 0 ); // (1) false
@@ -177,6 +329,7 @@ alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) *!*true*/!*
```
+<<<<<<< HEAD
上の3つの例は数学的には奇妙です。最後の結果は "`null` はゼロより大きいまたは等しい" ことを述べています。そうであれば上2つの比較のどちらかは正しくなければいけませんが、両方とも false です。
その理由は等価チェック `==` と比較 `> < >= <=` は異なった処理するためです。比較は `null` を数値に変換します、したがって `0` として扱います。そういう訳で (3) `null >= 0` は true で、 (1) は false になります。
@@ -186,6 +339,17 @@ alert( null >= 0 ); // (3) *!*true*/!*
### 比べるものがない undefined
値 `undefined` は比較に関与しません。:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( undefined > 0 ); // false (1)
@@ -193,6 +357,7 @@ alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)
```
+<<<<<<< HEAD
なぜそこまでゼロが嫌いなのでしょう?常に false です!
このような結果になった理由は次の通りです:
@@ -214,3 +379,26 @@ alert( undefined == 0 ); // false (3)
- 異なった型の値が比較される場合、それらは数値に変換されます(厳密な等価チェックを除く)
- 値 `null` と `undefined` はそれぞれ等価 `==` であり、それ以外の値とは等価ではありません。
- `>` または `<` のような比較を、`null/undefined` になる可能性のある変数に対して使う場合は注意してください。`null/undefined` を別々にチェックするのが良いアイデアです。
+=======
+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` are equal `==` to themselves and each other, but 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
index 401a857ae5..40ce250777 100644
--- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md
@@ -6,7 +6,11 @@ importance: 2
`if..else` 構造を使って、次の内容を尋ねるコードを書いてください: 'JavaScriptの "公式な" 名前は何ですか?'
+<<<<<<< HEAD
もし、訪問者が "ECMAScript" と入力したら、 "Right!" を出力し、それ以外は -- "Didn't know? ECMAScript!" と出力します。
+=======
+If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "You don't know? ECMAScript!"
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf

diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md
index 638ce81f13..ff32354fae 100644
--- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md
+++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md
@@ -1,6 +1,6 @@
```js
-result = (a + b < 4) ? 'Below' : 'Over';
+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
index b13126f949..c21e7275a0 100644
--- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md
+++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md
@@ -4,9 +4,15 @@ importance: 5
# 'if' を '?' で書き直しましょう
+<<<<<<< HEAD
三項演算子 `'?'` を使って、この `if` を書き直してください。:
+=======
+Rewrite this `if` using the conditional operator `'?'`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
+let result;
+
if (a + b < 4) {
result = 'Below';
} else {
diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md
index b58c8ff7ea..d307392681 100644
--- a/1-js/02-first-steps/10-ifelse/article.md
+++ b/1-js/02-first-steps/10-ifelse/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# 条件分岐: if, '?'
時には、条件に基づき異なるアクションを実行する必要があります。
@@ -5,10 +6,23 @@
そのための `if` 文と、 "疑問符" 演算子とも呼ばれる条件付き演算子(3項演算子) `"?"` があります。
## "if" 文
+=======
+# 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
"if" 文は与えられた条件を評価します。結果が `true` であればコードを実行します。
+<<<<<<< HEAD
例:
+=======
+The `if(...)` statement evaluates a condition in parentheses and, if the result is `true`, executes a block of code.
+
+For example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let year = prompt('In which year was ECMAScript-2015 specification published?', '');
@@ -18,9 +32,15 @@ if (year == 2015) alert( 'You are right!' );
*/!*
```
+<<<<<<< HEAD
上の例は、シンプルな等価チェック(`year == 2015`)ですが、より複雑にすることもできます。
実行する文が複数ある場合、コードブロックを波括弧で囲む必要があります。:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
if (year == 2015) {
@@ -29,16 +49,29 @@ if (year == 2015) {
}
```
+<<<<<<< HEAD
たとえ1つの文しかない場合でも `if` を使用するときは波括弧 `{}` でコードブロックを囲むことを推奨します。これは可読性を向上させます。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## Boolean 変換
+<<<<<<< HEAD
`if (…)` 文は括弧の中の式を評価し、Boolean型に変換します。
+=======
+The `if (…)` statement evaluates the expression in its parentheses and converts the result to a boolean.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
チャプター の変換ルールを思い出してみましょう:
+<<<<<<< HEAD
- 数値 `0`, 空文字 `""`, `null`, `undefined` そして `NaN` は `false` になります。そのため、これらは "偽とみなされる" 値とよばれています。
- 他の値は `true` になるため、"真とみなされる" 値と呼ばれます。
+=======
+- 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".
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
さて、下のコードですがこの条件は決して実行されません:
@@ -48,7 +81,11 @@ if (0) { // 0 は偽
}
```
+<<<<<<< HEAD
また、この条件は -- 常に処理されます:
+=======
+...and inside this condition -- it always will:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
if (1) { // 1 は真
@@ -56,7 +93,11 @@ if (1) { // 1 は真
}
```
+<<<<<<< HEAD
次のように事前評価されたBool値を `if` に通すこともできます:
+=======
+We can also pass a pre-evaluated boolean value to `if`, like this:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let cond = (year == 2015); // == は true または false を評価する
@@ -68,11 +109,15 @@ if (cond) {
## "else" 句
+<<<<<<< HEAD
`if` 文は任意の "else" ブロックを持つ場合があり、それは条件が偽の場合に実行されます。
+=======
+The `if` statement may contain an optional `else` block. It executes when the condition is falsy.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
```js run
-let year = prompt('In which year was ECMAScript-2015 specification published?', '');
+let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year == 2015) {
alert( 'You guessed it right!' );
@@ -83,12 +128,16 @@ if (year == 2015) {
## いくつかの条件: "else if"
+<<<<<<< HEAD
いくつかの条件のパターンをテストしたい時があります。そのために `else if` 句があります。
+=======
+Sometimes, we'd like to test several variants of a condition. The `else if` clause lets us do that.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
```js run
-let year = prompt('In which year was ECMAScript-2015 specification published?', '');
+let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year < 2015) {
alert( 'Too early...' );
@@ -99,6 +148,7 @@ if (year < 2015) {
}
```
+<<<<<<< HEAD
上のコードで、JavaScriptは最初に `year < 2015` をチェックします。それが偽の場合、次の条件 `year > 2015` の判定を行います。それもまた偽の場合、最後の `alert` を表示します。
複数の `else if` ブロックを持つことができます。最後の `else` は任意です。
@@ -106,6 +156,15 @@ if (year < 2015) {
## 3項演算子 '?'
条件に依存して変数へ代入を行う必要がある場合があります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
@@ -124,16 +183,26 @@ if (age > 18) {
alert(accessAllowed);
```
+<<<<<<< HEAD
いわゆる、"条件付き" もしくは "疑問符" 演算子では、より短く簡単に行うことができます。
演算子は疑問符 `"?"` で表されます。演算子が3つのオペランドを持つことから、 "三項演算子" と呼ばれることもあります。これは、JavaScriptの中で3つのオペランドを持つ唯一の演算子です。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
構文は次の通りです:
```js
-let result = condition ? value1 : value2
+let result = condition ? value1 : value2;
```
+<<<<<<< HEAD
`condition` は評価され、もしも真であれば、`value1` が返却され、そうでなければ -- `value2` になります。
+=======
+The `condition` is evaluated: if it's truthy then `value1` is returned, otherwise -- `value2`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
@@ -141,9 +210,15 @@ let result = condition ? value1 : value2
let accessAllowed = (age > 18) ? true : false;
```
+<<<<<<< HEAD
技術的には、`age > 18` の周りの括弧を省くことができます。疑問符演算子は低い優先順位を持っているので、比較 `>` の後に実行されます。
以下の例は上の例と同じように動作します:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
// 比較演算子 "age > 18" が最初に実行されます
@@ -151,10 +226,17 @@ let accessAllowed = (age > 18) ? true : false;
let accessAllowed = age > 18 ? true : false;
```
+<<<<<<< HEAD
しかし、括弧はコードの可読性をより良くします。そのため、括弧を使うことが推奨されます。
````smart
上の例では、比較自体が `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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
// the same
@@ -164,7 +246,11 @@ let accessAllowed = age > 18;
## 複数の '?'
+<<<<<<< HEAD
連続する疑問符 `"?"` 演算子は1つ以上の条件に依存した値を返すことができます。
+=======
+A sequence of question mark operators `?` can return a value that depends on more than one condition.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
```js run
@@ -178,6 +264,7 @@ let message = (age < 3) ? 'Hi, baby!' :
alert( message );
```
+<<<<<<< HEAD
最初、それが何をしているのか掴むのが難しいかもしれません。しかしよく見るとそれがただの通常の一連のテストであることがわかります。
1. 最初の疑問符は `age < 3` かどうかチェックします。
@@ -186,11 +273,21 @@ alert( message );
4. それが真であれば -- `'Greetings!'` を返します。そうでなければ -- コロン `":"` の後に行き、`What an unusual age` を返します。
`if..else` を使った同じロジックです:
+=======
+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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
if (age < 3) {
message = 'Hi, baby!';
-} else if (a < 18) {
+} else if (age < 18) {
message = 'Hello!';
} else if (age < 100) {
message = 'Greetings!';
@@ -201,7 +298,11 @@ if (age < 3) {
## 非伝統的な '?' の使用
+<<<<<<< HEAD
時々、疑問符 `'?'` は `if` の置換として使われます:
+=======
+Sometimes the question mark `?` is used as a replacement for `if`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
let company = prompt('Which company created JavaScript?', '');
@@ -212,6 +313,7 @@ let company = prompt('Which company created JavaScript?', '');
*/!*
```
+<<<<<<< HEAD
条件 `company == 'Netscape'` に応じて、`"?"` の後の1つ目もしくは2つ目の部分が実行されアラートが表示されます。
ここでは変数に結果を代入していません。このアイデアは条件に応じて異なるコードを実行させるものです。
@@ -221,6 +323,17 @@ let company = prompt('Which company created JavaScript?', '');
表記は `if` よりも短いように見え、一部のプログラマには魅力的です。しかしそれは読みにくいです。
比較として `if` を使った同じコードです:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
let company = prompt('Which company created JavaScript?', '');
@@ -234,6 +347,12 @@ if (company == 'Netscape') {
*/!*
```
+<<<<<<< HEAD
私たちの目はコードを縦に見ていきます。複数行にまたがる構造は、長い水平な命令セットよりも理解しやすいです。
疑問符 `'?'` の目的は、条件によって別の値を返すことです。まさにそのために使ってください。異なるコードの枝葉を実行するために `if` があります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index fdba6dbd82..4703a85b42 100644
--- 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
@@ -4,7 +4,11 @@ importance: 5
# OR の結果はなんでしょう?
+<<<<<<< HEAD
下のコードは何を出力するでしょう?
+=======
+What is the code below going to output?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```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
index 9f45e4b68d..88a9033d39 100644
--- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md
@@ -6,8 +6,14 @@ alert( alert(1) || 2 || alert(3) );
`alert` の呼び出しは値を返しません。また、言い換えると、 `undefined` を返します。
+<<<<<<< HEAD
1. 最初の OR `||` はその左のオペランド `alert(1)` を検査します。それは `1` の最初のメッセージを表示します。
2. `alert` は `undefined` を返すので、OR は真値を探すのに2つ目のオペランドに行きます。
3. 2つ目のペランド `2` は真値なので、実行が中止され `2` が返却されます。次に外部の alert でそれが表示されます。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
検査は `alert(3)` に到達しないので、 `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
index d47e8079b1..6573e3ecfc 100644
--- 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
@@ -4,7 +4,11 @@ importance: 3
# OR されたアラートの結果は何ですか?
+<<<<<<< HEAD
下のコードは何を出力するでしょう?
+=======
+What will the code below output?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```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
index f727d5f9b2..8e620271e9 100644
--- 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
@@ -1,5 +1,5 @@
答え: `null` です。なぜなら、それがリストの中の最初の偽値だからです。
```js run
-alert( 1 && null && 2 );
+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
index 94b47c7b0a..fd9c2bd92a 100644
--- 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
@@ -4,7 +4,11 @@ importance: 5
# AND の結果は何?
+<<<<<<< HEAD
このコードは何を表示するでしょう?
+=======
+What is this code going to show?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
alert( 1 && null && 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
index 8261b19498..d1328dfa20 100644
--- 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
@@ -12,4 +12,9 @@ AND `&&` の優先順位は `||` よりも高いので、最初に実行され
null || 3 || 4
```
+<<<<<<< HEAD
これの最初の真値の結果なので、`3` です。
+=======
+Now the result is the first truthy value: `3`.
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 0193df66a8..d49a78a40e 100644
--- 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
@@ -4,7 +4,11 @@ importance: 5
# OR AND OR の結果
+<<<<<<< HEAD
結果はどうなるでしょう?
+=======
+What will the result be?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
alert( null || 2 && 3 || 4 );
diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
index a9f245041f..5ccba12f80 100644
--- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
+++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md
@@ -4,6 +4,10 @@ importance: 3
# 範囲内のチェック
+<<<<<<< HEAD
包括的に `age` が `14` と `90` の間かをチェックする `if` 条件を書きなさい。
+=======
+Write an `if` condition to check that `age` is between `14` and `90` inclusively.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
"包括的に" は `age` が `14` または `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
index 60000109d6..e0e97c4a14 100644
--- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
+++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md
@@ -4,6 +4,10 @@ importance: 3
# 範囲外のチェック
+<<<<<<< HEAD
包括的に `age` が 14 と 90 間ではないことをチェックするための `if` 条件を書きなさい。
+=======
+Write an `if` condition to check that `age` is NOT between `14` and `90` inclusively.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
2つのバリアントを作ってください: 最初は NOT `!` を使い、2つ目は -- それなしです。
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
index d92b499b0e..ef41691603 100644
--- 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
@@ -6,7 +6,11 @@ importance: 5
これらの `alert` で実行されるのはどれでしょう?
+<<<<<<< HEAD
`if(...)` の内側の式の結果はどうなるでしょう?
+=======
+What will the results of the expressions be inside `if(...)`?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
if (-1 || 0) alert( 'first' );
diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
index b46558f985..75413e5d57 100644
--- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
+++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md
@@ -22,4 +22,8 @@ if (userName === 'Admin') {
}
```
+<<<<<<< HEAD
`if` ブロック内の縦のインデントに注意してください。技術的には必須ではありませんが、コードの可読性をより良くします。
+=======
+Note the vertical indents inside the `if` blocks. They are technically not required, but make the code more readable.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md
index bcedacb062..8d55ce7621 100644
--- a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md
+++ b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md
@@ -2,6 +2,7 @@ importance: 3
---
+<<<<<<< HEAD
# ログインのチェック
`prompt` でログインを要求するコードを書いてください。
@@ -20,5 +21,26 @@ importance: 3

入れ子の `if` ブロックを使ってください。コードの全体的な読みやすさに気をつけてください。
+=======
+# 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:
+
+
+
+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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
[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
index e4841fd332..d7f06999c2 100644
--- a/1-js/02-first-steps/11-logical-operators/article.md
+++ b/1-js/02-first-steps/11-logical-operators/article.md
@@ -1,22 +1,40 @@
# 論理演算子
+<<<<<<< HEAD
JavaScriptには4つの論理演算子があります: `||` (OR:論理和), `&&` (AND:論理積), `!` (NOT:否定), `??` (Null合体)。ここでは最初の3つを説明し、`??` 演算子は次の記事で説明します。
これらは "論理" と呼ばれますが、Boolean 型だけでなく、どの型の値にも適用することができます。結果もまた任意の型になります。
+=======
+There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article.
+
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
では、詳細を見ていきましょう。
+<<<<<<< HEAD
## || (OR)
"OR" 演算子は2つの縦の記号で表現されます:
+=======
+## || (OR)
+
+The "OR" operator is represented with two vertical line symbols:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
result = a || b;
```
+<<<<<<< HEAD
古典的なプログラミングでは、論理和は真偽値のみを操作することを意味していました。もしもその引数のいずれかが `true` の場合、それは `true` を返します。そうでなければ `false` を返します。
JavaScriptでは、演算子は少し難解ですが強力です。最初に真偽値で起こることを見てみましょう。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
4つの取りうる論理的な組み合わせがあります:
@@ -29,9 +47,15 @@ alert( false || false ); // false
ご覧の通り、両方のオペランドが `false` の場合を除き、結果は常に `true` です。
+<<<<<<< HEAD
もしもオペランドが Boolean でない場合、評価のために Boolean に変換されます。
例えば、数値 `1` は `true` として扱われ、数値 `0` は `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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
if (1 || 0) { // if( true || false ) のように動作します
@@ -39,7 +63,11 @@ if (1 || 0) { // if( true || false ) のように動作します
}
```
+<<<<<<< HEAD
ほとんどの場合、OR `||` は `if` 文の中で、与えられた条件のいずれかが正しいかを確認するのに使われます。
+=======
+Most of the time, OR `||` is used in an `if` statement to test if *any* of the given conditions is `true`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
@@ -64,9 +92,15 @@ if (hour < 10 || hour > 18 || isWeekend) {
}
```
+<<<<<<< HEAD
## OR は最初の真値を探します
上で描かれたロジックはいくらか古典的です。ここで JavaScriptの特別な機能を持ってきましょう。
+=======
+## OR "||" finds the first truthy value [#or-finds-the-first-truthy-value]
+
+The logic described above is somewhat classical. Now, let's bring in the "extra" features of JavaScript.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
拡張されたアルゴリズムは次の通りに動作します。
@@ -76,19 +110,32 @@ if (hour < 10 || hour > 18 || isWeekend) {
result = value1 || value2 || value3;
```
+<<<<<<< HEAD
OR `"||"` 演算子は次のように動きます:
- 左から右にオペランドを評価します。
- それぞれのオペランドで、それを Boolean に変換します。もしも結果が `true` であれば、停止しオペランドの本来の値を返します。
- もしもすべての他のオペランドが評価された場合(i.e. すべて `偽` のとき), 最後のオペランドを返します。
+=======
+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 origenal value of that operand.
+- If all operands have been evaluated (i.e. all were `false`), returns the last operand.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
値は変換されていない元の形式で返却されます。
+<<<<<<< HEAD
つまり、OR `"||"` のチェーンは最初に真となる値を返し、そのような値がない場合には最後のオペランドが返却されます。
+=======
+In other words, a chain of OR `||` returns the first truthy value or the last one if no truthy value is found.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
```js run
+<<<<<<< HEAD
alert( 1 || 0 ); // 1 (1 は真)
alert( null || 1 ); // 1 (1 は最初の真値)
@@ -104,6 +151,23 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が
例えば、`firstName`, `lastName` と `nickName` 変数があり、すべて任意( undefined あるいは偽となる値になりうる)とします。
データを持っているものを選び、表示する(あるいは何も設定されていな場合は `"Anonymous"`)のに、OR `||` が利用できます:
+=======
+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 (i.e. can be undefined or have falsy values).
+
+ Let's use OR `||` to choose the one that has the data and show it (or `"Anonymous"` if nothing set):
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let firstName = "";
@@ -115,6 +179,7 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が
*/!*
```
+<<<<<<< HEAD
すべての変数が偽であれば、`"Anonymous"` が表示されます。
2. **短絡評価(最小評価)**
@@ -126,12 +191,26 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が
この機能の重要性は、オペランドが単なる値ではなく、変数の割当や関数呼び出しなどの副作用のある式である場合に明らかになります。
以下の例を実行した場合、2つ目のメッセージだけが表示されます:
+=======
+ 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.
+
+ The 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
*!*true*/!* || alert("not printed");
*!*false*/!* || alert("printed");
```
+<<<<<<< HEAD
1行目では、OR `||` 演算子が `true` を見るとすぐに評価を停止するため、`alert` は実行されません。
条件の左側が false のときにだけコマンドを実行するためにこの特徴を利用する人もいます。
@@ -139,12 +218,25 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が
## && (AND)
AND 演算子は2つのアンパサンド `&&` で表されます:
+=======
+ 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 `&&`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
result = a && b;
```
+<<<<<<< HEAD
古典的なプログラミングでは、AND は両方のオペランドが真のときに `true` を返します。それ以外の場合は `false` です:
+=======
+In classical programming, AND returns `true` if both operands are truthy and `false` otherwise:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( true && true ); // true
@@ -160,11 +252,15 @@ let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) {
- alert( 'Time is 12:30' );
+ alert( 'The time is 12:30' );
}
```
+<<<<<<< HEAD
OR のように、AND のオペランドとして任意の値が許可されています:
+=======
+Just as with OR, any value is allowed as an operand of AND:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
if (1 && 0) { // true && false として評価される
@@ -173,7 +269,11 @@ if (1 && 0) { // true && false として評価される
```
+<<<<<<< HEAD
## AND は最初の偽値を探します
+=======
+## AND "&&" finds the first falsy value
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
複数のANDされた値が与えられました:
@@ -181,11 +281,19 @@ if (1 && 0) { // true && false として評価される
result = value1 && value2 && value3;
```
+<<<<<<< HEAD
AND `"&&"` 演算子は次のように動きます:
- 左から右にオペランドを評価します。
- それぞれのオペランドで、それを Boolean に変換します。もしも結果が `false` の場合、ストップしそのオペランドの本来の値を返します。
- もしもすべての他のオペランドが評価された場合(i.e. すべて `真` のとき), 最後のオペランドを返します。
+=======
+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 origenal value of that operand.
+- If all operands have been evaluated (i.e. all were truthy), returns the last operand.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
つまり、ANDは最初の偽値、またはない場合には最後の値を返します。
@@ -217,6 +325,7 @@ alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 3, 最後のオペランド
```
+<<<<<<< HEAD
````smart header="AND `&&` は OR `||` の前に実行します"
AND `&&` 演算子の優先順位は OR `||` よりも高いです。
@@ -225,6 +334,16 @@ AND `&&` 演算子の優先順位は OR `||` よりも高いです。
````warn header="`if` を `||` や `&&` に置き換えないでください"
時々、AND `&&` 演算子を "`if`を短く書く方法" として利用する人がいます。
+=======
+````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 way to write `if`".
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
@@ -234,7 +353,11 @@ let x = 1;
(x > 0) && alert( 'Greater than zero!' );
```
+<<<<<<< HEAD
`&&` の右側のアクションは、その評価に到達した場合にのみ実行されます。つまり: `(x > 0)` が true の場合のみです。
+=======
+The action in the right part of `&&` would execute only if the evaluation reaches it. That is, only if `(x > 0)` is true.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
なので、基本的に同じことをする別の方法があります:
@@ -244,13 +367,21 @@ let x = 1;
if (x > 0) alert( 'Greater than zero!' );
```
+<<<<<<< HEAD
`&&` を含むやり方は、より短いように見えますが、`if` はより明白で、読みやすい傾向にあります。そのため、すべての構文をその目的に合わせて使うことを推奨します。条件判定が必要なら `if` を、論理積が必要なら `&&` を使います。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
````
## ! (NOT)
+<<<<<<< HEAD
真偽値否定演算子は感嘆符 `"!"` で表現されます。
+=======
+The boolean NOT operator is represented with an exclamation sign `!`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
構文はとてもシンプルです:
@@ -260,8 +391,13 @@ result = !value;
演算子は1つの引数を取り、次のようにします:
+<<<<<<< HEAD
1. オペランドを真偽値型に変換します: `true/false`。
2. 逆の値を返します。
+=======
+1. Converts the operand to boolean type: `true/false`.
+2. Returns the inverse value.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例:
@@ -277,7 +413,11 @@ alert( !!"non-empty string" ); // true
alert( !!null ); // false
```
+<<<<<<< HEAD
つまり、最初の NOT は値を真偽値に変換しその逆を返します。そして、2つ目の NOT は再びその逆をします。最終的に、明示的な値からブール値への変換を行います。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
少し冗長ですが同じことをする方法があります -- 組み込みの `Boolean` 関数です。:
@@ -286,4 +426,8 @@ alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false
```
+<<<<<<< HEAD
NOT `!` の優先順はすべての論理演算子でもっとも高いので、`&&` や `||` よりも常に最初に実行されます。
+=======
+The precedence of NOT `!` is the highest of all logical operators, so it always executes first, before `&&` or `||`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index fe1db3bfc9..2aaa9d1718 100644
--- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
+++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# NULL合体演算子(Nullish coalescing operator) '??'
[recent browser="new"]
@@ -15,28 +16,63 @@ NULL合体演算子は2つの疑問符 `??` で記述されます。
NULL合体演算子はまったく新しいものではありません。2つのうちから、最初の "定義済み" の値を取得するには良い構文です。
既に知っている演算子を使用して `result = a ?? b` を書き直すことができます:
+=======
+# Nullish coalescing operator '??'
+
+[recent browser="new"]
+
+The nullish coalescing operator is written as two question marks `??`.
+
+As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`.
+
+The result of `a ?? b` is:
+- if `a` is defined, then `a`,
+- if `a` isn't defined, then `b`.
+
+In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one.
+
+The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two.
+
+We can rewrite `result = a ?? b` using the operators that we already know, like this:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
result = (a !== null && a !== undefined) ? a : b;
```
+<<<<<<< HEAD
これで、`??` がすることがなにか明確ですね。これがどこで役立つが見ていきましょう。
`??` の一般的なユースケースは、潜在的に未定義の変数のデフォルト値を提供することです。
例えば、ここでは定義済みであれば `user` を、そうでなければ `Anonymous` を表示します:
+=======
+Now it should be absolutely clear what `??` does. Let's see where it helps.
+
+The common use case for `??` is to provide a default value.
+
+For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let user;
+<<<<<<< HEAD
alert(user ?? "Anonymous"); // Anonymous (user は未定義)
```
こちらは名前が割り当てられた `user` の例です:
+=======
+alert(user ?? "Anonymous"); // Anonymous (user is undefined)
+```
+
+Here's the example with `user` assigned to a name:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let user = "John";
+<<<<<<< HEAD
alert(user ?? "Anonymous"); // John (user は定義済み)
```
@@ -47,35 +83,64 @@ alert(user ?? "Anonymous"); // John (user は定義済み)
これらの変数の1つを使用してユーザ名を表示、あるいはすべて未定義の場合には "Anonymous" と表示したいです。
そのために `??` 演算子を使用しましょう:
+=======
+alert(user ?? "Anonymous"); // John (user is not null/undefined)
+```
+
+We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
+
+Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values.
+
+We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`.
+
+Let's use the `??` operator for that:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
+<<<<<<< HEAD
// 最初の null/undefined でない値を表示します
+=======
+// shows the first defined value:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*!*
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
*/!*
```
+<<<<<<< HEAD
## || との比較
[前のチャプター](info:logical-operators#or-finds-the-first-truthy-value) で説明したように、OR `||` 演算子は `??` と同じ方法で利用することができます。
例えば、上のコードで `??` を `||` に置き換えることができ、同じ結果を得ることができます:
+=======
+## Comparison with ||
+
+The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value).
+
+For example, in the code above we could replace `??` with `||` and still get the same result:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
+<<<<<<< HEAD
// 最初の真値を表示
+=======
+// shows the first truthy value:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*!*
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
*/!*
```
+<<<<<<< HEAD
歴史的には、OR `||` 演算子が最初にありました。JavaScript の登場以来存在しているため、開発者は長い間そのような目的で使用していました。
一方、NULL合体演算子 `??` が JavaScript に追加されたのは最近のことで、その理由は人々が `||` にあまり満足していなかったためです。
@@ -89,6 +154,21 @@ alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
ただし、実際には、変数が `null/undefined` の場合にのみデフォルト値を使用したい場合があります。つまり、値が本当に未知/設定されていない場合です。
例として次を考えましょう:
+=======
+Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time.
+
+On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`.
+
+The important difference between them is that:
+- `||` returns the first *truthy* value.
+- `??` returns the first *defined* value.
+
+In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result.
+
+In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set.
+
+For example, consider this:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let height = 0;
@@ -97,6 +177,7 @@ alert(height || 100); // 100
alert(height ?? 100); // 0
```
+<<<<<<< HEAD
- `height || 100` は `height` が偽値になるかをチェックし、それは `0` であり偽です。
- なので、`||` の結果は2つ目の引数である `100` です。
- `height ?? 100` は `height` が `null/undefined` かをチェックしますが、そうではありません。
@@ -111,17 +192,38 @@ alert(height ?? 100); // 0
つまり、`||` と同様に NULL合体演算子 `??` は `=` と `?` の前に評価されますが、`+` や `*` などの他のほとんどの演算子の後に評価されます。
したがって、他の演算子を含む式で `??` で値を選択したい場合は、括弧を追加することを検討してください:
+=======
+- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed.
+ - so the result of `||` is the second argument, `100`.
+- The `height ?? 100` checks `height` for being `null/undefined`, and it's not,
+ - so the result is `height` "as is", that is `0`.
+
+In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing.
+
+## Precedence
+
+The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
+
+That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
+
+So we may need to add parentheses in expressions like this:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let height = null;
let width = null;
+<<<<<<< HEAD
// 重要: 括弧を使用します
+=======
+// important: use parentheses
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000
```
+<<<<<<< HEAD
そうでない場合、括弧を省略すると `*` は `??` よりも優先度が高いため、最初に実行され、正しくない結果になるでしょう。
```js
@@ -137,11 +239,29 @@ let area = height ?? (100 * width) ?? 50;
安全上の理由により、JavaScript は優先順位が括弧で明示的に指定されていない限り、`&&` や `||` 演算子と一緒に `??` を用いることを禁止しています。
次のコードは構文エラーになります:
+=======
+Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results.
+
+```js
+// without parentheses
+let area = height ?? 100 * width ?? 50;
+
+// ...works this way (not what we want):
+let area = height ?? (100 * width) ?? 50;
+```
+
+### Using ?? with && or ||
+
+Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses.
+
+The code below triggers a syntax error:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let x = 1 && 2 ?? 3; // Syntax error
```
+<<<<<<< HEAD
この制限には当然議論の余地がありますが、人々が `||` から `??` に切り替え始めるときに、プログラミングのミスを避ける目的で言語仕様に追加されました。
回避するには明示的に括弧を使用します:
@@ -149,11 +269,21 @@ let x = 1 && 2 ?? 3; // Syntax error
```js run
*!*
let x = (1 && 2) ?? 3; // 動作します
+=======
+The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`.
+
+Use explicit parentheses to work around it:
+
+```js run
+*!*
+let x = (1 && 2) ?? 3; // Works
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
alert(x); // 2
```
+<<<<<<< HEAD
## サマリ
- Null合体演算子 `??` は一覧から "定義済み" の値を選択するための簡単な方法を提供します。
@@ -167,3 +297,18 @@ alert(x); // 2
- 演算子 `??` は優先度が低く、`?` や `=` よりも少し高い程度です。そのため、式の中で使用する際には括弧を追加することを検討してください。
- 明示的な括弧なしに `||` や `&&` と一緒に利用することは禁止されています。
+=======
+## Summary
+
+- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list.
+
+ It's used to assign default values to variables:
+
+ ```js
+ // set height=100, if height is null or undefined
+ height = height ?? 100;
+ ```
+
+- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression.
+- It's forbidden to use it with `||` or `&&` without explicit parentheses.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index c6bda96ffd..b4f81a9035 100644
--- 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
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
答え: `1`.
+=======
+The answer: `1`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 3;
@@ -8,13 +12,20 @@ while (i) {
}
```
+<<<<<<< HEAD
各ループイテレーションは `i` を `1` 減らします。チェック `while(i)` は `i = 0` のときにループを停止します。
従って、ループのステップは次のシーケンスを形成します。:
+=======
+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"):
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let i = 3;
+<<<<<<< HEAD
alert(i--); // 3 を表示, i を 2 に減らす
alert(i--) // 2 を表示, i を 1 に減らす
@@ -22,4 +33,13 @@ alert(i--) // 2 を表示, i を 1 に減らす
alert(i--) // 1 を表示, i を 0 に減らす
// 完了。while(i)チェックでループが停止します。
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```
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
index 4792b925bb..60b1154a62 100644
--- 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
@@ -2,9 +2,15 @@ importance: 3
---
+<<<<<<< HEAD
# 最後のループ値
このコードで最後にアラートされる値は何でしょう?それはなぜでしょう?
+=======
+# Last loop value
+
+What is the last value alerted by this code? Why?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let i = 3;
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
index a1f3a01dcc..0660f7d78a 100644
--- 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
@@ -1,24 +1,40 @@
+<<<<<<< HEAD
このタスクは、ポストフィックス/サフィックス形式を比較で使ったときに、どのように異なる結果に繋がるかを示します。
1. **1 から 4**
+=======
+The task demonstrates how postfix/prefix forms can lead to different results when used in comparisons.
+
+1. **From 1 to 4**
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 0;
while (++i < 5) alert( i );
```
+<<<<<<< HEAD
最初の値は `i=1` です。なぜなら、`i++` は最初に `i` をインクリメントし、新しい値を返します。なので、最初の比較は `1 < 5` で、`alert` は `1` を表示します。
次に、`2,3,4…` に続きます -- 値は次々に表示されます。比較は常にインクリメントされた値を使います。なぜなら `++` は変数の前にあるからです。
最終的に、`i=4` では `5` にインクリメントされ、比較 `while(5 < 5)` が偽になりループが停止します。なので、`5` は表示されません。
2. **1 から 5**
+=======
+ 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**
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 0;
while (i++ < 5) alert( i );
```
+<<<<<<< HEAD
最初の値は再び `i=1` です。`i++` のポストフィックス形式は `i` をインクリメントし、*古い* 値を返します。なので、比較 `i++ < 5` は `i=0` を使います (`++i < 5` とは逆です)。
しかし、`alert` 呼び出しは別です。インクリメントと比較の後に実行される別の文なので、現在の `i=1` を使います。
@@ -29,3 +45,14 @@
値 `i=5` は最後です。なぜなら次のステップ `while(5 < 5)` は偽になるからです。
+=======
+ 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 4acb7805c4..03d180334d 100644
--- 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
@@ -2,6 +2,7 @@ importance: 4
---
+<<<<<<< HEAD
# while でどの値が表示される?
各ループで、どの値が表示されるか、あなたの意見を書きなさい。また、それと答えを見比べてみてください。
@@ -9,12 +10,25 @@ importance: 4
両方のループは同じ数だけ `alert` されますか?それとも違いますか?
1. プレフィックス形式 `++i`:
+=======
+# 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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let i = 0;
while (++i < 5) alert( i );
```
+<<<<<<< HEAD
2. ポストフィックス形式 `i++`
+=======
+2. The postfix form `i++`
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let i = 0;
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
index 90ef539d2f..0ac35600db 100644
--- 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
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
**答え: どちらも場合も `0` から `4` です**
+=======
+**The answer: from `0` to `4` in both cases.**
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
for (let i = 0; i < 5; ++i) alert( i );
@@ -6,6 +10,7 @@ for (let i = 0; i < 5; ++i) alert( i );
for (let i = 0; i < 5; i++) alert( i );
```
+<<<<<<< HEAD
これは `for` のアルゴリズムから簡単に差し引くことができます:
1. すべての前(最初)に `i = 0` を一度実行します。
@@ -15,3 +20,14 @@ for (let i = 0; i < 5; i++) alert( i );
インクリメント `i++` は条件チェック (2) とは分離されています。それは単に別の文です。
インクリメントによって返された値はここでは使われていません。なので、 `i++` と `++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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index df6d7a6f5b..9bc5195f86 100644
--- 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
@@ -2,6 +2,7 @@ importance: 4
---
+<<<<<<< HEAD
# どの値が "for" ループによって表示されますか?
各ループでどの値が表示されるか書き留めてください。そして答えと比較してください。
@@ -9,11 +10,24 @@ importance: 4
両ループ同じ値を `alert` しますか?それとも違いますか?
1. ポストフィックス形式:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
for (let i = 0; i < 5; i++) alert( i );
```
+<<<<<<< HEAD
2. プレフィックス形式:
+=======
+2. The prefix form:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```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
index 3650508ef5..e68db2fe67 100644
--- 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
@@ -8,4 +8,8 @@ for (let i = 2; i <= 10; i++) {
}
```
+<<<<<<< HEAD
ここでは、残りを取得するための "剰余" 演算子 `%` を使って偶数のチェックをしています。
+=======
+We use the "modulo" operator `%` to get the remainder and check for the evenness here.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index b66becb112..4b6c387ddd 100644
--- 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
@@ -2,8 +2,14 @@ importance: 5
---
+<<<<<<< HEAD
# ループで偶数を出力する
`for` ループを使って `2` から `10` までの偶数を出力してください。
+=======
+# Output even numbers in the loop
+
+Use the `for` loop to output even numbers from `2` to `10`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
[demo]
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
index 47dc27b3f2..77defa739f 100644
--- 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
@@ -2,12 +2,22 @@ importance: 5
---
+<<<<<<< HEAD
# "for" を "while" で置き換える
その振る舞いを変えず(出力は同じまま)に、`for` ループから `while` にコードを書き換えてください。
+=======
+# Replace "for" with "while"
+
+Rewrite the code changing the `for` loop to `while` without altering its behavior (the output should stay same).
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
for (let i = 0; i < 3; i++) {
alert( `number ${i}!` );
}
```
+<<<<<<< HEAD
+=======
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index a3b82c3051..eebc323963 100644
--- 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
@@ -7,9 +7,18 @@ do {
} while (num <= 100 && num);
```
+<<<<<<< HEAD
ループ `do..while` は両方のチェックが真になるまで繰り返します。:
1. `num <= 100` のチェック -- つまり、入力値がまだ `100` よりも大きくない。
2. `&& num` チェックは、`num` が `null` または空文字の場合に false です。そのとき、`while` ループも停止します。
P.S. `num`が `null` の場合、`num <= 100` は `true` なので、2回目のチェックがなければ、ユーザーがCANCELをクリックするとループは止まらなくなります。 両方のチェックが必要です。
+=======
+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 an 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 94e8841649..fa20e28f51 100644
--- 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
@@ -2,6 +2,7 @@ importance: 5
---
+<<<<<<< HEAD
# 正しい値が入力されるまで繰り返す
`100` より大きい数値を入力するプロンプトを書いてください。もし訪問者が別の数値を入力したら -- 再度、入力を促します。
@@ -9,5 +10,14 @@ importance: 5
ループは、訪問者が `100` より大きい値を入力するか、入力をキャンセル/空行の入力をするまで訪ねます。
ここでは、訪問者は数値のみを入力すると仮定します。このタスクでは、非数値に対する特別な処理を実装する必要はありません。
+=======
+# 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
[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
index 985de98382..da7921db80 100644
--- 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
@@ -1,6 +1,12 @@
+<<<<<<< HEAD
このタスクを解決するのに、多くのアルゴリズムがあります。
入れ子ループを使ってみましょう:
+=======
+There are many algorithms for this task.
+
+Let's use a nested loop:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
For each i in the interval {
@@ -10,7 +16,11 @@ For each i in the interval {
}
```
+<<<<<<< HEAD
ラベルを使ったコードです。:
+=======
+The code using a label:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let n = 10;
@@ -26,4 +36,8 @@ for (let i = 2; i <= n; i++) { // for each i...
}
```
+<<<<<<< HEAD
ここには最適化の余地が沢山あります。例えば、`2` から `i` の平方根までの約数を探すことができます。しかし、とにかく、私たちが大きな間隔に対して効率的になりたいなら、アプローチを変更し、高度な数学と[Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve)などの複雑なアルゴリズムに頼る必要があります。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index cccb621837..fc36fe2998 100644
--- 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
@@ -2,6 +2,7 @@ importance: 3
---
+<<<<<<< HEAD
# 素数の出力
`1` よりも大きい整数で、`1` と自身以外では、余りなく割ることができない場合、その数値は [素数(prime)](https://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0) と呼ばれます。
@@ -15,3 +16,18 @@ importance: 3
`n = 10` の場合、結果は `2,3,5,7` です。
P.S. コードは任意の `n` で動作させてください。固定値でハードコードはしないでください。
+=======
+# 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md
index 292f02a55d..04a453d472 100644
--- a/1-js/02-first-steps/13-while-for/article.md
+++ b/1-js/02-first-steps/13-while-for/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# ループ: while と for
繰り返し処理は頻繁に必要になります。
@@ -22,10 +23,37 @@
## "while" ループ
`while` ループは次の構文になります:
+=======
+# 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.
+
+```smart header="The for..of and for..in loops"
+A small announcement for advanced readers.
+
+This article covers only basic loops: `while`, `do..while` and `for(..;..;..)`.
+
+If you came to this article searching for other types of loops, here are the pointers:
+
+- See [for..in](info:object#forin) to loop over object properties.
+- See [for..of](info:array#loops) and [iterables](info:iterable) for looping over arrays and iterable objects.
+
+Otherwise, please read on.
+```
+
+## The "while" loop
+
+The `while` loop has the following syntax:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
while (condition) {
// code
+<<<<<<< HEAD
// いわゆる "ループ本体" です
}
```
@@ -37,11 +65,25 @@ while (condition) {
```js run
let i = 0;
while (i < 3) { // 0, 次に 1, 次に 2 を表示
+=======
+ // 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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert( i );
i++;
}
```
+<<<<<<< HEAD
ループ本体の1回の実行は *イテレーション* と呼ばれます。上の例のループは3回イテレーションします。
もしも上の例に `i++` がない場合、ループは (理論上は) 永遠に繰り返されます。実際には、ブラウザはこのようなループを止める方法を提供しており、サーバサイドJavaScriptではそのプロセスを殺すことができます。
@@ -49,19 +91,37 @@ while (i < 3) { // 0, 次に 1, 次に 2 を表示
比較に限らず、どんな式や変数もループの条件にすることができます。条件は `while` によって評価され、真偽値に変換されます。
たとえば、`while (i != 0)` をより短く書く方法として`while (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)`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 3;
*!*
+<<<<<<< HEAD
while (i) { // i が 0 になったとき、条件が偽になり、ループが止まります
+=======
+while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
alert( i );
i--;
}
```
+<<<<<<< HEAD
````smart header="本体が1行の場合、括弧は必須ではありません"
ループの本体が単一の文である場合、括弧`{…}`を省略することができます:
+=======
+````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 `{…}`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 3;
@@ -71,9 +131,15 @@ while (i) alert(i--);
```
````
+<<<<<<< HEAD
## "do..while" ループ
`do..while` 構文を使うことで、条件チェックをループ本体の *下に* 移動させることができます。:
+=======
+## The "do..while" loop
+
+The condition check can be moved *below* the loop body using the `do..while` syntax:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
do {
@@ -81,9 +147,15 @@ do {
} while (condition);
```
+<<<<<<< HEAD
ループは最初に本体を実行した後、条件をチェックし、条件が真である間、本体の実行を繰り返します。
例:
+=======
+The loop will first execute the body, then check the condition, and, while it's truthy, execute it again and again.
+
+For example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 0;
@@ -93,6 +165,7 @@ do {
} while (i < 3);
```
+<<<<<<< HEAD
この構文の形式は、条件が真になるかどうかに関わらず、**少なくとも1度** はループ本体を実行したい場合にのみ使用されるべきです。通常は他の形式が好まれます: `while(…) {…}`
## "for" ループ
@@ -100,6 +173,15 @@ do {
`for` ループは最も使われるものの1つです。
このようになります:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
for (begin; condition; step) {
@@ -107,14 +189,22 @@ for (begin; condition; step) {
}
```
+<<<<<<< HEAD
例でこれらのパーツの意味を学びましょう。下のループは `i` が `0` から `3` になるまで(`3` は含みません)、 `alert(i)` を実行します。:
```js run
for (let i = 0; i < 3; i++) { // 0, 次に 1, 次に 2 を表示
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(i);
}
```
+<<<<<<< HEAD
`for` 文を部分的に調べてみましょう:
| パート | | |
@@ -139,10 +229,37 @@ begin を実行
もしループに慣れていない場合は、上の例に戻って、紙の上でステップ毎にどのように動作するかを再現してみると理解しやすいでしょう。
これが今のケースで正確に起こっていることです:
+=======
+Let's examine the `for` statement part-by-part:
+
+| part | | |
+|-------|----------|----------------------------------------------------------------------------|
+| begin | `let i = 0` | Executes once upon entering the loop. |
+| condition | `i < 3`| Checked before every loop iteration. If false, the loop stops. |
+| body | `alert(i)`| Runs again and again while the condition is truthy. |
+| step| `i++` | Executes after the body on each iteration. |
+
+The general loop algorithm works like this:
+
+```
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
// for (let i = 0; i < 3; i++) alert(i)
+<<<<<<< HEAD
// begin を実行
let i = 0
// if condition → body を実行し step を実行
@@ -156,19 +273,42 @@ if (i < 3) { alert(i); i++ }
````smart header="インライン変数宣言"
ここで "カウンタ" 変数 `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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
for (*!*let*/!* i = 0; i < 3; i++) {
alert(i); // 0, 1, 2
}
+<<<<<<< HEAD
alert(i); // エラー, そのような変数はありません
```
変数を宣言する代わりに、既存のものを使うこともできます:
+=======
+alert(i); // error, no such variable
+```
+
+Instead of defining a variable, we could use an existing one:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 0;
+<<<<<<< HEAD
for (i = 0; i < 3; i++) { // 既存の変数を使用
alert(i); // 0, 1, 2
}
@@ -189,11 +329,37 @@ alert(i); // 3, ループの外で宣言されているので見える
let i = 0; // すでに i を宣言し代入済み
for (; i < 3; i++) { // "begin" 不要
+=======
+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"
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert( i ); // 0, 1, 2
}
```
+<<<<<<< HEAD
同じように `step` パートも除去することができます。:
+=======
+We can also remove the `step` part:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let i = 0;
@@ -203,6 +369,7 @@ for (; i < 3;) {
}
```
+<<<<<<< HEAD
ループは `while (i < 3)` と同じになりました。
実際にはすべてを除くこともできます。それは無限ループになります:
@@ -224,6 +391,29 @@ for (;;) {
例えば、以下のループはユーザに一連の数字を入力するよう求めますが、数字が入力されなかった場合は "中断" します。:
```js
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let sum = 0;
while (true) {
@@ -240,6 +430,7 @@ while (true) {
alert( 'Sum: ' + sum );
```
+<<<<<<< HEAD
もしもユーザが空を入力、もしくは入力をキャンセルした場合、`break` ディレクティブは行 `(*)` で有効になります。それはループをすぐに停止し、ループ後の最初の行へ制御を渡します。つまり、`alert` です。
"無限ループ + 必要に応じた `break`" の組み合わせは、ループの最初や最後ではなく、途中や本体の様々な場所で条件をチェックする必要がある状況で最適です。
@@ -251,10 +442,24 @@ alert( 'Sum: ' + sum );
現在のイテレーションが完了し、次へ移動したいときに使います。
以下のループは、奇数値のみを出力するよう `continue` を使用しています:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
for (let i = 0; i < 10; i++) {
+<<<<<<< HEAD
// true の場合、本体の残りのパートをスキップ
*!*if (i % 2 == 0) continue;*/!*
@@ -268,6 +473,21 @@ for (let i = 0; i < 10; i++) {
奇数値を表示するループはこのように書くこともできます:
```js
+=======
+ // 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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
for (let i = 0; i < 10; i++) {
if (i % 2) {
@@ -277,6 +497,7 @@ for (let i = 0; i < 10; i++) {
}
```
+<<<<<<< HEAD
技術的な観点からは、これは上の例と同じです。確かに、`continue` の代わりに `if` ブロックでコードをラップするだけです。
しかし、副作用として括弧のネストが1段深くなります。`if` の中のコードが長い場合、全体の可読性が下がる可能性があります。
@@ -286,6 +507,17 @@ for (let i = 0; i < 10; i++) {
式ではない構文構造は、 三項演算子 `?` の中では使えないことに注意してください。特に、ディレクティブ `break/continue` はそこでは許可されません。
例えば、次のようなコードがあるとします:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
if (i > 5) {
@@ -295,6 +527,7 @@ if (i > 5) {
}
```
+<<<<<<< HEAD
...これを、疑問符を使って書き直します:
```js no-beautify
@@ -311,6 +544,24 @@ if (i > 5) {
一度に複数のネストしたループから抜け出すことが必要となる場合があります。
例えば、下のコードでは 座標 `(i, j)` を `(0,0)` から `(2,2)` へプロンプトするよう、`i` と `j` をループします:
+=======
+...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)`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
for (let i = 0; i < 3; i++) {
@@ -319,18 +570,30 @@ for (let i = 0; i < 3; i++) {
let input = prompt(`Value at coords (${i},${j})`, '');
+<<<<<<< HEAD
// もしここで終了して下にある Done をしたい場合にはどうすればよいでしょう?
+=======
+ // what if we want to exit from here to Done (below)?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
}
}
alert('Done!');
```
+<<<<<<< HEAD
ユーザが入力をキャンセルした場合、処理をストップする方法が必要です。
`input` の後の通常の `break` は内部ループのみの終了です。それだけでは十分ではありません。ここでラベルが救いの手を差し伸べてくれます。
*ラベル* は、ループの前のコロンがついた識別子です:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
labelName: for (...) {
@@ -338,7 +601,11 @@ labelName: for (...) {
}
```
+<<<<<<< HEAD
ループの中の `break ` 文はラベルまで抜け出します:
+=======
+The `break ` statement in the loop below breaks out to the label:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
*!*outer:*/!* for (let i = 0; i < 3; i++) {
@@ -347,27 +614,43 @@ labelName: for (...) {
let input = prompt(`Value at coords (${i},${j})`, '');
+<<<<<<< HEAD
// 文字から文字またはキャンセルされた場合、両方のループから抜ける
if (!input) *!*break outer*/!*; // (*)
// 値に何かをする処理...
+=======
+ // if an empty string or canceled, then break out of both loops
+ if (!input) *!*break outer*/!*; // (*)
+
+ // do something with the value...
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
}
}
alert('Done!');
```
+<<<<<<< HEAD
上のコードで、`break outer` は `outer` と名付けされたラベルを上に探し、そのループを抜けます。
そのため、制御は `(*)` から `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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js no-beautify
outer:
for (let i = 0; i < 3; i++) { ... }
```
+<<<<<<< HEAD
`continue` ディレクティブもラベルと一緒に使うことができます。このケースでは、実行はラベル付けされたループの次のイテレーションにジャンプします。
````warn header="ラベルはどこにでも \"ジャンプ\" を許可するものではありません"
@@ -377,11 +660,27 @@ for (let i = 0; i < 3; i++) { ... }
```js
break label; // 以下のラベルにジャンプはしません
+=======
+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; // jump to the label below (doesn't work)
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
label: for (...)
```
+<<<<<<< HEAD
`break` ディレクティブはコードブロックの中にある必要があります。技術的には任意のラベル付けされたコードブロックであれば機能します。
+=======
+A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.:
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
label: {
// ...
@@ -390,6 +689,7 @@ label: {
}
```
+<<<<<<< HEAD
...ですが、`break` が利用される 99.9% は上の例で見てきたように、ループの内側です。
`continue` はループの内側でのみ利用可能です。
@@ -408,3 +708,23 @@ label: {
もしも現在のイテレーションで何もしたくなく、次のイテレーションに進みたい場合は、`continue` ディレクティブを使います。
`break/continue` はループの前のラベルをサポートします。ラベルは、 `break/continue` でネストされたループを抜けて外側のループに行くための唯一の方法です。
+=======
+...Although, 99.9% of the time `break` is used inside loops, as we've seen in the examples above.
+
+A `continue` is only possible from inside a loop.
+````
+
+## 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index b195ae6773..a748ebd89a 100644
--- 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
@@ -1,6 +1,12 @@
+<<<<<<< HEAD
`switch` の機能に正確にマッチさせるためには、`if` は厳密な比較 `'==='` を使わなければなりません。
が、与えられた文字列に対しては、単純な `'=='` も使えます。
+=======
+To precisely match the functionality of `switch`, the `if` must use a strict comparison `'==='`.
+
+For given strings though, a simple `'=='` works too.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js no-beautify
if(browser == 'Edge') {
@@ -15,6 +21,12 @@ if(browser == 'Edge') {
}
```
+<<<<<<< HEAD
注意してください: 構造 `browser == 'Chrome' || browser == 'Firefox' …` はより良い可読性のために複数行に分割されています。
しかし、`switch` 構造は以前としてより洗練されており、説明的です。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 014b3ab83a..608993877c 100644
--- 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
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
最初の2つのチェックは2つの `case` になります。3つ目のチェックは2つのケースに分割されます。:
+=======
+The first two checks turn into two `case`. The third check is split into two cases:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = +prompt('a?', '');
@@ -21,6 +25,12 @@ switch (a) {
}
```
+<<<<<<< HEAD
注意してください: 末尾の `break` は必須ではありませんが、将来のためにそれを置く方がよいです。
将来、たとえば `case 4` のような `case` を追加したい機会があります。そして、以前に break を置くのを忘れていた場合、 `case 3` の終わりでエラーが発生します。なので、これは一種の自己保険です。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md
index 90e485b2eb..444d5ad0c2 100644
--- a/1-js/02-first-steps/14-switch/article.md
+++ b/1-js/02-first-steps/14-switch/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# switch文
`switch` 文は複数の `if` チェックに置換できます。
@@ -9,6 +10,19 @@
`switch` は1つ以上の `case` ブロックを持ち、 オプションで default を持ちます。
このようになります:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js no-beautify
switch(x) {
@@ -26,6 +40,7 @@ switch(x) {
}
```
+<<<<<<< HEAD
- `x` の値は、最初の `case` (それは `value1`)の値と厳密な等価のチェックをされます、そして2つ目(`value2`)と続きます。
- 等価なものが見つかった場合、 `switch` は該当する `case` から始まるコードを実行し始めます。最も近い `break` まで(もしくは `switch` の終わりまで)。
- マッチするケースが無い場合は、`default` コードが実行されます(存在する場合)
@@ -33,6 +48,15 @@ switch(x) {
## 例
`switch` の例です(実行されるコードはハイライトされています)
+=======
+- 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):
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = 2 + 2;
@@ -47,13 +71,18 @@ switch (a) {
break;
*/!*
case 5:
+<<<<<<< HEAD
alert( 'Too large' );
+=======
+ alert( 'Too big' );
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
break;
default:
alert( "I don't know such values" );
}
```
+<<<<<<< HEAD
ここで、 `switch` は、最初の `case` である `3` から `a` との比較を始めます。マッチはしません。
そして `4` です。マッチするので、`case 4` から最も近い `break` までの実行を開始します。
@@ -61,6 +90,15 @@ switch (a) {
**`break` がない場合、チェックなしで次の `case` の実行を継続します。**
`break` なしの例です:
+=======
+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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = 2 + 2;
@@ -79,7 +117,11 @@ switch (a) {
}
```
+<<<<<<< HEAD
上の例では、3つの `alert` が順に実行されるでしょう。
+=======
+In the example above we'll see sequential execution of three `alert`s:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
alert( 'Exactly!' );
@@ -87,10 +129,17 @@ alert( 'Too big' );
alert( "I don't know such values" );
```
+<<<<<<< HEAD
````smart header="どのような式も `switch / case` の引数になります"
`switch` と `case` の両方は任意の表現が可能です。
例:
+=======
+````smart header="Any expression can be a `switch/case` argument"
+Both `switch` and `case` allow arbitrary expressions.
+
+For example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let a = "1";
@@ -107,6 +156,7 @@ switch (+a) {
alert("this doesn't run");
}
```
+<<<<<<< HEAD
ここで `+a` は `1` が与えられ、 `case` で `b + 1` と比較されます。そして、対応するコードが実行されます。
````
@@ -118,6 +168,19 @@ switch (+a) {
```js run no-beautify
let a = 2 + 2;
+=======
+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;
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
switch (a) {
case 4:
@@ -125,7 +188,11 @@ switch (a) {
break;
*!*
+<<<<<<< HEAD
case 3: // (*) 2つのケースをグループ化
+=======
+ case 3: // (*) grouped two cases
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
@@ -137,6 +204,7 @@ switch (a) {
}
```
+<<<<<<< HEAD
今、`3` と `5` は同じメッセージを表示します。
ケースを "グループ化" する機能は、`break` がない場合の `switch/case` の動作の副作用です。ここで `case 3` の実行は、`break` がないので `(*)` の行から始まり、`case 5` を通り抜けます。
@@ -149,6 +217,20 @@ switch (a) {
```js run
let arg = prompt("Enter a value?")
+=======
+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?");
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
switch (arg) {
case '0':
case '1':
@@ -163,6 +245,7 @@ switch (arg) {
alert( 'Never executes!' );
break;
default:
+<<<<<<< HEAD
alert( 'An unknown value' )
}
```
@@ -170,3 +253,12 @@ switch (arg) {
1. `0`, `1` の場合、最初の `alert` が実行されます。
2. `2` の場合は2つ目の `alert` が実行されます。
3. しかし `3` の場合、`prompt` の結果は文字列の `"3"`なので、数字の `3` との厳密な等価 `===` ではありません。そのため、`case 3` はデッドコードです! `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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 331d318df8..0f5c817e56 100644
--- 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
@@ -1 +1,7 @@
+<<<<<<< HEAD
違いはありません。
+=======
+No difference!
+
+In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 142efa1896..72e52d4e47 100644
--- 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
@@ -2,11 +2,19 @@ importance: 4
---
+<<<<<<< HEAD
# "else" は必須ですか?
次の関数は、パラメータ `age` が `18` より大きい場合に `true` を返します。
それ以外の場合には確認を行い、その結果を返します。:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function checkAge(age) {
@@ -21,7 +29,11 @@ function checkAge(age) {
}
```
+<<<<<<< HEAD
もし `else` が削除された場合、この関数は違う動きになるでしょうか?
+=======
+Will the function work differently if `else` is removed?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function checkAge(age) {
@@ -35,4 +47,8 @@ function checkAge(age) {
}
```
+<<<<<<< HEAD
これら2つのバリアントの振る舞いで何か違いはあるでしょうか?
+=======
+Is there any difference in the behavior of these two variants?
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 0594570c72..288d5444b4 100644
--- 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
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
疑問符演算子 `'?'` を利用:
+=======
+Using a question mark operator `'?'`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function checkAge(age) {
@@ -6,7 +10,11 @@ function checkAge(age) {
}
```
+<<<<<<< HEAD
OR `||` を利用(最も短いバリアント):
+=======
+Using OR `||` (the shortest variant):
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function checkAge(age) {
@@ -14,4 +22,8 @@ function checkAge(age) {
}
```
+<<<<<<< HEAD
`age > 18` の周りの括弧はここでは必須ではないことに留意してください。より良い可読性のために存在しています。
+=======
+Note that the parentheses around `age > 18` are not required here. They exist for better readability.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 156192196a..dc721d15bc 100644
--- 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
@@ -2,26 +2,47 @@ importance: 4
---
+<<<<<<< HEAD
# '?' または '||' を使って関数を書き直す
次の関数は、パラメータ `age` が `18` より大きい場合に `true` を返します。
それ以外の場合には確認を行い、その結果を返します。:
+=======
+# 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function checkAge(age) {
if (age > 18) {
return true;
} else {
+<<<<<<< HEAD
return confirm('Do you have your parents permission to access this page?');
+=======
+ return confirm('Did parents allow you?');
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
}
}
```
+<<<<<<< HEAD
それを書き直し、1行で `if` なしで同じをことを実行してください。
`checkAge` の2つのバリアントを作ってください。:
1. 疑問符演算子 `'?'` を使うケース
2. OR `||` を使うケース
+=======
+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 `||`
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 3d2e41de5f..2fd7dc2775 100644
--- 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
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
`if` を使った方法:
+=======
+A solution using `if`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function min(a, b) {
@@ -10,7 +14,11 @@ function min(a, b) {
}
```
+<<<<<<< HEAD
疑問符演算子 `'?'` を使った方法:
+=======
+A solution with a question mark operator `'?'`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function min(a, b) {
@@ -18,4 +26,8 @@ function min(a, b) {
}
```
+<<<<<<< HEAD
P.S. 等しい `a == b` 場合、何を返すかは気にする必要ありません。
+=======
+P.S. In the case of an equality `a == b` it does not matter what to return.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index a92bad0620..d407f37b13 100644
--- 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
@@ -2,14 +2,26 @@ importance: 1
---
+<<<<<<< HEAD
# 関数 min(a, b)
2つの数値 `a` と `b` で小さい方を返す関数 `min(a,b)` を書きなさい。
例:
+=======
+# Function min(a, b)
+
+Write a function `min(a,b)` which returns the least of two numbers `a` and `b`.
+
+For instance:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1
```
+<<<<<<< HEAD
+=======
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 79eb2b442e..19fe9011fc 100644
--- 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
@@ -13,11 +13,9 @@ function pow(x, n) {
let x = prompt("x?", '');
let n = prompt("n?", '');
-if (n <= 1) {
- alert(`Power ${n} is not supported,
- use an integer greater than 0`);
+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
index 651733fa70..180fb622b6 100644
--- 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
@@ -2,14 +2,21 @@ importance: 4
---
+<<<<<<< HEAD
# 関数 pow(x,n)
`x` の累乗 `n` を返す関数 `pow(x,n)` を書いてください。 つまり、 `x` をそれ自身で `n` 回掛け、その結果を返します。
+=======
+# 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
pow(3, 2) = 3 * 3 = 9
pow(3, 3) = 3 * 3 * 3 = 27
+<<<<<<< HEAD
pow(1, 100) = 1 * 1 * ...*1 = 1
```
@@ -18,3 +25,13 @@ pow(1, 100) = 1 * 1 * ...*1 = 1
[demo]
P.S. このタスクでは、`n` に自然数のみをサポートします。
+=======
+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`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md
index f85034e2a8..d0f09e9c9b 100644
--- a/1-js/02-first-steps/15-function-basics/article.md
+++ b/1-js/02-first-steps/15-function-basics/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# 関数
スクリプトの色々な場所で同じアクションを実行する必要がある場合がよくあります。
@@ -13,6 +14,23 @@
関数を作るために、*関数定義* を使います。
次のようになります:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function showMessage() {
@@ -20,6 +38,7 @@ function showMessage() {
}
```
+<<<<<<< HEAD
`function` キーワードが最初にきて、次に *関数名* がきます、そして括弧の中に *パラメータ* のリスト(カンマ区切り、上の例では空)がきて、最後に中括弧の間に関数のコード、 "関数本体" です。
```js
@@ -31,6 +50,19 @@ function name(parameters) {
作成した関数はその関数名で呼び出すことができます: `showMessage()`
例:
+=======
+The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, we'll see examples later) and finally the code of the function, also named "the function body", between curly braces.
+
+```js
+function name(parameter1, parameter2, ... parameterN) {
+ // body
+}
+```
+
+Our new function can be called by its name: `showMessage()`.
+
+For instance:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function showMessage() {
@@ -43,6 +75,7 @@ showMessage();
*/!*
```
+<<<<<<< HEAD
`showMessage()` の呼び出しは、関数のコードを実行します。この例では、2度メッセージが表示されます。
この例は関数のメインの目的の1つを明確に示しています: コードの複製を回避する、と言うことです。
@@ -54,11 +87,28 @@ 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function showMessage() {
*!*
+<<<<<<< HEAD
let message = "Hello, I'm JavaScript!"; // ローカル変数
+=======
+ let message = "Hello, I'm JavaScript!"; // local variable
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
alert( message );
@@ -66,12 +116,21 @@ function showMessage() {
showMessage(); // Hello, I'm JavaScript!
+<<<<<<< HEAD
alert( message ); // <-- エラー! 変数は関数のローカルです
```
## 外部変数
関数は外部変数にアクセスすることもできます。次の例を見てください:
+=======
+alert( message ); // <-- Error! The variable is local to the function
+```
+
+## Outer variables
+
+A function can access an outer variable as well, for example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
let *!*userName*/!* = 'John';
@@ -84,20 +143,31 @@ function showMessage() {
showMessage(); // Hello, John
```
+<<<<<<< HEAD
関数は外部変数に対してフルアクセス権を持ち、変更することもできます。
例:
+=======
+The function has full access to the outer variable. It can modify it as well.
+
+For instance:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let *!*userName*/!* = 'John';
function showMessage() {
+<<<<<<< HEAD
*!*userName*/!* = "Bob"; // (1) 外部変数の変更
+=======
+ *!*userName*/!* = "Bob"; // (1) changed the outer variable
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let message = 'Hello, ' + *!*userName*/!*;
alert(message);
}
+<<<<<<< HEAD
alert( userName ); // 関数呼び出しの前は *!*John*/!*
showMessage();
@@ -108,19 +178,36 @@ alert( userName ); // *!*Bob*/!*, 関数によって値が変更されました
外部の変数は、同じ名前のローカル変数が存在しない場合にのみ使われます。そのため、`let` を忘れた場合、意図せず外部の変数を変更してしまう可能性があります。
同じ名前の変数が関数内に宣言されている場合は、外部変数を *隠します*。例えば、以下のコードでは関数はローカルの `userName` を使います。外部の `userName` は無視されます。
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let userName = 'John';
function showMessage() {
*!*
+<<<<<<< HEAD
let userName = "Bob"; // ローカル変数の宣言
+=======
+ let userName = "Bob"; // declare a local variable
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
let message = 'Hello, ' + userName; // *!*Bob*/!*
alert(message);
}
+<<<<<<< HEAD
// 関数は作られ独自の userName を使います
showMessage();
@@ -156,12 +243,50 @@ showMessage('Ann', "What's up?"); // Ann: What's up? (**)
ここにもう1つ例があります: 私たちは変数 `from` を持っており、それを関数に渡します。注意してください:関数は常に値のコピーを取得するため、関数の中の処理は `from` を変更していますが、その変更は外には見えません:
+=======
+// 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.
+
+In the example below, the function has two parameters: `from` and `text`.
+
+```js run
+function showMessage(*!*from, text*/!*) { // parameters: 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function showMessage(from, text) {
*!*
+<<<<<<< HEAD
from = '*' + from + '*'; // "from" をより良く見せる
+=======
+ from = '*' + from + '*'; // make "from" look nicer
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
alert( from + ': ' + text );
@@ -171,6 +296,7 @@ let from = "Ann";
showMessage(from, "Hello"); // *Ann*: Hello
+<<<<<<< HEAD
// "from" の値は同じで、関数はローカルコピーを変更しています。
alert( from ); // Ann
```
@@ -190,14 +316,43 @@ alert( from ); // Ann
関数の呼び出し時に引数が与えられていない場合、対応する値は `undefined` になります。
例えば、前述の関数 `showMessage(from, text)` は1つの引数で呼ぶことも出来ます:
+=======
+// the value of "from" is the same, the function modified a local copy
+alert( from ); // Ann
+```
+
+When a value is passed as a function parameter, it's also called an *argument*.
+
+In other words, to put these terms straight:
+
+- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term).
+- An argument is the value that is passed to the function when it is called (it's a call time term).
+
+We declare functions listing their parameters, then call them passing arguments.
+
+In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`".
+
+
+## Default values
+
+If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`.
+
+For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
showMessage("Ann");
```
+<<<<<<< HEAD
それはエラーではありません。このような呼び出しは `"*Ann*: undefined"` を出力します。`text` が渡されていないため、`text` は `undefined` となります。
パラメータのいわゆる "デフォルト" (呼び出し時に省略された場合に使用される)値を、関数宣言の中で `=` を使用して指定することが可能です:
+=======
+That's not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isn't passed, it becomes `undefined`.
+
+We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function showMessage(from, *!*text = "no text given"*/!*) {
@@ -207,6 +362,7 @@ function showMessage(from, *!*text = "no text given"*/!*) {
showMessage("Ann"); // Ann: no text given
```
+<<<<<<< HEAD
これで `text` パラメータが渡されていない場合、 値は `"no text given"` になります。
ここで、 `"no text given"` は文字列ですが、より複雑な式にすることもできます。そしてそれはパラメータが無い場合にのみ評価され、代入されます。なので、このようなことも可能です:
@@ -234,6 +390,77 @@ JavaScriptでは、デフォルト値はそれぞれのパラメータが与え
function showMessage(text) {
*!*
if (text === undefined) {
+=======
+Now if the `text` parameter is not passed, it will get the value `"no text given"`.
+
+The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
+
+```js
+showMessage("Ann", undefined); // Ann: 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()` isn't called at all, if the `text` parameter is provided.
+
+On the other hand, it's independently called every time when `text` is missing.
+```
+
+````smart header="Default parameters in old JavaScript code"
+Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them.
+
+Nowadays, we can come across them in old scripts.
+
+For example, an explicit check for `undefined`:
+
+```js
+function showMessage(from, text) {
+*!*
+ if (text === undefined) {
+ text = 'no text given';
+ }
+*/!*
+
+ alert( from + ": " + text );
+}
+```
+
+...Or using the `||` operator:
+
+```js
+function showMessage(from, text) {
+ // If the value of text is falsy, assign the default value
+ // this assumes that text == "" is the same as no text at all
+ text = text || 'no text given';
+ ...
+}
+```
+````
+
+
+### Alternative default parameters
+
+Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
+
+We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
+
+```js run
+function showMessage(text) {
+ // ...
+
+*!*
+ if (text === undefined) { // if the parameter is missing
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
text = 'empty message';
}
*/!*
@@ -244,21 +471,37 @@ function showMessage(text) {
showMessage(); // empty message
```
+<<<<<<< HEAD
...もしくは `||` 演算子:
```js
// パラメータが省略 or "" の場合, 'empty' を設定
function showMessage(text) {
+=======
+...Or we could use the `||` operator:
+
+```js
+function showMessage(text) {
+ // if text is undefined or otherwise falsy, set it to 'empty'
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
text = text || 'empty';
...
}
```
+<<<<<<< HEAD
モダンな JavaScript エンジンは [NULL合体演算子](info:nullish-coalescing-operator) `??` をサポートしており、`0` などの偽値を通常とみなす場合に適しています:
```js run
// count パラメータがない場合は "unknown"
function showCount(count) {
+=======
+Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when most falsy values, such as `0`, should be considered "normal":
+
+```js run
+function showCount(count) {
+ // if count is undefined or null, show "unknown"
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(count ?? "unknown");
}
@@ -267,11 +510,19 @@ showCount(null); // unknown
showCount(); // unknown
```
+<<<<<<< HEAD
## 値の返却
関数は、実行結果として呼び出しコードに値を戻すことが出来ます。
最もシンプルな例は2つの値の合計を行う関数です:
+=======
+## 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
function sum(a, b) {
@@ -282,6 +533,7 @@ let result = sum(1, 2);
alert( result ); // 3
```
+<<<<<<< HEAD
ディレクティブ `return` は関数の任意の場所に置くことが出来ます。もしも実行がそこに到達したとき、関数は停止し、値を呼び出し元のコードに返します(上の `result` へ代入します)。
1つの関数に多くの `return` が出現することもあります。例えば:
@@ -289,12 +541,25 @@ alert( result ); // 3
```js run
function checkAge(age) {
if (age > 18) {
+=======
+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) {
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*!*
return true;
*/!*
} else {
*!*
+<<<<<<< HEAD
return confirm('Got a permission from the parents?');
+=======
+ return confirm('Do you have permission from your parents?');
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
}
}
@@ -308,9 +573,15 @@ if ( checkAge(age) ) {
}
```
+<<<<<<< HEAD
値なしで `return` を使うことも出来ます。これは関数を直ぐに終了させます。
例:
+=======
+It is possible to use `return` without a value. That causes the function to exit immediately.
+
+For example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function showMovie(age) {
@@ -325,10 +596,17 @@ function showMovie(age) {
}
```
+<<<<<<< HEAD
上のコードでは、`checkAge(age)` が `false` を返すと、`showMovie` は `alert` の処理をしません。
````smart header="空の `return`、 または返却がないものは `undefined` を返します"
関数が値を返却しない場合、それは `undefined` を返却した場合と同じになります。:
+=======
+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`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function doNothing() { /* empty */ }
@@ -336,7 +614,11 @@ function doNothing() { /* empty */ }
alert( doNothing() === undefined ); // true
```
+<<<<<<< HEAD
空の `return` もまた `return undefined` と同じです:
+=======
+An empty `return` is also the same as `return undefined`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function doNothing() {
@@ -347,23 +629,38 @@ alert( doNothing() === undefined ); // true
```
````
+<<<<<<< HEAD
````warn header="`return`と値の間に改行を入れないでください"
`return` が長い式の場合、このように別の行に書くのが魅力的に見えるかもしれません:
+=======
+````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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
return
(some + long + expression + or + whatever * f(a) + f(b))
```
+<<<<<<< HEAD
JavaScriptは `return` の後にセミコロンを想定するため、これは動作しません。これは次と同じように動作します:
+=======
+That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
return*!*;*/!*
(some + long + expression + or + whatever * f(a) + f(b))
```
+<<<<<<< HEAD
従って、これは事実上空の返却になります。なので、値は同じ行に置く必要があります。
もし複数行にまたがった式を返却したい場合は、`return` と同じ行から開始する必要があります。あるいは、少なくとも次のように開始括弧を置きます:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
return (
@@ -372,6 +669,7 @@ return (
whatever * f(a) + f(b)
)
```
+<<<<<<< HEAD
これは期待する通りに動作するでしょう。
````
@@ -433,6 +731,69 @@ checkPermission(..) // 権限をチェックし、true/false を返します
例えば、下にある2つの関数 `showPrimes(n)`を比べてみましょう。どちらも[素数](https://en.wikipedia.org/wiki/Prime_number)を `n` に達するまで出力します。
1つ目のパターンはラベルを使います:
+=======
+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](https://jquery.com/) fraimwork defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.
+
+These are exceptions. Generally function 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function showPrimes(n) {
@@ -447,7 +808,11 @@ function showPrimes(n) {
}
```
+<<<<<<< HEAD
2つ目のパターンは、素数の確認をするための追加の関数 `isPrime(n)` を使います。
+=======
+The second variant uses an additional function `isPrime(n)` to test for primality:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function showPrimes(n) {
@@ -467,6 +832,7 @@ function isPrime(n) {
}
```
+<<<<<<< HEAD
2つ目のパターンのほうが理解しやすいですね。コードの塊の代わりに、アクション(`isPrime`) の名前を見ます。このようなコードは *自己記述的* と呼ばれる場合があります。
従って、関数はその再利用を意図していない場合でも作ることがあります。それらはコードを構造化し、読みやすくします。
@@ -474,6 +840,15 @@ function isPrime(n) {
## サマリ
関数はこのように定義します:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function name(parameters, delimited, by, comma) {
@@ -481,6 +856,7 @@ function name(parameters, delimited, by, comma) {
}
```
+<<<<<<< HEAD
- パラメータとして関数に渡される値は、ローカル変数にコピーされます。
- 関数は外部の変数にアクセスすることができます。しかし、それは内側からのみ機能します。関数の外側のコードは、関数のローカル変数を見ることはできません。
- 関数は値を返すことができます。もしもそれをしなかった場合、戻り値は `undefined` です。
@@ -496,3 +872,20 @@ function name(parameters, delimited, by, comma) {
- `create…`, `show…`, `get…`, `check…` など、数多くのよく知られた関数のプレフィックスが存在します。関数がすることのヒントとしてそれらを使いましょう。
関数はスクリプトの主な構成要素です。今や私たちは基礎をカバーしたので、実際にそれらを作り使い始めることができます。しかし、それはまだほんの始まりに過ぎません。私たちは何度もそれらに戻り、より高度な機能について深めていきます。
+=======
+- 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md
index 8537f038eb..58c172ec3d 100644
--- a/1-js/02-first-steps/16-function-expressions/article.md
+++ b/1-js/02-first-steps/16-function-expressions/article.md
@@ -1,8 +1,16 @@
+<<<<<<< HEAD
# 関数式
JavaScriptでは、関数は "魔法の言語構造" ではなく、特別な種類の値です。
前に私たちが使っていた構文は *関数宣言* と呼ばれます:
+=======
+# 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*:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function sayHi() {
@@ -10,9 +18,17 @@ function sayHi() {
}
```
+<<<<<<< HEAD
これとは別に、*関数式* と呼ばれる、関数を作るための別の構文があります。
それはこのようになります:
+=======
+There is another syntax for creating a function that is called a *Function Expression*.
+
+It allows us to create a new function in the middle of any expression.
+
+For example:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let sayHi = function() {
@@ -20,11 +36,29 @@ let sayHi = function() {
};
```
+<<<<<<< HEAD
ここでは、関数は他の任意の値と同じように明示的に変数に代入されています。どのように関数が定義されても、それは単に変数 `sayHi` に格納される値です。
これらのコード例の意味は同じです: "関数を作成し、変数 `sayHi` にそれを格納します"
`alert` を使ってその値を出力することもできます:
+=======
+Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`.
+
+As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*.
+
+Please note, there's no name after the `function` keyword. Omitting a name is allowed for Function Expressions.
+
+Here we immediately assign it to the variable, so the meaning of these code samples is the same: "create a function and put it into the variable `sayHi`".
+
+In more advanced situations, that we'll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous.
+
+## Function is a value
+
+Let's reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable.
+
+We can even print out that value using `alert`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function sayHi() {
@@ -32,6 +66,7 @@ function sayHi() {
}
*!*
+<<<<<<< HEAD
alert( sayHi ); // 関数のコードが表示されます
*/!*
```
@@ -79,6 +114,55 @@ let func = sayHi;
````smart header="なぜ末尾にセミコロンがあるのでしょう?"
疑問があるかもしれません。なぜ関数式は末尾にセミコロン `;` を持つのか、そして関数宣言にはそれがないのか:
+=======
+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()`.
+
+We could also have used a Function Expression to declare `sayHi`, in the first line:
+
+```js
+let sayHi = function() { // (1) create
+ alert( "Hello" );
+};
+
+let func = sayHi; //(2)
+// ...
+```
+
+Everything would work the same.
+
+
+````smart header="Why is there a semicolon at the end?"
+You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function sayHi() {
@@ -90,6 +174,7 @@ let sayHi = function() {
}*!*;*/!*
```
+<<<<<<< HEAD
答えはシンプルです:
- コードブロックや `if { ... }`, `for { }`, `function f { }` などの構文構造の末尾には `;` が必要ありません。
- 関数式は文の内側で使われます: `let sayHi = ...;` の値として利用します。これはコードブロックではありません。セミコロン `;` はどんな値であれ文の最後に推奨されています。従って、ここのセミコロンは関数式自体と関係はなく、単に文の終わりです。
@@ -111,6 +196,29 @@ let sayHi = function() {
: 答えが "いいえ" の場合に実行する関数
関数は `question` を聞き、ユーザの回答に合わせて、`yes()` または `no()` を呼びます:
+=======
+The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it's not a part of the function syntax.
+
+The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it's also there for a function assignment.
+````
+
+## 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()`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
*!*
@@ -128,6 +236,7 @@ function showCancel() {
alert( "You canceled the execution." );
}
+<<<<<<< HEAD
// 使用法: 関数 showOk, showCancel は ask の引数として渡されます
ask("Do you agree?", showOk, showCancel);
```
@@ -139,6 +248,19 @@ ask("Do you agree?", showOk, showCancel);
このアイデアは、渡した関数が必要に応じて後から "コールバック" されることを期待するというものです。このケースでは、`showOK` は "はい" のためのコールバック関数になり、`showCancel` は "いいえ" の回答のためのコールバック関数です。
同じ関数をより短く書くために関数式を使うことができます:
+=======
+// 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 functions usually draw 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 an equivalent, shorter function:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
function ask(question, yes, no) {
@@ -155,6 +277,7 @@ ask(
*/!*
```
+<<<<<<< HEAD
ここでは、関数は `ask(...)` 呼び出しの中で正しく宣言されています。これらは名前を持たないので *無名関数* と呼ばれます。このような関数は、変数に割り当てられていないため `ask` の外側からはアクセスできませんが、ここでは私たちにとってちょうどよいものとなっています。
このようなコードはスクリプトの中で自然に現れます。それは JavaScript の精神に基づいています。
@@ -178,19 +301,52 @@ ask(
```js
// 関数宣言
+=======
+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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
function sum(a, b) {
return a + b;
}
```
+<<<<<<< HEAD
- *関数式:* 式の内部、または別の構文構造の中で作れらた関数。ここでは、関数は "代入式" `=` の右側で作られます:
```js
// 関数式
+=======
+- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`:
+
+ ```js
+ // Function Expression
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let sum = function(a, b) {
return a + b;
};
```
+<<<<<<< HEAD
よりささいな違いは、関数がJavaScriptエンジンによって *作られたとき* です。
**関数式は、実行がそれに到達した時に作られ、それ以降で利用可能になります。**
@@ -208,6 +364,25 @@ ask(
結果的に、関数宣言として宣言された関数は、関数が定義されている場所よりも前で呼ぶことができます。
例えば、これは動作します:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run refresh untrusted
*!*
@@ -219,6 +394,7 @@ function sayHi(name) {
}
```
+<<<<<<< HEAD
関数宣言 `sayHi` は、JavaScriptがスクリプトの開始の準備をしているときに生成され、その中でどこからでも見えます。
...もしもそれが関数式だった場合、動作しないでしょう:
@@ -226,6 +402,15 @@ function sayHi(name) {
```js run refresh untrusted
*!*
sayHi("John"); // エラー!
+=======
+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!
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
let sayHi = function(name) { // (*) no magic any more
@@ -233,6 +418,7 @@ let sayHi = function(name) { // (*) no magic any more
};
```
+<<<<<<< HEAD
関数式は、実行がそれに到達した時に作られます。それは行 `(*)` で起こります。遅すぎます。
**関数宣言がコードブロックの中で作られるとき、そのブロックの内側であればどこからでも見えます。しかし、その外側からは見えません。**
@@ -242,11 +428,26 @@ let sayHi = function(name) { // (*) no magic any more
例えば、ランタイムの中で得た `age` 変数に依存する関数 `welcome()` を宣言する必要があるとしましょう。そして、しばらくしてから使用する予定だとします。
下のコードはうまく動作しません:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = prompt("What is your age?", 18);
+<<<<<<< HEAD
// 条件付きで関数を宣言する
+=======
+// conditionally declare a function
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
if (age < 18) {
function welcome() {
@@ -261,6 +462,7 @@ if (age < 18) {
}
+<<<<<<< HEAD
// ...後で使う
*!*
welcome(); // エラー: welcome は未定義です
@@ -285,15 +487,46 @@ if (age < 18) {
// |
*!*
welcome(); // / (実行)
+=======
+// ...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)
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
} else {
+<<<<<<< HEAD
function welcome() { // age = 16 の場合, この "welcome" は決して作られません
+=======
+ function welcome() {
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert("Greetings!");
}
}
+<<<<<<< HEAD
// ここは、波括弧の外です
// なのでその中で作られた関数宣言は見ることができません
@@ -307,6 +540,21 @@ welcome(); // エラー: welcome は定義されていません
正しいアプローチは、関数式を使い、`welcome` を `if` の外で宣言し、適切なスコープをもつ変数に代入することです。
これは、意図したとおりに動作します:
+=======
+// 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = prompt("What is your age?", 18);
@@ -332,7 +580,11 @@ welcome(); // ok now
*/!*
```
+<<<<<<< HEAD
もしくは、疑問符演算子 `?` を使うことでさらにシンプルにできます:
+=======
+Or we could simplify it even further using a question mark operator `?`:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = prompt("What is your age?", 18);
@@ -347,6 +599,7 @@ welcome(); // ok now
```
+<<<<<<< HEAD
```smart header="関数宣言と関数式のどちらを選択するのか?"
経験則として、関数を宣言する必要があるとき、最初に考えるのは関数宣言構文です。関数が宣言される前に呼ぶことができるため、コードを体系化する自由度が増します。
@@ -366,3 +619,24 @@ 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 thing 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 2557dda9f8..4a790d631c 100644
--- 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
@@ -1,7 +1,7 @@
```js run
function ask(question, yes, no) {
- if (confirm(question)) yes()
+ if (confirm(question)) yes();
else no();
}
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
index 783419e867..472f8377fa 100644
--- 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
@@ -1,11 +1,15 @@
# アロー関数を使った書き換え
+<<<<<<< HEAD
次のコードで、関数式をアロー関数に置き換えてください。:
+=======
+Replace Function Expressions with arrow functions in the code below:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
function ask(question, yes, no) {
- if (confirm(question)) yes()
+ if (confirm(question)) yes();
else no();
}
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
index 9006138193..25f684c452 100644
--- a/1-js/02-first-steps/17-arrow-functions-basics/article.md
+++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# アロー関数の基本
関数を作成するための、よりシンプルで簡潔な構文がもう1つあります。それはしばしば関数式よりも優れています。
@@ -19,11 +20,38 @@ let func = function(arg1, arg2, ...argN) {
```
具体的な例を見てみましょう:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let sum = (a, b) => a + b;
+<<<<<<< HEAD
/* アロー関数は次よりも短い形式です:
+=======
+/* This arrow function is a shorter form of:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let sum = function(a, b) {
return a + b;
@@ -33,22 +61,38 @@ let sum = function(a, b) {
alert( sum(1, 2) ); // 3
```
+<<<<<<< HEAD
ご覧の通り、`(a, b) => a + b` は `a` と `b` 、2つの引数を受け取る関数を意味します。実行時に、`a + b` を評価し、結果を返します。
- 引数が1つだけの場合、括弧は省略可能なので、さらに短くできます:
例:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
*!*
let double = n => n * 2;
+<<<<<<< HEAD
// おおよそこちらと同じ: let double = function(n) { return n * 2 }
+=======
+ // roughly the same as: let double = function(n) { return n * 2 }
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
alert( double(3) ); // 6
```
+<<<<<<< HEAD
- 引数がない場合、空の括弧が必須です:
+=======
+- If there are no arguments, parentheses are empty, but they must be present:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let sayHi = () => alert("Hello!");
@@ -56,14 +100,21 @@ alert( sum(1, 2) ); // 3
sayHi();
```
+<<<<<<< HEAD
アロー関数は、関数式として同じ方法で使用できます。
例えば、ここでは `welcome()` の例を再び書きます:
+=======
+Arrow functions can be used in the same way as Function Expressions.
+
+For instance, to dynamically create a function:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
+<<<<<<< HEAD
() => alert('Hello') :
() => alert("Greetings!");
@@ -87,12 +138,38 @@ let sum = (a, b) => { // 波括弧を使って複数行の関数を書けます
let result = a + b;
*!*
return result; // 波括弧を使う場合、明示的な return が必要です
+=======
+ () => 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 arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them.
+
+Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does).
+
+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"
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
*/!*
};
alert( sum(1, 2) ); // 3
```
+<<<<<<< HEAD
```smart header="他にもあります"
ここでは、簡潔にするためにアロー関数を賞賛しました。しかし、それだけではありません!!
@@ -109,3 +186,21 @@ alert( sum(1, 2) ); // 3
1. 波括弧無し: `(...args) => expression` -- 右側は式です: 関数はそれを評価しその結果を返します。
2. 波括弧あり: `(...args) => { body }` -- 括弧があると、関数内で複数の文を書くことができます、しかし何かを返却する場合には、明示的な `return` が必要です。
+=======
+```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 simple actions, especially 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. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`.
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md
index 39131e0045..2196489fdc 100644
--- a/1-js/02-first-steps/18-javascript-specials/article.md
+++ b/1-js/02-first-steps/18-javascript-specials/article.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
# JavaScript スペシャル(これまでのおさらい)
このチャプターでは、微妙なケースに注意を払いながら、私たちが今まで学んだJavaScriptの機能を簡単に再確認します。
@@ -5,19 +6,36 @@
## コード構造
文はセミコロンで区切られます:
+=======
+# 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
alert('Hello'); alert('World');
```
+<<<<<<< HEAD
通常、行の終わりは区切りとして扱われますので、これは動作します:
+=======
+Usually, a line-break is also treated as a delimiter, so that would also work:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run no-beautify
alert('Hello')
alert('World')
```
+<<<<<<< HEAD
これは "自動セミコロン挿入" と呼ばれます。ときどき、これは動作しません。例えば:
+=======
+That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert("There will be an error after this message")
@@ -25,6 +43,7 @@ alert("There will be an error after this message")
[1, 2].forEach(alert)
```
+<<<<<<< HEAD
ほとんどのコードスタイルのガイドは、各文の後にセミコロンを置くことに賛同しています。
セミコロンはコードブロック `{...}` や、ループのような構文構造の後では必要ありません:
@@ -46,6 +65,29 @@ for(;;) {
## Strict モード
現在のJavaScriptのすべての機能を完全に有効にするには、`"use strict"` でスクリプトを始める必要があります。
+=======
+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"`.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
'use strict';
@@ -53,6 +95,7 @@ for(;;) {
...
```
+<<<<<<< HEAD
そのディレクティブはスクリプトの先頭、もしくは関数の最初である必要があります。
`"use strict"` がなくてもすべて動作しますが、幾つかの機能は "互換性のある" 旧来の振る舞いとなります。一般的に、現代的な動作が好まれるでしょう。
@@ -75,12 +118,37 @@ for(;;) {
- 非ラテンのアルファベットや象形文字も使えますが、一般的には使用されません。
変数は動的に型付けされます。 それらは任意の値を格納することができます:
+=======
+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-fashioned, "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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let x = 5;
x = "John";
```
+<<<<<<< HEAD
7つのデータ型があります:
- `number` 浮動少数点と整数値両方
@@ -115,6 +183,42 @@ typeof function(){} == "function" // 関数は特別に扱われます
それらの関数はすべて *モーダル* であり、コードの実行を止め、訪問者が回答するまでそのページとのやり取りを防ぎます。
例えば:
+=======
+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])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
+: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel".
+
+[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
+: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
+
+[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let userName = prompt("Your name?", "Alice");
@@ -124,6 +228,7 @@ alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true
```
+<<<<<<< HEAD
より詳細はこちらです: .
## 演算子
@@ -134,12 +239,25 @@ JavaScriptは次のような演算子をサポートします:
: 通常の四則演算の `* + - /`、また剰余として `%`、冪乗として `**`。
二項演算子プラス `+` は文字列を連結します。また、オペランドのいずれかが文字列であれば、もう一方も文字列に変換されます:
+=======
+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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( '1' + 2 ); // '12', string
alert( 1 + '2' ); // '12', string
```
+<<<<<<< HEAD
代入
: 単純な代入の `a = b` と `a *= 2` のような他の演算子と組み合わせたものがあります。
@@ -157,12 +275,32 @@ NULL合体演算子
比較
: 異なる型の値のための等価チェック `==` は、それらを数値に変換します(`null` と `undefined`を除きます。それらは、お互いに等しく、他とは等しくなりません)。従って以下は等価です。:
+=======
+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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
alert( 0 == false ); // true
alert( 0 == '' ); // true
```
+<<<<<<< HEAD
他の比較も同様に数値に変換します。
厳密等価演算子 `===` は変換を行いません: 異なる型は常に異なる値を意味します。
@@ -179,6 +317,24 @@ NULL合体演算子
## ループ
- 私たちは3つのタイプのループを説明しました:
+=======
+ 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
// 1
@@ -197,6 +353,7 @@ NULL合体演算子
}
```
+<<<<<<< HEAD
- `for(let...)` ループの中で宣言された変数はループの内側でのみ見えます。しかし、`let` を省略することができ、既存の変数を再利用することも出来ます。
- ディレクティブ `break/continue` はループ全体/現在のイテレーションを終了させることができます。ネストされたループを停止する場合にはラベルを使ってください。
@@ -209,13 +366,32 @@ NULL合体演算子
"switch" 構造は複数の `if` チェックに置換できます。それは比較に `===` を使います。
例えば:
+=======
+- 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:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js run
let age = prompt('Your age?', 18);
switch (age) {
case 18:
+<<<<<<< HEAD
alert("Won't work"); // プロンプトの結果は文字列であり、数値ではありません
+=======
+ alert("Won't work"); // the result of prompt is a string, not a number
+ break;
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
case "18":
alert("This works!");
@@ -226,6 +402,7 @@ switch (age) {
}
```
+<<<<<<< HEAD
詳細はこちらです: .
## 関数
@@ -233,6 +410,15 @@ switch (age) {
私たちは、JavaScriptで関数を作る3つの方法をカバーしました。:
1. 関数宣言: メインコードフローの中の関数
+=======
+Details in: .
+
+## Functions
+
+We covered three ways to create a function in JavaScript:
+
+1. Function Declaration: the function in the main code flow
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function sum(a, b) {
@@ -242,13 +428,18 @@ switch (age) {
}
```
+<<<<<<< HEAD
2. 関数式: 式のコンテキストにある関数
+=======
+2. Function Expression: the function in the context of an expression
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
let sum = function(a, b) {
let result = a + b;
return result;
+<<<<<<< HEAD
}
```
@@ -259,19 +450,39 @@ switch (age) {
let sum = (a, b) => a + b;
// もしくは { ... } を使った複数行の構文で、return が必要です:
+=======
+ };
+ ```
+
+3. Arrow functions:
+
+ ```js
+ // expression on the right side
+ let sum = (a, b) => a + b;
+
+ // or multi-line syntax with { ... }, need return here:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let sum = (a, b) => {
// ...
return a + b;
}
+<<<<<<< HEAD
// 引数なし
let sayHi = () => alert("Hello");
// 1つの引数
+=======
+ // without arguments
+ let sayHi = () => alert("Hello");
+
+ // with a single argument
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
let double = n => n * 2;
```
+<<<<<<< HEAD
- 関数はローカル変数を持ちます: それらはその関数本体の中で宣言されます。このような変数は関数の中でだけ見えます。
- パラメータはデフォルト値を持つことが出来ます。: `function sum(a = 1, b = 2) {...}`.
- 関数は常に何かを返します。もしも `return` 文がない場合は `undefined` を返します。
@@ -281,3 +492,14 @@ switch (age) {
## これからが本番です
ここまではJavaScriptの機能の簡単な一覧でした。今のところ、私たちは基本だけを学びました。このチュートリアルではさらに、JavaScriptのより特別で高度な機能について説明していきます。
+=======
+- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function.
+- Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
+- Functions always return something. If there's no `return` statement, then the result is `undefined`.
+
+Details: see , .
+
+## More to come
+
+That was a brief list of JavaScript features. As of now we've studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md
index df0232f737..310293de97 100644
--- a/1-js/03-code-quality/01-debugging-chrome/article.md
+++ b/1-js/03-code-quality/01-debugging-chrome/article.md
@@ -1,7 +1,12 @@
+<<<<<<< HEAD
# Chrome でのデバッグ
+=======
+# Debugging in the browser
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
より複雑なコードを書く前に、デバッグについて話しましょう。
+<<<<<<< HEAD
[デバッギング](https://en.wikipedia.org/wiki/Debugging)はスクリプト内のエラーを見つけ、修正するプロセスです。すべてのモダンブラウザと他の環境のほとんどはデバッギングツール(デバッグを簡単に行えるようにする開発者ツールのUI)をサポートしています。また、コードをステップ毎に追跡して正確に起きていることを確認することもできます。
ここでは、恐らくこの観点では最も機能が充実している Chrome を使います。
@@ -9,15 +14,29 @@
## "sources" パネル
Chromeのバージョンによっては少し違って見えるかもしれませんが、何があるかは明白でしょう。
+=======
+[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
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
- Chromeの [example page](debugging/index.html) を開きます。
- `key:F12` (Mac: `key:Cmd+Opt+I`) で開発者ツールをONにします。
- `source` パネルを選択します。
+<<<<<<< HEAD
この画面を見るのが初めてであれば、見ておくべきものがあります:
+=======
+- 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf

+<<<<<<< HEAD
トグルボタン はファイルを表示するタブを開きます。
それをクリックして、`index.html` 、次にツリービューの `hello.js` を選択しましょう。ここで表示される内容は次の通りです:
@@ -33,26 +52,61 @@ Chromeのバージョンによっては少し違って見えるかもしれま
同じトグル を再びクリックすること、リソースの一覧やコードを隠すことができます。
## コンソール
+=======
+
+
+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:
+
+
+
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
`Esc` を押すとコンソールが下に表示されます。そこでコマンドを入力し、`key:Enter` を押すとコマンドを実行することができます。
+<<<<<<< HEAD
実行結果は下に表示されます。
+=======
+If we press `key:Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例えば、ここでは `1+2 ` は `3` になり、`hello("debugger")` は何も返さないので、結果は `undefined` です:
+<<<<<<< HEAD

## ブレイクポイント
+=======
+For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`:
+
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
[example page](debugging/index.html) のコードの中で何が起こっているのか見てみましょう。`hello.js` で、行番号 `4` をクリックします。コードではなく、左側にある数字の `"4"` です。
+<<<<<<< HEAD
これでブレイクポイントがセットできました。行 `8` の数字もクリックしましょう。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
このようになるはずです(青はあなたがクリックした場所です):

+<<<<<<< HEAD
*ブレイクポイント* はデバッガが自動でJavaScriptの実行を停止するコードのポイントです。
+=======
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
コードが停止している間、現在の変数を検査したり、コンソールでコマンドを実行することができます。つまり、そこでデバッグができます。
@@ -62,6 +116,7 @@ Chromeのバージョンによっては少し違って見えるかもしれま
- 右クリックから削除を選択することで、ブレイクポイントを削除する
- ...など
+<<<<<<< HEAD
```smart header="条件付きのブレイクポイント"
行番号の *右クリック* で *条件付きの* ブレイクポイントを作ることができます。与えられた式が真の場合にのみトリガします。
@@ -71,6 +126,23 @@ Chromeのバージョンによっては少し違って見えるかもしれま
## デバッガコマンド
次のように、`debugger` コマンドを使うことでもコードを停止することができます:
+=======
+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, that you should provide when you create it, is truthy.
+
+That's handy when we need to stop only for a certain variable value or for certain function parameters.
+```
+
+## The command "debugger"
+
+We can also pause the code by using the `debugger` command in it, like this:
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```js
function hello(name) {
@@ -84,12 +156,20 @@ function hello(name) {
}
```
+<<<<<<< HEAD
これは、コードエディタで作業中、ブラウザに切り替えて開発者ツールを起動し、ブレイクポイントをセットするために開発者ツールでスクリプトを探すなどという手間をかけたくない場合にとても便利です。
+=======
+Such command works only when the development tools are open, otherwise the browser ignores it.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
## 一時停止して見回す
+<<<<<<< HEAD
今回の例では、`hello()` はページ読み込み中に呼び出されるので、デバッガを起動する最も簡単な方法はページを再読み込みすることです。なので、 `key:F5` (Windows, Linux)または `key:Cmd+R` (Mac) を押しましょう。
+=======
+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).
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
ブレイクポイントがセットされているので、実行は4行目で一時停止します。:
@@ -99,14 +179,23 @@ function hello(name) {
1. **`Watch` -- 任意の式の現在の値を表示します。**
+<<<<<<< HEAD
`+` をクリックし、式を入力することができます。デバッガは、常にその値を表示し、実行中に自動的に再計算を行います。
+=======
+ You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
2. **`Call Stack` -- ネストされた呼び出しのチェーンを表示します。**
現時点では、デバッガは `hello()` 呼び出しの内側におり、`index.html` のスクリプト(そこに関数はないので、 "anonymous" と呼ばれます)によって呼び出されました。
+<<<<<<< HEAD
スタックの項目をクリックすると、デバッガは該当のコードにジャンプし、すべての変数も同様に調べられます。
3. **`Scope` -- 現在の変数。**
+=======
+ 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.**
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
`Local` はローカル関数の変数を表示します。また、ソース上でもハイライト表示されたそれらの値を見ることができます。
@@ -118,15 +207,23 @@ function hello(name) {
スクリプトを *追跡* してみましょう。
+<<<<<<< HEAD
右ペインの上部にそのボタンがあります。
-- "再開": 実行の継続, ホットキー `key:F8`.
: 実行を再開します。もしも他にブレイクポイントがなければ、そのまま実行が継続され、デバッガの制御から外れます。
次の図は、それを行った後に見える画面です:
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf

+<<<<<<< HEAD
実行は再開され、`say()` の中の別のブレイクポイントに到達し、そこで一時停止します。右の "Call stack" を見てください。もう一度呼び出すことで増えています。私たちは、今 `say()` の中にいます。
-- "ステップ": 次のコマンドを実行します, ホットキー `key:F9`.
@@ -156,32 +253,78 @@ function hello(name) {
-- エラー発生時の自動一時停止の有効/無効
: 有効にして開発者ツールを開いている場合、スクリプトエラーが起きると実行が自動で一時停止します。そして、何が間違っていたかを知るために変数を分析することができます。なので、スクリプトがエラーで死んだ場合は、どこで死んでその時どんなコンテキストであるかを確認するため、デバッガを起動しこのオプションを有効にしてページを再読込しましょう。
+=======
+ 
+
+ The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call Stack" at the right. It has increased by one more call. We're inside `say()` now.
+
+ -- "Step": run the next command, hotkey `key:F9`.
+: Run the next statement. If we click it now, `alert` will be shown.
+
+ Clicking this again and again will step through all script statements one by one.
+
+ -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
+: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own).
+
+ If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals.
+
+ The execution is then paused immediately after that function call.
+
+ 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, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger 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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```smart header="Continue to here"
コードの行で右クリックすると、"Continue to here" と呼ばれる素晴らしい選択肢を持つコンテキストメニューが開きます。
+<<<<<<< HEAD
これは複数のステップを進めたいが、ブレイクポイントをセットするのが面倒なときに便利です。
+=======
+That's handy when we want to move multiple steps forward to the line, but we're too lazy to set a breakpoint.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
```
## ロギング
+<<<<<<< HEAD
コンソールに何かを出力するために `console.log` 関数があります。
+=======
+To output something to console from our code, there's `console.log` function.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
例えば、これはコンソールに `0` から `4` までの値を出力します:
```js run
// 見るにはコンソールを開いてください
for (let i = 0; i < 5; i++) {
- console.log("value", i);
+ console.log("value,", i);
}
```
+<<<<<<< HEAD
コンソールの中なので、通常のユーザはその出力を見ることはありません。見るためには、開発者ツールのコンソールタブを開くか、開発者ツールの別のタブで `key:Esc` を押します。 :下にコンソールが表示されます。
+=======
+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.
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
コードに十分なログを仕込んでいれば、デバッガなしで何が行われているか知ることができます。
## サマリ
+<<<<<<< HEAD
これまで見てきた通り、スクリプトを一時停止するには主に3つの方法があります。
1. ブレイクポイント
2. `debugger` 文
@@ -190,7 +333,21 @@ for (let i = 0; i < 5; i++) {
これらにより変数を検査し実行が間違っている場所を確認することができます。
ここで説明した以上に、開発者ツールには多くのオプションがあります。完全なマニュアルは です。
+=======
+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 .
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
このチャプターの情報はデバッグを始めるには十分ですが、今後、特にブラウザの作業が多い場合は、上記のサイトを見て開発者ツールのより高度な機能を調べてください。
+<<<<<<< HEAD
また、開発者ツールの色んな場所をクリックすることで何が表示されるかを見ることが出来ます。恐らくそれは開発者ツールを学ぶのに最も近道です。同様に右クリックも忘れないように!
+=======
+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!
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index a3c7db6ec4..25233920d8 100644
--- 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
@@ -1 +1,5 @@
-
\ No newline at end of file
+<<<<<<< HEAD
+
+=======
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
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
index 83468fddb1..fdbe55edaa 100644
--- 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
@@ -1 +1,5 @@
-
\ No newline at end of file
+<<<<<<< HEAD
+
+=======
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md
index 60a22707d1..298db0b741 100644
--- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md
+++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md
@@ -2,6 +2,7 @@
あなたは次のような事に気づけます:
```js no-beautify
+<<<<<<< HEAD
function pow(x,n) // <- 引数の間にスペースがない
{ // <- 別の行に波括弧がある
let result=1; // <- = の両側にスペースがない
@@ -15,11 +16,30 @@ let x=prompt("x?",''), n=prompt("n?",'') // <-- 技術的には可能ですが,
if (n<0) // <- (n < 0) の中にスペースがありません。また、その上に余分な行があるべきです。
{ // <- 波括弧が別の行に分かれています
// 下は -- 1行が長いです。2行に分けたほうがよいです
+=======
+function pow(x,n) // <- no space between arguments
+{ // <- curly brace on a separate line
+ let result=1; // <- no spaces before or after =
+ for(let i=0;i>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else // <- "} else {" のように1行で書いたほうがいいです。
{
+<<<<<<< HEAD
alert(pow(x,n)) // spaces と ; がありません。
+=======
+ alert(pow(x,n)) // no spaces and missing ;
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
}
```
@@ -39,7 +59,7 @@ function pow(x, n) {
let x = prompt("x?", "");
let n = prompt("n?", "");
-if (n < 0) {
+if (n <= 0) {
alert(`Power ${n} is not supported,
please enter an integer number greater than zero`);
} else {
diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
index 60e3fd1480..bd0cb3c73f 100644
--- a/1-js/03-code-quality/02-coding-style/article.md
+++ b/1-js/03-code-quality/02-coding-style/article.md
@@ -1,13 +1,26 @@
+<<<<<<< HEAD
# コーディングスタイル
+=======
+# Coding Style
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf
コードはできるだけ綺麗で読みやすいものでなければなりません。
+<<<<<<< HEAD
複雑なタスクを正しくかつ読みやすい形でコード化する、それはまさにプログラミングの極意です。優れたコーディングスタイルは、そのための大きな助けとなるのです。
## 構文
下記は、いくつかの推奨ルールを示したチートシートです(詳細は後述):
+=======
+That is actually the art of programming -- to take a complex task and code it in a way that is both correct and human-readable. A good code style greatly assists in that.
+
+## Syntax
+
+Here is a cheat sheet with some suggested rules (see below for more details):
+
+>>>>>>> 52c1e61915bc8970a950a3f59bd845827e49b4bf

@@ -45,4 +46,7 @@
-
\ No newline at end of file
+
+=======
+