06 ‐ Variáveis - sabrinabm94/javascript GitHub Wiki

No JavaScript, variáveis são elementos fundamentais para armazenar e manipular dados durante a execução de um programa. Elas são usadas para armazenar valores que podem ser posteriormente acessados e modificados ao longo do tempo.

6.1 Declaração de Variáveis

Em JavaScript, variáveis são declaradas utilizando as palavras-chave `var`, `let` ou `const`, seguidas pelo nome da variável.

var age = 30; 
// Declaração de uma variável 'age' com o valor 30 usando 'var'

let name = "João"; 
// Declaração de uma variável 'name' com o valor "João" usando 'let'

const PI = 3.14; 
// Declaração de uma constante 'PI' com o valor 3.14 usando 'const'

6.1.1 Diferenças entre as formas de declarar variáveis

Em JavaScript, `const`, `let` e `var` podem ser usados para declarar variáveis, mas têm escopos e comportamentos ligeiramente diferentes.

`var`:

Escopo de Função: Variáveis declaradas com `var` têm escopo de função ou escopo global, o que significa que podem ser acessadas em qualquer lugar dentro da função em que foram declaradas ou no escopo global, caso tenham sido declaradas dessa forma.
Hoisting: Variáveis declaradas com `var` são “hoisted” (içadas) para o topo do seu escopo, o que significa que podem ser acessadas antes mesmo de serem declaradas. OBS: veremos mais sobre o `hoisted` nos próximos capítulos.
Reatribuição e Re-declaração: Variáveis `var` podem ser reatribuídas e redeclaradas dentro do mesmo escopo podendo ter alterações dinâmicas de valores e tipos.

var y = 1;
function varSample() {
    if (true) {
        var x = 10;
    }
    x = x + y;

    console.log(x); 
    // Saída: 11

    console.log(y); 
    // Saída: 1

   var x = 3;

   console.log(x) 
   // Saída: 3;
}
varSample();

`let`:

Escopo de Bloco: Variáveis declaradas com `let` têm escopo de bloco, o que significa que só podem ser acessadas dentro do bloco em que foram declaradas.
Hoisting Limitado: Variáveis `let` são hoisted apenas para o início do seu bloco, o que significa que não podem ser acessadas antes da declaração.
Reatribuição, mas não Re-declaração: Variáveis `let` podem ser reatribuídas, mas não podem ser redeclaradas no mesmo escopo.

function letSample() {
    if (true) {
        let y = 20;
        console.log(y); 
        // Saída: 20
    }

    console.log(y); 
    // ReferenceError: y is not defined
}
letSample();

`const`:

Constantes: Variáveis declaradas com `const` são constantes, ou seja, uma vez atribuído um valor, este valor não pode ser alterado.
Escopo de Bloco: Assim como `let`, `const` tem escopo de bloco.
Hoisting Limitado: `const` também é hoisted para o início do seu bloco, mas não pode ser acessado antes da declaração.
Não Reatribuível e Não Re-declarável: Variáveis `const` não podem ser reatribuídas nem redeclaradas no mesmo escopo.

function constSample() {
    const z = 30;

    console.log(z); 
    // Saída: 30

    z = 40; 
    // TypeError: Assignment to constant variable

    const z = 0; 
    // Identifier 'z' has already been declared
}
constSample();

Enquanto `var` tem escopo de função, `let` e `const` têm escopo de bloco. `var` permite redeclaração e reatribuição, `let` permite reatribuição, mas não redeclaração, e `const` não permite nem reatribuição nem redeclaração.

Recomenda-se o uso de `const` sempre que possível, pois isso torna o código mais seguro e legível, reservando `let` para casos em que a reatribuição é necessária e evitando o uso de `var` devido aos seus comportamentos menos previsíveis.

—

6.2 Tipos de Variáveis

JavaScript é uma linguagem de tipagem dinâmica, o que significa que o tipo de uma variável é determinado automaticamente com base no valor atribuído a ela. Abaixo estão os principais tipos de variáveis em JavaScript:

6.2.1. Number (Número)

Armazena valores numéricos, inteiros ou de ponto flutuante, e é possível fazer operações numéricas com esses valores e verificar seu tipo.

