DEV Community: Thiago Pederzolli Machado da Silva

Passado e futuro?

Thiago Pederzolli Machado da Silva — Thu, 25 Mar 2021 21:05:09 +0000

Olá!

Se você chegou direto aqui e não tem base nenhuma sobre Reat, aconselho a voltar e ler o React e seus três mosqueteiros primeiro para se contextualizar melhor.

Agora se você já é familiarizado com os conceitos de componentes, propriedades e estados em React, boa leitura!💜

-------------------------------------------------------------

Dando continuidade aos textos sobre conceitos básicos de React, temos a questão de criação de componentes. A forma de como os componentes são criados em React dividem-se em duas fases, o início e evolução da ferramenta através do Class Component, até o momento que foi implementado os Hooks no React que tornaram viáveis utilizar algumas funcionalidades essenciais do React com Functional Components.

De sua origem até o surgimento dos Hooks, os estados só eram acessíveis através de Class Components. E essa implementação dos Hooks é algo recente,não vá lendo isso e achando que “ah, então agora só estudar Functional Components que ta tranquilo.”. Você irá quebrar a cara em diversas oportunidades de inserção no mercado.

Talvez não tenha mais tanto sentido na criação de Class Components, porém você ainda pode lidar com diversos códigos legados e outras ferramentas que criam a base dos componentes em forma de Class.

Imutabilidade:

Um detalhe importante de lembrar antes de entrar na diferenciação de como os componentes funcionam, é a questão da imutabilidade do React.

Por que é importante lembrar disso agora? Porque nos exemplos falarei sobre os estados e esse conceito é muito importante para entender a atualização de estados.

O que esse conceito em poucas palavras é a ideia de que um valor de uma variável nunca deve ser alterada diretamente, precisamos recuperar esse valor, alterá-lo em uma nova variável juntando o novo valor e então atribuir essa variável ao método de atualizar o estado, garantindo assim um novo espaço de memória com essa nova informação, sem afetar diretamente aquela informação anterior que já ocupava outro espaço na memória.

Class Components:

Baseado na premissa de Objects do React, o Class é um objeto que estende o objeto Component, um objeto nativo do React responsável por ter as principais propriedades e métodos para criação de componentes, por isso começamos ele com a seguinte sintaxe:

import React, { Component } from 'react';

class ExampleComponent extends Component {
  render() {
    return (
      <h1>Olá Mundo!</h1>
    )
  }
}

export default ExampleComponent;

Um dos principais métodos que ele herda é o render(), responsável por retornar o JSX daquele componente. Porém podemos criar novos métodos para utilizar neste componente. Porém, por padrão, os métodos criados não são vinculados a classe, para isso, precisamos invocar outro método herdado que é o constructor(), ele nos permitirá fazer o bind() do método criado com a instância, que é representada pelo termo this, quando você faz o bind do método com o this, você está vinculando aquele método à instância do componente associado com o elemento da DOM que representa esse componente.

Se você criar um método e usar diretamente no render, ele será executado, porém se ele não for de uso imediato, como um método que irá fazer uma atualização de estado, precisamos garantir o bind, para isso precisamos do método constructor() e dentro dele do método super(). Dentro do constructor(), primeiro declaramos o super() que irá garantir que nosso componente continuará herdando os métodos do Component e também será possível adicionar novos métodos.

Feito isso podemos fazer o bind() de nossa função e teremos algo assim:

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    console.log('atualiza um estado!');
  }

  render() {
    return (
      <h1>Olá Mundo!</h1>
    )
  }
}

export default ExampleComponent;

Lembrando que precisamos colocar o this antes do nome da função também para vincular ao método da nossa instância.

Sobre as props, o acesso é da mesma forma que se acessa os estados, através do this para vincular a instância atual, caso precise usar uma props para atualizar algum valor de estado inicial na hora de criar o state do componente, lembre-se passar as props por parâmetro para o constructor(props) e super(props):

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      newState: this.props.data
    }
  }

  render() {
    return (
      <h1>Olá Mundo!</h1>
    )
  }
}

export default ExampleComponent;

Por fim, outra questão muito importante do método constructor() é que é nele que conseguimos construir nossos estados dentro de um Class Component. A criação de estados é bem diferente de uma forma de criação de componente, no caso de Class Components, construimos dentro do constructor e sua atualização se dá pelo mesmo método, vou mostrar o exemplo clássico do contador com Class Component e Functional Component para que seja possível compreender como criar e atualizar o estado.

Em um Class Component teríamos um código assim:

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    }
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({
      count: this.state.count + 1,
    })
  }

  render() {
    return (
      <div>
        <h1>{count}</h1>
        <button
          type="button"
          onClick={this.increment}
        >
          Aumentar em 1
        </button>
      </div>
    );
  }
}

export default Counter;

Outro detalhe relevante da criação de componentes, ai tanto para Class quanto Functional é no return, que o JSX só permite o retorno de um elemento HTML por componente. Isso não quer dizer que você, literalmente, só pode retornar um elemento HTML por componente, mas o retorno final deve estar englobado dentro de um elemento só, por isso vocês podem perceber que o retorno do contador tem uma tag

e uma tag , mas ambas estão englobadas por uma tag .

Outra questão relevante sobre os componentes é que eles possuem ciclos de vida, que era de domínio do Class Component e foi permitido ao Functional Component repetir os comportamentos com a implementação de Hooks.

Os ciclos de vida referem-se aos momentos de renderização do componente e os métodos para trabalhar esses momentos acredito que são auto-explicativos. Sobre a implementação deles em código acredito que cabe um texto a parte para explicações, mas os principais são:

componentDidMount para executar uma ação após o componente ser inserido no DOM;
shouldComponentUpdate para avaliar se uma atualização do componente deve ou não acontecer naquele momento;
componentDidUpdate para executar uma ação após o componente ser atualizado;
componentWillUnmount para realizar uma ação antes de o componente ser desmontado.

Functional Components:

Componentes funcionais cresceram em termos de utilização após o lançamento dos Hooks, que permitem uso de estados e ciclos de vida. A sintaxe também acaba sendo mais simples, acabam-se as preocupações de bind, pois acaba a questão da herança de objetos, agora trabalhamos com funções, então a base do componente acaba sendo simples:

import React from 'react';

function ExampleComponent() {
  return (
    <h1>Olá Mundo</h1>
  )
}

export default ExampleComponent;

A partir dai podemos trabalhar com os estados a partir de um hook específico para isso que é o useState(). Focando no que é importante para nós, vamos nos atentar ao fato de o useState ser um método que irá, principalmente, retornar um array, que o que nos importa são os dois primeiros elementos desse array.

O primeiro elemento do nosso array será a variável que irá armazenar o valor do nosso estado inicial e quando ele for atualizado. O segundo elemento será o método responsável por atualizar o valor desse estado. Por convenção, os nomes desses elementos são, para o primeiro, o nome do estado que é algo relacionado ao dado que irá armazenar e, para o segundo, o prefixo set seguido do nome do estado. FIcará mais compreensível no exemplo abaixo.

Perceba que, diferentemente do Class Component, onde todos estados ficavam dentro do objeto this.state e tudo era atualizado pelo this.setState(), no Functional Component, cada estado possui uma variável própria e terá seu método para ser atualizado:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button
        type="button"
        onClick={increment}
      >
        Aumentar em 1
      </button>
    </div>
  );
}

export default Counter;

Perceba, também, que é passado como argumento para o useState o valor inicial da variável count.

Sobre os ciclos de vida com o Functional Component, temos outro Hook, que é useEffect(), ele também é um método que recebe dois argumentos, o primeiro é a função que deve ser executada e o segundo é um array de dependências.

Dependências essas que definirão o ciclo de funcionamento do useEffect(), por exemplo, se passarmos o array vazio, ele funcionará como o componentDidMount, executando a função passada para ele apenas uma vez. Isso é ótimo para momentos que trabalhamos com requisições API para atualizar dados do nosso componente.

Trago aqui parte do código do primeiro módulo do Ignite, trilha React, da Rocketseat como um breve exemplo de como funcionaria essa questão de utilizar o useEffect() com um ciclo de vida similar ao componentDidMount para atualizar um estado com o retorno de uma requisição API.

import React, { useEffect, useState } from "react";

function RepositoryList() {
  const [repositories, setRepositories] = useState([]);

  useEffect(() => {
    fetch('https://api.github.com/orgs/rocketseat/repos')
      .then(response => response.json())
      .then(data => setRepositories(data));
  }, []);

  return (
    <section>
      <h1>Repositórios</h1>
    </section>
  )
}

export default RepositoryList;

Esse código está incompleto em termos de funcionamento, porque precisaria explicar outros conceitos e já me alonguei nas explicações deste texto. Mas o foco dele é a sintaxe para entender o uso do useEffect().

Se você já estudou sobre promises, async/await, você pode estar se perguntando porque o uso do .then() ao invés de o async/await. O useEffect não aceita diretamente uma função assíncrona, então se você optar por trabalhar com async/await, seria necessário fazer uma função anônima que terá em seu corpo a função assíncrona que fará a requisição, tendo algo similar a:

import React, { useEffect, useState } from "react";

function RepositoryList() {
  const [repositories, setRepositories] = useState([]);

  useEffect(() => {
    const fetchRepos = async() => {
      const response = await fetch(`
         https://api.github.com/orgs/rocketseat/repos`);
      const data = await response.json();
      setRepositories(data);
    }

    fetchRepos();
  }, []);

  return (
    <section>
      <h1>Repositórios</h1>
    </section>
  )
}

export default RepositoryList;

