🧨

JavaScript variables

As variáveis são os elementos da programação que permitem o

armazenamento de valores na memória do computador e seu uso
pelo programa.

O conceito de variável inclui quatro características: o nome

usado pelo programa para a variável, o endereço de memória
para o qual aquele nome aponta, o valor armazenado naquele
endereço de memória e o tipo de dado armazenado.

O nome da variável é obrigatório e é escolhido pelo

programador quando escreve o código. Ele é conhecido como
identificador e deve ser único.

O endereço de memória é representado por um número fixo,

determinado pelo computador. Esse endereço não muda, o que
varia é somente o conteúdo armazenado naquele endereço, isto
é, o valor da variável.

O tipo se refere ao tipo de dado do valor armazenado na

variável. Ele pode ser inteiro, string, booleano, objeto,
entre outros.

var x = 37; // tipo inteiro

let y = 67; // tipo inteiro

const w = 'html'; // tipo string

var a = 'Frontend Web Development Bootcamp'; // tipo string

JavaScript variables 1
 var b = { secondProperty: 'hello world!'}; // objeto

var m = true; // tipo booleano

// imprime no console os valores atribuídos às variáveis

console.log(x);
37

console.log(b);
Object { secondProperty: "hello world!" }

console.log(a);
Frontend Web Development Bootcamp

console.log(m);
true

Como criar variáveis

Declaração de uma variável:

let anotherVariable; // palavra reservada + nome

Atribuição de valor:

anotherVariable = 20; // atribui o valor inteiro 20 à variável

Processo simultâneo:

const newVariable = 'hello world'; // cria uma variável e atribui a ela um valor do ti
po string

var, const, let

var, const e let são palavras-chave ou palavras reservadas
para a criação de variáveis em JS.

JavaScript variables 2
 var
Antes do ES6, as declarações de var eram a regra. Mas havia
problemas associados à declaração de variáveis com var. O fato
de variáveis com var poderem ser declaradas de novo e
atualizadas geravam erros e causavam vários bugs no código.

var tem escopo global ou escopo de função (local)

variáveis de var podem ser declaradas de novo e atualizadas

let
let é, agora, a forma preferida de declaração de variáveis.
Ele é uma melhoria às declarações com var e resolve o problema
de var.

let tem escopo de bloco

let pode ser atualizado, mas não declarado novamente

a mesma variável let pode ser definida em escopos

diferentes e isso não causará erro:

let greeting = "say Hi";

if (true) {
let greeting = "say Hello instead";
console.log(greeting); // retornará "say Hello instead"
}
console.log(greeting); // retornará "say Hi"

Não ocorrem erros porque as duas instâncias são tratadas como

variáveis diferentes porque são de escopos diferentes. Este
fato torna a escolha de let melhor do que var.

const
Variáveis declaradas com const mantêm valores constantes.
Declarações com const compartilham algumas semelhanças com as
declarações com let.

declarações com const têm escopo de bloco

const não pode ser atualizado nem declarado novamente

Cada declaração com const deve ser inicializada no momento

da declaração

JavaScript variables 3
 Um objeto declarado com const não pode ser atualizado, mas
é possível atualizar as propriedades desse objeto

💡 Quando utilizar let e const?

Deve-se usar let quando em algum momento for necessário
mudar ou atualizar o valor das variáveis. Se não, deve-
se usar const, isto é, para valores constantes.

Convenções de nomenclatura

const yourFirstVariable = 10; // lowerCamelCase

const your_first_variable = 10; // snake_case
const YOUR_FIRST_VARIABLE = 10; // CONSTANT_CASE
const yourfirstvariable = 10; // lowercase
const YourFirstVariable = 10; // PascalCase

// todas acima são declarações válidas em JS!

JS Style Guides ⇒
são guias com convenções sobre o uso do JS
em diferentes contextos. Uma das convenções trata da
nomenclatura de variáveis.

Recomenda-se escrever o nome de variáveis em lowerCamelCase:

let letVariable = 'non-const';

💡 É uma boa prática ao nomear uma variável não ser vago

