5 recursos de JavaScript sem os quais não consegui escrever código

Bom dia amigos

Apresento a você a tradução do artigo de Kent Dodds "5 recursos de JavaScript que eu não poderia codificar sem".

Esta é a minha primeira tradução, por isso terei prazer em comentar.

5 recursos de JavaScript sem os quais não consegui escrever código

Antes de começarmos, deixe-me falar um pouco sobre o código que estou escrevendo. Quase todo o meu código consiste em Javascript, além de HTML e CSS. Eu escrevo JS de cliente e servidor. Estou testando meu código. Crio e distribuo bibliotecas de código aberto usadas por milhares de desenvolvedores em todo o mundo. Para o front-end, eu uso o React, para o back-end - computação Express ou sem servidor.

Aqui estão 5 recursos JS sem os quais eu não poderia escrever código. Em ordem aleatória. Obviamente, "sem o qual eu não poderia escrever código" é uma hipérbole. Esses são os recursos que eu realmente gosto e são usados ​​por mim o tempo todo.

1. Reestruturação

Eu uso esse recurso em quase todos os arquivos. Não importa se é um componente React ou uma função que recebe argumentos; a reestruturação é uma coisa legal.

Aqui estão alguns exemplos:

const address = { city: 'Salt Lake City', state: 'UT', zip: 84115, coords: { lat: 40.776608, long: -111.920485, }, } // ,    : const city = address.city const state = address.state const zip = address.zip //  ,    : const {city, state, zip} = address 

Aqui está o que parece no React:

 //  : function UserName(props) { return ( <div> </div> ) } //   : function UserName() { return ( <div> </div> ) } //    : function UserName({name: {first, last}}) { return ( <div> </div> ) } 

Esse recurso permite fazer algumas coisas interessantes:

 const info = { title: 'Once Upon a Time', protagonist: { name: 'Emma Swan', enemies: [ {name: 'Regina Mills', title: 'Evil Queen'}, {name: 'Cora Mills', title: 'Queen of Hearts'}, {name: 'Peter Pan', title: `The boy who wouldn't grow up`}, {name: 'Zelena', title: 'The Wicked Witch'}, ], }, } //       , //          const { title, protagonist: { name: name, enemies: [, , , {title: enemyTitle, name: enemyName}], }, } = info console.log(`${enemyTitle} (${enemyName}) is an enemy to ${name} in "$5 JavaScript Features I Couldn't Code Without"`) 

2. Módulos

Esse é outro recurso que eu uso em quase todos os arquivos. Antes que os módulos se tornassem parte da linguagem, tivemos que usar bibliotecas e ferramentas estranhas para trabalhar com grandes projetos. Com módulos (e construtores como Rollup ou Webpack), temos uma grande oportunidade de compartilhar código com outras pessoas.

Aqui estão alguns exemplos:

 // a.js //  function add(a, b) { return a + b } const foo = 'bar' const theAnswer = 42 const theQuestion = 'who knows' //        ,  //     ""    export default add export {foo, theAnswer, theQuestion} // b.js //  // 1.   import './a' // 2.    import add from './a' // 3.  `theAnswer`  `theQuestion`  './a' import {theAnswer, theQuestion} from './a' // 4.  `theAnswer`     `fortyTwo` import {theAnswer as fourtyTwo} from './a' // 5.  `add` ( )  `theQuestion` import {default as add, theQuestion} from './a' // 6.  `add`  `theQuestion`      import add, {theQuestion} from './a' // 7.     " "   `allTheThings` import * as allTheThings from './a' 

Se você quiser saber mais sobre os módulos, assista ao meu vídeo do youtube - “Mais do que você deseja saber sobre os Módulos ES6”.

3. Configurações padrão

Eu amo e uso esse recurso o tempo todo. Isso se aplica aos argumentos das funções e à destruição. Veja como é usado para reestruturar um objeto:

 const bench = {type: 'Piano', adjustable: false} const {legs = 4} = bench // `The bench has ${legs} legs` // -> The bench has 4 legs // bench - , leg -  

Observe que o objeto de bancada não possui a propriedade pernas. Sem a sintaxe de parâmetro padrão, o valor das pernas será indefinido.

Você também pode usar atribuição destrutiva com este recurso:

 const bench = {type: 'Piano', adjustable: false} const {legs: legCount = 4} = bench // `The bench has ${legCount} legs` // -> The bench has 4 legs 

Aqui está o que parece na lista de parâmetros:

 function getDisplayName(firstName = 'Unknown', lastName = 'Unknown') { return `${firstName} ${lastName}` } // getDisplayName() // -> Unknown Unknown // getDisplayName('Andrew') // -> Andrew Unknown // getDisplayName(undefined, 'Yang') // -> Unknown Yang // getDisplayName('Andrew', 'Yang') // -> Andrew Yang 

