DEV Community: Lais Frigério

Programação funcional e a imutabilidade: 4 maneiras de clonar objetos no JavaScript

Lais Frigério — Mon, 10 Apr 2023 12:33:02 +0000

A imutabilidade é um princípio da Programação Funcional que se baseia em não alterar o estado dos dados.

No entanto, no JavaScript, as variáveis não-primitivas, tais como objetos e arrays, podem ser modificadas, mesmo quando declaradas utilizando a palavra reservada const.

E, para aplicar a imutabilidade usando a linguagem de programação JavaScript, vamos aprender 4 maneiras de clonar objetos ao invés de modificá-los.

Operador Spread

Com este operador podemos copiar o conteúdo de um objeto ou array para uma nova variável:

const person1 = {
    name: "Anne",
    role: {
        name: "Software Engineer"
    }
}

const person2 = { ...person1 }
person2.name = "John"

console.log(person1)
// { name: "Anne", role: { name: "Software Engineer" }}

console.log(person2)
// { name: "John", role: { name: "Software Engineer" }}

Mas este operador usa uma técnica chamada Shallow cloning que basicamente clona apenas a raiz do seu objeto para poupar processamento, e para todos os subs objetos é usado a referência do objeto principal.

Isso significa que, ao alterar a propriedade role.name do objeto person2 também vai refletir no objeto person1:

person2.role.name = "Associate Software Engineer"

console.log(person1)
// { name: "Anne", role: { name: "Associate Software Engineer" }}

console.log(person2)
// { name: "John", role: { name: "Associate Software Engineer" }}

Para resolver isso podemos usar uma técnica chamada Deep cloning que consiste em clonar tanto o objeto raiz quanto os subs:

const person1 = {
    name: "Anne",
    role: {
        name: "Software Engineer"
    }
}

const person2 = {
    ...person1,
    name: "John",
    role: { ...person1.role }
}

person2.role.name = "Associate Software Engineer"

console.log(person2)
// { name: "John", role: { name: "Associate Software Engineer" }}

console.log(person1)
// { name: "Anne", role: { name: "Software Engineer" }}

Object.assign

Com este método podemos copiar ou mesclar o conteúdo de um ou mais objetos para uma nova variável:

const person1 = {
    name: "Anne",
    role: {
        name: "Software Engineer"
    }
}

const person2 = Object.assign({}, person1)
person2.name = "John"

console.log(person1)
// { name: "Anne", role: { name: "Software Engineer" }}

console.log(person2)
// { name: "John", role: { name: "Software Engineer" }}

Mas este método também usa a técnica Shallow cloning. Portanto, é recomendado que este método seja utilizado para clonar objetos que não tenham objetos aninhados.

Object.freeze

Já este método, além de copiar o conteúdo de um objeto para uma nova variável, também deixa as propriedades congeladas, ou seja, as propriedades não podem ser modificadas:

const person1 = {
    name: "Anne",
    role: {
        name: "Software Engineer"
    }
}

const person2 = Object.freeze(person1)
person2.name = "John"

console.log(person1)
// { name: "Anne", role: { name: "Software Engineer" }}

console.log(person2)
// { name: "Anne", role: { name: "Software Engineer" }}

Mas este método também usa a técnica Shallow cloning. Portanto, mais uma vez é recomendado que este método seja utilizado apenas para clonar objetos que não tenham objetos aninhados.

JSON.stringify e JSON.parse

O método JSON.stringify() transforma um objeto JSON em uma string:

const person1 = {
    name: "Anne",
    role: {
        name: "Software Engineer"
    }
}

const person2Str = JSON.stringify(person1)
// '{"name":"Anne","role":{"name":"Software Engineer"}}'

Já o método JSON.parse() transforma uma string JSON válida em um objeto e/ou array:

const person1 = {
    name: "Anne",
    role: {
        name: "Software Engineer"
    }
}

const person2Str = JSON.stringify(person1)
// '{"name":"Anne","role":{"name":"Software Engineer"}}'

const person2 = JSON.parse(person2Str)
person2.name = "John"
person2.role.name = "Associate Software Engineer"

console.log(person1)
// { name: "Anne", role: { name: "Software Engineer" }}

console.log(person2)
// { name: "John", role: { name: "Associate Software Engineer" }}

Quando o método JSON.stringify() é acionado, ele transforma o conteúdo do objeto original em uma string JSON e as referências dos subs objetos são perdidas.

