<blockquote>Yesterday, the Nuxt 3 beta has finally come out.
&nbsp;(Also open sourced here under the MIT license:&nbsp;https://github.com/nuxt/framework )
Let's see what's new from it.
</blockquote> <img src="https://nuxtjs.org/_nuxt/image/aa2435.jpg" alt="Nuxt3 beta" contenteditable="false"/> <ul class="w-e-todo"><li><input type="checkbox" checked="true"/>Fully rewrited with TypeScript.</li></ul><ul class="w-e-todo"><li><input type="checkbox" checked="true"/>Webpack 5 is supported.</li></ul><ul class="w-e-todo"><li><input type="checkbox" checked="true"/>Powered by Vue3 and Vite.</li></ul><ul class="w-e-todo"><li><input type="checkbox" checked="true"/>A new server engine. </li></ul>This is the first JavaScript application server that is portable across a varierty of modern cloud hosting providers. In production, it builds your Vue application and server into one universal .output directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering or purely static. I found that by using the Vercel File System API, all Nuxt features are supported out of the box – no configuration required. ( For sure, Vercel is one of the sponsors of Nuxt :)
 And there is a bonus🏵 : this server engine can be used on existing Nuxt 2 projects with&nbsp;<a href="https://v3.nuxtjs.org/getting-started/bridge" target="_blank"></a><a>Nuxt Bridge</a>🚀
 
<blockquote>Finally, cause it's still in beta now, we couldn't use it for production yet until the first RC come out.</blockquote>

nuxt3-beta-is-coming

Nuxt3 beta is coming!

Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has existed for some time. <blockquote>HistoryDead code elimination in dynamic languages is a much harder problem than in static languages. The idea of a "treeshaker" originated in LISP in the 1990s. The idea is that all possible execution flows of a program can be represented as a tree of function calls, so that functions that are never called can be eliminated.</blockquote> The term "tree shaking" comes from the mental model of your application and its dependencies as a tree-like structure. Each node in the tree represents a dependency that provides distinct functionality for your app.&nbsp;In modern apps, these dependencies are brought in via static import statements like so:<pre><code class="Bash"><xmp>// Import all the utilities!
import utils from "some-utils";</xmp></code></pre>When your app is young (a sapling, if you will), you may have relatively few dependencies. You're also using most (if not all) the dependencies you add. As your app ages, however, more dependencies can get added. To compound matters, older dependencies fall out of use, but may not get pruned from your codebase. The end result is that an app ends up shipping with a lot of unused JavaScript. How to DO tree-shaking?In production builds, we can configure webpack to "shake" off exports from ES6 modules that weren't explicitly imported, making those production builds smaller. Keeping Babel from transpiling ES6 modules to CommonJS modulestree shaking is much more difficult to do for CommonJS modules, and webpack won't know what to prune from the bundle if you decide to use them.&nbsp;The solution is simple: We configure babel-preset-env to leave ES6 modules alone. Wherever you configure Babel (be it in .babelrc or package.json) this means adding a little something extra:<pre><code class="Bash"><xmp>{
 "presets": [
 ["env", {
 "modules": false
 }]
 ]
}</xmp></code></pre> Keeping side effects in mindSide effects also apply to ES6 modules, and that matters in the context of tree shaking. Modules that take predictable inputs and spit out equally predictable outputs without modifying anything outside of their own scope are dependencies we can safely shake if we're not using them.Where webpack is concerned, we can hint that a package and its dependencies are free of side effects by specifying "sideEffects": false in a project's package.json file:<pre><code class="Bash"><xmp>{
 "name": "webpack-tree-shaking-example",
 "version": "1.0.0",
 "sideEffects": false
}</xmp></code></pre> <span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Importing only what we need&nbsp; <pre><code class="Bash"><xmp>// Import only some of the utilities!
import { transform, convert } from "some-utils";</xmp></code></pre> <blockquote>Relation to ECMAScript 6 modulesThe popularity of tree shaking in JavaScript is based on the fact that in distinction from CommonJS modules, ECMAScript 6 module loading is static and thus the whole dependency tree can be deduced by statically parsing the syntax tree. Thus tree shaking becomes an easy problem. However, tree shaking does not only apply at the import/export level: it can also work at the statement level, depending on the implementation.</blockquote>

what-is-tree-shaking

What is Tree Shaking ?

