Как найти переменную javascript

If it’s a global variable, you can look it up by name on the global object, since global variables are properties of the global object. On browsers, there’s a global variable that refers to the global object called window, so:

var name = "foo";
window.foo = 42;
alert(Number(window[name])); // 42

But global variables are a Bad Thing^(tm).

To do this without globals, use your own object:

var name = "foo";
var obj = {};
obj.foo = 42;
alert(Number(obj[name])); // 42

Both of the above work because in JavaScript, you can refer to an object property either with dot notation and a literal (obj.foo), or with bracketed notation and a string (obj["foo"]), and in the latter case, the string can be the result of any expression, including a variable lookup.

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

→ Часть 1: первая программа, особенности языка, стандарты
→ Часть 2: стиль кода и структура программ
→ Часть 3: переменные, типы данных, выражения, объекты
→ Часть 4: функции
→ Часть 5: массивы и циклы
→ Часть 6: исключения, точка с запятой, шаблонные литералы
→ Часть 7: строгий режим, ключевое слово this, события, модули, математические вычисления
→ Часть 8: обзор возможностей стандарта ES6
→ Часть 9: обзор возможностей стандартов ES7, ES8 и ES9

Переменные

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

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

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

▍Ключевое слово var

До появления стандарта ES2015 использование ключевого слова var было единственным способом объявления переменных.

var a = 0

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

Так, если включён так называемый строгий режим (strict mode), подобное вызовет ошибку. Если строгий режим не включён, произойдёт неявное объявление переменной и она будет назначена глобальному объекту. В частности, это означает, что переменная, неявно объявленная таким образом в некоей функции, окажется доступной и после того, как функция завершит работу. Обычно же ожидается, что переменные, объявляемые в функциях, не «выходят» за их пределы. Выглядит это так:

function notVar() {
  bNotVar = 1 //лучше так не делать
}
notVar()
console.log(bNotVar)

В консоль попадёт 1, такого поведения от программы обычно никто не ждёт, выражение bNotVar = 1 выглядит не как попытка объявления и инициализации переменной, а как попытка обратиться к переменной, находящейся во внешней по отношению к функции области видимости (это — вполне нормально). Как результат, неявное объявление переменных сбивает с толку того, кто читает код и может приводить к неожиданному поведению программ. Позже мы поговорим и о функциях, и об областях видимости, пока же постарайтесь всегда, когда смысл некоего выражения заключается в объявлении переменной, пользоваться специализированными ключевыми словами. Если в этом примере тело функции переписать в виде var bNotVar = 1, то попытка запустить вышеприведённый фрагмент кода приведёт к появлению сообщения об ошибке (его можно увидеть в консоли браузера).

Выглядеть оно, например, может так: Uncaught ReferenceError: bNotVar is not defined. Смысл его сводится к тому, что программа не может работать с несуществующей переменной. Гораздо лучше, при первом запуске программы, увидеть такое сообщение об ошибке, чем писать непонятный код, который способен неожиданно себя вести.

Если, при объявлении переменной, её не инициализируют, не присваивают ей какого-либо значения, ей автоматически будет присвоено значение undefined.

var a //typeof a === 'undefined'

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

var a = 1
var a = 2

В одном выражении можно объявить несколько переменных:

var a = 1, b = 2

Областью видимости переменной (scope) называют участок программы, в котором доступна (видима) эта переменная.

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

Если в функции, с использованием var, объявлена переменная, имя которой совпадает с именем некоей переменной из глобальной области видимости, она «перекроет» глобальную переменную. То есть, при обращении к такой переменной внутри функции будет использоваться именно её локальный вариант.

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

Если в коде функции объявлена некая переменная, она видна всему коду функции. Даже если переменная объявлена с помощью var в конце кода функции, обратиться к ней можно и в начале кода, так как в JavaScript работает механизм поднятия переменных (hoisting). Этот механизм «поднимает» объявления переменных, но не операции их инициализации. Это может стать источником путаницы, поэтому возьмите себе за правило объявлять переменные в начале функции.

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

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

Если само слово «let» кажется не очень понятным, можно представить, что вместо него используется слово «пусть». Тогда выражение let color = 'red' можно перевести на английский так: «let the color be red», а на русский — так: «пусть цвет будет красным».

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

Например, такой код вызовет ошибку:

for (let i = 0; i < 5; i++) {
    console.log(i)
}
console.log(i)

Если же, при инициализации цикла, счётчик i будет объявлен с использованием ключевого слова var, то i будет доступно и за пределами цикла, после того, как он завершит работу.

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

▍Ключевое слово const

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

const a = 'test'

