Изменений в ES6 было много. В этой статье я расскажу о пяти фичах нового JavaScript, которыми вы можете уже пользоваться, чтобы обновить свой код и узнаете что лучше отложить.
# Ecma-что?
С годами у JavaScript появилось много версий, но до недавнего времени развитие шло медленно. Я думаю, что за последние два года произошло больше изменений, чем за предыдущие двадцать лет. ES 6 расшифровывается как EcmaScript 6. Он также называется в EcmaScript 2015, или ES 2015. Это все разные названия для ‘нового JavaScript’.
Я не совсем уверен, почему JS все-таки так сильно изменился в последнее время, но вроде бы потому, что владельцы крупных движков JavaScript наконец-то заинтересовались в продвижении этого языка.
Кроме того, появление transpilers как и TypeScript сделали возможным использование новых возможностей языка, прежде чем их встроили в браузеры. Это значительно подтолкнуло JavaScript вперед.
JS важен, потому что это структура вэба, и он все больше используется в серверной части приложения с Node, а также в мобильных и декстопных приложениях с использованием Cordova, React Native и Electron.
Короче говоря, JS — повсюду
Поэтому его продвижение важно. Языки, которые не эволюционируют, начинают умирать. Улучшение языка это возможность улучшить наш код, уменьшить баги в приложениях. И некоторые из этих свойств на самом деле позволяют средам выполнения (runtimes) запустить код быстрее. Ну что же, давайте погрузимся в новое, начнем с переменных.
# Проблемы с переменными
В JavaScript, когда вы хотите создать переменную, то используете ключевое слово var. var это здорово, но есть пара проблем. Во-первых, переменные постоянно меняются. Нет возможности создать настоящую константу в JavaScript. Вы можете как бы схитрить, создав объект с неизменным свойством. Вы можете переопределить сеттер (setter) свойства, так, что он не сможет быть установлен вне кода, но придется слишком много печатать и вам потребуется весь объект вместо простой переменной.
1
2
3
4
5
6
|
var VARS = {
foo
set = function() { }
get = function() { return 42 }
}
VARS.foo = 42; // теперь у меня есть константа
|
Переменные JavaScript также имеют проблему с областью видимости. Взгляните на этот код.
1
2
3
4
5
6
7
8
|
function badCode() {
if(foo) {
var x = 5;
}
if(bar) {
console.log(x);
}
}
|
Переменные, объявленные с var глобальны для функции, в которой они определены, а не для блока. Можно подумать, что приведенный выше оператор log не будет работать, потому что bar определен в другом блоке и в языке, как java или C#, вы будете правы, но в JavaScript var является глобальной для функции, а не для блока.
Станет хуже, когда мы добавим в переменную всплытие (hoisting). Рассмотрим этот код:
1
2
3
4
|
function badCode() {
console.log(«foo is»,foo);
var foo = ‘bar’;
}
|
Я использую foo до того, как я его определил. Что означает этот код? Под капотом движок JavaScript позволит поднять объявление переменной в верхнюю часть блока с функцией. Я могу понять, почему вы, возможно, захотите поднять функцию, но поднятие переменной позволит легко представить тонкие ошибки, которые очень сложно диагностировать.
Посмотрите на этот цикл for:
1
2
3
4
|
for(var i=0; i<5; i++) {
console.log(i);
}
console.log(i);
|
Переменная используется только внутри цикла, но я все еще могу ссылаться на нее снаружи. Здесь можно ожидать просто тонны багов.
Мы не должны больше использовать var. Вместо этого мы можем использовать const and let.
# Знакомство с const и let
Новое ключевое слово const делает именно то, что предполагает название. Это реальная константа. Если вы попытаетесь установить константу, то получите ошибку времени выполнения (runtime error). Даже лучше, системы проверки кода могут обнаружить такого рода ошибки во время компиляции, так что вы сможете найти ошибки ранее во время разработки, а не в продакшн.
Другой новый вид переменной создается с помощью ключевого слова let. Она как и var, но ее область видимости ограничена блоком вместо функции. Сейчас она делает то, что мы ожидаем.
1
2
3
4
5
6
7
8
|
function goodCode() {
if(foo) {
let x = 5;
}
if(bar) {
console.log(x); //ошибка
}
}
|
Давайте пересмотрим пример c циклом for:
1
2
3
4
5
6
|
function goodCode() {
for(let i=0; i<5; i++) {
console.log(i);
}
console.log(i); //ошибка
}
|
Теперь переменная i ограничивается телом цикла for. Нет никакого способа случайного использования вне тела. Кроме того, let не поднимается, так что нет всех этих волшебных движущихся переменных.
Новые ключевые слова const и let это полная замена var. С современными браузерами и новыми версиями Node больше нет никаких причин использовать var. Скатертью дорога этому var.
Продолжение — 5 фич в ES6, которые можно использовать уже сегодня
Источник: scotch.io