<a href="https://github.com/denoland/deno" target="_blank" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Deno</a>&nbsp;is a secure TypeScript runtime built on V8, the Google runtime engine for JavaScript.Deno was built with:&nbsp; 1. Rust (Deno’s core was written in Rust, Node’s in C++)&nbsp; 2. Tokio (the event loop written in Rust)&nbsp; 3. TypeScript (Deno supports both JavaScript and TypeScript out of the box)&nbsp; 4. V8 (Google’s JavaScript runtime used in Chrome and Node, among others) Why use Deno?Security (permissions) in DenoAmong the most important of Deno’s features is its focus on security.As opposed to Node.js, Deno by default executes the code in a sandbox, which means that runtime has no access to:&nbsp; 1. The file system&nbsp; 2. The network&nbsp; 3. Execution of other scripts&nbsp; 4. The environment variables Deno modulesDeno, just like browsers, loads modules by URLs.By using URLs, Deno packages can be distributed without a centralized registry such as npm, which recently has had a lot of problems.By importing code via URL, we make it possible for package creators to host their code wherever they see fit.When we start the application, Deno downloads all the imported modules and caches them. Once they are cached, Deno will not download them again until we specifically ask for it with the --reload flag. Deno browser compatibilityDeno aims to be browser-compatible. Technically speaking, when using the ES modules, we don’t have to use any build tools like webpack to make our application ready to use in a browser. Deno supports TypeScript out of the box&nbsp;👏Deno makes it easy to use TypeScript without the need for any config files. Still, it is possible to write programs in plain JavaScript and execute them with Deno without any trouble. Is Deno production-ready?The most recent stable release at the time of writing is Deno v1.7.0, published on Jan. 19, 2021. The latest version of Deno features improved compilation and data URL capabilities. Highlights of the new release include the ability to cross-compile from anything in stable, supported architecture (including Windows x64, MacOS x64, and Linux x64) with deno compile. In addition, deno compile now generates binaries that are 40–60 percent smaller than those generated by Deno v. 1.6, as well as binaries that have built-in CA certificates, custom V8 flags, locked-down permissions, and more.Other notable features in Deno v.1.7 include support for data URLs, support for formatting Markdown files with deno fmt, and a --location flag to set document location for scripts. Learn more about the most recent updates to Deno.With its decentralized approach, Deno takes the necessary step of freeing the JavaScript ecosystem from the centralized package registry that is npm. Deno vs. Node.js: PerformanceThe only difference that could potentially impact performance is the fact that Deno is built on Rust and Node.js on C++. Deno’s team publishes&nbsp;<a href="https://deno.land/benchmarks" target="_blank" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">a set of benchmarks</a>&nbsp;<span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">for each release that presents Deno’s performance, in many cases in comparison to Node.<span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">&nbsp;&nbsp;

what-is-deno

What is Deno?

<blockquote>These days Webpack 5 was newly released !Since it's a major update, there must have been a lot of break changes relative to Webpack 4.I would pick out&nbsp; some major changes to see exactly what's been updated.</blockquote> <h2 id="chumk">Faster builds with persistent caching</h2>Slow builds are one of the most common complaints from developers about webpack. The module bundler now offers an opt-in filesystem cache. This should improve our productivity as developers by speeding up our development builds. <h2 id="bs3f9">Smaller bundle sizes</h2>Improvements have been made to tree shaking (also known as dead code elimination). While previous versions of webpack were able to remove unused code, version 5 takes it even further. webpack is now able to remove code inside of modules, leading to even smaller bundle sizes.&nbsp; <h2 id="c3dz2">Better long term caching</h2>After bundle size, the thing that can improve your app loading time the most is caching. With caching, returning visitors to your application experience an almost instantaneous loading experience. With webpack 5, changes made to your code that don’t change the minimized version (eg, comments or variable names), do not result in cache invalidation. This means that your users will be able to experience the performance improvements of caching for longer. <h2 id="xha8o">Breaking changes now to allow further improvements later</h2>Some of the changes introduced in this version will not have any visible impact on your application’s performance today. Instead, they are meant to allow for new features and improvements in later versions of webpack 5. These future features include using http(s) imports as module externals. This will help with the development of micro frontends. Another breaking change is bumping the minimum Node.JS version from 6 to 10.13.0. Dropping support for older Node.JS versions will allow the team to simplify their code, and remove workaround to support these older versions. webpack 5 also brings a new experiments configuration option with support for WebAssembly, Async Web Assembly, Top Level Await, and outputting your bundle as a module (previously only possible with rollup). <h2 id="tyqej">Module Federation</h2>This new feature, in short, allows multiple webpack builds to work together. It allows your application to dynamically load code from another application (aka, a different webpack build). The most popular application of module federation is to enable micro-frontend architecture.

new-features-of-webpack5

New features of Webpack 5 release

<blockquote>Today, we'll talking about integrating a popular ORM tool — TypeORM, step by step.</blockquote> 1. Installing dependenciesSince we'll use PostgreSQL as our database, so we're going to choose TypeORM as the ORM tool to operate the database. Nest has also provided convenient integration ways.<pre><code class="Shell Session"><xmp>yarn add @nestjs/typeorm typeorm pg</xmp></code></pre> 2. Connecting to TypeORMSo we just edit&nbsp;app.module.ts like below:<pre><code class="TypeScript"><xmp>import { Module } from '@nestjs/common'
import { AppController } from './app.controller'
import { AppService } from './app.service'
import { TypeOrmModule } from '@nestjs/typeorm'

