Ignite es6
0 likes678 views
The document discusses the future of JavaScript with ES6, emphasizing the use of 'let' and 'const' instead of 'var', and introduces new features such as arrow functions, default parameters, and rest parameters. It explains destructuring of objects and arrays, enhanced object literals, and template strings for easier string manipulation. Additionally, it covers using the Fetch API for making asynchronous requests in a more concise manner.
![Remember anonymous functions?
[1,2,3,4].map(function(n){ return n * n; });](https://image.slidesharecdn.com/ignite-es6-160316170657/85/Ignite-es6-7-320.jpg)
![Hello arrow functions!
[1,2,3,4].map((n) => n * n);](https://image.slidesharecdn.com/ignite-es6-160316170657/85/Ignite-es6-8-320.jpg)
![Getting the rest
function addPlayersToTeam (team /*, players*/) {
var players = arguments.slice(1);
for (var i = 0; args.length; i++) {
team.addPlayer(args[i]);
}
}](https://image.slidesharecdn.com/ignite-es6-160316170657/85/Ignite-es6-11-320.jpg)
![Destructing arrays
var foo = [“one”, “two”, “three" ]
var one = foo[0];
var [one, two] = foo;](https://image.slidesharecdn.com/ignite-es6-160316170657/85/Ignite-es6-14-320.jpg)
![Easier Recursive
function sum ([x, …rest]) {
if (x) return x + sum(rest);
else return 0;
}
console.log(sum([1,2,3]));](https://image.slidesharecdn.com/ignite-es6-160316170657/85/Ignite-es6-15-320.jpg)
![Enhanced Object Literals
var obj = {
toString () { return super.toString(); },
[‘prop_’+key()]: key()
}](https://image.slidesharecdn.com/ignite-es6-160316170657/85/Ignite-es6-21-320.jpg)
Ignite es6
- 2. The Future of JavaScript with ES6
- 4. Banning the var statement function loop (array) { for (var index = 0; i < array.length; index++) { /* do stuff */ } console.log(index); // => STILL AVAILABLE??? }
- 5. Use let instead function loop (array) { for (let index = 0; i < array.length; index++) { /* do stuff */ } console.log(index); // Not anymore!!! }
- 6. There’s also const const x = 1; x = 2; // not possible! const obj = { x: 1 }; obj.x = 2; // possible!
- 7. Remember anonymous functions? [1,2,3,4].map(function(n){ return n * n; });
- 8. Hello arrow functions! [1,2,3,4].map((n) => n * n);
- 9. Also default parameters are in town! function (x, y = 2) { return x + y);
- 10. Consider this
- 11. Getting the rest function addPlayersToTeam (team /*, players*/) { var players = arguments.slice(1); for (var i = 0; args.length; i++) { team.addPlayer(args[i]); } }
- 12. Thank you rest parameter function addPlayersToTeam (team, …rest) { rest.forEach((player) => team.addPlayer(player)); }
- 13. Destructing your object var {a, c} = {a: 1, b: 2, c: 3} console.log(a); // logs 1
- 14. Destructing arrays var foo = [“one”, “two”, “three" ] var one = foo[0]; var [one, two] = foo;
- 15. Easier Recursive function sum ([x, …rest]) { if (x) return x + sum(rest); else return 0; } console.log(sum([1,2,3]));
- 16. Fetch me some data! fetch(‘/some/url’) .then(function(response){ return response.json(); }) .then(function(json) { // something with json }).catch(function(err) { // error :( });
- 17. Fetch me some data! fetch(‘/some/url’) .then( (response) => response.json() ) .then( (json) => doStuff(json) ) .catch( (error) => handleError(error) );
- 18. Template my string var a = 5; var b = 10; console.log(`Fifteen is ${a+b} and not ${2*a + b}`);
- 19. Template my string var user = { … }; var html = ` <div> <span>${user.username}</span> </div> `
- 20. Enhanced Object Literals var obj = { __proto__: protoObj, handler }
- 21. Enhanced Object Literals var obj = { toString () { return super.toString(); }, [‘prop_’+key()]: key() }
- 22. How to use ES6 NOW