В данном примере константе a нельзя присвоить новое значение. Но надо отметить, что если a — это не примитивное значение, наподобие числа, а объект, использование ключевого слова const не защищает этот объект от изменений.

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

Ключевое слово const не делает объекты иммутабельными. Оно просто защищает от изменений ссылки на них, записанные в соответствующие константы. Вот как это выглядит:

const obj = {}
console.log(obj.a)
obj.a = 1 //работает
console.log(obj.a)
//obj = 5 //вызывает ошибку

В константу obj, при инициализации, записывается новый пустой объект. Попытка обращения к его свойству a, несуществующему, ошибки не вызывает. В консоль попадает undefined. После этого мы добавляем в объект новое свойство и снова пытаемся обратиться к нему. В этот раз в консоль попадает значение этого свойства — 1. Если раскомментировать последнюю строку примера, то попытка выполнения этого кода приведёт к ошибке.

Ключевое слово const очень похоже на let, в частности, оно обладает блочной областью видимости.

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

Типы данных

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

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

▍Примитивные типы данных

Вот список примитивных типов данных JavaScript:

• number (число)
• string (строка)
• boolean (логическое значение)
• null (специальное значение null)
• undefined (специальное значение undefined)
• symbol (символ, используется в особых случаях, появился в ES6)

Здесь названия типов данных приведены в том виде, в котором их возвращает оператор typeof.

Поговорим о наиболее часто используемых типах данных из этого списка.

Тип number

Значения типа number в JavaScript представлены в виде 64-битных чисел двойной точности с плавающей запятой.

В коде числовые литералы представлены в виде целых и дробных чисел в десятичной системе счисления. Для записи чисел можно использовать и другие способы. Например, если в начале числового литерала имеется префикс 0x — он воспринимается как число, записанное в шестнадцатеричной системе счисления. Числа можно записывать и в экспоненциальном представлении (в таких числах можно найти букву e).

Вот примеры записи целых чисел:

10
5354576767321
0xCC // шестнадцатеричное число

Вот дробные числа.

3.14
.1234
5.2e4 //5.2 * 10^4

Числовые литералы (такое поведение характерно и для некоторых других примитивных типов), при попытке обращения к ним как к объектам, автоматически, на время выполнения операции, преобразуются в соответствующие объекты, которые называют «объектными обёртками». В данном случае речь идёт об объектной обёртке Number.

Вот, например, как выглядит попытка обратиться к переменной a, в которую записан числовой литерал, как к объекту, в консоли Google Chrome.

Подсказка по объектной обёртке Number

Если, например, воспользоваться методом toString() объекта типа Number, он возвратит строковое представление числа. Выглядит соответствующая команда, которую можно выполнить в консоли браузера (да и в обычном коде) так:

a.toString()

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

Глобальный объект Number можно использовать в виде конструктора, создавая с его помощью новые числа (правда, в таком виде его практически никогда не используют), им можно пользоваться и как самостоятельной сущностью, не создавая его экземпляры (то есть — некие числа, представляемые с его помощью). Например, его свойство Number.MAX_VALUE содержит максимальное числовое значение, представимое в JavaScript.

Тип string

Значения типа string представляют собой последовательности символов. Такие значения задают в виде строковых литералов, заключённых в одинарные или двойные кавычки.

'A string'
"Another string"

Строковые значения можно разбивать на несколько частей, используя символ обратной косой черты (backslash).

"A 
string"

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

'I'm a developer'

Строки можно конкатенировать с использованием оператора +.

"A " + "string"

Шаблонные литералы

