Fundamentos de JavaScript: Variáveis, Tipos e Operadores

Seja bem-vindo(a) a este estudo sobre variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo., tipos de dados e operadores em JavaScript! Aqui, vamos explorar conceitos fundamentais que servem de base para a maior parte do desenvolvimento em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. A ideia é apresentar tudo de forma clara, passo a passo, para que você entenda não apenas o que são esses elementos, mas também como usá-los em seu dia a dia.

1. O que é uma variável?🔗

Em JavaScript, uma variável é um espaço na memória onde você pode armazenar valores que poderão ser reutilizados ou modificados ao longo do seu código. Pense nela como uma “caixa” onde você guarda algo importante!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. e acessa sempre que precisar.

1.1 Declaração de variáveis: var, let e const

• var: O modo mais antigo de declarar variáveis em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Variáveis declaradas com var têm escopo de funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. (ou global se declaradas fora de funções) e podem causar comportamentos inesperados em projetos grandes.
• let: Introduzido no ECMAScript 2015 (ES6), tem escopo de blocoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas., o que tende a evitar problemas relacionados ao var. É a forma mais comum de declaração quando se espera que o valor da variávelPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. mude.
• const: Também introduzido no ES6, serve para valores que não mudam após a atribuição inicial. Se você criar uma variávelPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. com const, não poderá reatribuir outro valor a ela.

Exemplo simples de declaração e uso:

let mensagem = "Olá, mundo!";
const PI = 3.14159;
console.log(mensagem); // Exibe: Olá, mundo!
console.log(PI);       // Exibe: 3.14159

Observe que mensagem foi declarada com let e pode mudar no futuro; já PI foi declarada com const e não pode ser reatribuída.

2. Tipos de Dados em JavaScript🔗

JavaScript possui vários tipos de dados nativos. É importante!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. entender cada um para utilizar corretamente em seu código. Aqui estão os principais:

1. Number: Utilizado para representar valores numéricos, sejam inteiros ou decimais.

2. String: Usado para representar texto. Sempre escrito entre aspas simples, aspas duplas ou crases (no caso de templateCriando e Gerenciando Templates DinâmicosAprenda a utilizar templates dinâmicos para criar interfaces web eficientes. Descubra técnicas com JavaScript puro integrando boas práticas e segurança. strings).

3. Boolean: Pode ter apenas dois valores: true ou false. Indicado para expressar condições ou estados lógicos.

4. Null: Indica a ausência proposital de valor.

5. Undefined: Significa que uma variávelPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. não teve um valor atribuído.

6. Symbol: Cria valores únicos que não podem ser reproduzidos. Geralmente, usados em situações específicas (como chaves únicas em objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web.).

7. Object: É um tipo complexo capaz de armazenar múltiplos valores em propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. (não entraremos em detalhes de arrays e objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. profundamente aqui, pois este assunto será estendido em outro momento).

Exemplo rápido:

let idade = 25;            // Number
let nome = "Maria";        // String
let estaAprovado = true;   // Boolean
let endereco = null;       // Null
let telefone;              // Undefined (não atribuído)
let simboloUnico = Symbol("id"); // Symbol

O JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. é uma linguagem de tipagem dinâmica, ou seja, o tipo da variávelPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. é determinado pelo valor que ela carrega em cada momento e pode mudar ao longo do tempo caso você reatribua um valor de outro tipo.

3. Conversão de Tipos🔗

Muitas vezes, você precisará converter um tipo de dado para outro. Existem conversões explícitas (forçadas pelo programador) e implícitas (efetuadas automaticamente pelo JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.). Alguns exemplos comuns:

• Conversão de string para número:

let valorEmTexto = "50";
let valorComoNumero = Number(valorEmTexto);
console.log(valorComoNumero);       // 50 (typeof number)

• Conversão de número para string:

let valorNumerico = 20;
let valorComoTexto = String(valorNumerico);
console.log(valorComoTexto);        // "20" (typeof string)

• Conversão booleana:

console.log(Boolean(0));       // false
console.log(Boolean("texto")); // true

4. Operadores em JavaScript🔗

Operadores permitem manipular valores e expressões. Podemos dividi-los em algumas categorias principais.

4.1 Operadores Aritméticos

Esses operadores envolvem operações matemáticas básicas:

No caso do operador +, além de somar dois números, ele também concatena strings:

let saudacao = "Olá, " + "Mundo!";
console.log(saudacao); // "Olá, Mundo!"

4.2 Operadores de Atribuição

Servem para atribuir valores a variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo.. O mais básico é o = (sinal de igual). Alguns operadores de atribuição combinam operações aritméticas:

Exemplo simples:

let x = 10;
x += 2; // Agora x vale 12
x *= 3; // Agora x vale 36

4.3 Operadores de Comparação

Muito usados para verificar igualdade, diferença ou ordem entre valores.

A diferença entre == e === (assim como != e !==) é fundamental:

• == faz conversão de tipo antes de comparar valores;
• === não faz essa conversão, exigindo que tipo e valor sejam estritamente iguais.

4.4 Operadores Lógicos

Combinam expressões booleanas e retornam verdadeiro (true) ou falso (false):

Exemplo rápido de uso:

let idade = 20;
let temCarteira = true;
let podeDirigir = (idade >= 18) && temCarteira;
console.log(podeDirigir); // true, pois idade >= 18 e temCarteira = true

5. Dicas e Boas Práticas🔗

• Escolha adequada entre let e const: Use const sempre que puder garantir que o valor não vai mudar; caso contrário, opte por let.
• Use sempre === e !== no lugar de == e !=. Isso evita resultados inesperados por conta de conversões de tipo.
• Nomeie variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. de forma clara: Tente ser descritivo. Em vez de x ou a, use nomes como idadeUsuario, precoProduto, etc.
• Mantenha a legibilidade: Códigos com boa formatação e nomes significativos de variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. tornam a manutenção mais fácil.

6. Conclusão🔗

Você acabou de conhecer os pilares básicos para trabalhar com variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo., tipos de dados e operadores em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Esses conceitos serão seus aliados na construção de lógicas e funcionalidades em aplicações de todos os portes.

Não se preocupe se retornar a este estudo diversas vezes! Cada novo exercício ou pequeno projeto que você fizer vai fortalecer o entendimento desses conceitos.

Próximos passos: continue explorando exemplos práticos para fixar os conhecimentos adquiridos. Você poderá ver na prática como combinar variáveis, tipos de dados e operadores para criar soluções cada vez mais interessantes no seu código JavaScript.