JAVASCRIPT ALÉM DO

BÁSICO

R O G E R I O A N G E L I S K I
JAVASCRIPT NADA ALÉM

DO BÁSICO

R O G E R I O A N G E L I S K I
O QUE É BÁSICO?
E S C O P O

T H I S

P R O T O T Y P E

C Ó D I G O A S S I N C R O N O

E S 6 / E S 7 / . . . / E S ( N + 1 )

F U N Ç Õ E S I M P O R T A N T E S

M Ó D U L O S J S

D E S I G N P A T T E R N S
Escopo

gr. skopós,oû 'aquele que observa, vigia, guardião,

protetor', pelo

lat. scopus,i 'alvo, meta, mira, pontaria'

Escopo léxico/ escopo estático

Escopo definido independente da pilha de chamadas em tempo

de execução. A "leitura" do código fonte é suficiente para

esclarecer o alcance de uma variável.

Escopo de função e de bloco

O javascript até o ES6 só tinha escopo de função e

global. Ou uma variável era acessível em "todo" lugar,

ou só dentro daquela função.

Com a introdução do let e const  o escopo de bloco

passou a ter sentido no JS.

Exemplo var
Exemplo let
Exemplo const
 HOISTING
Em JavaScript, funções e variáveis são hoisted
(ou "levados ao topo"). Hoisting é um

comportamento do JavaScript de mover

declarações para o topo de um escopo (o escopo

global ou da função em que se encontra).

Exemplo do Hoisting
 CLOSURE
O escopo das closures segue o escopo onde ela

foi criada.

O escopo onde ela foi criada não está congelado,

pode ser modificado depois que ela foi criada.

Exemplo closure
P o r q u e o this m u d a ?  
O This

O this tem o valor de acordo com o contexto onde ele é

chamado. Quando dentro de uma função simples, ele é

atribuido para o Window. Quando é uma função de

this apontando para o próprio objeto.

objeto, ele tem o

Quando dentro de um listener, tem o this apontando

para o objeto.

Exemplo do this
Function.prototype.call()

fun.call(thisArg[, arg1[, arg2[, ...]]])

Function.prototype.apply()

fun.apply(thisArg, [argsArray])
Function.prototype.bind()

fun.bind(thisArg[, arg1[, arg2[, ...]]])

 PROTOTYPE
A MANEIRA COMO JAVASCRIPT FAZ

HERANÇA
Herança com o encadeamento de protótipos

Objetos em JavaScript são

"sacos" dinâmicos de

propriedades (a que se refere

as próprias propriedades) e

cada um tem um link para um

objeto prototype.
 CÓDIGO ASSINCRONO
ONDE A COISA COMEÇA A COMPLICAR
Fluxo assíncrono

Você pode disparar uma série

de tarefas sem precisar esperar

que cada uma se complete

para prosseguir. Quando elas

forem concluídas, você pode

registrar uma chamada de

retorno (callback) para lidar

com aquilo.
 CALLBACK HELL
QUANDO O VOCÊ ABRE O ARQUIVO E JÁ

ENCONTRA O PROBLEMA
Promise

Um objeto usado para

processamento assíncrono. Um

Promise (de "promessa")

representa um valor que pode

estar disponível agora, no

futuro ou nunca.
Resolve e Reject

new Promise(function(resolve, reject){

   console.log('A'); // será executado reject(); // irá rejeitar a promise

   console.log('B'); // será executado throw(new Error('Falhou')); // lança uma excessão

   console.log('C'); // não será executado

});
ES6

var x let x const

sintaxe curta de objetos

arrow functions

destructuring

rest parameters

default parameters

template literals (variáveis em strings)

classes

export/import
 ESN + 1

Async e Await

Array.prototype.includes

O bject.values / O bject.entries

String padding
FUNÇÕES IMPORTANTES
 M A P

F I L T E R

R E D U C E

S P L I C E

S L I C E

J O I N

S O M E
IIFE (Immediately Invoked Function Expression) 

 Podemos chamá-lo de função

imediata.Ela executa a função

imediatamente depois de criada.

Por que usar ?

Encapsulamento! (Antes do ES6)

 MÓDULOS
SEPARANDO NOSSO CÓDIGO DA MANEIRA

CERTA
 Como construir um módulo isolado (ES6>)

IIFE
Como construir um módulo isolado (ES6<)

Import

Export