({
 imports: [
 TypeOrmModule.forRoot({
 type: 'postgres',
 host: 'localhost',
 port: 5432,
 username: 'myuser',
 password: '123456',
 database: 'nestjs',
 entities: ['dist/**/*.entity{.ts,.js}'],
 synchronize: true,
 }),
 ],
 controllers: [AppController],
 providers: [AppService],
})
export class AppModule {}</xmp></code></pre> 3. Creating a databaseAfter starting the PostgreSQL server,&nbsp; we'll create a user named myuser and a table named nestjs.<pre><code class="Shell Session"><xmp>psql postgres

CREATE ROLE myuser WITH LOGIN PASSWORD '123456';
CREATE DATABASE nestjs OWNER myuser;
GRANT ALL PRIVILEGES ON DATABASE nestjs TO myuser;</xmp></code></pre> 4. Defining user tableNow we'll create a user table. Every entity has its own repository due to Repository Design Pattern is supported in TypeORM. Firstly, we create module and service for user&nbsp;:<pre><code class="TypeScript"><xmp>nest g module user
nest g service user</xmp></code></pre> the src/user folder will then be generated automatically, after that we create a&nbsp;user.entity.ts file into the folder:<pre><code class="TypeScript"><xmp>import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'

const nullable = true

@Entity()
export class User {
 @PrimaryGeneratedColumn()
 id: number

 @Column({ length: 80 })
 email: string

 @Column({ length: 20 })
 username: string

 @Column({ nullable, type: 'text' })
 bio: null | string

 @Column({ nullable, type: 'text' })
 image: null | string
}</xmp></code></pre> then we edit&nbsp;user.service.ts by injecting userRepository into UserService:<pre><code class="TypeScript"><xmp>import { Injectable } from '@nestjs/common'
import { InjectRepository } from '@nestjs/typeorm'
import { User } from './user.entity'
import { Repository } from 'typeorm'

@Injectable()
export class UserService {
 constructor(
 @InjectRepository(User)
 private readonly userRepository: Repository<User>,
 ) {}
}</xmp></code></pre> and then we import the User entity into&nbsp;user.module.ts:<pre><code class="TypeScript"><xmp>import { Module } from '@nestjs/common'
import { TypeOrmModule } from '@nestjs/typeorm'
import { User } from './user.entity'
import { UserService } from './user.service'

@Module({
 imports: [TypeOrmModule.forFeature([User])],
 providers: [UserService],
})
export class UserModule {}</xmp></code></pre> After launching the Nest service, there would be a new user table generated into the PostgreSQL database. <span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Aha! We did it~~ <span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">

integrate-typeorm-in-nestjs

Integrate TypeORM in the  NestJS project

<blockquote>A circular dependency occurs when two classes depend on each other. For example, class A needs class B, and class B also needs class A. Circular dependencies can arise in Nest between modules and between providers. </blockquote> While circular dependencies should be avoided where possible, you can't always do so.&nbsp;In such cases, Nest enables resolving circular dependencies between providers in two ways.&nbsp;Here, we describe using forward referencing as one technique and using the ModuleRef class to retrieve a provider instance from the DI container as another. Forward reference A forward reference allows Nest to reference classes which aren't yet defined using the forwardRef() utility function.&nbsp;For example, if CatsService and CommonService depend on each other, both sides of the relationship can use @Inject() and the forwardRef() utility to resolve the circular dependency. Otherwise Nest won't instantiate them because all of the essential metadata won't be available:&nbsp;<pre><code class="JavaScript"><xmp>@Injectable()
export class CatsService {
 constructor(
 @Inject(forwardRef(() => CommonService))
 private commonService: CommonService,
 ) {}
}</xmp></code></pre><blockquote>The forwardRef() function is imported from the @nestjs/common package.</blockquote> That covers one side of the relationship. Now let's do the same with CommonService:<pre><code class="TypeScript"><xmp>@Injectable()
export class CommonService {
 constructor(
 @Inject(forwardRef(() => CatsService))
 private catsService: CatsService,
 ) {}
}</xmp></code></pre> ModuleRef class alternative An alternative to using forwardRef() is to refactor your code and use the ModuleRef class to retrieve a provider on one side of the (otherwise) circular relationship.&nbsp; Module forward reference In order to resolve circular dependencies between modules, use the same forwardRef() utility function on both sides of the modules association. For example:<pre><code class="TypeScript"><xmp>@Module({
 imports: [forwardRef(() => CatsModule)],
})
export class CommonModule {}</xmp></code></pre>

resolve-circular-dependencies-in-nestjs

How to resolve circular dependencies in NestJS

The other day there's an issue from some guy who says that he's&nbsp;trying to return the value from a callback, as well as assigning the result to a local variable inside the function and returning that one.&nbsp;But it always returns&nbsp;undefined&nbsp;or whatever the initial value of the variable&nbsp;result&nbsp;is:<pre><code class="JavaScript"><xmp>function get() {
 var result;

 $.ajax({
 url: 'XXX',
 success: function(resp) {
 result = resp;
 }
 });

 return result; // But it always returns `undefined`...
}</xmp></code></pre>Distinctly, this guy misunderstood ajax's execution flow as synchronous.&nbsp;

