5 características de JavaScript sin las cuales no podría escribir código

Buen dia amigos!

Le presento la traducción del artículo de Kent Dodds “5 características de JavaScript sin las cuales no podría codificar”.

Esta es mi primera traducción, por lo que agradeceré cualquier comentario.

5 características de JavaScript sin las cuales no podría escribir código

Antes de comenzar, déjame hablar un poco sobre el código que estoy escribiendo. Casi todo mi código consiste en Javascript, más algunos HTML y CSS. Escribo tanto el cliente como el servidor JS. Estoy probando mi código. Creo y distribuyo bibliotecas de código abierto que son utilizadas por miles de desarrolladores en todo el mundo. Para el frontend, uso React, para el backend: computación Express o sin servidor.

Aquí hay 5 características JS sin las cuales no podría escribir código. En orden aleatorio Por supuesto, "sin el cual no podría escribir código" es una hipérbole. Estas son características que realmente me gustan y las uso todo el tiempo.

1. Reestructuración

Yo uso esta función en casi todos los archivos. No importa si es un componente React o una función que toma argumentos; la reestructuración es algo genial.

Aquí hay algunos ejemplos:

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 

Así es como se ve en React:

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

Esta característica le permite hacer algunas cosas interesantes:

 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

Esta es otra característica que uso en casi todos los archivos. Antes de que los módulos se convirtieran en parte del lenguaje, tuvimos que usar bibliotecas y herramientas extrañas para trabajar con grandes proyectos. Con módulos (y constructores como Rollup o Webpack) tenemos una gran oportunidad para compartir código con otros.

Aquí hay un par de ejemplos:

 // 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 desea saber más sobre los módulos, puede ver mi video de YouTube: "Más de lo que desea saber sobre los módulos ES6".

3. Configuración predeterminada

Amo y uso esta función todo el tiempo. Esto se aplica tanto a los argumentos de función como a la desestructuración. Así es como se usa para reestructurar un objeto:

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

Tenga en cuenta que el objeto de banco no tiene la propiedad de patas. Sin la sintaxis predeterminada del parámetro, el valor de las piernas no estará definido.

También puede usar la asignación destructiva con esta función:

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

Así es como se ve en la 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 

Esta característica también le permite hacer algunas cosas bastante interesantes, ya que el valor a la derecha del signo "=" se calcula solo si es necesario. Esto significa que puede usarlo para verificar los parámetros requeridos:

 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' 

Algunas personas encuentran este código demasiado complicado. Quizás tengan razón. ¡Pero entender cómo funciona es genial!

Ah, ¿y notó que podemos usar los argumentos anteriores como parte de los parámetros predeterminados para los siguientes argumentos (como es el caso con upperKind)? Genial, verdad?

4. Funciones de flecha

A menudo uso las funciones de flecha. Me gustan las expresiones funcionales, pero si, por ejemplo, necesito una función de devolución de llamada anónima (para la que no quiero encontrar un nombre), o si quiero obtener valores de retorno implícitos, entonces las funciones de flecha son justo lo que necesito.

Estos son algunos ejemplos del uso de funciones de flecha:

 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. Promesas y asíncrono / espera

JS es de un solo subproceso y se basa en un sistema de eventos (pila de llamadas). Soy un gran fanático de hablar como ¿Qué es un bucle de eventos? (con subtítulos en ruso). Las promesas y async / await son excelentes herramientas para gestionar esto. La mayor parte de mi código es asíncrono, y estas herramientas simplifican enormemente mi trabajo. Honestamente, las promesas son un tema serio y requieren un poco de tiempo para acostumbrarse, pero son geniales.

A menudo uso async / await en pruebas y backends. Aquí hay un ejemplo de una prueba asincrónica:

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

Aquí hay un ejemplo del uso de async \ await en Express:

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

Curiosamente, no suelo usar async / await en mi código React (al menos directamente). Esto se debe a que trato de hacer la mayor parte de la "lógica asincrónica" fuera de mis componentes. Por lo tanto, si, por ejemplo, hago algo asíncrono al llamar a useEffect en React, me limito a una llamada a la función asincrónica, ya que me resulta más fácil trabajar con promesas:

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

Le aconsejo que lea el artículo de Anthony Chu "Async / Await in Node".

Conclusión

Hay muchas otras características que uso regularmente y que podrían incluirse en esta lista. Estas características son mis favoritas, siempre recurro a ellas. También hay algunas nuevas incorporaciones al lenguaje que aún no han ingresado en mi memoria muscular. ¡Ahora es el momento de convertirse en desarrollador de JS! ¡Espero que este artículo te haya sido útil! Buena suerte