[pt-br]Conceitos simples de JavaScript Moderno

#javascript #codenewbie #braziliandevs

Eu escrevi esse post em inglês e hoje estou postando a versão em Português-BR.

Antes de começar, vou avisar que esse post é sobre mim tentando explicar esses conceitos para mim mesma lol
Esses conceitos tem coisas mais complexas, mas minhas anotações são simples só pra dar uma ideia.

Os conceitos de hoje são:
*Arrow functions,
*Template literals,
*Var, Let and Const,
*Operadores Ternarios,
*Shorthand object assignment and
*Spread operator.

Arrow Functions
Em resumo,Arrow Functions são funções escritas de uma forma mais curta.
Ela recebe esse nome porque eles usam um simbolo de flexa (arrow em inglês) => no lugar da palavra function (função).

//function tradicional
function oi() {
  console.log('Oi');
}

//arrow function
const ola = () => {console.log('Olá')}

Template Literals
Já fazia um tempo que eu usava esses, sem saber que tinha um no e especial haha.
É uma nova maneira de se criar uma string, e pra falar a verdade eu não sei bem como explicar em palavras, então vou mostrar na prática:

const nome = 'Ana';
const idade = 32;
// string Tradicional
console.log(nome + " tem" + idade + " anos");

//template literal
console.log(`${nome} tem ${idade} anos`);

O resultado final é o mesmo mas escrever template literal é mais fácil, eu não tenho que me preocupar com espaços e colocar toda string entre parenteses, e o código fica melhor organizado e mais fácil de ler.

Var, Let and Const
SEMPRE use const a não ser que você tenha certeza que o valor vai ser mudado, nesse caso use let. A famosa var está morta.

Operadores Ternarios (ou condicionais)
Esse é o unico operador que usa 3 operandos e é frequentemente usado no lugar do if/them .
Segue o exemplo:

//Usando If
var ehSextaFeira = false;
if(ehSextaFeira){
  console.log('É Sexta-feiraaa!!!!')
} else{
  console.log('Ainda não :(')
}

// using Ternary Operator
var ehSegunda = true;
console.log(ehSegunda ? 'Eba, mais uma semana!' : 'Eba, não é segunda')

Note que pra isso ter usado no lugar do if/else, você tem que ter um else. Os 3 valores tem que ser usados.

Shorthand Object Assignment
Se você quer definir um objeto no qual as chaves (keys) tem o mesmo nome que as variaveis passado como propriedades, você pode usar shorthand (versão mais curta) e apensar usar o nome da key:

//normal
const abc = {
  a:a,
  b:b,
  c:c,
};

//shorthand
const efg = { e, f, g};

Spread Operator
O último da lista, the Spread operator... Outro que eu ainda não sei explicar muito bem lol
Basicamente, ele pega um array ou objeto e expande ele. O Spread Operator usa ... como sintaxe

const obj1 = {a: 'a', b: 'b'};
const obj2 = {c: 'c', ...obj1};
console.log(obj2);

//O console log vai mostrar: Object {  a: "a",  b: "b",  c: "c"}

Isso é tudo por hoje pessoal.
Eu aprendi esses conceitos em inglês, então me perdooem se algo fico perdido em tradução.
Minha esperança é minhas anotações deem uma ajuda pra outros iniciantes como eu.

Aqui tá meu codepen aonde eu pratico esses conceitos.
: https://codepen.io/collection/DLMWOM/

brigada, e boa terça!