Let, const и другие новые JavaScript функции, необходимые для улучшения разработки


Содержание материала:

Полезные советы по использованию современных приёмов в JavaScript

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

Знание того, как работают современные JavaScript переменные может помочь вам сделать выбор, когда использовать современный синтаксис, а когда логичнее придерживаться традиционных методов.

За что можно зацепиться?

Я не знаю никого, кто бы не запутался в современном JavaScript, и ваш опыт здесь не играет совершенно никакой роли. Множество фреймворков, просто изменений в языке и многое другое. Вообще удивительно, что кто-то может выполнять работу, учитывая тот объём новой информации, который приходится осваивать чуть ли не каждый месяц.

Мне кажется, что секретом успеха во владении любого языка программирования, независимо от сложности приложения, является возвращение к основам. Например, если вы хотите разобраться с Rails, то для начала освойте Ruby, особенно если вы хотите использовать однонаправленные потоки данных в изоморфном режиме с помощью вебпак, то лучше всего начать с основ JavaScript.

Понимание того, как работает язык – это более полезное умение, нежели знакомство с самыми новыми технологиями, ведь они меняются слишком быстро. С JS абсолютно такая же история.

Проблема заключается в том, что некоторые новые особенности перечёркивают некоторые возможности ранних версий. Но иногда современный синтаксис может наоборот заменить громоздкую конструкцию более простой. Тем не менее, хотя новый подход и может зачастую показаться чем-то более простым, необходимо знать множество тонкостей старых и проверенных методов.

А сейчас немного о синтаксисе

Многие изменения в JS в последние годы были описаны, как добавочные к основному синтаксису. Иногда подобные добавления помогают новичкам быстрее разобраться в некоторых нюансах, а для остальных все они явились лишь более чистым и простым способом воссоздать то, что уже известно. Другие же изменения привнесли куда более обширные возможности.

Если же вы хотите попытаться реализовать давно решённую задачу при помощи нового синтаксиса, не понимая принципов его работы, то будьте готовы столкнуться со следующими трудностями:

  • необходимость отладки кода, который раньше работал;
  • тонкости, которые приводят к ошибкам во время работы программы;
  • баги в самых неожиданных местах.

На самом деле некоторые нововведения, призванные заменить старый код по факту работают по совершенно иным принципам, нежели их предшествующие решения. Именно поэтому иногда следует всё же пользоваться чем-то старым, но проверенным. Из всего этого можно вынести, что знание старого и нового, принципов работы и умение делать выбор являются тем, что имеет решающее значение для написания современного эффективного кода.

Переменные и константы (var, let и const)

В современном JS появились два новых ключевых слова, let и const , которые в большинстве случаев могут заменить var . Тем не менее они ведут себя совершенно иным образом, нежели старый оператор объявления переменной.

По традиции JavaScript переменные объявлялись при помощи ключевого слова var . Невозможность сделать это означало, что переменная являлась глобальной, это в свою очередь вытекало в использование её разными скриптами на разных страницах.

Самой лучшей заменой var в современном скрипте является оператор let . Переменные, объявленные с помощью var всегда имели наивысший приоритет, неважно как «глубоко» они находились. Это означало, что любая переменная могла быть использована в любой части скрипта вне зависимости от её местоположения. Подобного нельзя себе позволить, если применять let или const .

Когда вы объявляете переменные с помощью let или const , то они будут доступны только в одном блоке, в котором и находятся. Блок в JS обозначается фигурными скобками <> .

Подобные приёмы довольно удобны если вам надо выполнить цикл с итерацией или просто цикл. Раньше в JavaScript тип переменной, подобный старому варианту мог вызвать некоторые затруднения, так как имя такой переменной могло быть использовано где-нибудь вне цикла, что определённо вызывало бы ошибку. Тем не менее let может подловить вас на том, что вы будете ожидать от данной переменной возможности использования где-либо вне её блока.

Другой альтернативой может являться const , которая представляет собой константу, хотя и не совсем. const не может быть объявлена без точного значения в отличие от var или let :

const также выдаст ошибку если вы попытаетесь изменить её значение после того, как она объявлена:

Если вы надеетесь, что контекст, описанный как константа будет всегда неизменным, то вас очень удивят объекты или массивы, объявленные через const .

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

Хотя это довольно неплохой ход при описании переменных, которые в дальнейшем должны сохранять своё значение, но const всё же теряет большую часть своих свойств при работе, например, с массивами, так что новички могут войти в заблуждение, ожидая от данного приёма большей «защиты», нежели он может представить.

Обычно я использую const для записи простых чисел, либо некоторых строк, которые я хочу инициализировать один раз и потом закрыть. let мне чаще всего нужен для ограничения пространства, в котором переменная может быть использована, хотя чаще всего именно её я и использую, не видя нужды пользоваться классическим приёмом для обозначения переменной, так как он зачастую просто ломает всю иерархию.

Ограничение поля применения функции

Зачастую функции, описанные с помощью ключевого слова function , могут вызываться для выполнения ряда операторов, определённых в блоке по любым параметрам, необязательно возвращая какое-либо значение:

Они также могут использоваться с ключевым словом для создания объектов с прототипным наследованием, и это определение может быть размещено в любом месте, где они могут быть вызваны. Функция также может быть вызвана с помощью new для создания объектов с прототипным наследованием:

Функции, используемые обоими способами, могут быть определены как до, так и после вызова.

Обычная функция также создаёт некий контекст, определяя значение переменных, существующих только в теле самой функции. Но некоторые из этих переменных или подфункций всё же можно изменять при вызове функции.

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

А теперь перейдём к классам

Одна часть традиционной функции была заменена на класс. Это в свою очередь позволяет автору кода сделать свой выбор – пойти по пути функционала и использовать простые операторы для вызова функции, либо выбрать более объектно-ориентированный подход с прототипным наследованием функций и т.д.

Так же, как и в других объектно-ориентированных языках программирования в JavaScript тип переменной, известный больше как классы очень похож на свои аналоги в том же C++, что не может не радовать разработчиков, решивших перейти на серверную разработку.

Но есть и отличия между функциями и классами. Например, при выполнении ООП в JS классы требуют прямого объявления, т.е. класс должен быть объявлен до того, как он будет связан с новым ключевым словом. С классическими функциями всё происходит ровно наоборот благодаря прототипному наследованию, ведь объявление функции автоматически поднимает её вверх, что разрешает использовать ключевое слово уже после.

Различия между стрелочными и обычными функциями

Ещё один аспект традиционных функций может быть теперь достигнут с помощью функций стрелок и нового синтаксиса, который позволяет писать вызывающую функцию более кратко, аккуратнее входя в обратный вызов. По сути самой простой реализацией задуманного приёма является единственная строка, которая полностью закрыта фигурными скобками и автоматически возвращает результат выполняемой инструкции:

Функции стрелки заключают в себе несколько особенностей, которые делают их в каком-то смысле более удобными, упрощая вызов функции, не изменяя при этом привычное всем ключевое слово.

Например, функция стрелки наследует как this так и arguments из контекстов. Это хорошо подходит для тех ситуаций, когда программисту необходимо выполнить в коде обработку событий setTimeout и т.д. Обычные методы в такой ситуации зачастую вынуждают писать свёрнутый код, связывающий несколько функций с помощью .bind(this) . Всё это уходит на задний план вместе с функциями стрелок.

Что в итоге мы получаем

