loading...

Conceitos simples de JavaScript Moderno

pachicodes profile image Pachi (she/her/ela) Updated on ・2 min read

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á')}
Enter fullscreen mode Exit fullscreen mode

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`);
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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};
Enter fullscreen mode Exit fullscreen mode

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"}

Enter fullscreen mode Exit fullscreen mode

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!

Discussion

pic
Editor guide
Collapse
atmonello profile image
André Monello

Parabéns pelo artigo! Certamente encoraja outros devs autodidatas e ainda sem muuuita experiência a trocar conhecimento.

Se me permite só apontar uma coisa: no exemplo de arrow functions, está const = ()..., faltou só nomear a variável da função.

Collapse
pachicodes profile image
Pachi (she/her/ela) Author

Obrigada!!!!
E obrigada pela correção, vou arrumar !