E ao usar o método JSON.parse() todo o objeto e/ou array é recriado em memória.

Portanto, é possível clonar objetos e/ou arrays usando os métodos stringify e parse. Mas cuidado com seu uso pois pode ocasionar problemas de desempenho.

Conhece mais maneiras de clonar objetos no JavaScript? Deixa nos comentários 👇

Variáveis primitivas no JavaScript (string, number) são imutáveis

Lais Frigério — Thu, 06 Apr 2023 22:27:15 +0000

No JavaScript temos 2 tipos de variáveis:

👉 Primitivas: String, Number, Boolean, Null, Undefined, BigInt e Symbol.

👉 Não Primitivas: Objetos (objeto, array e função)

As primitivas são consideradas IMUTÁVEIS. Isso mesmo: os tipos primitivos não são alterados 😮

"Como assim, Lais??"

As variáveis primitivas são alocadas em uma região da memória conhecidas como Stack - static allocation.

Nesta área, quando uma variável é reatribuída, um novo espaço em memória é alocado para guardar o novo valor. O antigo valor não é mais utilizado e, na sequência, o Garbage Collector vai limpar o espaço em memória que não é mais referenciado.

Por isso, as variáveis primitivas são consideradas IMUTÁVEIS!!

E como eu posso testar este comportamento?

Abre o navegador, vai na aba "Console", declara uma variável:

let text = "bola"

Na sequência tente realizar a seguinte alteração:

text[3] = "o"

Se fosse mutável, o seguinte console deveria retornar "bolo":

console.log(text)

Mas como a variável é imutável, o seguinte console continua retornando "bola":

console.log(text)

Li diversos artigos para entender esse comportamento. Vou indicar abaixo algumas leituras (todas em inglês):

👉The Secret Life of JavaScript

👉 Primitive X Non-Primitive

👉 How Memory works in JavaScript

Tem algo a complementar sobre o assunto? Deixa nos comentários 👇

Programação funcional: o que são funções puras, determinísticas e que não provocam efeitos colaterais

Lais Frigério — Wed, 22 Mar 2023 11:38:27 +0000

Programação funcional é um paradigma de construção e desenvolvimento de um software baseado em funções. Essas funções podem ser puras, que não provocam efeitos colaterais, ou impuras.

Funções Puras

É uma função que dada a mesma entrada (parâmetros), sempre retornará a mesma saída. Por conta disso, também são conhecidas como funções determinísticas.

A função a seguir, responsável por somar 2 valores, sempre retorna a mesma saída quando a mesma entrada é informada:

function sum (num1, num2) {
  return num1 + num2
}

sum(1,2) // sempre vai retornar 3
sum(2,2) // sempre vai retornar 4

Além disso, funções puras também são conhecidas por não provocarem mutação de estado ou efeitos colaterais. Isso significa que uma dependência externa (e.g variável) nunca pode ser alterada.

A seguir, vamos conhecer alguns exemplos de funções impuras.

Funções Impuras

Analise o seguinte trecho de código:

let message =  'Hello'

function showMessage (newMessage = message) {
  message = newMessage
  alert(message)
}

showMessage() // o alerta exibe o texto 'Hello'
console.log(message) // Hello

showMessage('Bye, Bye') // o alerta exibe o texto 'Bye, Bye'
console.log(message) // Bye, Bye

A função showMessage provoca um efeito colateral ao alterar o estado de uma variável externa: message. Logo, esta função é considerada impura.

Se uma função tem dependência de uma ou mais variáveis que podem ser alteradas, a função é considerada impura.

Lembra que as funções puras retornam sempre o mesmo valor ao passar como parâmetro a mesma entrada?

Pois bem, nas funções impuras isto não acontece.

As funções impuras podem retornar diferentes valores para a mesma entrada. No exemplo a seguir, a função multiplication pode retornar um valor diferente a cada chamada:


let multiplicationTable = 2;
function multiplication(num) {
  return num * multiplicationTable
}

Neste caso, a função multiplication tem uma dependência externa, a variável multiplicationTable. Ao chamar a função multiplication passando o valor 5 como parâmetro o retorno é 10:

multiplication(5) // retorna 10

Mas, se o valor da variável multiplicationTable for alterado em outro momento no código, ao acionar a função multiplication mesmo passando o valor 5 como parâmetro, a função vai ter um retorno diferente:

multiplicationTable = 3

multiplication(5) // retorna 15

Conclusão

