Articles
Introdução ao JavaScript
Noções básicas de JavaScript

Noções básicas de JavaScript

Este artigo explica os fundamentos do JavaScript.

YouTube Video

Executando Hello World!

Visão geral do JavaScript

JavaScript é uma das linguagens de programação mais amplamente utilizadas no desenvolvimento web. É usado principalmente para adicionar elementos dinâmicos às páginas da web, permitindo a manipulação da interface do usuário, transmissão de dados e criação de animações. Ele pode operar no lado do cliente (em um navegador) e no lado do servidor usando tecnologias como Node.js. Devido à sua simplicidade e flexibilidade, é fácil para iniciantes aprenderem e amplamente utilizado por desenvolvedores profissionais.

Variáveis no JavaScript

As variáveis no JavaScript são como contêineres usados para armazenar e reutilizar dados. Usando variáveis, você pode manter e manipular valores no seu programa.

Declaração de Variáveis

No JavaScript, existem três palavras-chave para declarar variáveis.

  • var: Um método antigo de declarar variáveis, mas lidar com seu escopo é complexo e requer cautela. É baseado no escopo de função.
1var x = 10;
  • let: Introduzido no ES6, é uma forma de declarar variáveis com escopo de bloco. Pode ser reatribuído, mas não pode ser redeclarado no mesmo escopo.
1let y = 20;
  • const: Usado para declarar variáveis imutáveis (constantes). Possui escopo de bloco e não pode ser reatribuído ou redeclarado após a declaração.
1const z = 30;

Escopo

As variáveis possuem o conceito de escopo.

Escopo Global 

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"
  • As variáveis de escopo global são acessíveis de qualquer lugar. Variáveis declaradas com var possuem escopo global ou de função, mas let e const têm escopo de bloco.

Escopo de Bloco 

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

  • Escopo de bloco: Variáveis declaradas com let ou const são válidas apenas dentro de {} (chaves).

  • Ocorre um erro ao tentar acessar fora de {} (chaves).

Escopo de Função 

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

  • Escopo de função: Variáveis e funções definidas dentro de uma função não podem ser acessadas fora dela. Variáveis declaradas dentro de uma função com var pertencem a este escopo.

  • Neste exemplo, a variável functionVar pode ser acessada de fora das {} (chaves) desde que esteja dentro do escopo da função. Por outro lado, acessar a variável functionScoped de fora do escopo da função resulta em um erro.

Assim, variáveis declaradas com var têm apenas escopo de função e não de bloco, representando o risco de serem usadas em intervalos inesperados. É preferível usar const para variáveis que não mudam e normalmente usar let, evitando o uso de var sempre que possível.

Tipos de Dados

Variáveis em JavaScript podem armazenar valores de diversos tipos de dados. Existem string para manipular texto e number para manipular valores numéricos.

Os principais tipos de dados são os seguintes:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);
  • Tipos Primitivos:
    • number: Manipula valores numéricos (inteiros e números de ponto flutuante).
    • string: Manipula cadeias de caracteres.
    • boolean: Lida com valores booleanos true ou false.
    • null: Representa explicitamente um valor de 'nada'.
    • undefined: Um valor atribuído automaticamente a variáveis que não foram inicializadas.
    • Symbol: Um tipo de dado usado para criar valores únicos.
 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));
  • Tipos de Objeto:
    • Object: Uma estrutura de dados com várias propriedades.
    • Array: Uma lista contendo vários valores.
    • Function: Um objeto de função.

Atribuição e Reatribuição a Variáveis

Variáveis declaradas com let ou var podem ser reatribuídas, mas const não pode ser reatribuída após a declaração.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Elevação de Variáveis (Hoisting)

No JavaScript, existe um fenômeno em que declarações de variáveis são 'elevadas' para o topo de seu escopo. Variáveis declaradas com var são elevadas, mas usar let ou const antes da declaração gera um erro.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Nesse caso, as variáveis declaradas com var são elevadas, e seus valores são exibidos.
1console.log(b); // ReferenceError
2let b = 20;
  • As variáveis declaradas com let não são elevadas, resultando em um erro.

Uso Adequado de Variáveis