В ES2015 появились так называемые шаблонные литералы, или шаблонные строки. Они представляют собой строки, заключённые в обратные кавычки (`) и обладают некоторыми интересными свойствами.

`a string`

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

`a string with ${something}`
`a string with ${something+somethingElse}`
`a string with ${obj.something()}`

Использование обратных кавычек упрощает многострочную запись строковых литералов:

`a string
with
${something}`

Тип boolean

В JavaScript есть пара зарезервированных слов, использующихся при работе с логическими значениями — это true (истина), и false (ложь). Операции сравнения, например, такие, как ==, ===, <, >, возвращают true или false.

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

При этом надо отметить, что там, где ожидается значение true или false, можно использовать и другие значения, которые автоматически расцениваются языком как истинные (truthy) или ложные (falsy).

В частности, ложными значениями являются следующие:

0
-0
NaN
undefined
null
'' //пустая строка

Остальные значения являются истинными.

Тип null

В JavaScript имеется специальное значение null, которое указывает на отсутствие значения. Подобные значения используются и в других языках.

Тип undefined

Значение undefined, записанное в некую переменную, указывает на то, что эта переменная не инициализирована и значение для неё отсутствует.

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

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

typeof variable === 'undefined'

▍Объекты

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

Выражения

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

Арифметические выражения

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

1 / 2
i++
i -= 2
i * 2

Строковые выражения

Результатом вычисления таких выражений являются строки.

'A ' + 'string'
'A ' += 'string'

Первичные выражения

В эту категорию попадают литералы, константы, ссылки на идентификаторы.

2
0.02
'something'
true
false
this //контекст выполнения, ссылка на текущий объект
undefined
i //где i является переменной или константой

Сюда же можно отнести и некоторые ключевые слова и конструкции JavaScript.

function
class
function* //генератор
yield //команда приостановки/возобновления работы генератора
yield* //делегирование другому итератору или генератору
async function* //асинхронное функциональное выражение 
await //организация ожидания выполнения асинхронной функции
/pattern/i //регулярное выражение
() //группировка

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

[] //литерал массива
{} //объектный литерал
[1,2,3]
{a: 1, b: 2}
{a: {b: 1}}

Логические выражения

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

a && b
a || b
!a

Выражения доступа к свойствам

Эти выражения позволяют обращаться к свойствам и методам объектов.

object.property //обращение к свойству (или методу) объекта
object[property]
object['property']

Выражения создания объектов

new object()
new a(1)
new MyRectangle('name', 2, {a: 4})

Выражения объявления функций

function() {}
function(a, b) { return a * b }
(a, b) => a * b
a => a * 2
() => { return 2 }

Выражения вызова

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

a.x(2)
window.resize()

Работа с объектами

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

▍Прототипное наследование

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

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

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

const car = {}

Или мы создали объект, воспользовавшись конструктором Object.

const car = new Object()

В любом из этих случаев прототипом объекта car будет Object.prototype.

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

const list = []
//или так
const list = new Array()

Проверить это можно следующим образом.

car.__proto__ == Object.prototype //true
car.__proto__ == new Object().__proto__ //true
list.__proto__ == Object.prototype //false
list.__proto__ == Array.prototype //true
list.__proto__ == new Array().__proto__ //true

Здесь мы пользовались свойством __proto__, оно не обязательно должно быть доступно разработчику, но обычно обращаться к нему можно. Надо отметить, что более надёжным способом получить прототип объекта является использование метода getPrototypeOf() глобального объекта Object.

Object.getPrototypeOf(new Object())

Все свойства и методы прототипа доступны объекту, имеющему этот прототип. Вот, например, как выглядит их список для массива.

Подсказка по массиву

Базовым прототипом для всех объектов является Object.prototype.

Array.prototype.__proto__ == Object.prototype

У Object.prototype прототипа нет.

То, что мы видели выше, является примером цепочки прототипов.

При попытке обращения к свойству или методу объекта, если такого свойства или метода у самого объекта нет, их поиск выполняется в его прототипе, потом — в прототипе прототипа, и так — до тех пор, пока искомое будет найдено, или до тех пор, пока цепочка прототипов не кончится.

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

const car = Object.create(Object.prototype)

Проверить, входит ли некий объект в цепочку прототипов другого объекта, можно с использованием метода isPrototypeOf().

const list = []
Array.prototype.isPrototypeOf(list)

Функции-конструкторы

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

function Person(name) {
  this.name = name
}

Person.prototype.hello = function() {
  console.log(this.name)
}

let person = new Person('Flavio')
person.hello()

console.log(Person.prototype.isPrototypeOf(person))

Здесь мы создаём функцию-конструктор. При её вызове создаётся новый объект, на который указывает ключевое слово this в теле конструктора. Мы добавляем в этот объект свойство name и записываем в него то, что передано конструктору. Этот объект возвращается из конструктора автоматически. С помощью функции-конструктора можно создать множество объектов, свойства name которых будут содержать то, что передано при их создании конструктору.

После создания конструктора мы добавляем в его прототип функцию, которая будет выводить в консоль значение свойства name объекта, созданного с помощью этой функции. Все объекты, созданные с помощью этого конструктора, будут иметь один и тот же прототип, а значит и пользоваться одной и той же функцией hello(). Это несложно проверить, создав ещё один объект типа Person и сравнив его функцию hello() с функцией уже имеющегося в примере объекта (имя функции в таком случае записывают без скобок).

▍Классы

В стандарте ES6 в JavaScript пришло такое понятие как «класс».

До этого в JavaScript можно было пользоваться лишь вышеописанным механизмом прототипного наследования. Этот механизм непривычно выглядел для программистов, пришедших в JS из других языков. Поэтому в языке и появились классы, которые, по сути, являются «синтаксическим сахаром» для прототипного механизма наследования. То есть, и объекты, созданные традиционным способом, и объекты, созданные с использованием классов, имеют прототипы.

Объявление класса

Вот как выглядит объявление класса.

class Person {
  constructor(name) {
    this.name = name
  }
  hello() {
    return 'Hello, I am ' + this.name + '.'
  }
}

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

При создании нового объекта вызывается метод constructor, ему передаются параметры.

В классе можно объявлять методы. В нашем случае hello() — это метод, который могут вызывать все объекты, созданные на основе класса. Вот как выглядит создание нового объекта с использованием класса Person.

const flavio = new Person('Flavio')
flavio.hello()

Наследование, основанное на классах

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

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

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}
const flavio = new Programmer('Flavio')
flavio.hello()

При вызове метода hello() в вышеприведённом примере будет возвращена строка Hello, I am Flavio. I am a programmer.

В классах не предусмотрено наличие переменных (свойств), свойства создаваемых с помощью классов объектов нужно настраивать в конструкторе.

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

Статические методы

Методы, описываемые в классе, можно вызывать, обращаясь к объектам, созданным на основе этого класса, но не к самому классу. Статические (static) методы можно вызывать, обращаясь непосредственно к классу.

Приватные методы

В JavaScript нет встроенного механизма, который позволяет объявлять приватные (частные, закрытые) методы. Это ограничение можно обойти, например, с использованием замыканий.

Геттеры и сеттеры

В классе можно описывать методы, предваряя их ключевыми словами get или set. Это позволяет создавать так называемые геттеры и сеттеры — функции, которые используются для управления доступом к свойствам объектов, созданных на основе класса. Геттер вызывается при попытке чтения значения псевдо-свойства, а сеттер — при попытке записи в него нового значения.

class Person {
    constructor(name) {
      this.userName = name
    }
    set name(value) {
      this.userName = value
    }
    get name() {
      return this.userName
    }
  }

Итоги

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

Уважаемые читатели! Если вы уже давно пишете на JS, просим рассказать о том, как вы относитесь к появлению в языке ключевого слова class.

I think it depends on what you want to do with the variable.

Let’s say, for example, you have a JS library that will call a function if it has been defined and if not, then not. You probably know already that functions are first level objects in JS and are as such variables.

You could be tempted to ask first if it exists, and then call it. But you can just as well wrap the attempt at calling it in a try/catch block.

Example of code that calls a function, if defined, before and after firing an event:

function fireEvent(event)
{
    try
    {
        willFireEvent(event); // Is maybe NOT defined!
    } catch(e) {}

    //... perform handler lookup and event handling

    try
    {
        hasFiredEvent(event); // Might also NOT exist!
    } catch(e) {}
}

So instead of checking for the variable, catch the error instead:

var x;

try
{
    x = mayBeUndefinedVar;
}
catch (e)
{
    x = 0;
}

Whether this is a good thing or not in terms of performance, etc., depends on what you’re doing…

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

Первая программа

Изучение JavaScript начнём с создания простой программы, состоящей из одной строчки, которая будет выводить в консоль браузера сообщение «Hello, World!»:

console.log('Hello, World!');

Полный текст HTML документа:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <!-- Сценарий JavaScript -->
    <script>
      console.log('Hello, World!');
    </script>
  </body>
</html>

Для его создания можно воспользоваться любым текстовым редактором, например, Visual Studio Code.

Для этого откройте текстовый редактор, вставьте в него этот код и сохраните его в файл с расширением html (например, «index.html»).

После этого откройте его в браузере, например, Google Chrome. Далее перейдите в «Инструменты разработчика», а в них на вкладку «Console»:

Здесь мы увидим вывод нашего сообщения «Hello, World!».

Программа на JavaScript находится между открывающим и закрывающим тегом script. Как уже было отмечено выше эта программа состоит всего из одной строчки кода:

console.log('Hello, World!');

Этот код выполняет очень простое действие: выводит сообщение, указанное в круглых скобках в консоль.

Чтобы понять как эта строчка работает, рассмотрим из чего она состоит:

• console – это объект. Объект в JavaScript – это набор свойств. Каждое свойство состоит из имени и значения («имя: значение»), имена также ещё называют ключами.
• log – это одно из свойств объекта console, а точнее его метод. Т.к. в качестве его значения выступает функция.
• . (точка) – это оператор, который мы используем для доступа к свойствам и методам объекта. В данном случае мы с помощью точки получаем доступ к методу log объекта console.
• () (скобки) – это часть синтаксиса JavaScript, с помощью которого в данном случае мы вызываем функцию log, которая является методом объекта console.
• 'Hello, World!' – аргумент типа String (строка), т.е. значение, которое мы передаём в метод log().

Таким образом, эта строчка console.log('Hello, World!'); вызывает метод log() и передаёт ему в качестве аргумента значение 'Hello, World!'. log() – это метод объекта console и поэтому чтобы к нему обратиться мы используем точку.

В этом примере мы познакомились с одними из ключевых понятий JavaScript: объектом и функцией. Здесь объектом является console, а функцией — метод log().

В заключении отметим, что строка console.log('Hello, World!') является выражением.

Выражения

Выражение – это тоже одно из ключевых понятий в JavaScript. Оно представляет собой некоторый кусок кода, который всегда возвращает значение.

Если вернутся к предыдущему примеру, то console.log('Hello, World!') как мы уже отметили выше является выражением, т.к. возвращает значение:

console.log('Hello, World!');

В качестве значения данное выражение возвращает undefined. В этом легко убедиться если его обернуть в ещё одну конструкцию console.log():

console.log(console.log('Hello, World!')); // undefined

Примеры выражений:

• 'Alexander' – это выражение, которое представляет собой строку; результатом этого выражения будет эта же строка;
• 7 + 3 – это выражение, в котором используется оператор +; результатом этого выражения будет число 10;
• 'Alexander' + ' ' + 'Maltsev' – результатом этого выражения будет новая строка 'Alexander Maltsev';
• name = 'Tim' – это выражение, в котором используется оператор присваивания; здесь переменной name присваивается значение 'Tim'; результатом этого выражения будет строка 'Tim', т.е. то значение, которое мы присваиваем переменной;
• index++ – здесь используется оператор ++, который увеличивает значение переменной на 1; результатом этого выражения будет значение переменной index, увеличенное на 1;
• 2 > 3 || 2 > 1 – это выражение, в котором используются несколько операторов; оно возвращает значение true;
• sum(3, 5) – вызов функции также является выражением, т.к. функция всегда возвращает какое-либо значение.

Некоторые примеры этих выражений имеют side effects (побочные действия). Т.е. они не только возвращают значение, но выполняют также некоторые дополнительные действия.

Например, выражение name = 'Tim' не только возвращает значение 'Tim', но также выполняет присвоение переменной name значения 'Tim'.

Если взять выражение index++, то оно тоже кроме возвращения значения ещё увеличивает значение переменной index на единицу.

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

Переменные

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

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

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

Именование переменных

Имя переменной можно составлять из букв, цифр и символов $ и _. При этом первый символ переменной не должен быть цифрой. Кроме этого, в качестве имени переменной нельзя использовать зарезервированные слова JavaScript.

// объявление двух переменных: phone и message
let phone, message;

Регистр букв в имени переменной имеет значение. Т.е., например, phone и Phone – это две разные переменные.

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

• PascalCase – для именования типов и классов;
• SELECTOR_ITEM – для именования констант (значения которых известно до запуска программы и не меняются на протяжении её выполнения);
• camelCase – во всех остальных случаях.

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

class SimpleSlider { ... };

Именование констант (например, SELECTOR_ITEM) осуществляется прописными буквами и нижнего подчеркивания для разделения слов.

const SELECTOR_ITEM = '.slider';

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

let elBody = document.body;

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

Объявление переменных

В JavaScript доступно 3 ключевых слова, с помощью которых можно объявить переменные: let, const и var.

Ключевые слова let и const появились в языке с приходом ECMAScript 6, который вышел в 2015 году. var присутствовало в языке JavaScript с самого начала и до ECMAScript 6 использовалось только оно.

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

Пример объявление переменной с названием email:

let email;

Перед названием переменной расположено ключевое слово let. Это слово дает инструкцию интерпретатору JavaScript создать новую переменную с именем email.

При создании переменной ей можно сразу же присвоить некоторое значение. Эту операцию называют инициализацией. Выполняется присвоение значения только что объявленной переменной с помощью оператора =.

let email = 'no-reply@astr.org';

Присвоим переменной, объявленной до этого новое значение:

email = 'support@astr.org';

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

// выведем в консоль браузера значение переменной email
console.log(email);

Переменная, которая объявлена без инициализации имеет по умолчанию значение undefined.

let phone;
console.log(phone); // undefined

С помощью одного ключевого слова можно объявить сразу несколько переменных:

let price = 78.55, quantity = 10, message;

Отделение друг от друга осуществляется посредством запятой.

Отличие let от const

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

let price;
// присвоим переменной price новое значение
price = 76.10;

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

const COLOR_RED = '#ff0000';

Если это не сделать, то получите ошибку:

const COLOR_RED; // Uncaught SyntaxError: Missing initializer in const declaration
COLOR_RED = '#ff0000';

При попытке присвоить новое значение, вы также получите ошибку:

const COLOR_RED = '#ff0000';
COLOR_RED = '#f44336'; // Uncaught TypeError: Assignment to constant variable.

Таким образом, переменной, объявленной с помощью const нельзя присваивать новые значения. Это основное отличие let от const.

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

Также необходимо отметить, что если вы попытаетесь получить доступ к переменной, которая ещё не объявлена, то получите ошибку:

console.log(price); // Uncaught ReferenceError: Cannot access 'price' before initialization
let price;

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

let price;
console.log(price);
let price = 76.10; // Uncaught SyntaxError: Identifier 'price' has already been declared

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

// присвоим переменной массив (массив в JavaScript – это объект)
const colors = ['#ff0000', '#00ff00', '#00ff00'];
// присвоить новое значение переменной нельзя
colors = []; // Uncaught TypeError: Assignment to constant variable.

Изменить объект, ссылка на который содержится в переменной, объявленной с помощью const можно:

// присвоим переменной массив (массив в JavaScript – это объект)
const colors = ['#ff0000', '#00ff00', '#00ff00'];
// добавим в массив новое значение
colors.push('#4caf50');
// выведем значение COLORS в консоль
console.log(colors); // ["#ff0000", "#00ff00", "#00ff00", "#4caf50"]

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

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

Отличия var от let и const:

1. var в отличие от let и const имеет функциональную область видимости, т.е. если её объявить внутри функции, то она будет видна во всем коде этой функции. При этом видимость let и const ограничена блоком, т.е. они видны только в пределах фигурных скобок { ... }.

{
  var myAge = 36;
  let myName = 'John';
}
console.log(myAge); // 36
console.log(myName); // Uncaught ReferenceError: myName is not defined

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

console.log(myAge); // undefined
var myAge = 36;
console.log(myAge); // 36

Кроме этого, мы даже можем присвоить значение переменной до её объявления:

myAge = 27;
console.log(myAge); // 27
var myAge = 36;
console.log(myAge); // 36

В случае с let или const такое не получится, т.к. её использовать можно только после объявления.

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

// создадим переменную price со значением без использования var
price = 250;
console.log(price); // 250

Создавать переменные без var не рекомендуется.

В строгом режиме мы получим ошибку:

// создадим переменную price со значением без использования var
price = 250; // Uncaught ReferenceError: price is not defined
console.log(price);

Типы данных

Значение в JavaScript имеют определённый тип. Когда переменной мы присваиваем значение, она соответственно тоже принимает этот тип.

Все типы данных в JavaScript можно разделить на примитивные и ссылочный.

В JavaScript выделяют 7 примитивных типов:

• number (обычные числа);
• bigint (большие целые числа);
• string (строки);
• boolean (логический) – имеет всего два значения: true и false;
• null – имеет одно значения: null;
• undefined – имеет одно значения: undefined;
• symbol (символ) – для создания уникальных значений;

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

let coordX = 77;
let coordY = coordX;
coordX = 55;
console.log(coordX); // 55
console.log(coordY); // 77

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

Если мы переопределим значение переменной coordX, то значение coordY не изменится. Потому что значения примитивных типов хранятся непосредственно в переменных. Т.е. переменная coordY в таком случае получит собственную копию этого значения.

Ссылочный тип в JavaScript только один – это object (объект). Объект – это одно из ключевых понятий JavaScript. Т.к. в этом языке всё практически является объектами. Функция, массив, дата и т.д. – это объекты. Даже примитивные типы данных ведут себя как объекты, хотя ими не являются.

1. Object (объект)

Объект – это набор свойств «имя: значение». Имена часто также называют ключами.

Пример объекта записанного с помощью литерального синтаксиса, т.е. фигурных скобок:

const person = {
  firstName: 'Alexander',
  lastName: 'Maltsev',
  age: 37,
  pets: {
    dog: 'husky',
    cat: 'chartreux',
    fish: 'neon tetra'
  },
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

В этом примере свойства firstName, lastName и age содержат значения примитивных типов данных. Значение свойства pets – объект. Такие объекты называются вложенными. У него содержатся свои свойства с соответствующими значениями.

Свойство getFullName содержит в качестве значения функцию. Такие свойства в JavaScript называются методами.

Когда мы присваиваем такой объект переменной, в ней будет храниться только ссылка (например, 0xD30F) на этот объект. А сам объект будет хранится в области памяти на которую указывает эта ссылка.

Если некоторой переменной присвоить значение переменой person, то она будет тоже содержать ссылку на этот объект:

const myPerson = person;

Таким образом, у нас получатся две переменные, которые ссылаются на один и тот же объект.

Если добавим новое свойство в объект с помощью переменной myPerson, то мы увидим изменение в этом объекте и посредством переменной person, т.к. они указывают на один и тот же объект в памяти:

// добавим в объект новое свойство
myPerson.hobbies = ['ski', 'books', 'fitness'];
// выведем в консоль его значение с помощью переменной person
console.log(person.hobbies); // ['ski', 'books', 'fitness']

Для обращения к свойству hobbies в этом примере мы использовали точку. Кроме точечной записи (dot notation), вы можете также работать со свойствами объектами используя квадратные скобки:

console.log(person['hobbies']); // ['ski', 'books', 'fitness']

2. Number (число)

Числовой тип в JavaScript является универсальным. Он используется для представления как целых, так и чисел с плавающей точкой.

let int = 5; // целое число
let float = 5.98; // число с плавающей точкой

Формат представления чисел в JavaScript осуществляется в соответствии со стандартом IEEE 754-2008.

Целые числа в JavaScript можно задавать не только в десятичной системе счисления, но и в восьмеричной (0) или шестнадцатеричной системе счисления (0x) с использованием префиксов, указанных в круглых скобках:

let int = 010; // 8
int = 055; // 45
int = 0xFF; //255
int = 0xB8; // 184

Записывать числа также можно в экспоненциальной форме:

let num = 2e3; // экспоненциальная запись числа 2*10^3 (2000)
num = 2e-3; // экспоненциальная запись числа 2*10^-3 (0,002)
num = 3.2e3; // 3200
num = 1.5e-2; // 0.015

Числовой тип данных кроме чисел содержит ещё специальные числовые значения:

• Infinity (положительная бесконечность);
• -Infinity (отрицательная бесконечность);
• NaN (Not a Number – не число).

Специальное значения Infinity означает очень большое положительное число, т.е. число, которое не может быть представлено в JavaScript по причине того, что оно слишком велико.

Специальные значения -Infinity означает, наоборот, очень большое отрицательное число, т.е. число, которое не может быть представлено JavaScript по причине того, что оно тоже слишком велико.

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

5/0; // Infinity
-5/0; // -Infinity
Math.pow(10,399); // Infinity (10399)
Math.pow(10,399); // -Infinity (-10399)

Значение NaN возвращается в результате выполнения математических операций, которые JavaScript не может вычислить.

5 - 'Hi'; // NaN (от числа 5 отнять строку)
1000 / '20px'; // NaN (число поделить на строку)
true * '1rem'; // NaN (логическое значение true умножить на строку)

При этом очень интересным является то, что значение NaN в JavaScript не равно ничему включая себя.

NaN == NaN; // false
NaN === NaN; //false

3. BigInt (большое целое число)

BigInt – это числовой тип, который предоставляет возможность работать с большими целыми числами. Появился этот тип в спецификации ECMAScript 2020 (11 редакции).

Примитив bigint создается путём добавления n в конец числа:

const bigint = 8950422584340004n;
console.log(bigint); // 8950422584340004n

4. String (строка)

String (строка) – это тип данных, который используется в JavaScript для представления текста.

Строка JavaScript может состоять из 0 или большего количества символов.

В качестве формата строки в JavaScript всегда используется кодировка Unicode.

Создание строки (литерала строки) выполняется посредством заключения текста в одинарные или двойные кавычки.

let str1 = 'ECMAScript';
let str2 = "JavaScript";

В JavaScript нет разницы между одинарными и двойными кавычками.

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

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

let str1 = '"ECMAScript"'; // без экранирования (с использованием одинарных кавычек)
let str2 = ""ECMAScript""; // с экранированием

Строка в JavaScript может содержать специальные символы. Например,
(перевод строки), (табуляция),
(возврат каретки) и др.

 console.log('Это предложение.
А это тоже предложение, но оно будет выведено на новой строке.');

Со строками можно производить операцию сложения (объединения) или, другими словами, конкатенацию. Для этого используется оператор +. Смысл данной операции заключается в присоединении второй строки к концу первой.

console.log('Я люблю ' + 'JavaScript'); // Я люблю JavaScript

5. Boolean (логический тип данных)

Boolean – примитивный тип данных, который имеет всего два значения: true (истина) и false (ложь).

let isMoving = true;
let hasTransformed = false;

6. Тип null

null – тип данных, который имеет одно значение: null.

Он используется, когда вы хотите явно указать, что на данном этапе у переменной нет значения, т.е. оно отсутствует.

let direction = null;

7. Тип undefined

undefined — тип данных, который имеет одно значение: undefined. Такое значение подразумевает, что значение у той или иной переменной нет, т.е. оно не определено.

Такое значение содержит объявленная переменная, которой ещё не присвоено значение.

let num;
console.log(num); // undefined

Значение undefined также возвращается при доступе к свойству объекта, которого у него нет:

const objA = {
  x: 5,
  y: 2
};
console.log(objA.z); // undefined

Также функция которая явно не возвращает значение:

function myFunc(str) {
  console.log(str);
}

const result = myFunc('JavaScript!');
console.log(result); // undefined

Аналогично будет использование оператора return без указания значения:

function myFunc() {
  return;
  console.log(str);
}

const result = myFunc();
console.log(result); /// undefined

Разница между null и undefined заключается в том, что значение null мы присваиваем переменной сами.

8. Symbol (символ)

Symbol (символ) предназначен для создания уникальных идентификаторов. Появился этот тип данных в ECMAScript 2015 (6 редакции). Создание символа выполняется с помощью функции Symbol():

const id = Symbol('id')

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

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

Динамическая типизация

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

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

Например, присвоим одной и той же переменной значения разных типов:

let output = 'успех'; // строка
output = 28; // число
output = true; // логический тип

Динамическая типизация имеет преимущества, так и недостатки:

// объявим функцию
function sum(a, b) {
  console.log(a + b);
}
// вызовем функцию
sum(2, 3); // 5
// присвоим переменной sum новое значение
sum = 4;
// вызовем функцию ещё раз
sum(3, 7); // Uncaught TypeError: sum is not a function

В этом примере мы объявили функцию с помощью ключевого слова function. sum — это название функции. Когда мы первый раз вызывали функцию, переменная sum содержала её. После этого мы присвоили переменной число 4. Теперь когда попытаемся вызвать функцию ещё раз, мы получим ошибку. Т.к. переменная sum на данном этапе содержит просто число.

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

// присвоим переменной стрелочную функцию
const sum = (a, b) => {
  console.log(a + b);
}
// вызовем функцию
sum(2, 3); // 5
// присвоим переменной sum новое значение
sum = 4; // Uncaught TypeError: Assignment to constant variable.
// вызовем функцию ещё раз
sum(3, 7);

В этом примере функция также содержится в переменной, но в объявленной с помощью const. А так как переменная объявлена с помощью const, то мы не можем ей присвоить новое значение, в данном случае число 4.

Оператор typeof

Оператор typeof позволяет определить тип того или иного значения. При этом у него имеется два синтаксиса, с круглыми скобками и без них:

typeof operand
typeof(operand)

В качестве результата он возвращает строку, которая будет показывать тип этого значения:

let name;
const age = 37;
const email = 'v3@gmail.com';
const isLicense = true;
const interest = null;
const num = 3n;
const id = Symbol('id');
const lastExperience = {
  [id]: 37216,
  period: 'June 2011 - June 2018',
  place: 'ISACA, Moscow',
  position: 'Web designer'
};
const getExperience = () =gt; {
  return `${lastExperience.period} (${lastExperience.position} - ${lastExperience.place})`;
};

console.log(typeof name);            // undefined
console.log(typeof age);             // number
console.log(typeof email);           // string
console.log(typeof isLicense);       // boolean
console.log(typeof interest);        // object (1)
console.log(typeof num);             // bigint
console.log(typeof id);              // symbol
console.log(typeof lastExperience);  // object
console.log(typeof getExperience);   // function (2)

В этом примере:

(1) — При получении типа данных для значения null, оператор typeof возвращает object. Это ошибка, которая присутствует в языке, начиная с его первой реализации. Она не была исправлена в целях сохранения совместимости и это необходимо учитывать, при написании сценариев. null — это примитивный тип данных, он не является объектом.

(2) — Очень удобно, что typeof выделяет функции отдельно. Это позволяет нам очень просто проверить является ли указанная переменная функцией. Но функции в JavaScript являются объектами:

console.log(getExperience instanceof Object); // true

Оператор typeof очень часто используется когда нужно узнать есть ли значение у переменной:

let a;
if (typeof a === 'undefined') {
  console.log('У переменной a нет значения!');
} else {
  console.log(`Переменная a имеет значение: ${a}!`);
}

Также typeof применяется когда вы не уверены какой тип у переменной и вам нужно его проверить перед тем как выполнить какие-то действия:

let sum = 0;
[1, 3, 'a', null].forEach((item) => {
  if (typeof item === 'number') {
    sum += item;
  }
});
console.log(sum); // 4

В этом примере мы будем прибавлять к sum значение переменной item только если она является числом, т.е. имеет тип number.

Следующая тема: «Операторы в JavaScript».