Anotações sobre Javascript

00_javascript.md

01_introduction.md

O javascript é uma linguagem orientada a objeto interpretada pelo navegador, sendo muito utilizada para a manipualçao da DOM, dados e interação com o backend. Fora dele quem irá fazer esse papel é o node.

• O package.json é o manifesto do projeto que tem o node.

• Um framework é composto por várias libs e uma lib é composta por várias dependencias.

• npm e yarn são gerenciadores de pacotes do node.

• ECMAScript só usado para se referir as versões da linguagem

• Svelte é um compilador que gera js, focando na etapa de build-time ao invés de run-time, como fazem outros frameworks. Ele não utiliza virtual-dom.

Json Web Tokens (JWT)

Pensando em uma situação hipotética, o ato de solicitar o documento de identificação (RG) é uma forma de autenticação para que voce receba a autorização para entrar no cinema. Da mesma forma, as credenciais são usadas como forma de autenticação, para que o usuário que possui essas credenciais possa ser autorizado para acessar um recurso da aplicação.

A entrada do JWT é formada por um header, payload (dados de autenticação) e signature. Após a autorização o backend deve retornar um token que poderá ser usado como forma de autenticação em outras requisições no campo autorization do header.

No frontend, salvamos esse token no localstorage e este deve ser expirado em algum momento.

---

Existem 3 métodos para extrair uma parte de uma string, são eles:

slice(start, end)
substring(start, end)
substr(start, length)

• window.print() é um método no browser para construir uma página que poderá ser impressa na impressora

• Uma variável pode ser inciada com uma letra, simbolo $ e _ (unscode).

Quando usar o var?

É possivel declarar variáveis com let, const ou var. O var especificamente era usado entre os anos 95 e 2015. Porém, em 2015 foi adicionado o let e const, fazendo com que o var entrasse em desuso, ainda que ainda possa estar presente em projetos antes desta data. Para uma resposta mais direta: use o var em projetos antigos/legados.

É possível declarar uma variável sem valor e realizar sua atribuição posteriormente, mas com o const ou let isso não é possivel.

var carName; // O valor será undefined
carName = 'blue';

Voce pode re-declarar uma variável usando var e o valor continuará o mesmo, mas usando o let esse comportamento não se aplica.

let x = "5" + 2 + 3; // O resultado será "523", pois se o primeiro valor for uma string, o restante da equação também será tratado como tal

Porém, se o primeiro elemento fosse um número e o restante string, seria feito a conversão para númerico e teriamos 10 como resultado.

Variáveis com var podem ser acessadas fora de escopo, por isso é muito importante tomar cuidado com elas.

Quando usar o let ou const

Adote a regra: sempre use o const, a menos que o dado sofra alguma alteração

High Order Functions

São funções que recebem uma função ou mais como argumento, retorando outra função.

Callbacks

São funções que são chamadas dentro de outras

Funções assincronas

Se optar por usar o .then().catch().finally(), não precisa usa o async/await/try.

Escopo

Se trata do contexto atual de execução, em que valores e expressões são "visiveis" ou podem ser referenciadas. Se uma variavel ou outra expressão não estiver "no escopo atual", então não está disponível para uso.

Rest

function restFunction(...rest) {...}

Module

Serve para quebrarmos o código em diferentes arquivos para facilitar a organização e compartilhamento de código em comum.

---

Transformando string em array com spread operator:

const stringContent = 'HTML';
const arrayContent = [ ...stringContent ]; // ['H', 'T', 'M', 'L']

Mergeando objetos:

const user = { name: 'Diana', company: 'Rebase' };
const xhamps = { nickname: 'Diva developer' };

const xhampuser = { ..xhamps, ...user }; // { nickname: "Diva developer", name: "Diana", company: "Rebase" };

Concatenando strings:

const skills_basic = ['css', 'html'];
const skills_plus = ['js', 'ts'];

const skills_user = [ ...skills_basic, ...skills_plus, 'ux']; // ['css', 'html', 'js', 'ts', 'ux']

Usando variáveis imutáveis:

const imutable_var = Object.freeze(['js', 'ninja', 'react']);
imutable_var.push('jquery'); // uncaugth typeerror: cannot add property 3, object is freeze

02_boas_praticas.md

Boas Práticas

• Use variáveis que sejam pronunciaveis e que tenham sentido com o que armazenam.

• Sempre usar ;

• Preferir usar === ao invés de ==. Isso porque o primeiro verifica o valor e o tipo dos elementos comparados, enquanto que o segundo apenas verifica o valor e ainda realiza uma conversão.

• Usar o javascript puro sempre será mais rápido do que usar bibliotecas e dependencias.

• Usar as funções console.time("Começo da operação") e console.timeEnd("Final da operação") para saber quanto tempo um bloco de código está levando para processar.

