Variáveis JavaScript Explicadas: var vs let vs const, Escopo e Boas Práticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma das linguagens de programação mais amplamente usadas no desenvolvimento web. Em particular, no desenvolvimento front‑end, ela é essencial para a construção de páginas web interativas. Dentro desse contexto, variáveis desempenham um papel crucial no gerenciamento de dados em seus programas.

Neste artigo, explicaremos variáveis em JavaScript em detalhes — dos fundamentos aos tópicos mais avançados. Especificamente, você aprenderá como declarar variáveis, entender conceitos de escopo, seguir convenções de nomenclatura e prevenir erros comuns, tudo com exemplos práticos de código.

1.1 O Que Você Vai Aprender Neste Artigo

Ao ler este artigo, você adquirirá os seguintes conhecimentos e habilidades.

1. Compreender o conceito básico e o papel das variáveis em JavaScript
2. Conhecer as diferenças entre var, let e const e como usá‑las corretamente
3. Gerenciar escopo e tempo de vida de forma eficaz
4. Aplicar variáveis com técnicas práticas usando exemplos reais de código
5. Identificar causas comuns de erros e aprender a corrigi‑los

1.2 Para Quem É Este Artigo

• Iniciantes que desejam aprender o básico de JavaScript
• Aprendizes intermediários que já têm experiência de codificação, mas querem entender mais profundamente as diferenças entre variáveis e escopo
• Qualquer pessoa que queira reduzir erros de codificação e projetar programas de forma mais eficiente

Este guia explica os conceitos com exemplos de código para que iniciantes não fiquem presos. Também inclui dicas de prevenção de erros e uma seção de FAQ para que aprendizes intermediários possam obter conhecimento prático e aplicado.

Na próxima seção, vamos analisar mais de perto o que é uma “variável” em primeiro lugar.

2. O Que São Variáveis em JavaScript?

Em JavaScript, uma variável é um contêiner nomeado usado para armazenar temporariamente dados e reutilizá‑los quando necessário. O uso de variáveis torna o gerenciamento de dados dentro de um programa mais eficiente.

2.1 Qual É o Papel de uma Variável?

Na programação, uma variável é como uma “caixa” que armazena informações. Ao colocar dados na caixa e retirá‑los, você pode gerenciar o estado do programa e realizar cálculos.

Por exemplo, o código a seguir usa uma variável para exibir uma mensagem.

let greeting = "Hello!";
console.log(greeting);

Neste código:

• A variável greeting armazena a string "Hello!".
• console.log() exibe o conteúdo dessa variável.

É assim que as variáveis permitem que você manipule dados dinamicamente em seu programa.

2.2 Características Principais das Variáveis em JavaScript

As variáveis em JavaScript possuem as seguintes características.

1. Tipagem dinâmica

• Em JavaScript, o tipo da variável (número, string, array etc.) é determinado automaticamente. Você não precisa especificar um tipo ao declarar a variável.
• Exemplo:

  let number = 10;         // number
  let text = "Hello!";     // string
  let isTrue = true;       // boolean
  

2. Flexibilidade

• Você pode atribuir valores de tipos diferentes à mesma variável (embora isso não seja recomendado para legibilidade).
• Exemplo:

  let data = 10;     // number
  data = "string";   // changed to string
  

3. Escopo (visibilidade)

• O intervalo utilizável de uma variável depende de onde ela foi declarada (detalhes a seguir).

3. Reatribuição e redeclaração

• Se a reatribuição ou redeclaração é permitida depende da palavra‑chave que você usa.
• Exemplo:

  var x = 5;
  var x = 10; // redeclaration allowed (not recommended)
  
  let y = 5;
  // let y = 10; // Error (cannot redeclare)
  
  const z = 5;
  // z = 10; // Error (cannot reassign)
  

2.3 Benefícios de Usar Variáveis

1. Reutilização

• Se você precisar usar o mesmo valor repetidamente, armazená‑lo em uma variável facilita o gerenciamento.

1. Facilidade de atualização

• Ao atualizar o valor de uma variável, as alterações são refletidas em todo o programa.

1. Melhor legibilidade e manutenção

