ES6 detailed slides for presentation.pptx

Web Engineering notes

1. Introduction ES6 Mr. Yasir Arfat

2. ES6, also known as ECMAScript 2015, is a significant update to JavaScript that simplifies coding, improves efficiency, and introduces modern programming techniques. Imagine you are upgrading from a feature phone to a smartphone . ES6 offers tools that are easier to use and much more powerful. These updates help developers write shorter, cleaner, and more efficient code. Example : Before ES6, we had to write complex functions and handle strings manually. Now , with ES6, many tasks are automated or simplified, making JavaScript friendlier even for beginners. ES6 ( ECMAScript 2015)

3. Template literals use backticks (``) instead of quotes (' or "). They allow: Embedding variables easily using ${}. Writing multi-line strings without special characters. Example : const name = "Ali"; const age = 15; console.log (`Hi, I’m ${name}, and I’m ${age} years old.`); Multi-line strings: const poem = `Roses are red, Violets are blue, JavaScript is fun , And so are you!`; console.log(poem ); Template Literals: Easier Strings!

4. Arrow functions (=>) simplify writing functions, especially for quick tasks . Example function square( num ) { return num * num ; } console.log(square(4 )); // Outputs: 16 // Arrow Function const square = ( num ) => num * num ; console.log(square(4 )); // Outputs: 16 Arrow functions are ideal for one-line expressions . They remove the need for the function keyword, making the code concise. Arrow Functions: Shorter Functions

5. Classes provide a blueprint for creating objects. They group data (properties) and behaviors (methods) into one place . class Student { constructor(name, grade) { this.name = name; this.grade = grade ; } introduce () { console.log (`Hi, I’m ${this.name}, and I’m in grade ${ this.grade }.`); } } const student = new Student("Sara", 8); student.introduce (); // Outputs: Hi, I’m Sara, and I’m in grade 8. Classes: Organizing Objects

6. Modules allow you to break your code into smaller, reusable parts . file1.js: export const greet = () => console.log("Hello!"); file2.js : import { greet } from "./file1.js"; greet (); // Outputs: Hello! Modules: Sharing Code

7. Enhanced object literals make object creation simpler and more readable. Example : const name = "Ali"; const age = 15; const student = { name , // Instead of name: name age , // Instead of age: age introduce () { console.log (`Hi, I’m ${this.name}, and I’m ${ this.age } years old.`); }, }; student.introduce (); // Outputs: Hi, I’m Ali, and I’m 15 years old . Enhanced Object Literals: Cleaner Objects

8. Destructuring lets you extract values from objects or arrays into variables . Example: Object Destructuring : const student = { name : "Ali", age : 15 }; const { name , age } = student; console.log(name ); // Outputs: Ali console.log(age ); // Outputs: 15 Array Destructuring : const scores = [90, 80, 70]; const [math, science, english ] = scores; console.log(math ); // Outputs: 90 console.log(science ); // Outputs: 80 Destructuring : Unpacking Data

9. Default Parameters: Use default values when no argument is given. Example: const greet = (name = "Guest") => console.log(`Hello, ${ name }!`); greet (); // Outputs: Hello, Guest! Rest Operator: Combine multiple arguments into a single array . const sum = (...numbers) => numbers.reduce ((a, b) => a + b, 0); console.log(sum(1 , 2, 3)); // Outputs: 6 Spread Operator: Expand an array or object into individual items . const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4, 5]; console.log( newNumbers ); // Outputs: [1, 2, 3, 4, 5 ] Default, Rest, and Spread: Flexible Functions

10. ‘for…of’ makes looping through arrays or other collections easier. const scores = [90, 85, 88]; for ( const score of scores) { console.log(score ); } Iterators and For…Of: Loop Smarter

11. Generators are a special type of function in JavaScript that can be paused and resumed at any point. They allow you to control the flow of the code, making it possible to pause execution, return intermediate results, and later resume from where they left off. This is particularly useful when working with asynchronous code or handling large datasets. Generators: Pause and Resume

12. Generators are special functions that can pause (yield) and resume . Example: function * generateNumbers () { yield 1; yield 2; yield 3; } const numbers = generateNumbers (); console.log( numbers.next ().value); // Outputs: 1 console.log( numbers.next ().value); // Outputs: 2 Generators: Pause and Resume

13. A Promise is a way to handle asynchronous operations in JavaScript. It's like a placeholder for a value that will be available in the future. Promises are used to manage tasks that take some time to complete ( e.g., loading data from an API, reading a file, or making a network request). Promises: Handle Async Tasks

14. Promises simplify asynchronous tasks like fetching data . Example : const getData = () => new Promise((resolve, reject) => { setTimeout (() => resolve("Data loaded!"), 1000 ); }); getData ().then((data) => console.log(data)); // Outputs: Data loaded! Promises: Handle Async Tasks

15. Generators: Best for managing sequences of values, especially when you want to pause and resume execution (e.g., controlling state or iterating over a large dataset ). Promises : Best for managing asynchronous operations, especially when you need to wait for something to finish (like a network request) before continuing. When to Use Generators vs Promises?

16. Proxies in JavaScript are used to intercept and customize operations on objects, such as property access, assignment, and function invocation . Why Use Proxies ? Validation of data (e.g., prevent invalid cart operations). Logging actions (e.g., track API calls). Dynamic behavior customization without modifying the original object. Proxies

17. Good night Have a nice day