Aprenda JavaScript em 10 minutos

1 September 2025 — Linguagem De Programação

JavaScript é uma linguagem de programação interpretada de alto nível conhecida por sua versatilidade e uso generalizado no desenvolvimento web. Este tutorial cobre recursos modernos do JavaScript (ES6+) para ajudá-lo a aprender rapidamente a linguagem.

1. Escrevendo seu primeiro programa JavaScript

Vamos começar com um programa simples. Crie um arquivo chamado hello.js e insira o seguinte código:

console.log("Hello, World!");

Salve o arquivo e execute o seguinte comando no terminal ou linha de comando:

node hello.js

Ou inclua-o em um arquivo HTML:

<script>
  console.log("Hello, World!");
</script>

A saída será:

Hello, World!

Este programa simples demonstra a funcionalidade básica de saída do JavaScript. A função console.log() é usada para exibir informações de texto no console.

2. Sintaxe básica

A sintaxe do JavaScript é semelhante a outras linguagens no estilo C. Ela usa ponto e vírgula para encerrar instruções e chaves {} para definir blocos de código.

// Este é um comentário de linha única
console.log("Hello, World!");

/*
Este é um comentário de
múltiplas linhas que se estende
por várias linhas.
*/

Regras básicas de sintaxe em JavaScript:

Ponto e vírgula: Opcionais, mas recomendados para encerrar instruções
Comentários: Comentários de linha única começam com //, múltiplas linhas com /* */
Sensibilidade a maiúsculas: JavaScript diferencia maiúsculas de minúsculas
Blocos de código: Definidos por chaves {}

3. Variáveis e tipos de dados

Em JavaScript, as variáveis são declaradas usando let, const ou var. O JavaScript moderno prefere let e const.

Declaração de variáveis:

let name = "John"; // Variável mutável
const age = 25;     // Constante imutável
var oldWay = "deprecated"; // Evite usar var

Principais tipos de dados em JavaScript:

Number: 42, 3.14, -10
String: "hello", 'world', `template`
Boolean: true, false
Undefined: undefined (variável declarada mas não atribuída)
Null: null (ausência intencional de valor)
Object: {key: "value"}, [1, 2, 3]
Symbol: Symbol("description") (ES6+)
BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Tipo Number

JavaScript usa números de ponto flutuante de 64 bits para todos os valores numéricos.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 Tipo String

Strings podem ser criadas com aspas simples, aspas duplas ou template literals.

let single = 'String com aspas simples';
let double = "String com aspas duplas";
let template = `Template literal`;

// Template literals com interpolação
let name = "Alice";
let greeting = `Olá, ${name}!`; // "Olá, Alice!"

Operações com strings:

let text = "Programação JavaScript";
console.log(text.length);        // Comprimento da string: 19
console.log(text.toUpperCase()); // "PROGRAMAÇÃO JAVASCRIPT"
console.log(text.toLowerCase()); // "programação javascript"
console.log(text[0]);            // Primeiro caractere: "P"
console.log(text.slice(0, 10)); // "Programação"

3.3 Tipo Boolean

O tipo booleano tem dois valores: true e false.

let isActive = true;
let isComplete = false;

// Operações booleanas
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined e Null

undefined significa que uma variável foi declarada, mas nenhum valor foi atribuído. null é uma ausência intencional de qualquer valor.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("Variável não definida");
}

if (empty === null) {
  console.log("Valor é null");
}

4. Estruturas de dados

4.1 Array

Arrays são coleções ordenadas e mutáveis de valores.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // Adicionar elemento: [1, 2, 3, 4, 5, 6]
numbers.pop();          // Remover último: [1, 2, 3, 4, 5]
numbers.unshift(0);     // Adicionar no início: [0, 1, 2, 3, 4, 5]
numbers.shift();        // Remover primeiro: [1, 2, 3, 4, 5]
numbers[0] = 10;        // Modificar: [10, 2, 3, 4, 5]

Métodos de array:

let fruits = ["maçã", "banana", "laranja"];

// Iteração
fruits.forEach(fruit => console.log(fruit));

// Transformação
let lengths = fruits.map(fruit => fruit.length); // [4, 6, 7]

// Filtragem
let longFruits = fruits.filter(fruit => fruit.length > 5); // ["banana", "laranja"]

## 4.2 Object

Objetos são coleções de pares chave-valor.