• Usar variáveis nomeadas esclarece a intenção e ajuda outros desenvolvedores a entender seu código.

2.4 Um Exemplo Simples Usando Variáveis

Abaixo está um programa básico de cálculo usando variáveis.

let price = 500;              // item price
let quantity = 3;             // quantity
let total = price * quantity; // calculate total
console.log(`Total is ${total} yen.`);

Neste exemplo, o preço e a quantidade são armazenados em variáveis, e o valor total é calculado dinamicamente e exibido. É assim que as variáveis aumentam a flexibilidade e a eficiência em seus programas.

3. Como Declarar Variáveis e Diferenças Entre Palavras-Chave

Em JavaScript, você usa três palavras-chave para declarar variáveis: var, let e const. Entender suas características e como escolher entre elas ajuda a prevenir erros e melhora a legibilidade.

3.1 Diferenças Básicas Entre var, let e const

1. var – A Declaração Legada

var tem sido usado desde as primeiras versões do JavaScript.

Características:

• Permite redeclaração e reatribuição.
• Tem escopo de função (escopo de bloco é ignorado).
• Hoisting move a declaração para o topo de seu escopo.

Exemplo:

var x = 10;
console.log(x); // 10

var x = 20; // redeclaration allowed
console.log(x); // 20

if (true) {
  var y = 30; // ignores block scope
}
console.log(y); // 30

Notas:

• Como ignora o escopo de bloco, pode causar comportamento indesejado.
• É considerado obsoleto no JavaScript moderno; evite-o em novo código.

2. let – A Escolha Recomendada para Reatribuição

let foi introduzido no ES6 (2015) e agora é amplamente usado.

Características:

• Não pode ser redeclarado, mas pode ser reatribuído.
• Tem escopo de bloco.
• Hoisting ocorre, mas usá-lo antes da inicialização causa um erro ( Zona Morta Temporal ).

Exemplo:

let a = 10;
console.log(a); // 10

a = 20; // reassignment allowed
console.log(a); // 20

if (true) {
  let b = 30; // valid only inside this block
  console.log(b); // 30
}
// console.log(b); // Error: b is out of scope

Notas:

• Use let quando a reatribuição for necessária, mas prefira const quando não precisar de reatribuição.

3. const – Para Constantes

const também foi introduzido no ES6 e é usado para declarar constantes (valores que não devem ser reatribuídos).

Características:

• Não pode ser redeclarado ou reatribuído.
• Tem escopo de bloco.
• Deve ser inicializado no momento da declaração.

Exemplo:

const pi = 3.14;
console.log(pi); // 3.14

// pi = 3.1415; // Error: cannot reassign

if (true) {
  const gravity = 9.8;
  console.log(gravity); // 9.8
}
// console.log(gravity); // Error: out of scope

Notas:

• Você não pode reatribuir a variável em si, mas se for um objeto ou array, ainda pode modificar suas propriedades/elementos.

Exemplo:

const user = { name: "Alice" };
user.name = "Bob"; // property mutation is allowed
console.log(user.name); // Bob

3.2 Tabela de Comparação: var vs let vs const

3.3 Como Escolher Corretamente

1. Use const por padrão

• Se você não precisar de reatribuição, use const para aumentar a segurança.

1. Use let apenas quando a reatribuição for necessária

• Use-o para contadores de loop ou variáveis de estado que devem mudar ao longo do tempo.

1. Evite var

• Você pode vê-lo em código legado, mas não é recomendado para bases de código modernas.

3.4 Resumo Rápido de Uso

const PI = 3.14;           // constant
let count = 0;             // value that changes
for (let i = 0; i < 5; i++) {
  count += i;
}
console.log(count);        // display total

let userName = "Alice";
console.log(userName); // "Alice"
userName = "Bob";
console.log(userName); // "Bob"

4. Escopo e Tempo de Vida das Variáveis

Em JavaScript, entender o escopo de uma variável (onde ela pode ser acessada) e tempo de vida (por quanto tempo ela existe na memória) é extremamente importante. Ao dominar esses conceitos, você pode evitar bugs inesperados e escrever código mais eficiente.

4.1 O Que É Escopo?

