5 fonctionnalités JavaScript sans lesquelles je ne pouvais pas écrire de code

Bonjour mes amis!

Je vous présente la traduction de l'article de Kent Dodds «5 fonctionnalités JavaScript sans lesquelles je ne pourrais pas coder».

Ceci est ma première traduction, donc je serai heureux de tout commentaire.

5 fonctionnalités JavaScript sans lesquelles je ne pouvais pas écrire de code

Avant de commencer, permettez-moi de parler un peu du code que j'écris. Presque tout mon code est composé de Javascript, plus du HTML et du CSS. J'écris JS client et serveur. Je teste mon code. Je crée et distribue des bibliothèques open source qui sont utilisées par des milliers de développeurs à travers le monde. Pour le frontend, j'utilise React, pour le backend - Express ou informatique sans serveur.

Voici 5 fonctionnalités JS sans lesquelles je ne pourrais pas écrire de code. Dans un ordre aléatoire. Bien sûr, «sans lequel je ne pourrais pas écrire de code» est une hyperbole. Ce sont des fonctionnalités que j'aime beaucoup et que j'utilise tout le temps.

1. Restructuration

J'utilise cette fonctionnalité dans presque tous les fichiers. Peu importe qu'il s'agisse d'un composant React ou d'une fonction qui prend des arguments; la restructuration est une chose cool.

Voici quelques exemples:

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 

Voici à quoi cela ressemble dans React:

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

Cette fonctionnalité vous permet de faire des choses intéressantes:

 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. Modules

Ceci est une autre fonctionnalité que j'utilise dans presque tous les fichiers. Avant que les modules ne fassent partie du langage, nous devions utiliser d'étranges bibliothèques et outils pour travailler avec de grands projets. Avec des modules (et des constructeurs comme Rollup ou Webpack), nous avons une excellente occasion de partager du code avec d'autres.

Voici quelques exemples:

 // 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' 

Si vous voulez en savoir plus sur les modules, vous pouvez regarder ma vidéo youtube - «Plus que vous ne voulez en savoir sur les modules ES6».

3. Paramètres par défaut

J'adore et j'utilise cette fonctionnalité tout le temps. Cela s'applique à la fois aux arguments de fonction et à la déstructuration. Voici comment il est utilisé pour restructurer un objet:

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

Notez que l'objet bench n'a pas la propriété legs. Sans la syntaxe de paramètre par défaut, la valeur des jambes ne sera pas définie.

Vous pouvez également utiliser l'affectation destructrice avec cette fonctionnalité:

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

Voici à quoi cela ressemble dans la liste des paramètres:

 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 

Cette fonctionnalité vous permet également de faire des choses assez intéressantes, car la valeur à droite du signe "=" n'est calculée que si nécessaire. Cela signifie que vous pouvez l'utiliser pour vérifier les paramètres requis:

 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' 

Certaines personnes trouvent ce code trop compliqué. Ils ont peut-être raison. Mais comprendre comment cela fonctionne est très cool!

Oh, et vous avez remarqué que nous pouvons utiliser les arguments précédents dans le cadre des paramètres par défaut pour les arguments suivants (comme c'est le cas avec upperKind)? Super, non?

4. Fonctions fléchées

J'utilise souvent des fonctions fléchées. J'aime les expressions fonctionnelles, mais si, par exemple, j'ai besoin d'une fonction de rappel anonyme (pour laquelle je ne veux pas donner de nom), ou si je veux obtenir des valeurs de retour implicites, alors les fonctions fléchées sont exactement ce dont j'ai besoin.

Voici quelques exemples d'utilisation des fonctions fléchées:

 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. Promesses et asynchronisation / attente

JS est monothread et construit sur un système d'événements (pile d'appels). Je suis un grand fan de discussions comme Qu'est-ce qu'une boucle d'événement? (avec sous-titres russes). Les promesses et l'async / attente sont d'excellents outils pour gérer cela. La plupart de mon code est asynchrone et ces outils simplifient grandement mon travail. Honnêtement, les promesses sont un sujet sérieux et nécessitent une certaine habitude, mais elles sont excellentes.

J'utilise souvent async / wait dans les tests et les backends. Voici un exemple de test asynchrone:

 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() }) 

Voici un exemple d'utilisation de async \ attendent dans Express:

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

Curieusement, je n'utilise pas souvent async / wait dans mon code React (au moins directement). C'est parce que j'essaie de faire la plupart de la «logique asynchrone» en dehors de mes composants. Par conséquent, si je fais, par exemple, quelque chose d'asynchrone lors de l'appel de useEffect dans React, je me limite à un appel à la fonction asynchrone, car je trouve plus facile de travailler avec des promesses:

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

Je vous conseille de lire l'article d'Anthony Chu "Async / Await in Node".

Conclusion

Il existe de nombreuses autres fonctionnalités que j'utilise régulièrement et qui pourraient être incluses dans cette liste. Ces fonctionnalités sont mes préférées, je me tourne toujours vers elles. Il y a aussi de nouveaux ajouts à la langue qui ne sont pas encore entrés dans ma mémoire musculaire. Il est maintenant temps de devenir développeur JS! J'espère que cet article vous a été utile! Bonne chance