SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
JAVASCRIPT DE
QUALIDADE
HOJE, AMANHÃ
E SEMPRE
GUILHERME CARREIRO
THIAGO OLIVEIRA
GUILHERME CARREIRO
Rubyist and code deisgner
THIAGO OLIVEIRA
Indian and Java programmer
<!>
Há muito tempo...
ECMAScript
JavaScript de qualidade: hoje, amanhã e sempre!
A linguagem (hoje)
prototype
a = ["Javascript", "Ruby", "Java", "Python", "Haskell"];	
!
a.first();	
// => TypeError: Object Javascript,Ruby,... has no method 'first'	
!
Array.prototype.first = function() {	
return this[0];	
}	
!
a.first();	
// => "Javascript"
var
function devcamp () {	
a = 2;	
novoEvento(a);	
};	
!
devcamp();	
!
console.log(a);	
// => 2
var
function devcamp () {	
var a = 2;	
novoEvento(a);	
};	
!
devcamp();	
!
console.log(a);	
// => a is not defined
var
var js = 'JS';	
function teste() {	
var ruby = 'Ruby';	
console.log(ruby);	
console.log(js);	
var js = 'Javascript';	
}	
!
teste();	
// => "Ruby"	
// => undefined
var js = 'JS';	
function teste() {	
var js, ruby = 'Ruby';	
console.log(ruby);	
console.log(js);	
js = 'Javascript';	
}	
!
teste();	
// => "Ruby"	
// => undefined
var
JavaScript de qualidade: hoje, amanhã e sempre!
var
function f () {	
var i = 0;	
for (; i < 10; i++) {	
var js = 'JavaScript'	
}	
console.log(js);	
}	
f();	
// => JavaScript
var
let
function f () {	
var i = 0;	
for (; i < 10; i++) {	
let js = 'JavaScript';	
}	
console.log(js);	
}	
f();	
// 'js' is not defined
function f () {	
var i = 0;	
for (; i < 10; i++) {	
var js = 'JavaScript'	
}	
console.log(js);	
}	
f();	
// => JavaScript
var
let
function f () {	
var i = 0;	
for (; i < 10; i++) {	
let js = 'JavaScript';	
}	
console.log(js);	
}	
f();	
// 'js' is not defined
const
!
const js = ‘JavaScript';	
!
js = ‘Ruby’;	
// const 'js' has already been 	
// declared.	
!
!
function f () {	
var i = 0;	
for (; i < 10; i++) {	
var js = 'JavaScript'	
}	
console.log(js);	
}	
f();	
// => JavaScript
JavaScript de qualidade: hoje, amanhã e sempre!
Bad smells (front-end)
Código Javascript misturado com código HTML
<!DOCTYPE html>	
<html>	
<head></head>	
<body>	
<input type="button" onclick="validateAndSubmit();" />	
<script type="text/javascript">	
doSomething();	
</script>	
</body>	
</html>
Código Javascript misturado com código HTML
<!-- index.html -->	
<!DOCTYPE html>	
<html>	
<head>	
</head>	
<body>	
<input type=“button" id=“btn” />	
	 <script src=“devcamp.js" type="text/javascript"></script>	
