Mensageria é muito mais do que um jargão técnico. É uma ferramenta poderosa que revoluciona a forma como sistemas interagem e se comunicam entre si. Imagine uma rede complexa de sistemas distribuídos, cada um com sua própria tarefa e responsabilidade. Como garantir uma troca eficiente e confiável de informações entre eles? A resposta está na mensageria, pronta para facilitar essa interação.

Neste artigo, vamos explorar a fundo o conceito de mensageria. Vamos entender como ela permite a comunicação assíncrona entre diferentes partes de uma aplicação, proporcionando flexibilidade, escalabilidade e resiliência. Prepare-se para desvendar os segredos por trás dessa ferramenta fundamental no arsenal de qualquer desenvolvedor. 👨🏻‍💻✨

O que é a Mensageria?

Mensageria é uma maneira de fazer diferentes partes de um sistema trocarem informações de forma assíncrona, sem precisar esperar uma pela outra, as mensagens são enviadas e recebidas de forma independente. Isso torna a comunicação mais flexível e resistente a falhas, ideal para sistemas grandes e distribuídos.

Componentes Fundamentais

Para entender bem como a mensageria funciona, é importante conhecer os componentes principais:

1. Producer: É quem envia as mensagens. Pode ser uma aplicação, serviço ou qualquer parte do sistema que precisa comunicar algo a outro componente.
2. Consumer: É quem recebe as mensagens. Também pode ser uma aplicação, serviço ou parte do sistema que precisa processar a mensagem recebida.
3. Message Broker: É o correio central que gerencia as mensagens. Ele recebe, organiza, armazena e entrega as mensagens para os consumidores quando eles estão prontos para recebê-las.

Tipos de Comunicação

Existem dois tipos principais de comunicação na mensageria:

1. Point-to-Point (Ponto a Ponto): Nesse modelo, cada mensagem é enviada de um produtor para um único consumidor. É como enviar uma carta registrada que só o destinatário pode receber.
2. Publish/Subscribe (Publicar/Assinar): Nesse modelo, um produtor envia uma mensagem para vários consumidores ao mesmo tempo. É como postar algo nas redes sociais, onde todos os seguidores recebem a atualização.

Como Funciona um Serviço de Mensageria?

Agora que você conhece os componentes e os tipos de comunicação, vamos ver como um serviço de mensageria funciona na prática:

Produção da Mensagem

• Envio: Quando uma parte do sistema, chamada de produtor, tem uma mensagem para enviar, ela cria essa mensagem e a envia para o Message Broker. Por exemplo, pode ser um pedido de compra enviado por um sistema de e-commerce.
• Formato da Mensagem: As mensagens geralmente têm um formato padronizado (JSON, XML, etc.) para garantir que todos os componentes possam entender seu conteúdo.

Gerenciamento pelo Message Broker

• Recebimento: O Message Broker recebe a mensagem do produtor. Ele atua como intermediário, garantindo que a mensagem seja entregue corretamente.
• Armazenamento: Se o consumidor ainda não está pronto para processar a mensagem, o Message Broker armazena a mensagem temporariamente. Ele mantém as mensagens em filas (para comunicação ponto a ponto) ou em tópicos (para comunicação publicar/assinar).
• Distribuição: Quando o consumidor está pronto, o Message Broker entrega a mensagem. Ele pode fazer isso imediatamente ou depois, dependendo da disponibilidade do consumidor.

Consumo da Mensagem

• Recepção: Quando o consumidor está pronto para processar a mensagem, ele solicita ao Message Broker para receber a mensagem.
• Processamento: O consumidor então processa a mensagem. Isso pode significar atualizar um banco de dados, enviar um e-mail, ou qualquer outra ação que o sistema precise realizar.

Acknowledge (Reconhecimento)

• Confirmação de Recebimento: Após processar a mensagem, o consumidor envia uma confirmação de recebimento (acknowledge) ao Message Broker. Isso indica que a mensagem foi recebida e processada com sucesso.
• Remoção da Mensagem: Depois de receber a confirmação, o Message Broker pode remover a mensagem da fila ou do tópico, garantindo que não será processada novamente.

Resiliência e Escalabilidade