Um software construído com base no paradigma funcional é composto tanto por funções puras e impuras. O ideal é construir uma aplicação através do desenvolvimento do maior número possível de funções determinísticas.

As funções puras são mais fáceis de testar, debugar e de fazer manutenção. Além do mais, é altamente recomendável que seu código tenha uma alta cobertura de casos de testes para funções puras.

Criando um clone do Jogo Wordle com JavaScript e praticando TDD

Lais Frigério — Mon, 27 Feb 2023 12:00:24 +0000

A Alura compõe o maior ecossistema de ensino em tecnologia do Brasil e tem como missão transformar vidas e carreiras. Hoje a plataforma consta com mais de 1200 cursos em diversas áreas de atuação, como back-end, front-end, mobile, dados, UX, entre outros.

Ademais, a escola consta com uma grande gama de conteúdos gratuitos, como artigos, vídeos em seu canal do Youtube, os Podcasts (Hipsters Ponto Tech, Dev Sem Fronteiras), as Imersões Dev, o Tech Guide (um guia de carreira para se transformar em um profissional em T) e o 7 Days Of Code para você colocar em prática seus conhecimentos através de desafios diários.

E, com o objetivo de contribuir para a comunidade, eu me juntei a Alura e lançamos um novo desafio no 7 Days Of Code: construir um clone do jogo Wordle usando HTML, CSS, JavaScript e Jest aplicando TDD.

O jogo Wordle foi desenvolvido pelo Josh Wardle e tornou-se viral durante a pandemia do COVID-19. O jogo foi adquirido pelo jornal The New York Times em Janeiro de 2022.

A seguir veja mais detalhes de cada dia do desafio.

Este é apenas o primeiro post de uma série que vou trazer relacionado a este desafio. Os próximos vão ser de cunho mais prático com foco na escrita dos testes automatizados.

Dia 01

No primeiro dia do desafio, você recebe um link para acessar o layout da aplicação no Figma. O objetivo é recriar a página com base no design proposto construindo a estrutura HTML e a estilização com CSS. Você é desafiado a usar HTML semântico, alinhamento de elementos da página utilizando Flexbox e/ou CSS Grid, além do reset de CSS para sobrepor a formatação original que cada navegador aplica.

Dia 02

No segundo dia, você deve definir um banco de palavras e desenvolver uma função que será responsável por escolher randomicamente a palavra que será adivinhada no jogo. Você é desafiado a desenvolver testes automatizados seguindo a prática TDD (Test Driven Development), que basicamente consiste em um desenvolvimento orientado a testes.

Dia 03

Esse é um dos dias mais importantes! Você vai começar a tornar a sua página mais dinâmica e interativa: você vai desenvolver toda a lógica para realizar palpites, levando em consideração as regras do jogo. Neste desafio, você precisa interagir com as funções de DOM (Document Object Model) do JavaScript, como o evento keydown. Além disso, para a escrita do testes é recomendado o uso da biblioteca JSDom responsável por facilitar a manipulação da página HTML usando Jest.

Dia 04

No quarto dia, você vai verificar se o palpite está correto, levando em consideração as regras do jogo e, se o palpite completo for correto, irá exibir um alerta. Você continua sendo desafio a escrever testes automatizados usando Jest, mock de funções e a biblioteca JSDom.

Dia 05

Nesse dia, você vai customizar a caixa de diálogo (alerta) usando uma biblioteca externa chamada Toastify, incluindo essa dependência no projeto. Depois disso, você terá um jogo funcional.

Dia 06

Chegando quase no final, o foco do dia é o uso do DOM. O desafio do dia será tornar o teclado virtual clicável, ou seja, ao pressionar uma das teclas, isso deverá refletir no board do seu jogo, usando o evento de clique.

Dia 07

No sétimo e último dia do desafio, você precisa adicionar um botão na página que irá zerar as informações, para que o jogador possa jogar novamente do início. Você irá fechar com chave de ouro!

Considerações finais

Como uma pessoa desenvolvedora front-end é fundamental solidificar seus conhecimentos de HTML, CSS e JavaScript. Nada melhor do que pegar um design definido no Figma e transformar em código. Com isso, você terá uma boa base para dar mergulhos mais profundos em outras tecnologias, como React, pré-processadores de CSS.

Ademais, além de praticar a escrita de testes, você é desafiado a configurar o Github para executar seus testes automaticamente e publicar sua aplicação usando o Github Actions e o Gitub Pages, respectivamente.