JavaScript – один из самых популярных языков программирования. Как говорится: «Если в планах выучить только один язык – учи JavaScript»
Quincy Larson, учредителя FreeCodeCamp, недавно спросили на интервью какой же язык нужно учить первым. Он ответил: «JavaScript»:

Програмное обеспечение поглощает мир. JavaScript поглощает програмное обеспечение. JavaScript набирает обороты с каждым годом и никто не знает сможет ли что-то заменить его в итоге.

Если у вас нет веской причины учить какой-то другой язык (например поддержка существующей неджаваскриптовой кодовой базы проекта на работе), мой вам совет, совершенствуйтесь в JavaScript.

Если это звучит убедительно – вот список из 127 полезных JavaScript снипетов, которые можно выучить и сразу начать использовать.

1. all

Сниппет вернет true, если для всех элементов массива функция вернет true. Если хоть для одного элемента функция вернет false, сниппет тоже вернет false. Второй аргумент можно опустить, если хотите использовать Boolean по умолчанию.

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

2. allEqual

Сниппет вернет true, если все элементы массива равны.

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

3. approximatelyEqual

Сниппет проверяет являются ли 2 числа практически равными, с очень маленькой погрешностью.

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

4. arrayToCSV

Этот сниппет преобразует элементы массива в строки, разделенные запятой

const arrayToCSV = (arr, delimiter = ',') =>
arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
  
arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'

5. arrayToHtmlList

Этот сниппет преобразует элементы массива в теги и добавляет их в список с указанным идентификатором.

const arrayToHtmlList = (arr, listID) =>
  (el => (
    (el = document.querySelector('#' + listID)),
    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
  ))();
  
arrayToHtmlList(['item 1', 'item 2'], 'myListID');

6. attempt

Этот сниппет возвращает либо результат выполнения функции, либо объект ошибки

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};
var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

7. average

Этот сниппет возвращает среднее из двух или более числовых значений.

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2

8. averageBy

Этот сниппет возвращает среднее значение массива после первоначального сопоставления каждого элемента со значением, используя переданную функцию.

const averageBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
  arr.length;
  
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

9. bifurcate

Этот сниппет разбивает значения на две группы, а затем помещает истинные элементы фильтра в первую группу, а остальные – во вторую.
Можно использовать Array.prototype.reduce() и Array.prototype.push() для добавления элементов в группы на основе фильтра.

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

10. bifurcateBy

Этот сниппет разбивает значения на две группы на основе переданной функции. Если функция вернет истинное значение, элемент будет помещен в первую группу. В противном случае он будет помещен во вторую группу.

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
  
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

11. bottomVisible

Этот сниппет проверяет видна ли нижняя часть страницы.

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

bottomVisible(); // true

12. byteSize

Этот сниппет возвращает длину строки в байтах.

const byteSize = str => new Blob([str]).size;

byteSize(''); // 4
byteSize('Hello World'); // 11

13. capitalize

Этот сниппет делает первую букву строки заглавной.

const capitalize = ([first, ...rest]) =>
  first.toUpperCase() + rest.join('');
  
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'

14. capitalizeEveryWord

Этот сниппет делает первую букву каждого слова строки заглавной.

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

capitalizeEveryWord('hello world!'); // 'Hello World!'

15. castArray

Этот сниппет возвращает массив из переданных значений.

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

16. compact

Этот сниппет удаляет ложные значения из массива.

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); 
// [ 1, 2, 3, 'a', 's', 34 ]

17. countOccurrences

Этот сниппет считает колличество повторений значения в массиве.

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

18. Create Directory

В этом сниппете используется existSync (), чтобы проверить, существует ли каталог, а затем mkdirSync (), чтобы создать его, если его нет.

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test'); 
// creates the directory 'test', if it doesn't exist

19. currentURL

Этот сниппет возвращает текущий URL.

const currentURL = () => window.location.href;

currentURL(); // 'https://medium.com/@fatosmorina'

20. dayOfYear

Этот сниппет возвращает порядковый номер дня текущего года.

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272

21. decapitalize

Этот сниппет переводит первую букву строки в нижний регистр.

const decapitalize = ([first, ...rest]) =>
  first.toLowerCase() + rest.join('')

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar'); // 'fooBar'

Это была первая часть сниппетов из шести. Продолжение следует…