de.front #001: hoisting, um conceito estranho.

tags hoisting, nesting, has, nullish

Opa! bem vindo a primeira edição do de.front! Aqui vamos falar sobre backend... não, não, sobre o universo do front end, com conteúdo relacionados as tecnologias do mercado, não vou mentir que os assuntos não vão ter necessariamente uma conexão, mas são de conteúdos que considerei legal compartilhar com vocês! enfim, espero que gostem, seguimos!

<aside>

CSS nesting

Acabou o uso o SASS? para quem usava o pre processador especialmente pelo seu nesting, já pode dizer adeus, o css agora trás essa funcionalidade nativamente e no momento em que escrevo isso, já temos um nível de disponibilidade de 88.19% do caniuseit.com estando disponível em todos os navegadores modernos!

div.container {
  display: flex;

  .card {
    background: blue;
  }
}

CSS :has

Seguindo na lógica de coisas que não precisamos fazer mais, acabou a gambiarra para estilizar um conteúdo dependendo do estado do seu filho, quantas horas já perdi tentando fazer isso prefiro nem comentar 🤡

div:has(.card.warning) {
  border: 1px solid red;
}

JS nullish coalescing operator

Agora para o mundo do javascript se você está acostumado a utilizar outros operadores como || e && temos um não tão novo operador, que vai facilitar ao definir um conteúdo evitando que fique em um estado nullish.

/* como o valor da primeira variável é nula, a string será retornada, qualquer valor considerado nullish que são null e undefined */

const naoTaAqui = null;
const meuMundo = naoTaAqui ?? "caiu";

console.log(meuMundo) // caiu

<main>

Já ouviu falar de hoisting no javascript? se sim, será que foi do jeito certo? 😧

A questão é, esse é um assunto que pode gerar algumas dúvidas, e por isso quero falar um tanto aqui sobre isso, dar uma visão diferente do que se acredita ser, por que, para se criar uma imagem mental correta do que está acontecendo quando o javascript visualiza essas instruções e como que ele lida com isso e quem sabe como que podemos usufruir dessa funcionalidade um tanto confusa do nosso amigo javascript.

Então, como que normalmente se é ensinado essa habilidade do javascript? bem, no momento em que o javascript executa o seu código, ele irá visualizar todas as declarações de variáveis e funções, trazer para o inicio do código e então executa-lo, então teoricamente, esse código:

printMyItems()

function printMyItems() {
  console.log(item1, item2)
}

var item1 = "lápis"
var item2 = "caneta"

viraria isso a partir do momento em que o javascript visualiza:

var item1 = "lápis"
var item2 = "caneta"

function printMyItems() {
  console.log(item1, item2)
}

printMyItems()

porém a gente sabe que isso não acontece, por que? quando o primeiro código é rodado o retorno é undefined no log, ué??

o javascript deveria ter essa habilidade incrivel de poder reorganizar o nosso código de maneira com que tudo possa rodar de maneira perfeita, já que ele sabe todas as declarações que existem dentro do código e já prepara para o executor só rodar e ser feliz, mas não é bem assim, olhando outro exemplo, é uma versão funcional:

printMyItems()

function printMyItems() {
  var item1 = "lápis"
  var item2 = "caneta"
  console.log(item1, item2)
}

então seguindo com a lógica inicial, o javascript teria a habilidade de perceber que a função está abaixo, e subiria para que possa ser executada:

function printMyItems() {
  var item1 = "lápis"
  var item2 = "caneta"
  console.log(item1, item2)
}

printMyItems() // agora sim, javascript inteligente 😎

tá, agora que já consegui colocar uma pulga atrás da orelha, o que acontece aqui? antes de eu voltar para o código, preciso começar dando um contexto, as funções em javascript tem uma habilidade diferente de todas as outras partes, que permite que ele seja usado de diversas maneiras que para qualquer não seria possível, e isso permite que até para o hoisting ele tenha um privilegio muito diferenciado, o nome desse privilegio é First Class Citizen, mantém isso aqui na mente por enquanto.

voltando ao hoisting o que acontece é que no ciclo de interpretação do código, passam por duas etapas diferentes, calma, o código não é executado duas vezes por conta disso, elas são separadas em alocação de memória e a real execução, essa alocação basicamente faz com que o javascript entenda quais são as declarações que ele deve guardar para ser utilizada mais tarde, e o que isso quer dizer na prática? vamos passar pelo primeiro exemplo:

fase 1 - alocação

printMyItems() // isso não é uma declaração, vou passar por enquanto

function printMyItems() { // opa, isso é uma declaração, vem pra memória
  console.log(item1, item2)
}

var item1 = "lápis" // opa, isso é uma declaração, vem pra memória
var item2 = "caneta" // opa, isso é uma declaração, vem pra memória

mas lembra que, rodar isso aqui, os items vão vir como undefined, mas a função vai rodar?
aqui entra o First Class Citizen em ação, por funções serem especiais, no momento de alocação de memória, o seu conteúdo já é alocado também!
já as variáveis não tem esse mesmo luxo e só ganham seu espaço cativo mas não importa para a memória o que tem ali dentro 😢

sabe que tem um caso interessante sobre isso? deixa eu vir com um exemplo dentro da mesma fase:

printMyItems() // isso não é uma declaração, vou passar por enquanto

function printMyItems() { // opa, isso é uma declaração, porém é chique, vem completa pra memória
  console.log(item1, item2)
}

function printMyItems() { // ei ei ei essa função já existe na memória, porém você sabe o que faz, vou substituir 😄
  console.log('só para causar')
}

var item1 = "lápis" // opa, isso é uma declaração, vem pra memória
var item2 = "caneta" // opa, isso é uma declaração, vem pra memória

var item1 = "borracha" // opa, você já existe aqui então posso ignorar por enquanto
var item2 = "corretor" // opa, você já existe aqui então posso ignorar por enquanto

Por conta disso, funções são sobrescritas em momento de alocação mas as variáveis são em execução, já que não importando o que tem dentro nesse momento ele é so undefined.

agora que você entende como o hoisting funciona, que no caso, não é nada disso de içar o conteúdo para cima mas de alocar seu conteúdo antes da execução real, como podemos utilizar isso no dia a dia? bem dentro de um contexto onde você precisa definir várias funções antes de chegar no conteúdo principal, você poderia simplesmente deixar essas funções construtoras embaixo das funções que tem a regra de negócio, que é o local que você normalmente vai precisar utilizar!

porém, se você não quiser se estressar com essas regras de usar ou não usar antes, também pode! e para isso basta adicionar a diretiva no inicio do arquivo:

'use strict'

esse amigo nosso trás algumas regras que não vou entrar no mérito nesse momento, mas uma delas é impedir que variáveis sejam utilizadas antes de suas declarações.

<footer>

e aí? se você chegou até aqui, obrigado! esse é a primeira postagem de algo que pretendo fazer durante um bom tempo, para melhorar meus conhecimentos nessa área que acho tão legal e também para ajudar vocês, abrir novas discussões e aprendizados.

me manda um feedback! gostou do conteúdo? quer ver mais? falei besteira? me avisa!

é nozes!