DICAS PARA INICIANTES JS

Tipo de dados ou datatypes

Antes de falarmos sobre tipos de dados, vamos valar de variáveis.

Uma variável é um lugar na memória onde podemos armazenar valores, certo? Mas podemos armazenar qualquer valor em uma varíavel? Em javascript, sim.

Podemos armazenar uma string, um número, um booleano, undefined, uma array, um objeto, uma função, um symbol. Enfim, em javascript podemos armazenar qualquer valor numa variável. Podemos inclusive armazenar valores de tipos diferentes na mesma variável. Mas você não vai querer fazer isso, acredite.

Ou seja, em javascript, se fizermos:


1 let foo = null
2 foo = "texto"

3 foo = 10

Não haverá qualquer problema de sintaxe e o código vai funcionar sem problemas, mas não devemos trocar deliberadamente os tipos de dados que armazenamos para não obtermos resultados indesejados.

Quando falamos “tipos de dados” em programação, estamos nos refereindo sobre tipos de valores que podemos armazenar numa variável ou num parâmetro de função.

Em javascript há 7 tipos primitivos:

string
number
boolean
null
undefined
symbol (somente no ES2015 +)
bigint (sinceramente, nunca precisei usar, e não é incomum achar em sites de renome que há apenas 6 tipos primitivos em javascript, e não 7).

Em javascript, tudo que não é um valor primitivo, é objeto.

Uma Array? É objeto.

Uma function? É um objeto - com a incrível capacidade de ser executado mas ainda assim, é um objeto.

Um Set? Objeto também.

Um Object? Esse não precisa nem falar né? 🤪

Então quando você ouvir falar em tipos de dados saiba que é simplesmente uma maneira de identificar que tipo de valor uma informação é.

Importante: Há diferentes tipos em diferentes linguagens. Mas em javascript temos os 7 tipos primitivos e mais os objetos.

A próxima dica é quase que uma continuação da dica número 1. Eu estou falando de:

Linguagem fortemente ou fracamente tipada.

Em algumas linguagens de programação precisamos informar qual o tipo de dado que uma variável irá armazenar no momento de sua declaração.

Por exemplo: em typescript, temos a seguinte sintaxe:


1 let meuTexto: string

Ou seja, falamos que esta variável aceita receber apenas strings.

Nesse caso específico não é uma boa prática deixar da forma acima devido a um conceito chamado “inferência de tipos”. Ou seja, em typescript, basta criar a variável normalmente com o seu valor que o typescript irá saber que se trata de uma variável que aceita apenas strings.

Veja outro exemplo em typescript:


1 function isOdd(n: number): boolean { return n % 2 }

Repare que estamos definindo o tipo de parâmetro que a função isOdd aceita além do tipo de retorno. Quando fazemos isso, podemos dizer que estamos tipando o parâmetro e o retorno da função.

Há linguagens que essa tipagem explicita é obrigatória, portanto, dizemos que é fortemente tipada. Já o javascript, que é uma linguagem fracamente tipada, não nos obriga definir os tipos para nada.

Orientação à objetos

orientação de objetos é uma linguagem que trabalha com alguns conceitos onde o pilar nesse tipo de programação é que tudo é um objeto. E por objeto entende-se um conjunto de características (propriedades) e funções (métodos).

Mas se tudo é objeto, o que são as classes? Pois bem, uma classe é como se fosse uma função que devolve um objeto com propriedades e métodos pré-definidos.

No javascript, por exemplo, quando fazemos:


1 const hoje = new Date()

Estamos criando um objeto (chamado hoje) a partir de uma classe (Date). Esse objeto possui várias propriedades e métodos, como getDate(), getFullYear() e mais um monte de métodos.

Repare o que aconteceu aqui: criamos um objeto novinho com várias coisas pré-definidas.

Numa linguagem orientada a objetos há a possibilidade de criarmos as nossas próprias classes que, ao serem utilizadas, vão devolver objetos.

Exemplo clássico:


1 const eu = new Pessoa()

Ou seja, a classe Pessoa cria e retorna um objeto, que agora está armazenado na const eu.

A ordem importa.

Eu vejo muita gente que está iniciando na área errar nesse ponto.

Imagine um formulário com um input e um botão. Imaginou? Agora veja o seguinte código.


1let valor = document.querySelector("input").value
2 document.querySelector("form").addEventListener("submit", function(e){
3	e.preventDefault()
4	console.log(valor)
5 })

O que vai acontecer quando o usuário digitar um valor no input e pressionar o botão? Se respondeu que não será mostrado nada no console, parabéns! É isso mesmo.

Esse código está mal pois no momento que o código é executado o input estará vazio e “valor” armazenará uma string vazia.

Mesmo que depois o usuário digite algo no input, esse “algo” não será refletido na variável. Por isso nada será exibido no console. O que queremos fazer, na verdade, é guardar o texto digitado na variável apenas quando o usuário clicar no botão, e não antes.

É isso por hoje. Espero que tenham curtido.

Dica extra:

Não se esqueça que um sinal de igual é operador de atribuição e dois ou três iguais é operador de comparação.


1 let isValid = false
2 if(isValid = true){
3	console.log("é válido")
4 }

Não só vai executar o trecho do bloco if como também vai inserir true na isValid que antes era false.