Review JavaScript - Básico

Prévia do material em texto

JavaScript: Parte 1
Prof. Júlio César Andrade
Tema da aula:
Variáveis em JavaScript
Em JavaScript, as variáveis são usadas para 
armazenar dados que podem ser 
manipulados ao longo do programa. Elas são 
declaradas utilizando var, let ou const.
2
Variáveis em JavaScript
var (Evite usar)
● Antes do ES6 (2015), var era a única forma de 
declarar variáveis.
● Escopo de função (não respeita blocos {})
● Pode ser redeclarada e atualizada.
3
Variáveis em JavaScript
Problemas com var:
4
Variáveis em JavaScript
Problemas com var:
5
Variáveis declaradas com var não respeitam escopo de bloco, ou 
seja, se forem declaradas dentro de um if, for, ou qualquer outro 
bloco, ainda podem ser acessadas fora dele.
let (A maneira moderna e recomendada)
● Introduzido no ES6 (2015).
● Escopo de bloco {} → Não pode ser acessada fora do 
bloco onde foi declarada.
● Pode ser alterada, mas não redeclarada no mesmo 
escopo.
6
Exemplo
7
Constantes
const (Para valores constantes que não mudam)
● Escopo de bloco {}.
● Não pode ser reatribuída depois de definida.
● Obrigatório inicializar no momento da declaração.
8
Exemplo
9
undefined e null em JavaScript
undefined → "O JavaScript ainda não 
atribuiu um valor."
null → "O valor foi intencionalmente 
definido como vazio."
10
💡 Em JavaScript, undefined e null 
são dois valores especiais usados 
para representar ausência de valor, 
mas de maneiras diferentes.
undefined vs null em JavaScript
undefined (Gerado automaticamente)
● Variável declarada sem valor → let x;
null (Definido manualmente)
● Indica ausência intencional de valor → let 
user = null;
● Resetar variáveis → carrinho = null;
11
Hoisting
Em JavaScript, declarações de variáveis 
(var) são "elevadas" (hoisted) para o topo 
do seu escopo. Isso significa que você 
pode usar a variável antes de declarar, 
mas ela terá o valor undefined.
12
13
Números em JavaScript
JavaScript possui um modelo de tipos 
numéricos mais simples do que muitas 
outras linguagens, pois todos os números 
são representados internamente como 
números de ponto flutuante.
14
Formas de Declarar Strings
Em JavaScript, há três formas de criar strings:
let str1 = "Aspas duplas"; 
let str2 = 'Aspas simples'; 
let str3 = `Template literals`;
15
Concatenação vs. Interpolação
Concatenação (+ operador +)
let nome = "Ana";
let saudacao = "Olá, " + nome + "!";
console.log(saudacao); // Olá, Ana!
Interpolação (Template Literals )
let nome = "Ana";
let saudacao = `Olá, ${nome}!`; 
console.log(saudacao); // Olá, Ana!
16
Métodos Comuns de Strings
✅ Comprimento (.length)
console.log("JavaScript".length); // 10
✅ Transformação (toUpperCase(), toLowerCase())
console.log("texto".toUpperCase()); // "TEXTO"
console.log("TEXTO".toLowerCase()); // "texto"
✅ Substituir (replace())
console.log("Olá, mundo".replace("mundo", "JavaScript")); // "Olá, JavaScript"
17
Métodos Comuns de Strings
✅ Fatiar (slice())
console.log("JavaScript".slice(0, 4)); // "Java"
✅ Dividir (split())
console.log("maçã,banana,uva".split(",")); // ["maçã", "banana", "uva"]
18
Arrays
19
Arrays em JavaScript
Arrays em JavaScript são estruturas de 
dados que permitem armazenar e 
manipular coleções de valores. Eles são 
muito flexíveis e podem conter qualquer 
tipo de dado, como números, strings, 
objetos, outros arrays, e até mesmo 
funções.
20
Criação de Arrays
É possível criar um array de várias maneiras:
21
Acessando e modificando elementos
Os elementos de um array são acessados por meio de índices, que começam em 0.
22
Métodos Comuns de Arrays
Adicionar e Remover Elementos
● push(): Adiciona um ou mais elementos ao final do array.
● pop(): Remove o último elemento do array.
● unshift(): Adiciona um ou mais elementos no início do array.
● shift(): Remove o primeiro elemento do array.
23
24
Percorrendo Arrays
● forEach(): Executa uma função para cada 
elemento do array.
● map(): Cria um novo array com os resultados de 
uma função aplicada a cada elemento.
● filter(): Cria um novo array com elementos que 
passam por um teste (função).
25
26
27
28
Outros Métodos Úteis
● concat(): Combina dois ou mais arrays.
● slice(): Retorna uma cópia de parte de um array.
● indexOf(): Retorna o índice de um elemento no array, ou 
-1 se não encontrado.
● includes(): Verifica se um array contém um determinado 
valor.
● join(): Junta todos os elementos de um array em uma 
string.
29
30
Destructuring de Arrays
Você pode extrair valores de arrays em variáveis individuais.
31
Exercício 
Crie um programa em JavaScript que manipule uma lista de tarefas utilizando arrays. Realize 
as seguintes operações, sem utilizar funções:
1. Crie um array vazio para armazenar as tarefas.
2. Adicione algumas tarefas à lista utilizando push().
3. Remova a última tarefa usando pop().
4. Adicione mais tarefas à lista.
5. Ordene a lista em ordem alfabética com sort().
6. Encontre a posição de uma tarefa específica na lista com indexOf().
7. Remova a tarefa pelo índice.
8. Exiba a lista final de tarefas no console.
32
Objetos
33
Objetos
Objetos em JavaScript são estruturas de 
dados que permitem armazenar coleções 
de pares chave-valor, onde cada valor é 
associado a uma chave única. Eles são 
fundamentais para organizar e manipular 
dados de forma estruturada.
34
Criação de Objetos
Existem várias maneiras de criar objetos em JavaScript, 
mas a mais comum é está:
35
Criação de Objetos
Você também pode criar usando construtor Object:
36
Objetos dinâmicos
Em JavaScript, você pode adicionar 
propriedades e métodos a um objeto 
depois de criá-lo, de forma dinâmica. Isso 
é possível porque objetos em JavaScript 
são mutáveis.
37
38
39
A palavra-chave this refere-se ao objeto atual dentro de um método. 
Ela é usada para acessar propriedades e métodos do próprio objeto.
40
Getters e Setters
Em JavaScript, você pode usar getters e setters para controlar o acesso 
a propriedades de um objeto.
Getters (get)
● Usados para obter o valor de uma propriedade.
● São chamados automaticamente ao acessar a propriedade.
41
Exemplo de Getter
42
Exemplo sem Getter
43
Setters (set)
44
Iterando sobre Objetos
Você pode percorrer as propriedades de um objeto usando loops como for...in.
45
nome: João
sobrenome: Silva
idade: 30
profissão: 
Desenvolvedor
Exercício
Crie um programa em JavaScript que manipule um objeto representando um livro. 
Realize as seguintes operações, sem utilizar funções:
1. Crie um objeto chamado livro com as seguintes propriedades:
○ titulo: Título do livro
○ autor: Autor do livro
○ ano: Ano de publicação
○ editora: Editora do livro
2. Exiba todas as propriedades do objeto no console.
3. Adicione uma nova propriedade chamada paginas indicando o número de 
páginas do livro.
4. Modifique o valor da propriedade ano para um ano diferente.
5. Remova a propriedade editora do objeto.
6. Exiba o objeto atualizado no console.
46
Objetos e JSON
JSON (JavaScript Object Notation) é um 
formato de texto leve para troca de dados. 
Objetos JavaScript podem ser convertidos 
para JSON e vice-versa.
47
Todos estão 
familiarizados com o 
formato JSON?
48
49
Funções
50
Função (Function)
Uma função é um bloco de código que pode ser definido uma vez e 
executado várias vezes. Ela pode receber parâmetros (dados de 
entrada), processá-los e retornar um resultado.
51
Função Anônima
Funções sem nome são chamadas de anônimas. 
52
Arrow Functions (Funções de Seta)
Introduzidas no ES6, as arrow functions são uma 
sintaxe mais curta para escrever funções.
53
Arrow Functions (Funções de Seta)
Se a função tiver apenas uma linha de código e 
retornar um valor, você pode omitir as chaves {} e 
o return.
54
Funções como Argumentos
Você pode passar funções como parâmetros para outras funções.
55
Herança
56
Herança Prototípica
Em JavaScript, objetos podem herdar propriedades e métodos de outros 
objetos.57
Herança com Classes
A partir do ES6, JavaScript introduziu a sintaxe de classes, que tornam a herança mais simples e legível.
58
59
60
Referências
FLANAGAN, David. JavaScript: o guia definitivo. 6. ed. Porto Alegre: Bookman, 2013. E-book. p.106. 
ISBN 9788565837484. Disponível em: 
https://integrada.minhabiblioteca.com.br/reader/books/9788565837484/. Acesso em: 20 fev. 
2025.
61
Obrigado! Até a próxima aula.
62
Obrigado!