IW II

Aprenda Javascript
Prof. Ricardo Seco
 JAVASCRIPT

Seção 6 - Javasacript Intermediário/Avançado:

• Funções Callback
• Lidando com erros (Error Handling)
• Operador If Ternário
• Escopo
• Namespaces
• JSON
 JAVASCRIPT
Funções callback

Funções callback são funções passadas como argumento de outra função. Normalmente elas são executadas ao final da função principal.
Este recurso é muito útil em Javascript, que é uma linguagem assíncrona. Isto significa que nesta linguagem, vários comandos podem ser executados ao mesmo
tempo, sem que um precise esperar que o funcionamento do comando anterior termine.
Vejamos o exemplo a seguir:
 JAVASCRIPT
Funções callback

Na função pegar_usuario(), consultamos as informações de um usuário. Depois utilizamos esta informação na função saudar_usuario() para soltar uma mensagem.
Até aí, sem problemas. Mas o que aconteceria se esse usuário fosse consultado em um serviço externo e esta informação demorasse um pouco a chegar? Vamos fazer
esta simulação usando um setTimeout de 1 segundo:
 JAVASCRIPT
Funções callback

Desta vez, vemos um erro no console informando que a propriedade nome não pode ser lida de um objeto indefinido. Isto ocorre porque a função saudar_usuário é
executada antes que a função pegar_usuario termine, portanto as informações do usuário ainda não estão disponíveis.
Este tipo de problema acontece frequentemente quando trabalhamos com AJAX, já que as informações solicitadas por serviços externos podem demorar alguns
instantes para chegar. Neste caso, resolvemos este problema com o uso de uma função callback:
 JAVASCRIPT
Funções callback

Nós nem precisaríamos ter criado a função saudar_usuario previamente, poderíamos ter feito isso no momento de invocar a função pegar_usuario

Note como boa parte dos comandos jQuery se baseia em funções callback. Um exemplo:

O próprio método setTimeout funciona com uma função callback, que é o primeiro argumento:
 JAVASCRIPT
Lidando com erros (Erros handling)

Quando estamos desenvolvendo uma aplicação web ou um software, temos que prever o surgimento de erros e lidar com eles para evitar que o funcionamento do
nosso programa seja prejudicado.
Vamos voltar ao exemplo da última aula, em que tivemos um erro quando não utlizamos a função callback. Ao final vamos incluir também um novo comando.

Note que o erro faz com que o último comando que escrevemos ao final nem seja executado. Na verdade nenhum código depois do erro é executado, o que pode
simplesmente quebrar o funcionamento da nossa página. Para resolver isto, vamos lidar com os erros usando os comandos try e catch.
 JAVASCRIPT
Try/Catch

O interpretador de Javascript tentará executar o código que está dentro do try. Caso não consiga, em vez de gerar um erro, ele executará o código que está dentro do catch.

Com o try/catch neste exemplo, além de criarmos uma alternativa para quando as informações do usuário não estejam disponíveis, o funcionamento do restante do
código não foi afetado. Caso quiséssemos ter a mensagem de erro, poderíamos passar um argumento na execução do catch. Este argumento pode ter qualquer
nome, mas normalmente os programadores utilizam o nome "err".
 JAVASCRIPT
Finally

Após o try/catch, podemos também um finally, que será executado de qualquer maneira, havendo erro ou não.
 JAVASCRIPT
Throw

O comando throw serve para gerar nossos próprios erros dentro da estrutura try/catch. Vamos ver um exemplo em que, a nível de código Javascript, não há nenhum
erro, mas seria interessante criarmos um erro:
 JAVASCRIPT
Throw

Neste caso, nós já tínhamos as informações disponíveis, portanto não houve nenhum erro. Mas o nome estava vazio, o que gerou uma mensagem sem nome. Aqui é
um exemplo onde poderíamos ter criado nosso próprio erro para um nome vazio:

Caso um throw seja executado dentro do try, o interpretador vai direto para o catch.
 JAVASCRIPT
Operador If Ternário

O if ternário foi introduzido na linguagem Javascript na atualização ES6 (também chamada de ES2015). É uma forma mais curta de usar a estrutura condicional. A
sintaxe é:
 JAVASCRIPT
Operador If Ternário

É possível reproduzir o else if com o operador ternário, mas recomenda-se cuidado pois o código pode ser um pouco mais difícil de compreender.
 JAVASCRIPT
Escopo

O escopo é o que define a acessibilidade a uma variável. Existem dois tipos de escopo em Javascript: Global e Local.
Escopo Local
As funções em Javascript têm o seu próprio escopo. As variáveis criadas dentro de uma função são de escopo local e só podem ser acessadas dentro daquela função.
 JAVASCRIPT
Escopo Global

Varáveis criadas fora de funções são do escopo global e são acessíveis em qualquer lugar do código, até mesmo dentro de funções.