The A in Ajax stands for asynchronous. $.ajax returns immediately even before the success callback is called.&nbsp; Therefore, in order to solve this, we should write codes in asynchronous ways:
 1. Promises with async/await ( ES2017+ ) &nbsp;-- Recommend 
Async/Await is a fancier syntax to handle multiple promises in synchronous code fashion. When we put async keyword before a function declaration, it will return a promise, and we can use await keyword inside it which blocks the code until the promise it is waiting is settled.&nbsp;<pre><code class="JavaScript"><xmp>const promise1 = () => return new Promise((resolve, reject) => {
 resolve('Success1');
});
const promise2 = () => return new Promise((resolve, reject) => {
 resolve('Success2');
});

async function get() {
 var result1 = await promise1();
 var result2 = await promise2();

 return result1 + result2; //Success1 + Success2
}

get(); // returns a promise</xmp></code></pre> 2. Promises with then() &nbsp; ( ES2015+ ) 
The then method returns a Promise which allows for method chaining:&nbsp;<pre><code class="JavaScript"><xmp>const promise1 = new Promise((resolve, reject) => {
 resolve('Success1');
});

promise1
 .then((value) => {
 console.log(value); // expected output: "Success1"

 return new Promise((resolve, reject) => {
 resolve('Success2');
 });
 })
 .then((value) => {
 console.log(value); // expected output: "Success2"
 });</xmp></code></pre> When a value is returned from within a then handler, it will effectively return
<blockquote>Promise.resolve(&lt;value returned by whichever handler was called&gt;)</blockquote>
So 'Success2' could be returned in a simpler way like below:&nbsp;<pre><code class="JavaScript"><xmp>const promise1 = new Promise((resolve, reject) => {
 resolve('Success1');
});


promise1
 .then((value) => {
 console.log(value); // expected output: "Success1"

 return 'Success2';
 })
 .then((value) => {
 console.log(value); // expected output: "Success2"
 });</xmp></code></pre> 3. Use callbacks 
Usually, we can just use callback function passed into the asynchronous method to get the result timely:&nbsp;<pre><code class="JavaScript"><xmp>const callbackfunc = (result) => {
 console.log(result)
}

function get() {
 $.ajax({
 url: 'XXX',
 success: callbackfunc
 });
}</xmp></code></pre>

get-response-from-asynchronous-call

How to get the response from an asynchronous call?

<span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">The core concepts of webpack includes:<ul><li><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Entry</li><li><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Output</li><li><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Loaders</li><li><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Plugins</li><li><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Mode</li><li><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Browser Compatibility</li></ul><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;"> <span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">EntryAn entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). By default its value is ./src/index.js, but you can specify a different (or multiple entry points) by setting an entry property in the webpack configuration. For example:webpack.config.js<span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;"> <pre><code class="JavaScript"><xmp>module.exports = {
 entry: './path/to/my/entry/file.js',
};</xmp></code></pre> OutputThe output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file. You can configure this part of the process by specifying an output field in your configuration:webpack.config.js <pre><code class="JavaScript"><xmp>const path = require('path');

module.exports = {
 entry: './path/to/my/entry/file.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'my-first-webpack.bundle.js',
 },
};</xmp></code></pre> LoadersOut of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.At a high level, loaders have two properties in your webpack configuration:<ol><li>The test property identifies which file or files should be transformed.</li><li>The use property indicates which loader should be used to do the transforming.</li></ol>webpack.config.js<pre><code class="JavaScript"><xmp>const path = require('path');

module.exports = {
 output: {
 filename: 'my-first-webpack.bundle.js',
 },
 module: {
 rules: [{ test: /\.txt$/, use: 'raw-loader' }],
 },
};</xmp></code></pre>The configuration above has defined a rules property for a single module with two required properties: test and use. This tells webpack's compiler the following:<blockquote>"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle." </blockquote> PluginsWhile loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management, and injection of environment variables.In order to use a plugin, you need to require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with the new operator.webpack.config.js <pre><code class="JavaScript"><xmp>const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
 module: {
 rules: [{ test: /\.txt$/, use: 'raw-loader' }],
 },
 plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
</xmp></code></pre>In the example above, the html-webpack-plugin generates an HTML file for your application by injecting automatically all your generated bundles. ModeBy setting the mode parameter to either development, production, or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.<pre><code class="JavaScript"><xmp>module.exports = {
 mode: 'production',
};</xmp></code></pre>We can provide the mode option in the config:<pre><code class="JavaScript"><xmp>module.exports = {
 mode: 'development',
};</xmp></code></pre>or pass it as a CLI argument:<pre><code class="Shell Session"><xmp>webpack --mode=development</xmp></code></pre> Browser compatibilityWebpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

six-core-concepts-of-webpack

The Six core concepts of Webpack

