Learning ECMAScript 6 in Deep With Examples For Beginners
Published in
7 min readJun 21, 2020
What is ECMAScript6?
ECMA stands for European Computer Manufacturer Association. ECMA is the association that puts out the guidelines for JavaScript in all browsers.
It means that we now have a ton of new options to work with when designing our JavaScript projects. We have new keywords available for declaring variables, like let and const. For functions, we can also use default parameters and arrow functions. ES 6 also contains classes, template strings, and new ways of dealing with arrays and objects.
Examples
- Open browser’s console to view all results and logs of the example programs.
- For Google Chrome -> Go to Developer Tools and then select the console tab.
ES6 Syntex
- Template String — Template string allows us to create strings that are longer and that have a lot of dynamic content in them.
- Spread Operators — The spread operator can turn the elements of an array into arguments of a function call, or into elements of an array literal.
- Map — Map is can be used for the following purposes.
** Holds key-value pairs,
** Any type can be used as a key,
** Why use a map?
==> When you have to use something other than a string as a key
==> To utilize key-value pairs that are always the same values
==> For iterating in order
- Sets -
** Collections of values,
** Can be on any type,
** Each value must be unique
- The for…of loop — For-of is a new loop in ES6 that we can use to loop over iterable objects like arrays, strings, maps, and sets.
ES6 Functions and Objects
- Default function parameters — Default parameters can be extremely useful when you want to use a default value if another value is not provided.
time=3 is the default value of function param in below example
- Enhancing object literals — ES6 enhancements give us ways of shortening and simplifying object literals.
- Arrow function — Arrow functions are a great way to make your JavaScript code more readable and more compact.
- Arrow functions and the
thisscope - In the previous topic, we reviewed how arrow functions can make our code more readable. In addition, arrow functions can help us deal with the scope of the ‘this’ keyword in our JavaScript code
- Destructuring assignment — Destructuring Assignment gives us an easy way to extract data from arrays and objects and assign them to variables.
- Generators -
** Generators are a new type of function that allows us to pause functions in the middle of execution, to be resumed later.
** We hit pause within our function by using the new yield keyword. And this can be used multiple times within the same function.
** So generators make it much easier to create asynchronous functions.
- Symbols -
** New type of primitive in JavaScript
** Often used as unique IDs
** Define customized iteration behavior
- Iterators -
** Processing items in a collection
** Using for loops, while loops, and map()
** Custom iteration behavior new in ES6
** New Protocols
==> Iterable — JS objects define their own iteration behavior
==> Iterator — a standard way to produce a sequence of values.
Asynchronous Features
- Promises -
** Promises have emerged in the S6 to help us deal with asynchronous behavior in JavaScript.
** When something is asynchronous it means that some sort of waiting is going on.
** They make asynchronous code more manageable and more reusable.
- Building promises — Often we use promises to load data. This example has a function called spacePeople that returns a promise. We’ll call it space people because it’s going to fetch some data from an API of astronauts currently in space. This is going to be a function that returns a promise.
- Loading data with fetch -
** Fetch function simplify all code from Building promises section.
** The fetch function works natively in most browsers.
** There are also node packages that work with fetches like node fetch and isomorphic fetch.
- Async and await -
** Async functions give us another way of dealing with asynchronous javascript.
** Previously we only had access tocallbacksand topromisesbut withasyncawaitwe can write asynchronous code with a more synchronous looking code structure.
** Theasynckeyword makes it possible for us to write some cleaner more readable code but to also take advantage of asynchronous behavior.
** Another nice benefit of usingasyncawaitis that we have error handling and it’s sometimes a little bit easier to debug than a promise.
- Async and fetch — Fetch is by definition is asynchronous, we make a request, and then we wait to get some data back. So we’re going to do just this inside of an async function using Github request.
ES6 Classes
- Class inheritance — The idea of class inheritance is pretty simple. We create one superclass and then we can extend this class for reuse in different ways. Developers who have come to JavaScript from Python or Java are usually pretty excited to hear this because it’s so similar to the class syntax of those languages.
- Getters and setters -
** A getter is a method that gets the value of a specific property
** A setter is a method that sets the value of a specific property
** Getters and setters are very popular in other programming languages. They have come to JavaScript in a major way inside of objects and in classes.
Happy learning and coding !!!
This post was originally posted here.
I have tried to share some of the lessons that I have learned from various sources. I will continue to keep learning more and sharing more. I hope it helps someone and makes their life a bit easier.
If you like this article, do give it a thumbs up, please don’t forget to click 👏👏👏 , comment on it, and share it with your friends.
Credits —I have learned and followed video lecture Learning ECMAScript 6 by Eve Porcello.
Also, to be notified about my new articles and stories, follow me on Medium, Github, and Twitter. You can find me on LinkedIn as well. I am quite active on Dev Community as well and write small topics over there. Cheers!!!!