Множество новых изменений в JavaScript были представлены из-за растущих нужд разработчиков, а не только ради удобства. Но это совсем не означает, что старые приёмы канули в лето. Обычно грамотное комбинирование старых и новых техник сделают ваш код лаконичным.

Обязательно ознакомьтесь с этим туториалом. Помните, что у каждого разработчика свои методы, точно так же, как и у автора, это не является чем-то плохим, а наоборот показывает разнообразие решений разных задач. Однако, нам ещё многое предстоит освоить, в первую очередь это конечно традиционный JavaScript.

Лучшей практикой этого языка является понимание того, какую роль он пытается выполнить. В зависимости от ваших привычек это может быть не всегда легко понять. Чтобы решить, какой подход является лучшим для вас сначала подумайте о поставленной задаче и о том, кто в дальнейшем после вас будут ей заниматься.

ES6: что нового в новой версии JavaScript

Вероятно, вы уже слышали об ECMAScript 6, или ES6. Это новая версия языка JavaScript, в которой было реализовано множество полезных особенностей. Далее мы рассмотрим некотрые из этих особенностей.

Переменные

Для объявления переменной мы привыкли использовать ключевое слово var. Теперь так же можно использовать ключевое слово let. Они отличаются областью видимости объявляемой переменной. Переменная, объявленная с помощью var видна в пределах всей функции, переменная, объявленная с помощью let — только в пределах блока.

Это делает код чище, если переменная используется только в блоке — она доступна только в этом блоке. Особенно это актуально для цикла for.

const

Ключевое слово const также позволяет создать переменную уровня блока, но такая переменная обязательно должна иметь значение и не доступна для перезаписи.

Но если значением переменной является массив или объект — отдельные свойства или элементы массива можно редактировать.

Стрелочные функции (Arrow Functions)

Использование стрелочных функций в определенных случаях делает код более красивым и лаконичным. В примере ниже один и тот же код оформлен в виде стрелочной функции и обычной функции ES5:

В синтаксисе стрелочной функции нет ключевого слова function, сначала указывается список параметров, если необходимо, затем «толстая стрелка» и далее тело функции. Если параметров нет, указываются пустые круглые скобки:

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

Стрелочные функции отличаются от обычных не только более коротким синтаксисом. Стрелочная функуция наследует значения this и arguments от окружающего контекста. Это означает, что вам не нужно писать уродливое var that = this, контекст выполнения будет правильным. Ниже пример на ES6 или аналог на ES5:

Строки

Методы

Несколько полезных методов были добавлены к пототипу String.

Литерал шаблона (template literal)

Литерал шаблона позволяет использовать переменные внутри строки, заключенные в символы $<. >, например:

Литерал шаблона также можно использовать для многострочных строк (не забывайте, что пробел также является частью строки):

Массивы

Массивы также получили несколько полезных методов.

Метод Array.from создает массивы из объектов, похожих на массивы или итерируемых объектов. Примерами объектов, похожих на массив, являются:

  • переменная arguments внутри функции;
  • коллекция nodeList, возвращаемая document.getElementsByTagName();
  • новые структуры данных Map и Set.

В примере выше метод forEach доступен в коллекции itemElements.

Интересной особенностью метода Array.from является второй аргумент mapFunction. Он позволяет преобразовать каждый элемент при создании массива:

Также теперь у нас есть метод Array.of, функционал которого очень похож на конструктор массива. Он отличается для случая с одним параметром.

Несколько новых методов были добавлены прототипу Array.

  • find возвращает первый элемент, для которго переданная функция обратного вызова вернет true.
  • findIndex возвращает индекс первого элемента, для которго переданная функция обратного вызова вернет true.
  • fill «перезаписывает» элементы массива заданным значением.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Ключевое слово let

В редакцию ES2015 были введены два новых важных ключевых слова JavaScript — let и const.

Эти два ключевых слова позволяют в JavaScript декларировать переменные и константы с областью видимости внутри блока.

До редакции ES2015 в JavaScript было только два типа области видимости — глобальная и внутри функции.

Глобальная область видимости

Переменные, декларированные глобально (вне какой-либо функции), обладают глобальной областью видимости.

Доступ к глобальным переменным можно получить из любого места программы на JavaScript.

Область видимости внутри функции

Переменные, декларированные локально (внутри какой-либо функции), обладают областью видимости внутри функции.

Доступ к локальным переменным можно получить только внутри той функции, где эти переменные были декларированы.

Область видимости внутри блока

Переменные, декларированные при помощи ключевого слова var, не обладают областью видимости внутри блока.

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

До редакции ES2015 в JavaScript не было области видимости внутри блока.

Топ-пост этого месяца:  Исключить из вывода плагином YARPP рекламные записи

Начиная с редакции ES2015 переменные, декларированные при помощи ключевого слова let, приобретают область видимости внутри блока. В результате этого переменные, декларированные таким образом внутри блока , становятся недоступными за пределами этого блока.

Передекларирование переменных

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

Так, если передекларировать переменную внутри блока, то она будет перекларирована и за его пределами:

Решить эту проблему можно, если передекларировать переменную при помощи ключевого слова let.

В этом случае передекларирование переменной внутри блока не будет передекларировать переменную за пределами этого блока:

Область видимости внутри цикла

Использование ключевого слова var в цикле:

Использование ключевого слова let в цикле:

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

Во втором примере переменная, декларированная в цикле с ключевым словом let, не передекрарирует переменную за пределами цикла, оставляя неизменным ее значение, так как использование ключевого слова let для декларирования переменной i в цикле делает переменную i видимой только внутри этого цикла.

Область видимости внутри функции

Поведение переменных, декларированных внутри функции при помощи ключевых слов var и let, одинаковое. В обоих случаях у переменных будет локальная область видимости.

Глобальная область видимости


Поведение переменных, декларированных вне блока при помощи ключевых слов var и let, одинаковое. В обоих случаях у переменных будет глобальная область видимости.

Глобальные переменные в HTML

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

В HTML глобальная область видимости — это глобальный объект window.

Глобальные переменные, декларированные при помощи ключевого слова var, принадлежат глобальному объекту window:

Глобальные переменные, декларированные при помощи ключевого слова let, не принадлежат глобальному объекту window:

Передекларирование

Передекларировать переменную JavaScript при помощи ключевого слова var можно в любом месте программы:

Нельзя передекларировать переменную, которая была декларирована при помощи ключевого слова var, при помощи ключевого слова let в той же области видимости или в том же блоке:

Нельзя передекларировать переменную, которая была декларирована при помощи ключевого слова let, при помощи ключевого слова let в той же области видимости или в том же блоке:

Нельзя передекларировать переменную, которая была декларирована с ключевым словом let, при помощи ключевого слова var в той же области видимости или в том же блоке:

Передекларировать переменную при помощи ключевого слова let в другой области видимости или в другом блоке можно:

Поднятие

Переменные, декларированные при помощи ключевого слова var, «поднимаются» в верх JavaScript кода (если вы не знаете, что такое «поднятие» в JavaScript, то см. главу Поднятие переменных в Javascript).

Таким образом, мы можем использовать такие переменные до того, как они будут декларированы:

Переменные, декларированные при помощи ключевого слова let, не «поднимаются» в верх JavaScript кода.

Использование переменной, декларированной при помощи ключевого слова let, до ее реальной декларации приведет к ошибке ReferenceError.

В этом случае такая переменная находится в, так называемой, «временной мертвой зоне» с начала блока и до ее декларации:

Способы объявления переменных (var, let, const) в JS

Переменная – это ячейка, где в промежуточном состоянии хранятся результаты разных операций в процессе программирования. Возьмем простое математическое действие сложения и выведем результат в консоль браузера (F12).

