{"id":5164,"date":"2019-01-31T17:52:34","date_gmt":"2019-01-31T16:52:34","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=5164"},"modified":"2019-01-31T09:29:38","modified_gmt":"2019-01-31T08:29:38","slug":"these-are-the-features-in-es6-that-you-should-know","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/01\/31\/these-are-the-features-in-es6-that-you-should-know\/","title":{"rendered":"These are the features in ES6 that you should know"},"content":{"rendered":"\n

These are the features in ES6 that you should know<\/a><\/h2>\n\n\n\n\n\n\n\n

These are the features in ES6 that you should know<\/p>

by Cristi Salcescu<\/a>

ES6 brings more features to the JavaScript language. Some new syntax allows you to write code in a more expressive way, some features complete the functional programming toolbox, and some features are questionable.
let and\u00a0const
There are two ways for declaring a variable (let<\/code> and const<\/code>) plus one that has become obsolete (var<\/code>).
let
let<\/code> declares and optionally initializes a variable in the current scope. The current scope can be either a module, a function or a block. The value of a variable that is not initialized is undefined<\/code>\u00a0.
Scope defines the lifetime and visibility of a variable. Variables are not visible outside the scope in which they are declared.
Consider the next code that emphasizes let<\/code> block scope:
let x = 1;
{
let x = 2;
}
console.log(x); \/\/1
In contrast, the var<\/code> declaration had no block scope:
var x = 1;
{
var x = 2;
}
console.log(x); \/\/2
The for<\/code> loop statement, with the let<\/code> declaration, creates a new variable local to the block scope, for each iteration. The next loop creates five closures over five different i<\/code> variables.
(function run(){
for(let i=0; i<5; i++){
setTimeout(function log(){
console.log(i); \/\/0 1 2 3 4
}, 100);
}
})();
Writing the same code with var<\/code> will create five closures, over the same variable, so all closures will display the last value of i<\/code>.
The log()<\/code> function is a closure. For more on closures, take a look at Discover the power of closures in JavaScript<\/a>.
const
const<\/code> declares a variable that cannot be reassigned. It becomes a constant only when the assigned value is immutable.
An immutable value is a value that, once created, cannot be changed. Primitive values are immutable, objects are mutable.
const<\/code> freezes the variable, Object.freeze()<\/code> freezes the object.
The initialization of the const<\/code> variable is mandatory.
Modules
Before modules, a variable declared outside any function was a global variable.
With modules, a variable declared outside any function is hidden and not available to other modules unless it is explicitly exported.
Exporting makes a function or object available to other modules. In the next example, I export functions from different modules:
\/\/module “.\/TodoStore.js”
export default function TodoStore(){}
\/\/module “.\/UserStore.js”
export default function UserStore(){}
Importing makes a function or object, from other modules, available to the current module.
import TodoStore from “.\/TodoStore”;
import UserStore from “.\/UserStore”;
const todoStore = TodoStore();
const userStore = UserStore();
Spread\/Rest
The\u00a0\u2026<\/code> operator can be the spread operator or the rest parameter, depending on where it is used. Consider the next example:
const numbers = [1, 2, 3];
const arr = [‘a’, ‘b’, ‘c’, …numbers<\/strong>];
console.log(arr);
[“a”, “b”, “c”, 1, 2, 3]
This is the spread operator. Now look at the next example:
function process(x,y, …arr<\/strong>){
console.log(arr)
}
process(1,2,3,4,5);
\/\/[3, 4, 5]
function processArray(…arr<\/strong>){
console.log(arr)
}
processArray(1,2,3,4,5);
\/\/[1, 2, 3, 4, 5]
This is the rest parameter.
arguments
With the rest parameter we can replace the arguments<\/code> pseudo-parameter. The rest parameter is an array, arguments<\/code> is not.
function addNumber(total, value){
return total + value;
}
function sum(…args<\/strong>){
return args.reduce(addNumber, 0)<\/strong>;
}
sum(1,2,3); \/\/6
Cloning
The spread operator makes the cloning of objects and arrays simpler and more expressive.
const book = { title: “JavaScript: The Good Parts” };
\/\/clone with Object.assign()
const clone = Object.assign({}, book);
\/\/clone with spread operator
const clone = { …book };<\/strong>
const arr = [1, 2 ,3];
\/\/clone with slice
const cloneArr = arr.slice();
\/\/clone with spread operator
const cloneArr = [ …arr ];<\/strong>
Concatenation
In the next example, the spread operator is used to concatenate arrays:
const part1 = [1, 2, 3];
const part2 = [4, 5, 6];
const arr = part1.concat(part2);
const arr = […part1, …part2];<\/strong>
Multiple inheritance
The spread operator, like Object.assign()<\/code>, can be used to copy properties from one or more objects to an empty object and do multiple inheritance.
const authorGateway = {
getAuthors : function() {},
editAuthor: function() {}
};
const bookGateway = {
getBooks : function() {},
editBook: function() {}
};
\/\/copy with Object.assign()
const gateway = Object.assign({},
authorGateway,
bookGateway);

\/\/copy with spread operator
const gateway = {
…authorGateway,
…bookGateway
};
Property short-hands
Consider the next code:
function BookGateway(){
function getBooks() {}
function editBook() {}

return {
getBooks: getBooks,
editBook: editBook
}
}
With property short-hands, when the property name and the name of the variable used as the value are the same, we can just write the key once.
function BookGateway(){
function getBooks() {}
function editBook() {}

return {
getBooks,
editBook
}<\/strong>
}
Here is another example:
const todoStore = TodoStore();
const userStore = UserStore();

const stores = {
todoStore,
userStore
};<\/strong>
Destructuring assignment
Consider the next code:
function TodoStore(args){
const helper = args.helper;
const dataAccess = args.dataAccess;
const userStore = args.userStore;
}
With destructuring assignment syntax, it can be written like this:
function TodoStore(args){
const {
helper,
dataAccess,
userStore } = args;<\/strong>
}
or even better, with the destructuring syntax in the parameter list:
function TodoStore({ helper, dataAccess, userStore }<\/strong>){}
Below is the function call:
TodoStore({
helper: {},
dataAccess: {},
userStore: {}
});
Default parameters
Functions can have default parameters. Look at the next example:
function log(message, mode = “Info”<\/strong>){
console.log(mode + “: ” + message);
}
log(“An info”);
\/\/Info: An info
log(“An error”, “Error”);
\/\/Error: An error
Template string\u00a0literals
Template strings are defined with the `<\/code> charter. With template strings, the previous logging message can be written like this:
function log(message, mode= “Info”){
console.log(`${mode}: ${message}`<\/strong>);
}
Template strings can be defined on multiple lines. However, a better option is to keep the long text messages as resources, in a database for example.
See below a function that generates an HTML that spans multiple lines:
function createTodoItemHtml(todo){
return `<li>
<div>${todo.title}<\/div>
<div>${todo.userName}<\/div>
<\/li>`;
}
Proper tail-calls
A recursive function is tail recursive when the recursive call is the last thing the function does.
The tail recursive functions perform better than non tail recursive functions. The optimized tail recursive call does not create a new stack frame for each function call, but rather uses a single stack frame.
ES6 brings the tail-call optimization in strict mode.
The following function<\/a> should benefit from the tail-call optimization.
function print(from, to)
{
const n = from;
if (n > to) return;

console.log(n);
\/\/the last statement is the recursive call
print(n + 1, to); <\/strong>
}
print(1, 10);
Note: the tail-call optimization is not yet supported by major browsers.
Promises
A promise is a reference to an asynchronous call. It may resolve or fail somewhere in the future.
Promises are easier to combine. As you see in the next example<\/a>, it is easy to call a function when all promises are resolved, or when the first promise is resolved.
function getTodos() { return fetch(“\/<\/a>todos<\/a>“); }
function getUsers() { return fetch(“\/<\/a>users<\/a>“); }
function getAlbums(){ return fetch(“\/albums<\/a>“); }
const getPromises = [
getTodos(),
getUsers(),
getAlbums()
];
Promise.all(getPromises).then(doSomethingWhenAll);
Promise.race(getPromises).then(doSomethingWhenOne);
function doSomethingWhenAll(){}
function doSomethingWhenOne(){}
The fetch()<\/code> function, part of the Fetch API, returns a promise.
Promise.all()<\/code> returns a promise that resolves when all input promises have resolved. Promise.race()<\/code> returns a promise that resolves or rejects when one of the input promises resolves or rejects.
A promise can be in one of the three states: pending, resolved or rejected. The promise will in pending until is either resolved or rejected.
Promises support a chaining system that allows you to pass data through a set of functions. In the next example<\/a>, the result of getTodos()<\/code> is passes as input to toJson()<\/code>, then its result is passed as input to getTopPriority()<\/code>, and then its result is passed as input to renderTodos()<\/code> function. When an error is thrown or a promise is rejected the handleError<\/code> is called.
getTodos()
.then(toJson)
.then(getTopPriority)
.then(renderTodos)
.catch(handleError);
function toJson(response){}
function getTopPriority(todos){}
function renderTodos(todos){}
function handleError(error){}
In the previous example,\u00a0.then()<\/code> handles the success scenario and\u00a0.catch()<\/code> handles the error scenario. If there is an error at any step, the chain control jumps to the closest rejection handler down the chain.
Promise.resolve()<\/code> returns a resolved promise. Promise.reject()<\/code> returns a rejected promise.
Class
Class is sugar syntax for creating objects with a custom prototype. It has a better syntax than the previous one, the function constructor. Check out the next exemple<\/a>:
class Service {
doSomething(){ console.log(“doSomething”); }
}
let service = new Service();
console.log(service.__proto__ === Service.prototype);
All methods defined in the Service<\/code> class will be added to theService.prototype<\/code> object. Instances of the Service<\/code> class will have the same prototype (Service.prototype<\/code>) object. All instances will delegate method calls to the Service.prototype<\/code> object. Methods are defined once onService.prototype<\/code> and then inherited by all instances.
Inheritance
\u201cClasses can inherit from other classes\u201d. Below is an example of inheritance<\/a> where the SpecialService<\/code> class \u201cinherits\u201d from the Service<\/code> class:
class Service {
doSomething(){ console.log(“doSomething”); }
}
class SpecialService extends Service<\/strong> {
doSomethingElse(){ console.log(“doSomethingElse”); }
}
let specialService = new SpecialService();
specialService.doSomething();
specialService.doSomethingElse();
All methods defined in the SpecialService<\/code> class will be added to the SpecialService.prototype<\/code> object. All instances will delegate method calls to the SpecialService.prototype<\/code> object. If the method is not found in SpecialService.prototype<\/code>, it will be searched in the Service.prototype<\/code> object. If it is still not found, it will be searched in Object.prototype<\/code>.
Class can become a bad\u00a0feature
Even if they seem encapsulated, all members of a class are public. You still need to manage problems with this<\/code> losing context. The public API is mutable.
class<\/code> can become a bad feature if you neglect the functional side of JavaScript. class<\/code> may give the impression of a class-based language when JavaScript is both a functional programming language and a prototype-based language.
Encapsulated objects can be created with factory functions. Consider the next example:
function Service() {
function doSomething(){ console.log(“doSomething”); }

return Object.freeze({
doSomething
});
}
This time all members are private by default. The public API is immutable. There is no need to manage issues with this<\/code> losing context.
class<\/code> may be used as an exception if required by the components framework. This was the case with React, but is not the case anymore with React Hooks<\/a>.
For more on why to favor factory functions, take a look at Class vs Factory function: exploring the way forward<\/a>.
Arrow functions
Arrow functions can create anonymous functions on the fly. They can be used to create small callbacks, with a shorter syntax.
Let\u2019s take a collection of to-dos. A to-do has an id<\/code>\u00a0, a title<\/code>\u00a0, and a completed<\/code> boolean property. Now, consider the next code that selects only the title<\/code> from the collection:
const titles = todos.map(todo => todo.title);
or the next example selecting only the todos<\/code> that are not completed:
const filteredTodos = todos.filter(todo => !todo.completed);
this
Arrow functions don\u2019t have their own this<\/code> and arguments<\/code>. As a result, you may see the arrow function used to fix problems with this<\/code> losing context. I think that the best way to avoid this problem is to not use this<\/code> at all.
Arrow functions can become a bad\u00a0feature
Arrow functions can become a bad feature when used to the detriment of named functions. This will create readability and maintainability problems. Look at the next code written only with anonymous arrow functions:
const newTodos = todos.filter(todo =>
!todo.completed && todo.type === “RE”)
.map(todo => ({
title : todo.title,
userName : users[todo.userId].name
}))
.sort((todo1, todo2) =>
todo1.userName.localeCompare(todo2.userName));
Now, check out the same logic<\/a> refactored to pure functions with intention revealing names and decide which of them is easier to understand:
const newTodos = todos.filter(isTopPriority)
.map(partial(toTodoView, users))
.sort(ascByUserName);<\/strong>
function isTopPriority(todo){<\/strong>
return !todo.completed && todo.type === “RE”;
}<\/strong>

function toTodoView(users, todo){<\/strong>
return {
title : todo.title,
userName : users[todo.userId].name
}
}<\/strong>
function ascByUserName(todo1, todo2){<\/strong>
return todo1.userName.localeCompare(todo2.userName);
}<\/strong>
Even more, anonymous arrow functions will appear as (anonymous)<\/code> in the Call Stack.
For more on why to favor named functions, take a look at How to make your code better with intention-revealing function names<\/a>.
Less code doesn\u2019t necessary mean more readable. Look at the next example<\/a> and see which version is easier for you to understand:
\/\/with arrow function
const prop = key => obj => obj[key];
\/\/with function keyword
function prop(key){
return function(obj){
return obj[key];
}
}
Pay attention when returning an object. In the next example, the getSampleTodo()<\/code> returns undefined<\/code>.
const getSampleTodo = () => { title : “A sample todo” };
getSampleTodo();
\/\/undefined
Generators
I think the ES6 generator is an unnecessary feature that makes code more complicated.
The ES6 generator creates an object that has the next()<\/code> method. The next()<\/code> method creates an object that has the value<\/code> property. ES6 generators promote the use of loops. Take a look at code below<\/a>:
function* sequence(){
let count = 0;
while(true) {
count += 1;
yield count;
}
}
const generator = sequence();
generator.next().value;\/\/1
generator.next().value;\/\/2
generator.next().value;\/\/3
The same generator can be simply implemented with a closure.
function sequence(){
let count = 0;
return function(){
count += 1;
return count;
}
}
const generator = sequence();
generator();\/\/1
generator();\/\/2
generator();\/\/3
For more examples with functional generators take a look at Let\u2019s experiment with functional generators and the pipeline operator in JavaScript<\/a>
Conclusion
let<\/code> and const<\/code> declare and initialize variables.
Modules encapsulate functionality and expose only a small part.
The spread operator, rest parameter, and property shorthand make things easier to express.
Promises and tail recursion complete the functional programming toolbox.
For more on JavaScript take a look\u00a0at:
Discover Functional Programming in JavaScript with this thorough introduction<\/a>
Learn these JavaScript fundamentals and become a better developer<\/a>
Let\u2019s explore objects in JavaScript<\/a>
How point-free composition will make you a better functional programmer<\/a>
How to make your code better with intention-revealing function names<\/a>
Make your code easier to read with Functional Programming<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

These are the features in ES6 that you should know<\/p>\n

Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,50],"tags":[],"class_list":["post-5164","post","type-post","status-publish","format-standard","hentry","category-documentations","category-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-1li","jetpack-related-posts":[{"id":5713,"url":"https:\/\/monodes.com\/predaelli\/2019\/06\/12\/5713\/","url_meta":{"origin":5164,"position":0},"title":"Different ways to achieve encapsulation\u2026","author":"Paolo Redaelli","date":"2019-06-12","format":"link","excerpt":"Different ways to achieve encapsulation in JavaScript(ES6) Iskander Samatov","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4373,"url":"https:\/\/monodes.com\/predaelli\/2018\/06\/13\/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt\/","url_meta":{"origin":5164,"position":1},"title":"When (and why) you should use ES6 arrow functions \u2014 and when you shouldn\u2019t","author":"Paolo Redaelli","date":"2018-06-13","format":false,"excerpt":"Nice reminder. Arrow functions (also called \u201cfat arrow functions\u201d) are undoubtedly one of the more popular features of ES6. They introduced a new way of\u2026 Sorgente: When (and why) you should use ES6 arrow functions \u2014 and when you shouldn\u2019t Arrow functions (also called \u201cfat arrow functions\u201d) are undoubtedly one\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2140,"url":"https:\/\/monodes.com\/predaelli\/2017\/02\/03\/2140\/","url_meta":{"origin":5164,"position":2},"title":"http:\/\/jamesknelson.com\/using-es6-in-the-browser-with-babel-6-and-webpack\/","author":"Paolo Redaelli","date":"2017-02-03","format":false,"excerpt":"http:\/\/jamesknelson.com\/using-es6-in-the-browser-with-babel-6-and-webpack\/","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8190,"url":"https:\/\/monodes.com\/predaelli\/2021\/02\/21\/typeorm\/","url_meta":{"origin":5164,"position":3},"title":"Typeorm","author":"Paolo Redaelli","date":"2021-02-21","format":"link","excerpt":"typeorm.io is Object\u2013relational mapping for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3264,"url":"https:\/\/monodes.com\/predaelli\/2017\/08\/10\/this-in-javascript-zell-liew\/","url_meta":{"origin":5164,"position":4},"title":"This in JavaScript | Zell Liew","author":"Paolo Redaelli","date":"2017-08-10","format":"link","excerpt":"https:\/\/zellwk.com\/blog\/this\/ This is really nice to read Hire me This in JavaScript 21st Jun 2017 Are you confused by the this keyword in JavaScript? It confuses everyone in the beginning, so don\u2019t worry about it. You\u2019re not alone. But that doesn\u2019t mean you can go on without understanding this forever.\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1737,"url":"https:\/\/monodes.com\/predaelli\/2016\/08\/18\/math-js\/","url_meta":{"origin":5164,"position":5},"title":"math.js","author":"Paolo Redaelli","date":"2016-08-18","format":"link","excerpt":"Math.js is an extensive math library for JavaScript and Node.js. It features big numbers, complex numbers, matrices, units, and a flexible expression parser. Sorgente: math.js","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/5164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=5164"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/5164\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=5164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=5164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=5164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}