Considere os seguintes pontos para o uso adequado de variáveis.

  • Prefira usar const e evite usar var.
  • Siga as convenções de nomenclatura de variáveis.
    • Use camelCase, como userName ou totalPrice.
    • Evite nomes ambíguos como data ou value e use nomes significativos para melhorar a legibilidade.
    • Um nome de variável não pode começar com um número, então nomes como 1variable não são permitidos.
  • O uso excessivo de variáveis globais pode causar ambiguidade de escopo e levar a erros; evite usá-las sempre que possível.

Resumo

  • var: Um antigo método de declaração de variáveis que tem escopo de função.
  • let: Uma variável com escopo de bloco que pode ser reatribuída.
  • const: Uma variável com escopo de bloco que não pode ser reatribuída (constante).
  • É importante usar variáveis de acordo com seus tipos de dados e estar atento ao seu escopo.

O que são caracteres de escape no JavaScript?

Os caracteres de escape são um método usado para representar caracteres com significados especiais dentro de literais de string comuns. No JavaScript, os caracteres de escape são introduzidos com uma barra invertida \ para aplicar efeitos especiais a uma string ou incluir caracteres de controle. Os caracteres de escape são úteis para incluir elementos como quebras de linha, tabulações ou aspas em uma string.

Exemplos de uso de caracteres de escape

Abaixo estão alguns exemplos de códigos utilizando caracteres de escape.

Escapando aspas duplas e simples

Use caracteres de escape para representar aspas duplas ou simples dentro de uma string.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Escapando barras invertidas

Para incluir uma barra invertida em uma string, escape-a com \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Escapando quebras de linha e tabulações

Você pode inserir quebras de linha e tabulações para tornar strings longas mais legíveis.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Escapando caracteres Unicode

Usar sequências de escape Unicode permite representar caracteres específicos com códigos hexadecimais.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notas

O uso excessivo de escapes pode prejudicar a legibilidade

O uso excessivo de caracteres de escape pode reduzir a legibilidade do seu código. É especialmente importante usar caracteres de escape de forma criteriosa em strings longas.

Considere usar literais de template

No JavaScript, literais de template usando crases permitem incluir quebras de linha ou expressões embutidas sem usar caracteres de escape.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Resumo

Os caracteres de escape são essenciais para representar caracteres especiais ou de controle dentro de strings. Ao escapar aspas simples ou duplas e adicionar quebras de linha ou tabulações, você pode criar strings mais flexíveis. No entanto, o uso excessivo de caracteres de escape pode tornar o código mais difícil de ler, então considere usar literais de template quando apropriado.

Versões do JavaScript

O JavaScript possui uma especificação padrão chamada ECMAScript (ES). O JavaScript evoluiu com base nesse padrão. Abaixo está uma breve descrição de suas principais versões.

  • ES3 (1999)

    A primeira versão amplamente adotada. A sintaxe básica e os recursos foram estabelecidos.

  • ES5 (2009)

    Introdução do strict mode e novos recursos como Array.prototype.forEach, Object.keys, etc., foram adicionados.

  • ES6 / ES2015 (2015)

    Uma grande atualização foi feita no JavaScript. Muitos recursos fundamentais para o JavaScript moderno, como let, const, arrow functions, classes, promises, modules, etc., foram introduzidos.

  • ES7 / ES2016 (2016)

    Array.prototype.includes e o Operador de Exponenciação (**) foram adicionados.

  • ES8 / ES2017 (2017)

    async/await foi introduzido, tornando mais simples escrever processos assíncronos.

  • ES9 / ES2018 (2018)

    Iteradores assíncronos e Propriedades Rest/Spread foram adicionados.

  • ES10 / ES2019 (2019)

    flatMap e Object.fromEntries foram adicionados.

  • ES11 / ES2020 (2020)

    Optional Chaining (?.) e o Operador de Coalescência Nula (??) foram adicionados, permitindo que o código seja escrito de forma mais simples e segura.

  • ES12 / ES2021 (2021)

    String.prototype.replaceAll e Promise.any, entre outros, foram adicionados.

  • ES13 / ES2022 (2022)

    Array.prototype.at e campos private de classes (#field), entre outros, foram adicionados.

  • ES14 / ES2023 (2023)

    Array.prototype.toSorted e Symbol.prototype.description, entre outros, foram adicionados.

  • ES15 / ES2024 (2024)

    Promise.withResolvers para facilitar a gestão de Promise e ArrayBuffer redimensionável, entre outros, foram adicionados.

O JavaScript atual é atualizado todos os anos, e novos recursos são adicionados até mesmo na versão mais recente.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Tipos de Dados em JavaScript