Все работает, вывелось число 11, однако всякий раз, когда нам потребуется сложение этих чисел при написании кода в этой программе, придется снова писать 5+6.

Чтобы освободить себя от лишней рутины и кода, понадобились переменные, мы присвоили переменной x, действие сложения и в дальнейшей работе будем обращаться уже к переменной x, например выводить результат в консоли.

x = 5+6; // записали только один раз
console.log(x); //выводить название переменной можно много раз

Вывелось число 11 – результат одинаковый, а кода мы написали меньше. Обратите внимание, что мы никак не обозначили, что x –переменная и JavaScript не выдал никакой ошибки. Только с точки зрения программирования, эта x непонятно откуда взялась, была ли она введена раньше или только что её ввели, непонятно.

Везде должен быть порядок, ведь над одним проектом могут работать разные программисты, поэтому нужны четкие правила написания кода. Поэтому в JavaScript ввели такое понятие, как инициализация переменной – команда для создания переменной. Переменную надо объявить, то есть конкретно сказать: «А вот здесь я объявляю переменную x«.

Переменная var

Дальше, уже на законных основаниях, можно присваивать ей какие-нибудь действия и никто уже не скажет: Эй, x – ты кто такой? Теперь при обращении к переменной, на самом деле мы обращаемся к её значению.

В переменной может лежать число, строка (пишется в кавычках), а ещё её можно перезаписать. Теперь вместо числа 11, там будет фраза:

А почему нет? Мы из ячейки достали ключи и взамен положили туда конверт на дальнейшее хранение. Время от времени, мы можем доставать оттуда конверт, раскрашивать его фломастерами и класть обратно, то есть производить манипуляции.

В старом стандарте JavaScript, можно было объявлять переменную, сколько угодно раз и все это как-то работало , но вызывало страшную путаницу. Поэтому в новом стандарте, решили ввести два новых обозначения переменных – let и const, отказавшись от var.

Переменная let

Она очень похожа на var, но за исключением того, что переменную let можно объявить только один раз.

Такой подход более строгий и заставляет программиста более серьезно относиться к логике.

Какие отличия у let от var?

  • let нельзя объявить много раз
  • let нельзя использовать без объявления
  • переменные объявленные через let, будут видны только внутри фигурных скобочек, где их и объявили.

Такие новшества заставляют писать более чистый код и с ним легко работать при дальнейшей поддержке проекта.

Переменная const

Это новый тип переменной – константа, которая не изменяет своего значения. Попытка присвоить константе новое значение, приведет к ошибке.

const x = 5;
x = 10 // перезапись вызовет ошибку
console.log(x);

Переменная const не меняет своего значения, но может поменять свойства в массивах и объектах. Название constчасто пишут в верхнем регистре, как-бы подчеркивая её постоянство.

Заключение

