Que evento foi o @frontinsp! ♥️

Pra quem quiser rever, segue os slides da talk do Fernando Daciuk sobre "Immutable JavaScript" 😊

#frontinsampa #frontendweek #javascript

https://t.co/m2JQQ1ZsqR

Quer aprender #JavaScript e #React? Aparece na aula de hoje ao vivo e free às 21:45.
Aparece no youtube.com/c/collabcode ou na twitch.tv/marcobrunobr.

Terminamos tudo de #HTML e #CSS.

Ah! Se você perdeu as últimas aulas, assista elas nessa playlist: https://www.youtube.com/watch?v=NClqhzzyWxs&list=PLirko8T4cEmw1obIsfrj1jGoOxZIaOzEF&index=1

Aula de hoje é sobre as unidades de medida do #CSS: px; em; rem; %; vw; vh; ch; ex; unitless; vmin; vmax, Das 11 unidades de medida nós veremos hoje, 6.

Aparece pra trocarmos conhecimento às 22:00 ao vivo e de graça pela http://twitch.tv/marcobrunobr e http://youtube.com/c/collabcode .

Tem vídeo novo do #frontinsampa no YouTube galera: a Isabella Silveira da Work & Co apresenta como é possível utilizar #MachineLearning com #JavaScript para automatizar suas tarefas e aproveitar o ócio para coisas que realmente importam.

#javascript
A dica de hoje é: como clonar um objeto em JavaScript, copiando apenas algumas propriedades!

Sabemos que objetos em JavaScript são referências mutáveis em memória.

Existem alguns momentos em que precisamos criar uma cópia de um objeto, mas com apenas algumas propriedades, não com todas.

Por exemplo:

const user = {
  userId: 10293948,
  name: 'John Doe',
  age: 30
}

Olhe esse objeto acima. Ele contém algumas informações do usuário logado na nossa aplicação, e só está disponível no backend. Usamos a propriedade userId como uma "chave" para efetuar ações específicas com esse usuário: remover alguma informação específica dele, adicionar novas informações, etc.

Imagine uma situação onde temos esse código no backend da nossa aplicação, com Node.js, e precisamos passar os dados do usuário para o frontend, mas sem deixar o userId exposto, para que ele não seja usado de forma indevida.

Para isso, precisamos criar um novo objeto que será passado para o frontend, mas devemos remover o userId. Como fazer isso?

Existem algumas soluções. Acompanha comigo:

var newUser = {}
for (var prop in user) {
  if (prop !== 'userId') {
    newUser[prop] = user[prop]
  }
}
console.log(newUser)

Veja que, no código acima - usando ES5 - nós criamos um novo objeto newUser, e usamos um for in para copiar as propriedades de user, menos o userId. Funciona!

Outra forma seria assim:

var newUser = {}
for (var prop in user) {
  newUser[prop] = user[prop]
}
delete newUser.userId
console.log(newUser)

Fazemos o mesmo processo, só que dessa vez nós modificamos o novo objeto, removendo a propriedade userId, usando o operador delete.

Com ES6, existe uma forma muito simples de fazer, usando spread operator:

const { userId, ...newUser } = user
console.log(newUser)

O que está acontecendo?

A primeira coisa que precisamos fazer, é usar uma feature chamada destructuring assignment, que basicamente serve para criar novas variáveis "desconstruindo" um objeto:

const { name } = user
console.log(name)

Ao usar o código acima, eu estou dizendo o seguinte:
- Crie uma variável chamada name, que está dentro de um objeto (por isso a sintaxe de objeto envolvendo name;
- Passe para essa variável name o valor da propriedade de mesmo nome - name - que está dentro do objeto user, no caso, user.name.

Ao checar o valor de name, vamos receber a string 'John Doe'!

E agora, a parte mágica: usando o spread operator (três pontos) ao criar uma variável, junto com a feature de destructuring assignment, ele funciona fazendo com que todas as propriedades restantes nesse objeto - excluindo as que foram passadas antes do uso do spread - sejam criadas em um novo objeto e passadas para a variável com o nome que vem logo após os 3 pontos! O nome dessa feature é rest parameters. Olhe o código novamente:

const { userId, ...newUser } = user
console.log(newUser)

O que esse código faz, é basicamente criar 2 variáveis: userId e newUser.

A variável userId vai conter o valor de user.userId, como vimos acima. E a variável newUser vai conter todas as outras propriedades do objeto user, menos a propriedade userId!

Super legal, não? :D

A maior parte dos browsers modernos - e a versão mais recente do Node.js - já suportam essa feature!

Viu como ficou muito mais fácil remover propriedades de um objeto, criando um novo, e usando imutabilidade? 😁

#javascript

Dica rápida: criando arrays com tamanhos específicos de forma rápida!

Você pode usar o novo Array.from para isso:

const arr = Array.from({ length: 10 })
console.log(arr)

Isso irá criar um novo array com 10 itens undefined.

Se você precisar, por exemplo, criar um array numerado, de 1 a 10, pode usar um segundo argumento no método from, que recebe uma função que faz a mesma ação do método .map.

O código ficaria assim:

const arr = Array.from({ length: 10 }, (item, index) => index + 1)
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Veja que isso gera agora um array numerado, de 1 a 10, pois usamos o índice do item que está sendo iterado, e somamos 1 =)

❓ Por que funciona usando um objeto { length: 10 }? ❓

Porque um array nada mais é que um objeto! E esse objeto contém uma propriedade length. O método from de Array serve para criar um array à partir de outro array.

Como arrays são objetos em JavaScript, eles contém uma propriedade length com o tamanho do array. Então podemos usar esse "hack" para criar um novo array do tamanho que quisermos, e usar o segundo argumento para gerar os itens conforme nessa necessidade =)

Se quiser saber mais sobre o método map e outros métodos de array, dá uma olhada nessa live que fizemos com os alunos dos cursos Ninja, falando sobre o assunto:
https://www.youtube.com/watch?v=GDZswgpSYQg

CollabCode:
Nas lives surpresas que tenho feito, foco em trocar conhecimento sobre Coisas do #JavaScript Moderno. Temos vídeos sobre:

- var, let e const
- Template String
- Tagged Template String
- Arrow Function

As lives que já foram e as que virão estão
https://www.youtube.com/playlist?list=PLirko8T4cEmzs-mQkPO_vxfPxRZ1Wv5_m