Closure is a combination&nbsp;<span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.Lexical scoping<font style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;"><span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Consider the following example code:<pre><code class="JavaScript"><xmp>function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function
 }
 displayName();
}
init();</xmp></code></pre>init() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside init() and is available only within the body of the init() function. Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().Run the code and notice that the alert() statement within the displayName() function successfully displays the value of the name variable, which is declared in its parent function. This is an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.Closure<span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif;">Consider the following code example:<pre><code class="JavaScript"><xmp>function makeFunc() {
 var name = 'Mozilla';
 function displayName() {
 alert(name);
 }
 return displayName;
}

var myFunc = makeFunc();
myFunc();
</xmp></code></pre>Running this code has exactly the same effect as the previous example of the init() function above. What's different (and interesting) is that the displayName() inner function is returned from the outer function before being executed. At first glance, it might seem unintuitive that this code still works. In some programming languages, the local variables within a function exist for just the duration of that function's execution. Once makeFunc() finishes executing, you might expect that the name variable would no longer be accessible. However, because the code still works as expected, this is obviously not the case in JavaScript. The reason is that functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. In this case, myFunc is a reference to the instance of the function displayName that is created when makeFunc is run. The instance of displayName maintains a reference to its lexical environment, within which the variable name exists. For this reason, when myFunc is invoked, the variable name remains available for use, and "Mozilla" is passed to alert.Here's a slightly more interesting example—a makeAdder function:<pre><code class="JavaScript"><xmp>function makeAdder(x) {
 return function(y) {
 return x + y;
 };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12
</xmp></code></pre>In this example, we have defined a function makeAdder(x), that takes a single argument x, and returns a new function. The function it returns takes a single argument y, and returns the sum of x and y. In essence, makeAdder is a function factory. It creates functions that can add a specific value to their argument. In the above example, the function factory creates two new functions—one that adds five to its argument, and one that adds 10. add5 and add10 are both closures. They share the same function body definition, but store different lexical environments. In add5's lexical environment, x is 5, while in the lexical environment for add10, x is 10.Emulating private methods with closuresLanguages such as Java allow you to declare methods as private, meaning that they can be called only by other methods in the same class. JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code. They also provide a powerful way of managing your global namespace. The following code illustrates how to use closures to define public functions that can access private functions and variables.<pre><code class="JavaScript"><xmp>var counter = (function() {
 var privateCounter = 0;
 function changeBy(val) {
 privateCounter += val;
 }

 return {
 increment: function() {
 changeBy(1);
 },

 decrement: function() {
 changeBy(-1);
 },

 value: function() {
 return privateCounter;
 }
 };
})();

console.log(counter.value()); // 0.

counter.increment();
counter.increment();
console.log(counter.value()); // 2.

counter.decrement();
console.log(counter.value()); // 1.
</xmp></code></pre>In previous examples, each closure had its own lexical environment. Here though, there is a single lexical environment that is shared by the three functions: counter.increment, counter.decrement, and counter.value. The shared lexical environment is created in the body of an anonymous function, which is executed as soon as it has been defined (AKA an IIFE). The lexical environment contains two private items: a variable called privateCounter, and a function called changeBy. You can't access either of these private members from outside the anonymous function. Instead, you can access them using the three public functions that are returned from the anonymous wrapper. Those three public functions are closures that share the same lexical environment. Thanks to JavaScript's lexical scoping, they each have access to the privateCounter variable and the changeBy function.<pre><code class="JavaScript"><xmp>var makeCounter = function() {
 var privateCounter = 0;
 function changeBy(val) {
 privateCounter += val;
 }
 return {
 increment: function() {
 changeBy(1);
 },

 decrement: function() {
 changeBy(-1);
 },

 value: function() {
 return privateCounter;
 }
 }
};

var counter1 = makeCounter();
var counter2 = makeCounter();

alert(counter1.value()); // 0.

counter1.increment();
counter1.increment();
alert(counter1.value()); // 2.

counter1.decrement();
alert(counter1.value()); // 1.
alert(counter2.value()); // 0.
</xmp></code></pre>Notice how the two counters maintain their independence from one another. Each closure references a different version of the privateCounter variable through its own closure. Each time one of the counters is called, its lexical environment changes by changing the value of this variable. Changes to the variable value in one closure don't affect the value in the other closure.Creating closures in loops: A common mistakePrior to the introduction of the let keyword in ECMAScript 2015, a common problem with closures occurred when you created them inside a loop. To demonstrate, consider the following example code.<pre><code class="JavaScript"><xmp>Helpful notes will appear here
E-mail: <input type="text" id="email" name="email"/>
Name: <input type="text" id="name" name="name"/>
Age: <input type="text" id="age" name="age"/>
</xmp></code></pre><pre><code class="JavaScript"><xmp>function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function setupHelp() {
 var helpText = [
 {'id': 'email', 'help': 'Your e-mail address'},
 {'id': 'name', 'help': 'Your full name'},
 {'id': 'age', 'help': 'Your age (you must be over 16)'}
 ];

 for (var i = 0; i < helpText.length; i++) {
 var item = helpText[i];
 document.getElementById(item.id).onfocus = function() {
 showHelp(item.help);
 }
 }
}