• Resiliência: Se o consumidor estiver temporariamente indisponível, o Message Broker pode manter a mensagem até que o consumidor esteja pronto, garantindo que nenhuma mensagem seja perdida.
• Escalabilidade: O sistema pode ser escalado facilmente adicionando mais produtores e consumidores, sem alterar a arquitetura do Message Broker. Isso permite lidar com grandes volumes de mensagens de forma eficiente.

Exemplo Prático em Java com Spring Boot usando o RabbitMQ

Para ilustrar como tudo isso funciona na prática, vamos configurar um serviço de mensageria usando RabbitMQ com Spring Boot. Este exemplo mostrará como configurar um produtor e um consumidor de mensagens.

Configuração Inicial
Primeiro, precisamos adicionar a dependência do RabbitMQ no arquivo pom.xml do seu projeto:

Configuração do RabbitMQ
Em seguida, configuramos o RabbitMQ no nosso projeto. Crie uma classe de configuração chamada RabbitConfig:

Produtor de Mensagens
Vamos criar uma classe responsável por publicar mensagens. Aqui está o código da classe BoardCreatedEventPublisher:

Consumidor de Mensagens
Vamos criar uma classe responsável por consumir as mensagens. Aqui está o código da classe BoardCreatedEventListener:

Chamando o Produtor de Mensagens
Finalmente, vamos integrar o código que chama a classe para publicar uma mensagem toda vez que um novo board é criado pelo usuário:

Neste exemplo, configuramos um sistema de mensageria utilizando o Message Broker RabbitMQ. Primeiramente, estabelecemos um exchange direto chamado board-exchange e uma fila chamada board-created-queue. Em seguida, definimos um binding que associa a fila board-created-queue ao exchange board-exchange, garantindo que as mensagens do tipo BoardCreatedEvent sejam corretamente roteadas para esta fila.

Embora não tenhamos abordado os detalhes sobre exchanges e bindings, são conceitos fundamentais em sistemas de mensageria. Eles definem as regras de roteamento das mensagens entre produtores e consumidores, garantindo sua entrega adequada.

No código do produtor, criamos uma classe chamada BoardCreatedEventPublisher, responsável por enviar mensagens para o exchange board-exchange usando o RabbitTemplate. Este template é uma ferramenta fornecida pelo Spring Boot para simplificar a publicação de mensagens em um exchange RabbitMQ.

Por outro lado, no código do consumidor, implementamos a classe BoardCreatedEventListener, que é anotada com @RabbitListener. Isso indica ao Spring Boot que esta classe é um consumidor de mensagens e deve ser notificada sempre que houver uma mensagem na fila board-created-queue. Ao receber uma mensagem, o método handleBoardCreatedEvent é invocado para processar a mensagem recebida.

Com isso, estabelecemos um fluxo de comunicação assíncrona entre os diferentes componentes do sistema, onde o produtor envia mensagens para o exchange e o consumidor as recebe da fila associada.

Conclusão

Exploramos neste artigo o poder da mensageria e sua capacidade de revolucionar a comunicação assíncrona entre sistemas distribuídos. Desde o estabelecimento de filas e troca de mensagens até a implementação de produtores e consumidores, vimos como a mensageria pode proporcionar flexibilidade, escalabilidade e resiliência aos nossos sistemas.

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que este artigo tenha contribuído para o seu entendimento da mensageria e suas aplicações. Mantenha-se atualizado e explore os conceitos apresentados em seus próximos projetos.

— Você pode me seguir no LinkedIn e no Github também. 💖

Se você é desenvolvedor, sabe como é importante escrever código que seja não apenas funcional, mas também legível e compreensível. Uma das maneiras mais eficazes de atingir esse objetivo é seguir as convenções de nomenclatura. Essas regras e práticas estabelecidas tornam seu código mais consistente e facilitam a colaboração com outros desenvolvedores. Neste artigo, vou te apresentar algumas das principais convenções de nomenclatura e como você pode aplicá-las no seu código.

Camel Case e Pascal Case: Um Mundo de Letras

Uma das convenções mais comuns é o Camel Case e o Pascal Case. No Camel Case, as palavras são escritas juntas e a primeira letra de cada palavra subsequente é maiúscula. Já no Pascal Case, a primeira letra também é maiúscula. Isso é particularmente útil quando estamos nomeando variáveis e funções.

