Anúncio

Entendendo Variáveis no JavaScript

Olá HaWkers, esse é o terceiro artigo da nossa série de artigos que vão cobrir o aprofundamento do nosso Roadmap JavaScript - TUDO o que você precisa Aprender 🦅. Se você não sabe do que eu estou falando, clique no link anterior.

Bom, vamos começar!

Dentro do universo da programação, as variáveis têm um papel fundamental. No JavaScript, esse papel é ampliado pela sua dinamicidade e versatilidade. Este artigo tem como objetivo elucidar o que são variáveis, como declará-las, e como elas se comportam dentro do ambiente JavaScript.

Tipos de Dados em Variáveis

No JavaScript, variáveis podem armazenar diferentes tipos de dados. Enquanto algumas linguagens exigem que você declare explicitamente o tipo de dado de uma variável, o JavaScript é dinamicamente tipado. Isso significa que o tipo de dado de uma variável pode mudar durante a execução do programa. Alguns dos tipos mais comuns incluem:

Number: Para números, seja inteiro ou flutuante.
String: Para sequências de caracteres.
Boolean: Para valores verdadeiro ou falso.
Object: Para coleções de dados ou instâncias de construtores.
Undefined: Para variáveis não inicializadas.
Null: Representa a ausência de valor.

Variáveis e Tipos de Dados: Um Olhar Mais Profundo

No JavaScript, o tipo de uma variável é determinado pelo seu valor:

let x = 10; // Numberlet y = 'HaWkers!'; // Stringlet z = true; // Booleanconsole.log(typeof x); // Retorna "number"console.log(typeof y); // Retorna "string"console.log(typeof z); // Retorna "boolean"

Isso nos permite usar a mesma variável para diferentes tipos de dados:

let data = 2023;console.log(data); // 2023data = 'JavaScript';console.log(data); // JavaScript

O que são variáveis?

Variáveis, em termos simples, são "caixas" onde armazenamos valores. Imagine que você possui uma série de gavetas, e em cada uma delas, você guarda um objeto diferente. As variáveis funcionam de maneira similar, armazenando dados que podem ser números, strings, objetos, entre outros.

Declarando variáveis

No JavaScript, temos várias formas de declarar variáveis, sendo as mais comuns através das palavras-chave var, let, const. Cada uma delas tem suas peculiaridades:

var: Era a forma tradicional de declarar variáveis antes do ES6. As variáveis declaradas com var são, por padrão, elevadas (hoisting) e têm escopo de função.
let: Introduzido com o ES6, permite declarar variáveis com escopo de bloco, evitando muitos problemas relacionados ao var.
const: Também do ES6, é usado para declarar constantes, ou seja, valores que não podem ser reatribuídos após sua declaração.

Var, Let ou Const? Uma Questão de Imutabilidade

Ao escolher entre var, let e const, a imutabilidade é uma consideração importante. Quando você declara uma variável com const, você não está apenas dizendo que a variável não pode ser reatribuída; você está fazendo uma afirmação sobre a imutabilidade:

const meuArray = [1, 2, 3];meuArray.push(4);// Isso é permitido!meuArray = [1, 2, 3, 4];// Isso causará um erro!

Embora possamos modificar o array declarado como constante, não podemos reatribuir um novo valor a ele.

Inicialização vs. Declaração

No JavaScript, é possível declarar uma variável sem inicializá-la:

let minhaVariavel;console.log(minhaVariavel);// Retorna undefined

Mas, podemos atribuir um valor a ela mais tarde:

minhaVariavel = 'Agora eu tenho um valor!';console.log(minhaVariavel);// Retorna "Agora eu tenho um valor!"

Hoisting

Hoisting é um comportamento peculiar do JavaScript que "move" declarações de variáveis para o topo do seu escopo. Na prática, significa que uma variável pode ser utilizada antes de ser declarada. No entanto, é uma prática recomendada declarar variáveis no início de seu escopo para evitar confusões.

Regras de nomenclatura

Embora o JavaScript seja uma linguagem flexível, existem algumas regras para nomear variáveis:

Os nomes podem conter letras, números, sublinhados (_) e cifrões ($), mas não podem começar com um número.
Não é permitido usar palavras-chave da linguagem como nome de variável.
Nomes de variáveis são sensíveis a maiúsculas e minúsculas, ou seja, Nome e nome são diferentes.
É recomendado usar a convenção camelCase para nomes de variáveis com mais de uma palavra.

Variáveis Temporais com Template Strings

Em vez de concatenar variáveis em strings usando o sinal de adição (+), o JavaScript moderno oferece Template Strings para embutir variáveis dentro de strings:

let nome = 'HaWker';console.log(`Olá, ${nome}!`);

Isso facilita a leitura e formatação de textos que incluem variáveis.

Operações com Variáveis

Você não está limitado a apenas armazenar valores em variáveis. Você também pode executar operações:

let a = 5;let b = 10;let soma = a + b;console.log(`A soma de ${a} e ${b} é ${soma}.`);// Retorna "A soma de 5 e 10 é 15."

Escopo de variáveis

O escopo de uma variável refere-se à parte do código onde ela pode ser acessada. No JavaScript, temos basicamente três escopos: global, de função e de bloco.

Escopo Global (global scope)

Variáveis declaradas fora de qualquer função ou bloco pertencem ao escopo global. Elas podem ser acessadas de qualquer lugar do código, o que, por vezes, pode causar conflitos e erros inesperados.

Cuidados com Variáveis Globais

Variáveis globais podem ser úteis, mas também são arriscadas. Elas podem ser acessadas ou modificadas de qualquer lugar no código, o que pode levar a comportamentos inesperados:

var globalVar = 'sou global!';function modificar() {  globalVar = 'fui modificado!';}modificar();console.log(globalVar);// Isso imprimirá: fui modificado!

Por isso, é aconselhável limitar o uso de variáveis globais e preferir escopos mais restritos sempre que possível.

Escopo de função (function scope)

Variáveis declaradas dentro de uma função usando var têm escopo de função. Isso significa que elas só podem ser acessadas dentro daquela função.

Diferença

A principal diferença entre o escopo global e de função é a acessibilidade. Enquanto variáveis de escopo global são acessíveis em todo o código, as de escopo de função estão restritas à função onde foram declaradas. Com o advento do ES6 e a introdução do let, também temos o escopo de bloco, que limita o acesso a um determinado bloco de código, como loops ou condicionais.

Função vs. Bloco: Visualizando Escopos

O JavaScript ES6 introduziu let e const, que têm escopo de bloco. Vejamos a diferença entre escopo de função e escopo de bloco:

function testeFuncao() {  var escopoFuncao = 'Estou na função!';  if (true) {    let escopoBloco = 'Estou no bloco!';    console.log(escopoFuncao);    // Retorna "Estou na função!"    console.log(escopoBloco);    // Retorna "Estou no bloco!"  }  console.log(escopoFuncao);  // Retorna "Estou na função!"  // console.log(escopoBloco);  // Isso causaria um erro}testeFuncao();

Conclusão

Pois bem HaWkers, como vocês podem perceber, entender variáveis é crucial para dominar o JavaScript ou qualquer outra linguagem de programação. Ao compreender as nuances de declaração, hoisting e escopo, você estará mais preparado para escrever códigos limpos, eficientes e sem erros.

Voltar para o Roadmap JavaScript - TUDO o que você precisa Aprender 🦅.