Here is a write up on my learning process. I'm going to highlight the syntax differences between ES5 and ES6, this can easily help you to get the difference at a glance without needing to worry much. so let's dive in.
| ES5(The old way) | ES6(The new way) |
|---|---|
| Declaring Variables Eg: var x = food | let x = food (used if you want to reassign the variable in future) const y = juice (used when variables cannot be reassigned) |
| Concatenation Eg: var favorite = silicon valley; var info = 'My favorite series is ' + favorite | Using template literals: var info = My favorite series is ${favorite} with `` covering it. |
| Extracting values from arrays Eg: var value = [50, 80]; var x = value[0]; var y = value[1]; console.log(x, y); prints: 50 80 | Using distructuring: const value= [50, 80]; const [x, y] = value; console.log(x, y); prints: 50 80 |
| Iterations Eg: const num= [1, 2, 3, 4, 5]; for (let i = 0; i < num.length; i++) { console.log(num[i]); } OR for (const index in num) { console.log(num[index]); } | const nums= [1, 2, 3, 4, 5]; for (const num of nums) { console.log(num); } |
| Arrow functions Eg: const vehicles = cars.filter(function(car) { return car.length > 9; }); | const vehicles = cars.filter(car => car.length > 9); |