Рекомендую, начинающим изучать JavaScript, применять новые способы объявления переменных, через let и const. Более жесткие правила в программировании – это благо для новичков. Широкая область использования var, только создает неразбериху в коде.Также в помощь вам будет мой видео-курс, по практическому применению JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Let, const и другие новые JavaScript функции, необходимые для улучшения разработки

    18849 просмотра

    4 ответа

    1521 Репутация автора

    Независимо от функциональных различий, имеет ли использование новых ключевых слов let и const какое-либо обобщенное или специфическое влияние на производительность по сравнению с var?

    После запуска программы:

    .. Мои результаты были следующими:

    Однако обсуждение, как отмечалось здесь, указывает на реальный потенциал для различий в производительности при определенных сценариях: https://esdiscuss.org/topic/performance-concern-with-let-const

    Ответы (4)

    76 плюса

    716618 Репутация автора

    TL; DR

    Теоретически , неоптимизированная версия этого цикла:

    будет медленнее, чем неоптимизированная версия того же цикла с var :

    потому что для каждой итерации цикла создается отдельная i переменная let , тогда как только i с var .

    На практике , здесь, в 2020 году, V8 достаточно интроспекции цикла, чтобы знать, когда он может оптимизировать эту разницу. (Даже до этого шансы на то, что ваш цикл выполнял достаточно работы, что дополнительные let накладные расходы все равно были смыты. Но теперь вам даже не нужно об этом беспокоиться.)

    подробности

    Важное различие между циклом var и let в for том, что i для каждой итерации создается разное ; он решает классическую проблему «замыкания в цикле»:

    Создание новой EnvironmentRecord для каждого тела цикла ( ссылка на спецификацию ) — это работа, и работа требует времени, поэтому в теории let версия медленнее, чем var версия.

    Но разница имеет значение только в том случае, если вы создаете функцию (замыкание) в цикле, который использует i , как я делал в приведенном выше примере с фрагментом кода. В противном случае, различие не может быть соблюдено и может быть оптимизировано.

    Здесь, в 2020 году, похоже, что V8 (и SpiderMonkey в Firefox) проводит достаточный самоанализ, что не приводит к снижению производительности в цикле, который не использует let семантику переменных для каждой итерации. Смотрите этот тест jsPerf .

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

    Проблема с глобальной переменной в том, что она, ну, в общем, глобальная; любой код в любом месте может получить к нему доступ. Поэтому, если вы объявляете переменную, var которую вы никогда не намереваетесь изменить (и никогда не будете изменять в своем коде), движок не сможет предположить, что она никогда не изменится в результате загрузки кода позже или подобного.

    С const , хотя вы явно сообщающие , что значение не может change¹. Таким образом, он может выполнять любую оптимизацию по своему усмотрению, включая выдачу литерала вместо ссылки на переменную на код, использующий его, зная, что значения нельзя изменить.

    ¹ Помните, что для объектов значение является ссылкой на объект, а не на сам объект. Таким образом const o = <> , вы можете изменить состояние объекта ( o.answer = 42 ), но не можете o указать новый объект (поскольку для этого потребуется изменить ссылку на объект, которая в нем содержится).

    При использовании let или const в других var подобных ситуациях они вряд ли будут иметь разную производительность. Эта функция должна иметь одинаковую производительность при использовании var или let , например:

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

    5 плюса

    456 Репутация автора

    Ответ Ти Джей Краудера такой превосходный.

    Вот дополнение: «Когда я получу максимальную отдачу от редактирования существующих объявлений var в const?»

    Я обнаружил, что наибольшее повышение производительности было связано с «экспортируемыми» функциями.

    Поэтому, если файлы A, B, R и Z вызывают функцию «утилиты» в файле U, которая обычно используется в вашем приложении, переключение этой функции утилиты на «const» и указание ссылки на родительский файл на const некоторые улучшения производительности. Мне показалось, что это не измеримо быстрее, но общее потребление памяти было уменьшено примерно на 1-3% для моего чрезвычайно монолитного приложения Frankenstein-ed. Что, если вы тратите мешки с наличными в облаке или на своем сервере с открытым исходным кодом, может быть хорошей причиной потратить 30 минут, чтобы прочесать и обновить некоторые из этих объявлений var для const.

    Я понимаю, что если вы прочитаете, как const, var и let работают под покровом, вы, вероятно, уже заключили вышеизложенное . но на тот случай, если вы «оглянулись» на это: D.

    Исходя из того, что я помню при тестировании на узле v8.12.0, когда я делал обновление, мое приложение перешло из режима ожидания в

    6 плюса

    81 Репутация автора

    «ДАВАЙТЕ» ЛУЧШЕ В ДЕКЛАРАЦИЯХ ПЕТЛИ

    С помощью простого теста (5 раз) в навигаторе вот так:

    Среднее время выполнения составляет более 2,5 мс

    Среднее время выполнения составляет более 1,5 мс

    Я обнаружил, что время цикла с let лучше.

    Автор: Amn Размещён: 17.01.2020 11:39

    плюса

    6 Репутация автора


    Ответ TJ Crowder очень хорош, но:

    1. ‘let’ сделан, чтобы сделать код более читабельным, а не более мощным
    2. по теории пусть будет медленнее чем вар
    3. на практике компилятор не может полностью решить (статический анализ) незавершенную программу, поэтому когда-нибудь пропустит оптимизацию
    4. в любом случае использование ‘let’ потребует больше процессора для самоанализа, стенд должен быть запущен, когда google v8 начнет анализировать
    5. если интроспекция не удалась, «let» будет сильно давить на сборщик мусора V8, для освобождения / повторного использования потребуется больше итераций. это также будет потреблять больше оперативной памяти. скамейка должна учитывать эти моменты
    6. Google Closure превратит впустую в .

    Влияние разрыва в производительности между var и let можно увидеть в реальной полной программе, а не в одном базовом цикле.

    В любом случае, использование let там, где вам не нужно, делает ваш код менее читабельным.

    Всплывают ли переменные, объявленные с помощью let и const в ES6?

    Проверяя новшества ES6, я обратил внимание, что переменные объявленные с var всплывают как и ожидалось.

    . в то время как, переменные объявленные с помощью let или const похоже имеют с этим какие-то проблемы:

    Означает ли это, что переменные объявленные с помощью let или const не всплывают? Что происходит здесь на самом деле? Есть ли разница между let и const в этом случае?

    1 ответ 1

    tl; dr; цитата из секции 13.3.1 Let and Const Declarations

    The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.

    Переменные создаются когда инстанциируется содержащий их Lexical Environment, но остаются недоступными никоим образом до вычисления их LexicalBinding.

    Так что, ответ на твой вопрос: да, let и const всплывают, но ты не можешь получить доступ к ним, до выполнения фактического определения в run-time.

    Как сказано выше, эти переменные не могут быть доступны, до их объявления. Однако, все немного сложнее.

    Означает ли это, что переменные объявленные с помощью let или const не всплывают? Что происходит здесь на самом деле?

    В JavaScript все определения ( var , let , const , function , function* , class ) всплывают. Это значит, что если имя определено в скопе, в этом скопе идентификатор всегда будет указывать на конкретную переменную:

    Это верно и для функционального, и для блочного скопов 1 .

    Различие между определениями var / function / function* и let / const / class в их инициализации.
    Первые инициализируются значением undefined или функцией (генератором) прямо когда создается связывание в начале скопа. Однако, лексически объявленные переменные остаются неинициализированными. Это значит, что при попытке доступа к ним будет брошено исключение ReferenceError . Инициализируются они. только в момент выполнения выражений let / const / class , все перед этим (выше) называется временная мертвая зона (temporal dead zone).

    Обратите внимание, что выражение let y; инициализирует переменную значением undefined , аналогично выражению let y = undefined; .

    Временная мертвая зона, это не синтаксическое место, а, скорее, время между созданием переменной (скопа) и инициализацией. Так, не будет ошибкой обращение к переменной в коде выше определения, пока этот код не будет выполнен (например тело функции или просто недостижимый код), но будет выкинуто исключение пи попытке доступа к переменной до ее инициализации, даже если код доступа расположен ниже определения (например, в всплывшем определении функции, которая была вызвана слишком рано).

    Есть ли разница между let и const в этом случае?

    Нет, они работают абсолютно одинаково, если рассматривать со стороны всплытия. Единственное отличие их в том, что const анты должны и могут быть присвоены только в части инициализатора определения ( const one = 1; , вариант const one; с последующим присвоением значения one = 2 недопустим).

    1: естественно, определение var работает только на уровне функции

    Топ-пост этого месяца:  Рекомендации к рекламным кампаниям в Яндекс.Директ

    Ответы на 12 распространенных вопросов о JavaScript

    JavaScript это фантастический гибкий инструмент веб-дизайна. Но чем больше инструмент, тем больше предстоит о нем узнать.

    Вот 12 вопросов (и ответов) о JavaScript, которые, бывает, ставят в тупик даже опытных разработчиков. Некоторые из этих вопросов часто встречаются на собеседованиях.

    1. Что такое прототипное наследование и насколько оно полезно?

    В JavaScript почти все является объектом. У каждого объекта есть прототип, от которого он наследует значения и поведение. Если объект не содержит запрашиваемое свойство, JS будет искать это свойство в прототипе вместо самого объекта. Он будет подниматься по цепочке прототипов пока не найдет совпадение или вернет ошибку.

    Это полезно при создании объектов, разделяющих одинаковые значения и операции. Нахождение их в прототипе позволяет иметь только один их вариант, что делает память проекта эффективной.

    Прототипы могут быть добавлены к объектам при их создании с помощью Object.create() или после – с помощью Object.setPrototypeOf() . В ES2015 есть ключевое слово «class», которое, при использовании с «extends», будет использовать это значение как прототип.

    2. Как можно использовать JavaScript для улучшения доступности в Интернете?

    Для современных инструментов веб-доступности характерна способность управляться с JavaScript и динамическим контентом. JavaScript может помочь этим технологиям если будет использоваться в качестве улучшения, а не для непосредственной работы.

    Удобный способ помочь пользователям с полезным управлением фокусом. Например, в календаре должна быть возможность перемещения по датам с помощью клавиш-стрелок, а клавиши «вверх/вниз» должны пролистывать целую неделю за одно нажатие. Это только один случай прослушивания событий клавиатуры в то время когда фокус находится внутри этого компонента.

    Важные изменения данных в результате JavaScript, например, форма обратной связи, также должны быть объявлены для чтения с экрана. Часто это достигается путем маркировки контейнера в качестве live region.

    3. Что такое «пузырение» событий и в чем его отличие от захвата событий?

    Как захват событий (event capturing) так и пузырение (bubbling) являются процессами под названием «распространение событий» (‘event propagation’), в которых браузеры реагируют на события, происходящие на странице. Более старые браузеры поддерживали только какой-нибудь один из этих методов, но современные поддерживают оба.

    Первая фаза – фаза захвата – наступает сразу после того, как событие произошло. Она начинается на самом верхнем уровне (в зависимости от события это или «документ», или «окно»). Оттуда она переходит по и всему, что в нем есть, пока не достигнет элемента, в котором произошло событие.

    Вторая фаза – фаза пузырения – происходит позже. Она повторяет процесс, но в обратном порядке, начиная с элемента, где событие было вызвано, и «пузырится» до самого верхнего элемента . При добавлении «прослушивателей» событий (event listeners), это поведение по умолчанию.

    4. Как делегирование событий улучшает код на сайтах с большим количеством интерактивных элементов?

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

    Делегирование событий это техника, использующая пузырение событий в качестве своего преимущества. Добавляя прослушиватель к родительскому элементу, разработчики предупреждаются о событиях, касающихся любого из его дочерних элементов.

    Внутри обратного вызова события исходной целью этого события всегда будет «цель», которая может быть использована для принятия решения о том, что делать дальше. Например, атрибут данных может содержать идентификатор для ссылки на свойство объекта.

    5. Что такое замыкания и как они могут помочь в организации кода?

    Функции в JavaScript используют то что называется «лексической средой», имея в виду, что она имеет доступ к переменным, определенным снаружи, в отличие от определенных внутри, которые доступны только изнутри.

    Вызывая outer() мы покажем «I love Web Designer!», но если ссылки «shout» или «х» идут наружу от outer() , оба они останутся неопределенными. А замыкание это комбинация функции с ее лексической средой. В данном случае замыканием является функция «outer».

    Замыкания полезны при создании множественных компонентов, так как что-либо, объявленное внутри одного из них, не повлияет на другие. Они могут использоваться для создания частных функций и переменных – в этом проявляется сходство с другими объектно-ориентированными языками вроде Python. В шаблоне модуля замыкания широко используются для обеспечения структурированных способов взаимодействия модулей.

    6. Что означает ‘use strict’ вверху блока кода?

    ES5 представил возможный вариант JavaScript под названием «строгий режим» (‘strict mode’). В строгом режиме особенности более ранних версий будут вызывать ошибки, а не приводить к незапланированному поведению.

    В этом примере мы обращаемся к несуществующей переменной. Вне строгого режима это добавило бы myVar в глобальную область видимости, что, если мы не будем осторожны, может полностью переписать определенный ранее в этом скрипте функционал. В строгом режиме это выдаст ошибку и предотвратит любые разрушения. Модули ES2015 по умолчанию находятся в строгом режиме, но в замыканиях, созданных с помощью функций, ‘use strict’ можно применить как для целого файла, так и на уровне функции.

    7. Что в JavaScript означает термин «hoisting»?

    JavaScript уникален тем что не нуждается в компиляции перед распространением. Браузер скомпилирует скрипты как только их найдет и сделает заметки о любых функциях и переменных, которые объявлены внутри них.

    Затем браузер делает повторную передачу кода на исполнение, уже зная, где применить эти функции и переменные. Когда блок исполнен, объявления его функций и переменных поднимаются («hoist») вверх блока.

    В этом примере мы можем использовать функцию ‘welcome’, так как она поднята вверх скрипта.

    8. В чем разница между стрелочной и обычной функциями?

    ES2015 принес много изменений, и одно из них – стрелочные функции для осуществления быстрого воздействия.

    Ключевая разница, помимо краткости в написании, заключается в том что стрелочные функции не создают собственное значение для ‘this’. Вместо этого они используют значения закрывающего блока. В вышеуказанном примере раз в секунду будут выдаваться 1 2, 3 и т. д. С обычной функцией this.x было бы неопределенным и записало бы NaN. Телу стрелочной функции присваивается возвращенное из нее значение. Это делает их полезными для промисов, через которые передаются значения. Обычные, регулярные функции должны явно возвращать значение или то, что оно не определено.

    9. Где стоит использовать ключевые слова ‘let’ и ‘const’ вместо ‘var’?

    Еще одно важное изменение, пришедшее с ES2015, это представление ‘let’ и ‘const’ в качестве альтернативных способов определения переменных. Переменные, определяемые таким образом, ограничены блоком, в котором они определены. Это обеспечивает большую уверенность в том что значения, созданные внутри разных блоков, не будут пересекаться снаружи.

    Если значение переменной не будет меняться, используйте ‘const’ вместо ‘let’. При попытке переопределить константу будут выдаваться ошибки. Объекты и переменные массива могут меняться внутренне, но не заменяются полностью.

    Как ‘let’, так и ‘const’ не «поднимаются» («hoisting»), подобно ‘var’, поэтому на них нельзя ссылаться прежде чем они будут инициализированы. Между стартом блока и инициализацией находится так называемая «временная мертвая зона», которая часто может служить источником путаницы.

    10. Что такое функциональное программирование и чем оно отличается?

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

    Традиционно проекты JavaScript строятся с объектно-ориентированной структурой. Информация о текущем состоянии программы хранится в объектах, которые обновляются при изменении страницы.

    Функциональное программирование несет другой способ мышления. Хотя такие языки, как F#, уже используют его некоторое время, ES2015 привнес в JavaScript важные методы, открывающие его для Интернета.

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

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

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

    11. Как JS может быть использован для улучшения производительности сайта?

    В то время, когда большая часть поиска в интернете происходит с телефонов или планшетов, производительность имеет решающее значение. Не у всех есть последние модели устройств, и каждая задержка и заминка могут стоить вам пользователя. К счастью, есть много способов использования JavaScript для недопущения таких ситуаций.

    Пассивное состояние

    Неравномерная прокрутка – явный признак того, что что-то происходит. В некоторых случаях браузер вынужден ждать, потому что к странице обращаются прослушиватели. Такие события как ‘wheel’ или ‘touchmove’, могут отменить прокрутку. Поэтому странице, прежде чем начнется предусмотренное по умолчанию поведение прокрутки, приходится ждать завершения события. Это может привести к отрывистой и нестабильной прокрутке, что повлечет за собой негативный пользовательский опыт.

    Чтобы этого избежать, передавайте объект в качестве третьего параметра при добавлении прослушивателя события. Если объект помечен как пассивный, браузер приходит к заключению, что на прокрутку это не повлияет, поэтому она может начаться немедленно.

    Этот третий параметр заменяет опцию ‘useCapture’ в старых браузерах, поэтому важно использовать обнаружение функции при использовании этого типа прослушивателя. Для намеренного отключения прокрутки в большинстве браузеров применимо ‘touch-action: none’ в CSS.

    Throttling событий

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

    Debouncing – это метод, который регулирует частоту обратных вызовов к одному из таких событий. Реализация функции debounce и то, как часто функция будет вызываться, будет меняться в зависимости от проекта, но, например, сокращение событий до пяти раз в секунду приведет к видимому мгновенному улучшению на странице.

    Фокус на окно просмотра

    Отслеживание, когда элемент входит в зону видимости на странице, является распространенным использованием события прокрутки. Даже с debouncing вызов getBoundingClientRect() требует от браузера провести повторный анализ макета целой страницы. Есть новый API браузера, под названием IntersectionObserver , который отчитывается о видимости наблюдаемых элементов путем вызова функции при их входе или выходе из окна просмотра. Для сайтов с бесконечной прокруткой это может использоваться в качестве флага для удаления или возвращения предыдущих просмотров.

    IntersectionObserver доступен во всех последних версиях браузеров кроме Safari. Стоит попробовать использовать этот API, а затем вернуться к более старым методам, и вы сразу почувствуете разницу.

    Разделяйте работу, требующую много ресурсов

    Работая с большими наборами данных или обрабатывая большие файлы, такие как изображения, JavaScript может быстро заблокировать окно браузера. Вся работа производится в одном потоке, так что если этот поток занят, интерфейс не может обновляться.

    Если вы знаете, что запуск процесса займет много времени, хорошей идеей будет поместить его в web worker. Это скрипты которые запускаются в отдельном потоке, что позволяет интерфейсу пользователя работать более гладко. Скрипты могут говорить друг с другом с помощью специального метода сообщений. У web worker нет доступа к DOM и некоторым свойствам оконного объекта, так что эти сообщения могут использоваться для передачи необходимой информации.

    12. Как я могу защитить свой JavaScript-код в будущем?

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

    Тем не менее запускаемость блока кода еще не означает, что у него есть будущее. Будет ли ваш код иметь смысл через несколько лет?

    Избегайте спагетти-кода

    При изначальном создании проекта мысль о том чтобы писать все вместе может быть заманчивой. Хотя это вносит ясность в отношении того, что делает каждый блок кода, это также означает, что поведение кода в целом также сцеплено. Если другая область проекта нуждается в этом функционале, он будет или скопирован или переписан. Если обнаружатся ошибки или будет добавлена новая функция, все версии потребуют индивидуального обновления, а это может занять много времени.

    Если код модульный, функционал может подключаться там, где он нужен. Все изменения становятся доступными сразу после написания. Такие техники как шаблон модуля могут быть реализованы без влияния на остальной проект, что облегчает их внедрение.

    Будьте независимы от фреймворков

    Многие современные фреймворки, такие как React или Polymer, побуждают разработчиков поддерживать модульность путем создания компонентов. Каждый из них имеет свой способ коммуникации с другими частями проекта.

    Что случится, когда появится новый, лучший фреймворк? Переключение (или даже обновление) может быть трудоемким заданием. Изыскание новых путей, позволяющих этим старым компонентам работать вместе, также может съесть много времени.

    Поэтому для достижения результата старайтесь по возможности использовать собственные особенности и функции JavaScript. Таким образом при смене фреймворков эти точки трения будут минимизированы. Например, используйте объекты для управления манипуляциями с данными прежде чем передавать их компоненту.

    Также помогает написание кода на универсальном JavaScript. При условии отказа (где это возможно) от использования API на основе браузеров, код может быть повторно использован как в браузере, так и на сервере в Node.

    Делайте уборку

    После написания модулей поддерживайте их в чистоте. Тот, кто будет их читать, должен понимать их функционал для ускорения исправления ошибок.

    Мощным инструментом для обеспечения будущего вашего кода является самодокументированный код. Использование описательных имен для переменных и итерациях может облегчить чтение кода (по сравнению с именами типа «і»).

    Но еще важнее быть последовательным. Придерживайтесь унифицированного стиля, это сделает код более читабельным. Используйте руководство по стилю чтобы определить как должен выглядеть код и используйте инструменты вроде ESLint.

    Работайте с масштабом

    Требование к читабельности распространяется и на на структуру проекта. Без этого все может очень быстро обратиться в хаос.

    Сначала нахождение файлов в одном каталоге все упрощает. Когда скрипты импортируют модули, нет путаницы в том, где они расположены.

    По мере развития проектов большие собрания файлов могут потеряться в общей массе. Сохраняйте структуру в хорошо масштабируемом виде, например, сохраняя все модули, которые имеют дело с пользователями, в «пользовательском» каталоге.

    Какая структура лучше, зависит от конкретного проекта.

    Заботьтесь доступности для тестирования

    Фреймворки вроде React побуждают к использованию маленьких компонентов, которые можно использовать повторно. Даже с масштабируемой структурой проекта может быть сложно убедиться, что все они по-прежнему работают правильно. Благодаря написанию тестов проекты могут быть развернуты с уверенностью.


    Unit-тесты будут работать на уровне модулей. Такие инструменты как Mocha и Jest позволяют разработчикам определять ожидаемый вывод для данного ввода. Периодический запуск этих тестов поможет убедиться в отсутствии побочных эффектов.

    При написании модулей следует предусмотреть возможность их отдельного тестирования. Это означает наличие как можно меньшего количества зависимостей и отсутствие расчета на глобальное состояние.

    Этим проверка проектов не ограничивается. Есть еще интегральное и функциональное тестирование. Для длительной будущей работоспособности кода он должен как можно больше покрываться тестами.

    Язык будущего

    Но наилучший способ обеспечить будущность своего кода – писать его в синтаксисе будущего. Это может звучать как шаг в неизвестность, но есть инструменты, максимально облегчающие этот процесс.

    Babel это транспилер, то есть инструмент, который конвертирует одну форму JavaScript в другую. Он используется для перевода современного кода в форматы, которые могут понимать старые браузеры и окружения.

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

    Топ-пост этого месяца:  Переадресация на сайте WordPress

    Со временем проекты смогут вообще пропускать шаг транспиляции. Но на данный момент код должен поддерживаться в состоянии, обеспечивающем его использование в будущем.

    ***
    Подписывайтесь на наш канал в Telegram!

    Различия в синтаксисе между движками выражений JavaScript и Legacy ExtendScript

    На этой странице

    Обращайтесь к этому документу, чтобы узнать, как улучшить выражения для движка выражений JavaScript, или при исправлении ошибок, которые возникают, когда выражения, написанные для предыдущих выпусков After Effects, не удается оценить в движке выражений JavaScript.

    Язык выражений в After Effects основан на JavaScript, который представляет собой реализацию ECMAScript. Движок выражений JavaScript в After Effects 16.0 основан на ECMAScript 2020. Движок выражений Legacy ExtendScript основан на ECMAScript 3 (1999). (Adobe ExtendScript — это также язык, который используется для создания сценариев в After Effects и других приложениях Adobe.)

    Вы можете следовать приведенным ниже примерам, а также рекомендациям по созданию выражений, которые работают в обоих движках выражений JavaScript и Legacy ExtendScript.

    Основные различия между движками выражений JavaScript и Legacy ExtendScript:

    Современный синтаксис JavaScript: улучшения, внесенные в язык выражений

    В выражениях можно использовать синтаксис JavaScript из ECMAScript 2020

    С момента выхода ECMAScript 3 в язык JavaScript было внесено много дополнений. Появились новые, более компактные и удобочитаемые методы для использования со строками, массивами и объектами. Также появились новые способы объявления переменных и функций, а также параметров по умолчанию, операторов spread и многого другого. Этот документ не охватывает такие изменения, так как это общие изменения языка JavaScript. Ресурсы для изучения многих синтаксических дополнений можно найти по следующим ссылкам:

    Дополнительные рекомендуемые, углубленные ресурсы для изучения JavaScript:

    Выражение .значение больше не требуется при ссылке на другие свойства из исходного текста

    Для ссылки на другое значение свойства из свойства исходного текста, движок Legacy ExtendScript требует добавить выражение .значение в конце данного свойства. По умолчанию движок выражений JavaScript показывает значение свойства, если только не был явно использован еще один атрибут, такой как .propertyIndex или .name .

    Заморозка значений свойств с помощью posterizeTime(0)

    В After Effects 16.0 выражение posterizeTime(0) замораживает значение свойства в композиции в момент времени 0. Это относится к обоим движкам выражений JavaScript и Legacy ExtendScript.

    Этот подход не является обратно совместимым и может привести к неожиданным результатам в версиях After Effects до 16.0.

    Несовместимый устаревший синтаксис

    Почти весь синтаксис выражений для движка выражений Legacy ExtendScript совместим с движком выражений JavaScript. Однако есть устаревший синтаксис, который несовместим с движком выражений JavaScript. Иногда это вызвано изменениями синтаксиса в современном варианте JavaScript. В других случаях устаревший синтаксис был удален. Ниже приведены примеры нерабочего и рабочего синтаксисов.

    Большую часть этих различий в синтаксисе можно исправить, создавая сценарии приложений, которые переписывают выражения.

    Отличается синтаксис if. else

    В общем случае рекомендуется всегда писать операторы if. else с разрывами строк и скобками в соответствии с рекомендациями MDN. Движок Legacy ExtendScript был терпим к свободному синтаксису в операторах if. else , однако движок JavaScript требует строгого соблюдения синтаксиса. При использовании движка JavaScript выражения if. else с неверным синтаксисом не обрабатываются.

    Не допускается завершать условный оператор без оператора else.

    Если выражение завершается оператором if без оператора else , движок JavaScript не обрабатывает такое выражение, выдавая сообщение об ошибке «В выражении используется неопределенное значение (возможно, оно является подписью массива вне диапазона)». Движок Legacy ExtendScript вычисляет следующее выражение равным 100, если параметр time больше 1 секунды. В противном случае оно вычисляется равным 50:

    Для движка JavaScript необходимо явно указать, является ли часть else условного оператора последним оператором в данном выражении:

    Это выражение правильно обрабатывается и движком JavaScript, и движком Legacy ExtendScript.

    if и else не могут находиться в одной строке без скобок

    Оператор if. else в одной строке без скобок вычисляется движком Legacy ExtendScript, но движок JavaScript выдает сообщение об ошибке, такое как «Ошибка синтаксиса: неожиданный токен else» или «В выражении используется неопределенное значение (возможно, оно является подписью массива вне диапазона)». Сообщение об ошибке зависит контекста и типа свойства.

    Движок Legacy ExtendScript вычисляет следующее выражение равным 100, если параметр time больше 1 секунды. В противном случае оно вычисляется равным 50:

    В операторах if. else необходимо использовать разрывы строк и скобки, чтобы они обрабатывались движком JavaScript. Для простых случаев вместо этого можно использовать трехместный оператор. С движком JavaScript можно использовать любой вариант следующего синтаксиса:

    Все указанные выше решения правильно обрабатывается и движком JavaScript, и движком Legacy ExtendScript.

    Выражения не могут заканчиваться объявлением функции

    Если выражение заканчивается объявлением функции, движок JavaScript не вычисляет такое выражение, а выдает сообщение об ошибке «Вместо объекта типа «Число», «Массив» или «Свойство» обнаружен объект другого типа». В случае движка JavaScript последний вычисляемый элемент должен возвращать значение, а не объявлять его.

    Следующий пример работает для движка Legacy, но не для движка JavaScript:

    Если в последней строке вызывается функция (вместо объявления), такое выражение правильно обрабатывается обоими движками:

    Сокращенный синтаксис this() не допускается, вместо него используйте thisLayer()

    В движке Legacy ExtendScript было разрешено использовать this в качестве сокращения thisLayer. В движке JavaScript форма this ссылается на глобальный объект и вместо нее необходимо использовать thisLayer . Использование this в движке JavaScript обычно приводит к сообщению об ошибке « это не функция ».

    В следующем примере для движка Legacy ExtendScript формат this используется для создания сокращенной ссылки на свойство «Положение текстового слоя» из свойства «Исходный текст»:

    В движке JavaScript форму this необходимо заменить на thisLayer:

    Использование thisLayer совместимо с обоими движками выражений.

    Свойству исходного текста для доступа к символам из индекса-массива требуется выражение .значение

    В случае движка выражений Legacy ExtendScript для доступа к символам текстового свойства можно использовать скобки, как для массива:

    В случае движка JavaScript для доступа к символам необходимо добавить выражение .значение :

    Этот синтаксис совместим с обоими движками.

    Свойства и методы Snake case не допускаются

    Устаревшие свойства и методы Snake Case (запись с подчеркиванием вместо camelCase) не поддерживаются механизмом JavaScript. Вместо них следует использовать версии camelCase поскольку они совместимы с обоими движками. Ниже приведен список устаревших выражений Snake Case и соответствующие им выражения camelCase.

    Использование eval() с выражениями в двоичной кодировке (.jsxbin)

    Выражения, закодированные в двоичном формате ExtendScript (сохраненные как двоичный файл .jsxbin из ExtendScript ToolKit CC), не поддерживаются движком JavaScript.

    Чтобы запутать выражение, используйте движок Legacy ExtendScript или другой метод запутывания, совместимый с ECMAScript 2020. Некоторые методы запутывания могут не поддерживаться обоими движками выражений.

    Ограниченная поддержка объекта $. (доллар)

    Для объекта $. (доллар) методы и свойства характерны для ExtendScript и в основном не поддерживаются движком JavaScript. В этой таблице перечислены неподдерживаемые и поддерживаемые виды использования объекта $. (доллар):

    Свойства Snake Case Свойства camelCase Методы Snake Case Методы camelCase

    $.engineName (не поддерживается движком Legacy ExtendScript)

    Не поддерживаются выражения . reflect.properties, . reflect.methods и toSource()

    Выражения reflect.properties и reflect.methods не поддерживаются движком JavaScript. Эти методы характерны для ExtendScript и у них нет прямого эквивалента в JavaScript.

    Метод toSource() в JavaScript устарел и не является частью какого-либо стандарта.

    Чтобы просмотреть список доступных свойств и методов для любого заданного свойства After Effects, аналогичного тому, которое было предоставлено вышеупомянутыми методами, используйте следующее выражение для свойства «Исходный текст» и свяжите его с нужным свойством, например, используя инструмент «Лассо» вместо thisProperty в строке 1:

    Приведенное выше выражение не совместимо с движком Legacy ExtendScript. В нем используются синтаксис и методы, недоступные в ECMAScript 3.

    Требования к синтаксису для библиотек выражений .jsx и метода eval() с движком JavaScript

    Когда выражения используются внутри библиотеки выражений .jsx или выражение вызывается внутри метода eval() , необходимо изменить определенный синтаксис:

    Явный префикс thisLayer. или thisProperty. должен быть добавлен к любому собственному методу или атрибуту, который явно не вызывается для слоя или свойства. Такой префикс сообщает движку JavaScript, для какого объекта вызывается метод или атрибут.

    Математические операции со значениями массива, такие как Position, необходимо вычислять, используя векторные математические функции или циклические функции, чтобы действовать на каждый элемент массива. Перегруженные математические операторы, такие как position + [100,100], не будут обрабатываться.

    При использовании движка JavaScript выражения предварительно обрабатываются перед вычислением, чтобы сделать некоторые выражения с синтаксисом для Legacy ExtendScript читаемыми новым движком. Однако такие задачи предварительной обработки не выполняются при вычислении выражений из библиотеки функций выражений .jsx или вызове выражений внутри метода eval() . Указанные выше изменения синтаксиса в таких случаях необходимо вносить вручную. Все эти изменения синтаксиса обратно совместимы с устаревшим движком ExtendScript, поэтому выражение .jsx записанное так, чтобы работать с движком JavaScript, также будет работать с движком Legacy ExtendScript.

    Совет по производительности: из-за отсутствия предварительной обработки в случае вызова сложных выражений из библиотеки .jsx с таким синтаксисом и движком JavaScript возможно повышение производительности по сравнению с вызовом такого же выражения непосредственно в свойстве.

    Собственные методы с явным префиксом и атрибуты с thisLayer. или thisProperty.

    В таблице ниже перечислены методы и атрибуты, для которых требуется префикс. Например, атрибут time необходимо записать в форме thisLayer.time , тогда как метод wiggle() — в форме thisProperty.wiggle() .

    Эти префиксы требуются, только если атрибут или метод не вызываются явно в другом слое или свойстве. Например, при вызове thisComp.layer(1).hasParent , добавляется thisLayer. не требуется, так как .hasParent уже явно вызывается в layer(1) .

    Не поддерживается $. Поддерживаемые объекты $.
    Методы, требующие thisLayer. Атрибуты, требующие thisLayer. Методы, требующие thisProperty. Атрибуты, требующие thisProperty.
    comp()
    footage()
    posterizeTime()
    add()
    sub()
    mul()
    div()
    clamp()
    length()
    dot()
    normalize()
    cross()
    lookAt()
    timeToFrames()
    framesToTime()
    timeToTimecode()
    timeToFeetAndFrames()
    timeToNTSCTimecode()
    timeToCurrentFormat()
    seedRandom()
    random()
    gaussRandom()
    noise()
    degreesToRadians()
    radiansToDegrees()
    linear()
    ease()
    easeIn()
    easeOut()
    rgbToHsl()
    hslToRgb()
    hexToRgb()
    mask()
    sourceRectAtTime()
    sourceTime()
    sampleImage()
    toComp()
    fromComp()
    toWorld()
    fromWorld()
    toCompVec()
    fromCompVec()
    toWorldVec()
    fromWorldVec()
    fromCompToSurface()
    time
    source
    thisProject
    colorDepth
    transform
    anchorPoint
    position
    scale
    rotation
    opacity
    orientation
    rotationX
    rotationY
    rotationZ
    lightTransmission
    castsShadows
    acceptsShadows
    acceptsLights
    ambient
    diffuse
    specular
    specularIntensity
    shininess
    specularShininess
    metal
    audioLevels
    timeRemap
    marker
    name
    width
    height
    index
    parent
    hasParent
    inPoint
    outPoint
    startTime
    hasVideo
    hasAudio
    active
    enabled
    audioActive
    cameraOption
    pointOfInterest
    zoom
    depthOfField
    focusDistance
    aperature
    blurLevel
    irisShape
    irisRotation
    irisRoundness
    irisAspectRatio
    irisDiffractionFringe
    highlightGain
    highlightThreshold
    highlightSaturation
    lightOption
    intensity
    color
    coneAngle
    coneFeather
    shadowDarkness
    shadowDiffusion
    valueAtTime()
    velocityAtTime()
    speedAtTime()
    wiggle()
    temporalWiggle()
    smooth()
    loopIn()
    loopOut()
    loopInDuration()
    loopOutDuration()
    key()
    nearestKey()
    propertyGroup()
    points()
    inTangents()
    outTangents()
    isClosed()
    pointsOnPath()
    tangentOnPath()
    normalOnPath()
    createPath()
    velocity
    speed
    numKeys
    propertyIndex

    Замена математических операторов векторными математическими функциями

    Оба движка JavaScript и LegacyExtendScript разрешают перегрузку математических операторов для массивов при использовании такого синтаксиса, как position + [100,100] , однако это не работает для выражений из библиотеки функций выражений .jsx или внутри метода eval() .

    Чтобы применить математические функции к свойствам массива, таким как Position, Scale и т. д., для сложения, вычитания, умножения и деления следует использовать эквиваленты векторных математических функций. Векторные математические функции также будут работать для обычных чисел, поэтому функция, которая может быть вызвана для свойств данных любого типа, должна использовать векторные математические функции.

    Префикс thisLayer. необходимо использовать с векторными математическими функциями.

    • Сложение: thisLayer.add(vec1, vec2)
    • Вычитание: thisLayer.sub(vec1, vec2)
    • Умножение: thisLayer.mul(vec, amount)
    • Деление: thisLayer.div(vec, amount)

    Ниже приведены примеры выражений с использованием стандартных математических функций и обновленных векторных математических функций. В векторных математических выражениях также используется соответствующий префикс thisLayer . или thisProperty. , когда необходимо.

    Чтобы найти разницу между wiggle() и значением свойства Position:

    Для интерполяции между двумя значениями, подобно linear() , но с расширенным диапазоном за пределами заданного минимума и максимума:

    Циклический ввод и вывод свойства Position:

    JS — Let вместо var?

    Привет, друзья.
    Начал активно изучать JS, и наткнулся на статью, где писалось о том, что нужно использовать не var, а let, причем прочитав документацию я понял, что let и нужно использовать, но вот боюсь весь код испортить. Т.е получается, что var не нужна, теперь везде нужно использовать let и раз на то пошло const?

    Заранее всем спасибо!

    • Вопрос задан более двух лет назад
    • 5500 просмотров

    Ну я надеюсь, вы в курсе, что в чистом виде его нельзя использовать, а только с транспайлером?
    Для let не работает область видимости внутри циклов в IE11 (можно словить неприятный баг), а в андроидах этот оператор вообще выдаст ошибку синтаксиса и все накроется. С const ситуация получше, андроиды не считают его ошибкой синтаксиса, но тоже далека от идеала.

    А вообше, да. Если вы прогоняете свой код через бабель, то смело используйте let вместо var. Привыкайте так сказать к светлому будущему.

    Конст в javascript? Когда его использовать и необходимо

    Недавно я встретил ключевое слово const в javascript. Из того, что я могу сказать, он используется для создания неизменяемых переменных, и я протестировал его, чтобы убедиться, что он не может быть переопределен (в node.js):

    Я понимаю, что он еще не стандартизирован во всех браузерах, но меня интересует только контекст node.js/v8, и я заметил, что некоторые разработчики/проекты, похоже, сильно отражают это, когда ключевое слово var может использоваться с тем же эффектом.

    Вопросы

    Когда целесообразно использовать const вместо var?

    Должен ли он использоваться каждый раз, когда объявляется переменная, которая не будет переназначена?

    Действительно ли имеет значение, если вместо const или наоборот? var?

    На ваши вопросы есть два аспекта: каковы технические аспекты использования const вместо var и каковы связанные с ним аспекты, связанные с человеком.

    Техническая разница значительна. В скомпилированных языках константа будет заменена во время компиляции, и ее использование позволит использовать другие оптимизации, такие как удаление мертвого кода, для дальнейшего повышения эффективности выполнения кода. Недавний (свободно используемый термин) JavaScript-движки фактически компилируют JS-код для повышения производительности, поэтому использование ключевого слова const сообщает им, что описанные выше оптимизации возможны и должны быть выполнены. Это приводит к повышению производительности.

    Аспект, связанный с человеком, касается семантики ключевого слова. Переменная — это структура данных, которая содержит информацию, которая, как ожидается, изменится. Константа — это структура данных, которая содержит информацию, которая никогда не изменится. Если есть место для ошибки, всегда следует использовать var . Однако не вся информация, которая никогда не изменяется в течение жизни программы, должна быть объявлена ​​с помощью const . Если в разных обстоятельствах информация должна измениться, используйте var , чтобы указать, что даже если фактическое изменение не отображается в вашем коде.

    Обновление 2020

    Этот ответ по-прежнему получает много внимания. Стоит отметить, что этот ответ был опубликован в начале 2014 года, и с тех пор многое изменилось. ecmascript-6 поддержка теперь является нормой. Все современные браузеры теперь поддерживают const , поэтому его использование довольно безопасно без проблем.

    Оригинальный ответ от 2014

    Несмотря на то, что довольно приличная поддержка браузера, я бы не стал использовать его сейчас. Из статья MDN в const :

    Текущая реализация const — это расширение, зависящее от Mozilla, и оно не является частью ECMAScript 5. Оно поддерживается в Firefox и Chrome (V8). Начиная с Safari 5.1.7 и Opera 12.00, если вы определяете переменную с константой в этих браузерах, вы можете изменить ее значение позже. Он не поддерживается в Internet Explorer 6-10, но включен в Internet Explorer 11. Ключевое слово const объявляет константу в области функций (например, переменные, объявленные с помощью var).

    const будет определяться ECMAScript 6, но с другой семантикой. Подобно переменным, объявленным с помощью оператора let, константы, объявленные с помощью константы, будут областями с блочной областью.

    Если вы используете const , вам придется добавить обходной путь для поддержки немного более старых браузеров.

    Добавить комментарий