Esse recurso também permite que você faça coisas bastante interessantes, pois o valor à direita do sinal "=" é calculado apenas se necessário. Isso significa que você pode usá-lo para verificar os parâmetros necessários:

 function getCandy( kind = requiredParam('kind'), size = requiredParam('size'), upperKind = kind.toUpperCase(), callback = function noop() {}, ) { const result = {kind, size, upperKind} callback(result) return result } function requiredParam(argName) { throw new Error(`${requiredParam} is required`) } // getCandy('twix', 'king') // -> {kind: 'twix', size: 'king', upperKind: 'TWIX'} // getCandy('twix') // -> : 'size is required' 

Algumas pessoas acham esse código muito complicado. Talvez eles estejam certos. Mas entender como funciona é muito legal!

Ah, e você notou que podemos usar os argumentos anteriores como parte dos parâmetros padrão para os seguintes argumentos (como é o caso do upperKind)? Ótimo, certo?

4. Funções de seta

Costumo usar funções de seta. Gosto de expressões funcionais, mas se, por exemplo, eu precisar de uma função de retorno de chamada anônima (da qual não quero criar um nome) ou desejar obter valores de retorno implícitos, as funções de seta são exatamente o que eu preciso.

Aqui estão alguns exemplos de uso das funções de seta:

 const divide = (a, b) => a / b const getFive = () => 5 const identity = i => i const asArray = (...args) => args // ,         // (       ), //     ,  : const tryInvoke = (obj, fn, ...args) => { try { return obj[fn](...args) } catch (e) { return undefined } } //  ,   ,       const getObject = favoriteCandy => () //  JSX ( JS  React)        const MyComponent = () => ( <div> Hello world! I am a function and I return <strong>JSX!</strong> </div> ) 

5. Promessas e assíncronas / aguardam

JS é encadeado único e construído em um sistema de eventos (pilha de chamadas). Sou um grande fã de conversa como O que é um loop de eventos? (com legendas em russo). Promessas e assíncrono / espera são ótimas ferramentas para gerenciar isso. A maior parte do meu código é assíncrona, e essas ferramentas simplificam bastante o meu trabalho. Honestamente, as promessas são um tópico sério e exigem algum tempo para se acostumar, mas são ótimas.

Costumo usar assíncrono / aguardar em testes e back-end. Aqui está um exemplo de um teste assíncrono:

 test('Can fill out a form across multiple pages', async () => { mockSubmitForm.mockResolvedValueOnce({success: true}) const testData = {food: 'test food', drink: 'test drink'} const {findByLabelText, findByText} = render(<App />) user.click(await findByText(/fill.*form/i)) user.type(await findByLabelText(/food/i), testData.food) user.click(await findByText(/next/i)) user.type(await findByLabelText(/drink/i), testData.drink) user.click(await findByText(/review/i)) expect(await findByLabelText(/food/i)).toHaveTextContent(testData.food) expect(await findByLabelText(/drink/i)).toHaveTextContent(testData.drink) user.click(await findByText(/confirm/i, {selector: 'button'})) expect(mockSubmitForm).toHaveBeenCalledWith(testData) expect(mockSubmitForm).toHaveBeenCalledTimes(1) user.click(await findByText(/home/i)) expect(await findByText(/welcome home/i)).toBeInTheDocument() }) 

Aqui está um exemplo do uso de async \ waitit no Express:

 async function getListItems(req, res) { const listItems = await listItemsDB.query({ownerId: req.user.id}) res.json({listItems: await expandBookDataMultiple(listItems)}) } 

Curiosamente, não costumo usar async / wait no meu código React (pelo menos diretamente). Isso ocorre porque eu tento fazer a maior parte da "lógica assíncrona" fora dos meus componentes. Portanto, se eu, por exemplo, fizer algo assíncrono ao chamar useEffect no React, me limitei a uma chamada para a função assíncrona, pois acho mais fácil trabalhar com promessas:

 React.useEffect(() => { getUser().then( user => setState({status: 'success', error: null, user}), error => setState({status: 'error', error, user: null}), ) }, []) 

Eu aconselho você a ler o artigo de Anthony Chu "Async / Await in Node".

Conclusão

Existem muitos outros recursos que eu uso regularmente e que podem ser incluídos nesta lista. Esses recursos são meus favoritos, eu sempre recorro a eles. Há também algumas novas adições à linguagem que ainda não entraram na minha memória muscular. Agora é a hora de se tornar um desenvolvedor de JS! Espero que este artigo tenha sido útil para você! Boa sorte