Практическое примение ES6 (стрелочные функции и шаблонные строки)

Новый версия стандарта языка JavaScript вышла еще в июне 2015 года, и внесла много нововведений в синтаксис. Я хочу показать как можно пользоваться этой версией на практике. Начнем с того что полной поддержки в браузерах, на сегодняшний день, нет. Но нас выручает проект Babel (нужен для конвертирования нового синтаксиса в старый, а где не справляется, то добавляются полифилы). Есть много способов использовать Babel в своем проекте начиная от простого компилирования кода, до систем сборки, принцип не меняется.

Стрелочные функции

Начнем со стрелочных функций, синтаксис у них такой () => {}, круглые скобки не обязательны в некоторых случаях, так же как и фигурные скобки.

Разберем круглые скобки. Их можно не писать когда у функции один аргумент. Но если у функции нет аргументов, то скобки обязательны

Пример:

state => {
    return state
}

Более практический пример:

const arr = [1, 2, 3, 4, 5];

const arr2 = arr.map(item => {
    return item + 1
})

console.log(arr2) // [2, 3, 4, 5, 6];

Во 2 примере мы перебираем массив, с помощью метода map и если нам надо выводить еще и индекс элемента, то скобки писать придеться

Пример:

const arr = [1, 2, 3, 4, 5];

const arr2 = arr.map((item, index) => {
    return item + index
})

console.log(arr2) // [1, 3, 5, 7, 9];

На этом с круглыми скобками мы закончим, на очереде у нас фигурные скобки, с ними немного посложнее будет

Вот 2 примера:

const myFunc = (arr) => {
    return arr.push("some string");
}

const myFunc2 = (arr) => arr.push("some string");

Эти 2 функции одинаковы, хотя и пишуться немного по разному. Главное правило, если вы сомневаетесь писать скобки или нет, это если нету скобок то функция автоматически возвращает все что после знака “стрелки” =>. Это можно использовать при написании более короткого кода.

Если пропустить эти функции через Babel, то получим это:

"use strict";

var myFunc = function myFunc(arr) {
    return arr.push("some string");
};

var myFunc2 = function myFunc2(arr) {
    return arr.push("some string");
};

Как вы можете убедиться они одинаковы. И еще одно дополнение, если вам нужно возвращать обьект из функции таким способом:

const myFunc2 = (foo) => {bar: foo};

То у вас ничего не получиться, давайте посмотрим на код после транспиляции:

"use strict";

var myFunc2 = function myFunc2(foo) {
  bar: foo;
};

Что здесь происходит? Фигурные скобки воспринимаются как часть функции, по этому нитерпритатор не может выполнить выражение bar: foo;. Для А чтобы вернуть обьект из функции надо просто обернуть круглыми скобками наш обьект

const myFunc2 = (foo) => ({bar: foo});

И результат будет:

"use strict";

var myFunc2 = function myFunc2(foo) {
  return { bar: foo };
};

Применение в React JS

Используем эти знания на приктике, а именно в написании компонентов для React JS. И так у нас задача вывести список элементов в меню, меню формируется динамически, напрмер формируется на сервере и приходит к нам в виде JSON обьекта, в котором есть массив обьектов, а в обьекте содержиться вся информация о элементах меню

const data = [
    {
        "title": "Пункт 1",
        "url": "http://somesite.com"
    },
    {
        "title": "Пункт 2",
        "url": "http://somesite.com"
    },
    {
        "title": "Пункт 3",
        "url": "http://somesite.com"
    }
]

В шаблоне мы создаем компонент Menu, и при получении данных начинаем их перебирать и отображать

<ul className="menu">
    {data.map((item, index) => {
        return(
            <li key={index}>
                <a href={item.url}>
                    {item.title}
                </a>
            </li>
        )
    })}
</ul>

Убрать круглые скобки мы несможем, потому что второй аргумент index обязательный он нужен для внутреннего устройства React компонентов, а вот фигурные скобки мы можем убрать

<ul className="menu">
    {data.map((item, index) =>
        <li key={index}>
            <a href={item.url}>
                {item.title}
            </a>
        </li>
    )}
</ul>

ES6 Template Strings (шаблонная строка)

Шаблонная строка это “синтаксический сахар” для конкатенации строк, берет свое начало еще с CoffeeScript, синтаксис очень прост `, одна “перевернутая одинарная кавычка” в начале и одна в конце выражения, все пробелы внутри заменяются знаком +{знак пробела}+. Для того чтобы задать выражение используется такой синтаксис ${выражение}.

Пример:

const foo = 23;
const bar = 34;

const baz = `У нас есть ${foo + bar} яблок`;

console.log(baz) // "У нас есть 57 яблок":

Произошло следующее, Babel перевел это в следующий код

"use strict";

var foo = 23;
var bar = 34;

var baz = "У нас есть " + (foo + bar) + " яблок";
console.log(baz) // "У нас есть 57 яблок":

В этом примере видно, что писать такие строки стало легче, не нужно думать добавиться ли пробел или нет, теперь попробуем использовать это на приктике.

const guid = () => {
  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  return `${s4()+s4()}-${s4()}-${s4()}-${s4()}-${s4()+s4()+s4()}`;
}

Это функция для генерации GUID, при каждом вызове этой функции будет сгенерирован новый GUID, а теперь посмотрим как бы выглядел код без шаблонной строки

const guid = () => {
  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + (s4() + s4() + s4());;
}

Сегодня мы разобрали стрелочные функции и шаблонные строки, но это лишь малая часть всех нововведений, что было добавленно в язык JavaScript, эта статья будет еще дорабатываться и корректироваться.

Дополнительные ссылки

Спецификация ECMAScript