// Declarando as variáveis com diferentes tipos numéricos
let integer = 10; 
// Inteiro

let float = 3.14; 
// Número com ponto flutuante

let scientific = 5e3; 
// Notação científica

let negative = -20; 
// Número negativo

let hexadecimal = 0xFF; 
// Hexadecimal

// Algumas operações
let sum = integer + float; 
// Soma

let multiplication = integer * negative; 
// Multiplicação

let division = float / 2; 
// Divisão

let remainder = integer % 3; 
// Resto de divisão

// Resultados
console.log("Soma:", sum); 
// Saída: 13.14

console.log("Multiplicação:", multiplication); 
// Saída: -200

console.log("Divisão:", division); 
// Saída: 1.57

console.log("Resto:", remainder); 
// Saída: 1

// Verificando se um valor é número
let value1 = 42;
let value2 = "42";

console.log("Value1 é um número:", typeof value1 === "number"); 
// Saída: true

console.log("Value2 é um número:", typeof value2 === "number"); 
// Saída: false

6.2.2. String (Texto)

Armazena sequências de caracteres, delimitadas por aspas simples ou duplas. Com as variáveis do tipo `string`, é possível selecionar seus caracteres ou unir strings para formar frases e textos mais complexos e dinâmicos.

// Declarando variáveis
let singleQuotes = 'Olá, mundo!'; 
// Frase usando aspas simples

let doubleQuotes = "JavaScript é incrível!"; 
// Frase usando aspas duplas

let templateLiteral = `Meu nome é João`; 
// Frase usando template literals

// Concatenação de strings
let firstName = 'João';
let lastName = 'Paulo';
let fullName = firstName + ' ' + lastName; 
// Gerando nome completo concatenando as variáveis com as strings de nome.

let greeting = `Bem-vindo de volta, ${firstName}!`; 
// Template literal com interpolação de string

// Acessando caracteres em uma string
let firstCharacter = singleQuotes[0]; 
// Obtendo o primeiro caractere

let lastCharacter = doubleQuotes.slice(-1); 
// Obtendo o último caractere

// Exibindo os resultados
console.log('Nome completo:', fullName); 
// Saída: Nome completo: João Paulo

console.log('Saudação:', greeting); 
// Saída: Bem-vindo de volta, João

console.log('Primeiro caractere:', firstCharacter); 
// Saída: O

console.log('Último caractere:', lastCharacter); 
// Saída: !

6.2.3. Boolean (Booleano)

Armazena valores verdadeiros ou falsos, muito utilizado para controle de condições e situações.

// Definição de variáveis
let hasCoffee = true;
let isRaining = false;

// Verifica se tem café e se está chovendo
if (hasCoffee && isRaining) {
    console.log("Vou ficar em casa e aproveitar uma xícara de café enquanto escuto a chuva.");
} else if (hasCoffee && !isRaining) { 
// Verifica se tem café mas não está chovendo
    console.log("Vou sair para tomar um café ao ar livre.");
} else if (!hasCoffee && isRaining) { 
// Verifica se não tem café mas está chovendo
    console.log("Vou sair para comprar café e aproveitar para me molhar na chuva.");
} else { 
//E caso não tenha café e não esteja chovendo
    console.log("Não tenho café e não está chovendo, então vou trabalhar sem distrações.");
}

6.2.4. Array (Matriz)

Armazena coleções ordenadas de valores, acessíveis por meio de índices. É possível adicionar, remover ou alterar seus valores selecionando pelo índice (posição) que o valor desejado se encontra na lista. O índice começa pela posição 0.

// Declarando um array de números
let numbers = [1, 2, 3, 4, 5];

// Declarando um array de strings
let fruits = ['Maça', 'Banana', 'Laranja', 'Uva', 'Manga'];

// Declarando um array de booleanos
let booleans = [true, false, true, false];

// Declarando um array de diferentes tipos de dados
let mixed = [1, 'oi', true, null, undefined];

// Acessando elementos do array
console.log('First number:', numbers[0]); 
// Saída: 1

console.log('Second fruit:', fruits[1]); 
// Saída: Banana

console.log('Third boolean:', booleans[2]); 
// Saída: true

