DEV Community: Bruno Moutinho

Introdução à programação em JS - elementos básicos parte 2

Bruno Moutinho — Fri, 08 Oct 2021 16:18:13 +0000

Computadores são extremamente bons em tarefas repetitivas. Eles conseguem executar os mesmos cálculos e procedimentos milhares de vezes sem erros que seres humanos geralmente cometem por causa do cansaço ou falta de atenção. Entretanto, não parece uma boa ideia escrever o código milhares de vezes para que o procedimento aconteça milhares de vezes.

Funções são blocos de código que podem ser invocados quando conveniente, evitando a necessidade de se repetir o código várias vezes em uma aplicação. Hoje estudaremos as funções e operadores.

Índice da série:

Introdução à programação em JS - elementos básicos parte 1

Introdução à programação em JS - elementos básicos parte 2 (você está aqui)

Funções

Em JavaScript, funções podem ser declaradas de duas formas: usando a palavra function ou usando a sintaxe de "flecha". Existem diferenças entre essas duas formas de se declarar uma função, mas, por enquanto, essas diferenças são irrelevantes e podemos escolher a sintaxe que acharmos melhor. Abaixo, um exemplo de como usar cada uma das formas:

// Usando a palavra "function"
function minhaFunção() {}

// Usando a sintaxe de flecha
const minhaFunçãoFlecha = () => {}

// Neste caso é importante frisar que estamos criando
// uma variável e inicializando ela com uma função.
// Como estamos criando uma variável, poderíamos ter
// utilizado "let" (dado) ou "var" (variável) ao invés
// de "const" (constante).
// Entretanto, exceto quando você precisar, é uma boa
// prática utilizar "const", pois evita que se
// modifique o valor da variável de maneiras inesperadas.

As partes principais da declaração são o nome da função (minhaFuncao e minhaFuncaoFlecha), os parâmetros (delimitados por ( e ), embora não tenhamos adicionado nenhum parâmetro nesses exemplos) e o corpo da função (delimitado por { e }, embora não tenhamos adicionado nenhuma expressão no corpo).

O nome da função pode receber qualquer texto, desde que obedeça às seguintes restrições (que são as mesmas restrições aplicadas a nomes de variáveis):