</body>	
</html>	
!
// devcamp.js	
var btn = document.getElementById('btn');	
btn.addEventListener('click', validateAndSubmit);	
!
(function(){	
doSomething();	
}());
CSS misturado com código Javascript
var botao = document.getElementById('botao');	
!
botao.onclick = function(e) {	
this.style.border = '2px solid red';	
}
CSS misturado com código Javascript
var botao = document.getElementById('botao');	
!
botao.onclick = function(e) {	
this.className = 'special-button';	
}
Lógica de negócio no Javascript
var botao = document.getElementById('botao'),	
saldo = <%= @saldo %>;	
!
botao.onclick = function(e) {	
if(saldo > 0) {	
comprar();	
} else {	
return false;	
}	
}
Código HTML no Javascript
var botao = document.getElementById('botao'),	
saldo = <%= @saldo %>;	
!
botao.onclick = function(e) {	
var status = document.getElementById('status'),	
html = '<div>',	
foto = getUserPicture();	
if(saldo > 0) {	
html += '<img src="' + foto + '" alt="Foto" />';	
html += '<h1>Saldo: ' + saldo + ' =)</h1>';	
}	
html += '</div>';	
status.innerHTML = html;	
}
!
<!-- index.html -->	
<script src="jquery.tmpl.js" type="text/javascript"></script>	
<!-- ... -->	
<div id="template">	
<div>	
<img src="${path}" alt="Foto" />	
<h1>Saldo: ${saldo} =)</h1>	
</div>	
</div>	
!
// devcamp.js	
var botao = $('#botao'),	
template = $('#template'),	
saldo = <%= @saldo %>;	
botao.click(function(e) {	
var html, status = $(‘#status'), foto = getUserPicture();	
if (saldo > 0) {	
html = $.tmpl(template.html(), {saldo: saldo, path: foto}).html();	
}	
status.html(html);	
});
HTML
CSS
JS (client side)
Ruby (server side)
Conteúdo
Estilo
Lógica de
apresentação
Lógica de	

negócio
Fonte: http://www.slideshare.net/fgalassi/refactoring-to-unobtrusive-javascript
Separar responsabilidades
JavaScript de qualidade: hoje, amanhã e sempre!
Herança moderna
function object(o) {	
function F() {}	
F.prototype = o;	
return new F();	
}	
!
var parent = {	
name: 'Papa'	
}	
!
var child = object(parent);	
!
console.log(child.name); // => Papa
Herança moderna
Herança clássica
!
function Parent() {	
this.name = 'Joey';	
}	
!
Parent.prototype.say = function() {	
console.log('I'm ' + this.name);	
}	
!
function Child() {	
this.name = 'Dee Dee';	
}	
!
function inherits(Child, Parent) {	
Child.prototype = Object.create(Parent.prototype);	
}	
!
inherits(Child, Parent);	
!
var a = new Child();	
!
a.say(); // => I'm Dee Dee	
!
var SuperHuman = Person.extend(function (name) {	
// ...	
}).methods({	
walk: function() {	
this.supr();	
this.fly();	
},	
fly: function() {	
// ...	
}	
});	
!
new SuperHuman(‘Zelda').walk();
Padrão klass
https://github.com/ded/klass
JavaScript de qualidade: hoje, amanhã e sempre!
Classes com o ECMAScript 6
class Man {	
constructor (name) {	
this.name = name;	
}	
say (message) {	
return this.name + ': ' + message;	
}	
}	
!
let john = new Man('John Doe’);	
!
john.say('Hi!');	
// => John Doe: Hi!
Classes
class Man {	
constructor (name) {	
this.name = name;	
}	
say (message) {	
return this.name + ': ' + message;	
}	
}	
!
class SuperMan extends Man {	
constructor () {	
super('Clark Kent');	
}	
fly () {	
return 'Flying...';	
}	
}	
!
let superMan = new SuperMan();	
superMan.say('Yeah!');	
// => Clark Kent: Yeah!	
superMan.fly();	
// => Flying...
JavaScript de qualidade: hoje, amanhã e sempre!
Arrow functions
var plus = function (a, b) {	
return a + b;	
};	
!
var plus = (a, b) => {	
return a + b;	
};	
!
var plus = (a, b) => a + b;	
!
var square = a => a * a;
Arrow functions
[1, 2, 3].map(function (i) {	
return i * i;	
});	
// => [1, 4, 9]	
!
[1, 2, 3].map(x => x * x);	
// => [1, 4, 9]
Modules
// plugins/math.js	
export function square (a) {	
return a * a;	
}	
!
!
// index.js	
import {square} from 'plugins/math.js';	
square(1);
Modules
// plugins/math.js	
export function square (a) {	
return a * a;	
}	
!
!
// index.js	
import 'plugins/math.js' as Math;	
Math.square(1);
Default arguments
var g = function (a, b) {	
a = a || 1;	
b = b || 1;	
return a + b;	
}	
!
var f = function (a = 1, b = 1) {	
return a + b;	
}	
!
f();	
// => 2	
!
f(2, 2);	
// => 4	
!
f(undefined, 7);	
// => 8
Rest parameters
var f = function (a = 1, ...b) {	
console.log(a, b);	
}	
!
f(1);	
// => 1 []	
!
f(1, 2);	
// => 1 [2]	
!
f(1, 2, 3);	
// => 1 [2, 3]
Interpolation
let a = 4;	
let b = 3;	
let code = `${a} + ${b} = ${a + b}`;	
// => 4 + 3 = 7	
!
let code = `	
def plus(a, b)	
a + b	
end	
`;
Quando?
JavaScript de qualidade: hoje, amanhã e sempre!
Como começar?
Node.js
Traceur
Como melhorar hoje?
Bower
Grunt.js
Jasmine
JavaScript de qualidade: hoje, amanhã e sempre!
PERGUNTAS?OBRIGADO! :)

Mais conteúdo relacionado

Mais procurados

噗浪最近有點胖
噗浪最近有點胖噗浪最近有點胖
噗浪最近有點胖Irvin Chen
 
Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)Marco Cedaro
 
Javascript Tutorial
Javascript TutorialJavascript Tutorial
Javascript TutorialKang-min Liu
 
Introduction à Marionette
Introduction à MarionetteIntroduction à Marionette
Introduction à MarionetteRaphaël Lemaire
 
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridasFrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridasLoiane Groner
 
JS for Rails developers
JS for Rails developersJS for Rails developers
JS for Rails developersTimur Vafin
 
Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8Wilson Su
 
Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressCrea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressSkillsAndMore
 
Adi Fatol - Ce e nou in PHP 5.3?
Adi Fatol - Ce e nou in PHP 5.3?Adi Fatol - Ce e nou in PHP 5.3?
Adi Fatol - Ce e nou in PHP 5.3?phpGeekMeet_ro
 
WordPress Customizer
WordPress CustomizerWordPress Customizer
WordPress Customizerslicejack
 
Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8Wilson Su
 

Mais procurados (20)

Silex al límite
Silex al límiteSilex al límite
Silex al límite
 
噗浪最近有點胖
噗浪最近有點胖噗浪最近有點胖
噗浪最近有點胖
 
es6.concurrency()
es6.concurrency()es6.concurrency()
es6.concurrency()
 
Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)
 
Javascript Tutorial
Javascript TutorialJavascript Tutorial
Javascript Tutorial
 
iBatis course (beta)
iBatis course (beta)iBatis course (beta)
iBatis course (beta)
 
PHP Profiling
PHP ProfilingPHP Profiling
PHP Profiling
 
Pague o aluguel
Pague o aluguelPague o aluguel
Pague o aluguel
 
Introduction à Marionette
Introduction à MarionetteIntroduction à Marionette
Introduction à Marionette
 
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridasFrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
 
Index2
Index2Index2
Index2
 
Web App Mvc
Web App MvcWeb App Mvc
Web App Mvc
 
Poetry in the age of hip-hop
Poetry in the age of hip-hopPoetry in the age of hip-hop
Poetry in the age of hip-hop
 
JS for Rails developers
JS for Rails developersJS for Rails developers
JS for Rails developers
 
Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8Practical JavaScript Programming - Session 3/8
Practical JavaScript Programming - Session 3/8
 
Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressCrea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPress
 
Adi Fatol - Ce e nou in PHP 5.3?
Adi Fatol - Ce e nou in PHP 5.3?Adi Fatol - Ce e nou in PHP 5.3?
Adi Fatol - Ce e nou in PHP 5.3?
 
WordPress Customizer
WordPress CustomizerWordPress Customizer
WordPress Customizer
 
Prototype UI
Prototype UIPrototype UI
Prototype UI
 
Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8Practical JavaScript Programming - Session 2/8
Practical JavaScript Programming - Session 2/8
 

Destaque

NoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiênciaNoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiênciaLuciano Ramalho
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScriptClaudio Gamboa
 
JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)Luciano Ramalho
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Aprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCDAprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCDAfonso Gomes
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done RightAndré Luís
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScriptThiago Poiani
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptRodrigo Branas
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 