E, ao meu ver, essas são as principais diferenças entre os métodos de criação de um componente que eu me deparei até o momento. Concorda? Acredita que há mais alguma diferença relevante? Me equivoquei em alguma informação? Por favor, não hesite em colaborar com qualquer informação, meu foco é contribuir com a comunidade, mas principalmente encontrar uma forma de documentar meu aprendizado e levar minhas compreensões ao maior alcance possível, para que possamos reforçar os entendimentos corretos e reparar entendimentos errôneos.

Ignite - Chapter I - ReactJs

Thiago Pederzolli Machado da Silva — Sun, 14 Mar 2021 18:39:34 +0000

Falaaa Dev! hahahahahah

Brincadeiras à parte, hoje venho compartilhar com vocês sobre meus aprendizados no fim do primeiro módulo do Ignite, trilha React. Foi uma semana de muito aprendizado, começando do básico para criar uma aplicação React do zero mesmo.

Na primeira parte do conteúdo, o que o Diego fez foi nos conduzir através do processo de criar a aplicação React do zero para entendermos o processo de funcionamento e ter uma visão mais ampla de como pensarmos a criação de uma aplicação.

Aprendemos sobre Babel e Webpack, como configurá-los, quais informações são importantes e como elas impactam o funcionamento da aplicação. A importância da diferenciação entre ambiente de desenvolvimento e de produção. A estrutura do React.

Na segunda parte entramos de fato na criação de componentes em React, onde foram abordados os conceitos principais de componentes, propriedades e estados. Se você quiser saber mais sobre, pode conferir esse meu texto sobre o React e seus três mosqueteiros.

Ele também falou sobre a ideia de imutabilidade no React, que é basicamente a ideia de que uma variável não deve ter seu valor alterado diretamente. Explicarei um pouco mais sobre imutabilidade em um texto que pretendo lançar ainda essa semana.

Na terceira parte foi onde conhecemos o segundo Hook do React, o useEffect(), que serve para que possamos criar funções a serem executadas de acordo com padrões pré-estabelecidos. Em poucas palavras, ele recebe dois argumentos, o primeiro é uma função e o segundo é um array de dependências e essas dependências ditarão quando a função declarada no primeiro argumento será executada. No texto que trarei sobre imutabilidade falo um pouco mais sobre o conceito e mostro um caso de uso do useEffect().

Na quarta e última parte do conteúdo, começamos a entrar no Fantástico mundo do TypeScript. Aprendemos a importância do TypeScript, como a questão de termos uma tipagem definida garante um funcionamento melhor da nossa aplicação, assim como também proporciona uma compreensão melhor de nosso código para quem estiver trabalhando com a gente.

Foi explicado o básico para implementação de interfaces TypeScript, que são o que definem os tipos esperados por cada variável, garantindo assim que não possamos, por exemplo, atribuir um número a um dado que espera um objeto. Também aprendemos como implementar isso no React, garantindo uma aplicação mais inteligente e uma forma mais segura de trabalhar.

Por fim, terminamos o módulo com um desafio focado em colocarmos em prática um dos conceitos mais importantes, ao meu ver, do React, que é justamente o de imutabilidade. Dentro de uma aplicação de lista de Tasks, era nossa tarefa implementar funções que atualizassem os estados, sem impactar diretamente o valor original daquele estado.

A ideia dessa documentação é traçar um roteiro de tudo que foi visto a cada módulo, resumindo os principais pontos e dando uma ideia de conceitos relevantes, com a intenção de explorar em textos maiores e com mais profundidade cada conceito desses, seguindo a ideia proposta no próprio Ignite.

Como comentado em algumas partes, alguns conceitos já estão presentes em textos já publicados, outros em textos aguardando publicação e outros em textos que estarão por vir.

React e seus três mosqueteiros.

Thiago Pederzolli Machado da Silva — Wed, 10 Mar 2021 22:53:55 +0000

Depois de muito tempo parado, por diversos motivos, estou aqui para compartilhar um pouco mais da minha jornada. Aproveitando essa nova etapa que surge na minha vida, iniciarei uma série de artigos voltados para React. Afinal é a ferramenta que uso no trabalho e onde todos meus estudos técnicos estarão direcionados.

Como primeiro passo, vou tentar explicar resumidamente do que se trata o React e seus principais conceitos.

React:

O React é uma biblioteca UI(User Interface), ou seja, é uma ferramenta para criação de telas, o famoso front-end. Ela é uma das principais ferramentas utilizadas hoje em dia por quem utiliza JavaScript para a criação da parte visual de suas aplicações. Ela é composta por alguns conceitos essenciais de funcionalidades. Os que abordarei hoje são: componentes, propriedades e estados.

Em relação a Componentes e Estados, vocês verão que há formas diferentes de trabalhar, eu abordarei isso em artigos específicos, falando um pouco da diferença entre Class Components e Functional Components, assim como Redux e ContextAPI, que são formas de trabalhar estado globalmente.

Componentes:

import React from 'react';

const Button = () => {
  return (
    <button type="button"> Olá! Bem vindo ao Universo React</button>
  )
}

export default Button;

A ideia de componentização é algo que deixa o React mais atrativo. É a possibilidade de quebrar sua aplicação em diversos pedaços, permitindo até mesmo utilizar o mesmo componente em diversas telas da aplicação.

Digamos que você tem várias telas que possuem botões similares entre si, você pode criar apenas um componente de botão e chamá-lo em cada uma dessas telas.

Outra situação clássica de uso da componentização é o Header de suas páginas, que normalmente se mantém igual em todas rotas, então você pode criá-lo como um componente só, adicioná-lo no arquivo principal de sua aplicação e assim ele irá estar presente em qualquer página que a pessoa usuária navegue.

Essa estrutura de componentes também garante um melhor fluxo de informação e uma aplicação mais otimizada. Diferente de modelos anteriores em que você trabalhava com o HTML, CSS e JS tudo de uma forma única e precisava a cada interação do usuário, ir até o servidor, carregar esses três arquivos e trazer todas informações novamente, com React você garante que, estruturando corretamente as páginas, só será necessário se preocupar em atualizar uma parte da aplicação referente a aquela interação específica.

Pegue o twitter web, por exemplo, se você navegar entre a seção Página Inicial e a Notificações, você perceberá que, das três colunas, apenas a central será alterada, que é a área da tela referente a interação da pessoa usuária, afinal de contas, o menu de seções e a área do “O que está acontecendo” não são impactadas pela interação.

Isso está diretamente linkado a ideia de Single Page Application do React, onde ele é responsável exclusivamente pela parte visual, enquanto os dados e regras de negócio ficam no back-end, servindo o React através de uma API, garantindo assim que não será necessário recarregar toda a aplicação quando houver uma interação.

Porém, você deve estar se perguntando “Ta, eu tenho um componente botão, que eu chamo em várias telas, mas e se eu quiser que a cor de fundo de um seja azul e outro tenha o fundo roxo?”

Vamos então falar do segundo conceito.

Propriedades, carinhosamente conhecida como props:

São valores que um componente pode receber, referentes a estilização, funcionalidade ou até mesmo dados que devem ser exibidos em tela.

Vamos continuar com o exemplo de diversos botões. Você tem lá suas várias telas e quer mudar a cor de fundo de algum botão em alguma determinada página, você primeiro precisa garantir que seu botão esteja apto a trabalhar com suas props e que elas possam, de fato, causar alguma mudança no componente do botão.

Garantido isso, você precisa então no arquivo em que sua tela é construída, passar essa essa informação para o componente botão, você teria uma estrutura similar a esta:


import React from 'react';

const Button = (props) => {
  const { text, isDisabled, bgColor } = props;
  return (
    <button 
      type="button"
      disabled={isDisabled}
      style={{ background: bgColor}}
    >
      {text}
    </button>
  )
}

export default Button;

E você pode passar diversas propriedades com objetivos diferentes como havia comentado. Quando comentei ali, pensando no botão, ele tem a funcionalidades, como estar habilitado ou não, isso pode ser passado por propriedades.

Você também pode trabalhar o texto do botão por propriedades, digamos que você tem um botão parecido em um site de compras, mas que na página inicial diz “Veja os detalhes do produto” e na página de detalhes vá dizer “Compre aqui este produto”, são outros valores que podem ser passados por propriedades.

No componente pai do botão, sua declaração ficará assim:

import React from 'react';
import Button from './Button';

function App() {
  return (
    <h1>
      Hello World
      <Button
        text="Olá! Bem vindo ao Universo React"
        isDisabled="true"
        bgColor="purple"
      />
    </h1>
  )
}

export default App;

E agora tu te pergunta “Tenho dois botões na mesma tela, mas quero que eles sejam exibidos em momentos diferentes, como proceder?”

Vamos falar do último conceito de hoje:

Estados, ou state como verão no código:

O conceito de estados é um conceito muito importante no React, porque é ele que dita as regras de como muita coisa vai funcionar em sua aplicação.

Hoje farei um apanhado de umas noções básicas pensando apenas em estados locais. Depois, quando eu abordar Redux e ContextAPI falarei de estados em um nível global de aplicação.

Estados são formas de armazenar informações dentro do seu componente e que podem ser utilizadas para conduzir a forma que o componente irá se comportar.

Continuando o exemplo do botão, vamos pensar em um cronômetro. Ele tem dois momentos: ativo e parado. Você pode ter um estado que vai controlar esses momentos. A partir desse estado, você pode definir uma série de fatores, como o texto que irá aparecer no botão, ou até mesmo um botão para cada momento.

Ele também terá um valor, referente ao tempo contabilizado, isso também pode ser armazenado em um estado.

E se a pessoa quer registrar os dados referentes ao que ela executou naquele espaço de tempo? Também é possível armazenar em um estado.