setupHelp();
</xmp></code></pre>The helpText array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method. If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed. The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setupHelp function's scope. Three closures have been created by the loop, but each one shares the same single lexical environment, which has a variable with changing values (item). This is because the variable item is declared with var and thus has function scope due to hoisting. The value of item.help is determined when the onfocus callbacks are executed. Because the loop has already run its course by that time, the item variable object (shared by all three closures) has been left pointing to the last entry in the helpText list. One solution in this case is to use more closures: in particular, to use a function factory as described earlier:<pre><code class="JavaScript"><xmp>function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function makeHelpCallback(help) {
 return function() {
 showHelp(help);
 };
}

function setupHelp() {
 var helpText = [
 {'id': 'email', 'help': 'Your e-mail address'},
 {'id': 'name', 'help': 'Your full name'},
 {'id': 'age', 'help': 'Your age (you must be over 16)'}
 ];

 for (var i = 0; i < helpText.length; i++) {
 var item = helpText[i];
 document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
 }
}

setupHelp();
</xmp></code></pre>This works as expected. Rather than the callbacks all sharing a single lexical environment, the makeHelpCallback function creates a new lexical environment for each callback, in which help refers to the corresponding string from the helpText array. One other way to write the above using anonymous closures is:<pre><code class="JavaScript"><xmp>function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function setupHelp() {
 var helpText = [
 {'id': 'email', 'help': 'Your e-mail address'},
 {'id': 'name', 'help': 'Your full name'},
 {'id': 'age', 'help': 'Your age (you must be over 16)'}
 ];

 for (var i = 0; i < helpText.length; i++) {
 (function() {
 var item = helpText[i];
 document.getElementById(item.id).onfocus = function() {
 showHelp(item.help);
 }
 })(); // Immediate event listener attachment with the current value of </xmp><xmp> // item (preserved until iteration).
 }
}

setupHelp();</xmp></code></pre>If you don't want to use more closures, you can use the let keyword introduced in ES2015 :<pre><code class="JavaScript"><xmp>function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function setupHelp() {
 var helpText = [
 {'id': 'email', 'help': 'Your e-mail address'},
 {'id': 'name', 'help': 'Your full name'},
 {'id': 'age', 'help': 'Your age (you must be over 16)'}
 ];

 for (let i = 0; i < helpText.length; i++) {
 let item = helpText[i];
 document.getElementById(item.id).onfocus = function() {
 showHelp(item.help);
 }
 }
}

setupHelp();</xmp></code></pre>This example uses let instead of var, so every closure binds the block-scoped variable, meaning that no additional closures are required. Another alternative could be to use forEach() to iterate over the helpText array and attach a listener to each &lt;input&gt;, as shown:<pre><code class="JavaScript"><xmp>function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function setupHelp() {
 var helpText = [
 {'id': 'email', 'help': 'Your e-mail address'},
 {'id': 'name', 'help': 'Your full name'},
 {'id': 'age', 'help': 'Your age (you must be over 16)'}
 ];

 helpText.forEach(function(text) {
 document.getElementById(text.id).onfocus = function() {
 showHelp(text.help);
 }
 });
}

setupHelp();</xmp></code></pre> <span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif; font-size: 14px;"> <span style="font-family: -apple-system, BlinkMacSystemFont, &quot;Avenir Next&quot;, Avenir, &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, &quot;Helvetica Neue&quot;, Helvetica, &quot;Fira Sans&quot;, Roboto, Noto, &quot;Droid Sans&quot;, Cantarell, Oxygen, Ubuntu, &quot;Franklin Gothic Medium&quot;, &quot;Century Gothic&quot;, &quot;Liberation Sans&quot;, sans-serif; font-size: 14px;">

what-is-javascript-closure

What is javascript closure?

1.&nbsp;ArrowsArrows are a function shorthand using the =&gt; syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both expression and statement bodies. Unlike functions, arrows share the same lexical this as their surrounding code. If an arrow is inside another function, it shares the "arguments" variable of its parent function.<pre><code class="JavaScript"><xmp>// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// Statement bodies
nums.forEach(v => {
 if (v % 5 === 0)
 fives.push(v);
});

// Lexical this
var bob = {
 _name: "Bob",
 _friends: [],
 printFriends() {
 this._friends.forEach(f =>
 console.log(this._name + " knows " + f));
 }
}
</xmp></code></pre> 