nem muito específico. A escolha do nome deve expressar
o significado da variável da melhor maneira para que
todos que lerem o código possam entende-lo.

JavaScript variables 4
 Tipos de dados

const variable1 = 10; // number

const variable2 = variable1; // another variable
const variable3 = 'Zach'; // string
const variable4 = {
variableType: "object",
variableValue: "some value",
}; // object
const variable5 = (function () {
return "Hello, my name is ";
})(); // function
const variable6 = variable5 + variable3; // concatenation
const variable7 = true; // boolean

console.log(variable6); // imprime no console o valor de variable6

Hello, my name is Zach

Variáveis em JS aceitam vários tipos de dados, até funções e

objetos. Os tipo mais comuns são number, string e boolean.
Eles são chamados tipos primitivos.

Boolean representa uma entidade lógica e pode assumir os

valores: true e false; Number armazena números; String é usado
para representar dados textuais.

const stringValue = 'hello world';

const anotherString = "hello world!";

const numberValue = 10;

const anotherNumber = 20;

let booleanValue = true;

let anotherBoolean = false;

Linguagens de tipagem estática ⇒

(e.g. Java, C++) precisam
declarar o tipo de dado ao criar variáveis:

JavaScript variables 5
 const variable1: number = 10;

Linguagens de tipagem dinâmica ⇒

(e.g. Python, JavaScript)
não precisam declarar o tipo de dado ao criar variáveis:

const variable1 = 10;

arrays (vetores)
Pode-se entender um array como uma “lista” que pode conter
dados de variados tipos. Pode receber inclusive objetos e
outros arrays:

const firstArray = [10, 20, 30, 50, 70];

const secondArray = [10,'a string', { prop: 'asdf' }, [1, 2, 3, 4, 5]];

Arrays são indexados e cada um dos seus valores é identificado

por um índice único. Os índices iniciam em 0 .

const firstArray = [1, 2, 3, 4];

const secondArray = [10, 'a string', { prop: 'asdf'}, [1, 2]];

console.log(firstArray);
Array(4) [ 1, 2, 3, 4 ]

console.log(firstArray[0]);
1

console.log(secondArray[3]);
Array [ 1, 2 ]

console.log(secondArray[3][0]);
1

JavaScript variables 6
 Objetos
Em JavaScript, os objetos podem ser vistos como uma coleção de
propriedades. Os valores de propriedade podem ser valores de
qualquer tipo, incluindo outros objetos, o que permite
construir estruturas de dados complexas.

const myCar = {
model: 'Ford Ecosport',
color: 'light gray',
year: 2017,
}; // cria objeto myCar

myCar.model; // acessa a propriedade model do objeto myCar

"Ford Ecosport"

myCar['model']; // outra maneira de acessar o valor de uma propriedade

"Ford Ecosport"

Para acessar a propriedade de um objeto digite:

nomeDoObjeto.nomeDaPropriedade; . Outra maneira é:

nomeDoObjeto['nomeDaPropriedade']; .

Um objeto pode conter outros objetos aninhados:

const nestedObject = {
layer1: {
layer2: {
layer3: {
targetValue: 20
}
}
}
}

nestedObject.layer1.layer2.layer3.targetValue; // acessa o valor da propriedade target

Value
20

Funções
Funções são blocos de construção fundamentais em JavaScript.
Uma função é um procedimento de JavaScript - um conjunto de

JavaScript variables 7
 instruções que executa uma tarefa ou calcula um valor. Para
usar uma função, você deve defini-la em algum lugar no escopo
do qual você quiser chamá-la.

Declarando uma função

A definição da função (também chamada de declaração de função)
consiste no uso da palavra chave function , seguida por:

Nome da Função.

Lista de argumentos para a função, entre parênteses e

separados por vírgulas.

Declarações JavaScript que definem a função, entre chaves {

}.

function square (number) {

return number * number;
}; // função simples para retornar o quadrado de um número.

square(2);
4

const functionContainerVariable = function () {

return 20;
}; // uma função pode ser armazenada em uma variável.

functionContainerVariable();
20

JavaScript variables 8