E a partir dessas diversas informações, é possível controlar todo dinamismo de um componente, definindo através do valor de cada estado, como se espera que o componente responda. É possível fazer uma lista que exiba os dados referentes a tarefa executada, garantir que o botão tenha o texto iniciar caso o estado esteja como inativo e o texto parar caso o estado esteja como ativo.

Abaixo temos uma ideia de como funcionaria um estado para definir qual texto será exibido na renderização do botão, caso o estado haveProps seja verdadeiro, exibe o texto que é passado por props pelo componente pai, caso seja falso, exibe o texto padrão.

import React, { useState } from 'react';

const Button = (props) => {
  const [haveProps, SetHaveProps] = useState(true);
  const { text, isDisabled, bgColor } = props;
  return (
    <button 
      type="button"
      disabled={isDisabled}
      style={{ background: bgColor}}
    >
      {haveProps ? text : 'Texto original'}
    </button>
  )
}

export default Button;

Então, espero que tenha ajudado a dar uma breve ideia do que é o React, como ele funciona para criação de telas, em breve venho comentar sobre diversos outros conceitos que fazem do React uma biblioteca tão utilizada nos dias atuais e como ele facilita muito algumas situações.

Meu primeiro freela e o caminho até ele!

Thiago Pederzolli Machado da Silva — Mon, 18 Jan 2021 18:41:36 +0000

Hoje venho compartilhar com vocês como consegui meu primeiro freela.

Isso mesmo, minha primeira oportunidade de trabalhar com desenvolvimento chegou. E os dois principais fatores que mais me deixaram feliz foi que chegou por reconhecimento e para trabalhar com o que eu realmente gosto no desenvolvimento, o Front-end.

A abordagem:

Em uma das minhas pausas de estudos, fui fazer o que qualquer dev em busca de uma oportunidade faz: conferir o Linkedin. Lá me deparei com uma mensagem perguntando se eu tinha disponibilidade para um freela.

Na hora a alegria já era absurda, mas como tenho meus compromissos e meus objetivos, precisava saber qual era o foco do freela. Para minha total alegria, era montar telas em React com styled-components e uma lib UI que o outro Dev havia já construindo com os components que deveriam ser importados para a construção das telas.

Porque falo sobre reconhecimento:

Um dos motivos pelo qual a pessoa optou por me abordar foi por me acompanhar no Linkedin, ver minhas publicações, minha evolução, meu esforço, meu empenho em ajudar a comunidade.

Foi extremamente gratificante ouvir isso. Pois consolida que cada vez mais o caminho que estou trilhando é o certo. Aumentando minha sede por conhecimento, engajamento e construção de valor para a comunidade.

Os aprendizados:

Listar todos aprendizados que esse projeto já vem me proporcionando e irá proporcionar seria impossível, não tem como mensurar tudo que esse trabalho irá agregar.

Mas consigo já pontuar alguns ensinamentos que ele me trouxe de grande relevância para etapas futuras, como: React com TypeScript, Styled-components, aprofundar os conhecimentos em CSS, gitflow, conventional commits, resolução de conflitos entre branchs, comunicação e colaboração.

Tudo isso e são poucos dias de projeto recém. Tenho certeza que esse trabalho ainda irá me agregar muito conhecimento que terei a maior honra em compartilhar com a comunidade para que, assim como eu, várias pessoas possam ter essas oportunidades na vida.

O que tirar desse pequeno relato?

Mostre-se, documente seu aprendizado e compartilhe com a comunidade. Gere valor para sua imagem, garanta que está sendo visto, participe das comunidades, esteja envolvido na evolução daqueles ao seu redor. Colabore da forma que for possível com o processo de aprendizado de alguém.

Não se prenda porque alguém já escreveu sobre aquele conceito, procure sua forma autêntica de ser, assim você irá perceber que um conceito pode ser explicado de diversas formas e talvez a sua forma de explicar é a que vai fazer aquele conceito ter sentido para alguém que antes não compreendia.

É o clássico caso do "Se der medo, vai com medo", mas não deixe de ir, somente assim você vai expandir sua zona de conforto, fazendo com que situações que te deixavam desconfortável não deixem mais.

This I Promise You - Entendendo o fluxo de Promise em JS

Thiago Pederzolli Machado da Silva — Fri, 18 Dec 2020 12:49:16 +0000

Hoje vim falar sobre promises. As promises surgem como uma alternativa para evitar o uso de muitas callbacks, que poderiam deixar o código pouco legível e para facilitar desenvolvimento de aplicações que precisem fazer requisições API.

Entender Promises é fundamental para esse fluxo de desenvolvimento, porque é em Promises que o fluxo de requisições para uma API funciona. Sua aplicação faz uma requisição à API externa e essa requisição retornará uma Promise, um objeto com diversas propriedades, sendo duas delas, o sucesso e o erro.

API:

API é uma forma de permitir uma aplicação se comunicar com outra, garantindo que uma aplicação que faça uma requisição possa acessar os dados de um determinado banco e trabalhar esses dados da forma que lhe agradar para exibir em sua aplicação.

Pense no fluxo do Ifood, existe o aplicativo e em algum lugar está armazenado as informações sobre os produtos de um determinado restaurante, quando você clica no restaurante, ele faz uma requisição para a API que faz a comunicação com o banco de dados e retorna a Promise dessa requisição. O restaurante existindo nesse banco de dados, o Ifood lida com a propriedade sucesso dessa Promise e nessa propriedade encontram-se as informações referentes aos pratos do restaurante.

Promises:

Uma promise possui três estados, pending, resolved, rejected. Pending é seu estágio inicial após a função que a chamou ser executada. Essa função que chamou a promise continuará sua execução até que a promise retorne algo.

Essa é um dos principais motivos de usarmos tanto promises, o aguardo por seu retorno não trava a aplicação, o que não depende de seu retorno segue sendo executado e o que depende vai para uma área especial, aguardando o retorno da promise para ser executado.

Resolved e Rejected referem-se ao seu retorno. Resolved é o estado de sucesso na requisição, rejected é quando houve algum problema que a Promise retorna um erro.

Com promises, você garante que as callbacks dela nunca serão chamadas antes de acabar a fila atual de execuções, que as callbacks chamadas posteriormente serão executadas de acordo com o fluxo, depois da conclusão da promise e que você pode fazer um encadeamento de callbacks para determinadas ações com o que for retornado da promise.

Construção de uma Promise:

Ela é feita a partir de um Constructor. Constructor nada mais é que uma função especial construtora de objetos. E sim, Promise nada mais é que um objeto com duas propriedades: resolve e reject.

Sua sintaxe é simples:

const promise = new Promise((resolve,reject) => {

}

O new é um operador que garante que estaremos criando um novo objeto baseado na função passada após o operador, logo, nessa sintaxe acima, estamos definindo que a variável promise irá armazenar um novo objeto baseado no consructor Promise.

Resolve e Reject:

Resolve e Reject são duas funções de retorno de uma promise. Serão as funções a serem executadas de acordo com o retorno da execução da promise. Se uma promise satisfaz a condição desejada, ela foi resolvida, logo será executado o que for passado para a função resolve, caso a condição não seja satisfeita, será rejeitada e será então executado o que for passado para a função reject.

Quer ver funcionando?

Abra o seu VSCode e estruture a seguinte linha de raciocínio:

const promise = (number) => {
  new Promise((resolve, reject) => {
    const numberInput = number;

    if(numberInput > 10) {
      return resolve(console.log('Excelente, promise resolvida com sucesso'));
    }
    return reject(console.log('Ops! Ocorreu algum erro com sua requisição, por favor, tente novamente.'));
  });
}

Entendendo o código acima:

promise é uma função que espera um argumento ao ser chamado, esse argumento refere-se ao parâmetro number e retorna uma promise.
O valor desse number é armazenado na variável numberInput.
O if verifica a condição do numberInput, se ele for maior que 10.
Caso o numberInput seja maior que 10, a promise será resolvida e terá o retorno no console a frase “Excelente, promise resolvida com sucesso”.
Caso o numberInput seja menor que 10, a promise será rejeitada e terá o retorno no console a frase “Ops! Ocorreu algum erro com a sua requisição, por favor, tente novamente”.

Chame a função passando um valor maior que 10 como argumento:

promise(12)

Agora rode novamente o comando no seu terminal:

node script.js

Ao rodar o comando, você verá que no seu terminal exibirá a seguinte mensagem:

“Excelente, promise resolvida com sucesso”

Altere o valor de chamada da função para um número menor que 10 e rode o comando novamente:

promise(2)

node script.js

“Ops! Ocorreu algum erro com sua requisição, por favor, tente novamente”

Dessa vez o retorno foi diferente, pois não foi satisfeita a condição para que sua requisição fosse bem sucedida.

Para ter uma perspectiva melhor do fluxo de uma promise, execute testes com o Math.random().

const randomNumber = Math.floor(Math.random() * 20)
promise(randomNumber);

fetch API:

fetch() é a função que é executada para fazer a requisição a uma API. Ela é uma função nativa do objeto Window(do seu navegador, no caso) que recebe como argumento o endpoint(termo utilizado para se referir ao link que deve ser utilizado para fazer a requisição para a API) e retorna a promise, resolvida ou não.

Normalmente esse retorno pode vir de várias formas, aqui vamos trabalhar com API de retornos JSON, que é algo muito similar a um objeto JavaScript, mas para manipularmos precisará de um pequeno tratamento.

.then() e .catch():

.then() e .catch() são as primeiras formas que tivemos de lidar com o retorno de promises. Lembrando que promises são assíncronas, mas o fluxo do nosso código não é, precisavamos de alguma forma de informar ao código que naquele bloco de código precisaria haver uma espera por uma resposta.

Para isso foi desenvolvido o .then(), ele faz parte de uma cadeia de encadeamento de funções, serve para tratar o retorno resolvido da promise através de uma callback functions. Em tradução literal, “then” significa “então”, logo na cadeia de funções, podemos entender, com ele vindo após o fetch que a lógica será “faça a requisição, espere o retorno e então execute esse código aqui”.

Já o .catch() serve para tratar o retorno rejeitado da promise, caso haja alguma falha no processo de requisição e ela retorne um erro, o catch, captura esse erro para que você possa utilizar a mensagem de erro para tentar entender qual foi a falha ou em uma aplicação gerar alguma notificação para a pessoa usuária de porque sua solicitação não retornou algo.

Vamos entender juntos esse fluxo, abra seu VScode, crie um arquivo script.js em outra pasta e prepare seu ambiente para que possas trabalhar com fetch direto no VSCode:

Você precisará trabalhar com uma dependência do node, chamada node-fetch. Pois, como comentado na descrição do fetchAPI, ela é nativa do Objeto Window, ou seja, funciona no ambiente de navegador. Essa dependência que vamos instalar irá permitir utilizar o fetch no contexto do node.js e verificar seu retorno no próprio VSCode.

Para começar, precisamos iniciar um arquivo package.json que irá armazenar as informações da dependência e permitir seu uso, para isso, rode o comando abaixo:

npm init -y

Feito esse procedimento, prossiga para instalação do node-fetch com o comando:

npm install node-fetch

Excelente! Agora seu ambiente está pronto para os primeiros experimentos com fetch. Para essa prática de fixação, utilizaremos uma API gratuita de citações da franquia star wars que retorna elas de forma aleatória:

http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote

No site acima, se copiado no seu navegador, estará o retorno que receberemos ao final do .then() que irá tratar o formato do retorno do fetch. Para uma melhor visualização, indico a extensão do chrome JSON Viewer, que irá garantir a estrutura para visualizar no formato adequado:

Será exibido no formato acima caso seja instalada a extensão JSON Viewer.

Sua primeira linha terá que solicitar a dependência, para atribuir um valor a fetch e tornar viável seu uso, logo seu código deve começar com:

const fetch = require('node-fetch');

Feito isso, podemos desenvolver a função:

function SWQuote() {
    fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
    .then((quotes) => console.log(quotes))
}

SWQuotes()

Ao rodar o comando node script.js, teremos um objeto similar ao seguinte objeto retornado no console:

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: Gunzip {
      _writeState: [Uint32Array],
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 6,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: true,
      allowHalfOpen: true,
      _transformState: [Object],
      _hadError: false,
      bytesWritten: 0,
      _handle: [Zlib],
      _outBuffer: <Buffer 7b 22 69 64 22 3a 35 34 2c 22 73 74 61 72 57 61 72 73 51 75 6f 74 65 22 3a 22 52 65 6d 65 6d 62 65 72 2c 20 6d 79 20 64 65 61 72 20 4f 62 69 2d 57 61 ... 16334 more bytes>,
      _outOffset: 0,
      _chunkSize: 16384,
      _defaultFlushFlag: 2,
      _finishFlushFlag: 2,
      _defaultFullFlushFlag: 3,
      _info: undefined,
      _level: -1,
      _strategy: 0,
      [Symbol(kCapture)]: false
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

Agora entra a questão que havia comentado sobre o tipo de retorno da requisição. Dessa forma, ela não foi tratada ainda. Mas não se preocupe, não há necessidade de entender esse objeto agora e muito menos se desesperar com essa ideia de uma lógica para tratar essa informação e obter o que desejamos. Felizmente, como realmente esse tipo de processo é rotineiro nos dias de uma pessoa desenvolvedora, já existe uma funcionalidade para isso, que é a função .json().

Vamos evoluir nosso código para termos exatamente a resposta que desejamos, tratando esse primeiro objeto:

function SWQuote() {
    fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
  .then((quotes) => quotes.json())
  .then((quote) => console.log(quote))
}

SWQuotes()

Executando mais uma vez o comando node script.js, agora você terá um retorno similar ao abaixo, dado que a API retorna citações de forma aleatória, então pode não ser a mesma citação.

{
  id: 6,
  starWarsQuote: 'It’s the ship that made the Kessel run in less than twelve parsecs. I’ve outrun Imperial starships. Not the local bulk cruisers, mind you. I’m talking about the big Corellian ships, now. She’s fast enough for you, old man. — Han Solo',
  faction: 4
}

Para entender então o que fizemos:

fetch() faz a requisição à API e retorna a promise com seu resolve e reject.
O primeiro .then() pega esse retorno e faz o tratamento para json.
O segundo .then() pega o retorno do tratamento e nos exibe no console como fica.

Ficou faltando agora lidarmos com algum possível erro ao longo do processo de requisição. Fazemos isso com a função .catch(), que será sempre a última função no nosso encadeamento de funções, justamente para capturar o erro ao fim do processo e permitir que você possa manipulá-lo como achar mais adequado.

function SWQuote() {
    fetch('http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
    .then((quotes) => quotes.json())
    .then((quote) => console.log(quote))
    .catch((error) => console.log(error))
}

No código acima, perceba que foi feita uma leve alteração no link para a API, apagando o g em “digital” para forçar um erro. Abaixo, perceba a diferença da mensagem com o .catch() para informar o erro e sem o .catch():

// com o .catch((error) => console.log(error))
FetchError: request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk
    at ClientRequest.<anonymous> (/media/thiago-troll/5C112506248A591C/trybe/trybe-exercises/modulo_intro_web/bloco_9/dia_2/fetch_API/node_modules/node-fetch/lib/index.js:1461:11)
    at ClientRequest.emit (events.js:315:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  type: 'system',
  errno: 'ENOTFOUND',
  code: 'ENOTFOUND'
}

// sem o .catch((error) => console.log(error))
(node:117135) UnhandledPromiseRejectionWarning: FetchError: request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk
    at ClientRequest.<anonymous> (/media/thiago-troll/5C112506248A591C/trybe/trybe-exercises/modulo_intro_web/bloco_9/dia_2/fetch_API/node_modules/node-fetch/lib/index.js:1461:11)
    at ClientRequest.emit (events.js:315:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
(node:117135) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:117135) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

E você pode tratar ainda mais esse erro, altere seu código para:

function SWQuote() {
    fetch('http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
    .then((quotes) => quotes.json())
    .then((quote) => console.log(quote))
    .catch((error) => console.log(error.message))
}

Ao rodar o comando, você receberá um retorno similar a este:

request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk

async/await:

Com a evolução da linguagem, a partir do ES2017, surge o async/await. Que é uma sintaxe mais confortável de se trabalhar com requisições assíncronas, ela acaba com essa verbosidade da cadeia de vários .then() e permite uma sintaxe por linhas, deixando a legibilidade do código mais agradável.

Podemos pegar a função desenvolvida acima com .then() e refatorá-la para async/await, ficando da seguinte maneira:

async function SWQuotes() {
    const quotes = await fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote');
    const quote = await quotes.json();
    console.log(quote);
}

SWQuotes()

Você pode rodar o node script.js e verá que o retorno continua similar ao que tinha antes:

{
  id: 12,
  starWarsQuote: 'I sense something. A presence I have not felt since…. (A New Hope) - Darth Vader',
  faction: 1
}

Entendendo o código acima:

A declaração async antes da função informa ao script que a função que vem a seguir é de caráter assíncrono e irá aguardar o retorno de algo para prosseguir com sua execução.
A declaração de await antes do fetch() e do tratamento do JSON tem o mesmo significado. Em tradução livre, await pode significar aguardar. O que ele faz é informar ao código que, para atribuir o valor a variável quotes e quote, ele deve aguardar a resolução do que está sendo realizado após o await.

Agora você deve estar se perguntando como lidar com erros com essa sintaxe. Ai que entra um outro bloco que é o try/catch. É uma sintaxe onde o try vai ser responsável pelo sucesso e o catch segue responsável pela captura do erro.

async function SWQuotes() {
    try {
        const quotes = await fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote');
        const quote = await quotes.json();
  return console.log(quote);
} catch (error) {
        return console.log(error.message);
    }
}

SWQuotes();

Ao executar esse código, você irá obter sucesso na requisição e terá como retorno uma mensagem similar a de quando usou o .then() ou quando usou o async/await sem o try/catch, que será:

{
  id: 53,
  starWarsQuote: 'An object cannot make you good or evil. The temptation of power, forbidden knowledge, even the desire to do good can lead some down that path. But only you can change yourself. — Bendu',
  faction: 2
}

Agora se repetirmos o mesmo erro do exemplo da parte do conteúdo de .catch(), apagando o g em digital, o código ficará assim:

async function SWQuotes() {
    try {
        const quotes = await fetch('http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote');
        const quote = await quotes.json();
  return console.log(quote);
} catch (error) {
        return console.log(error.message);
    }
}

SWQuotes();

Teremos o mesmo retorno de quando usamos o .catch() encadeado com as funções .then():

request to http://swquotesapi.diitaljedi.dk/api/SWQuote/RandomStarWarsQuote failed, reason: getaddrinfo ENOTFOUND swquotesapi.diitaljedi.dk

Espero ter ajudadao a compreender melhor um fluxo tão importante no nosso cenário. Mas também entenda que será algo constante nos seus dias, logo, se não compreendeu totalmente, a prática no seu dia-a-dia vai lhe ajudar a absorver o conceito.

Recebidos com R de Reconhecimento.

Thiago Pederzolli Machado da Silva — Tue, 08 Dec 2020 20:58:33 +0000

Hoje vou contar um pouco mais da minha história, porque hoje foi dia de Recebidinhos. Mas são recebidinhos que, para mim, representam muito mais que um mimo. Representam os sentimentos de pertencimento e reconhecimento.

Muito falei de adaptabilidade na minha participação da Expansion Week, porque venho de uma vida de processos onde a adaptação era o requisito básico de sobrevivência. Filho de professores municipários, fui bolsista em escola particular entre filhos de médicos, juízes, pecuaristas. Depois era um metaleiro dentro da faculdade de Educação Física, onde majoritariamente reinava o pagode. Por fim, na psicologia voltava o contexto do colégio, bolsista em Universidade Particular e depois de formado entrando na psicanálise e me deparando com um dos contextos mais elitistas que me deparei na vida. Sem contar a exclusão clássica por sempre estar acima do peso.

Transitando entre esses cenários foi que fui aprendendo melhor a ler e interpretar as pessoas, me adaptar, conseguir captar sinais que passavam despercebido por diversas outras pessoas. Sempre em busca de um pertencer onde eu pudesse ser autêntico, mas era complicado ter assunto quando tu passou as férias na própria cidade jogando bola com os vizinhos e teus colegas foram passar um tempo na Europa, ou então querer sair com a turma de faculdade e não saber nem o “Dois pra lá, dois pra cá”.

Na psicologia eu havia encontrado satisfação profissional, gosto muito do trabalho que faço na clínica e o impacto que causava. Mas a comunidade nunca me gerou a sensação de pertencimento. Aqui onde vivo é um contexto conservador, cheio de preconceito, conduzido por pessoas que aparecem apenas para alimentar o próprio ego. E quem me acompanha sabe o meu jeito de ser e o quanto isso me deixava mal.

Veio a pandemia e precisei me reinventar, ingressei na programação mais pelo que vi da comunidade do que pela satisfação do primeiro ‘Hello World’. E olha que a satisfação dos primeiros códigos foi absurda!

E conforme ia avançando nesse universo, a satisfação ia aumentando. Cada novo vínculo construído através da minha autenticidade reforçava essa sensação de pertencer. Eu sempre amei escrever e ajudar os outros. A programação tornou viável eu unir os dois.

Como eu comentei na Expansion Week, a educação e o poder transformador que ela tem, na minha família, é ensinado antes de a gente aprender a falar e andar. A comunidade de programação me trouxe sentimentos incríveis e que me impulsionaram a ser eu mesmo, a me impor novos desafios, crescer e encontrar várias outras formas de contribuir com a evolução de outras pessoas.

Como também sou humano, lido com meus impostores todos os dias e nesse cenário não seria diferente. Felizmente eu encontrei pessoas incríveis ao longo da minha trajetória e essa empresa sensacional. O pertencimento ao Space Squad, cercado por pessoas que eu admiro imensamente e são exemplos para mim, gera o reconhecimento que me ajudam a derrotar meus impostores para seguir produzindo, agregando valor à comunidade e tentando cada vez expandir minha zona de conforto para inovar na forma de ajudar as pessoas a sentirem-se tão realizadas quanto venho me sentindo nesse processo.

Obrigado a galera que direta ou indiretamente sempre me ajudou com essa evolução constante, revisando meus artigos, dando feedback, estudando junto, indicando leituras, tirando dúvidas.

Prototype: o que é, do que se alimenta e como nos ajudam.

Thiago Pederzolli Machado da Silva — Sun, 06 Dec 2020 15:17:16 +0000

Quem nunca quebrou a cabeça tentando entender o tal do Object.prototypes?

Então, na incerteza se eu realmente entendi, venho aqui tentar escrever um pouco sobre para compartilhar minha compreensão, tentar ajudar quem está com a mesma dificuldade e criar uma oportunidade de quem realmente entende me explicar se compreendi corretamente.

Prototypes é um objeto de métodos herdados através de uma Função Construtora. Ele traz consigo todos métodos herdados do constructor Object e ao criarmos uma nova Função Construtora podemos criar novos prototypes para ela que serão herdados por objetos criados a partir dela e terão acesso a partir da chave __proto__.

Para mim, o exemplo que deixou mais explícito o encadeamento de prototypes é a Função Construtora String, responsável pela criação das variáveis de tipo string. Ao verificarmos seu prototype, nos deparamos com um objeto com vários métodos que estamos acostumados a utilizar para manipular strings em nossas aplicações.

// retorno de um console.log(String.prototype);

String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}
anchor: ƒ anchor()
big: ƒ big()
blink: ƒ blink()
bold: ƒ bold()
charAt: ƒ charAt()
charCodeAt: ƒ charCodeAt()
codePointAt: ƒ codePointAt()
concat: ƒ concat()
constructor: ƒ String()
endsWith: ƒ endsWith()
fixed: ƒ fixed()
fontcolor: ƒ fontcolor()
fontsize: ƒ fontsize()
includes: ƒ includes()
indexOf: ƒ indexOf()
italics: ƒ italics()
lastIndexOf: ƒ lastIndexOf()
length: 0
link: ƒ link()
localeCompare: ƒ localeCompare()
match: ƒ match()
matchAll: ƒ matchAll()
normalize: ƒ normalize()
padEnd: ƒ padEnd()
padStart: ƒ padStart()
repeat: ƒ repeat()
replace: ƒ replace()
replaceAll: ƒ replaceAll()
search: ƒ search()
slice: ƒ slice()
small: ƒ small()
split: ƒ split()
startsWith: ƒ startsWith()
strike: ƒ strike()
sub: ƒ sub()
substr: ƒ substr()
substring: ƒ substring()
sup: ƒ sup()
toLocaleLowerCase: ƒ toLocaleLowerCase()
toLocaleUpperCase: ƒ toLocaleUpperCase()
toLowerCase: ƒ toLowerCase()
toString: ƒ toString()
toUpperCase: ƒ toUpperCase()
trim: ƒ trim()
trimEnd: ƒ trimEnd()
trimLeft: ƒ trimStart()
trimRight: ƒ trimEnd()
trimStart: ƒ trimStart()
valueOf: ƒ valueOf()
Symbol(Symbol.iterator): ƒ [Symbol.iterator]()
__proto__: Object

Se observarmos bem, a última chave de String.prototype é a __proto__, se olharmos seu conteúdo, veremos que nada mais é que o prototype de Object:

__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Ainda fica um pouco confuso né? Mas então, acompanha comigo o seguinte teste: abra o console do seu navegador através do inspecionar e digite "name".__proto__.

Viu? Ele vai te retornar o mesmo encadeamento de prototypes. Primeiro a da Função Construtora String, responsável pela criação do objeto "name", mas lá no final, ele vai ter também outra chave __proto__ que se você abrir, vai ter os mesmos métodos que a String.prototype tinha em __proto__ que foram herdados do Object.prototype.

"name".__proto__:
String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}
anchor: ƒ anchor()
big: ƒ big()
blink: ƒ blink()
bold: ƒ bold()
charAt: ƒ charAt()
charCodeAt: ƒ charCodeAt()
codePointAt: ƒ codePointAt()
concat: ƒ concat()
...

__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
...

Começou a fazer sentido? Que tal criarmos uma Função Construtora para tentar compreender melhor?

Vamos criar uma Função Construtora sobre Banda, eu farei com a minha favorita, mas podes criar com as informações da tua!

Comecemos pela função:

function Banda(nome, album, ano) {
  this.nome = nome;
  this.album = album;
  this.ano = ano; 
}

Com a Função Construtora criada, é hora de criarmos um método diretamente nela para depois entendermos o fluxo de prototypes e como podemos criar prototypes para essa Função Construtora. Adicione à sua função o seguinte método:

function Banda(nome, album, ano) {
  this.nome = nome;
  this.album = album;
  this.ano = ano;

  this.lancamento = function() {
    return `O ${this.album} foi lançado em ${this.ano}`;
  };
}

Agora é hora de criarmos nossa nova banda, você pode preencher com as informações referentes ao álbum favorito de sua banda favorita.

const blindGuardian = new Banda(
  'Blind Guardian',
  'Nightfall in Middle-Earth',
  1998,
);

Função Construtora criada, banda criada. Vamos executar o método que criamos, com as informações da banda criada e ver o que seu retorno nos trará? Coloque a execução em um console.log e veja o retorno, será parecido com o código abaixo:

// console.log(blindGuardian.lancamento()) retornará:

"O Nightfall in Middle-Earth foi lançado em 1998".

Entendido a Função Construtora? Então vamos partir para a questão de prototypes. Ao desenvolver uma função construtora, podemos, depois de ela pronta, adicionar novos métodos à ela após sua criação. É aqui que o prototypes entra, essa criação de novos métodos se dará via prototypes.

Vamos criar um método que apresente um pouco de informações sobre o álbum que passamos. Perceba, no código abaixo, que para adicionar novos métodos à Função Construtora, precisamos declarar o nome do Construtor, a chave proptype e então o nome que queremos dar ao novo método. Depois atribuimos como valor uma função anônima que será executada quando o método for chamado.

Banda.prototype.sobre = function() {
  return `O ${this.album} da banda ${this.nome} foi o sexto de sua trajetória, baseado no livro O Silmarilion, de Tolkien`;
};

Agora temos alguns console.log para verificarmos!

Comecemos pelo prototype do nosso Construtor, veja que ele vai retornar um objeto com o método sobre e a chave __proto__ que irá conter os prototypes herdados do Object.

// console.log(Banda.prototype); retornará:
sobre: ƒ ()
constructor: ƒ Banda(nome, album, ano)
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Imagino que você possa estar se perguntando: "Ta, então agora eu posso acessar o prototype da minha banda". E, lamento informar, se você tentar isso, terá que lidar com uma frustração.

Se você tentar realizar um console.log na banda que você criou, o retorno será undefined. Porque o prototype estará relacionado exclusivamente a Função Construtora.

Ta, Thiago, mas então como ver os prototypes herdados da minha banda então? Como citado lá no começo do conteúdo, através da chave __proto__.

// console.log(blindGuardian.prototype); retornará:

undefined;

// console.log(blindGuardian.__proto__); retornará:
sobre: ƒ ()
constructor: ƒ Banda(nome, album, ano)
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Um último detalhe a se atentar sobre prototypes é que elas são secundárias a métodos criados diretamente na Função Construtora.

O que quero dizer com isso é que, se criarmos o código abaixo, por exemplo:

Banda.prototype.lancamento = function() {
  return `${this.album} foi o sexto lançamento da banda ${this.nome}`;
};

E após ele tentarmos executar o método lancamento para nossa banda, o retorno ainda será o seguinte:

// console.log(blindGuardian.lancamento()) retornará:

"O Nightfall in Middle-Earth foi lançado em 1998".

Isso ocorre porque primeiro o leitor do código irá procurar pelo método diretamente na Função Construtora, somente se não for encontrado um método com aquela chave, que ele irá partir para os prototypes em busca de um método com aquela chave.

Porém, isso não quer dizer que você deve tentar acessar diretamente o __proto__, porque ele é algo herdado do Construtor que não passou pela criação do novo objeto, por consequência, ele não terá acesso aos valores do novo objeto.

Se voltarmos ao exemplo de String, podemos ver isso em ação:


'name'.__proto__.replace('a', 'b');
// retornará "";

Isso ocorre porque a chave __proto__ não passou pela construção da string "name", logo ela não possui valor algum para fazer a substituição.

Concluindo

A partir do String.prototype, podemos definir que prototypes são os métodos herdados através de uma Função Construtora que nos ajudam a interagir com novos objetos criados através dela.

Ressalto esse exemplo, porque quem aqui não fez um .toLowerCase(), um .replace() ou um .length.

Espero que essa leitura e essa prática tenha ajudado a compreender o conceito de prototype. Porque, como puderam perceber, é algo fundamental, que quando percebemos o que representa é que conseguimos ver que está presente no nosso dia-a-dia e isso, para mim, facilitou muito o entendimento.

Manipulando e Trabalhando com Arrays.

Thiago Pederzolli Machado da Silva — Thu, 12 Nov 2020 23:30:41 +0000

Um conteúdo que tem sido constante nos meus estudos, principalmente agora entrando em React, são os arrays.

Saber manipular arrays é algo muito importante porque é uma das principais formas que teremos para trabalhar os dados que nossas aplicações receberão. Um array é representado por colchetes [ ] e pode armazenar praticamente todo tipo de informação: strings, numbers, objects.

São diversas as formas que eles podem ser manipulados, mas essas formas merecem suas devidas atenções, porque algumas podem alterar seu array original e muitas das vezes você não vai querer isso.

Um detalhe que deve se ter atenção são os array-like, principalmente na hora de manipular o DOM, como a NodeList retornada pelo document.querySelectorAll() e as HTMLCollection retornadas por document.getElementsBy...().

Se você abrir o console do seu navegador e procurar o prototype de um Array, de uma NodeList e de um HTMLCollection você verá que o retorno será diferente e nem todos eles compartilham dos mesmos métodos, então em algum momento você poderá precisar do Array.from(), que irá converter um array-like em um array e permitir que você use os métodos de array.

Mas cuidado, analise bem o quanto realmente essa transformação é necessária e o quanto ela irá impactar sua aplicação.

Acessando elementos de um array:

Um array, como falei, é um conjunto de elementos armazenados dentro de colchetes. Você pode acessar algum elemento específico dele através do nome da variável onde ele está armazenado e a posição que ele se encontra no array.

Lembrando que o array sempre começa na posição zero, ou seja:

const idades = [32,21,33,43,1,12,8];

idades[0] = 32;

idades[3] = 43;

Manterei esse array acima como base para os exemplos a seguir no artigo.

Caso você tenha um array muito grande e você quer acessar um elemento que sabe que está lá, mas não sabe a posição, pode usar o método indexOf:

idades.indexOf(12) irá retornar 5;

Manipulação de arrays:

Métodos que modificam o array original:

Como falei acima, alguns métodos se aplicados irão mexer na estrutura do array original e devem ser utilizados com muita sabedoria.

sort(): É um método de ordenação, ele irá ordenar sempre a partir do primeiro valor de cada elemento, ou seja, um array de numbers ficará um pouco bagunçado se o método for chamado sem argumento algum.

O sort irá percorrer todos os números pegando primeiro o valor de cada elemento. É como se ele pegasse fizesse um idades[0][0], idades[1][0], idades[2][0], idades[3][0], idades[4][0], idades[5][0], idades[6][0].

Para que ele consiga ordenar por completo, precisamos passar como argumento do sort, uma arrow function que irá fazer um cálculo e a partir dele ordenar os números com um todo:

idades.sort() = [1, 12, 21, 32, 33, 43, 8];
idades.sort((a,b) => a - b) = [1, 8, 12, 21, 32, 33, 43];

Mas o que essa função faz? Ela basicamente pega o primeiro e o segundo elemento e faz uma subtração, caso o valor dê negativo, ela troca a ordem dos elementos. Depois faz com o segundo e o terceiro e assim vai até percorrer todo o array. Essa ação será realizada até que o array seja percorrido por completo e nenhum dos cálculos retorne algum valor negativo.

unshift() e push(): São dois métodos de adição de elementos em array e que retornam o length(quantidade de itens dentro de um array). O unshift() irá adicionar um elemento ao início do array enquanto o push() adicionará ao final do Array.

idades.unshift(14) retornará 8 que é o length de idades com um elemento a mais e idades será:
idades = [14,32,21,33,43, 1,12,8];
idades.push(5) retornará 9 que é o length de idades após o unsifht mais o push e o idades será:
idades = [14, 32,21,33,43,1,12,8, 5];

shift() e pop(): São dois métodos de remoção de elementos do array. O shift() remove o primeiro elemento e retorna ele. O pop() remove o último e retorna ele.

idades.shift() retornará 32;
idades.pop() retornará 8;

reverse(): inverte a ordem dos elementos dentro de um array.

idades.reverse() retornará [8,12,1,43,33,21,32];

splice(index, remover, item1, item2,...): ele irá manipular removendo itens e adicionando novos e retorna um array com os itens removidos. Index refere-se a posição inicial em que o splice começar a funcionar, remover refere-se a quantidade de elementos a serem removidos a partir daquela posição e os outros argumentos referem-se a itens que serão adicionados.

idades.splice(1, 2, 38, 24) retornará [21, 33];
idades = [32, 38, 24, 43,1,12,8];

Métodos que criam novos arrays a partir de um original:

concat(): concatena um array com os valores passados como argumento

const novasIdades = idades.concat(44);
novasIdades = [32,21,33,43,1,12,8, 44];

join(separador): pega o array e transforma em uma string unindo pelo que for passado como argumento separador.

const joinIdades = idades.join(‘-’);
joinIdades = “32-21-33-43-1-12-8”;

slice(início, final): pega o array e, como o nome diz, fatia da posição início até a posição final. Se passado apenas um valor de argumento, ele irá considerar como valor de início e irá fatiar o array daquela posição até o final. Se você quiser clonar um array, pode usar o slice sem nenhum argumento.

const sliceIdades = idades.slice(1, 3);
sliceIdades = [21,33, 43];

const sliceIdadesUmArg = idades.slice(2);
sliceIdadesUmArg = 33,43,1,12,8];

const cloneIdades = idades.slice();
cloneIdades = [32,21,33,43,1,12,8];

Bom, já sabemos como manipular um array. Agora precisamos trabalhar com eles. Para isso possuímos diversos métodos.

A ideia desses métodos é que eles possam fazer uma ação que irá se repetir para cada elemento do array. Cada método nos será útil para algo, temos alguns para executar uma ação que fará alguma alteração, outro nos retornará um novo elemento com informações desse outro array, temos também métodos para pesquisar nesses arrays e retornar só o que nos interessar. Vamos ver um pouco disso agora.

Primeiro falaremos do forEach(callback(itemAtual, index, Array)). Ele serve para percorrermos um array e fazer alguma alteração, implementar algo. Imagine que você está manipulando seu DOM, tem uma série de botões de Adicionar ao Carrinho e quer que todos botões tenham a mesma função: ``` const buttons = document.querySelectorAll(‘button’) buttons.forEach((button) => { button.addEventListener(‘click’, funcaoASerExecutada) }); ```

Ele não modifica o array original, caso você queira fazer essas mudanças, precisa informar todos os argumentos e iterar a partir do array:

Imagine que você tem aquele array de idades e quer transformar cada elemento em uma string informando que se tratam realmente de idades:

idades.forEach((idade, index, array) => { array[index] = idade + ' anos'});

idades = ["32 anos", "21 anos", "33 anos", "43 anos", "1 anos", "12 anos", "8 anos"];

O objetivo do forEach não é o retorno em si do método, mas o que será feito com cada item em cada iteração, por isso seu retorno sempre será undefined.

Agora o map(callback(itemAtual, index, array)), tem a mesma premissa do forEach, a diferença está no objetivo, o objetivo do map é sim o retorno de um novo array.

const idadeComAnos = idades.map((idade) => {
return idade + ‘ anos’;
});

idadeComAnos = ["32 anos", "21 anos", "33 anos", "43 anos", "1 anos", "12 anos", "8 anos"];

O map() é muito útil para trabalharmos com arrays de objetos(algo que vamos nos deparar muito). Suponha que você precise isolar uma propriedade de cada um dos objetos.

const alunos = [
    {
        nome: ‘Thiago’,
        conteúdo: ‘React’,
    },
    {
        nome: ‘Raphael’,
        conteúdo: ‘Node’,
    },
{
        nome: ‘Thays’,
        conteúdo: Redux,
    },
{
        nome: ‘Carol’,
        conteúdo: ‘Hooks’,
    }.
];

const nomeDosAlunos = alunos.map((aluno) => aluno.nome));
nomeDosAlunos = [‘Thiago’, ‘Raphael’, ‘Thays’, ‘Carol’];