• Ao declarar várias variáveis ao mesmo tempo, podemos ir declarando uma atrás da outra por uma virgula:

// Declarando cada variável em uma linha
var min = 0
var max = 1
var rate = 2

// Declarando com virgulas
var min = 0, max = 1, rate = 2;

• Usar a abordagem moderna para converter uma string em número inteiro, que é Number.parseInt(string, radix), sendo que o parametro radix é a base decimal, que por via das duvidas é sempre bom especificar. Exemplo: Number.parseInt("200px", 10); // 200

• Todas as variáveis boleanas devem começar com "is"

• Variáveis devem ter nomes longos o suficiente para ter significado.

• Constantes ou vairáveis de configuração (como duração de animações, etc) devem ficar no começo do arquivo.

• Evite magic numbers e declare o que querem dizer.

• Declare funções que recebam no máximo 2, 3 argumentos, pois mais que isso pode indicar que ela esteja com muitas responsábilidades.

• Uma função deve ter apenas uma responsábilidade.

• Em time, não percam tempo discutindo sobre formatação, apenas adotem uma e a deixem automatizada.

• Ser consistente sobre a capitalização do código.

04_requests.md

Axios vs Fetch

📧 Nem sempre Axios é a melhor opção.

📧 A API fetch é perfeitamente capaz de reproduzir as principais funcionalidades do axios, e está presente em todos os navegoadores modernos.

📧 O axios converte automaticamente a resposta para JSON.

📧 Um dos grandes pontos de aderencia ao axios é seu suporte aos navegadores. Mesmo os antigos IE11 podem executá-lo sem problemas. Já o fetch, por outro lado, é mais suportado por navegadores modernos como Chrome 42+, Firefox 39+, Edge 14+ e Safari 10.1+.

05_cookies.md

Acessando os cookies do documento:

document.cookie

Puxando o valor especifico de um cookie:

const cookieValue = document.cookie
  .split("; ")
  .find((row) => row.startsWith("test2="))
  ?.split("=")[1]; // A posiçao 0 seria o nome do cookie

Descobrindo se um cookie existe:

function checkACookieExists() {
  if (
    document.cookie.split(";").some((item) => item.trim().startsWith("reader="))
  ) {
    // do something
  }
}

Escrevendo um cookie

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Deletando um cookie

• É possível deletar um cookie atualizando o tempo de expiraçao em zero ou no passado.

• É necessário definir o path do cookie que queremos deletar, para ter certeza de que estamos deletando o cookie correto.

• Alguns browsers nao vao permitir deletar um cookie se o path nao for especificado.

• É possível adicionar um tempo de expiraçao (UTC time). Por padrao, os cookies sao deletados quando o browser é fechado:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Com o parametro path, é possível dizer ao browser o path que aquele cookie pertence. Por padrao, os cookies pertences a página atual.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

06_clipboard.md

Ouvindo evento de paste (colar) e inserindo em campos de token

  function getParsedClipboardData(event: React.ClipboardEvent<HTMLInputElement>) {
    const clipboardData = event.clipboardData;

    const pastedText = clipboardData.getData('text/plain');

    return pastedText.split('').slice(0, length);
  }

  function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {
    if (!containerRef.current) return;

    event.preventDefault();

    const parsedClipboardData = getParsedClipboardData(event);

    containerRef.current.querySelectorAll('input').forEach((input, index) => {
      input.value = parsedClipboardData[index] || '';
      handleChange(input);
    });

    setCurrentInput(parsedClipboardData.length);
  }
  
  return (<div onPaste={handlePaste}>...<div>) // Um outro caminho aqui é ouvir o evento de 'paste' do próprio javascript

Testando com jest:

it('should work successfully', async () => {
  render(<Component />);

  await userEvent.paste('123456789');

  expect(screen.getByRole('input-0')).toHaveValue('1');
  expect(screen.getByRole('input-1')).toHaveValue('2');
  expect(screen.getByRole('input-2')).toHaveValue('3');
  expect(screen.getByRole('input-3')).toHaveValue('4');
  expect(screen.getByRole('input-4')).toHaveValue('5');
  expect(screen.getByRole('input-5')).toHaveValue('6');
 });

Ouvindo o que há colado na área de transferencia

  function clipboardContentOnlyNumbers(value: string) {
    return new RegExp(/^\d+$/).test(value);
  }

  useEffect(() => {
    navigator.clipboard.readText().then((clipboard) => {
      if (!clipboardContentOnlyNumbers(clipboard)) return;
      if (clipboard.length !== length) return;

      const parsedClipboard = parseClipboard(clipboard);

      // preenche campos com os dados capturados 
    });
  }, []);

Capturando o ultimo item de um array

❌ array[array.length - 1]

✔️ array.at(-1)