DEV Community

Mariana Batista
Mariana Batista

Posted on

Fundamentos e Sintaxe Moderna

#javascript #programming #beginners #braziliandevs

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}`;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • Array 
const numeros = [1, 2, 3];
const [um, dois, tres] = numeros;
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode
  • 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 }
Enter fullscreen mode Exit fullscreen mode

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
};
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)