initial commit

2 files changed, 382 insertions, 0 deletions

diff --git a/files/my/web/javascript/reference/statements/function_star_/index.html b/files/my/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..414d5f4d63
--- /dev/null
+++ b/files/my/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,252 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div dir="rtl">{{jsSidebar("Statements")}}</div>
+
+<p>The <code><strong>function*</strong></code> declaration (<code>function</code> keyword followed by an asterisk) defines a <em>generator function</em>, which returns a {{jsxref("Global_Objects/Generator","Generator")}} object.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<p>You can also define generator functions using the {{jsxref("GeneratorFunction")}} constructor, or the function expression syntax.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">function* <var>name</var>([<var>param</var>[, <var>param</var>[, ... <var>param</var>]]]) {
+   <var>statements</var>
+}
+</pre>
+
+<dl>
+ <dt><code><var>name</var></code></dt>
+ <dd>The function name.</dd>
+ <dt><code><var>param</var></code> {{optional_inline}}</dt>
+ <dd>The name of a formal parameter for the function.</dd>
+ <dt><code><var>statements</var></code></dt>
+ <dd>The statements comprising the body of the function.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.</p>
+
+<p>Generators in JavaScript -- especially when combined with Promises -- are a very powerful tool for asynchronous programming as they mitigate -- if not entirely eliminate -- the problems with callbacks, such as <a href="http://callbackhell.com/">Callback Hell</a> and <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Inversion of Control</a>. However, an even simpler solution to these problems can be achieved with {{jsxref("Statements/async_function", "async functions")}}.</p>
+
+<p>Calling a generator function does not execute its body immediately; an <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator</a> object for the function is returned instead. When the iterator's <code>next()</code> method is called, the generator function's body is executed until the first {{jsxref("Operators/yield", "yield")}} expression, which specifies the value to be returned from the iterator or, with {{jsxref("Operators/yield*", "yield*")}}, delegates to another generator function. The <code>next()</code> method returns an object with a <code>value</code> property containing the yielded value and a <code>done</code> property which indicates whether the generator has yielded its last value, as a boolean. Calling the <code>next()</code> method with an argument will resume the generator function execution, replacing the <code>yield</code> expression where an execution was paused with the argument from <code>next()</code>.</p>
+
+<p>A <code>return</code> statement in a generator, when executed, will make the generator finish (i.e. the <code>done</code> property of the object returned by it will be set to <code>true</code>). If a value is returned, it will be set as the <code>value</code> property of the object returned by the generator.<br>
+ Much like a <code>return</code> statement, an error is thrown inside the generator will make the generator finished -- unless caught within the generator's body.<br>
+ When a generator is finished, subsequent <code>next()</code> calls will not execute any of that generator's code, they will just return an object of this form: <code>{value: undefined, done: true}</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<pre class="brush: js notranslate">function* idMaker() {
+  var index = 0;
+  while (true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...</pre>
+
+<h3 id="Example_with_yield*">Example with yield*</h3>
+
+<pre class="brush: js notranslate">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Passing_arguments_into_Generators">Passing arguments into Generators</h3>
+
+<pre class="brush: js notranslate">function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();             // 0
+gen.next('pretzel');    // 1 pretzel
+gen.next('california'); // 2 california
+gen.next('mayonnaise'); // 3 mayonnaise
+</pre>
+
+<h3 id="Return_statement_in_a_generator">Return statement in a generator</h3>
+
+<pre class="brush: js notranslate">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generator_as_an_object_property">Generator as an object property</h3>
+
+<pre class="brush: js notranslate">const someObj = {
+  *generator () {
+    yield 'a';
+    yield 'b';
+  }
+}
+
+const gen = someObj.generator()
+
+console.log(gen.next()); // { value: 'a', done: false }
+console.log(gen.next()); // { value: 'b', done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generator_as_an_object_method">Generator as an object method</h3>
+
+<pre class="brush: js notranslate">class Foo {
+  *generator () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const f = new Foo ();
+const gen = f.generator();
+
+console.log(gen.next()); // { value: 1, done: false }
+console.log(gen.next()); // { value: 2, done: false }
+console.log(gen.next()); // { value: 3, done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generator_as_a_computed_property">Generator as a computed property</h3>
+
+<pre class="brush: js notranslate">class Foo {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const SomeObj = {
+  *[Symbol.iterator] () {
+    yield 'a';
+    yield 'b';
+  }
+}
+
+console.log(Array.from(new Foo)); // [ 1, 2 ]
+console.log(Array.from(SomeObj)); // [ 'a', 'b' ]
+</pre>
+
+<h3 id="Generators_are_not_constructable">Generators are not constructable</h3>
+
+<pre class="brush: js notranslate">function* f() {}
+var obj = new f; // throws "TypeError: f is not a constructor
+</pre>
+
+<h3 id="Generator_defined_in_an_expression">Generator defined in an expression</h3>
+
+<pre class="brush: js notranslate">const foo = function* () {
+  yield 10;
+  yield 20;
+};
+
+const bar = foo();
+console.log(bar.next()); // {value: 10, done: false}</pre>
+
+<h3 id="Generator_example">Generator example</h3>
+
+<pre class="syntaxbox notranslate">function* powers(n){
+     //endless loop to generate
+     for(let current =n;; current *= n){
+         yield current;
+     }
+}
+
+for(let power of powers(2)){
+     //controlling generator
+     if(power &gt; 32) break;
+     console.log(power)
+           //2
+          //4
+         //8
+        //16
+       //32
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function declaration")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>Other web resources:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://github.com/mozilla/task.js">Task.js</a></li>
+   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Iterating generators asynchronously</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/my/web/javascript/reference/statements/index.html b/files/my/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..b5f4f3d5e0
--- /dev/null
+++ b/files/my/web/javascript/reference/statements/index.html
@@ -0,0 +1,130 @@
+---
+title: Statements and declarations
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Landing page
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p>
+
+<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2>
+
+<p>For an alphabetical listing see the sidebar on the left.</p>
+
+<h3 id="Control_flow">Control flow</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Throws a user-defined exception.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd>
+</dl>
+
+<h3 id="Declarations">Declarations</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Declares a variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Declares a block scope local variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Declares a read-only named constant.</dd>
+</dl>
+
+<h3 id="Functions_and_classes">Functions and classes</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>Declares a function with the specified parameters.</dd>
+ <dt>{{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Generator Functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd>
+ <dt>{{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Declares an async function with the specified parameters.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Specifies the value to be returned by a function.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Declares a class.</dd>
+</dl>
+
+<h3 id="Iterations">Iterations</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd>
+ <dt>{{jsxref("Statements/for_each...in", "for each...in")}}  </dt>
+ <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd>
+ <dt>{{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Statements/for-await...of", "for await...of")}}</dt>
+ <dd>Iterates over async iterable objects, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>, invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd>
+</dl>
+
+<h3 id="Others">Others</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd>
+ <dt>{{jsxref("Statements/export", "export")}}</dt>
+ <dd>Used to export functions to make them available for imports in external modules, and other scripts.</dd>
+ <dt>{{jsxref("Statements/import", "import")}}</dt>
+ <dd>Used to import functions exported from an external module, another script.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></dt>
+ <dd>An object exposing context-specific metadata to a JavaScript module.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Statements/with", "with")}} </dt>
+ <dd>Extends the scope chain for a statement.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li>
+</ul>