Exemplos:

• Camel Case:
  userImageProfile, getUserByEmail, userService
• Pascal Case:
  UserImageProfile, GetUserByEmail, UserService

Snake Case e Kebab Case: Separando as Palavras

Outra abordagem é usar o Snake Case e o Kebab Case, em que as palavras são separadas por underscores ou hífens, respectivamente. O Snake Case é mais comum em linguagens como Python, enquanto o Kebab Case é frequentemente usado em URLs e nomes de diretórios e arquivos.

Exemplos:

• Snake Case:
  user_image_profile, get_user_by_email, set_user_phone
• Kebab Case:
  user-by-email, user-list, user-list-component

Convenções da Linguagem de Programação

Lembre-se de que diferentes linguagens de programação podem ter suas próprias convenções de nomenclatura. É essencial seguir essas convenções específicas da linguagem para tornar o código mais familiar para a comunidade.

Exemplo Prático

Vamos dar uma olhada em um exemplo de código que incorpora essas convenções:

class GreetingsWorld:
    def __init__(self, your_name):
        self.your_name = your_name
    
    def say_hello(self):
        print("Hello, " + self.your_name)


greeting = GreetingsWorld("Gizelly")
greeting.say_hello()  # output: "Hello, Gizelly"

Conclusão

Dominar as convenções de nomenclatura é um passo fundamental para escrever código limpo e compreensível. Ao aderir a essas práticas, você não apenas facilita a colaboração com outros desenvolvedores, mas também torna seu código mais profissional e de alta qualidade.

Lembre-se, a consistência é a chave. Escolha uma convenção siga em todo o código. Com nomes descritivos que revelem a finalidade das variáveis, funções ou classes. Evite abreviações obscuras que possam confundir outros desenvolvedores. Com isso você estará no caminho certo para se tornar um desenvolvedor de alto nível!

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que esse artigo tenha contribuído para o seu entendimento das principais convenções de nomenclatura. Mantenha esses conceitos em mente ao escreve seu próximo código e aproveite os benefícios de um desenvolvimento mais suave e colaborativo.

— Você pode me seguir no LinkedIn e no Github também. 💖

O RxJS é uma biblioteca JavaScript para programação reativa que permite trabalhar com fluxos de dados de forma assíncrona e encadeável. Um dos principais conceitos da programação reativa é o Subject, que é um tipo especial de Observable que permite que um ou mais valores sejam emitidos para um ou mais Observers.

Existem vários tipos de Subjects no RxJS, cada um com características e utilidades específicas. Neste artigo, vamos ver os principais tipos de Subjects e exemplos de como usá-los.

Subject

O Subject é o tipo mais básico de Subject e representa um Observable e um Observer ao mesmo tempo. Isso significa que, além de ser capaz de emitir valores para os seus Observers, ele também pode ser usado como um Observer para se inscrever em outros Observables.

Exemplo:

const subject = new Subject();

// Emitir um valor para os Observers
subject.next(1);

// Inscrever-se em um Observable
subject.subscribe(value => console.log(value));

BehaviourSubject

O BehaviourSubject é um tipo de Subject que armazena o último valor emitido e o envia para qualquer Observer que se inscrever nele. Isso é útil quando precisamos armazenar o estado do Subject e enviá-lo para novos Observers que se inscreverem nele.

Exemplo:

const subject = new BehaviourSubject(0); // Inicializando o BehaviourSubject com o valor 0

// Emitir um novo valor
subject.next(1);

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Imprime o valor 1

ReplaySubject

O ReplaySubject é um tipo de Subject que armazena todos os valores emitidos e os envia para qualquer Observer que se inscrever nele. Isso é útil quando queremos que todos os Observers recebam todos os valores emitidos pelo Subject, independentemente de quando eles se inscreverem.

Exemplo:

const subject = new ReplaySubject();

// Emitir alguns valores
subject.next(1);
subject.next(2);
subject.next(3);

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Imprime os valores 1, 2 e 3

AsyncSubject