Temos o reduce(callback(acumulador, valorAtual, index, array), valorInicial). Diferente dos demais métodos, o reduce possui dois argumentos, um fundamental que é a callback que espera até quatro argumentos: acumulador, ele acumulará o retorno de cada iteração; o valorAtual que refere-se ao elemento do array daquela iteração, o index desse elemento e o array que seria todo array que está sendo iterado. Depois dessa callback. O segundo argumento é o valor inicial do acumulador. Esse argumento é opcional, caso não declarado, o valor inicial do acumulador será o valor do primeiro elemento do array.

Pense que você quer somar todas as idades:

const todasIdades = idades.reduce((acumulador, itemAtual) => acumulador + itemAtual)
todasIdades = 150;

Para pesquisar em um array temos 4 métodos:

some(): do inglês algum, que retornará true ou false se algum elemento do array suprir a condição passada através de uma callback;

idades.some((idade) => idade === 12) retornará true porque há um elemento com valor 12 no array idades.

every(): do inglês todo, que retornará true ou false se todos elementos do array suprirem a condição passada através de uma callback.

idades.every((idade) => typeof idade === ‘number’) retornará true porque todos elementos do array idades são do tipo number.

find(): retornará o primeiro elemento encontrado no array que suprir a condição passada através de uma callback.

