O que é JavaScript ?

JavaScript é uma linguagem de programação que permite manipular e implementar elementos em páginas web. Como por exemplo uma lista dinâmicas de itens.

Para melhor compreensão, três linguagens compõem uma página web:

• HTML: Linguagem de marcação usada para estruturar as páginas assim dando contexto a elas. Elementos como tabelas, parágrafos, imagens e entre outros elementos dentro da página.
• CSS: Linguagem de estilo, ou regras de estilo. Aqui definimos o estilo de cada elemento na nossa página. Por exemplo alterar a cor de fundo, mudar a fonte de um paragrafo.
• JavaScript: Linguagem de programação que permite controlar ou criar conteúdos totalmente dinâmicos.

Manipulando elementos

Para melhor exemplificar, veja o exemplo abaixo onde foi criado um parágrafo contendo um nome.

<p id="nome">FrontMaster</p>

Logo mais criamos uma constante para armazenamos aquele elemento cujo o id é nome.

const nome = document.getElementById("nome").

Após isso temos uma gama de possibilidades, desde alterar a cor da fonte, como alterar a tamanho fonte.

nome.style.color = "red";
nome.style.fontSize = "35px";

Temos a possibilidade também de alterar o HTML desse elemento

nome.innerHTML = 'Olá mundo';

E seguindo a mesma logica de poder alterar os elementos HTML também podemos oculta-los e mostra-los.

nome.style.display = "block";
nome.style.display = "none";

Sintaxe e declarações

O JavaScript é case-sensitive, por exemplo a variavel nome é diferente de Nome.

let nome;
let Nome;

As instruções são chamadas de declaração e tem como por separação o ponto e virgula (;).
Segundo a MDN : O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. 

Existem três tipos de declarações em JavaScript.

• var: Declara uma variável global ou local, pode-se adicionar uma valor inicial.
• let: Declara uma variável local de escopo do bloco, pode-se adicionar uma valor inicial.
• const: Declara uma constante de escopo de bloco, apenas de leitura.

Var

Quando usamos o var para declarar uma variável fora de uma função temos o nome de escopo global, já quando utilizamos ela dentro de uma função ela é um variável de escopo local. Conseguimos ler uma variável dentro de uma função que declaramos em um escopo global, porém não conseguimos ler a variável que declaramos dentro de uma função fora dela. Veja o exemplo abaixo:

var global = "escopo global";
   
function newFunction() {
  var local = "escopo local";
}

console.log(global)
console.log(local) // erro: local não está definido

Quando utilizamos o var podemos redeclarar uma variável com valor diferente

var global = "escopo global";
var global = "escopo global novamente";

Hosting

O Javascript tem um mecanismo chamado Hosting que coloca todas as declarações de funções e variáveis na parte superior do escopo antes que o código execute. Veja uma exemplo abaixo:

console.log(global);
var global = "escopo global";

Após o hosting será interpretado dessa forma:

var global;
console.log(global); //global is undefined
global = "escopo global";

As variáveis var foram para o topo e assim ficaram undefined;

Var e seus problemas

Pelo fato de o var deixar a redeclaração de variáveis pode ocorrer problemas caso você possua a mesma nomenclatura em varias partes do código gerando assim problema muito maior. Veja o exemplo abaixo:

var valor = "valor 10";
var hora = 10;

if (hora > 5) {
  var valor = "valor maior"; 
}
    
console.log(valor) // o resultado será "valor maior"

Se você já usou a variável valor em outras partes do código, o valor será sobrescrito. Isso provavelmente causará vários problemas no seu código. Então temos o let e const.

Let

O let é uma melhoria do var. Com ele não temos o problema de redeclaração de variável. Veja o exemplo abaixo:

let valor = "valor 10";
let hora = 10;

if (hora > 5) {
  let novoValor = "valor maior"; 
  console.log(novoValor); //output: "valor maior" 
}
    
console.log(novoValor); // Informará que a variável não está definida

O let pode ser atualizado, mas não pode ser declarado novamente.

let valor = "escopo global";
let valor = "escopo global novamente"; //Informara o erro de que "valor" já foi declarado

Porém se a declaração estiver em escopos diferentes não terá problema algum. Veja o exemplo abaixo:

let valor = "valor 10";
let hora = 10;

if (hora > 5) {
  let valor = "valor maior"; 
  console.log(valor); //output: "valor maior" 
}
    
console.log(valor); // output: "valor 10"

Veja que ele retorna o mesmo valor baseado no seu escopo atual. Já que estão em escopos diferentes, são tratadas como variáreis diferentes.

O let também sofrem com o hosting a diferença com o var é que se variável for usada antes de ser declarada o erro de Reference Error será mostrado.

Const

O const ele não pode ter seu valor alterado nem pode ser declarado novamente. Já que as variáveis const mantém seu valor constante. Assim como o let seu valor poderá ser acessado apenas dentro do seu escopo onde foram declaradas.

Você deve atribuir o valor da const no momento da sua declaração.

Você não pode alterar o valor de const porque isso gera erros de código; você pode alterar suas propriedades sem problemas, no contexto em que estamos trabalhando com objetos declarados const.

const aluno = {
  idade: 28,
  nome: "João"
}

A maneira correta de atualizar sua propriedade é:

aluno.idade = 25;
aluno.nome = "Jonh Doe";

Assim como o let e o var, o hosting afeta a const. Mas não é inicializada.

Referência: MDN Web docs, Freecodecamp