SlideShare a Scribd company logo
1 of 21
Introduction to es6
Index
What is ES6
Why should you care to read ES6
Improved Scoping with let and const
Template String
Arrows
Classes
Collections
What is ECMAScript?
ECMAScript is the name of the international standard that defines JavaScript.
ES6 → ECMAScript 2015.
Latest ECMAScript version is ES7 which is ECMAScript 2016.
Basically it is a superset of es5
Why should you even care
Makes javascript a less confusing language as it is especially for a java
developer who deals with classes
Industry is moving towards a “Full Stack developer” than only a “Java developer”
Has a lot of goodies like collections , nice scoping constructs and advance
concepts like proxies and metaprogramming
Javascript is no longer just a client side language
Many new library additions, including core Math libraries, Array conversion
helpers, String helpers, and Object.assign for copying.
Improved Scoping with let and const
Var which is used is function scoping and pollutes the variable with concepts
like hoisting
Hoisting is a JavaScript mechanism where variables and function declarations
are moved to the top of their scope before code execution.
Block scoping is provided via let and const .
const helps enforce immutable variable references which means you cannot
change the value of a const-declared variable after you create it. If you try,
you'll get a TypeError
You must assign a value to a const-declared variable when you create it. You
Template String
Template strings provide syntactic sugar for constructing strings. This is similar
to string interpolation features in Perl, Python and more.
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`)
Similarly multiline strings can be written
Arrows like Lambda in C# or Java8
Arrows are a function shorthand using the => syntax. They are syntactically
similar to the related feature in C#, Java 8 and CoffeeScript.
They support both statement block bodies as well as expression bodies which
return the value of the expression. Unlike functions, arrows share the same
lexical this as their surrounding code.
Basic Usage:-
var odds = evens.map(v => v + 1);//single argument
(() => alert("Hello!"))(); // if your function takes no arguments, you must include
empty parentheses before the arrow.
Classes and OOPs in ES6
JavaScript's class is (mostly) just syntactical sugar for prototypes, which are
very different from traditional classes.
"Instantiating" a class in JavaScript does create a new object, but not one that is
independent of its parent class. The object is linked to a prototype
Classes are basically base and derived classes . Class declarations that don't
use the extends keyword are called base classes:
You don't have to define a constructor function. If you choose not to, the engine
will insert an empty one for you
n ES6, built-ins like Array, Date and DOM Elements can be subclassed.
Subclasses and extends
If your derived class needs to refer to the class it extends, it can do so with the
super keyword.
A derived class can't contain an empty constructor. Even if all the constructor
does is call super(), you'll still have to do so explicitly. It can, however, contain
no constructor.
You must call super in the constructor of a derived class before you use this.
Uses of Super
In JavaScript, there are precisely two use cases for the super keyword.
Within subclass constructor calls. If initializing your derived class requires you
to use the parent class's constructor, you can call
super(parentConstructorParams[ ) within the subclass constructor, passing
along any necessary parameters.
To refer to methods in the superclass. Within normal method definitions,
derived classes can refer to methods on the parent class with dot notation:
super.methodName.
Faking Encapsulation
Private object properties don’t exist in JavaScript. We have to fake them. The
most common way to do that is to adhere to a simple convention: If a
property name is prefixed with an underscore (or, less commonly, suffixed
with an underscore), then it should be treated as non-public.
The most common way to fake private object properties is to use ordinary
variables in the constructor, and capture them in closures and our class’s
methods would themselves need to be defined in the constructor and
attached to the instance.
There are techniques such as using weakMap and Symbols
Getters and setters
Getters and setters in ES6 serve the same purpose that they do in other
languages... including ES5. ES5 already allows getters and setters via
Object.defineProperty, though they're less clean and more cumbersome to
use.
Effectively, getters and setters allow you to use standard property access
notation for reads and writes while still having the ability to customize how
the property is retrieved and mutated without needed explicit getter and setter
methods.
Shorthand & Computed Properties
If the name of your object's keys are identical to the variables naming their values,
you can initialize your object literal with just the variable names, rather than
defining it as a redundant key-value pair.
const foo = 'foo';
const bar = 'bar';
const myObject = {foo : foo, bar : bar};//Old Syntax
const myObject = { foo, bar }//New syntax
Collections in ES6
ES2015 brings us four new collection types:
Map and WeakMap
Set, and WeakSet.
The new Map type is conceptually similar, but lets you use arbitrary datatypes for
keys -- not just strings and symbols -- and eliminates some of the many pitfalls
associated with trying to use an object as a map.
WeakMap
A WeakMap is a map that doesn't prevent its keys from being garbage-collected.
That means that you can associate data with objects without having to worry
about memory leaks.
if your program loses all external references to the keys of a WeakMap, it can
garbage-collect their values.
WeakMap
The API for WeakMap is similar to that of Map, with a few key differences:
1. You can only use Object keys in a WeakMap. That means no Strings, and no Symbols.
2. WeakMaps only have set, get, has, and delete methods -- that means you can't iterate over weak
maps.
3. WeakMaps don't have a size property.
The reason you can't iterate a WeakMap, or check its length, is because the garbage collector
could run in the middle of your iteration: One moment, it'd be full. The next, empty.
Set
A Set is a collection that contains only unique values. In other words, each
element of a set can appear only once.
This is a useful data type if you need to keep track of objects that are inherently
unique, such as the current users in a chat room.
Set and Map have almost identical APIs. The main difference is that Set doesn't
have a set method, since it doesn't store key-value pairs. Everything is just about
the same.
WeakSet is to Set as WeakMap is to Map
Default parameters and Rest parameters
Default function parameters allow formal parameters to be initialized with
default values if no value or undefined is passed.
function f(x, y=12) {return x + y;}
f(3) == 15
The rest parameter syntax allows us to represent an indefinite number of
arguments as an array. Quite like varags in java
function f(x, ...y) { return x * y.length;}
f(3, "hello", true) == 6
Important topics not covered
Reflection API
Proxies : enable creation of objects with the full range of behaviors available to
host objects. Can be used for interception, object virtualization,
logging/profiling, etc.
Generators : used for Async Flow Control
Modules : for component definition.
Promises in Es6
Spread Operator
Online Console
https://es6console.com/
Appendix
http://2ality.com/2016/01/private-data-classes.html
https://stackoverflow.com/questions/22156326/private-properties-in-javascript-
es6-classes
https://www.sitepoint.com/object-oriented-javascript-deep-dive-es6-classes/
https://scotch.io/tutorials/better-node-with-es6-pt-i
https://github.com/lukehoban/es6features

More Related Content

What's hot (20)

Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
ReactJS
ReactJSReactJS
ReactJS
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Introduction to ASP.NET Core
Introduction to ASP.NET CoreIntroduction to ASP.NET Core
Introduction to ASP.NET Core
 
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
 
Introduction to Spring Framework
Introduction to Spring FrameworkIntroduction to Spring Framework
Introduction to Spring Framework
 
Spring boot
Spring bootSpring boot
Spring boot
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
 
React JS
React JSReact JS
React JS
 
An Introduction to Redux
An Introduction to ReduxAn Introduction to Redux
An Introduction to Redux
 
The New JavaScript: ES6
The New JavaScript: ES6The New JavaScript: ES6
The New JavaScript: ES6
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 

Viewers also liked (17)

Jsoup
JsoupJsoup
Jsoup
 
RESTEasy
RESTEasyRESTEasy
RESTEasy
 
JFree chart
JFree chartJFree chart
JFree chart
 
Spring Web Flow
Spring Web FlowSpring Web Flow
Spring Web Flow
 
Grails with swagger
Grails with swaggerGrails with swagger
Grails with swagger
 
Introduction to gradle
Introduction to gradleIntroduction to gradle
Introduction to gradle
 
Hamcrest
HamcrestHamcrest
Hamcrest
 
Reactive java - Reactive Programming + RxJava
Reactive java - Reactive Programming + RxJavaReactive java - Reactive Programming + RxJava
Reactive java - Reactive Programming + RxJava
 
Progressive Web-App (PWA)
Progressive Web-App (PWA)Progressive Web-App (PWA)
Progressive Web-App (PWA)
 
Introduction to thymeleaf
Introduction to thymeleafIntroduction to thymeleaf
Introduction to thymeleaf
 
Jmh
JmhJmh
Jmh
 
Java 8 features
Java 8 featuresJava 8 features
Java 8 features
 
Unit test-using-spock in Grails
Unit test-using-spock in GrailsUnit test-using-spock in Grails
Unit test-using-spock in Grails
 
Apache tika
Apache tikaApache tika
Apache tika
 
Actors model in gpars
Actors model in gparsActors model in gpars
Actors model in gpars
 
Cosmos DB Service
Cosmos DB ServiceCosmos DB Service
Cosmos DB Service
 
Vertx
VertxVertx
Vertx
 

Similar to Introduction to es6

A Brief, but Dense, Intro to Scala
A Brief, but Dense, Intro to ScalaA Brief, but Dense, Intro to Scala
A Brief, but Dense, Intro to ScalaDerek Chen-Becker
 
Scala Talk at FOSDEM 2009
Scala Talk at FOSDEM 2009Scala Talk at FOSDEM 2009
Scala Talk at FOSDEM 2009Martin Odersky
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You KnewTroy Miles
 
About Functional Programming
About Functional ProgrammingAbout Functional Programming
About Functional ProgrammingAapo Kyrölä
 
Algebraic Data Types for Data Oriented Programming - From Haskell and Scala t...
Algebraic Data Types forData Oriented Programming - From Haskell and Scala t...Algebraic Data Types forData Oriented Programming - From Haskell and Scala t...
Algebraic Data Types for Data Oriented Programming - From Haskell and Scala t...Philip Schwarz
 
React & Redux JS
React & Redux JS React & Redux JS
React & Redux JS Hamed Farag
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to ScalaSynesso
 
Before you jump into Angular
Before you jump into AngularBefore you jump into Angular
Before you jump into AngularM A Hossain Tonu
 
Java interview questions and answers
Java interview questions and answersJava interview questions and answers
Java interview questions and answersKrishnaov
 
Introduction of Java 8 with emphasis on Lambda Expressions and Streams
Introduction of Java 8 with emphasis on Lambda Expressions and StreamsIntroduction of Java 8 with emphasis on Lambda Expressions and Streams
Introduction of Java 8 with emphasis on Lambda Expressions and StreamsEmiel Paasschens
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningSyed Irtaza Ali
 
Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6Nilesh Jayanandana
 

Similar to Introduction to es6 (20)

A Brief, but Dense, Intro to Scala
A Brief, but Dense, Intro to ScalaA Brief, but Dense, Intro to Scala
A Brief, but Dense, Intro to Scala
 
Intro to Scala
 Intro to Scala Intro to Scala
Intro to Scala
 
Scala Talk at FOSDEM 2009
Scala Talk at FOSDEM 2009Scala Talk at FOSDEM 2009
Scala Talk at FOSDEM 2009
 
Es6 day1
Es6 day1Es6 day1
Es6 day1
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You Knew
 
About Functional Programming
About Functional ProgrammingAbout Functional Programming
About Functional Programming
 
Algebraic Data Types for Data Oriented Programming - From Haskell and Scala t...
Algebraic Data Types forData Oriented Programming - From Haskell and Scala t...Algebraic Data Types forData Oriented Programming - From Haskell and Scala t...
Algebraic Data Types for Data Oriented Programming - From Haskell and Scala t...
 
React & Redux JS
React & Redux JS React & Redux JS
React & Redux JS
 
Scala tutorial
Scala tutorialScala tutorial
Scala tutorial
 
Scala tutorial
Scala tutorialScala tutorial
Scala tutorial
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to Scala
 
Data structures
Data structuresData structures
Data structures
 
Before you jump into Angular
Before you jump into AngularBefore you jump into Angular
Before you jump into Angular
 
JavaScript.pptx
JavaScript.pptxJavaScript.pptx
JavaScript.pptx
 
Java mcq
Java mcqJava mcq
Java mcq
 
Java interview questions and answers
Java interview questions and answersJava interview questions and answers
Java interview questions and answers
 
Introduction of Java 8 with emphasis on Lambda Expressions and Streams
Introduction of Java 8 with emphasis on Lambda Expressions and StreamsIntroduction of Java 8 with emphasis on Lambda Expressions and Streams
Introduction of Java 8 with emphasis on Lambda Expressions and Streams
 
Colloquium Report
Colloquium ReportColloquium Report
Colloquium Report
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learning
 
Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6
 

More from NexThoughts Technologies (20)

Alexa skill
Alexa skillAlexa skill
Alexa skill
 
GraalVM
GraalVMGraalVM
GraalVM
 
Docker & kubernetes
Docker & kubernetesDocker & kubernetes
Docker & kubernetes
 
Apache commons
Apache commonsApache commons
Apache commons
 
HazelCast
HazelCastHazelCast
HazelCast
 
MySQL Pro
MySQL ProMySQL Pro
MySQL Pro
 
Microservice Architecture using Spring Boot with React & Redux
Microservice Architecture using Spring Boot with React & ReduxMicroservice Architecture using Spring Boot with React & Redux
Microservice Architecture using Spring Boot with React & Redux
 
Swagger
SwaggerSwagger
Swagger
 
Solid Principles
Solid PrinciplesSolid Principles
Solid Principles
 
Arango DB
Arango DBArango DB
Arango DB
 
Jython
JythonJython
Jython
 
Introduction to TypeScript
Introduction to TypeScriptIntroduction to TypeScript
Introduction to TypeScript
 
Smart Contract samples
Smart Contract samplesSmart Contract samples
Smart Contract samples
 
My Doc of geth
My Doc of gethMy Doc of geth
My Doc of geth
 
Geth important commands
Geth important commandsGeth important commands
Geth important commands
 
Ethereum genesis
Ethereum genesisEthereum genesis
Ethereum genesis
 
Ethereum
EthereumEthereum
Ethereum
 
Springboot Microservices
Springboot MicroservicesSpringboot Microservices
Springboot Microservices
 
Google authentication
Google authenticationGoogle authentication
Google authentication
 
Java 9 Features
Java 9 FeaturesJava 9 Features
Java 9 Features
 

Recently uploaded

Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 

Recently uploaded (20)

Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 

Introduction to es6

  • 2. Index What is ES6 Why should you care to read ES6 Improved Scoping with let and const Template String Arrows Classes Collections
  • 3. What is ECMAScript? ECMAScript is the name of the international standard that defines JavaScript. ES6 → ECMAScript 2015. Latest ECMAScript version is ES7 which is ECMAScript 2016. Basically it is a superset of es5
  • 4. Why should you even care Makes javascript a less confusing language as it is especially for a java developer who deals with classes Industry is moving towards a “Full Stack developer” than only a “Java developer” Has a lot of goodies like collections , nice scoping constructs and advance concepts like proxies and metaprogramming Javascript is no longer just a client side language Many new library additions, including core Math libraries, Array conversion helpers, String helpers, and Object.assign for copying.
  • 5. Improved Scoping with let and const Var which is used is function scoping and pollutes the variable with concepts like hoisting Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Block scoping is provided via let and const . const helps enforce immutable variable references which means you cannot change the value of a const-declared variable after you create it. If you try, you'll get a TypeError You must assign a value to a const-declared variable when you create it. You
  • 6. Template String Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`) Similarly multiline strings can be written
  • 7. Arrows like Lambda in C# or Java8 Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both statement block bodies as well as expression bodies which return the value of the expression. Unlike functions, arrows share the same lexical this as their surrounding code. Basic Usage:- var odds = evens.map(v => v + 1);//single argument (() => alert("Hello!"))(); // if your function takes no arguments, you must include empty parentheses before the arrow.
  • 8. Classes and OOPs in ES6 JavaScript's class is (mostly) just syntactical sugar for prototypes, which are very different from traditional classes. "Instantiating" a class in JavaScript does create a new object, but not one that is independent of its parent class. The object is linked to a prototype Classes are basically base and derived classes . Class declarations that don't use the extends keyword are called base classes: You don't have to define a constructor function. If you choose not to, the engine will insert an empty one for you n ES6, built-ins like Array, Date and DOM Elements can be subclassed.
  • 9. Subclasses and extends If your derived class needs to refer to the class it extends, it can do so with the super keyword. A derived class can't contain an empty constructor. Even if all the constructor does is call super(), you'll still have to do so explicitly. It can, however, contain no constructor. You must call super in the constructor of a derived class before you use this.
  • 10. Uses of Super In JavaScript, there are precisely two use cases for the super keyword. Within subclass constructor calls. If initializing your derived class requires you to use the parent class's constructor, you can call super(parentConstructorParams[ ) within the subclass constructor, passing along any necessary parameters. To refer to methods in the superclass. Within normal method definitions, derived classes can refer to methods on the parent class with dot notation: super.methodName.
  • 11. Faking Encapsulation Private object properties don’t exist in JavaScript. We have to fake them. The most common way to do that is to adhere to a simple convention: If a property name is prefixed with an underscore (or, less commonly, suffixed with an underscore), then it should be treated as non-public. The most common way to fake private object properties is to use ordinary variables in the constructor, and capture them in closures and our class’s methods would themselves need to be defined in the constructor and attached to the instance. There are techniques such as using weakMap and Symbols
  • 12. Getters and setters Getters and setters in ES6 serve the same purpose that they do in other languages... including ES5. ES5 already allows getters and setters via Object.defineProperty, though they're less clean and more cumbersome to use. Effectively, getters and setters allow you to use standard property access notation for reads and writes while still having the ability to customize how the property is retrieved and mutated without needed explicit getter and setter methods.
  • 13. Shorthand & Computed Properties If the name of your object's keys are identical to the variables naming their values, you can initialize your object literal with just the variable names, rather than defining it as a redundant key-value pair. const foo = 'foo'; const bar = 'bar'; const myObject = {foo : foo, bar : bar};//Old Syntax const myObject = { foo, bar }//New syntax
  • 14. Collections in ES6 ES2015 brings us four new collection types: Map and WeakMap Set, and WeakSet. The new Map type is conceptually similar, but lets you use arbitrary datatypes for keys -- not just strings and symbols -- and eliminates some of the many pitfalls associated with trying to use an object as a map.
  • 15. WeakMap A WeakMap is a map that doesn't prevent its keys from being garbage-collected. That means that you can associate data with objects without having to worry about memory leaks. if your program loses all external references to the keys of a WeakMap, it can garbage-collect their values.
  • 16. WeakMap The API for WeakMap is similar to that of Map, with a few key differences: 1. You can only use Object keys in a WeakMap. That means no Strings, and no Symbols. 2. WeakMaps only have set, get, has, and delete methods -- that means you can't iterate over weak maps. 3. WeakMaps don't have a size property. The reason you can't iterate a WeakMap, or check its length, is because the garbage collector could run in the middle of your iteration: One moment, it'd be full. The next, empty.
  • 17. Set A Set is a collection that contains only unique values. In other words, each element of a set can appear only once. This is a useful data type if you need to keep track of objects that are inherently unique, such as the current users in a chat room. Set and Map have almost identical APIs. The main difference is that Set doesn't have a set method, since it doesn't store key-value pairs. Everything is just about the same. WeakSet is to Set as WeakMap is to Map
  • 18. Default parameters and Rest parameters Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. function f(x, y=12) {return x + y;} f(3) == 15 The rest parameter syntax allows us to represent an indefinite number of arguments as an array. Quite like varags in java function f(x, ...y) { return x * y.length;} f(3, "hello", true) == 6
  • 19. Important topics not covered Reflection API Proxies : enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc. Generators : used for Async Flow Control Modules : for component definition. Promises in Es6 Spread Operator