SlideShare uma empresa Scribd logo
Desenvolvimento Frontend:
JavaScript
Cesar William Alvarenga
About me
@cesarwbr
http://www.cesarwilliam.com
http://www.ecma-international.org/ecma-262/5.1/
Agenda
● Scope
● Nested Scope
● Hoisting
● this
● Closure
Somente funções define
escopo em JavaScript
Somente funções define
escopo em JavaScript
c
c c
Chrome DevTools
discover-devtools.codeschool.com
IIFE
IIFE
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
IIFE
JQuery Code! :)
Escopo em blocos no ES6
let
let (ES6+)
let (ES6+)
Hoisting
Hoisting
Hoisting
Hoisting
Hoisting: Primeiro funções
Hoisting: let (ES6+) “temporary dead zone”
Exercício: Dia 3
this
Toda função, quando está sendo executada, tem uma referencia para o
contexto em que foi executada, chamada this.
this
this: implicit & default binding
this: implicit & default binding
bar1
bar2
bar3
this: implicit & default binding
this: explicit binding
this: hard binding
this: hard binding
MDN Polyfill
this: new
this rules priority
1. called with ‘new’?
2. called with ‘call’ or ‘apply’?
3. called via an object?
4. DEFAULT: global object (except strict mode)
closure
Closure é quando uma função "lembra" do seu escopo léxico mesmo quando a
função é executada fora do seu escopo léxico.
closure
closure
closure
closure
closure
closure
closure
closure
closure
closure
modules
Padrões: clássico e moderno
Padrão clássico
Padrão clássico
Padrão moderno
ES6+
foo.js

Mais conteúdo relacionado

Mais procurados

Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
Giovanni Bassi
 
Isomorfismo pra quê?
Isomorfismo pra quê?Isomorfismo pra quê?
Isomorfismo pra quê?
Fernanda Bernardo
 
Uma visão rápida sobre Nodejs
Uma visão rápida sobre NodejsUma visão rápida sobre Nodejs
Uma visão rápida sobre Nodejs
Rafael Soares
 
Light Talk: Introdução sobre Node.js
Light Talk: Introdução sobre Node.jsLight Talk: Introdução sobre Node.js
Light Talk: Introdução sobre Node.js
Caio Ribeiro Pereira
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
Rodrigo Branas
 
TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...
tdc-globalcode
 
Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
Caio Ribeiro Pereira
 
Nodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis terNodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis ter
Emerson Macedo
 
Introdução ao Python & Web Services
Introdução ao Python & Web ServicesIntrodução ao Python & Web Services
Introdução ao Python & Web Services
Dorneles Treméa
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Rodrigo Branas
 
Pragmatismo e Simplicidade
Pragmatismo e SimplicidadePragmatismo e Simplicidade
Pragmatismo e Simplicidade
roberta arcoverde
 
Cron Jobs - Linux
Cron Jobs - LinuxCron Jobs - Linux
Cron Jobs - Linux
Nicolas Pereira
 
Spring boot
Spring bootSpring boot
Spring boot
John Godoi
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
Rodrigo Branas
 

Mais procurados (14)

Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
 
Isomorfismo pra quê?
Isomorfismo pra quê?Isomorfismo pra quê?
Isomorfismo pra quê?
 
Uma visão rápida sobre Nodejs
Uma visão rápida sobre NodejsUma visão rápida sobre Nodejs
Uma visão rápida sobre Nodejs
 
Light Talk: Introdução sobre Node.js
Light Talk: Introdução sobre Node.jsLight Talk: Introdução sobre Node.js
Light Talk: Introdução sobre Node.js
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
 
TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...
TDC2017 | São Paulo - Trilha Blockchain How we figured out we had a SRE team ...
 
Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
 
Nodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis terNodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis ter
 
Introdução ao Python & Web Services
Introdução ao Python & Web ServicesIntrodução ao Python & Web Services
Introdução ao Python & Web Services
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
 
Pragmatismo e Simplicidade
Pragmatismo e SimplicidadePragmatismo e Simplicidade
Pragmatismo e Simplicidade
 
Cron Jobs - Linux
Cron Jobs - LinuxCron Jobs - Linux
Cron Jobs - Linux
 
Spring boot
Spring bootSpring boot
Spring boot
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
 

Destaque

Dolce-Ivey-Spencer-Leadership-Centre
Dolce-Ivey-Spencer-Leadership-CentreDolce-Ivey-Spencer-Leadership-Centre
Dolce-Ivey-Spencer-Leadership-Centre
Laura Connolly
 
Cygnet power point.ppt january
Cygnet power point.ppt januaryCygnet power point.ppt january
Cygnet power point.ppt january
Charles Eddolls / Cygnet Consultancy Ltd
 
2202 GL Trials Summary
2202 GL Trials Summary2202 GL Trials Summary
2202 GL Trials Summary
Roger Scott
 
cityguilds level2 pro
cityguilds level2 procityguilds level2 pro
cityguilds level2 proChris Withers
 
Experiencias exitosas Tarma y la gratitud al General Manuel Odría.
Experiencias exitosas Tarma y la gratitud al General Manuel Odría.Experiencias exitosas Tarma y la gratitud al General Manuel Odría.
Experiencias exitosas Tarma y la gratitud al General Manuel Odría.
Mag. Econ. Jean Paul Moreno Palomino
 
Elementos teoricos de la responsabilidad disiplinaria
Elementos teoricos de la responsabilidad disiplinariaElementos teoricos de la responsabilidad disiplinaria
Elementos teoricos de la responsabilidad disiplinaria
Gene Salas
 
