ESCOPOS, VAR, LET, CONST E SELETORES (Anotações do PRE-WORK - Bootcamp React.js do Fernando Daciuk)

ESCOPOS

Qualquer JavaScript importado na tag no navegador tem escopo global, então todos os arquivos se enxergam (herdam códigos), e isto é perigoso.

Função

As funções criam um novo escopo. Então o problema de escopo global no JavaScript foi resolvido inicialmente com IIFE, ou expressão de função imediatamente invocada:

(function (){
   'use strict'
   Todo o código dentro do arquivo fica dentro desta função.
})()

Módulo

Para substituir o IIFE foi desenvolvido em 2015, e implementado no ES6, o escopo de módulo, um atributo dentro da tag <script type="module">. Os arquivos agora podem se enxergar usando imports/exports:

arquivo2.js

export const nome_variavel = valor;
// ou 
export { nome_variavel }

arquivo1.js

import {nome_variavel} from "./arquivo1"; // não precisa usar a extensão .js

Mais em: https://blog.da2k.com.br/2019/02/25/ecmascript-modules-modulos-nativos-no-javascript

Bloco

Um bloco de código é um bloco entre chaves {} e algumas estruturas JavaScript geram escopo de bloco por usar um bloco de código: Estruturas condicionais como if e switch, e estruturas de repetição como for, while, do while, geram bloco de código. Estas estruturas não são expressões, por que elas não retornam um valor, apenas verificam e percorrem valores.

VAR, LET E CONST

Use preferencialmente o const ao invés do let e o let ao invés do var. O var gera hoisting/içamento que é o poder de usar variavies antes da declaração ou fora do escopo de bloco (fora da função ou condição), o que pode ocasionar resultados inesperados e ruins, algo que o let previne e não permite. O let é de escopo local: só é acessado no mesmo lugar em que foi declarado. São enxergadas pelas funções dentro de seu bloco mas não são enxergadas fora da função em que foi declarada.

Mas a maior parte do tempo a mutabilidade de valores pode ser perigosa e também ocasionar resultados inesperados, algo que a const previne pois seus valor é constante: nunca muda.

SELETORES

Os seletores getElementsByClass, getElementsByTagName, getElementById retornam uma HTMLCollection, elas são vivas e atualizam novos valores dinamicamente o que também pode gerar efeitos colaterais não desejados, por isso foi desenvolvido os novos seletores querySelector e querySelectorAll que retornam uma NodeList que não atualiza os valores sem antes fazer uma nova seleção.

As querySelector são seletores JavaScript que utilizam os mesmo seletores do CSS mas não é recomendado selecionar classes e id porque elas são mutáveis: além de ter que mudar o nome no arquivo HTML e no arquivo CSS teria ainda que mudar os nomes nos arquivos JavaScript. Por isso em 2010 surgiram os atributos data nas tags HTML5 que também previnem o escopo global das id (window.nome_de_alguma_ID

Então, classes são usadas como preferencialmente como seletores no CSS, os atributo data-nome-do-atributo são utilizados como seletores no JavaScript e as id somente para acessibilidade (dar foco em inputs, navegação interna de páginas/âncoras, etc). Modo de usar os atributo data no HTML:

<a href="#" data-js="link">

Modo de utilizar os atributo data no JavaScript:

const link = document.querySeletor(‘[data-js="link"]’);