idades.find((idade) => idade < 30) retornará 21, porque é o primeiro elemento no array cujo valor é menor que 30.

filter(): similar ao find, mas mais amplo, retornará todos os elementos no array que suprirem a condição passada através de uma callback.

idades.filter((idade) => idade < 30) retornará [21, 1,12,8];

Espero que esse artigo ajude na compreensão dos conceitos de manipulação de arrays e como trabalhar com os elementos contidos neles em nossas aplicações.

O Mito do meu Vira-Tempo

Thiago Pederzolli Machado da Silva — Fri, 06 Nov 2020 15:17:06 +0000

Hoje venho contar mais um pouco da minha história e tentar desmistificar algumas ideias sobre a minha pessoa. O maior mito que digo que tenho visto sobre mim é a ideia de que eu possuo um “Vira-Tempo”(referência de Harry Potter, é um relógio especial no qual um feitiço de reversão de horas, podendo voltar no tempo).

Minha paixão e vontade de programar vinha desde a adolescência, porém devido ao famoso impostor, eu não acreditava que era inteligente o suficiente para tal área. Por esse motivo fui primeiro para Educação Física, percebi que não era algo que eu realmente queria. Sempre tive um amor muito grande pela mente humana, então ir para psicologia era o caminho mais certo na hora. Talvez fosse uma mensagem inconsciente para um caminho mais fácil para terapia e resolver os conflitos com esse impostor.