Deve começar por uma letra ou o caractere _;
Não pode conter espaço, caracteres especiais ou sinais de pontuação;
Não se pode usar palavras reservadas (a lista de palavras reservadas no JavaScript pode ser vista aqui: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#Palavras-chave)

É importante lembrar que os interpretadores de JavaScript diferenciam os nomes entre letras maiúsculas e minúsculas, ou seja, os nomes minhaFunção e minhafunção são diferentes. Da mesma forma, caracteres com acentuação são diferentes dos caracteres sem acentuação, ou seja, os nomes minhaFuncao e minhaFunção são diferentes.

Como as duas formas de declarar funções são equivalentes para os exemplos que usaremos aqui, vou utilizar, por preferência pessoal, a sintaxe de flecha, principalmente por precisar escrever menos.

Toda função retorna um valor quando executada. No caso das funções minhaFunção e minhaFunçãoFlecha que definimos anteriormente, como elas não têm um retorno explícito, elas retornam, implicitamente, o valor indefinido (undefined). Para definirmos um retorno explícito em uma função, nós usamos a palavra return, cuja tradução é retorna:

// A função abaixo retorna o valor verdadeiro
// quando executada
const retornaVeradeiro = () => {
  return true;
}

retornaVerdadeiro()
// true

// A função abaixo retorna o valor falso
// quando executada.
const retornaFalso = () => false;

// Perceba que eu omiti as chaves ({}) e a
// palavra de retorno (return). Quando
// escrevemos uma função com sintaxe de flecha
// que tem apenas a expressão de retorno, podemos
// omitir esses elementos, diminuindo ainda mais
// a quantidade de código que precisamos escrever.
// Compare com a função equivalente abaixo:
function tambémRetornaFalso() {
  return false;
}

retornaFalso()
// false

tambémRetornaFalso()
// false

Quando definimos uma função, podemos indicar valores que serão utilizados para calcular o valor de retorno da função. Esses valores são chamados de parâmetros. Abaixo temos um exemplo simples de uma função com parâmetros definidos:

// A função abaixo recebe como parâmetro dois
// valores, que demos o nome de x e y, e retorna
// a soma desses valores.
const adição = (x, y) => x + y;

// A expressão abaixo executa a função "adição"
// atribuindo para o parâmetro "x" o valor 40 e
// para o parâmetro "y" o valor 2.
adição(40, 2);
// 42

Operadores

No exemplo acima, utilizamos o operador +. Não havíamos comentado anteriormente nessa série sobre os operadores ainda, mas podemos entender eles como funções que são "chamadas" com uma sintaxe diferente: enquanto a nossa função adição recebe o valor dos parâmetros dentro dos parênteses (adição(40, 2)), o operador + recebe os parâmetros um de cada lado (40 + 2). Outras operações matemáticas também existem em JavaScript, como - (subtração), * (multiplicação), / (divisão) e ^ (potenciação).

Também existem operadores lógicos: temos o "e" lógico (&&), o "ou" lógico (||) e o "não" lógico (!). Esses operadores seguem as regras da lógica Booleana:

Só são aceitos dois valores: verdadeiro (true) e falso (false);
Uma expressão lógica pode ser:
- Um valor Booleano;
- O operador lógico "não" (!) e uma expressão lógica;
- Duas expressões lógicas conectadas por um operador lógico "e" (&&) ou "ou" (||).
Toda expressão lógica resolve para um valor Booleano.

Observe abaixo cada um dos casos:

// Expressões lógicas com somente um valor Booleano:
true
// true
false
// false

// Expressões lógicas com o operador lógico "não":
! true
// false
! false
// true
// O espaço entre o operador lógico e o valor Booleano é opcional.

// Expressões lógicas conectadas por um operador lógico:
true && true
// true
true && false
// false
false && true
// false
false && false
// false

true || true
// true
true || false
// true
false || true
// true
false || false
// false

// E podemos tornar tudo isso mais complicado:
( ! true ) && true
// false

// Assim como na matemática, é interessante o uso
// de parênteses para identificar a ordem das
// operações. Nesse caso, queremos aplicar o
// operador "não" ao valor "verdadeiro" antes de
// avaliarmos o resultado do operador "e".
// Como '( ! true )' é avaliado para o valor
// "falso", e o resultado da expressão
// 'false && true' é falso, o resultado da
// expressão '( ! true ) && true' é "falso".

Uma breve explicação sobre cada um dos operadores lógicos:

! - Operador de negação. Retorna o valor negado da expressão que vem à sua direita.

&& - Operador de intersecção; "e" lógico. Retorna o valor "verdadeiro" apenas quando todos os operandos são verdadeiros. É chamado de intersecção quando pensamos em conjuntos matemáticos, pois quando queremos a intersecção de um conjunto A com um conjunto B, queremos os elementos que fazem parte do conjunto A e também fazem parte do conjunto B. A imagem abaixo ilustra essa relação:

PraCegoVer - A imagem acima mostra dois círculos parcialmente sobrepostos, um com a letra "A" ao centro, o outro com a letra B ao centro. A área em que um círculo se sobrepõe ao outro está rabiscada em vermelho, indicando que é a área de intersecção dos círculos. Imagem criada em https://excalidraw.com/

|| - Operador de união; "ou" lógico. Retorna o valor "verdadeiro" quando pelo menos um dos operandos é verdadeiro. É chamado de união quando pensamos em conjuntos matemáticos, pois quando queremos a união de um conjunto A com um conjunto B, queremos os elementos que fazem parte do conjunto A, do conjunto B ou dos dois conjuntos. A imagem abaixo ilustra essa relação:

PraCegoVer - A imagem acima mostra dois círculos parcialmente sobrepostos, um com a letra "A" ao centro, o outro com a letra "B" ao centro. A área dos dois círculos, sobreposta ou não, está rabiscada em vermelho, indicando que é a área de união dos círculos. Imagem criada em https://excalidraw.com/

Para cada um dos operadores, os valores apresentados nos exemplos acima são o conjunto de valores possíveis para qualquer expressão lógica. Se organizamos esses conjuntos em uma tabela, essa tabela é chamada de "tabela verdade".

Funções puras

Um conceito muito importante quando estamos lidando com funções é o de funções puras. Funções puras adicionam certas restrições que devem ser seguidas:

São determinísticas, ou seja, sempre que a função for executada com os mesmos parâmetros, ela terá o mesmo resultado;
Não existe efeito colateral para a execução do código da função.

Alguns dos benefícios que temos com esse tipo de função são:

Por conta do determinismo, é fácil criar testes automatizados para funções puras, pois sabemos que o resultado para aquele conjunto de parâmetros é sempre o mesmo;
Por conta do determinismo, podemos aplicar otimizações de execução, salvando o resultado da execução com determinado conjunto de parâmetros, de forma a não precisar executar o código uma segunda vez para obter o resultado correto;
Por conta da ausência de efeitos colaterais, podemos executar o mesmo código paralelamente em diferentes partes da aplicação sem o receio de que uma execução interfira com a outra.

Funções puras são extremamente simples em conceito, mas é muito fácil não seguir suas restrições.

// A função pintar recebe 2 parâmetros: "casa" e "cor",
// modifica a cor da casa atribuindo a ela o valor
// recebido no parâmetro "cor" e retorna a casa.
const pintar = ( casa, cor ) => {
  casa.cor = cor;
  return casa;
}

const casa = {
  material: "tijolo",
  andares: 1,
  cor: "branca",
};

pintar( casa, "azul" );
// > { material: "tijolo", andares: 1, cor: "azul" }
casa;
// > { material: "tijolo", andares: 1, cor: "azul" }

No exemplo acima, estamos modificando a propriedade cor da variável casa. Como estamos modificando o valor da variável, estamos criando um efeito colateral da execução do nosso código. Se outro ponto da aplicação estiver executando um código utilizando, também, a mesma variável casa, podemos ter algum comportamento estranho e muito difícil de reproduzir.

// A função pintar recebe 2 parâmetros: "casa" e "cor",
// cria uma nova casa com todas as propriedades do parâmetro
// "casa", sobrescrevendo o valor da propriedade "cor" com
// o valor do parâmetro "cor" e retorna a nova casa.
const pintar = ( casa, cor ) => {
  const novaCasa = { ...casa, cor };
  return novaCasa;
}

const casa = {
  material: "tijolo",
  andares: 1,
  cor: "branca",
};

pintar( casa, "azul" );
// > { material: "tijolo", andares: 1, cor: "azul" }
casa;
// > { material: "tijolo", andares: 1, cor: "branca" }

Dessa vez, os valores do parâmetro casa não foram alterados. Ao invés disso, nós copiamos as propriedades da variável e criamos uma nova variável sobrescrevendo o valor da propriedade cor.

Operador de expansão

Antes de finalizarmos, deixe eu explicar o que está acontecendo na linha const novaCasa = { ...casa, cor };. O símbolo ... é um operador chamado de spread, cuja tradução é "expansão". No contexto em que ele está sendo usado, ele "expande" o objeto casa, expondo todas as suas propriedades. Outra coisa que deve parecer estranha é que eu coloquei tanto ...casa quanto cor sem determinar seus valores. Isso acontece por que, quando uma propriedade tem o mesmo valor de uma variável, os interpretadores de JavaScript conseguem inferir que o valor da propriedade será o valor da variável. Observe os exemplos abaixo:

// Os dois exemplos abaixo criam um objeto
// com as mesmas propriedades e com o mesmo
// valor em cada uma das propriedades.

const casa = {
  material: "tijolo",
  andares: 1,
  cor: "branca",
};

casa;
// > { material: "tijolo", andares: 1, cor: "branca" }

const material = "tijolo";
const andares = 1;
const cor = "branca";
const outraCasa = {
  material,
  andares,
  cor,
};

outraCasa;
// > { material: "tijolo", andares: 1, cor: "branca" }

// Os dois exemplos abaixo criam cópias
// do objeto "casa" definido anteriormente.

const cópiaDaCasa = {
  material: casa.material,
  andares: casa.andares,
  cor: casa.cor,
};

cópiaDaCasa;
// > { material: "tijolo", andares: 1, cor: "branca" }

const outraCópiaDaCasa = { ...casa };

outraCópiaDaCasa;
// > { material: "tijolo", andares: 1, cor: "branca" }

// Os dois exemplos abaixo criam cópias
// do objeto casa, mas sobrescrevem a propriedade
// andares.

const casaMaisAlta = {
  material: casa.material,
  andares: 2,
  cor: casa.cor,
};

casaMaisAlta;
// > { material: "tijolo", andares: 2, cor: "branca" }

const outraCasaMaisAlta = {
  ...casa,
  andares: 2,
};

outraCasaMaisAlta;
// > { material: "tijolo", andares: 2, cor: "branca" }

Quando criamos um objeto, podemos definir a mesma propriedade duas vezes na declaração, porém o objeto não pode ter duas propriedades diferentes com o mesmo nome. Toda propriedade deve ter um nome único. O que os interpretadores fazem quando definimos duas propriedades com o mesmo nome é sobrescrever a primeira propriedade declarada pela segunda. Na prática, a última propriedade declarada com cada nome terá o seu valor no objeto criado. Por isso, quando expandimos um objeto (expondo as suas propriedades na criação de um outro objeto) e declaramos uma propriedade que já existia no objeto expandido com um valor diferente, estamos sobrescrevendo o valor daquela propriedade.

Conclusão

Parabéns! Você deu mais um importante passo na compreensão dos elementos básicos para escrever aplicações em JavaScript!

Neste texto, exploramos as diferentes formas de declarar uma função. Vimos, também, o que são operadores. Aprendemos o que são funções puras e quais são seus benefícios. Por fim, aprendemos sobre o operador de expansão e como podemos criar novos objetos a partir de outros objetos.

Funções

Podem ser declaradas com a palavra function ou com a sintaxe de flecha. Utilizando a sintaxe de flecha, podemos omitir as chaves ({ e }) e a palavra return (retorna) caso a única expressão do corpo da função seja a expressão de retorno.

Operadores

São como funções que não usam os parênteses (( e )) para delimitar onde estão seus parâmetros, mas utilizam ou o que vem imediatamente após como parâmetro (como no caso do operador lógico de negação !) ou o que vem imediatamente antes e imediatamente após (como no caso do operador de adição +).

No caso dos operadores lógicos, nós testamos todos os valores possíveis para cada operador.

Funções puras

São funções determinísticas, ou seja, dado um conjunto de parâmetros, sempre retorna o mesmo valor, e que não têm efeitos colaterais. Isso as torna mais fáceis de serem testadas e evita problemas de execução paralela.

Operador de expansão

Nos permite expandir as propriedades de um objeto para que seja mais simples de criar uma cópia dele.

Da mesma forma que no último texto, é importante que todos os conceitos tratados nesse texto fiquem claros. A releitura ajuda a fixar esses conceitos. Caso algum conceito não esteja bem explicado, por favor entre em contato por qualquer forma listada na página Contato no menu.

No próximo texto iremos aprender sobre listas e controle de fluxo!

Introdução à programação em JS - elementos básicos parte 1

Bruno Moutinho — Fri, 08 Oct 2021 16:17:57 +0000

Programação, para muitos que não estudaram o tópico, pode parecer extremamente complexo. Entretanto, todo programa é construído a partir de conceitos muito simples. A combinação desses elementos gera os mais diversos resultados e, assim, conseguimos criar os diferentes programas que conhecemos.

Assim, quero dar uma pequena introdução sobre programação utilizando a linguagem JavaScript, que é uma das linguagens de programação mais utilizadas hoje em dia.

Neste texto, vou falar sobre os tipos de dados básicos que existem em JavaScript e como utilizar variáveis. Caso não tenha entendido algum dos termos que utilizei, siga lendo, pois tentarei aprofundar todos eles ao longo do texto.

Índice da série:

Introdução à programação em JS - elementos básicos parte 1 (você está aqui)
Introdução à programação em JS - elementos básicos parte 2

Tipos de dados

Dados são quaisquer informações. Tipos de dados são grupos de dados que compartilham características em comum. Cada tipo de dados representa algum conceito abstrato.

Em JavaScript, temos os tipos de dados primitivos e os tipos de dados estruturais.

Os tipos de dados primitivos são tipos que não podem ser modificados, enquanto os tipos estruturais podem. Uma explicação mais clara sobre esse conceito será discutida nos exemplos.

Os tipos de dados primitivos são:

undefined - tradução: indefinido. Esse tipo de dados indica que algum valor não foi definido em algum momento. Por convenção, esse valor acontece quando, não intencionalmente, um valor não foi inicializado;
null - tradução: nulo. Esse tipo de dados indica que algum valor foi inicializado com um valor inexistente. Assim como indefinido, indica que não existe um valor naquele espaço, mas, ao contrário de indefinido, isso é intencional.
Boolean - tradução: booleano. Esses são valores lógicos de verdadeiro (true) ou falso (false). O nome deriva de Boole (sobrenome do matemático George Boole) que criou um sistema baseado nesses dois valores lógicos e conectores lógicos (como "e", "ou", "não"). Não entraremos a fundo nesse tópico no momento. Por ora, memorize os valores possíveis: true (verdadeiro) e false (falso).
Number - tradução: número. Números são quaisquer números reais. Valores como 0, 0,5, 3,14, 42, ficam nessa categoria.
BigInt - contração de Big Integer; tradução - inteiro grande. Eventualmente, nossa aplicação pode precisar lidar com valores matemáticos muito grandes. Para indicar para o computador que precisamos de mais espaço de memória para usar esses valores, podemos utilizar esse tipo de dados.
String - tradução: texto. Apesar de "texto" não ser a tradução literal da palavra string, é a tradução que faz sentido. A tradução literal de string seria "fio" ou "corda". Esse nome existe por que a representação em memória do computador de um texto é de um "fio" ou "corda" de caracteres. Um caractere, em várias linguagens de programação, é um tipo de dados básico, enquanto o texto deriva desse tipo de dados. Quando se junta vários caracteres, se tem um fio de caracteres, ou string. Ainda assim, é possível ter uma string vazia ("") ou uma string de um só caractere ("a"),
Symbol - tradução: símbolo. Símbolos são valores únicos e randômicos. Toda vez que um símbolo é criado, ele será diferente de outros símbolos já criados. Seus usos comuns serão discutidos em um post futuro.

Os tipos estruturais são:

Object - tradução: objeto. Objetos são como objetos do mundo real. Se pensamos em uma bola, ela vai ter propriedades, como diâmetro, material, cor, peso... Objetos podem ter essas propriedades e podemos dar um valor para cada uma delas.
Function - tradução: função. São procedimentos ou métodos que guardam uma série de passos para que sejam executados quando for conveniente. Ainda não vou aprofundar este tema.

A grande diferença entre tipos primitivos e tipos estruturais é que os tipos primitivos são imutáveis, enquanto os tipos estruturais apenas têm uma referência imutável. Isso significa que não podemos mudar o valor do número 1, por exemplo, ou da letra A. Tipos estruturais, entretanto, podem ter seu valor modificado, mas continuarão sendo referenciados pelo mesmo endereço de memória. É como se eu fizesse uma reforma na minha casa: alguma coisa mudou na casa, mas ela ainda fica na mesma rua e número.

Variáveis

Variáveis são como caixas. Em JavaScript elas podem "guardar" quaisquer valores - um de cada vez, não interessando o tipo que está sendo guardado. Assim, o valor pode ser utilizado em diferentes partes do programa.

Quando guardamos um valor em uma variável, dizemos que a variável foi inicializada com o valor escolhido. Assim, toda vez que fizermos referência a essa variável, receberemos o valor que atribuímos a ela.

Como o nome sugere, o valor de uma variável pode mudar durante a execução do programa. Não devemos confundir essa mudança de valor com uma alteração do valor dos tipos primitivos, que, como definimos anteriormente, não podem ser alterados.

Na prática, todo valor de um tipo primitivo que for usado no programa é guardado em uma posição de memória. Se eu inicializo uma variável com um valor primitivo, eu vou alocar um espaço da memória do computador para esse valor e a variável receberá esse endereço - dizemos que a variável aponta para esse endereço ou valor.

Se duas variáveis são inicializadas com o valor 0, por exemplo, as duas apontarão para o mesmo endereço de memória, que guarda o valor primitivo 0.

Se uma dessas variáveis posteriormente recebe o valor 1 (aqui, recebe indica que estamos atribuindo à variável um valor diferente), ela deixa de apontar para o endereço de memória que guarda o valor 0, e passa a apontar para o endereço de memória que guarda o valor 1. A outra variável segue apontando para o mesmo endereço onde o valor 0 se encontra.

Quando uma variável é inicializada com um tipo estrutural (objeto ou função), mesmo que os valores mudem, ela ainda apontará para o mesmo endereço de memória.

Citei anteriormente o exemplo de uma casa em um endereço. Digamos que a casa tenha as propriedades material , com o valor tijolo, andares, com o valor 1, e cor com o valor amarela. No caso da reforma feita, se eu pintasse as paredes externas de azul, poderia expressar isso modificando o valor da propriedade cor para azul. A variável que guarda esse objeto vai continuar apontando para o mesmo endereço de memória, mas o conteúdo daquele espaço vai ser diferente.

Exemplos

Bom, até o momento procurei passar bastante da teoria de como tipos (primitivos e estruturais) e variáveis funcionam, mas pode ser muito complicado entender todos esses conceitos sem exemplos. Aqui vou dar exemplos e você pode reproduzir cada um deles no seu computador. Para que seja possível executar o código, você deve abrir as ferramentas de desenvolvedor no seu navegador apertando a tecla f12 do seu teclado. Então, procure pela aba Console. Caso tudo carregar da forma correta, ela se parecerá com isso:

É possível que existam mensagens na área inferior, mas não se preocupe. Ao lado da seta (>), você pode clicar e começar a digitar (ou colar) comandos em JavaScript que serão executados.

Ainda antes de começarmos, sempre que vocês virem os símbolos // no código, isso indica que tudo o que está à direita deles, é um comentário e será ignorado. Eu utilizarei isso para ajudar na compreensão de tudo que estamos fazendo. Após cada linha que não estiver comentada, a primeira linha comentada será o retorno que o interpretador de JavaScript irá retornar.

Em primeiro lugar, vamos testar usar valores de tipos primitivos:

// Vamos começar utilizando Números! Escolha um
// número e o digite ao lado do símbolo > no console:
42
// 42
// Você verá que o console imprimirá uma nova linha
// na sequência com o mesmo valor que foi colocado
// como um comentário acima.

Toda vez que escrevemos algo no console, o interpretador do JavaScript tentará avaliar o que foi digitado. Esses comandos são chamados de expressões. Uma expressão, em JavaScript, pode ser um valor de um tipo primitivo, um valor de um tipo estrutural, uma variável, ou uma combinação entre eles (lembrando que funções também são um tipo estrutural que não discutimos ainda). Quando a expressão é interpretada, ela retornará um resultado, que, no caso de colocarmos um valor primitivo, será o próprio valor primitivo.

// Vamos testar colocar outros valores primitivos que
// aprendemos e ver o resultado:
// Textos, em JavaScript, podem ser declarados de
// duas formas:
// Usando aspas simples:
'JavaScript'
// "Javascript"
// Usando aspas duplas:
"JavaScript"
// "Javascript"

// Booleanos:
true
// true
false
// false

// Nulo:
null
// null

// Indefinido:
undefined
// undefined

// Inteiros grandes também podem ser declarados de
// duas formas:
123456789n
// 123456789n
BigInt(123456789)
// 123456789n

// Símbolo:
Symbol()
// Symbol()

Também podemos ter expressões com tipos estruturais, conforme falamos antes. Vamos testar com objetos:

// Assim como textos são identificados com aspas simples
// ou duplas e inteiros grandes podem ser identificados
// pelo n no final ou com a função BigInt(), objetos são
// declarados de uma forma específica:
{}
// > {}
// Você verá que o retorno dessa expressão será diferente
// de outros retornos. A grande diferença aqui é a seta
// que tem antes do retorno {}. Essa seta indica que você
// pode clicar ali e ver alguma nova informação. No caso 
// de objetos, você poderá ver propriedades e, nesse caso 
// em particular, a única propriedade disponível é a
// propriedade __proto__: Object. A propriedade __proto__
// identifica o *protótipo* do objeto. Trataremos disso
// mais pra frente.
{ material: 'tijolo', andares: 1, cor: 'amarela' }
// > { material: 'tijolo', andares: 1, cor: 'amarela' }
// Clicando na seta nesse exemplo, veremos cada uma das
// propriedades que listamos assim como a propriedade
// __proto__.

Quando queremos usar um mesmo valor várias vezes em nosso programa, é interessante utilizarmos as variáveis. Em JavaScript, temos 3 formas de criar (ou declarar) uma variável.

// Ao executar cada uma dessas linhas, o retorno será o
// valor undefined. Sempre que uma variável é declarada,
// a expressão resolve para o valor indefinido (undefined).
var minhaVariavel
// undefined
let outraVariavel
// undefined
// Uma variável declarada com a palavra const não pode
// ser declarada sem um valor explícito, então
// inicializaremos a variável abaixo com o valor
// null
const maisUmaVariavel = null
// undefined

A palavra var é uma contração da palavra variable, cuja tradução é "variável". Até o ano de 2015, essa era a única forma de se declarar uma variável em JavaScript. Em 2015, foram introduzidas as palavras let, que pode ser traduzida como "dado", do verbo "dar", e const, que é uma contração de constant, cuja tradução é "constante". A const é chamada assim pois é a única cujo endereço apontado não pode ser alterado, ou seja, se a variável aponta para um valor primitivo, ela não pode ser alterada. Caso a variável aponte para um valor estrutural, o conteúdo do objeto ou da função pode ser alterado, mas não podemos ter uma nova atribuição de valor à variável.

Como mostramos antes, quando uma variável tem um valor primitivo e nós atribuímos outro valor para ela, o endereço para o qual a variável aponta, muda. Vamos ver o que isso significa na prática:

// No exemplo acima, criamos as variáveis:
// * minhaVariavel, utilizando a palavra "var"
//   (que é uma contração de "variable", cuja
//   tradução é "variável";
// * outraVariavel, utilizando a palavra "let"
//  (cuja tradução mais próxima, acredito,
//   seja "dado", do verbo "dar"); e
// * maisUmaVariavel, utilizando a palavra "const"
//   (que é uma contração de "constant",
//   cuja tradução é "constante").
// Agora, iremos tentar modificar o valor de cada
// uma delas:
minhaVariavel = 1;
// 1
// Perceba que, quando a variável recebe um novo
// valor, o resultado da expressão é o valor que
// foi atribuído à variável, e não mais indefinido.

outraVariavel = 'JavaScript';
// "JavaScript"

// Não se assuste! A expressão abaixo irá disparar
// um erro. Isso acontece por que não é permitido
// alterar o endereço para o qual uma variável
// inicializada com const aponta.
maisUmaVariavel = true;
// > Uncaught TypeError: Assignment to constant variable.
// A tradução do erro acima é:
// > Erro de tipo não capturado: Atribuição a variável
// constante.

// Agora veja a diferença se criarmos uma variável
// com o exemplo da casa que citamos:
const casa = {
  material: 'tijolo',
  andares: 1,
  cor: 'amarela',
};
// undefined

// Quando queremos ver o valor de uma propriedade
// de um objeto, podemos escrever isso de duas
// maneiras:
casa.cor;
// "amarela"
casa['cor'];
// "amarela"

// Na segunda forma, utilizamos um texto (ou string)
// para acessar a propriedade do objeto.
// O resultado das duas formas de acessar propriedades
// de um objeto é exatamente o mesmo.
// O caso onde usamos um texto pode ser usado quando
// o nome da propriedade contém caracteres que podem
// ser confundidos pelo interpretador de código (como
// um ponto, um hífen) ou ainda quando, no momento que
// estamos escrevendo o código, não sabemos qual o nome
// do campo que queremos acessar.
// No caso de não sabermos o valor previamente, ao
// invés de colocar o valor do texto diretamente,
// utilizamos uma variável, por exemplo:
let propriedade = 'cor';
// undefined
casa[propriedade];
// "amarela"

// A expressão acima é equivalente às duas formas de
// acesso que citamos antes, mas, se mudamos o valor
// da variável propriedade, podemos acessar uma
// propriedade diferente:
propriedade = 'material';
// "material"
casa[propriedade];
// "tijolo"

// Vamos tentar, então, modificar a propriedade "cor":
casa.cor = 'azul';
// "azul"

// Perceba que, dessa vez, não aconteceu erro nenhum!
// Poderíamos, sem problema algum, utilizar as outras
// formas de acesso da propriedade:
casa['cor'] = 'verde';
// "verde"
propriedade = 'cor';
// "cor"
casa[propriedade] = 'rosa';
// "rosa"

// Como discutimos antes, os tipos estruturais podem
// ser alterados, mas seu endereço continua o mesmo.
// Por isso é possível alterar propriedades de objetos
// que foram declarados com a palavra const.

Não fizemos nenhum teste apenas com as funções até o momento. Vamos falar sobre funções em mais detalhes em um próximo texto, mas podemos mostrar qual o modo padrão de se definir uma função:

// A expressão abaixo irá criar uma função com o nome
// minhaFuncao, que pode ser executada sempre que
// quisermos.
function minhaFuncao() {}
// undefined

// Temos aqui 4 partes na declaração:
// A palavra function, que indica que vamos declarar uma
//   função;
// O nome da função, que é opcional (podemos criar uma
//   função sem nome);
// Os parênteses indicam o espaço para parâmetros; e
// As chaves delimitam o corpo da função, ou a sequência
//   de expressões que serão executadas.
// Esse caso em especial não executa expressões.
// Podemos executar a expressão assim:
minhaFuncao();
// undefined

// Nesse caso, o retorno da expressão será indefinido
// (undefined), já que não declaramos explicitamente o
// retorno da função.

Conclusão

Parabéns! Você acabou de dar o primeiro passo para aprender a programar!

Nesse texto, aprendemos que existem tipos de dados que podem ser representados em JavaScript. Esses tipos estão divididos em 2 grupos: primitivos e estruturais.

Os tipos primitivos são:

undefined - para indicar a ausência não intencional de valor;
null - para indicar a ausência intencional de valor;
Boolean - valor lógico, podendo ser verdadeiro (true) ou falso (false);
Number - um número real;
BigInt - um número inteiro muito grande;
String - um texto; e
Symbol - um valor único;

Os tipos estruturais são:

Object - estrutura que guarda mais de um valor, cada um em uma propriedade; e
Function - bloco de código que pode ser executado quando conveniente.

Aprendemos também que podemos usar variáveis para guardar quaisquer valores que possam ser representados pelos tipos citados. Essas variáveis podem ser criadas usando uma de 3 palavras:

var - declara uma variável que pode ter o endereço a que ela se refere alterado;
let - declara uma variável que pode ter o endereço a que ela se refere alterado; e
const - declara uma variável cujo endereço não pode ser alterado.

Nós vimos, também, que determinadas expressões podem gerar erros de execução, como quando tentamos atribuir um valor diferente a uma variável declarada com a palavra const.

É muita coisa!

Todos os conceitos que tratamos nesse texto são conceitos fundamentais e entender eles plenamente vai ajudar você conforme nós avançarmos em tópicos mais avançados. Reler o texto pode ajudar a desenvolver essa compreensão e a criar a relação entre os termos em português e inglês. Caso o texto não tenha sido claro em algum ponto, envie uma mensagem por alguma das formas de contato na página Contato no menu.

Nos próximos textos iremos explorar mais as expressões do JavaScript assim como criar funções simples!