Variáveis criadas sem a keyword "var" também são do escopo global, mesmo quando criadas dentro de uma função. Isto é algo que deve ser evitado, apenas crie
variáveis globais dentro de uma função quando isto for necessário e proposital.

Variáveis criadas no escopo global podem também ser acessadas pelo objeto window:
 JAVASCRIPT
Escopo Local em blocos

Até antes do lançamento da versão ES6 (ECMAScript 2015), apenas funções tinham escopo local. Outras estruturas que ficam em blocos (entre chaves), como loops e
condicionais, não tinham escopo, portanto qualquer variável criada neste tipo de estrutura era global.
Na versão ES6 foi introduzida a keyword let, que gera uma variável local dentro de qualquer estrutura de bloco.

As variáveis devem ser sempre de escopo local, a não ser que se pretenda, propositalmente, usá-las no escopo global. Isto evita conflitos de nomes de variáveis, o que
pode gerar muitas vezes erros difíceis de serem detectados. Portanto, é recomendável o uso da keyword let dentro das estruturas de bloco.
 JAVASCRIPT
Escopo Local em blocos

A partir de agora, sempre crie loops for com a keyword let.

Neste caso, a variável a só é visível dentro deste loop, e caso seja criada outra variável de mesmo nome, não haverá conflito. No exemplo acima, a passagem no loop
não alterou a variável global a.
 JAVASCRIPT
A keyword const

A versão ES6 também introduziu a keyword const, que serve para criar constantes. Elas funcionam como let, com uma diferença, as constantes não podem ter seu valor
alterado:

No exemplo acima, apesar de não haver problema em usar uma variável normal para guardar o valor de PI (π), por uma questão de organização e clareza do código, é
recomendável usar constantes quando se cria uma variável que supostamente não deve ter seu valor alterado, como é o caso.
 JAVASCRIPT
Namespaces

Na última aula falamos sobre o escopo de variáveis e vimos que as variáveis criadas no escopo global, podem ser acessadas de qualquer lugar do código, até mesmo
dentro de funções e estruturas de bloco.
À medida em que a nossa aplicação web cresce e fica mais complexa, principalmente quando se usa bibliotecas externas, torna-se mais provável que em algum
momento haja duas variáveis com o mesmo nome, o que pode causar muitos problemas.
Para resolver isto, usamos namespaces para separar partes do código e assim simular o escopo local oara as variáveis. A linguagem Javascript, na verdade não possui
a funcionalidade de Namespaces, como outras linguagens de programação, mas temos algumas maneiras de simular esse comportamento e chegar ao mesmo
resultado. A mais comum delas é através de objetos.
 JAVASCRIPT
Namespaces com objetos

Note que ao invés de criarmos uma função chamada ver_nome e uma variável chamada nome no escopo global, nós as criamos como propriedades do objeto
meuWebApp. Isto significa que se houver variáveis ou funções com estes nomes em outras partes do código, não haverá conflito.
Poderíamos também ter criado a variável e a função no momento da criação do objeto.
 JAVASCRIPT
Namespace com funções
Outra maneira de simular um namespace em Javascript é com o uso de funções:

Esta técnica utiliza module pattern. Neste tipo de estrutura, passamos um objeto pelo comando return, e podemos escolher propriedades específicas deste objeto ao
invocar a função principal.
Uma das vantagens de se utilizar esta técnica é que mantemos as variáveis diretamente inacessíveis. Neste exemplo não é possível apagar ou mudar o nome a não ser
por meio dos nossos próprios métodos, mudar_nome e apagar_nome, o que dá mais segurança ao código.
 JAVASCRIPT
JSON

JSON é um formato de armazenamento de dados extremamente popular. Praticamente qualquer serviço web trabalha com este formato e todas as linguagens de
programação mais populares possuem a capacidade de importar e exportar dados em JSON.
O formato JSON é especialmente fácil de entender para quem programa em javascript, já que ele deriva desta linguagem. JSON significa "Javascript Object Notation" e
como o nome já diz, usa a notação de objeto do Javascript.
Vamos imaginar o seguinte objeto:

O formato JSON faz a representação de objetos em string. Cada linguagem de programação possui suas próprias funções para importar e exportar dados em formato
JSON. Em javascript para converter dados em JSON, usamos a função JSON.stringify(), e para converter um JSON em objeto javascript, usamos a função
JSON.parse().
 JAVASCRIPT
JSON

Digamos que tivéssemos recebido este JSON de um serviço externo. Podemos convertê-lo em um objeto javascript e usá-lo em nosso código:

Tanto objetos quanto arrays podem ser convertidos em JSON:

Usando a função typeof, vemos que o formato de um JSON é string, o que o deixa muito leve e fácil de trabalhar.
Na próxima seção do curso trabalharemos com pedidos AJAX e usaremos muito o formato JSON!
 JAVASCRIPT

Folha de
o
Exercícios n 06