2.&nbsp;ClassesES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.<pre><code class="JavaScript"><xmp>class SkinnedMesh extends THREE.Mesh {
 constructor(geometry, materials) {
 super(geometry, materials);

 this.idMatrix = SkinnedMesh.defaultMatrix();
 this.bones = [];
 this.boneMatrices = [];
 //...
 }
 update(camera) {
 //...
 super.update();
 }
 get boneCount() {
 return this.bones.length;
 }
 set matrixType(matrixType) {
 this.idMatrix = SkinnedMesh[matrixType]();
 }
 static defaultMatrix() {
 return new THREE.Matrix4();
 }
}
</xmp></code></pre> 3.&nbsp;Enhanced Object Literalsassignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences. <pre><code class="JavaScript"><xmp>var obj = {
 // __proto__
 __proto__: theProtoObj,
 // Shorthand for ‘handler: handler’
 handler,
 // Methods
 toString() {
 // Super calls
 return "d " + super.toString();
 },
 // Computed (dynamic) property names
 [ 'prop_' + (() => 42)() ]: 42
};
</xmp></code></pre> 4.&nbsp;Template StringsTemplate strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents. <pre><code class="JavaScript"><xmp>// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
 Content-Type: application/json
 X-Credentials: ${credentials}
 { "foo": ${foo},
 "bar": ${bar}}`(myOnReadyStateChangeHandler);
</xmp></code></pre> 5. Destructuring Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.<pre><code class="JavaScript"><xmp>// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
 = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
 console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
</xmp></code></pre> 6.&nbsp;Default + Rest + SpreadCallee-evaluated default parameter values. Turn an array into consecutive arguments in a function call. Bind trailing parameters to an array. Rest replaces the need for arguments and addresses common cases more directly.<pre><code class="JavaScript"><xmp>function f(x, y=12) {
 // y is 12 if not passed (or passed as undefined)
 return x + y;
}
f(3) == 15</xmp></code></pre><pre><code class="JavaScript"><xmp>function f(x, ...y) {
 // y is an Array
 return x * y.length;
}
f(3, "hello", true) == 6</xmp></code></pre><pre><code class="JavaScript"><xmp>function f(x, y, z) {
 return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6</xmp></code></pre> 7. Let + Const Block-scoped binding constructs. let is the new var. const is single-assignment. Static restrictions prevent use before assignment.<pre><code class="JavaScript"><xmp>function f() {
 {
 let x;
 {
 // okay, block scoped name
 const x = "sneaky";
 // error, const
 x = "foo";
 }
 // error, already declared in block
 let x = "inner";
 }
}
</xmp></code></pre> 8.&nbsp;Iterators + For..OfIterator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize for..in to custom iterator-based iteration with for..of. Don’t require realizing an array, enabling lazy design patterns like LINQ.<pre><code class="JavaScript"><xmp>let fibonacci = {
 [Symbol.iterator]() {
 let pre = 0, cur = 1;
 return {
 next() {
 [pre, cur] = [cur, pre + cur];
 return { done: false, value: cur }
 }
 }
 }
}

for (var n of fibonacci) {
 // truncate the sequence at 1000
 if (n > 1000)
 break;
 console.log(n);
}
</xmp></code></pre>Iteration is based on these duck-typed interfaces (using TypeScript type syntax for exposition only):<pre><code class="JavaScript"><xmp>interface IteratorResult {
 done: boolean;
 value: any;
}
interface Iterator {
 next(): IteratorResult;
}
interface Iterable {
 [Symbol.iterator](): Iterator
}
</xmp></code></pre> 9. Generators Generators simplify iterator-authoring using function* and yield. A function declared as function* returns a Generator instance. Generators are subtypes of iterators which include additional next and throw. These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).Note: Can also be used to enable ‘await’-like async programming, see also ES7 await proposal.<pre><code class="JavaScript"><xmp>var fibonacci = {
 [Symbol.iterator]: function*() {
 var pre = 0, cur = 1;
 for (;;) {
 var temp = pre;
 pre = cur;
 cur += temp;
 yield cur;
 }
 }
}

for (var n of fibonacci) {
 // truncate the sequence at 1000
 if (n > 1000)
 break;
 console.log(n);
}
</xmp></code></pre>The generator interface is (using TypeScript type syntax for exposition only):<pre><code class="JavaScript"><xmp>interface Generator extends Iterator {
 next(value?: any): IteratorResult;
 throw(exception: any);
}
</xmp></code></pre> 10.&nbsp;UnicodeNon-breaking additions to support full Unicode, including new Unicode literal form in strings and new RegExp u mode to handle code points, as well as new APIs to process strings at the 21bit code points level. These additions support building global apps in JavaScript.<pre><code class="JavaScript"><xmp>// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// new form
"\u{20BB7}"=="𠮷"=="\uD842\uDFB7"

// new String ops
"𠮷".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "𠮷") {
 console.log(c);
}
</xmp></code></pre> 11.&nbsp;ModulesLanguage-level support for modules for component definition. Codifies patterns from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. Implicitly async model – no code executes until requested modules are available and processed.<pre><code class="JavaScript"><xmp>// lib/math.js
export function sum(x, y) {
 return x + y;
}
export var pi = 3.141593;
</xmp></code></pre><pre><code class="JavaScript"><xmp>// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
</xmp></code></pre><pre><code class="JavaScript"><xmp>// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
</xmp></code></pre>Some additional features include export default and export *:<pre><code class="JavaScript"><xmp>// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
 return Math.log(x);
}
</xmp></code></pre><pre><code class="JavaScript"><xmp>// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);
</xmp></code></pre> 12.&nbsp;Module LoadersModule loaders support:<ul><li>Dynamic loading</li><li>State isolation</li><li>Global namespace isolation</li><li>Compilation hooks</li><li>Nested virtualization</li></ul>The default module loader can be configured, and new loaders can be constructed to evaluate and load code in isolated or constrained contexts.<pre><code class="JavaScript"><xmp>// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
 alert("2π = " + m.sum(m.pi, m.pi));
});

// Create execution sandboxes – new Loaders
var loader = new Loader({
 global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized
</xmp></code></pre> 13.&nbsp;Map + Set + WeakMap + WeakSetEfficient data structures for common algorithms. WeakMaps provides leak-free object-key’d side tables.<pre><code class="JavaScript"><xmp>// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set
</xmp></code></pre> 14.&nbsp;ProxiesProxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc. <pre><code class="JavaScript"><xmp>// Proxying a normal object
var target = {};
var handler = {
 get: function (receiver, name) {
 return `Hello, ${name}!`;
 }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';
</xmp></code></pre><pre><code class="JavaScript"><xmp>// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
 apply: function (receiver, ...args) {
 return 'I am the proxy';
 }
};

var p = new Proxy(target, handler);
p() === 'I am the proxy';
</xmp></code></pre>There are traps available for all of the runtime-level meta-operations: <pre><code class="JavaScript"><xmp>var handler =
{
 get:...,
 set:...,
 has:...,
 deleteProperty:...,
 apply:...,
 construct:...,
 getOwnPropertyDescriptor:...,
 defineProperty:...,
 getPrototypeOf:...,
 setPrototypeOf:...,
 enumerate:...,
 ownKeys:...,
 preventExtensions:...,
 isExtensible:...
}
</xmp></code></pre> 15. Symbols Symbols enable access control for object state. Symbols allow properties to be keyed by either string (as in ES5) or symbol. Symbols are a new primitive type. Optional description parameter used in debugging - but is not part of identity. Symbols are unique (like gensym), but not private since they are exposed via reflection features like Object.getOwnPropertySymbols.<pre><code class="JavaScript"><xmp>var MyClass = (function() {

 // module scoped symbol
 var key = Symbol("key");

 function MyClass(privateData) {
 this[key] = privateData;
 }

 MyClass.prototype = {
 doStuff: function() {
 ... this[key] ...
 }
 };

 return MyClass;
})();

var c = new MyClass("hello")
c["key"] === undefined
</xmp></code></pre> 16.&nbsp;Subclassable Built-insIn ES6, built-ins like Array, Date and DOM Elements can be subclassed.Object construction for a function named Ctor now uses two-phases (both virtually dispatched):<ul><li>Call Ctor[@@create] to allocate the object, installing any special behavior</li><li>Invoke constructor on new instance to initialize</li></ul>The known @@create symbol is available via Symbol.create. Built-ins now expose their @@create explicitly.<pre><code class="JavaScript"><xmp>// Pseudo-code of Array
class Array {
 constructor(...args) { /* ... */ }
 static [Symbol.create]() {
 // Install special [[DefineOwnProperty]]
 // to magically update 'length'
 }
}

// User code of Array subclass
class MyArray extends Array {
 constructor(...args) { super(...args); }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray();
arr[1] = 12;
arr.length == 2
</xmp></code></pre> 17.&nbsp;PromisesPromises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries. <pre><code class="JavaScript"><xmp>function timeout(duration = 0) {
 return new Promise((resolve, reject) => {
 setTimeout(resolve, duration);
 })
}

var p = timeout(1000).then(() => {
 return timeout(2000);
}).then(() => {
 throw new Error("hmm");
}).catch(err => {
 return Promise.all([timeout(100), timeout(200)]);
})
</xmp></code></pre> 18.&nbsp;Math + Number + String + Array + Object APIsMany new library additions, including core Math libraries, Array conversion helpers, String helpers, and Object.assign for copying. <pre><code class="JavaScript"><xmp>Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })
</xmp></code></pre> 19.&nbsp;Binary and Octal LiteralsTwo new numeric literal forms are added for binary (b) and octal (o).<pre><code class="JavaScript"><xmp>0b111110111 === 503 // true
0o767 === 503 // true
</xmp></code></pre> 20.&nbsp;Reflect APIFull reflection API exposing the runtime-level meta-operations on objects. This is effectively the inverse of the Proxy API, and allows making calls corresponding to the same meta-operations as the proxy traps. Especially useful for implementing proxies. 21.&nbsp;Tail CallsCalls in tail-position are guaranteed to not grow the stack unboundedly. Makes recursive algorithms safe in the face of unbounded inputs. <pre><code class="JavaScript"><xmp>function factorial(n, acc = 1) {
 'use strict';
 if (n <= 1) return acc;
 return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES6
factorial(100000)
</xmp></code></pre>