Final ppt

Copyright © 2015 Talentica Software (I) Pvt Ltd. All rights
TALENTICA
SOFTWARE
ES5 to ES6+

Copyright © 2015 Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights
More the lines of code, greater are the
chances of bugs!

Default Parameters in ES6(How it helps to
solve runtime undefined value error)

New line in ES5 Vs ES6

Destructuring Assignment in ES6

Nested Destructuring

Enhanced Object Literals

...continued

Computed Properties

Arrow Functions
• Remove the word function
• Put an arrow => after the parenthesis containing arguments
• Paranthesis is optional in case of single argument

Without Arrow and with Arrow function – the
classical this/that/self problem

...because this is not yours! It's of global
window object

Tail Call Optimization
• If the stack created from the previous call was never dropped, it takes up space until there is
none left.
• In JavaScript ES5 and below, you get “Max Call Stack Exceeded” errors.
• Don't push too many functions in the call stack. Results in ‘Maximum call stack size
exceeded’.
• Practical use case in recursive functions. Make sure your recursive calls are TCO.

What will be the result of this function?

And this?

Dictionary implementation in ES5

..And That in ES6

Promises

...promises continued

Comparison between var, let and const.
• ES6 introduced let & const keywords.
• let and const have a block scope whereas var has
function scope. That means let & const will be accessible
inside the given block of code where it is declared.

Output??
When using var

More on let and const
let cannot be redeclared in same block of code unlike var.
const cannot be reassigned a value again.

Hoisting
24
undefined

Hoisting -
25
undefined
TypeError:bar is not a function
function
"In bar"

Quiz
26
bam
In second bar
In second bar

Closure - How we unknowingly
often use it and its importance.
27
1
2

Closure
28
23
24

JavaScript “this” Keyword - apply, call, bind

Value of “this” depends on context.
• The object that invokes the this Function is in
context, and we can change the context by
invoking the this Function with another object; then
this new object is in context.
30
Jeremy Gillbert
Ellena Gillbert

Scenarios when the this keyword
becomes tricky
• When used in a method passed as a callback
• Inside closure
• When method is assigned to a variable
• When borrowing methods
31

When used in a method passed as a
callback
32
Undefined

33

Inside closure
34
Jeremy Gillbert is playing at undefined
Ellena Gillbert is playing at undefined

35
Jeremy Gilbbert is playing at The Masters
Ellena Gilbbert is playing at The Masters

When method is assigned to a variable
36
Jeremy Gillbert 17

37

When borrowing methods
38

39

Set the this value with Apply or Call
40

41
Set this value with call
Set this value with apply
global avgScore
46.4
Global avgScore
46.4

• Short intro to classes in ES6
• Why classes ?
• Behind the scenes (ES5)
• Inheritance in JS
• Few useful ES7+ features
JS is "classy" now!

Classes in ES6
• "class" keyword has been introduced in ES6.
• Replicates similar (not exactly same) behavior as
class based languages (e.g.Java)
• "constructor" keyword introduced with classes.
• Quick syntax and demo at Babel REPL

Why Classes ?
• It's much easier to read and simpler to write.
• Easier for a class based language developer to adopt JS.
• Cleaner and less error-prone.

Uncoating the Sugar
• Class is just a function.
• Functions in JS have a property called 'prototype'.
• About prototype and __proto__
• When 'new' is used on a class, an Object is created
and its __proto__ is linked to prototype of that class.
• REPL demo of protoype and __proto__

Let's Extend
• 'extends' keyword introduced in ES6.
• Used for implementing inheritance.
• Internally, it links the prototype of the sub class with
superclass. Also, it sets the __proto__ of sub class to
__proto__ of super class.

Inheritance in JS (ES6 vs ES5)

To ES7 and beyond
• Array.prototype.includes (ES7)
• Object.entries and Object.values (ES8)

Contd..
• Promise.prototype.finally (ES9)
• Object Rest/spread properties (ES9)

End
Thank you…

Final ppt

More Related Content

Similar to Final ppt

Recently uploaded

Final ppt

Editor's Notes