New in JavaScript 1.8

  • Revision slug: JavaScript/New_in_JavaScript/1.8
  • Revision title: New in JavaScript 1.8
  • Revision id: 307255
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment -KumaScript error, brush:js=>brush:xml, -HTML error, attributes(title, href), code indent... and more.

Revision Content

{{ Fx_minversion_header(3) }}

JavaScript 1.8 is part of Gecko 1.9 (which is incorporated into Firefox 3). This is a less substantial update than JavaScript 1.7, but does have some updates to track progress toward ECMAScript 4/JavaScript 2. This release includes all new features specified in JavaScript 1.6 and JavaScript 1.7.

See {{ Bug("380236") }} to track progress on the development of JavaScript 1.8. For the status of the documentation see {{ Bug("421027") }}.

Using JavaScript 1.8

In order to use some of the new features of JavaScript 1.8 in HTML, use:

 <script type="application/javascript;version=1.8"> ... your code ... </script>

Another way (not recommended) to do this is to use the deprecated <script> language attribute and define it as "JavaScript1.8".

When using the JavaScript shell, JavaScript XPCOM components, or XUL <script> elements, the latest JS version (JS1.8 in Mozilla 1.9) is used automatically ({{ Bug(381031) }}, {{ Bug(385159) }}).

The features that require the use of the new keywords "yield" and "let" require you to specify version 1.7 or higher because existing code might use those keywords as variable or function names. The features that do not introduce new keywords (such as generator expressions) can be used without specifying the JavaScript version.

Expression closures (Merge into own page/section)

This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical Lambda notation.

JavaScript 1.7 and older:

function(x) { return x * x; }

JavaScript 1.8:

function(x) x * x

This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.

Examples:

A shorthand for binding event listeners:

 document.addEventListener("click", function() false, true);

Using this notation with some of the array functions from JavaScript 1.6:

elems.some(function(elem) elem.type == "text");

Generator expressions (Merge into Generator expressions)

This addition allows you to simply create generators (which were introduced in JavaScript 1.7). Typically you would have to create a custom function which would have a yield in it, but this addition allows you to use array comprehension-like syntax to create an identical generator statement.

In JavaScript 1.7, you might write something like the following in order to create a custom generator for an object:

function add3(obj) {
  for ( let i in obj )
    yield i + 3;
}
 
let it = add3(someObj);

try {
  while (true) {
    document.write(it.next() + "<br>\n");
  }
} catch (err if err instanceof StopIteration) {
  document.write("End of record.<br>\n");
}

In JavaScript 1.8, you can circumvent having to create a custom generator function by using a generator expression instead:

let it = (i + 3 for (i in someObj));

try {
  while (true) {
    document.write(it.next() + "<br>\n");
  }
} catch (err if err instanceof StopIteration) {
  document.write("End of record.<br>\n");
}

Generator expressions can also be passed in, as values, to a function. This is particularly noteworthy since generators aren't run until they are absolutely needed (unlike for typical array comprehension situations, where the arrays are constructed ahead of time). An example of the difference can be seen here:

Using JavaScript 1.7 Array Comprehension

handleResults([ i for ( i in obj ) if ( i > 3 ) ]);
 
function handleResults( results ) {
  for ( let i in results )
    // ...
}

Using JavaScript 1.8 Generator Expressions

handleResults( i for ( i in obj ) if ( i > 3 ) );
 
function handleResults( results ) {
  for ( let i in results )
    // ...
}

The significant difference between the two examples being that by using the generator expressions, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.

More Array extras

There are two new iterative Array methods included in JavaScript 1.8, specifically:

  • reduce() - runs a function on every item in the array and collects the results from previous calls.
  • reduceRight() - runs a function on every item in the array and collects the results from previous calls, but in reverse.

Changes in destructuring for..in (Make mention of this change in a new destructuring section)

One change that occurred in the release of JavaScript 1.8 was a bug fix related to the key/value destructuring of arrays introduced in JavaScript 1.7. Previously it was possible to destructure the keys/values of an array by using for ( var [key, value] in array ). However, that made it impossible to destructure the values of an array - that were arrays (i.e., when an iterator returns an array of the current key-value pair). This has been resolved now. ({{ Bug("366941") }}). One can, however, use  for ( var [key, value] in Iterator(array)).

Revision Source

<div>{{ Fx_minversion_header(3) }}</div>

<p>JavaScript 1.8 is <!--scheduled to ship as-->part of Gecko 1.9 (which <!--will be-->is incorporated into <a href="/en-US/docs/Firefox_3_for_developers" title="Firefox_3_for_developers">Firefox 3</a>). This is a less substantial update than <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="New_in_JavaScript_1.7">JavaScript 1.7</a>, but does have some updates to track progress toward ECMAScript 4/JavaScript 2. This release <!--will-->includes all new features specified in <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6" title="New_in_JavaScript_1.6">JavaScript 1.6</a> and <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="New_in_JavaScript_1.7">JavaScript 1.7</a>.</p>
<p>See {{ Bug("380236") }} to track progress on the development of JavaScript 1.8. For the status of the documentation see {{ Bug("421027") }}.</p>
<h2 id="Using_JavaScript_1.8">Using JavaScript 1.8</h2>
<p>In order to use some of the new features of JavaScript 1.8 in HTML, use:</p>
<div style="overflow:hidden">
<pre class="brush: xml">
 &lt;script type="application/javascript;version=1.8"&gt; ... your code ... &lt;/script&gt;
