Fundamentos de JavaScript

Prévia do material em texto

Professor:Rodrigo Fontes Cruz
Disciplina: Programação para Disp. Móveis
FUNDAMENTOS JAVASCRIPT
OBJETIVO DA AULA
• Apresentar os principais recursos da linguagem JavaScript utilizados 
no desenvolvimento com React Native, proporcionando uma base 
sólida para compreensão dos conceitos da biblioteca React e do 
framework React Native.
• Tipos de Dados
• Declaração de Variáveis
• = == ===
• Function
• Arrow Function;
• Parâmetros Default em Funções;
• Operadores Destructuring, Rest e 
Spread Operators;
• Template strings;
CONTEÚDO
• ES Modules;
• Promises:
• then/catch;
• async/await;
• .includes, .startsWith e .endWith;
• HOF’s
• .map;
• .filter;
• .find e findIndex;
• .some e .every;
• .reduce
• Para acompanhar as aulas de JavaScript, é necessário configurar um ambiente básico 
de desenvolvimento local:
• Node.js
• Ambiente de execução do JavaScript no back-end
• https://nodejs.org
• Visual Studio Code (VS Code)
• Editor de código 
• https://code.visualstudio.com
Obs: Após a instalação do Node.js, verifique se está funcionando com:
• node -v 
AMBIENTE DE DESENVOLVIMENTO
https://code.visualstudio.com/
• Terminal
• Para executar scripts com o comando:
• Node nomeDoArquivo.js
AMBIENTE DE DESENVOLVIMENTO
TIPOS DE DADOS
• Tipagem dinâmica e fraca
o JavaScript é uma linguagem dinâmica com tipos dinâmicos. As variáveis 
em JavaScript não estão diretamente associadas a nenhum tipo de valor 
específico, e qualquer variável pode receber (e reatribuir) valores de todos 
os tipos:
TIPOS DE DADOS
• Tipagem dinâmica e fraca
o JavaScript também é uma linguagem de tipagem fraca, o que significa que 
permite a conversão implícita de tipo quando uma operação envolve 
tipos incompatíveis, em vez de gerar erros de tipo.
TIPOS DE DADOS
• Principais valores primitivos:
• Boolean: True or false
• Null: Indica que um valor é nulo
• Undefined: Indica que não foi definido um valor
• Number: Valores numéricos
• String: Armazena textos
DECLARAÇÃO DE VARIÁVEIS
• Podemos declarar variáveis de duas formas, utilizando var, comum 
em outras linguagens, ou utilizando let:
DECLARAÇÃO DE VARIÁVEIS
• LET x VAR:
• Antes de tudo precisamos explicar que o JavaScript trabalha com escopos, onde 
cada bloco (funções, condicionais e estruturas de repetição, por exemplo) é um 
escopo fechado.
• var: Escopo global: Pode ser atualizado e declarado novamente
• let: Escopo de bloco: Pode ser atualizado, mas não declarado novamente
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) onix fiesta
b) onix onix
c) fiesta fiesta
d) fiesta onix
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) onix fiesta
b) onix onix
c) fiesta fiesta
d) fiesta onix
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) onix fiesta
b) onix onix
c) fiesta fiesta
d) fiesta onix
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) onix fiesta
b) onix onix
c) fiesta fiesta
d) fiesta onix
CONSTANTES
• Variáveis declaradas com const mantêm valores constantes. 
Declarações com const compartilham algumas semelhanças com as 
declarações com let.
• Declarações com const têm escopo de bloco;
• const não pode ser atualizado nem declarado novamente
=, == e ===
= Comando de Atribuição: é usado para atribuir valores a uma variável.
== Comparação entre duas variáveis, independentemente do tipo de dados da variável.
=== Comparação entre duas variáveis, mas irá verificar o tipo de dados e comparar dois 
valores.
FUNCTION
• Uma função é um bloco de código que executa alguma operação. 
• Opcionalmente, uma função pode definir parâmetros de entrada que permitem que 
os chamadores passem argumentos para a função.
• Uma função também pode retornar um valor como saída. 
• As funções são úteis para encapsular operações comuns em um só bloco 
reutilizável, idealmente com um nome que descreve de modo claro o que a função 
faz. A função a seguir aceita dois parâmetros (a e b) e retorna sua soma.
ARROW FUNCTION
• A Arrow Function é um recurso que foi introduzido no ES6. É uma 
maneira mais concisa de escrever expressões de função e funciona 
de maneira semelhante às funções regulares, mas com certas 
diferenças.
ARROW FUNCTION
ARROW FUNCTION
• A principal diferença é que a arrow function não cria seu próprio escopo de 
variáveis, mas sim herda o escopo do contexto em que ela foi definida. Isso significa 
que ela não tem seu próprio this e arguments. Além disso, ela não pode ser usada 
como um construtor, ou seja, não pode ser chamada com o operador new.
• Já a função tradicional (function declaration) tem seu próprio escopo de variáveis e cria 
seu próprio this e arguments. Ela pode ser usada como um construtor e pode ser 
chamada com o operador new.
ARROW FUNCTION
• Principal diferença, escopo this.
ARROW FUNCTION
• Exemplo
ARROW FUNCTION
• Exemplo
ARROW FUNCTION
• Exemplo
ARROW FUNCTION
• A Arrow Function herdara o 
arguments de onde ele esta
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) String
b) Undefined
c) Function
d) Object
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) String
b) Undefined
c) Function
d) Object
EXERCÍCIO
• Quais são as diferenças entre funções criadas com a keyword ‘function’ e com arrow functions?
a) A diferença existe apenas na forma como escrevemos a função, o comportamentos de 
ambas é idêntico
b) Arrow functions têm o seu próprio objeto this, enquanto funções criadas com a keyword 
‘function’ herdam o this do escopo onde foram declaradas
c) Arrow functions não têm acesso aos objetos this, enquanto funções criadas com a keyword 
‘function’ podem acessar o this sem problemas
d) Arrow functions herdam o this do escopo onde foram declaradas, enquanto funções criadas 
com a keyword ‘function’ têm o seu próprio objeto this
EXERCÍCIO
• Quais são as diferenças entre funções criadas com a keyword ‘function’ e com arrow functions?
a) A diferença existe apenas na forma como escrevemos a função, o comportamentos de 
ambas é idêntico
b) Arrow functions têm o seu próprio objeto this, enquanto funções criadas com a keyword 
‘function’ herdam o this do escopo onde foram declaradas
c) Arrow functions não têm acesso aos objetos this, enquanto funções criadas com a keyword 
‘function’ podem acessar o this sem problemas
d) Arrow functions herdam o this do escopo onde foram declaradas, enquanto funções 
criadas com a keyword ‘function’ têm o seu próprio objeto this
PARÂMETROS DEFAULTS
• Os parâmetros de função padrão permitem que parâmetros nomeados sejam 
inicializados com valores padrão se nenhum valor ou indefinido for passado.
DESTRUCTURING
• O Destructuring serve para extrair propriedades de um objeto ou posições de um 
array e salvar dentro de uma constante ou variável
REST OPERATOR
• A sintaxe de rest parameter (parâmetros rest) nos permite representar um número 
indefinido de argumentos como um array.
IMUTABILIDADE E SPREAD OPERATOR
• O spread operator (...) espalha os itens que estão contidos em um iterável (um 
iterável é qualquer coisa que possa ser repetida, como Strings, Arrays, Sets ...) dentro 
de um receptor (Um receptor é algo que recebe o valores de propagação).
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) ['React', 'Node.js', 'TypeScript', 'React Native']
b) ['React’]
c) Node.js
d) React
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) ['React', 'Node.js', 'TypeScript', 'React Native']
b) ['React’]
c) Node.js
d) React
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) { name: Rodrigo', isOnline: true }
b) { name: Rodrigo', isOnline: false }
c) O JavaScript retornará um erro
d) Nenhuma das alternativas à cima
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) { name: Rodrigo', isOnline: true }
b) { name: Rodrigo', isOnline:false }
c) O JavaScript retornará um erro
d) Nenhuma das alternativas à cima
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) { name: ‘Rodrigo’ }
b) { name: ‘Rodrigo', name: ‘Fulano de Tal’ }
c) { name: ‘Fulano de Tal’ }
d) O JavaScript retornará um erro
EXERCÍCIO
• Dado o código a baixo, qual será o resultado no console?
a) { name: Rodrigo’ }
b) { name: Rodrigo', name: ‘Fulano de Tal’ }
c) { name: Fulano de Tal’ }
d) O JavaScript retornará um erro
TEMPLATE STRING
• A template string é um recurso da linguagem que permite declarar strings dentro das 
quais podemos interpolar valores ou ainda quebrar o texto em múltiplas linhas.
ES MODULES
• ES Modules: Um dos mecanismo para dividir programas JavaScript em módulos separados que podem ser 
importados quando necessário.
• Duas formas de fazer isso: usando CJS (Common JavaScript) ou ESM (EcmaScript Modules).
• Obs: Criar o arquivo package.json definindo com : {"type": "module"}
PROMISE
• É um objeto usado para realizar processamentos assíncronos, 
esse objeto guarda um valor que pode estar disponível agora, 
no futuro ou nunca. Isso permite o tratamento de eventos ou 
ações que acontecem de forma assíncrona em casos de 
sucessos ou falhas.
• Usada em tarefas que vai demorar a ser realizada;
• Uma Promise possuí diferentes estados, sendo alguns deles:
• Pendente (Pending).
• Resolvida (Resolved)
PROMISE
• Sintaxe:
>> Enquanto eu não executar o resolve ou o reject ela ficara pendente
PROMISE THEN / CATCH
• Pegando o resultado da Promise
PROMISE ASYNC / AWAIT
• Definindo uma função como async, podemos utilizar a palavra-chave await antes de 
qualquer expressão que retorne uma promessa. Dessa forma, a execução da função 
externa (a função async) será pausada até que a Promise seja resolvida:
HELPERS - INCLUDES
• O método includes() determina se uma string ou array contém um determinado 
elemento, retornando true ou false apropriadamente.
HELPERS - STARSWITH
• O método startsWith() determina se uma string começa com os caracteres 
especificados, retornando true ou false.
HELPERS - ENDSWITH
• O método endsWith() indica se uma string termina com determinados caracteres, 
retornando true ou false.
HIGHER ORDER FUNCTIONS – HOF’s
• As HOF são definidas como funções que aceitam funções como parâmetro e/ou 
retorna uma função como saída.
• .find
• .findIndex
• .some
• .every
• .map
• .filter
• .reduce
HOF’s - FIND
• O método find() retorna o valor do primeiro elemento do array que satisfaça a função 
de teste provida. Caso contrario, undefined é retornado.
HOF’s - FINDINDEX
• O método findIndex() retorna o índice no array do primeiro elemento que satisfaça a 
função de teste provida. Caso contrário, retorna -1, indicando que nenhum elemento 
passou no teste.
HOF’s - SOME
• O método some() testa se ao menos um dos elementos no array passa no teste 
implementado pela função atribuída e retorna um valor true ou false.
HOF’s - EVERY
• O método every() testa se todos os elementos do array passam pelo teste 
implementado pela função fornecida. Este método retorna um valor booleano.
HOF’s - MAP
• O método map() invoca a função callback passada por argumento para cada 
elemento do Array e devolve um novo Array como resultado.
HOF’s - FILTER
• O método filter() cria um novo array com todos os elementos que passaram no teste 
implementado pela função fornecida.
HOF’s - REDUCE
• O método reduce() executa uma função reducer (fornecida por você) para cada 
elemento do array, resultando num único valor de retorno.
FIM
	Slide 1
	Slide 2: OBJETIVO DA AULA
	Slide 3
	Slide 4
	Slide 5
	Slide 6: TIPOS DE DADOS
	Slide 7: TIPOS DE DADOS
	Slide 8: TIPOS DE DADOS
	Slide 9: DECLARAÇÃO DE VARIÁVEIS
	Slide 10: DECLARAÇÃO DE VARIÁVEIS
	Slide 11: EXERCÍCIO
	Slide 12: EXERCÍCIO
	Slide 13: EXERCÍCIO
	Slide 14: EXERCÍCIO
	Slide 15: CONSTANTES
	Slide 16: =, == e ===
	Slide 17: FUNCTION
	Slide 18: ARROW FUNCTION
	Slide 19: ARROW FUNCTION
	Slide 20: ARROW FUNCTION
	Slide 21: ARROW FUNCTION
	Slide 22: ARROW FUNCTION
	Slide 23: ARROW FUNCTION
	Slide 25: ARROW FUNCTION
	Slide 26: ARROW FUNCTION
	Slide 27: EXERCÍCIO
	Slide 28: EXERCÍCIO
	Slide 29: EXERCÍCIO
	Slide 30: EXERCÍCIO
	Slide 31: PARÂMETROS DEFAULTS
	Slide 32: DESTRUCTURING
	Slide 33: REST OPERATOR
	Slide 34: IMUTABILIDADE E SPREAD OPERATOR
	Slide 35: EXERCÍCIO
	Slide 36: EXERCÍCIO
	Slide 37: EXERCÍCIO
	Slide 38: EXERCÍCIO
	Slide 39: EXERCÍCIO
	Slide 40: EXERCÍCIO
	Slide 41: TEMPLATE STRING
	Slide 42: ES MODULES
	Slide 43: PROMISE
	Slide 44: PROMISE
	Slide 45: PROMISE THEN / CATCH
	Slide 46: PROMISE ASYNC / AWAIT
	Slide 47: HELPERS - INCLUDES
	Slide 48: HELPERS - STARSWITH
	Slide 49: HELPERS - ENDSWITH
	Slide 50: HIGHER ORDER FUNCTIONS – HOF’s
	Slide 51: HOF’s - FIND
	Slide 52: HOF’s - FINDINDEX
	Slide 53: HOF’s - SOME
	Slide 54: HOF’s - EVERY
	Slide 55: HOF’s - MAP
	Slide 56: HOF’s - FILTER
	Slide 57: HOF’s - REDUCE
	Slide 58