JavaScript para Iniciantes
Flashcards interativos para aprender os conceitos fundamentais do JavaScript
de forma prática e visual.
Variáveis: var, let, const
O que são variáveis? var vs let vs const
Contêineres que armazenam dados. Pense nelas como caixas var: escopo global ou de função. let: escopo de bloco, pode
com etiquetas que guardam informações. ser reatribuído. const: escopo de bloco, imutável.
Exemplo de const Quando usar cada um?
Use const por padrão. Use let quando precisar reatribuir. Evite
const nome = "João"; var em código novo.
nome = "Maria"; // Erro!
const lista = [1, 2, 3];
[Link](4); // Ok!
Tipos de Dados
Primitivos Referência
String: texto entre aspas Object: coleção de pares
Number: inteiros e decimais chave-valor
Boolean: true ou false Array: lista ordenada
Null: valor nulo Function: bloco reutilizável
Undefined: não definido
Symbol: identificador único
typeof
Operador que retorna o tipo de dado:
typeof "texto" // "string"
typeof 42 // "number"
typeof true // "boolean"
Operadores
Aritméticos Comparação
+ Adição, - Subtração, * Multiplicação, / Divisão, % Módulo, ** == Igual, === Idêntico, != Diferente, !== Não idêntico, >, <, >=,
Potência. <=.
Lógicos Exemplo prático
&& E (AND), || OU (OR), ! NÃO (NOT). Combinam condições
booleanas. let a = 10, b = 5;
a + b // 15
a > b // true
a === b // false
Estruturas Condicionais
if, else if, else switch
Executa código baseado em condições. O bloco if roda se a Avalia uma expressão e executa o bloco correspondente ao caso.
condição for verdadeira. else if testa outra condição. else roda se Útil quando há múltiplas opções. Usa break para sair ou default
nenhuma condição for atendida. para caso padrão.
Exemplo if/else Exemplo switch
if (idade >= 18) { switch (dia) {
[Link]("Adulto"); case "seg":
} else { [Link]("Segunda");
[Link]("Menor"); break;
} default:
[Link]("Outro dia");
}
Funções
O que são funções? Sintaxe básica
Blocos de código reutilizáveis
que executam uma tarefa function saudar(nome) {
específica. Podem receber return "Olá, " + nome;
parâmetros e retornar valores. }
saudar("João"); // "Olá,
João"
Arrow functions
Sintaxe mais curta e moderna:
const saudar = (nome) => {
return "Olá, " + nome;
}
Arrays
Conceitos básicos Métodos úteis
Lista ordenada de elementos, acessados por índice (posição). push() adiciona no final, pop() remove do final, shift() remove do
Índices começam em 0. Arrays podem conter diferentes tipos de início, unshift() adiciona no início, map() transforma, filter() filtra.
dados.
Criando arrays Acessando elementos
let frutas = ["maçã", "banana", "laranja"]; frutas[0] // "maçã"
let numeros = [1, 2, 3, 4, 5]; [Link] // 3
frutas[[Link] - 1] // "laranja"
Objetos
O que são objetos?
Estruturas que armazenam dados como pares chave-valor. Perfeitos para
representar entidades com múltiplas propriedades.
Sintaxe de objeto
let pessoa = {
nome: "João",
idade: 30,
cidade: "São Paulo"
};
Acessando propriedades
Notação ponto: [Link]
Notação colchetes: pessoa["nome"]
Métodos em objetos
let pessoa = {
nome: "João",
saudar: function() {
return "Olá!";
}
};
Loops: for e while
Loop for Loop while for...of
Repete um bloco de código um Repete enquanto a condição for Itera sobre elementos de um array:
número fixo de vezes. Útil quando verdadeira. Útil quando não sabemos
sabemos quantas iterações serão exatamente quantas iterações serão
let frutas = ["maçã", "banana"];
necessárias. necessárias.
for (let fruta of frutas) {
[Link](fruta);
for (let i = 0; i < 5; i++) { let i = 0; }
[Link](i); while (i < 5) {
} [Link](i);
// 0, 1, 2, 3, 4 i++;
}
// 0, 1, 2, 3, 4
Boas Práticas
Nomenclatura clara Comentários estratégicos
Use nomes descritivos para variáveis e funções. Evite Comente código complexo, mas evite comentários óbvios. O
abreviações confusas. Use camelCase para múltiplas código deve ser auto-explicativo sempre que possível.
palavras.
const e let Evite globals
Use const por padrão. Apenas use let quando precisar Não polua o escopo global. Use módulos ou IIFE para isolar
reatribuir. Evite var em código moderno. código. Prefira funções puras quando possível.
Teste e debug Formatação consistente
Use [Link]() para depurar. Teste diferentes casos. Mantenha estilo de código uniforme. Use espaços ou tabs
Considere usar ferramentas como ESLint para manter código consistentemente. Ferramentas como Prettier ajudam
limpo. automatizar.