O AsyncSubject é um tipo de Subject que só emite o último valor emitido quando o Subject é completado. Isso é útil quando queremos que todos os Observers recebam o último valor emitido pelo Subject assim que ele for completado.

Exemplo:

const subject = new AsyncSubject();

// Emitir alguns valores
subject.next(1);
subject.next(2);

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Não imprime nenhum valor

// Emitir o último valor e completar o Subject
subject.next(3);
subject.complete();

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Imprime o valor 3

MulticastObservable

O MulticastObservable é um tipo de Observable que permite que múltiplos Observers se inscrevam nele e recebam os mesmos valores emitidos. Isso é conseguido usando um Subject como intermediário entre o Observable e os Observers.

Exemplo:

// Criar um Observable
const sourceObservable = of(1, 2, 3);

// Criar um Subject
const subject = new Subject();

// Criar um MulticastObservable usando o Subject como intermediário
const multicastedObservable = sourceObservable.pipe(multicast(subject));

// Inscrever-se no MulticastObservable
multicastedObservable.subscribe(value => console.log(value));
multicastedObservable.subscribe(value => console.log(value));

// Iniciar a emissão de valores
multicastedObservable.connect();

Espero que esses exemplos ajudem a entender os diferentes tipos de Subjects do RxJS e como usá-los em aplicações reativas. Existem outros tipos de Subjects, como o PublishSubject, que não foram mencionados aqui, mas o objetivo foi apresentar os tipos mais comuns e úteis.

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que esse artigo tenha ajudado a compreender melhor os Subjects e como usá-los em suas aplicações.

— Você pode me seguir no LinkedIn e no Github também. 💖

Referências 🧐

Introduction | Learn RxJS

Quando carregamos um script em uma página, o navegador para de carregar o conteúdo da página até que o script seja baixado e executado. Isso pode afetar negativamente o tempo de carregamento da página, especialmente se o script for grande ou demorar muito para ser carregado.

Para evitar esse problema, podemos usar as tags async e defer para indicar ao navegador como deve tratar o script. Vamos ver como cada uma dessas tags funciona.

Async

A tag async indica ao navegador que o script deve ser baixado e executado assincronamente, ou seja, enquanto o navegador continua carregando o conteúdo da página. Isso significa que o script não vai parar o carregamento da página e será executado assim que for baixado.

Vejamos um exemplo de como usar a tag async:

<script src="script.js" async></script>

No exemplo acima, adicionamos a tag async ao script para indicar ao navegador que ele deve ser carregado e executado assincronamente.

Defer

A tag defer também indica ao navegador que o script deve ser baixado e executado assincronamente, mas com uma diferença importante: o script só será executado quando todo o conteúdo da página tiver sido carregado.

Vejamos um exemplo de como usar a tag defer:

<script src="script.js" defer></script>

No exemplo acima, adicionamos a tag defer ao script para indicar ao navegador que ele deve ser baixado assincronamente, mas só deve ser executado quando todo o conteúdo da página tiver sido carregado.

Qual a diferença entre async e defer?

A principal diferença entre async e defer é que a tag async indica ao navegador que o script deve ser executado assim que for baixado, enquanto a tag defer indica que o script só deve ser executado quando todo o conteúdo da página tiver sido carregado.

Outra diferença é que os scripts marcados com defer são executados na ordem em que aparecem na página, enquanto os scripts marcados com async podem ser executados em qualquer ordem. Isso pode ser importante se você tiver scripts que dependem uns dos outros.

Fim 😗🖖🏻

Com isso, encerro por aqui e espero tenha ajudado a entender como funcionam as tags async e defer e como elas podem ser usadas para otimizar o carregamento de scripts em suas páginas web.

— Você pode me seguir no LinkedIn e no Github também. 💖

Referências 🧐

MDN Web Docs

O Husky é uma ferramenta incrível que pode ajudar a padronizar as mensagens de commit em seu projeto. Ele funciona como um hook do git e pode ser configurado para validar e formatar as mensagens de commit antes que elas sejam enviadas para o repositório. Isso é útil para garantir que todas as mensagens de commit sejam escritas de acordo com um padrão específico e sejam consistentes com o resto do projeto.

Para começar a usar o Husky em seu projeto, basta instalá-lo como uma dependência do npm.

npm install husky --save-dev

