Alguns Recursos do JavaScript Que Você Deveria Conhecer

Declaração de Variáveis Usando Let e Const

Para a declaração de variáveis utilize let no lugar de var.

let nome
nome = 'João Paulo'
console.log(nome)

E para a declaração de constantes, utilize const.

const nome = 'João Paulo'
console.log(nome)

Mas lembre que uma constante não pode ter seu valor alterado após sua declaração. Embora um objeto ainda pode ser atribuído com atributos:

const pessoa = {}
pessoa.nome = 'João Paulo'
console.log(pessoa.nome)

Declaração Abreviada de Objeto

Ao criar um objeto, utilize a maneira abreviada de declaração de Objeto ao invés da maneira antiga:

Maneira Antiga:

const nome = 'João Paulo'
const sobrenome = 'Siqueira'
const pessoa = {
	nome: nome,
	sobrenome: sobrenome
}

Maneira Abreviada:

const nome = 'João Paulo'
const sobrenome = 'Siqueira'
const pessoa = {
	nome,
	sobrenome
}

Atribuição via Desestruturação

É uma forma fácil de extrair dados de Arrays ou Objetos em variáveis distintas.

Desestruturação de Objeto

Maneira Antiga:

const pessoa = {
	nome: 'João Paulo',
	sobrenome: 'Siqueira'
}
const nome = pessoa.nome
const sobrenome = pessoa.sobrenome

Nova Maneira:

const pessoa = {
	nome: 'João Paulo',
	sobrenome: 'Siqueira'
}
const { nome, sobrenome } = pessoa
// ou dessa forma se deseja um nome diferente para a variável
const { nome: n, sobrenome: s } = pessoa

Desestruturação de Array

Maneira Antiga:

const lista = [ 'João Paulo', 'Siqueira' ]
const nome = lista[0]
const sobrenome = lista[1]

Nova Maneira:

const lista = [ 'João Paulo', 'Siqueira' ]
const [ nome, sobrenome ] = lista

Operador de Espalhamento (Spread Operator)

Representado por três pontos "...", permite que um objeto iterável, como um array ou string, possa ser "espalhado" em elementos individuais, ou possa ser passado como argumento de uma função que espera 0 ou mais parâmetros.

const array = [1, 2, 3]
const nome = 'João Paulo'
console.log(...array)
console.log(...nome)

Saída:

> 1 2 3
> 'J' 'o' 'ã' 'o' ' ' 'P' 'a' 'u' 'l' 'o'

Pode ser usada para copiar Array e Objeto:

const lista = [ 1, 2, 3 ]
const copiaLista = [ ...lista ]
const pessoa = { nome: 'João Paulo', sobrenome: 'Siqueira' }
const copiaPessoa = { ...pessoa }

Concatenar Listas:

const lista1 = [ 1, 2, 3 ]
const lista2 = [ 4, 5, 6 ]
const lista = [ ...lista1, ...lista2 ]
// lista === [ 1, 2, 3, 4, 5, 6 ]

Mesclar Objetos:

const obj1 = { a: 'Oi', b: 'Mundo' }
const obj2 = { a: 'Olá', c: '!' }
const merged = { ...obj1, ...obj2 }
// merged === { a: 'Olá', b: 'Mundo', c: '!' }

Passar como Parâmetro:

function somar(x, y, z) {
	return x + y + z
}
const numeros = [1, 2, 3]
console.log(somar(...numeros)) // saída: 6

Operador de Encadeamento Opcional (Optional Chaining)

Representado por "?.", esse operador funciona de maneira similar ao operador de encadeamento ".", exceto que o operador de encadeamento opcional fornece uma maneira segura de acessar propriedades de objeto aninhados, mesmo que uma propriedade intermediária não exista.

Maneira Antiga:

const pessoa = {
	nome: 'João Paulo',
	sobrenome: 'Siqueira',
	contatos: [
		{
			email: 'joaopaulo1094@gmail.com'
		}
	]
} 
// para acessar a propriedade email, é necessário fazer várias validações
// senão pode ocorrer uma exceção em tempo de execução

console.log(
	pessoa &&
	pessoa.contatos &&
	pessoa.contatos.length &&
	pessoa.contatos.[0] &&
	pessoa.contatos.[0].email
)

Nova Maneira:

