Next Generation of Javascript
Download as pptx, pdf0 likes85 views
The document summarizes key concepts in modern JavaScript including data types, spread and rest operators, destructuring, classes, imports and exports, and arrow functions. It provides examples of using spread syntax to expand iterables and rest parameters to handle indefinite arguments. It also demonstrates array and object destructuring to extract values and assign to variables. Classes are covered as providing clearer syntax over constructor functions. Imports and exports are summarized as supporting named, default, mixed, and handling cyclic dependencies. Arrow functions are described as providing a shorter syntax without binding this.
![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]](https://image.slidesharecdn.com/nextgenerationofjavascript-190629100636/85/Next-Generation-of-Javascript-8-320.jpg)
![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](https://image.slidesharecdn.com/nextgenerationofjavascript-190629100636/85/Next-Generation-of-Javascript-9-320.jpg)
Next Generation of Javascript
- 1. NEXT GENERATION OF JAVASCRIPT 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 Triple Dot (...) 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 parameter gives us an easier and cleaner way of working with an indefinite number of parameters.
- 7. Destructuring ● Destructuring is a 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 code setup — 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 There are 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 of this 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