Mapa conceptual capitalizacion
Mapa conceptual capitalizacionMapa conceptual capitalizacion
Mapa conceptual capitalizacion
politecnico santiago mariño
 
Soil Maps and Soil Information of Thailand by Aniruth Potichan
Soil Maps and Soil Information of Thailand by Aniruth PotichanSoil Maps and Soil Information of Thailand by Aniruth Potichan
Soil Maps and Soil Information of Thailand by Aniruth Potichan
FAO
 
Querying Database Review Question
Querying Database Review QuestionQuerying Database Review Question
Querying Database Review Question
Darin Grimm
 

Destaque (9)

Dolce-Ivey-Spencer-Leadership-Centre
Dolce-Ivey-Spencer-Leadership-CentreDolce-Ivey-Spencer-Leadership-Centre
Dolce-Ivey-Spencer-Leadership-Centre
 
Cygnet power point.ppt january
Cygnet power point.ppt januaryCygnet power point.ppt january
Cygnet power point.ppt january
 
2202 GL Trials Summary
2202 GL Trials Summary2202 GL Trials Summary
2202 GL Trials Summary
 
cityguilds level2 pro
cityguilds level2 procityguilds level2 pro
cityguilds level2 pro
 
Experiencias exitosas Tarma y la gratitud al General Manuel Odría.
Experiencias exitosas Tarma y la gratitud al General Manuel Odría.Experiencias exitosas Tarma y la gratitud al General Manuel Odría.
Experiencias exitosas Tarma y la gratitud al General Manuel Odría.
 
Elementos teoricos de la responsabilidad disiplinaria
Elementos teoricos de la responsabilidad disiplinariaElementos teoricos de la responsabilidad disiplinaria
Elementos teoricos de la responsabilidad disiplinaria
 
Mapa conceptual capitalizacion
Mapa conceptual capitalizacionMapa conceptual capitalizacion
Mapa conceptual capitalizacion
 
Soil Maps and Soil Information of Thailand by Aniruth Potichan
Soil Maps and Soil Information of Thailand by Aniruth PotichanSoil Maps and Soil Information of Thailand by Aniruth Potichan
Soil Maps and Soil Information of Thailand by Aniruth Potichan
 
Querying Database Review Question
Querying Database Review QuestionQuerying Database Review Question
Querying Database Review Question
 

Semelhante a Desenvolvimento Frontend- JavaScript - Share

Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - Functions
Wesley Lemos
 
(A11) LabMM3 - JavaScript - Subalgoritmos e scope
(A11) LabMM3 - JavaScript - Subalgoritmos e scope(A11) LabMM3 - JavaScript - Subalgoritmos e scope
(A11) LabMM3 - JavaScript - Subalgoritmos e scope
Carlos Santos
 
Debugging tips and tricks
Debugging tips and tricksDebugging tips and tricks
Debugging tips and tricks
Tales Andrade
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
Laís Lima
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)
Carlos Santos
 
Gerenciamento de Memória
Gerenciamento de MemóriaGerenciamento de Memória
Gerenciamento de Memória
CDS
 
C Sharp - Gerenciamento de Memória
C Sharp - Gerenciamento de MemóriaC Sharp - Gerenciamento de Memória
C Sharp - Gerenciamento de Memória
CDS
 
Curso de Node JS Básico
Curso de Node JS BásicoCurso de Node JS Básico
Curso de Node JS Básico
Victor Hazin da Rocha
 
Construindo aplicações CLI com Symfony Console
Construindo aplicações CLI com Symfony ConsoleConstruindo aplicações CLI com Symfony Console
Construindo aplicações CLI com Symfony Console
Bruno Ricardo Siqueira
 
Java Server Faces
Java Server FacesJava Server Faces
Java Server Faces
João Longo
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
Victor Hugo Germano
 
Inovações Na Plataforma Java
Inovações Na Plataforma JavaInovações Na Plataforma Java
Inovações Na Plataforma Java
Filipe Portes
 
Atech talks - Docker
Atech talks - DockerAtech talks - Docker
Atech talks - Docker
Atech S.A. | Embraer Group
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
Dr. Spock
 

Semelhante a Desenvolvimento Frontend- JavaScript - Share (14)

Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - Functions
 
(A11) LabMM3 - JavaScript - Subalgoritmos e scope
(A11) LabMM3 - JavaScript - Subalgoritmos e scope(A11) LabMM3 - JavaScript - Subalgoritmos e scope
(A11) LabMM3 - JavaScript - Subalgoritmos e scope
 
Debugging tips and tricks
Debugging tips and tricksDebugging tips and tricks
Debugging tips and tricks
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)
 
Gerenciamento de Memória
Gerenciamento de MemóriaGerenciamento de Memória
Gerenciamento de Memória
 
C Sharp - Gerenciamento de Memória
C Sharp - Gerenciamento de MemóriaC Sharp - Gerenciamento de Memória
C Sharp - Gerenciamento de Memória
 
Curso de Node JS Básico
Curso de Node JS BásicoCurso de Node JS Básico
Curso de Node JS Básico
 
Construindo aplicações CLI com Symfony Console
Construindo aplicações CLI com Symfony ConsoleConstruindo aplicações CLI com Symfony Console
Construindo aplicações CLI com Symfony Console
 
Java Server Faces
Java Server FacesJava Server Faces
Java Server Faces
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
 
Inovações Na Plataforma Java
Inovações Na Plataforma JavaInovações Na Plataforma Java
Inovações Na Plataforma Java
 
Atech talks - Docker
Atech talks - DockerAtech talks - Docker
Atech talks - Docker
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 

Desenvolvimento Frontend- JavaScript - Share