Next Generation of Javascript

Next Generation of Javascript

• 1.
  NEXT GENERATION OFJAVASCRIPT PREMKUMAR M, Software Engineer, 1
• 2.
  Agenda ● Data Types ●Spread & Rest Operator ● Destructuring ● Classes ● Imports & Exports ● Arrow Functions 2
• 3.
  Data Types 3
• 4.
  Spread & Rest TripleDot (...) 4
• 5.
  Spread 5 The spread operator“spreads” the values in an iterable (arrays, strings) across zero or more arguments or elements.
• 6.
  Rest 6 The rest parametergives us an easier and cleaner way of working with an indefinite number of parameters.
• 7.
  Destructuring ● Destructuring isa JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. ● That is, we can extract data from arrays and objects and assign them to variables. ● Types of Destructuring ○ Array Destructuring ○ Object Destructuring 7
• 8.
  Array Destructuring -Examples ● const [ name1, name2 ] = [ ‘John’, ‘Peter’, ‘Jack’ ] ● const [ name1, ,name2 ] = [ ‘John’, ‘Peter’, ‘Jack’ ] ● const [ name1, ...names ] = [ ‘John’, ‘Peter’, ‘Jack’ ] ● const [ name1, , , name4= ’Mickel’ ] = [ ‘John’, ‘Peter’, ‘Jack’ ] ● const newArray = [...nameArray, ‘Mike’] 8 Swapping the values const var1 =1 const var2 = 2 [ var2, var1 ] = [ var1, var2]
• 9.
  Object Destructuring -Examples const employee = { name: ‘John’, ‘Age’: 23, Country: [ ‘Sydney’, ’London’ ]} ● const { name, Age = 18 } = employee ● const { Age: empAge } = employee ● const { Country: [country1]} = employee ● const {name, ...otherDetails} = employee ● const newObj = { ...employee } 9 const prop = ‘name’ const {[prop]: firstName} = employee
• 10.
  Classes ● Less codesetup — Who doesn’t want to write less code? With ES6 classes the code to write a function is much lesser compared to the traditional method. ● Constructor function — it provides a clear function to create objects. ● All the logic is contained — You can clearly specify the methods and properties in one place instead of creating one constructor function and defining methods on the prototype one-by-one. 10
• 11.
  Imports & Exports Thereare 4 types of exports: 1— Named exports (several per module) 2— Default exports (one per module) 3— Mixed named & default exports 4— Cyclic Dependencies 11 MORE
• 12.
  Arrow Functions /Fat Arrow Functions 12 Arrow functions are a more concise syntax for writing function expressions. Arrow Functions have two main benefits: ● A shorter syntax then typical functions ● No binding of this
• 13.
  No Binding ofthis function Counter() { this.num = 0; this.timer = setInterval(function add() { this.num++; console.log(this.num); }, 1000); } var a = new Counter(); 13 function Counter() { this.num = 0; this.timer = setInterval(() => { this.num++; console.log(this.num); }, 1000); } var a = new Counter();
• 14.
  14
• 15.
  15