Entrei na psicologia para trabalhar com psicologia desportiva, sem simpatizar nenhum pouco com Psicanálise. Com o tempo e muito estudo fui me descobrindo muito interessado em ser um psicólogo clínico com uma inclinação para psicanálise. Não deu outra, me formei, comecei a clinicar e a me especializar em psicanálise.

E onde entra a programação nessa história?

Assim como muitos que devem estar lendo esse texto, meu cenário foi abruptamente mudado pelo impacto da pandemia. Eu sempre tive um trabalho bem social, atendendo muitos alunos da universidade pública que vinham das regiões mais variadas do Brasil. Com a pandemia, as aulas foram suspensas, esses alunos retornaram para suas cidades e lá não possuíam infraestrutura para dar continuidade ao tratamento.

De início isso foi devastador, vivia meu melhor momento na clínica, estava empolgado com a possibilidade de iniciar meu Mestrado em Filosofia, entrava no meu último ano da especialização. Me vi bem perdido em o que fazer, pois também não havia me adaptado a iniciar tratamentos de forma online, ou seja, eu precisava achar outro mercado para atuar, porque obviamente tirar proveito da saúde mental das pessoas no contexto em que vivemos e proporcionar um atendimento que eu não acreditava que pudesse ser o melhor que eu poderia entregar jamais seria uma opção.

Foi ai que eu resolvi dar uma chance para a programação, conversei com alguns amigos da área, conheci a Rocketseat, fiz meu primeiro Hello World, participei da semana Reboot, conheci a comunidade de programadores e me apaixonei pelo universo como um todo.

A programação me deu um novo propósito de vida. A comunidade, as amizades, as inúmeras possibilidades de ajudar outras pessoas através do ensinar, tudo isso tem sido propulsores para um potencial interno que nem eu acreditava ser possível.

O que isso tem a ver com o mito do meu Vira-Tempo?

Tem a ver com o contexto, o foco, a motivação e os anos de terapia.

Felizmente eu vivo em um contexto onde eu posso ter foco total aos estudos, meus pais me dão o suporte necessário, devido ao fato de serem professores concursados não temos um contexto de luxo, mas temos condições de viver bem em meio ao cenário em que nos encontramos. Moro eu e minha mãe, ela aposentada e eu com poucos pacientes que ficaram, me sobra muito tempo livre ao longo da semana para que eu possa estar focado em estudar e evoluir.

Justamente por serem professores, sempre cresci vendo o poder que a educação pode ter em mudar o mundo para melhor e o quanto a gente aprende muito mais ensinando os outros. Então, isso é o que explica minha motivação em fazer diversos cursos, pois assim tenho base para poder ajudar colegas com dificuldade em algum conceito, assim como tenho vários colegas sempre disponíveis para me ajudar quando encontro alguma dificuldade frente à alguma dificuldade nos meus estudos.

Os anos de terapia me ajudaram muito a conhecer meus impostores e lidar de forma mais fácil com os medos e receios de não dar conta. Consigo avançar mais fácil em alguns conteúdos por isso. Também me ajuda muito a lidar com as incertezas, com compreender que não é possível dominar absolutamente tudo de cada conteúdo para avançar, que as coisas se conectam e que leva tempo para realmente dominar alguma ferramenta, que o importante no nível que me encontro é saber que elas existem, saber como pesquisar, saber ler a documentação, não ter vergonha de perguntar, não demorar para pedir ajuda.

A especialização em psicanálise e a intenção de um Mestrado em Filosofia também foram de grande ajuda nesse processo inicial, pois como eram conteúdos complexos, o hábito do foco, a facilidade em interpretar, a facilidade em assimilar conceitos difíceis são questões que já vinham presentes no meu dia-a-dia.

Outro fator relevante para essa minha dedicação toda e que tem uma questão muito pessoal é o quanto esse movimento tem mantido minha mente ocupada e minha saúde mental estável. Foi me encontrar na programação que me tirou de um processo depressivo que o início da pandemia estava causando, foi o que deu sentido e uma esperança de sobreviver a esse cenário caótico e sem prazo de resolução.

Me manter codando praticamente da hora que acordo até o fim do dia, parando só para jogar com os amigos ou ver alguma bobagem no youtube ou alguma série antes de dormir, vai além de foco nos estudos. É uma forma de sobrevivência, é uma forma de manter um propósito, de me manter em pé e, principalmente, ser capaz de adquirir conhecimento para, através da educação, do compartilhamento de conhecimento, ajudar outras pessoas a atingirem o próximo nível e realizarem seus sonhos de se tornarem Devs.

Facilitando a matemática de seus códigos.

Thiago Pederzolli Machado da Silva — Tue, 27 Oct 2020 16:19:27 +0000

Se você estuda linguagem de programação, principalmente nos estudos de lógica, muitos exercícios envolvem vários cálculos. Com certeza você já quebrou muito a cabeça tentando arredondar números, trabalhar com raiz quadrada, tentando entender como fazer exponenciação e muitas vezes fez um cálculo dentro de outro para resolver alguma dificuldade.

Mas hoje venho trazer para vocês um pequeno resumo de vários métodos que o objeto Math possui. Ele é uma ótima ferramenta, com vários métodos que podem facilitar muito suas operações matemáticas e trabalho com números em alguns casos:

Os primeiros que vou falar são as propriedades de arredondar, as principais são 3:

Math.ceil, que em tradução literal significa teto, então arredonda para cima.
Math.floor, que em tradução literal significa chão, então arredonda para baixo.
Math.round, que irá aplicar a regra de proximidade, de .1 a .4 arredonda para baixo e de .5 a .9 arredonda para cima.

imagem da sala dos Simpsons, escrito no teto Math.ceil(), Math.round(.5), Math.round(.6), Math.round(.7), Math.round(.8), Math.round(.9) e escrito no chão Math.floor(), Math.round(.1), Math.round(.2), Math.round(.3), Math.round(.4)

Depois temos outras funcionalidades para manipular números como:

Math.abs() retorna um número absoluto.
Math.sqrt() que retorna a raiz quadrada do número declarado como argumento.
Math.pow(n1, n2) que realiza exponenciação recebendo dois argumentos, o n1 é o número do cálculo e o n2 o número da exponenciação. Hoje em dia já temos um operador para isso que é o **.
Math.random() que retorna um número aleatório entre 0 e 1, logo basta multiplicar pelo valor máximo que terá seu alcance de números aleatórios.
Math.max() que retorna o maior número de uma lista de números.
Math.min() que retorna o menor número de uma lista de números.