Destaque (17)

NoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiênciaNoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiência
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScript
 
JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Java script
Java scriptJava script
Java script
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Aprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCDAprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCD
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 

JavaScript de qualidade: hoje, amanhã e sempre!

  • 1. JAVASCRIPT DE QUALIDADE HOJE, AMANHÃ E SEMPRE GUILHERME CARREIRO THIAGO OLIVEIRA
  • 2. GUILHERME CARREIRO Rubyist and code deisgner THIAGO OLIVEIRA Indian and Java programmer
  • 3. <!>
  • 8. prototype a = ["Javascript", "Ruby", "Java", "Python", "Haskell"]; ! a.first(); // => TypeError: Object Javascript,Ruby,... has no method 'first' ! Array.prototype.first = function() { return this[0]; } ! a.first(); // => "Javascript"
  • 9. var function devcamp () { a = 2; novoEvento(a); }; ! devcamp(); ! console.log(a); // => 2
  • 10. var function devcamp () { var a = 2; novoEvento(a); }; ! devcamp(); ! console.log(a); // => a is not defined
  • 11. var var js = 'JS'; function teste() { var ruby = 'Ruby'; console.log(ruby); console.log(js); var js = 'Javascript'; } ! teste(); // => "Ruby" // => undefined
  • 12. var js = 'JS'; function teste() { var js, ruby = 'Ruby'; console.log(ruby); console.log(js); js = 'Javascript'; } ! teste(); // => "Ruby" // => undefined var
  • 14. var function f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js); } f(); // => JavaScript
  • 15. var let function f () { var i = 0; for (; i < 10; i++) { let js = 'JavaScript'; } console.log(js); } f(); // 'js' is not defined function f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js); } f(); // => JavaScript
  • 16. var let function f () { var i = 0; for (; i < 10; i++) { let js = 'JavaScript'; } console.log(js); } f(); // 'js' is not defined const ! const js = ‘JavaScript'; ! js = ‘Ruby’; // const 'js' has already been // declared. ! ! function f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js); } f(); // => JavaScript
  • 19. Código Javascript misturado com código HTML <!DOCTYPE html> <html> <head></head> <body> <input type="button" onclick="validateAndSubmit();" /> <script type="text/javascript"> doSomething(); </script> </body> </html>
  • 20. Código Javascript misturado com código HTML <!-- index.html --> <!DOCTYPE html> <html> <head> </head> <body> <input type=“button" id=“btn” /> <script src=“devcamp.js" type="text/javascript"></script> </body> </html> ! // devcamp.js var btn = document.getElementById('btn'); btn.addEventListener('click', validateAndSubmit); ! (function(){ doSomething(); }());
  • 21. CSS misturado com código Javascript var botao = document.getElementById('botao'); ! botao.onclick = function(e) { this.style.border = '2px solid red'; }
  • 22. CSS misturado com código Javascript var botao = document.getElementById('botao'); ! botao.onclick = function(e) { this.className = 'special-button'; }
  • 23. Lógica de negócio no Javascript var botao = document.getElementById('botao'), saldo = <%= @saldo %>; ! botao.onclick = function(e) { if(saldo > 0) { comprar(); } else { return false; } }
  • 24. Código HTML no Javascript var botao = document.getElementById('botao'), saldo = <%= @saldo %>; ! botao.onclick = function(e) { var status = document.getElementById('status'), html = '<div>', foto = getUserPicture(); if(saldo > 0) { html += '<img src="' + foto + '" alt="Foto" />'; html += '<h1>Saldo: ' + saldo + ' =)</h1>'; } html += '</div>'; status.innerHTML = html; }
  • 25. ! <!-- index.html --> <script src="jquery.tmpl.js" type="text/javascript"></script> <!-- ... --> <div id="template"> <div> <img src="${path}" alt="Foto" /> <h1>Saldo: ${saldo} =)</h1> </div> </div> ! // devcamp.js var botao = $('#botao'), template = $('#template'), saldo = <%= @saldo %>; botao.click(function(e) { var html, status = $(‘#status'), foto = getUserPicture(); if (saldo > 0) { html = $.tmpl(template.html(), {saldo: saldo, path: foto}).html(); } status.html(html); });
  • 26. HTML CSS JS (client side) Ruby (server side) Conteúdo Estilo Lógica de apresentação Lógica de negócio Fonte: http://www.slideshare.net/fgalassi/refactoring-to-unobtrusive-javascript Separar responsabilidades
  • 29. function object(o) { function F() {} F.prototype = o; return new F(); } ! var parent = { name: 'Papa' } ! var child = object(parent); ! console.log(child.name); // => Papa Herança moderna
  • 31. ! function Parent() { this.name = 'Joey'; } ! Parent.prototype.say = function() { console.log('I'm ' + this.name); } ! function Child() { this.name = 'Dee Dee'; } ! function inherits(Child, Parent) { Child.prototype = Object.create(Parent.prototype); } ! inherits(Child, Parent); ! var a = new Child(); ! a.say(); // => I'm Dee Dee !
  • 32. var SuperHuman = Person.extend(function (name) { // ... }).methods({ walk: function() { this.supr(); this.fly(); }, fly: function() { // ... } }); ! new SuperHuman(‘Zelda').walk(); Padrão klass https://github.com/ded/klass
  • 34. Classes com o ECMAScript 6
  • 35. class Man { constructor (name) { this.name = name; } say (message) { return this.name + ': ' + message; } } ! let john = new Man('John Doe’); ! john.say('Hi!'); // => John Doe: Hi! Classes
  • 36. class Man { constructor (name) { this.name = name; } say (message) { return this.name + ': ' + message; } } ! class SuperMan extends Man { constructor () { super('Clark Kent'); } fly () { return 'Flying...'; } } ! let superMan = new SuperMan(); superMan.say('Yeah!'); // => Clark Kent: Yeah! superMan.fly(); // => Flying...
  • 38. Arrow functions var plus = function (a, b) { return a + b; }; ! var plus = (a, b) => { return a + b; }; ! var plus = (a, b) => a + b; ! var square = a => a * a;
  • 39. Arrow functions [1, 2, 3].map(function (i) { return i * i; }); // => [1, 4, 9] ! [1, 2, 3].map(x => x * x); // => [1, 4, 9]
  • 40. Modules // plugins/math.js export function square (a) { return a * a; } ! ! // index.js import {square} from 'plugins/math.js'; square(1);
  • 41. Modules // plugins/math.js export function square (a) { return a * a; } ! ! // index.js import 'plugins/math.js' as Math; Math.square(1);
  • 42. Default arguments var g = function (a, b) { a = a || 1; b = b || 1; return a + b; } ! var f = function (a = 1, b = 1) { return a + b; } ! f(); // => 2 ! f(2, 2); // => 4 ! f(undefined, 7); // => 8
  • 43. Rest parameters var f = function (a = 1, ...b) { console.log(a, b); } ! f(1); // => 1 [] ! f(1, 2); // => 1 [2] ! f(1, 2, 3); // => 1 [2, 3]
  • 44. Interpolation let a = 4; let b = 3; let code = `${a} + ${b} = ${a + b}`; // => 4 + 3 = 7 ! let code = ` def plus(a, b) a + b end `;
  • 51. Bower