</pre>
</div>
<p>Another way (not recommended) to do this is to use the deprecated <code>&lt;script&gt;</code> language attribute and define it as "JavaScript1.8".</p>
<p>When using the <a href="/en-US/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="Introduction_to_the_JavaScript_shell">JavaScript shell</a>, JavaScript XPCOM components, or XUL <code>&lt;script&gt;</code> elements, the latest JS version (JS1.8 in Mozilla 1.9) is used automatically ({{ Bug(381031) }}, {{ Bug(385159) }}).</p>
<p>The features that require the use of the new keywords "yield" and "let" require you to specify version 1.7 or higher because existing code might use those keywords as variable or function names. The features that do not introduce new keywords (such as generator expressions) can be used without specifying the JavaScript version.</p>
<h2 id="Expression_closures_(Merge_into_own_page.2Fsection)">Expression closures (Merge into own page/section)</h2>
<p>This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda notation</a>.</p>
<p><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="New_in_JavaScript_1.7">JavaScript 1.7</a> and older:</p>
<pre class="brush: js">function(x) { return x * x; }</pre>
<p>JavaScript 1.8:</p>
<pre class="brush: js">function(x) x * x</pre>
<p>This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.</p>
<p><strong>Examples:</strong></p>
<p>A shorthand for binding event listeners:</p>
<pre class="brush: js">
 document.addEventListener("click", function() false, true);
</pre>
<p>Using this notation with some of the array functions from <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6" title="New_in_JavaScript_1.6">JavaScript 1.6</a>:</p>
<pre class="brush: js">elems.some(function(elem) elem.type == "text");</pre>
<h2 id="Generator_expressions_(Merge_into_Generator_expressions)">Generator expressions (Merge into <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators#Generator_expressions" title="JavaScript/Guide/Iterators_and_Generators#Generator_expressions">Generator expressions</a>)</h2>
<p>This addition allows you to simply create generators (which were introduced in <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="New_in_JavaScript_1.7">JavaScript 1.7</a>). Typically you would have to create a custom function which would have a yield in it, but this addition allows you to use array comprehension-like syntax to create an identical generator statement.</p>
<p>In <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="New_in_JavaScript_1.7">JavaScript 1.7</a>, you might write something like the following in order to create a custom generator for an object:</p>
<pre class="brush: js">
function add3(obj) {
  for ( let i in obj )
    yield i + 3;
}
 
let it = add3(someObj);

try {
  while (true) {
    document.write(it.next() + "&lt;br&gt;\n");
  }
} catch (err if err instanceof StopIteration) {
  document.write("End of record.&lt;br&gt;\n");
}
</pre>
<p>In JavaScript 1.8, you can circumvent having to create a custom generator function by using a generator expression instead:</p>
<pre class="brush: js">
let it = (i + 3 for (i in someObj));

try {
  while (true) {
    document.write(it.next() + "&lt;br&gt;\n");
  }
} catch (err if err instanceof StopIteration) {
  document.write("End of record.&lt;br&gt;\n");
}</pre>

<p>Generator expressions can also be passed in, as values, to a function. This is particularly noteworthy since generators aren't run until they are absolutely needed (unlike for typical array comprehension situations, where the arrays are constructed ahead of time). An example of the difference can be seen here:</p>
<p>Using JavaScript 1.7 Array Comprehension</p>

<pre class="brush: js">
handleResults([ i for ( i in obj ) if ( i &gt; 3 ) ]);
 
function handleResults( results ) {
  for ( let i in results )
    // ...
}
</pre>
<p>Using JavaScript 1.8 Generator Expressions</p>
<pre class="brush: js">
handleResults( i for ( i in obj ) if ( i &gt; 3 ) );
 
function handleResults( results ) {
  for ( let i in results )
    // ...
}
</pre>
<p>The significant difference between the two examples being that by using the generator expressions, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.</p>
<h2 id="More_Array_extras">More <code>Array</code> extras</h2>
<p>There are two new iterative <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array">Array</a></code> methods included in JavaScript 1.8, specifically:</p>
<ul>
  <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce" title="JavaScript/Reference/Objects/Array/reduce">reduce()</a></code> - runs a function on every item in the array and collects the results from previous calls.</li>
  <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight" title="JavaScript/Reference/Objects/Array/reduceRight">reduceRight()</a></code> - runs a function on every item in the array and collects the results from previous calls, but in reverse.</li>
</ul>
<h2 id="Changes_in_destructuring_for..in_(Make_mention_of_this_change_in_a_new_destructuring_section)">Changes in destructuring <code>for..in</code> (Make mention of this change in a new destructuring section)</h2>
<p>One change that occurred in the release of JavaScript 1.8 was a bug fix related to the key/value <a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="New in JavaScript 1.7">destructuring of arrays</a> introduced in JavaScript 1.7. Previously it was possible to destructure the keys/values of an array by using <code>for ( var [key, value] in array )</code>. However, that made it impossible to destructure the values of an array - that were arrays (i.e., when an iterator returns an array of the current key-value pair). This has been resolved now. ({{ Bug("366941") }}). One can, however, use &nbsp;<code>for ( var [key, value] in Iterator(array))</code>.</p>
Revert to this revision