// Adicionando elementos ao array
numbers.push(6);
fruits.unshift('Limão');
booleans.push(true);

// Removendo elementos do array
let removedNumber = numbers.pop();
let removedFruit = fruits.shift();
let removedBoolean = booleans.pop();

// Exibindo o array atualizado e os elementos removidos
console.log('Numbers:', numbers); 
// Saída: [1, 2, 3, 4, 5, 6]

console.log('Fruits:', fruits); 
// Saída: ['Banana', 'Laranja', 'Uva', 'Manga', 'Limão']

console.log('Booleans:', booleans); 
// Saída: [true, false, true]

console.log('Removed number:', removedNumber); 
// Saída: 6

console.log('Removed fruit:', removedFruit); 
// Saída: Maçã

console.log('Removed boolean:', removedBoolean); 
// Saída: true

Quando temos múltiplas listas associadas, podemos ter uma matriz, que armazena valores em linhas e colunas, permitindo o armazenamento e manipulação de conjuntos de dados multidimensionais.

// Definindo uma matriz 3x3
let matrix = [
    [1, 2, 3],    // Primeira linha da matriz
    [4, 5, 6],    // Segunda linha da matriz
    [7, 8, 9]     // Terceira linha da matriz
];

// Acessando elementos da matriz
console.log(matrix[0][0]);  
// Saída: 1 (primeiro elemento da primeira linha)

console.log(matrix[1][2]);  
// Saída: 6 (terceiro elemento da segunda linha)

console.log(matrix[2][1]);  
// Saída: 8 (segundo elemento da terceira linha)

// Alterando um elemento da matriz
matrix[1][1] = 10;  
// Alterando o valor do elemento no índice [1][1] para 10

console.log(matrix[1][1]);  
// Saída: 10 (novo valor do elemento no índice [1][1])

Neste exemplo, matrix é uma matriz 3x3, onde cada linha representa um array de 3 números inteiros. Os elementos da matriz podem ser acessados usando notação de colchetes, indicando primeiro o índice da linha e depois o índice da coluna. Além disso, podemos modificar os valores dos elementos da matriz atribuindo novos valores a eles.

6.2.5. Object (Objeto)

Armazena coleções de pares chave-valor, representando propriedades e seus valores. É usada para fazer representações de objetos reais e suas propriedades e ações. Também é possível atrelar um objeto ao outro.

// Declarando um objeto representando um carro
let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020,
    color: 'Azul',
    isAutomatic: true,
    features: ['Ar condicionado', 'ABS'],
    owner: {
        name: 'Paulo Henrique',
        age: 35,
    },
    start: function() {
        console.log('Ligando o carro...');
    },
    drive: function(speed) {
        console.log(`Dirigindo á ${speed} km/h`);
    }
};

// Acessando propriedades do objeto
console.log('Marca:', car.brand); 
// Saída: Toyota

console.log('Cor:', car['color']); 
// Saída: Azul

// Acessando propriedades aninhadas
console.log('Proprietário:', car.owner.name); 
// Saída: Paulo Henrique

// Modificando propriedades do objeto
car.year = 2021;
console.log('Ano atualizado:', car.year); 
// Saída: 2021

// Adicionando novas propriedades
car.price = 25000;
console.log('Preço:', car.price); 
// Saída: 25000

// Removendo propriedades
delete car.color;
console.log('Cor removida:', car.color); 
// Saída: undefined

// Verificando se uma propriedade existe
console.log('Propriedade "color" existe:', 'color' in car); 
// Saída: false

// Iterando sobre as propriedades do objeto
for (let prop in car) {
    console.log(prop + ':', car[prop]);
}

// Chamando métodos do objeto
car.start(); 
// Saída: Ligando carro...

car.drive(60); 
// Saída: Dirigindo á 60 km/h

6.2.6. Undefined

O uso de undefined em JavaScript geralmente ocorre quando uma variável foi declarada, mas ainda não foi atribuído um valor a ela. Isso pode acontecer quando uma variável é inicializada sem um valor ou quando uma função retorna sem especificar um valor de retorno. O undefined indica que uma variável existe, mas não possui um valor definido.

