https://github.com/dinanathsj29/es6-ecmascript6-ecmascript2015-tutorial
A ES6-ECMAScript6-ECMAScript2015-tutorial, An introduction to latest JavaScript programming feature/techniques, step-by-step guide to ES6-ECMAScript6-ECMAScript2015 - A future of JavaScript
https://github.com/dinanathsj29/es6-ecmascript6-ecmascript2015-tutorial
ecma6 ecmascript2015 ecmascript6 es6 es6-classes es6-fat-arrow es6-for-loop es6-for-of-loop es6-generators es6-javascript es6-modules es6-promise es6-promises es6-rest-operator es6-spread-operator es6-tutorial fat-arrow-function javascript javascript-library
Last synced: about 1 month ago
JSON representation
A ES6-ECMAScript6-ECMAScript2015-tutorial, An introduction to latest JavaScript programming feature/techniques, step-by-step guide to ES6-ECMAScript6-ECMAScript2015 - A future of JavaScript
- Host: GitHub
- URL: https://github.com/dinanathsj29/es6-ecmascript6-ecmascript2015-tutorial
- Owner: dinanathsj29
- Created: 2019-03-26T16:48:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-08-10T17:16:13.000Z (almost 6 years ago)
- Last Synced: 2025-03-26T06:51:09.451Z (about 2 months ago)
- Topics: ecma6, ecmascript2015, ecmascript6, es6, es6-classes, es6-fat-arrow, es6-for-loop, es6-for-of-loop, es6-generators, es6-javascript, es6-modules, es6-promise, es6-promises, es6-rest-operator, es6-spread-operator, es6-tutorial, fat-arrow-function, javascript, javascript-library
- Language: HTML
- Homepage:
- Size: 2.39 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
JavaScript ES6-ECMAScript 6-ECMAScript 2015 Features for everyone
=====================
`ES6-ECMAScript 6-ECMAScript 2015` is the latest version of the specification for JavaScript. Here will meet the `future of JavaScript`: as JavaScript follows ECMAScript standards. This course takes a look at the latest features of ECMAScript 6 (aka ES6) and how these changes are making JavaScript even more powerful and concise. Will learn/review the `new keywords-let const` and `function/object syntax` and shows how the new `class, module syntax` can be used with JavaScript library like Angular, React, Node. You'll also review the ES6 compiling tool `Typescript`,`Babel` and `Scratch JS` and also use these to make your ES6 code compatible with modern browsers.
Prerequisites for current course / What you need to know
=====================
`ES6-ECMAScript 6-ECMAScript 2015` introduces us to the newest language features that can be used in JavaScript code. Due to this, I assume you have some working knowledge/understanding of JavaScript. If you haven't, will recommend watching [JavaScript Essentials Tutorial for beginners](https://github.com/dinanathsj29/javascript-beginners-tutorial). Also, some basic knowledge of HyperText Markup Language (HTML) [HTML5 Essentials](https://github.com/dinanathsj29/html5-essentials-tutorial) and [CSS3 Fundamentals](https://github.com/dinanathsj29/css3-fundamentals-tutorial) will likely be useful in your work with ES6. Finally, you will be using a bit of Angular.js, React.js, and Node.js but nothing that requires deep/advanced knowledge.
Topics include
=====================
1. [Course Introduction](#section-1-course-introduction)
2. [Introduction to ES6-ECMAScript 6](#section-2-introduction-to-es6-ecmascript-6)
3. [Transpiling ES6-ECMAScript 6](#section-3-transpiling-es6-ecmascript-6)
4. [New Variables—Creation Updating and Scoping](#section-4-new-variables-creation-updating-and-scoping)
5. [Function Improvements objects](#section-5-function-improvements-objects)
6. [Extended Parameter Handling](#section-6-extended-parameter-handling)
7. [Enhancing object literals](#section-7-enhancing-object-literals)
8. [Template Strings Literals](#section-8-template-strings-literals)
9. [Destructuring Assignment](#section-9-destructuring-assignment)
10. [Loops](#section-10-loops)
11. [Classes](#section-11-classes)
12. [Modules](#section-12-modules)
13. [Generators](#section-13-generators)
14. [Sets and WeakSets](#section-14-sets-and-weaksets)
15. [Map and Weak Map](#section-15-map-and-weak-map)
16. [Symbols](#section-16-symbols)
17. [Iterables and Iterators](#section-17-iterables-and-iterators)
18. [String methods](#section-18-string-methods)
19. [Reference](#section-19-reference)
20. [Whats Next Step?](#section-20-whats-next-step)
Section 1. Course Introduction
=====================
1.1. Welcome
---------------------
Hi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `ES6-ECMAScript 6-ECMAScript 2015`. In this course/tutorial will go over how to start with using the latest ES6 features right with the bang. Will dive into the specifics of ES6 and new features it includes. We'll look at new keywords, syntax, and operators that can be used to simplify code structure. At the end we'll take a look at class, module syntax in ES6 and how that can be used immediately with very popular JavaScript library/frameworks like Angular, React, Node, etc. Let us explore and learn some pretty exciting stuff so let's go ahead and get started with `ES6-ECMAScript 6-ECMAScript 2015`.
`ES6-ECMAScript 6-ECMAScript 2015` will introduce us to the newest language features that can be used in JavaScript code - The Modern JavaScript.
1.2. Who is this for?
---------------------
This course is for anyone and everyone, Almost everyone! who is interested in boost skills and further career - by learning new latest programming/coding standards/features/syntaxes/keywords introduced in the latest version of JavaScript to become a hi-tech developer.
Section 2. Introduction to ES6-ECMAScript 6
=====================
2.1. ES5/ECMAScript 5
---------------------
- JavaScript is standard implementations of standard specifications called ECMAScript
- The last ECMAScript Version is 5.0 ie. ES5
- JavaScript = Language in practice, ES5/ES6 = Langauge standards
2.2. What is ES6-ECMAScript 6-ECMAScript 2015
---------------------
- `1995` - JavaScript invented/created by `“Brandan Eich”` at `Netscape` originally named as `"LiveScript"`
- `1996` - `Microsoft` has developed new version of JavaScript named as `"JScript"` for `IE-3`
- Due to different standards/version on a different browser, there was an urgent need to standardized language
- `ECMA (European Computer Manufacturers Association)` is the governing body which provides standardization/specification or JavaScript language implementation
- `1997` - ECMAScript 1 released (JavaScript Submitted to `ECMAScript`)
- `2009` - ECMAScript 5 released (`for...each, array method, map, filter`)
- `2015` - ECMAScript 6 released (tones of advanced awesome features - `let, const, function default parameters, arrow function, classes, template string, new array/object methods`)
- ES6-ECMAScript 6-ECMAScript 2015 is the evolution of ES5...Future of JavaScript
- ES6 adds a tremendous amount of features to JavaScript such as let, constants, classes, Fat Arrow functions, etc.
- `ES6-ECMAScript 6-ECMAScript 2015 = ES5 + New Awesome Features`
2.3. Typescript
---------------------
- Typescript is Open source/free development language
- Developed and maintained by Microsoft
- Typed superset of JavaScript which Compiles to plain JavaScript
- It consists of variables Data Types string, number, boolean, etc. but it is optional
- One can write safer/meaningful/easily maintainable/scalable code
2.4. ES6 Browser Support
---------------------
Most of the features will discuss here are supported in `latest version of the major web browsers` such as Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.
Check current browser support and compatibility status for ES6:
- [ES6/ECMAScript 6 compatibility table](https://kangax.github.io/compat-table/es6/)
- [W3C Browser Support for ES6/ECMAScript 6 (ECMAScript 2015)](https://www.w3schools.com/js/js_versions.asp)
> **Note**: Internet Explorer does not support ES6/ECMAScript 6.
2.5. Using ES6/ECMAScript 6 now
---------------------
- If the browser does not support all of the ES6/ECMAScript 6 features than alternatively:
- we can use the `online transpilers (source-to-source compilers)` free of cost which `transpile our current ES6 code to ES5` for better browser compatibility without leaving out the benefits of enhanced syntax and capabilities of ES6
- Transpiling is the process of taking `ES6 code and converting it into ES5`, so browsers can read it
- The transpiling process is also used for languages like `CoffeeScript and TypeScript` to convert code into JavaScript
- There are many different transpilers/transpiling tools available, the most popular are:
- [Typescript](https://www.typescriptlang.org/)
- [Babel](https://babeljs.io/),
- [Traceur](https://github.com/google/traceur-compiler) and
- [Closure](https://closure-compiler.appspot.com/)
- Some testing we can try in [Chrome Canary - https://www.google.com/intl/en_in/chrome/canary/ ](https://www.google.com/intl/en_in/chrome/canary/) a version of Google Chrome (some ES6 feature supported not all, unstable)
Section 3. Transpiling ES6-ECMAScript 6
=====================
3.1 Transpiler
---------------------
- All browsers `does not supports all latest new features` of ES6/ES2015
- Chrome and Firefox supports almost 90% of features
- `Transpilers` - converts ES6/ES2015 code into ES5 (plain JavaScript, browser understandable code)
- Popular Transpilers - Typescript, Babel, Traceur, Closure
3.2. Babel.js (https://babeljs.io/) - working with Babel
---------------------
- Babel is one of the most popular tools for transpiling ES6 code and gets ES5 code
- Babel was `created by Sebastian McKenzie` an Australian developer at Facebook
- `ReactJS the UI library created by Facebook uses Babel` as a preferred tool for transpiling the ES6 features back into ES5 JavaScript
3.3. Babel in-browser transpiling
---------------------
- In real project it's advisable `not to use In Browser Transformer`, it will force the browser to convert all of the ES6 to ES5 at run time, which may make our projects run much slower
- For the purpose of demo create a .html file and under script tag use an ES6 function syntax to pass default parameters or any other ES6 feature. If browser support ES6 feature you will get proper output else will get error `UnCaught SyntaxError: Unexpected token = `
- To get rid of ES6 non/not support error in browser, download and use/include Babel transpiler script library like: `` and finally register/make it official with `<script type="text/babel">`
> **Note**: Now a days majority of browser supports most of the ES6 features so accordingly as per needs/requirements include Babel or other transpilers in HTML file.
> **Syntax & Example**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include babel library to transpile/convert ES6 code to ES5 -->
<script src="../assets/script/babel/babel_browser_5.8.29.min.js">
// Write all JavaScript code here
// ES6 function syntax with default parameter
function showFullName(firstName='Dinanath', lastName='Jayaswal') {
console.log(firstName + ' '+ lastName);
}
showFullName();
Working with ES6 & Typescript features