Em seguida, basta adicionar as configurações do Husky ao arquivo package.json.

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

Essa configuração específica do Husky irá usar o commitlint para validar e formatar as mensagens de commit. Você também pode usar outras ferramentas, como o Conventional Commits, para ajudar a padronizar as mensagens de commit.

Além disso, é importante configurar o commitlint com as regras de formatação desejadas. Isso pode ser feito adicionando o commitlint-config-padrão como uma dependência do npm e adicionando as configurações ao arquivo package.json.

npm install @commitlint/config-conventional --save-dev

"commitlint": {
  "extends": [
    "@commitlint/config-conventional"
  ]
}

Agora, toda vez que um commit for realizado no seu projeto, o Husky irá validar a mensagem de commit de acordo com as regras configuradas pelo commitlint. Se a mensagem de commit não estiver de acordo com o padrão especificado, o Husky exibirá uma mensagem de erro e o commit não será enviado.

O uso do Husky é uma ótima maneira de garantir que todas as mensagens de commit em um projeto sejam padronizadas e de fácil compreensão. Isso ajuda a manter o histórico de commit limpo e organizado, facilitando a colaboração com outros desenvolvedores e a manutenção do projeto ao longo do tempo.

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que com dica rápida te ajude a manter o histórico de commit limpo e organizado.

— Você pode me seguir no LinkedIn e no Github também. 💖

Referências 🧐

• Husky - Git hooks
• Conventional Commits

Os componentes Smart e Dumb são dois tipos de componentes que podem ser usados no Angular. Eles diferem na forma como lidam com dados e lógica de negócios. Enquanto os componentes Smart (também conhecidos como componentes inteligentes ou componentes controladores) possuem lógica de negócios e tomam decisões importantes, os componentes Dumb (também conhecidos como componentes burros ou componentes de apresentação) são responsáveis apenas por apresentar dados e delegar decisões importantes para os componentes Smart.

Usar componentes Smart e Dumb é uma ótima maneira de manter a complexidade do código sob controle e garantir que cada componente tenha uma responsabilidade bem definida. Isso pode ajudar a tornar o código mais fácil de entender e manter, além de tornar a aplicação mais escalável.

Vejamos um exemplo prático de como os componentes Smart e Dumb podem ser usados no Angular. Suponha que tenhamos um componente Smart chamado “ProdutoListaComponent” que é responsável por exibir uma lista de produtos e permitir que o usuário adicione novos produtos à lista. Esse componente possui uma propriedade “produtos” que é um array de produtos e um método “adicionarProduto()” que adiciona um novo produto ao array.

Agora, vamos criar um componente Dumb chamado “ProdutoItemComponent” que é responsável por exibir cada item da lista de produtos.

Esse componente possui uma propriedade “produto” que é um objeto de produto e um método “removerProduto()” que remove o produto da lista. No entanto, ao invés de manipular os dados da lista diretamente, o componente Dumb delega essa tarefa para o componente Smart, através de um evento “removerProduto”.

Agora, vamos usar o componente Dumb “ProdutoItemComponent” no template do componente Smart “ProdutoListaComponent”. Vamos iterar sobre o array de produtos e passar cada item como entrada para o componente Dumb. Além disso, vamos criar um evento “removerProduto” que é disparado pelo componente Dumb quando o usuário clica no botão “Remover”. O componente Smart vai ouvir esse evento e remover o produto da lista.

Esse exemplo mostra como os componentes Smart e Dumb podem ser usados em conjunto no Angular para criar uma aplicação mais organizada e fácil de manter. O componente Smart “ProdutoListaComponent” é responsável por armazenar e manipular os dados da lista de produtos, enquanto o componente Dumb “ProdutoItemComponent” é responsável apenas por apresentar cada item da lista. Isso divide as responsabilidades de forma clara e ajuda a manter o código mais organizado.

Além disso, o uso de componentes Smart e Dumb permite que os componentes Dumb sejam reutilizados em diferentes contextos, pois eles são totalmente independentes e não possuem lógica de negócios. Isso pode ajudar a tornar a aplicação mais escalável e evitar a duplicação de código.