```javascript
let person = {
  name: "John",
  age: 30,
  city: "Nova York",
  isStudent: false
};

// Acesso a propriedades
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// Adição de propriedades
person.country = "EUA";
person["occupation"] = "Desenvolvedor";

// Remoção de propriedades
delete person.isStudent;

// Métodos de objeto
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "Nova York", "EUA", "Desenvolvedor"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

Sets são coleções de valores únicos.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Operações com Set
numbers.add(6);       // Adicionar valor
numbers.delete(1);    // Remover valor
numbers.has(2);       // true
numbers.size;         // 5

// Iteração
numbers.forEach(num => console.log(num));

4.4 Map

Maps são coleções de pares chave-valor com qualquer tipo de dados como chave.

let map = new Map();
map.set("name", "Alice");
map.set(1, "número um");
map.set(true, "booleano verdadeiro");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// Iteração
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. Operadores

JavaScript fornece vários operadores para cálculos e comparações.

Aritméticos: +, -, *, /, %, ** (exponenciação)
Comparação: ==, ===, !=, !==, >, <, >=, <=
Lógicos: &&, ||, !
Atribuição: =, +=, -=, *=, /=, %=
Ternário: condition ? expr1 : expr2

5.1 Operadores aritméticos

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 Operadores de comparação

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (igualdade estrita)
console.log(x != y);    // true
console.log(x !== y);   // true (desigualdade estrita)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 Operadores lógicos

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. Controle de fluxo

6.1 Instruções if

let age = 20;

if (age >= 18) {
  console.log("Adulto");
} else if (age >= 13) {
  console.log("Adolescente");
} else {
  console.log("Criança");
}

6.2 Instrução switch

let day = "Segunda-feira";

switch (day) {
  case "Segunda-feira":
    console.log("Início da semana");
    break;
  case "Sexta-feira":
    console.log("Fim de semana quase chegando");
    break;
  default:
    console.log("Dia normal");
}

6.3 Loops for

// Loop for tradicional
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Loop for...of (arrays, strings)
let fruits = ["maçã", "banana", "laranja"];
for (let fruit of fruits) {
  console.log(fruit);
}

// Loop for...in (propriedades de objeto)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 Loops while

// Loop while
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// Loop do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break e continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Sair do loop
  }
  if (i % 2 === 0) {
    continue; // Pular números pares
  }
  console.log(i); // 1, 3
}

7. Funções

Funções são blocos de código reutilizáveis.

7.1 Declaração de função

function greet(name) {
  return `Olá, ${name}!`;
}

console.log(greet("Alice")); // "Olá, Alice!"

7.2 Expressões de função

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 Funções de seta (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `Olá, ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "Olá, Bob!"

7.4 Parâmetros padrão

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 Parâmetros rest

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 Operador spread

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "Nova York"}; // {name: "John", age: 30, city: "Nova York"}

8. Classes e objetos (ES6+)

8.1 Declaração de classe

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Eu sou ${this.name}, tenho ${this.age} anos`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} fez aniversário, agora tem ${this.age} anos`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "Eu sou John, tenho 25 anos"
console.log(person.haveBirthday());   // "John fez aniversário, agora tem 26 anos"

8.2 Herança

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} faz um som`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "Cachorro");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} late`;
  }

  fetch() {
    return `${this.name} busca a bola`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy late"
console.log(dog.fetch());     // "Buddy busca a bola"

8.3 Getters e setters

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. JavaScript assíncrono

9.1 Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("Dados recebidos");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Dados recebidos" após 1 segundo
});

9.2 Promises

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dados recebidos");
      // reject("Ocorreu um erro");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "Dados recebidos"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "Dados recebidos"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Erro:', error);
  }
}

10. Tratamento de erros

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("Divisão por zero");
  }
  console.log(result);
} catch (error) {
  console.error("Erro:", error.message);
} finally {
  console.log("Isso sempre executa");
}

11. Módulos (ES6+)

11.1 Exportação

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 Importação

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. Recursos modernos do JavaScript

12.1 Desestruturação

// Desestruturação de array
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// Desestruturação de objeto
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// Desestruturação de parâmetros de função
function greet({name, age}) {
  return `Olá ${name}, você tem ${age} anos`;
}

12.2 Template literals

let name = "Alice";
let age = 25;

// Interpolação básica
let greeting = `Olá, ${name}!`;

// Strings multi-linha
let message = `
  Nome: ${name}
  Idade: ${age}
  Status: ${age >= 18 ? "Adulto" : "Menor"}
`;

// Avaliação de expressão
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 Optional chaining (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "Nova York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "Nova York"
console.log(user?.employment?.company);     // undefined (sem erro)

12.4 Nullish coalescing (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "Desconhecido");    // "Desconhecido" (string vazia é falsy)
console.log(name ?? "Desconhecido");    // "" (apenas null/undefined)

console.log(age || 18);           // 18 (0 é falsy)
console.log(age ?? 18);           // 0 (apenas null/undefined)

console.log(city ?? "Desconhecido");   // "Desconhecido"
console.log(country ?? "EUA");    // "EUA"

13. Métodos úteis de array

let numbers = [1, 2, 3, 4, 5];

// map: transformar cada elemento
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: selecionar elementos
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: acumular valores
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: encontrar primeiro elemento correspondente
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: verificar se algum elemento corresponde
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: verificar se todos os elementos correspondem
let allPositive = numbers.every(n => n > 0); // true

// sort: ordenar elementos
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. Data e hora

let now = new Date();
console.log(now.toString());      // Data e hora atual
console.log(now.getFullYear());   // Ano atual
console.log(now.getMonth());      // Mês atual (0-11)
console.log(now.getDate());       // Dia atual (1-31)
console.log(now.getHours());      // Hora atual (0-23)

// Formatação de datas
console.log(now.toLocaleDateString()); // String de data localizada
console.log(now.toLocaleTimeString()); // String de hora localizada
console.log(now.toISOString());        // String formato ISO

// Criação de datas específicas
let specificDate = new Date(2025, 0, 1); // 1 de janeiro de 2025
let timestamp = new Date(1640995200000); // De timestamp

15. Expressões regulares

let text = "Olá, meu email é [email protected] e telefone é 123-456-7890";

// Padrão de email
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// Padrão de telefone
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// Método test
let isValidEmail = emailPattern.test("[email protected]"); // true

// Método replace
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript é uma linguagem poderosa e versátil que continua a evoluir. Este tutorial cobre os conceitos essenciais para começar, mas há muito mais para explorar, incluindo tópicos avançados como geradores, proxies e APIs web.