Что такое var в javascript
Чем различаются var, let и const в JavaScript
На практике разбираемся, чем отличаются var, let и const и когда их использовать.
Обычно для объявления переменных в JavaScript используется var, но иногда можно встретить const или let. Они выполняют одну и ту же функцию (объявляют о создании ячейки в памяти), но работают немного по-разному.
Важно! let и const являются частью ECMAScript 6, который поддерживается не всеми браузерами. Заранее ознакомьтесь с таблицей совместимости.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Области видимости var и let
Главное отличие var и let в том, как они работают с областями видимости. Переменная var, созданная вне функции, действует как глобальная переменная — она доступна из любой части скрипта.
Если же создать переменную с помощью var внутри функции, то она будет доступна только в этой функции (как локальная переменная):
Также можно создать переменные с одинаковым названием:
Это используется редко, потому что проще давать переменным уникальные имена, но сама возможность есть.
Что же касается let, то такие переменные доступны только внутри того блока <>, в котором они созданы:
Вот как отличается поведение счётчика цикла, если его создавать с помощью var и let:
var | let |
---|---|
for(var i = 0; i const создаются константы. Например, физические и математические величины. Попытка изменить значение константы приведёт к ошибке. Поэтому их стоит использовать для хранения тех данных, которые должны оставаться неизменными. Например, в них можно хранить объекты из DOM: Также стоит отметить, что неизменяемым сохраняется сам объект, а не его поля: Что же касается областей видимости, то const ведёт себя как let. ЗаключениеВ большинстве случаев достаточно использовать var, но иногда необходимо убедиться, что ваши данные в сохранности — их нельзя изменить извне или в принципе. В этих случаях let и const незаменимы. Если вы хотите научиться разрабатывать веб-приложения, используя все возможности этого языка, то обратите внимание на наш курс о разработке на JavaScript. Что такое var в javascriptОператор var объявляет переменную, инициализируя её, при необходимости. СинтаксисОписаниеПрисвоение значения необъявленной переменной подразумевает, что она будет создана как глобальная переменная (переменная становится свойством глобального объекта) после выполнения присваивания значения. Различия между объявленной и необъявленной переменными следующие: 1. Объявленные переменные ограничены контекстом выполнения, в котором они были объявлены. Необъявленные переменные всегда глобальны. 2. Объявленные переменные инициализируются до выполнения любого кода. Необъявленные переменные не существуют до тех пор, пока к ним не выполнено присваивание. 3. Объявленные переменные, независимо от контекста выполнения, являются ненастраиваемыми свойствами. Необъявленные переменные это настраиваемые свойства (т.е. их можно удалять). Из-за перечисленных различий, использование необъявленных переменных может привести к непредсказуемым последствиям. Рекомендовано всегда объявлять переменные, вне зависимости, находятся они внутри функции или в глобальном контексте. Присваивание значения необъявленной переменной в строгом режиме ECMAScript 5 возбуждает ошибку. Поднятие переменныхОбъявление переменных (как и любые другие объявления) обрабатываются до выполнения кода. Где бы не находилось объявление, это равнозначно тому, что переменную объявили в самом начале кода. Это значит, что переменная становится доступной до того, как она объявлена. Такое поведение называется «поднятием» (в некоторых источниках «всплытием»). Поэтому объявление переменных рекомендовано выносить в начало их области видимости (в начало глобального кода или в начало функции). Это даёт понять какие переменные принадлежат функции (т.е. являются локальными), а какие обрабатываются в цепи областей видимости (т.е. являются глобальными). Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию её значения. Значение присваивается при выполнении оператора присваивания: Когда использовать var, let и const в Javascript [перевод статьи Tyler’а McGinnis]Привет, Хабр! Представляю вашему вниманию перевод статьи «var vs let vs const in JavaScript» автора Tyler McGinnis. В этой статье вы узнаете 2 новых способа для создания переменных в Javascript (ES6), let и const. На протяжении этой статьи мы рассмотрим разницу между var, let и const, а также смежные темы такие как: “область видимости функции против блочной области видимости“, “поднятие” переменных и иммутабельность. Если вы предпочитаете видео, посмотрите это (оригинал на английском): ES2015 (или ES6) представил нам 2 новых способа для создания переменных, let и const. Но прежде чем мы углубимся в различия между var, let и const, имеются некоторые темы, которые вам следует узнать в первую очередь. Это объявление переменных и их инициализация, область видимости (особая область видимости функции) и “поднятие”. Объявление и инициализация переменныхОбъявление переменной вводит новый идентификатор. Выше мы создаем новый идентификатор который мы назвали “declaration”. В Javascript, при создании, переменные инициализируются со значением undefined. Это означает, что если мы попробуем вывести нашу переменную declaration, мы получим undefined. И так, мы вывели переменную declaration и мы получили undefined. По сравнению с объявлением переменной, инициализация переменной это когда вы в первый раз устанавливаете значение этой переменной. И так, здесь мы инициализировали переменную declaration записывая в неё строку. Это приводит нас к следующему понятию, область видимости. Область видимости
Это означает, что если вы создадите переменную при помощи var, областью видимости этой переменной будет функция в которой она была создана и будет доступна только внутри этой функции или любой другой вложенной функции. Выше мы попытались получить доступ к переменной снаружи функции, в которой она была объявлена. Так как областью видимости переменной date является функция getDate, она доступна только внутри этой функции или в любой другой функции вложенной в getDate(как показано ниже). Теперь давайте взглянем на более продвинутый пример. Скажем, у нас есть массив prices и нам требуется функция, которая принимает этот массив, а так же переменную discount, и возвращает нам новый массив цен со скидками. Конечная цель может выглядеть примерно так: И реализация может выглядеть примерно так: Выглядит достаточно просто, но какое это отношение имеет к области видимости блока? Взгляните на данный цикл for. Доступны ли переменные объявленные внутри него за его пределами? Оказывается доступны. Если JavaScript это единственный язык программирования который вы знаете, вы можете особо и не задумываться об этом. Однако, если вы пришли в JavaScript из другого языка программирования, в частности языка программирования, который блокирует область видимости, вы, вероятно, немного обеспокоены тем что здесь происходит. Оно не сломано, просто работает немного странно. На самом деле нет никаких причин иметь доступ к i, discountPrice и finalPrice за пределами цикла for. Это не приносит нам никакой пользы и может даже принести нам вред в некоторых ситуациях. Однако, так как переменные объявлены при помощи var, они входят в область видимости функции и вы можете получить к ним доступ. Теперь мы обсудили объявление и инициализацию переменных, а так же области видимости, ещё одна вещь с которой нам нужно разобраться, прежде чем мы погрузимся в разбор различий между let и const, это “поднятие”. “Поднятие”Помните, ранее было сказано “В Javascript, при создании, переменные инициализируются со значением undefined “. Оказывается это и означает “поднятие”. Интерпретатор JavaScript назначает объявленным переменным значение undefined во время фазы называемой “Создание”. Для более подробного изучения фазы Создания, “Поднятия” и областей видимости прочтите данную статью: “The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript”. Давайте взглянем на предыдущий пример и увидим как “поднятие” влияет на него. Обратите внимание, всем объявленным переменным было присвоено значение undefined. Вот почему если вы попытаетесь получить доступ к одной из них, до того как она на самом деле будет объявлена, вы просто получите undefined. Теперь вы знаете все что нужно о var, теперь давайте наконец-то поговорим о главной цели, из-за которой мы здесь: в чем разница между var, let и const? var, let или constДля начала, давайте сравним var и let. Ключевое отличие между var и let это то, что let помимо глобальной области видимости и области видимости функции позволяет определять переменные в области видимости блока. Это означает, что переменная созданная при помощи ключевого слова let доступна внутри “блока”, где она была создана, также и внутри вложенных блоков. Когда я сказал “блок”, я имел в виду что-либо окруженное фигурными скобками <>, например цикл for или оператор if. И так, давайте вернемся к нашей функции discountPrices в последний раз. Вспомните, что мы вправе вывести i, discountPrice, и finalPrice за пределами цикла for, так как они были объявлены при помощи var, а переменные объявленные при помощи ключевого слова var ограничены областью видимости функции. Но что же произойдет теперь, если мы изменим var на let и попробуем запустить наш код? Мы получили ReferenceError: i is not defined. Что говорит нам о том, что переменная, объявленная при помощи let, ограничена областью видимости блока, а не функции. Попытайтесь обратиться к i (или discountedPrice или finalPrice) за пределами “блока”, где они были объявлены, и это выдаст нам ошибку обращения, как мы только что увидели. Следующие различие связано с “поднятием”. Ранее мы сказали, что определение “поднятия” это: “Интерпретатор JavaScript назначает объявленным переменным значение undefined во время фазы называемой “Создание”». Мы так же увидели это в действии при помощи вызова переменной до её объявления (вы получили undefined). Я не могу вспомнить ни одного случая использования, когда вы на самом деле хотели бы получить доступ к переменной до её объявления. Кажется, что получить ReferenceError было бы лучше, чем получить undefined. По факту, это и есть то что делает let. Если вы попытаетесь доступ к переменной до её объявление при помощи let, вместо получения undefined (как это было при объявлении при помощи var), вы получите ReferenceError. let или constТеперь вы понимаете разницу между var и let, что же о const? Оказывается, const почти такая же как и let. Однако есть одно отличие: если вы однажды присвоили значение используя const, вы не сможете его изменить на другое. Вывод из того что выше — переменные, объявленные с помощью let могут быть перезаписаны, а переменные объявленные с помощью const не могут. Отлично, теперь когда вы захотите, чтобы ваша переменная была неизменна вы можете объявить её при помощи const. Или не совсем. Просто потому что переменная была объявлена при помощи const не означает, что она неизменна, все что это значит, это то что она не может быть перезаписана. Ниже приведен хороший пример. Заметьте, что изменения свойства объекта не является его перезаписью, так что даже если объект объявлен при помощи const, это не означает, что вы не можете изменить какие-либо из его свойств. Это только значит, что вы не можете перезаписать этот объект. Теперь, наиболее важный вопрос, на который ещё не было ответа: что следует использовать var, let или const? Самое популярное мнение, и мнение которого придерживаюсь я, это использовать всегда const, пока вы не знаете будет ли переменная изменяться. Причина этого в том, что используя const вы даете понять себе и будущим разработчикам, которые должны прочитать ваш код, что эта переменная не должна изменяться. Если её потребуется изменить (например в цикле for), просто используйте let. Между переменными, которые меняются и переменным которые не меняются, не так уж и много случаев осталось. Это значит, что вам больше никогда не придется использовать var. Теперь непопулярное мнение, хотя оно все ещё имеет обоснование, это то что вы никогда не должны использовать const, несмотря на то что вы пытаетесь показать, что эта переменная неизменна, как мы видели выше, это не совсем так. Разработчики, которые придерживаются этого мнения всегда используют let пока нет переменных, которые на самом деле являются константами, такими как _LOCATION_ =…. Составим резюме выше сказанного, var ограничена областью видимости функции и если вы попытаетесь обратиться к такой переменной до её объявления вы получите undefined. const и let ограничены областью видимости блока и если вы попытаетесь обратиться к этим переменным до их объявления вы получите ReferenceError. И отличие между const и let это то, что значение, которое было присвоено const не может быть перезаписано, в отличие от let. Первоначально данная статья была опубликована на tylermcginnis.com как часть курса Modern JavaScript Спасибо за прочтение данного перевода, надеюсь вы познакомились для себя с чем-то новым и полезным. Буду рад увидеть обратную связь! ФорумDiscord чатОбъявить переменную (или несколько) в текущей области видимости СинтаксисАргументыОписание, примерыЗдесь javascript похож на традиционные языки программирования В отличие от большинства языков, javascript блок не задает область видимости. Переменная внешней функции видна во внутренней, благодаря наличию замыканий. См. такжеА почему следующая конструкция выдает синтаксическую ошибку? Почему нельзя делать объявление переменной внутри if? If предполагает сравнение чего-то с чем-то, а в данном примере «=» использыется как оператор сравнения, а как оператор присваивания. По вашей логике тоже самое без var не должно работать. А это не так. Операцию присвоения можно использовать как логическое выражение, вот только возвращать она всегда будет true (за некоторыми исключениями) Подписываюсь под каждым словом вышестоящим словом Я думаю надо сменить на сайте фон. Он грузовой какой то. У него даже запах есть стухшего энтузиазма. Есть новый сайт с новым дизайном. Постараюсь ускорить его разработку, он в принципе почти в бете уже, только доступ по «инвайтам». Добрый день подскажите пожалуйста почему вот так выводится значение переменной y А если в функцию вставить if, то не выдает undefined, до тех пор пока мы не объявим переменную в самой функции. Почему он не берет значение переменной y из глобальной видимости? В первом примере не закрыта скобка у функции fu. Выводит 10, как и положено. На второй вопрос Т.е. свое объявление переменной y. Помогите пожалуйста, в java вообще не соображаю, как переменную из php поставить в замен ‘1 день’ и 100? P.S. в коментах моя жалкая попытка. Это учебник по JavaScript. Про PHP ответят в другом месте. Заранее извиняюсь за нубские вопросы. Но там же и написано И с неопределенной переменной эти операции будут давать Бывает js не работает при загрузке web-странички через Notepad++, но при этом точно такой же код хорошо отображается в этом конструкторе: Объявлять переменные нужно правильно, в общем разрабатывать на Javascript достаточно просто. Как в js нажимая на кнопку тебя перебрасывало на рандомную гиперссылку? Руководство по JavaScript, часть 3: переменные, типы данных, выражения, объектыСегодня, в третьей части перевода руководства по JavaScript, мы поговорим о разных способах объявления переменных, о типах данных, о выражениях и об особенностях работы с объектами. ПеременныеПеременная представляет собой идентификатор, которому присвоено некое значение. К переменной можно обращаться в программе, работая таким образом с присвоенным ей значением. Сама по себе переменная в JavaScript не содержит информацию о типе значений, которые будут в ней храниться. Это означает, что записав в переменную, например, строку, позже в неё можно записать число. Такая операция ошибки в программе не вызовет. Именно поэтому JavaScript иногда называют «нетипизированным» языком. ▍Ключевое слово varДо появления стандарта ES2015 использование ключевого слова var было единственным способом объявления переменных. Так, если включён так называемый строгий режим (strict mode), подобное вызовет ошибку. Если строгий режим не включён, произойдёт неявное объявление переменной и она будет назначена глобальному объекту. В частности, это означает, что переменная, неявно объявленная таким образом в некоей функции, окажется доступной и после того, как функция завершит работу. Обычно же ожидается, что переменные, объявляемые в функциях, не «выходят» за их пределы. Выглядит это так: В одном выражении можно объявить несколько переменных: Областью видимости переменной (scope) называют участок программы, в котором доступна (видима) эта переменная. Переменная, инициализированная с помощью ключевого слова var за пределами какой-либо функции, назначается глобальному объекту. Она имеет глобальную область видимости и доступна из любого места программы. Если переменная объявлена с использованием ключевого слова var внутри функции, то она видна только внутри этой функции, являясь для неё локальной переменной. Важно понимать, что блоки (области кода, заключённые в фигурные скобки) не создают новых областей видимости. Новая область видимости создаётся при вызове функции. Ключевое слово var имеет так называемую функциональную область видимости, а не блочную. Если в коде функции объявлена некая переменная, она видна всему коду функции. Даже если переменная объявлена с помощью var в конце кода функции, обратиться к ней можно и в начале кода, так как в JavaScript работает механизм поднятия переменных (hoisting). Этот механизм «поднимает» объявления переменных, но не операции их инициализации. Это может стать источником путаницы, поэтому возьмите себе за правило объявлять переменные в начале функции. ▍Ключевое слово letЕсли само слово «let» кажется не очень понятным, можно представить, что вместо него используется слово «пусть». Тогда выражение let color = ‘red’ можно перевести на английский так: «let the color be red», а на русский — так: «пусть цвет будет красным». Например, такой код вызовет ошибку: ▍Ключевое слово constВ данном примере константе a нельзя присвоить новое значение. Но надо отметить, что если a — это не примитивное значение, наподобие числа, а объект, использование ключевого слова const не защищает этот объект от изменений. Когда говорят, что в переменную записан объект, на самом деле имеют в виду то, что в переменной хранится ссылка на объект. Эту вот ссылку изменить не удастся, а сам объект, к которому ведёт ссылка, можно будет изменить. Ключевое слово const не делает объекты иммутабельными. Оно просто защищает от изменений ссылки на них, записанные в соответствующие константы. Вот как это выглядит: Типы данныхJavaScript иногда называют «нетипизированным» языком, но это не соответствует реальному положению дел. В переменные, и правда, можно записывать значения разных типов, но типы данных в JavaScript, всё-таки, есть. В частности, речь идёт о примитивных и об объектных типах данных. ▍Примитивные типы данныхВот список примитивных типов данных JavaScript: Поговорим о наиболее часто используемых типах данных из этого списка. Тип numberЗначения типа number в JavaScript представлены в виде 64-битных чисел двойной точности с плавающей запятой. В коде числовые литералы представлены в виде целых и дробных чисел в десятичной системе счисления. Для записи чисел можно использовать и другие способы. Например, если в начале числового литерала имеется префикс 0x — он воспринимается как число, записанное в шестнадцатеричной системе счисления. Числа можно записывать и в экспоненциальном представлении (в таких числах можно найти букву e ). Вот примеры записи целых чисел: Подсказка по объектной обёртке Number Обратите внимание на двойные скобки после имени метода. Если их не поставить, система не выдаст ошибку, но, вместо ожидаемого вывода, в консоли окажется нечто, совсем не похожее на строковое представление числа 5. Глобальный объект Number можно использовать в виде конструктора, создавая с его помощью новые числа (правда, в таком виде его практически никогда не используют), им можно пользоваться и как самостоятельной сущностью, не создавая его экземпляры (то есть — некие числа, представляемые с его помощью). Например, его свойство Number.MAX_VALUE содержит максимальное числовое значение, представимое в JavaScript. Тип stringЗначения типа string представляют собой последовательности символов. Такие значения задают в виде строковых литералов, заключённых в одинарные или двойные кавычки. Строковые значения можно разбивать на несколько частей, используя символ обратной косой черты (backslash). Строка может содержать так называемые escape-последовательности, интерпретируемые при выводе строки в консоль. Например, последовательность \n означает символ перевода строки. Символ обратной косой черты можно использовать и для того, чтобы добавлять кавычки в строки, заключённые в такие же кавычки. Экранирование символа кавычки с помощью \ приводит к тому, что система не воспринимает его как специальный символ. Шаблонные литералыВ ES2015 появились так называемые шаблонные литералы, или шаблонные строки. Они представляют собой строки, заключённые в обратные кавычки ( ` ) и обладают некоторыми интересными свойствами. Например, в шаблонные литералы можно подставлять некие значения, являющиеся результатом вычисления JavaScript-выражений. Использование обратных кавычек упрощает многострочную запись строковых литералов: Тип booleanВ частности, ложными значениями являются следующие: Остальные значения являются истинными. Тип nullТип undefined▍ОбъектыВыраженияВыражения — это фрагменты кода, которые можно обработать и получить на основе проведённых вычислений некое значение. В JavaScript существует несколько категорий выражений. Арифметические выраженияВ эту категорию попадают выражения, результатом вычисления которых являются числа. Строковые выраженияРезультатом вычисления таких выражений являются строки. Первичные выраженияВ эту категорию попадают литералы, константы, ссылки на идентификаторы. Сюда же можно отнести и некоторые ключевые слова и конструкции JavaScript. Выражения инициализации массивов и объектовЛогические выраженияВ логических выражениях используются логические операторы, результатом их вычисления оказываются логические значения. Выражения доступа к свойствамЭти выражения позволяют обращаться к свойствам и методам объектов. Выражения создания объектовВыражения объявления функцийВыражения вызоваТакие выражения используются для вызова функций или методов объектов. Работа с объектами▍Прототипное наследованиеJavaScript выделяется среди современных языков программирования тем, что поддерживает прототипное наследование. Большинство же объектно-ориентированных языков используют модель наследования, основанную на классах. У каждого JavaScript-объекта есть особое свойство ( __proto__ ), которое указывает на другой объект, являющийся его прототипом. Объект наследует свойства и методы прототипа. Предположим, у нас имеется объект, созданный с помощью объектного литерала. Проверить это можно следующим образом. Все свойства и методы прототипа доступны объекту, имеющему этот прототип. Вот, например, как выглядит их список для массива. Подсказка по массиву У Object.prototype прототипа нет. То, что мы видели выше, является примером цепочки прототипов. При попытке обращения к свойству или методу объекта, если такого свойства или метода у самого объекта нет, их поиск выполняется в его прототипе, потом — в прототипе прототипа, и так — до тех пор, пока искомое будет найдено, или до тех пор, пока цепочка прототипов не кончится. Функции-конструкторыВыше мы создавали новые объекты, пользуясь уже имеющимися в языке функциями-конструкторами (при их вызове используется ключевое слово new ). Такие функции можно создавать и самостоятельно. Рассмотрим пример. Здесь мы создаём функцию-конструктор. При её вызове создаётся новый объект, на который указывает ключевое слово this в теле конструктора. Мы добавляем в этот объект свойство name и записываем в него то, что передано конструктору. Этот объект возвращается из конструктора автоматически. С помощью функции-конструктора можно создать множество объектов, свойства name которых будут содержать то, что передано при их создании конструктору. ▍КлассыВ стандарте ES6 в JavaScript пришло такое понятие как «класс». До этого в JavaScript можно было пользоваться лишь вышеописанным механизмом прототипного наследования. Этот механизм непривычно выглядел для программистов, пришедших в JS из других языков. Поэтому в языке и появились классы, которые, по сути, являются «синтаксическим сахаром» для прототипного механизма наследования. То есть, и объекты, созданные традиционным способом, и объекты, созданные с использованием классов, имеют прототипы. Объявление классаВот как выглядит объявление класса. Наследование, основанное на классахКлассы могут расширять другие классы. Объекты, созданные на основе таких классов, будут наследовать и методы исходного класса, и методы, заданные в расширенном классе. Если класс, расширяющий другой класс (наследник этого класса) имеет метод, имя которого совпадает с тем, который есть у класса-родителя, этот метод имеет преимущество перед исходным. В классах не предусмотрено наличие переменных (свойств), свойства создаваемых с помощью классов объектов нужно настраивать в конструкторе. Статические методыМетоды, описываемые в классе, можно вызывать, обращаясь к объектам, созданным на основе этого класса, но не к самому классу. Статические ( static ) методы можно вызывать, обращаясь непосредственно к классу. Приватные методыВ JavaScript нет встроенного механизма, который позволяет объявлять приватные (частные, закрытые) методы. Это ограничение можно обойти, например, с использованием замыканий. Геттеры и сеттерыИтогиВ этом материале мы поговорили о переменных, о типах данных, о выражениях и о работе с объектами в JavaScript. Темой нашего следующего материала будут функции. Уважаемые читатели! Если вы уже давно пишете на JS, просим рассказать о том, как вы относитесь к появлению в языке ключевого слова class.
|