Em resumo, os componentes Smart e Dumb são uma ótima maneira de dividir as responsabilidades em uma aplicação Angular. Os componentes Smart lidam com lógica de negócios e tomam decisões importantes, enquanto os componentes Dumb são responsáveis apenas por apresentar dados e delegar decisões importantes para os componentes Smart. Isso pode ajudar a tornar o código mais fácil de entender e manter, além de tornar a aplicação mais escalável.

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que essas dicas te ajude a escrever um código mais limpo.

— Você pode me seguir no LinkedIn e no Github também. 💖

Referências 🧐

Angular

Existem diferentes formas de escrever a mesma regra de negocio no código. Além disso, cada linguagem de programação fornece diferentes sintaxes para executar uma tarefa.

Hoje vou te mostrar 3 caminhos diferentes que vão diminuir linhas de código, torná-lo menos verboso e de melhor compreensão. Mostrarei também o antes e depois de alguns códigos implementados usando os conceitos apresentados.

Operador Condicional Ternário 👩🏻‍✈️

É um operador usado frequentemente como um atalho para a instrução if. Utilizá-lo pode deixar o código mais limpo, visto que um bloco condicional if costuma a ter no mínimo cinco linhas que podem ser substituídas por apenas uma.

Sintaxe:

(condição) ? valor1 : valor2

Se a condição for verdadeira, o operador retornará o valor de valor1; se não, ele retorna o valor de valor2. Por exemplo, vamos retornar uma mensagem diferente baseada no valor da variável maiorDeIdade.

Exemplo com o bloco condicional tradicional: 😀

if (maiorDeIdade >= 18) {
   return 'Maior de idade';
} else {
   return 'Menor de idade';
}

Exemplo com o operador ternário: 🤩

(maiorDeIdade >= 18) ? 'Maior de idade' : 'Menor de idade';

Short-Circuiting 🩳

É uma maneira de encurtar verificações desnecessárias em nossas condicionais. Ela é usada quando queremos simplificar uma condição if.

Por exemplo, precisamos chamar a função buscarUsuarioPorId, apenas se a variável usuarioId tiver um valor verdadeiro.

Exemplo com a instrução if: 😀

if (usuarioId) {
   buscarUsuarioPorId(usuarioId);
}

Exemplo com a short-circuiting: 🤩

usuarioId && buscarUsuarioPorId(usuarioId);

Optional Chaining 🔗

É um operador que simplifica o acesso a valores de objetos aninhados quando é possível que uma referência ou função seja indefinida ou nula.

Saiba mais sobre ele🤌🏻

Ele vai verificar a existência das propriedades do objeto e retornar false se a propriedade não existir.

Considere o seguinte objeto: 💁🏻‍♀️

const pessoa = {
   nome: 'Gizelly',
   email: 'gi@test.com',
   endereco: {
      rua: 'Rua Z, n.10'
   }
}

Exemplo com o bloco condicional tradicional: 😀

if (pessoa.endereco) {
   if(pessoa.endereco.rua) {
      console.log(pessoa.endereco.rua);
   }
}

// ou

if (pessoa.endereco && pessoa.endereco.rua) {
   console.log(pessoa.endereco.rua);
}

Exemplo com o Optional Chaining: 🤩

console.log(pessoa?.endereco?.rua);

+Bônus 😎

Coalescência nula 👌🏻

É uma forma de retornar um valor padrão quando lidarmos com um null ou undefined.

Saiba mais sobre ele🤌🏻

Ele encurta o código em relação ao if-else, que pode tornar o código ainda mais curto. Vamos usar de exemplo o objeto pessoa criado anteriormente.

Exemplo sem o operador de coalescência nula: 😀

return pessoa?.email ? pessoa.email : 'E-mail não cadastrado!'

Exemplo com o operador de coalescência nula: 🤩

return pessoa?.email ?? 'E-mail não cadastrado!

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que essas dicas te ajude a escrever um código mais limpo.

— Você pode me seguir no LinkedIn e no Github também. 💖

Referências 🧐

MDN Web Docs

Existem duas formas de registrar funções no JavaScript, function expression e function declaration, hoje vamos conhecer cada uma delas e suas respectivas diferenças.

Function declaration