Math.abs(-5.5); // 5.5

Math.sqrt(9); // 3

Math.pow(7, 2);    // 49
7 ** 2 // 49. Operador exponencial

Math.floor(Math.random() * 500);  // entre 0 e 500

Math.max(5,3,10,42,2); // 42

Math.min(5,3,10,42,2); // 2

Mas para manipular um número, precisamos saber se realmente estamos recebendo um número. Para isso temos algumas alternativas:

Number.isNaN() vai retornar true ou false se o elemento declarado é NaN: Not A Number.
Number.isInteger() vai retornar true ou false se o número é inteiro, ou seja, se não possui vírgula.
parseFloat() ou Number.parseFloat() percorrem uma string que comece com um número e para no primeiro sinal que não seja +, -, . ou se depois tiver um . ele irá parar em um 0 subsequente.
parseInt() ou Number.parseInt() percorrem uma string que comece com um número e para no primeiro sinal que não seja +, -, . ou se depois tiver um . ele irá parar em um 0 subsequente. O parseInt recebe um segundo argumento também, que é refere-se ao parâmetro base. É o sistema numérico matemático do valor do primeiro argumento. 10 é o valor para o sistema númerico decimal.

Number.isNaN(NaN); // true
Number.isNaN(4 + 5); // false

Number.isInteger(20); // true
Number.isInteger(23.6); // false

Number.parseFloat('99.50'); // 99.5
Number.parseFloat('100 Reais'); // 100
Number.parseFloat('R$ 100'); // NaN

parseInt('99.50', 10); // 99
parseInt(5.43434355555, 10); // 5
Number.parseInt('100 Reais', 10); // 100

Graças a esses métodos que minha vida lidando com números ficou muito mais fácil e espero que facilite a vida de vocês também!

Por que eu fujo enquanto ele luta?

Thiago Pederzolli Machado da Silva — Wed, 14 Oct 2020 20:09:18 +0000

Quem nunca refletiu sobre essa pergunta ao ouvir a clássica frase quanto o tópico é ansiedade, de que é ela a responsável por ativar nossos mecanismos psíquicos frente à situações amedrontadoras.

Ao nos depararmos com uma situação de perigo, que nos gere a sensação desconfortável de medo e incapacidade, várias vezes nos deparamos com essas duas escolhas: posso enfrentar o que se encontra no meu caminho ou retroceder, fugir e escolher outro caminho.

Nem sempre nossas escolhas acabam estando de acordo com nossas vontades e mais na frente da vida isso costuma cobrar um preço através de cobranças de terceiros ou internas sobre o porquê ter agido daquele jeito.

Muito se fala sobre a importância de não se comparar, de que você deve se preocupar em ser melhor que você. Mas, ao meu ver, isso inibe uma outra parte importante para percepção da resposta que procuramos. É importante não se comparar com o outro em termos de evolução pessoal e do outro, mas é bom olhar as diferenças em relação ao outro para entender contexto.

O título é uma pergunta sem resposta pronta, se você chegou aqui procurando a solução dos problemas, esse artigo não lhe ajudará.

Para a psicanálise, é a existência do Outro que baliza nosso desenvolvimento. É o olhar dos pais e a validação de nossas atitudes que nos individualiza. Portanto, é involuntária e enraizada na nossa estruturação a ação de comparar-se aos outros. O filho quando pequeno compara-se ao pai, ao irmão mais velho.

A sociedade é cunhada na arte da comparação, nos forçam a comparar nossos corpos com padrões de beleza, nos vendem estereótipos de histórias de sucesso para que comparemos a nossa com elas.

É algo muito difícil lutar contra essas ações comparativas, elas vem de um inconsciente coletivo muito forte e é por isso que muita gente justifica com “Eu sei que não deveria fazer, mas não consigo evitar”.

E por que abordo este ponto? Porque acredito que acrescentar uma variável a essa comparação pode ajudar muito a diminuir o sofrimento que as comparações podem causar: Questionamento!

Por que estas te comparando com aquela pessoa? Por que estas te comparando agora? Qual a relevância desta comparação na tua vida? O que é que ambos estão fazendo representam para ti?

Tentar evitar comparações pode ser mais desgastante que lidar com as comparações em si. O fundamental é explorar os contextos, entender o processo todo, refletir sobre as histórias. Não é só sobre entender que histórias diferentes resultarão em ações diferentes, mas buscar entender um pouco do porquê disso ocorrer.

Na era digital da informação, literalmente, na ponta dos dedos, nossa capacidade de reflexão começa a se tornar algo obsoleto e inibe a capacidade de abstração. O título não tem resposta, porque ele deveria ser um mantra. Deve ser algo a ser questionado, devemos entender o contexto em que o outro conseguiu algo que não conseguimos, devemos entender o contexto em que ele se desenvolveu, para conseguirmos também observar o contexto em que nos desenvolvemos.

Entender o Outro e separar-se mentalmente dele é o principal ponto para conseguir uma compreensão melhor de si. É através desse processo reflexivo que conseguimos tomar mais consciência da nossa história, dando um contexto maior a momentos da nossa vida e através dessa nova compreensão ressignificar certas vivências para mudar nossos padrões de funcionamento, seja para que possamos lutar quando havíamos fugido ou para fugir em lutas que sabemos que não nos levarão a nada.

Sempre lembrando que a forma mais segura de trilhar esse caminho de questionamentos é acompanhado de um profissional de psicologia capacitado para estar ao teu lado pelo processo todo.

Lembrem-se: tudo que nos mobiliza fala mais da gente que dos outros. Então se me comparo com alguém é porque algo daquele outro toca em algo meu. É essa a reflexão que busco instigar com esse texto.

O que Among Us nos ensina sobre Sindrome do Impostor

Thiago Pederzolli Machado da Silva — Fri, 09 Oct 2020 18:40:20 +0000

Dependendo do contexto que você vive, já deve ter visto a febre que virou o jogo Among Us. Mas caso você não conheça, aqui vai um pouco de contexto:

Trata-se de um jogo onde estão 10 jogadores numa nave e entre eles há um ou mais impostores. São três as possibilidades que permitem o encerramento da partida:

a) caso a tripulação termine todas as suas tarefas;
b) quando a tripulação consegue por n meios descobrir qual dentre eles é o impostor o retira do jogo, ou;
c) quando impostor consegue dizimar toda a população da aeronave por sabotagem ou por emboscada.

Cada vez que um corpo é encontrado, uma reunião é chamada para debater sobre possíveis suspeitos e ocorre uma votação para saber se alguém será ejetado da nave ou se a votação será inconclusiva (sem retirar nenhum participante do jogo), tudo mediante a uma discussão onde acusações, provas e falsos testemunhos podem ser trocados.

Um detalhe relevante para nossa analogia é que, mesmo morto ou ejetado, o tripulante é capaz de realizar suas tarefas, porém, se ele for ejetado injustamente, pode sentir-se desmotivado a continuar suas funções e ajudar o resto da tripulação.

E o que isso conversa com a Síndrome do Impostor?

Pensemos na nossa mente como a nave, precisamos nos atentar a várias áreas dela para sermos capazes de evoluir em nosso desenvolvimento, trabalhando capacidades tanto técnicas quanto de relações interpessoais.

Para isso, precisamos de estudos, dedicação, diálogos internos. Mas mesmo assim, sempre parece ter uma voz interior tentando aniquilar nossas tentativas de evoluir em uma determinada capacidade, ou então tentando sabotar nosso aprendizado desviando o foco para uma outra área de atenção, a famosa distração que tanto nos faz procrastinar.

Deixemos de lado a dualidade do ganhar/perder, abstrair e pensar num cenário maior e vários contextos é um ponto de evolução da capacidade cognitiva. Vamos refletir sobre os impactos das ações na nossa existência.

A primeira saída, ejetar o impostor é inviável. Ele é parte de nossa existência e essência, não seria viável, ele vai dar um jeito de continuar lá, tanto que, no jogo, se há mais de um impostor e um deles é descoberto, mesmo ejetado ele pode continuar ajudando seus companheiros sabotando a nave.

Então devemos simplesmente ignorá-lo? Também não, porque se não mantemos a atenção em seus movimentos, podemos ser pegos desatentos e ele achar um jeito de nos derrubar.

Precisamos entender que são comunicações inconscientes que lutam por manter um estado de funcionamento ao qual já estão adaptados e que, por medo dos impactos que as mudanças podem gerar, atuam em prol desta manutenção.

Devemos atentar para os momentos em que surge a possibilidade de diálogos internos e buscar entender o porquê aquela capacidade foi sabotada, porque mesmo com um domínio tão bom da técnica não consigo me expressar, ou o que faz na teoria eu conseguir compreender cada conceito, mas na hora da prática a mente trava. Devemos, principalmente, entender que, assim como o jogo, cada momento implica em um impostor diferente, que pode ou não se repetir, então talvez um problema pessoal possa interferir no profissional e vice-versa, ou um pode não ter nada a ver com o outro e achamos que é o mesmo para evitar de olhar para um problema maior.

Muitas vezes, nas partidas de Among Us, os tripulantes conseguem vencer por entender o funcionamento do impostor, se juntarem e conseguir uma estratégia onde sejam feitas todas tarefas para consertar a nave. Assim deve funcionar nossa mente, conversando entre suas diversas instâncias para descobrir como gerar mudanças sem criar um ambiente psiquicamente desestruturante.

Print da tela de um momento em que a tripulação ganhou a partida de Among Us