Escopo refere‑se ao intervalo no qual uma variável pode ser acessada. Em JavaScript, o escopo difere dependendo de como a variável é declarada.

1. Escopo Global

Escopo global significa um escopo que pode ser acessado de qualquer lugar no programa.

Exemplo:

var globalVar = "Global variable";

function showGlobalVar() {
  console.log(globalVar); // Accessible
}

showGlobalVar();
console.log(globalVar); // Accessible

Observações:
Como variáveis globais podem ser acessadas de qualquer lugar, elas são propensas a colisões de nomes e sobrescritas não intencionais. Você deve mantê‑las ao mínimo.

2. Escopo Local

Escopo local refere‑se a um escopo que é válido apenas dentro de uma função ou bloco específico.

Exemplo:

function localExample() {
  let localVar = "Local variable";
  console.log(localVar); // Accessible
}

// console.log(localVar); // Error: out of scope

Neste exemplo, a variável localVar só pode ser acessada dentro da função e não pode ser referenciada fora dela.

3. Escopo de Bloco

Variáveis declaradas com let e const são válidas apenas dentro de um bloco (a seção envolvida por {}).

Exemplo:

{
  let blockVar = "Block scope";
  console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error: out of scope

Importante:
Se você declarar uma variável usando var, o escopo de bloco é ignorado, portanto tenha cuidado.

{
  var blockVar = "Block scope ignored";
}
console.log(blockVar); // Accessible (not recommended)

4.2 O Que É Tempo de Vida?

Tempo de vida refere‑se a quanto tempo uma variável continua a existir na memória.

1. Tempo de vida das variáveis globais

• Elas existem desde o início do programa até que ele termine.

1. Tempo de vida das variáveis locais

• Elas existem apenas desde o momento em que uma função é chamada até que a função termine.

Exemplo:

function showMessage() {
  let message = "Temporary message";
  console.log(message);
}

showMessage();
// console.log(message); // Error: message is not accessible after the function ends

Neste exemplo, quando a função termina, a variável message é destruída e não pode mais ser referenciada.

4.3 O Que É a Cadeia de Escopo?

Quando escopos aninhados são formados (como funções aninhadas), o JavaScript procura variáveis usando um mecanismo chamado cadeia de escopo.

Exemplo:

let outerVar = "Outside";

function outerFunction() {
  let innerVar = "Inside";

  function innerFunction() {
    console.log(outerVar); // Accesses outer scope
    console.log(innerVar); // Accesses inner scope
  }

  innerFunction();
}

outerFunction();

Neste exemplo, innerFunction procura variáveis primeiro em seu próprio escopo, depois no escopo pai e, por fim, no escopo global, se necessário. Esse processo de busca é a cadeia de escopo.

4.4 Entendendo Closures

Um closure é um recurso onde uma função interna continua a manter acesso a variáveis de uma função externa.

Exemplo:

function createCounter() {
  let count = 0; // Outer variable

  return function () {
    count++; // Accesses outer variable
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

Neste exemplo, a função interna continua acessando a variável externa count, permitindo que ela preserve o estado. Closures são úteis para contadores, gerenciamento de configuração e muito mais.

4.5 Pontos Principais para Usar Escopo e Tempo de Vida de Forma Eficaz

1. Mantenha variáveis globais ao mínimo

• Para evitar colisões de nomes e sobrescritas acidentais, evite usar variáveis globais desnecessariamente.

1. Faça bom uso do escopo local

• Gerenciar variáveis dentro de funções ou blocos ajuda a prevenir bugs inesperados.

1. Prefira const

• Se você não precisar reatribuir, use const para melhorar a segurança.

1. Entenda quando closures são úteis

• Use closures proativamente quando precisar de gerenciamento de estado ou encapsulamento de funções.

5. Inicialização de Variáveis e Tratamento de Undefined

Em JavaScript, inicializar variáveis corretamente é importante. Variáveis não inicializadas e valores undefined podem levar a erros inesperados, portanto você precisa entender seu comportamento.

5.1 O que é Inicialização de Variáveis?

Inicialização significa atribuir o primeiro valor a uma variável após declará‑la.

Exemplo:

let count = 0;  // initialized
let message;    // uninitialized

Neste exemplo, count é inicializado com segurança para 0. Enquanto isso, message não tem nenhum valor atribuído, o que pode causar comportamento inesperado mais tarde.

5.2 Trabalhando com Undefined

1. O que é undefined?

undefined é um valor especial atribuído automaticamente nos seguintes casos:

• Variáveis não inicializadas
• Propriedades de objeto ou elementos de array inexistentes
• Funções que não retornam um valor

Exemplo:

let value; // uninitialized variable
console.log(value); // undefined

let obj = {};
console.log(obj.property); // undefined (property does not exist)

function noReturn() {}
console.log(noReturn()); // undefined (no return value)

Observações:

• Como undefined costuma ocorrer de forma não intencional, você precisa tratá‑lo adequadamente no seu código.

2. Como Verificar se é undefined

Aqui estão maneiras seguras de verificar se uma variável ou propriedade é undefined.

Exemplo:

let data;

// Method 1: typeof operator
if (typeof data === "undefined") {
  console.log("The variable is undefined");
}

// Method 2: strict comparison
if (data === undefined) {
  console.log("The variable is undefined");
}

Usar typeof é mais seguro porque não lançará um erro mesmo se a variável nunca foi declarada.

5.3 Trabalhando com null

1. O que é null?

null representa um valor “intencionalmente vazio”. Ao contrário de undefined, ele é definido manualmente pelo desenvolvedor.

Exemplo:

let value = null;
console.log(value); // null

2. Diferenças entre undefined e null

Exemplo:

console.log(undefined == null);  // true
console.log(undefined === null); // false

Observações:

• Use null para indicar explicitamente um “valor vazio”.
• Distinguí‑lo de undefined esclarece sua intenção no código.

5.4 Boas Práticas para Inicialização

1. Sempre inicialize

Atribua um valor no momento da declaração para evitar estados undefined.

Exemplo:

let count = 0;     // initialized
let message = "";  // initialized with an empty string

2. Use null para tornar a intenção explícita

Se os dados ainda não estiverem determinados, inicialize com null para indicar que você pretende defini‑los mais tarde.

Exemplo:

let result = null; // will be assigned later

3. Verifique se os valores estão inicializados

Verifique se os argumentos de funções ou valores de retorno são undefined.

Exemplo:

function greet(name) {
  if (name === undefined || name === null) {
    console.log("No name provided");
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greet();        // No name provided
greet("Taro");  // Hello, Taro!

5.5 Erros Comuns e Como Corrigi‑los

1. ReferenceError

Causa: Acessar uma variável que nunca foi declarada.
Exemplo:

console.log(name); // Error: name is not defined

Correção:
Declare e inicialize a variável antes de usá‑la.

2. TypeError

Causa: Tentar acessar uma propriedade em null ou undefined.
Exemplo:

let obj = null;
console.log(obj.property); // Error: cannot read properties

Correção:
Verifique o valor antes.

if (obj !== null && obj !== undefined) {
  console.log(obj.property);
}

5.6 Resumo

Inicialização de variáveis e o tratamento de valores undefined são habilidades fundamentais em JavaScript. Ao inicializar corretamente e realizar verificações seguras, você pode prevenir erros inesperados.

6. Regras de Nomeação de Variáveis e Boas Práticas

Em JavaScript, a forma como você nomeia variáveis tem um impacto significativo na legibilidade e na manutenção do código. Ao seguir convenções de nomenclatura adequadas, a intenção do seu código fica mais clara e os erros são mais fáceis de evitar. Esta seção explica as regras de nomenclatura de variáveis e as melhores práticas em detalhes.

6.1 Regras Básicas para Nomes de Variáveis

Em JavaScript, os nomes de variáveis devem seguir estas regras.

1. Caracteres Permitidos

• Letras do alfabeto (a–z, A–Z)
• Números (0–9)
• Underscore (_)
• Cifrão ($)

2. Padrões Não Permitidos

• Nomes de variáveis não podem começar com um número. Exemplo:

  let 1name = "Error"; // Error
  let name1 = "Correct";
  

• Palavras‑chave reservadas do JavaScript não podem ser usadas (por exemplo, let, const, class). Exemplo:

  let const = "Error"; // Error
  let value = "Correct";
  

• Espaços e caracteres especiais não são permitidos. Exemplo:

  let user name = "Error"; // Error
  let userName = "Correct";
  

6.2 Estilos de Nomenclatura Comuns

Existem vários estilos de nomenclatura amplamente usados em JavaScript.

1. camelCase (Recomendado)

A primeira palavra começa com letra minúscula e as palavras subsequentes começam com letra maiúscula.

Exemplo:

let userName = "Taro";      // Recommended
let totalAmount = 500;     // Recommended

2. snake_case (Uso Limitado)

As palavras são separadas por underscores (_). Esse estilo costuma ser usado para constantes ou em código relacionado a bancos de dados.

Exemplo:

let user_name = "Taro"; // Allowed but not common in JavaScript

3. PascalCase (Para Classes e Construtores)

Cada palavra começa com letra maiúscula. É comumente usado para nomes de classes e funções construtoras.

Exemplo:

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

4. UPPER_SNAKE_CASE para Constantes

Constantes são tipicamente escritas em letras maiúsculas com underscores.

Exemplo:

const MAX_VALUE = 100;
const DEFAULT_TIMEOUT = 5000;

6.3 Melhores Práticas

1. Use Nomes Significativos

Os nomes das variáveis devem descrever claramente seu propósito.

Exemplo ruim:

let x = 10; // Meaning unclear

Exemplo bom:

let itemCount = 10; // Clearly represents the number of items

2. Evite Abreviações Excessivas

Abreviações exageradas reduzem a legibilidade.

Exemplo ruim:

let nm = "Taro"; // Unclear

Exemplo bom:

let userName = "Taro"; // Clear intent

3. Mantenha a Consistência

Use a mesma convenção de nomenclatura em todo o seu código.

Exemplo ruim:

let user_name = "Taro"; // snake_case
let userAge = 25;       // camelCase (inconsistent)

Exemplo bom:

let userName = "Taro";
let userAge = 25; // Consistent camelCase

4. Use Nomes Lógicos para Flags Booleanas

Variáveis booleanas devem descrever uma condição ou estado.

Exemplo ruim:

let flag = true; // Ambiguous

Exemplo bom:

let isLoggedIn = true; // Clearly represents state

5. Esclareça Números e Unidades

Quando as variáveis representam valores numéricos ou unidades, torne isso explícito.

Exemplo ruim:

let size = 10; // Unit unclear

Exemplo bom:

let fontSizePx = 10; // Font size in pixels

6.4 Diretrizes de Nomenclatura e Observações

1. Use Inglês – A programação utiliza o inglês como idioma padrão. Evite usar nomes de variáveis em japonês ou romanizados.

Exemplo ruim:

let namae = "Taro"; // Avoid romanized Japanese

Exemplo bom:

let userName = "Taro"; // Use English

2. Use prefixos e sufixos quando úteis – Adicionar prefixos ou sufixos pode esclarecer o papel de uma variável.

Exemplo:

let btnSubmit = document.getElementById("submit"); // Button element
let arrUsers = ["Taro", "Hanako"];                 // Array

7. Erros Comuns e Como Corrigi‑los

Em JavaScript, erros relacionados à declaração e ao uso de variáveis ocorrem com frequência. Esses erros podem interromper a execução do código ou causar comportamentos inesperados. Esta seção explica erros comuns e como tratá‑los.

7.1 ReferenceError

Causa

Um ReferenceError ocorre quando você tenta acessar uma variável que não existe ou que está fora do seu escopo.

Exemplo: Acessando uma variável não declarada

console.log(value); // Error: value is not defined

Como Corrigir

1. Declare as variáveis antes de usá‑las.

   let value = 10;
   console.log(value); // 10
   

2. Verifique o escopo da variável.

   function test() {
     let localVar = "Local variable";
   }
   // console.log(localVar); // Error: out of scope
   

7.2 TypeError

Causa

Um TypeError ocorre quando um valor não é do tipo esperado.

Exemplo: Acessando uma propriedade de undefined

let obj;
console.log(obj.property); // Error: Cannot read properties of undefined

Como Corrigir

1. Verifique a inicialização e os tipos de dados antecipadamente.

   let obj = {};
   console.log(obj.property); // undefined (no error)
   

2. Use o operador de encadeamento opcional (?.).

   let obj;
   console.log(obj?.property); // undefined (no error)
   

7.3 SyntaxError

Causa

Um SyntaxError ocorre quando há um erro gramatical no código.

Exemplo: Ponto e vírgula ausente

let x = 10
let y = 20;

Como Corrigir

1. Use um editor de código ou ferramentas de lint (por exemplo, ESLint) para detectar problemas de sintaxe.
2. Execute seu código e verifique as mensagens de erro nas ferramentas de desenvolvedor do navegador ou no Node.js.

7.4 Uncaught Error

Causa

Um Uncaught Error aparece quando uma exceção é lançada sem ser tratada por try...catch.

Exemplo:

throw new Error("Something went wrong!");

Como Corrigir

1. Adicione tratamento de exceções.

   try {
     throw new Error("Error occurred!");
   } catch (error) {
     console.log(error.message); // Error occurred!
   }
   

2. Registre as mensagens de erro adequadamente para facilitar a depuração.

7.5 RangeError

Causa

Um RangeError ocorre quando um valor está fora do intervalo permitido.

Exemplo 1: Índice de array fora do intervalo

let arr = [1, 2, 3];
console.log(arr[5]); // undefined (not an error, but unintended)

Exemplo 2: Comprimento de array inválido

new Array(-1); // Error: Invalid array length

Como Corrigir

1. Verifique os índices antes de acessar arrays.

   let arr = [1, 2, 3];
   if (arr[5] !== undefined) {
     console.log(arr[5]);
   } else {
     console.log("Out of range");
   }
   

2. Controle as condições de loops e os comprimentos de arrays corretamente.

7.6 Outros Erros Comuns

1. NaN

Causa: Ocorre quando uma operação numérica resulta em “não‑número”.
Exemplo:

let result = parseInt("abc"); // NaN

Como Corrigir

• Use isNaN() para verificar.

  if (isNaN(result)) {
    console.log("Invalid number");
  }
  

2. Infinity

Causa: Ocorre ao dividir por zero ou ao realizar cálculos extremamente grandes.
Exemplo:

let value = 1 / 0; // Infinity

Como Corrigir

• Valide os valores antes de executar cálculos.

  let value = 10;
  if (value !== 0) {
    console.log(100 / value);
  } else {
    console.log("Cannot divide by zero");
  }
  

7.7 Resumo

Erros são inevitáveis no desenvolvimento em JavaScript, mas ao entender suas causas e aplicar técnicas adequadas de tratamento, você pode manter seus programas estáveis. Antecipar áreas propensas a erros e implementar o tratamento adequado é essencial para um código confiável.

8. Exemplos Práticos: Programas que Usam Variáveis em JavaScript

Nesta seção, aplicamos o que aprendemos sobre variáveis em JavaScript construindo exemplos de programas concretos. Vamos percorrê‑los passo a passo, de casos simples a outros um pouco mais avançados.

8.1 Exemplo 1: Um Aplicativo de Cálculo

Problema:

Crie um programa que armazene o preço e a quantidade de um produto em variáveis, e então calcule e exiba o custo total.

Exemplo de Código:

const pricePerItem = 500;        // price per item (constant)
let quantity = 3;               // quantity (variable)
let totalPrice = pricePerItem * quantity; // calculate total

console.log(`The total price is ${totalPrice} yen.`);

Explicação:

1. A constante pricePerItem representa o preço do item, que não muda.
2. A variável quantity armazena o número de itens e pode ser atualizada.
3. O resultado do cálculo é armazenado em totalPrice e exibido usando um template literal.

8.2 Exemplo 2: Cálculo de Desconto com Lógica Condicional

Problema:

Crie um programa que aplique um desconto com base no valor total da compra.

Exemplo de Código:

let totalAmount = 1200; // total purchase amount
let discount = 0;       // discount rate (initialized)

if (totalAmount >= 1000) {
  discount = 0.1; // 10% discount
} else if (totalAmount >= 500) {
  discount = 0.05; // 5% discount
}

let discountedAmount = totalAmount - totalAmount * discount;
console.log(`The discounted price is ${discountedAmount} yen.`);

Explicação:

1. Inicializar discount evita erros mesmo que nenhuma condição corresponda.
2. A taxa de desconto é determinada usando instruções condicionais.
3. Usar variáveis facilita a modificação de condições ou valores.

8.3 Exemplo 3: Gerenciamento de Dados com Arrays e Loops

Problema:

Gerencie uma lista de produtos e seus preços usando arrays, e então calcule o custo total.

Exemplo de Código:

const items = ["Apple", "Banana", "Orange"]; // item names
const prices = [100, 200, 150];              // prices
let totalCost = 0;                           // total cost

for (let i = 0; i < items.length; i++) {
  console.log(`${items[i]}: ${prices[i]} yen`);
  totalCost += prices[i];
}

console.log(`Total cost: ${totalCost} yen`);

Explicação:

1. Arrays permitem gerenciar múltiplos pontos de dados relacionados de forma eficiente.
2. Um loop processa cada item sem duplicar código.
3. A variável totalCost acumula a soma.

8.4 Exemplo 4: Cálculos Reutilizáveis com Funções

Problema:

Crie uma função reutilizável para calcular imposto.

Exemplo de Código:

function calculateTax(price, taxRate = 0.1) {
  return price + price * taxRate;
}

let itemPrice = 1000;                 // item price
let finalPrice = calculateTax(itemPrice); // price including tax
console.log(`Price with tax: ${finalPrice} yen`);

Explicação:

1. A função calculateTax retorna um preço com imposto incluído.
2. Um parâmetro padrão permite que a função funcione sem especificar a taxa de imposto.
3. Funções reutilizáveis melhoram a manutenção e a eficiência.

8.5 Exemplo 5: Manipulação de Entrada do Usuário

Problema:

Crie um programa que solicite ao usuário seu nome e idade, e então determine se ele é adulto.

Exemplo de Código:

let userName = prompt("Please enter your name:");
let age = parseInt(prompt("Please enter your age:"), 10);

if (age >= 18) {
  console.log(`${userName} is an adult.`);
} else {
  console.log(`${userName} is a minor.`);
}

Explicação:

1. prompt é usado para coletar a entrada do usuário.
2. parseInt converte a entrada de string em um número.
3. Nomes de variáveis claros tornam o código mais fácil de entender.

8.6 Resumo

Nesta seção, exploramos exemplos práticos usando variáveis JavaScript.

Principais aprendizados:

1. Aplicativos de cálculo: Implementar aritmética básica e gerenciamento de variáveis.
2. Descontos condicionais: Alterar dinamicamente valores com base em condições.
3. Arrays e loops: Gerenciar e processar múltiplos pontos de dados de forma eficiente.
4. Funções: Melhorar reutilização e manutenção.
5. Entrada do usuário: Construir programas interativos usando variáveis.

9. FAQ (Perguntas Frequentes)

Esta seção responde a perguntas comuns sobre variáveis em JavaScript, abordando armadilhas para iniciantes e questões mais avançadas.

Q1: Qual devo usar: var, let ou const?

A:

Na maioria dos casos, use const por padrão.

• Ela impede reatribuição e redeclaração, tornando o código mais seguro.
• Expressa claramente a intenção de que o valor não deve mudar.

Use let somente quando a reatribuição for necessária.

Evite var no JavaScript moderno porque ignora o escopo de bloco e pode causar bugs inesperados.

Q2: Preciso declarar tipos de variável no JavaScript?

A:

Não. JavaScript é uma linguagem de tipagem dinâmica, portanto os tipos de variável são determinados automaticamente pelos valores atribuídos.

Exemplo:

let value = 10;     // number
value = "string";  // string (no error)

Entretanto, a tipagem dinâmica pode gerar bugs indesejados, então tenha cuidado. Usar TypeScript pode melhorar a segurança de tipos.

Q3: Posso modificar propriedades de objeto declaradas com const?

A:

Sim. const impede a reatribuição da própria variável, mas as propriedades do objeto ainda podem ser modificadas.

Exemplo:

const user = { name: "Alice" };
user.name = "Bob"; // property update allowed
console.log(user);

// user = {}; // Error: reassignment not allowed

Q4: Qual a diferença entre undefined e null?

A:

• undefined: Uma variável foi declarada, mas não recebeu nenhum valor.
• null: Um valor “vazio” atribuído explicitamente.

Exemplo:

let a;        // undefined
let b = null; // explicitly empty

Q5: Por que variáveis globais devem ser evitadas?

A:

Variáveis globais podem causar vários problemas:

1. Colisões de nomes: Maior risco de nomes conflitantes.
2. Manutenibilidade reduzida: Mais difícil rastrear onde os valores são alterados.
3. Dificuldade de depuração: Valores podem ser sobrescritos inesperadamente.

Solução:
Se necessário, agrupe variáveis globais em um objeto de namespace.

Exemplo:

const App = {
  userName: "Alice",
  userAge: 25
};

console.log(App.userName);

Q6: Que convenções de nomenclatura devo usar?

A:

Convensões recomendadas incluem:

1. camelCase: Para variáveis e funções.

   let userName = "Alice";
   

2. PascalCase: Para classes e construtores.

   class UserProfile {}
   

3. UPPER_SNAKE_CASE: Para constantes.

   const MAX_COUNT = 100;
   

Q7: O que é um closure?

A:

Um closure é um recurso onde uma função mantém acesso a variáveis do seu escopo externo.

Exemplo:

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Closures são úteis para gerenciamento de estado e encapsulamento.

10. Conclusão

Neste artigo, abordamos variáveis em JavaScript de forma abrangente, desde conceitos básicos até usos avançados. Variáveis são fundamentais para gerenciar dados e escrever programas flexíveis e eficientes.

10.1 Resumo dos Pontos Principais

1. Conceitos Básicos de Variáveis

• Variáveis armazenam temporariamente dados para reutilização.
• A tipagem dinâmica oferece flexibilidade, mas requer gerenciamento cuidadoso.

2. Métodos de Declaração

• var: Escopo de função, redeclarável, mas não recomendado.
• let: Escopo de bloco, reatribuível.
• const: Escopo de bloco, a escolha mais segura na maioria dos casos.

3. Escopo e Tempo de Vida

• O escopo define onde as variáveis são acessíveis.
• Minimize variáveis globais e aproveite o escopo local/de bloco.

4. Inicialização e Tratamento de Undefined

• undefined: Atribuído automaticamente quando nenhum valor é definido.
• null: Representa explicitamente um valor vazio.

5. Nomenclatura e Boas Práticas

• Use nomes significativos e consistentes (prefira camelCase).
• Use UPPER_SNAKE_CASE para constantes.

6. Erros Comuns

• Entender erros comuns (ReferenceError, TypeError, etc.) melhora a eficiência da depuração.
• Tratamento adequado de erros aumenta a estabilidade do programa.

7. Exemplos Práticos de Código

• Exemplos práticos demonstraram cálculos, condicionais, arrays, funções e entrada do usuário.

10.2 Próximos Passos

1. Avance para Tópicos Avançados

• Funções e métodos: Melhoram a modularidade e a reutilização.
• Objetos e classes: Trabalhe com estruturas de dados complexas.
• Recursos modernos ES6+: Literais de template, funções arrow, desestruturação e mais.

2. Pratique com Projetos Reais

Aplicar variáveis em projetos reais aprofundará sua compreensão.

Exemplos:

• Crie um aplicativo ToDo simples.
• Crie uma calculadora ou ferramenta de calendário.
• Implemente validação de formulário.

10.3 Considerações Finais

Variáveis JavaScript são um bloco de construção fundamental da programação. Ao declará‑las e gerenciá‑las corretamente, você pode escrever código seguro, eficiente e de fácil manutenção.

Com o conhecimento estruturado adquirido neste artigo — desde o básico até o uso avançado — você está bem preparado para continuar praticando e consolidando suas habilidades em JavaScript por meio de codificação prática.