// Declarando uma variável sem atribuir um valor a ela
let undefinedVariable;

// Exibindo o valor da variável
console.log(undefinedVariable); 
// Saída: undefined

// Verificando se a variável é undefined
if (typeof undefinedVariable === 'undefined') {
    console.log('A variável é undefined'); 
// Saída: A variável é undefined

} else {
    console.log('A variável não é undefined');
}

É importante usar undefined em situações onde queremos verificar se uma variável foi inicializada ou se uma operação foi bem-sucedida. Por exemplo, ao acessar propriedades de objetos ou elementos de um array, se o índice não existir ou a propriedade não estiver definida, o valor retornado será undefined. Isso pode ser útil para realizar verificações de validade ou para inicializar variáveis com valores padrão.

Além disso, em algumas situações, podemos querer definir explicitamente uma variável como undefined para indicar que ela está vazia ou que seu valor deve ser redefinido posteriormente no código.

6.2.7. Null

Em JavaScript, null é um valor especial que representa a ausência intencional de um valor ou a falta de um valor. Ele é frequentemente usado para indicar que uma variável não possui um valor atribuído.

// Definindo uma variável para armazenar um nome
let name = "João";

// Atribuindo null para indicar que o valor de nome não está disponível
name = null;

// Verificando se o valor de name é null e exibindo uma mensagem apropriada
if (name === null) {
    console.log("O nome não foi informado"); // Saída: O nome não foi informado
} else {
    console.log("Nome:", name);
}

// Criando uma função que recebe um argumento e verifica se é null
function verifyNull(value) {
    if (value === null) {
        console.log("É null"); 
    } else {
        console.log("Não é null, seu valor é ", value); 
    }
}

// Chamando a função com null e com um valor definido
verifyNull(null); // Saída: É null
verifyNull("tenho um valor do tipo string"); // Saída: Não é null, seu valor é "tenho um valor do tipo string"

// Usando null em um objeto para indicar a ausência de uma propriedade
let person = {
    name: "Maria",
    age: 33,
    address: null 
// Endereço não fornecido
};

// Verificando se o endereço da pessoa é null e exibindo uma mensagem apropriada
if (person.address === null) {
    console.log("O endereço não está disponível."); 
// Saída: O endereço não está disponível
} else {
    console.log("Endereço:", person.address);
}

Estes são apenas alguns exemplos que ilustram a variedade de tipos de variáveis e como elas podem ser utilizadas em JavaScript para armazenar e manipular dados. Variáveis desempenham um papel fundamental na programação em JavaScript, permitindo aos desenvolvedores criar programas dinâmicos e interativos.

Até agora, exploramos os fundamentos das variáveis em JavaScript, abrangendo tipos como string, boolean, array, object, undefined e null. No próximo capítulo, mergulharemos mais fundo nos números em JavaScript, explorando diferentes tipos numéricos, operações matemáticas e considerações sobre precisão e limites de armazenamento. Aguarde!

06 ‐ Variáveis - sabrinabm94/javascript GitHub Wiki

6.1 Declaração de Variáveis

6.1.1 Diferenças entre as formas de declarar variáveis

6.2 Tipos de Variáveis

6.2.1. Number (Número)

6.2.2. String (Texto)

6.2.3. Boolean (Booleano)

6.2.4. Array (Matriz)

6.2.5. Object (Objeto)

6.2.6. Undefined

6.2.7. Null

Arquivos

Pacotes

Conceitos de programação

Conceitos do Javascript

Básico

Intermediário

Avançado

Outros

⚠️ GitHub.com Fallback ⚠️

06 ‐ Variáveis - sabrinabm94/javascript GitHub Wiki

6.1 Declaração de Variáveis

6.1.1 Diferenças entre as formas de declarar variáveis

6.2 Tipos de Variáveis

6.2.1. Number (Número)

6.2.2. String (Texto)

6.2.3. Boolean (Booleano)

6.2.4. Array (Matriz)

6.2.5. Object (Objeto)

6.2.6. Undefined

6.2.7. Null

Arquivos

Pacotes

Conceitos de programação

Conceitos do Javascript

Básico

Intermediário

Avançado

Outros

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️