Fundamentos e Sintaxe Moderna

Mariana Batista — Fri, 08 Aug 2025 21:10:53 +0000

Hoje estudei conceitos básicos e importantes do JavaScript, como as diferenças entre var, let e const, o uso de template literals para facilitar strings, desestruturação de objetos e arrays, além dos operadores Rest e Spread. Vou compartilhar aqui os principais pontos e exemplos práticos para fixar o conteúdo.

Variáveis: diferenças e boas práticas

var: escopo de função, pode causar hoisting (variáveis "subindo" no código), não recomendado para uso moderno.
let: escopo de bloco, permite reatribuição, mais seguro que var.
const: escopo de bloco, não permite reatribuição (mas objetos internos podem ser mutados).
Boas práticas: Use const por padrão, só use let se precisar reatribuir, evite var

Templates literals

Permite interpolação de variáveis, quebra de linha, expressões dentro de strings.
Exemplo:

const nome = "Mariana";
console.log(`Olá, ${nome}`;

Desestruturação de objetos e arrays

Permite extrair valores de objetos e arrays em variáveis separadas
Objeto

const pessoa = {nome: "Mariana", idade: 26};
const {nome, idade} = pessoa;

Array

const numeros = [1, 2, 3];
const [um, dois, tres] = numeros;

Operador Rest (...args) e Spread(...obj)

Rest: agrupa argumentos ou propriedades em um array/objeto

function soma(...nums){
  return nums.reduce((acc, n) => acc + n, 0);
}

Spread: espalha elementos de array ou propriedades de objeto.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

Exercícios de fixação

1- Criar um objeto e extrair propriedades via desestruturação;
2- Criar função que receba n argumentos e retorne a soma usando Rest;
3- Dado o objeto abaixo, use desestruturação para extrair as variáveis nomee email:

const usuario = {
  nome: "Carlos",
  email: "carlos@email.com",
  idade: 35
};

4- Dado o array abaixo, use desestruturação para obter o primeiro e o terceiro elemento em variáveis separadas:

const numeros = [10, 20, 30, 40, 50];

5- Crie uma função que receba qualquer quantidade de números (usando Rest) e retorne um novo array que contenha esses números mais os números 100, 200, 300.

DEV Community: Mariana Batista

Fundamentos e Sintaxe Moderna

Exercícios de fixação