5 fundamentos do JavaScript que você precisa conhecer

JavaScript é uma linguagem de programação popular e amplamente utilizada para desenvolvimento de aplicações web, do front-end ao back-end. Se você é um iniciante em programação ou já tem experiência em outras linguagens de programação, é importante conhecer os fundamentos do JavaScript.

Neste artigo, vamos explorar alguns conceitos fundamentais do JavaScript, incluindo variáveis, tipos de dados, funções, estruturas de controle de fluxo e manipulação de DOM.

1. Variáveis

As variáveis são fundamentais para a programação em JavaScript, permitindo armazenar valores e manipulá-los ao longo do código. Em JavaScript, é possível declarar variáveis utilizando as palavras-chave var, let e const.

var minhaVariavel = 10;
let outraVariavel = "Olá, mundo!";
const pais = "Brasil";

A declaração de variáveis utilizando a palavra-chave var era muito comum em versões mais antigas do JavaScript. No entanto, com o lançamento do ES6 (ECMAScript 2015), a declaração de variáveis utilizando let e const se tornou mais comum.

A diferença entre let e var é que a variável declarada com let tem escopo de bloco, enquanto a variável declarada com var tem escopo de função. Isso significa que, se uma variável é declarada com let dentro de um bloco de código, ela só estará disponível dentro desse bloco. Já se a variável for declarada com var, ela estará disponível em toda a função em que foi declarada.

Já a palavra-chave const é utilizada para declarar constantes, ou seja, valores que não podem ser alterados ao longo do código. Quando uma variável é declarada com const, ela deve receber um valor na declaração e esse valor não pode ser alterado posteriormente.

É importante ressaltar que, mesmo utilizando const, valores complexos como arrays e objetos ainda podem ser modificados. Nesse caso, a constante armazena a referência para o objeto, e não o objeto em si. Por exemplo:

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

Nesse exemplo, o valor da constante arr é uma referência para o array [1, 2, 3]. Apesar de ser uma constante, é possível modificar o conteúdo desse array utilizando o método push.

2. Tipos de dados

Os tipos de dados são uma parte fundamental do JavaScript, pois eles permitem que o programador trabalhe com diferentes tipos de informações, como números, textos e valores lógicos.

Em JavaScript, existem seis tipos de dados primitivos: string, number, boolean, null, undefined e symbol. Além desses, há também um tipo de dado complexo, o object, que inclui arrays, funções e outros tipos de dados mais avançados.

• String: é um tipo de dado que representa texto e é delimitado por aspas simples ('') ou duplas (""). Exemplo: let texto = 'Olá, mundo!'
• Number: é um tipo de dado que representa números, incluindo inteiros e números decimais. Exemplo: let numero = 42 ou let numero = 3.14.
• Boolean: é um tipo de dado que representa valores lógicos verdadeiro ou falso. Exemplo: true ou false.
• Null: é um tipo de dado que representa a ausência de valor ou a intencionalidade de deixar um valor vazio. É diferente de undefined.
• Undefined: é um tipo de dado que representa a ausência de um valor definido, ou seja, a falta de valor.
• Symbol: é um tipo de dado que representa um valor único e imutável, geralmente utilizado para identificadores únicos.

Cada tipo de dado tem suas próprias propriedades e métodos. Alguns desses métodos são exclusivos para um determinado tipo de dado. Por exemplo, a propriedade length é exclusiva para strings, enquanto o método toFixed() é exclusivo para números.

3. Funções

As funções são fundamentais no JavaScript e permitem que o desenvolvedor agrupe uma série de instruções para executá-las várias vezes em diferentes partes do código.

Em JavaScript, as funções são objetos que contêm um bloco de código, parâmetros e um valor de retorno. Elas podem ser definidas de várias maneiras, incluindo a declaração de função, expressão de função e arrow function.

A declaração de função é definida com a palavra-chave function, seguida pelo nome da função e seus parâmetros, se houver, e o bloco de código que deve ser executado quando a função é chamada. Por exemplo:

function soma(a, b) {
  return a + b;
}

A expressão de função é definida como uma variável que recebe uma função anônima, que é uma função sem nome. Por exemplo:

const soma = function(a, b) {
  return a + b;
};

A arrow function é uma sintaxe mais curta para a expressão de função e é definida usando uma seta após a lista de parâmetros. Por exemplo:

const soma = (a, b) => a + b;

As funções também podem ser chamadas de forma recursiva, o que significa que uma função pode chamar a si mesma. Além disso, as funções podem retornar outras funções ou receber funções como parâmetros.

As funções podem ser usadas para realizar tarefas simples, como somar dois números, ou tarefas mais complexas, como manipular objetos complexos. É importante saber como criar e usar funções no JavaScript para poder escrever um código mais organizado, limpo e eficiente.

4. Estruturas de controle de fluxo

As estruturas de controle de fluxo permitem que você controle como seu código é executado, com base em condições específicas. Elas são a base para criar algoritmos e lógica de programação. Em JavaScript, as estruturas de controle de fluxo mais comuns incluem "if/else", "switch", "while" e "for".

4.1. if/else