const pessoa = {
	nome: 'João Paulo',
	sobrenome: 'Siqueira',
	contatos: [
		{
			email: 'joaopaulo1094@gmail.com'
		}
	]
}

console.log(pessoa?.contatos?.[0]?.email)

Operador de Coalescência Nula (Nullish Coalescing Operator)

É um operador lógico representado por "??", pode ser utilizado no lugar do operador lógico OR "||", para retornar o valor padrão apenas quando a variável é null ou undefined.

Exemplo com o Operador Lógico OR:

let count = 0
let text = ''

let qtd = count || 42
let message = text || 'Olá!'

console.log(qtd)     // 42 e não 0
console.log(message) // 'Olá' e não ''

O problema do Operador Lógico OR, é que ele considera uma string vazia ou um inteiro zerado como sendo um valor falseável.

Exemplo com o Operador Lógico ??:

let count = 0
let text = ''

let qtd = count ?? 42
let message = text ?? 'Olá!'

console.log(qtd)     // 0
console.log(message) // ''

Operador Ternário

O Operador Ternário é uma alternativa enxuta para substituir o if else, ele é composto por uma condição e duas operações.

Esse operador pode ser usado em várias situações, como na atribuição de valor.

Maneira Antiga:

let usuario = ''
let logado = true
if (logado) {
	usuario = 'João Paulo'
} else {
	usuario = 'Convidado'
}

Com o Operador Ternário:

const logado = true
const usuario = (logado) ? 'João Paulo' : 'Convidado'

Template String

Template String é um tipo de string que suporta expressões embutidas, com elas, podemos interpolar strings sem precisar do sinal de +.

Com o sinal de +:

const nome = 'João Paulo'
const valor1 = 0.1
const valor2 = 0.2
const msg = 'Quanto que é'
console.log('Olá ' + nome + ', ' + msg + ' ' + valor1 + ' + ' + valor2 + '?')

Com Template String:

const nome = 'João Paulo'
const valor1 = 0.1
const valor2 = 0.2
const msg = 'Quanto que é' console.log(`Olá ${nome}, ${msg} ${valor1} + ${valor2}?`

Arrow Functions

Uma Arrow Function possui uma sintaxe mais curta quando comparada a uma função tradicional.

Função Tradicional:

function greet() {
	console.log('Olá')
}

Arrow Function:

const greet = () => {
	console.log('Olá')
}

Função Tradicional com Parâmetro:

function greet(name) {
	console.log(`Olá ${name}`)
}

Arrow Function com Parâmetro:

const greet2 = name => {
	console.log(`Olá ${name}`)
}

Função Tradicional com Retorno:

function getName() {
	return 'João Paulo'
}

Arrow Function com Retorno:

const getName = () => 'João Paulo'

Import e Export

Em um projeto JavaScript moderno, é comum separar o seu código em vários módulos ou arquivos que executam tarefas específicas. Isso promove a organização e reutilização do código.

Exportações Explícitas (Named Exports)

Usado quando tem zero ou mais exports por módulo.

Usando Lista de Exportações:

// arquivo1.js
const nome = 'João Paulo'
const sobrenome = 'Siqueira'

export { nome, sobrenome }

Exportando Recursos Individuais:

// arquivo1.js
export const nome = 'João Paulo'
export const sobrenome = 'Siqueira'

Importações Explícitas

Importando Usando uma Lista:

// arquivo2.js
import { nome, sobrenome } from './arquivo1.js'
console.log(nome)
console.log(sobrenome)

Importando Como um Objeto:

// arquivo2.js
import * as pessoa from './arquivo1.js'
console.log(pessoa.nome)
console.log(pessoa.sobrenome)

Renomeando o Recurso Importado:

// arquivo2.js
import { nome as usuario } from './arquivo1.js'
console.log(usuario)

Exportação Padrão (Default Exports)

Usado Quando tem um export por módulo, ou seja, quando se deseja exportar uma única funcionalidade.

Exportação Padrão:

// arquivo1.js
const nome = 'João Paulo'
export default nome

Importação Padrão

A diferença é que não precisamos das chaves para importar e podemos escolher qualquer nome para o recurso importado.

Importação Padrão:

// arquivo2.js
import nome from './arquivo1.js'
console.log(nome)

Com um Nome Diferente:

// arquivo2.js
import usuario from './arquivo1.js'
console.log(usuario)