Javascript não é só um linguagem de apoio a web, ela é muito mais do que isso, ela pode ser utilizada muito bem no lugar de tantas outras, desde que você saiba o verdadeiro potencial dela. Nesta apresentação eu coloco vários atributos introduzidos e possibilitados no ECMA5.

1. "De verdade"
"De verdade"

2. Luís Fernando VendrameLuís Fernando Vendrame
lvendrame@gmail.com
@lvendrame

3. Use porque é bom!Use porque é bom!

4. Tipado simmm
É que sou dinâmico bem!
var hw = "Hello World";
console.log(typeof(hw)); //"string"

5. Tudo é {objeto}
Exceto null e undefined

6. Um mix de paradigmas
Funcional()
Orientado a {objetos}

7. HookHook
function main(){
var a = 1;
hooked(); //undefined
function hooked(){
console.log(eita);
}
var eita = 15;
hooked(); //15
unhookfn(); //Uncaught TypeError: a is not a function
var unhookfn = function(){
console.log("shiiii");
};
}

8. HookHook
function main(){
var a = 10;
console.log(d);
for(var i = 0; i < a; i++){
var d = a + i;
}
console.log(d);
}

9. Entendendo escopos
Buscas nas cadeias
Quanto mais perto, melhor

10. ClojuresClojures
function main(){
var a = 1;
hooked();
function sub(){
var b = a + 2;
function deep(){
var a = b + 2;
}
for(var i = 0; i<10; i++){
var d += i;
}
console.log(d);
}
function hooked(){
console.log(eita);
}
var eita = 15;
}

11. Function como ClassFunction como Class
function MinhaClasse(arg){
var privado = typeof(arg);
this.publico = arg;
this.nome = "Qualquer nome";
this["prop 3"] = 4569;
this.novaFunc = function(){
console.log("novaFunc");
}
function funcaoPrivada(){
console.log("funcaoPrivada");
}
function outraFuncaoPrivada(){
console.log("funcaoPrivada");
}
this.exporFuncaoPrivada = funcaoPrivada;
}
var meuObjeto = new MinhaClasse("argumento");

12. Cadeia de Protótipo & thisCadeia de Protótipo & this
function Pessoa(nome){
this.nome = nome;
}
Pessoa.prototype = {
obterUltimoNome: function(){
return Array.prototype.slice.call(this.nome.split(" "), -1)[0];
}
};
function PessoaFisica(nome, cpf){
Pessoa.call(this, nome);
this.cpf = cpf;
}
PessoaFisica.prototype = new Pessoa();
PessoaFisica.prototype.constructor = PessoaFisica; //Corrigir o ponteiro do const
PessoaFisica.prototype.obterCpf = function(){
console.log(this);
return this.cpf;
};
Pessoa.__proto__ --> Object
PessoaFisica.__proto__ --> Pessoa
PessoaFisica.__proto__.__proto__ --> Object

13. Outra forma de criar objetos eOutra forma de criar objetos e
extenderextender
var Pessoa = {
nome: "Nome do Debil",
sayMyName: function(){
console.log(this.nome);
}
};
var PessoaFisica = Object.create(Pessoa);

14. PropriedadesPropriedades
pessoa.nome
pessoa["nome"]
var prop = "nome";
pessoa[prop]
myObj.1564 //erro
myObj["1564"]
myObj["pode ter espaço"]
delete pessoa.nome;
delete myObj["1564"];

15. Percorrendo propriedadesPercorrendo propriedades
for(var prop in obj){
console.log(obj[prop]);
}
for(var prop in obj){
if(obj.hasOwnProperty(prop)){
console.log(obj[prop]);
}
}

16. Empréstimo de funções eEmpréstimo de funções e
transferência de contextotransferência de contexto
fn.call(contexto, arg1, arg2, ..., argn);
fn.apply(contexto, args[]);
var a = "amigo";
Array.prototype.slice.call(a, 1, 5); //["m", "i", "g", "o"]
var args = [2, 5];
Array.prototype.slice.apply(a, args); //["i", "g", "o"]

17. argumentsarguments
function exemplinho(){
console.log(arguments);
}
exemplinho(1, "nossa", [4,5,6], {'nossa':123});
//0:1; 1:"nossa"; 2:(3) [4, 5, 6]; 3:{nossa: 123}
Array.prototype.slice.call(arguments);

18. CurryingCurrying
function add(x){
return function(y){
return x + y;
}
}
var add5 = add(5);
add5(10); // 15
add5(32); // 37

19. BindBind
var newFn = fn.bind(contexto, args[]);
function multi(x, y){
return x * y;
}
var double = multi.bind(null, 2);
double(2); // 4
double(10); // 20

20. Bind foi inspirado em um CurryingBind foi inspirado em um Currying
Function.prototype.curry = function () {
var _self = this,
slice = Array.prototype.slice,
args = slice.call(arguments, 1);
return function () {
return _self.apply(null, args.concat(slice.call(arguments)));
};
};

21. CastingCasting
'' + 10 === '10'; // true
String
+ '10' === 10; // true
Number
!!'foo'; // true
!!''; // false
!!'0'; // true
!!'1'; // true
!!'-1' // true
!!{}; // true
!!true; // true
Boolean

22. ComparaçõesComparações
"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" trn" == 0 // true

23. Comparações estritasComparações estritas
"" === "0" // false
0 === "" // false
0 === "0" // false
false === "false" // false
false === "0" // false
false === undefined // false
false === null // false
null === undefined // false
" trn" === 0 // false

24. IIFEIIFE
(function(){})();
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
console.log(e);
}, 1000);
})(i);
}
immediately-invoked function expression

