Доброго времени суток, друзья!
Представляю Вашему вниманию перевод статьи Kent Dodds «5 JavaScript Features I Couldn't Code Without».
Это мой первый перевод, так что буду рад любым замечаниям.
5 фич JavaScript, без которых я не мог бы писать код
Прежде чем мы начнем, позвольте мне немного рассказать о коде, который я пишу. Почти весь мой код состоит из Javascript, плюс немного HTML и CSS. Я пишу как клиентский, так и серверный JS. Я тестирую свой код. Я создаю и распространяю библиотеки с открытым исходным кодом, которые используются тысячами разработчиков по всему миру. Для фронтенда я использую React, для бэкенда — Express или бессерверные вычисления.
Вот 5 фич JS, без которых я не мог бы писать код. В произвольном порядке. Разумеется, «без которых я не мог бы писать код» — это гипербола. Это фичи, которые мне по-настоящему нравятся и используются мной постоянно.
1. Деструктуризация
Я использую эту фичу почти во всех файлах. Неважно, о React-компоненте идет речь или о функции, принимающей аргументы, деструктуризация — прикольная штука.
Вот несколько примеров:
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
Вот как это выглядит в React:
// без деструктуризации:
function UserName(props) {
return (
<div>
</div>
)
}
// с использованием деструктуризации:
function UserName() {
return (
<div>
</div>
)
}
// с использованием вложенной деструктуризации:
function UserName({name: {first, last}}) {
return (
<div>
</div>
)
}
Эта фича позволяет делать некоторые интересные вещи:
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(`$ ($) is an enemy to $ in "$5 JavaScript Features I Couldn't Code Without"`)
2. Модули
Это еще одна фича, которую я использую практически в каждом файле. До того как модули стали частью языка, приходилось использовать странные библиотеки и инструменты для работы с большими проектами. С модулями (и сборщиками, такими как Rollup или Webpack) у нас появилась отличная возможность делиться кодом с другими.
Вот парочка примеров:
// 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'
Если Вы хотите узнать больше о модулях, можете посмотреть мое видео на youtube — «More than you want to know about ES6 Modules».
3. Параметры по умолчанию
Я люблю и использую эту фичу все время. Это относится как к аргументам функции, так и к деструктуризации. Вот как это используется при деструктуризации объекта:
const bench = {type: 'Piano', adjustable: false}
const {legs = 4} = bench
// `The bench has $ legs`
// -> The bench has 4 legs
// bench - скамья, leg - ножка
Обратите внимание, что у объекта bench нет свойства legs. Без использования синтаксиса параметров по умолчанию значением legs будет undefined.
Вы также можете использовать деструктурирующее присваивание с этой фичей:
const bench = {type: 'Piano', adjustable: false}
const {legs: legCount = 4} = bench
// `The bench has $ legs`
// -> The bench has 4 legs
Вот как это выглядит в списке параметров:
function getDisplayName(firstName = 'Unknown', lastName = 'Unknown') {
return `$ $`
}
// getDisplayName()
// -> Unknown Unknown
// getDisplayName('Andrew')
// -> Andrew Unknown
// getDisplayName(undefined, 'Yang')
// -> Unknown Yang
// getDisplayName('Andrew', 'Yang')
// -> Andrew Yang
Эта фича также позволяет делать некоторые довольно интересные вещи, поскольку значение справа от знака "=" вычисляется только при необходимости. Это означает, что Вы можете использовать ее для проверки наличия обязательных параметров:
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(`$ is required`)
}
// getCandy('twix', 'king')
// -> {kind: 'twix', size: 'king', upperKind: 'TWIX'}
// getCandy('twix')
// -> ошибка: 'size is required'
Некоторые считают этот код слишком сложным. Возможно, они правы. Но понимать, как это работает, очень круто!
О, а Вы заметили, что мы можем использовать предыдущие аргументы как часть параметров по умолчанию для следующих аргументов (как в случае с upperKind)? Здорово, правда?
4. Стрелочные функции
Я часто использую стрелочные функции. Мне нравятся функциональные выражения, но если, например, мне нужна анонимная функция обратного вызова (которой я не хочу придумывать имя), или я хочу получить неявные возвращаемые значения, то стрелочные функции — это как раз то, что мне нужно.
Вот несколько примеров использования стрелочных функций:
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. Промисы и async/await
JS является однопоточным и построен на системе событий (стеке вызовов). Я большой поклонник разговоров типа Что такое event loop? (с русскими субтитрами). Промисы и async/await являются отличными инструментами для управления этим. Большая часть моего кода является асинхронной и названные инструменты значительно упрощают мою работу. Честно говоря, промисы являются серьезной темой и требуют некоторого «привыкания», но они классные.
Я часто использую async/await в тестах и бэкенде. Вот пример асинхронного теста:
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()
})
А вот пример использования async\await в Express:
async function getListItems(req, res) {
const listItems = await listItemsDB.query({ownerId: req.user.id})
res.json({listItems: await expandBookDataMultiple(listItems)})
}
Любопытно, что я не часто использую async/await в своем React-коде (по крайней мере, напрямую). Так происходит потому, что я стараюсь делать большую часть «асинхронной логики» вне моих компонентов. Поэтому если я, например, делаю что-то асинхронное при вызове useEffect в React, я ограничиваюсь одним вызовом асинхронной функции, поскольку считаю, что с промисами работать легче:
React.useEffect(() => {
getUser().then(
user => setState({status: 'success', error: null, user}),
error => setState({status: 'error', error, user: null}),
)
}, [])
Советую прочитать статью Anthony Chu «Async/Await in Node».
Заключение
Существует множество других фич, которые я регулярно использую и которые могли бы войти в этот список. Приведенные фичи — мои любимые, к ним я все время обращаюсь. Имеются также некоторые свежие дополнения к языку, которые еще не вошли в мою мышечную память. Сейчас самое время стать JS-разработчиком! Надеюсь, это статья была Вам полезной! Удачи!