Uma declaração de função (ou function declaration) define uma função com os parâmetros especificados sem a necessidade de uma atribuição de variável. Ela é declarada usando a palavra-chave function.

Function expression

Uma Expressão de Função (ou function expression) funciona exatamente como uma function declaration, porém são funções anônimas, elas não possuem nomes e são executadas assim que são definidas.

A partir do ECMAScript 2015, foi introduzida as Arrow Functions(ou funções de seta), que é uma function expression com uma sintaxe mais curta, elas são bastante aplicadas em funções que recebem callbacks. Veja o exemplo abaixo de uma arrow function sendo usada como parâmetro na função map():

Qual é a diferença entre as duas?

A principal diferença é que a function declaration pode ser chamada antes de ser declarada sem que haja qualquer erro, já com a function expression não é possível, vai ser lançado um erro.

Referências

MDN Web Docs

Um recurso bastante útil do typescript(v3.7) é o optional chaining, ele é uma maneira de simplificar o acesso a valores de objetos aninhados quando é possível que uma referência ou função seja indefinida ou nula.

Para entender melhor, vamos usar um exemplo:

let user = {nome: '', email: '', address: null};
let street = user.address.street; // Error

O trecho de código acima irá lançar um erro:

`Uncaught TypeError: Cannot read property 'street' of null`

Isso acontece por que estamos tentando acessar uma propriedade ou chamar um método em um objeto null ou undefined. Fazendo uma verificação conseguimos resolver esse problema:

let user = {nome: '’, email: '’, address: null};
if (user && user.address && user.address.street) {
  let street = user.address.street;
  console.log(street) // undefined
}

Usando o optional chaining mas conhecido como “?.”, essa sintaxe se torna bem mais enxuta.
O código acima pode ser escrito da seguinte maneira:

let user = {nome: '', email: '', address: null};
let street = user?.address?.street;

console.log(street) // undefined

Outro recurso é o operador de coalescência nula “??”, ele é uma forma de retornar um valor padrão quando lidarmos com um null ou undefined.

Vamos combiná-lo com o optional chaining, reescrevendo nosso código:

let user = {nome: '', email: '', address: null};
let street = user?.address?.street ?? 'address not found'; 

console.log(street) // "address not found"

Como podemos notar o uso desses recursos nos ajuda a reduzir a quantidade de código, simplificando a leitura e a manutenção.

Referências

• Documentation - TypeScript 3.7
• Encadeamento opcional

Antigamente para manipular array era preciso usar o famoso for, ou muitas vezes recorrendo a biblioteca de terceiros, para percorrer de forma menos verbosa e conseguir um bom resultado.

Com ES6 temos algumas funcionalidades que servem para percorrer, manipular, encontrar valores dentro do array, de uma forma muito mais prática.

Vamos começar definido um array com alguns valores:

const arr = [1, 5, 3, 8, 2, 6];

A primeira função que vamos conhecer é o map()que percorre um array, executa uma ação e contrói um novo array.

No exemplo abaixo estamos somando cada item do array com a sua respectiva posição. Em resumo, o map percorre cada item do nosso array e executa a soma que definimos:

const newArr = arr.map((item, index) => item + index);
//[1, 6, 5, 11, 6, 11]

A próxima função que vamos conhecer é o reduce() que itera os itens de um array retornando um valor único.

Por exemplo, se precisamos calcular a soma de todos os itens do nosso array:

const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
//25

Seguindo com as funções, temos também o filter() que como o nome sugere, ele filtra os itens do array que passaram pela condição implementada retornando assim um novo array. Para retornar todos os números pares do nosso array usamos o seguinte exemplo:

const pairNumbers = arr.filter(item => item % 2 === 0);
//[8,2,6]

A informação que vem dentro do filter, precisa obrigatoriamente de um retorno booleano (true/false).

Por fim e não menos importante temos o find() para verificar se existe uma informação dentro do array, caso seja encontrada a mesma é retornada, caso contrário retorna undefined.

const find = arr.find(item => item === 8);
// 8

Mas e se tivesse mais de um item com o valor 8 ? nesse caso, o find sempre vai retornar o primeiro item encontrado.

Como vimos, com os recursos do ES6 podemos escrever códigos mais limpo e menos verboso.

Referência:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array