25. IIFEIIFE(function() {
'use strict';
angular.module('base')
.controller('demandasController', demandasController)
demandasController.$inject = ['demandasService'];
function demandasController(demandasService) {
var vm = this;
vm.demandas = [];
activate();
////////////////
function activate() {
atualizarDemandas();
}
function atualizarDemandas() {
demandasService.obterListaDemandas(vm.filtros)
.then(function(response) {
vm.demandas = response.data;
});
}
}
})();

26. ArrayArray
var ar1 = [1, 2, 3, 4]
var ar2 = new Array(9, 8, 7, 6);
ar1.length // 4
ar1.push(5) // [1, 2, 3, 4, 5]
var a = ar1.pop() // a --> 5, ar1 --> [1, 2, 3, 4]
ar1.unshift(6, 7) // [6, 7, 1, 2, 3, 4]
var b = ar1.shift() // b --> 6, ar1 --> [7, 1, 2, 3,
var ar3 = ar1.concat(ar2); // ar3 --> [7, 1, 2, 3, 4, 9, 8, 7
var ar4 = ar3.slice(2, 5); // ar4 --> [2, 3, 4]
var ar5 = ar3.slice(-2); // ar4 --> [7, 6]

27. forEachforEach
[1,2,3,4,5].forEach(function(item, index, array){
console.log(index + ": " + item);
});

28. mapmap
var ar1 = [1,2,3,4,5].map(function(item, index, array){
return item + 10;
});
//ar1 --> [11, 12, 13, 14, 15]
function double(x){
return x * 2;
}
var ar2 = [1,2,3,4,5].map(double)
//ar2 --> [2, 4, 6, 8, 10]

29. reducereduce
var desconto = [1,2,3,4,5].reduce(function(acumulador, item, index, array){
return acumulador + item * 0.9;
}, 0);
//desconto --> 13.5
function soma(acumulador, valor){
acumulador = acumulador || 0;
return acumulador + valor;
}
var total = [1,2,3,4,5].reduce(soma);
//total --> 15

30. filterfilter
var palavras = ["espagueti", "tomate", "luis", "julgamento", "mané", "presente"]
var ar1 = palavras.filter(function(item, index, array){
return item.length < 5;
});
//ar1 --> ["luis", "mané"]
function par(numero){
return (numero % 2) === 0;
}
var ar2 = [1,2,3,4,5,6,7,8,9].filter(par);
//ar2 --> [2, 4, 6, 8]

31. pra fixarpra fixar
Funcional > OOPFuncional > OOP
Composição > HerançaComposição > Herança

32. RegexRegex
var re = /ab+c/;
var re = new RegExp('ab+c');
"abbbbbcafafcABC".replace(/ab+c/gi, "");

33. transformando query string emtransformando query string em
objectobject
function getQueryString(window) {
if (window.location.search) {
return window.location.search.substr(1).split("&")
.reduce(function (previousValue, currentValue, index, array) {
var aux = currentValue.split('=');
previousValue[aux[0]] = decodeURIComponent(aux[1].replace(/+/g, "
return previousValue;
}, {});
} else {
return {};
}
}

34. 'use strict''use strict';;
this em function sem new
window | undefined
a = 5; //sem var
window.a | ReferenceError: a is not defined
with (what?) não é permitido
Muitas palavras necessárias são consideradas como
reservadas
Não permite declaração de propriedades duplicadas
É criado um contexto unico de execução para evals

35. callback hellcallback hell
E agora?

36. PromisesPromises
function obterRecursos(){
return Promise(function(resolve, reject){
myAsyncFn("arg1", "arg2", function(data){
if(data.error){
reject(data.error);
}
else{
resolve(data);
}
});
});
}
obterRecursos()
.then(function(data){
document.getElememtById('txtData').value = data.text;
})
.catch(function(error){
toastr('Erro na requisição. Detalhes: ' + error, 'MyApp');
});

37. PromisesPromises
function main(){
axios.get('https://www.myUrl.com/api/resource?name=Nome+do+Individuo')
.then(function(response){
return response.data.resource.anotherId;
})
.then(function(id){
return axio('https://www.myUrl.com/api/another/' + id);
})
.then(function(response){
return response.data;
})
.catch(function(error){
toastr('Erro na requisição. Detalhes: ' + error.Message, 'MyAp
});
}

38. Aninhamento de promisesAninhamento de promises
fn1()
.then(function(umaCoisa){
fn2()
.then(function(outraCoisa){
final(umaCoisa, outraCoisa);
});
});
Solução
Promise.all([fn1(), fn2()])
.then(function(values){
final(values[0], values[1]);
//or
final.apply(null, values);
console.log(values); // [0:result_fn1, 1:result_fn
});

39. Encadeamento de promises (promise-hell)Encadeamento de promises (promise-hell)
addUser()
.then(function(user){
addAddress(user)
.then(function(address){
addRoom(address)
.then(function(room){
addRoom(address)
.then(function(room2){
addChair(room2)
.then(function(chair)
end();
});
});
});
final(umaCoisa, outraCoisa);
});
});
Solução
addUser()
.then(function(user){
return addAddress(user);
})
.then(function(address){
return Promise.
all([addRoom(address), addRoom(address)]);
})
.then(function(rooms){
return addChair(rooms[1]);
})
.then(function(chair){
end();
})
.catch(function(err){
showError(err);
});

40. ECMAScript 2015ECMAScript 2015
let, const, class
modules (export, import)
Destructuring arrays e objects
Spread operator
promises (nativo)
Arrow functions
Generators + coroutines
Default parameter values
String templates
Property e método shorthand

41. ReferênciasReferências
https://developer.mozilla.org/bm/docs/Web/JavaScript
http://bonsaiden.github.io/JavaScript-Garden/
https://tableless.com.br/javascript-strict-mode/

42. GO BACK