O if/else é uma das estruturas de controle de fluxo mais simples e comuns em JavaScript. Ela permite que você execute um bloco de código se uma determinada condição for verdadeira, ou execute outro bloco de código se a condição for falsa. Aqui está um exemplo:

let x = 10;

if (x > 5) {
  console.log("x é maior do que 5");
} else {
  console.log("x é menor ou igual a 5");
}

Neste exemplo, o bloco de código dentro do if será executado, pois a variável x é maior do que 5.

4.2. switch

O switch é outra estrutura de controle de fluxo que é comumente usada em JavaScript. Ela é semelhante ao if/else, mas é mais útil quando você tem várias condições diferentes para avaliar. Aqui está um exemplo:

let dia = 3;
let diaSemana;

switch (dia) {
  case 1:
    diaSemana = "Domingo";
    break;
  case 2:
    diaSemana = "Segunda";
    break;
  case 3:
    diaSemana = "Terça";
    break;
  case 4:
    diaSemana = "Quarta";
    break;
  case 5:
    diaSemana = "Quinta";
    break;
  case 6:
    diaSemana = "Sexta";
    break;
  case 7:
    diaSemana = "Sábado";
    break;
  default:
    diaSemana = "Dia inválido";
    break;
}

console.log(`Hoje é ${diaSemana}`);

Neste exemplo, o switch avalia o valor da variável dia e executa o bloco de código correspondente. No caso, como dia tem o valor 3, o bloco de código correspondente ao case 3 é executado, e a variável diaSemana é definida como "Terça".

4.3. for

O for é uma estrutura de controle de fluxo que é usada para criar loops em JavaScript. Ele permite que você execute um bloco de código várias vezes, até o momento em que uma determinada condição é atendida. Aqui está um exemplo:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Neste exemplo, o bloco de código dentro do for é executado cinco vezes, com o valor de i aumentando de 0 para 4 a cada iteração.

4.4. while/do-while

O while e do-while são outras estruturas de controle de fluxo que são usadas para criar loops em JavaScript.

O loop while permite executar uma ação repetidamente enquanto a condição especificada for verdadeira. A sintaxe básica é a seguinte:

while (condição) {
  // código a ser executado
}

O código dentro das chaves é executado repetidamente enquanto a condição dentro dos parênteses for verdadeira. Por exemplo, o seguinte código imprime os números de 1 a 5:

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

O loop do-while é uma variante do loop while. A diferença é que o código dentro das chaves é executado pelo menos uma vez, mesmo que a condição seja falsa. A sintaxe básica é a seguinte:

do {
  // código a ser executado
} while (condição);

O código dentro das chaves é executado uma vez, e depois repetidamente enquanto a condição dentro dos parênteses for verdadeira. Por exemplo, o seguinte código imprime os números de 1 a 5 usando o loop do-while:

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);

Este código imprime os números de 1 a 5, assim como o exemplo anterior com o loop while.

Ambos os loops while e do-while podem ser usados para iterar sobre um array ou uma lista de itens. Neste caso, a condição dentro dos parênteses seria verificada em relação ao índice do array, e o código dentro das chaves seria executado para cada item do array.

5. Manipulação de DOM

Manipulação do DOM (Document Object Model) é um dos principais recursos do JavaScript. Ele permite que você altere o conteúdo e a aparência de uma página HTML dinamicamente, ou seja, sem a necessidade de atualizar a página inteira.

O DOM é uma árvore hierárquica de objetos que representa todos os elementos em uma página HTML. Cada elemento é um objeto e tem propriedades, como o conteúdo de texto e atributos, além de métodos que permitem manipular o elemento.

A manipulação do DOM em JavaScript é feita usando métodos nativos do DOM ou bibliotecas de terceiros, como jQuery ou React. Alguns dos métodos mais comuns incluem:

• getElementById(): retorna um elemento com o ID especificado.
• getElementsByClassName(): retorna uma coleção de elementos com a classe especificada.
• getElementsByTagName(): retorna uma coleção de elementos com o nome da tag especificada.
• querySelector(): retorna o primeiro elemento que corresponde ao seletor especificado.
• querySelectorAll(): retorna uma NodeList de todos os elementos que correspondem ao seletor especificado.

Além de recuperar elementos do DOM, você também pode alterá-los. Alguns dos métodos mais comuns incluem:

• innerHTML: permite alterar o conteúdo HTML de um elemento.
• textContent: permite alterar o conteúdo de texto de um elemento.
• setAttribute(): permite adicionar ou alterar um atributo em um elemento.
• removeAttribute(): permite remover um atributo de um elemento.
• appendChild(): permite adicionar um nó filho a um elemento.
• removeChild(): permite remover um nó filho de um elemento.

Outra técnica comum é adicionar eventos a elementos do DOM, como um clique em um botão ou a pressionar uma tecla no teclado. Você pode usar o método addEventListener() para adicionar um evento a um elemento.

Conclusão

Com este artigo, espero ter fornecido uma visão geral abrangente e clara sobre alguns conceitos fundamentais da linguagem, que irão ajudá-lo a entender melhor o que está acontecendo em seus códigos e a criar aplicações mais sofisticadas.

Leia também

• Como aprender JavaScript: Guia completo para iniciantes