Функция javascript: Функции — Веб-технологии для разработчиков

Содержание

Функции

В этой статье описаны функции Javascript на уровне языка: создание, параметры, приемы работы, замыкания и многое другое.

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

Именованные (FunctionDeclaration)Анонимные (FunctionExpression)
function имя(параметры) {
...
}
var имя = function(параметры) {

}
...
var имя = new Function(параметры, '...')
Именованные функции доступны везде в области видимостиАнонимные - доступны только с момента объявления. Синтаксис new Function используется редко, в основном для получения функции из текста, например, динамически загруженного с сервера в процессе выполнения скриптов.
/* функция sum 
определена ниже 
*/
var a = sum(2,2)

function sum(x,y) {
	return x+y
}
/* будет ошибка, 
т.к sum еще не существует
*/
var a = sum(2,2)

var sum = function(x,y) {
	return x+y
}

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

function f() {
	...
}
f.test = 6
...
alert(f.test) // 6

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

Например,

function func() {
	var funcObj = arguments.callee

	funcObj.test++
	alert(funcObj.test)
}
func.test = 1
func()
func()

В начале работы каждая функция создает внутри себя переменную arguments и присваивает arguments.callee ссылку на себя. Так что arguments.callee.test - свойство func.test, т.е статическая переменная test.

В примере нельзя было сделать присвоение:

функции / Блог компании RUVDS.com / Хабр

Сегодня публикуем четвёртую часть перевода руководства по JavaScript, которая посвящена функциям.

→ Часть 1: первая программа, особенности языка, стандарты

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

Функции в JavaScript


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

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

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

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

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

Вот как выглядит объявление функции (function declaration).

function doSomething(foo) {
  //сделать что-нибудь
}

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

Функцию можно назначить переменной или константе. Такая конструкция называется функциональным выражением (function expression).

const doSomething = function(foo) {
  //сделать что-нибудь
}

Можно заметить, что в вышеприведённом примере функция назначена константе, но сама она имени не имеет. Такие функции называют анонимными. Подобным функциям можно назначать имена. В таком случае речь идёт об именованном функциональном выражении (named function expression).
const doSomething = function doSomFn(foo) {
  //сделать что-нибудь
}

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

В стандарте ES6 появились стрелочные функции (arrow function), которые особенно удобно использовать в виде так называемых «встроенных функций» (inline function) — в роли аргументов, передаваемых другим функциям (коллбэков).

const doSomething = foo => {
  //сделать что-нибудь
}

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

Параметры функций


Параметры представляют собой переменные, которые задаются на этапе объявления функции и будут содержать передаваемые ей значения (эти значения называют аргументами). Функции в JavaScript могут либо не иметь параметров, либо иметь один или несколько параметров.
const doSomething = () => {  //сделать что-нибудь } const doSomethingElse = foo => {  //сделать что-нибудь } const doSomethingElseAgain = (foo, bar) => {  //сделать что-нибудь }

Здесь показано несколько примеров стрелочных функций.

Начиная со стандарта ES6 у функций могут быть так называемые «параметры по умолчанию» (default parameters).

const doSomething = (foo = 1, bar = 'hey') => {
  //сделать что-нибудь
}

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

В ES8 появилась возможность ставить запятую после последнего аргумента функции (это называется trailing comma). Эта возможность позволяет повысить удобство редактирования кода при использовании систем контроля версий в ходе разработки программ. Подробности об этом можно почитать здесь и здесь.

Передаваемые функциям аргументы можно представлять в виде массивов. Для того чтобы разобрать эти аргументы можно воспользоваться оператором, который выглядит как три точки (это — так называемый «оператор расширения» или «оператор spread»). Вот как это выглядит.

const doSomething = (foo = 1, bar = 'hey') => {
  //сделать что-нибудь
}
const args = [2, 'ho!']
doSomething(...args)

Если функции нужно принимать много параметров, то запомнить порядок их следования может быть непросто. В таких случаях используются объекты с параметрами и возможности по деструктурированию объектов ES6.
const doSomething = ({ foo = 1, bar = 'hey' }) => {
  //сделать что-нибудь
  console.log(foo) // 2
  console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
doSomething(args)

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

Значения, возвращаемые из функций


Все функции возвращают некое значение. Если команда возврата явно не задана — функция возвратит undefined.
const doSomething = (foo = 1, bar = 'hey') => {
  //сделать что-нибудь
}

console.log(doSomething())

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

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

const doSomething = () => {
  return 'test'
}
const result = doSomething() // result === 'test'

Из функции можно возвращать лишь одно значение. Для того чтобы получить возможность возврата нескольких значений, возвращать их можно либо в виде объекта, используя объектный литерал, либо в виде массива, а при вызове функции применять конструкцию деструктурирующего присваивания. Имена параметров при этом сохраняются. При этом, если нужно работать с объектом или массивом, возвращённым из функции, именно в виде объекта или массива, можно обойтись без деструктурирующего присваивания.
const doSomething = () => {  return ['Roger', 6] } const [ name, age ] = doSomething() console.log(name, age) //Roger 6

Конструкцию const [ name, age ] = doSomething() можно прочитать следующим образом: «объявить константы name и age и присвоить им значения элементов массива, который возвратит функция».
Вот как то же самое выглядит с использованием объекта.
const doSomething = () => {
  return {name: 'Roger', age: 6}
}

const { name, age } = doSomething()
console.log(name, age) //Roger 6

Вложенные функции


Функции можно объявлять внутри других функций.
const doSomething = () => {
  const doSomethingElse = () => {}
  doSomethingElse()
  return 'test'
}

doSomething()

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

Методы объектов


Когда функции используются в качестве свойств объектов, такие функции называют методами объектов.
const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started`)
  }
}
car.start()

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


Если сравнить стрелочные и обычные функции, используемые в качестве методов объектов, можно обнаружить их важное различие, заключающееся в смысле ключевого слова this. Рассмотрим пример.
const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started ${this.brand} ${this.model}`)
  },
  stop: () => {
    console.log(`Stopped ${this.brand} ${this.model}`)
  }
}
car.start() //Started Ford Fiesta
car.stop() //Stopped undefined undefined

Как видно, вызов метода start() приводит ко вполне ожидаемому результату, а вот метод stop() явно работает неправильно.

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

Вот как выглядит выполнение такого кода в консоли браузера.

const test = {
  fn: function() {
    console.log(this)
  },
  arrFn: () => {
    console.log(this)
  }
}

test.fn()
test.arrFn()


Особенности ключевого слова this в обычных и стрелочных функциях

Как можно заметить, обращение к this в обычной функции означает обращение к объекту, а this в стрелочной функции указывает на window.

Всё это означает, что стрелочные функции не подходят на роль методов объектов и конструкторов (если попытаться использовать стрелочную функцию в роли конструктора — будет выдана ошибка TypeError).

Немедленно вызываемые функциональные выражения


Немедленно вызываемое функциональное выражение (Immediately Invoked Function Expression, IIFE) — это функция, которая автоматически вызывается сразу после её объявления.
;(function () {
  console.log('executed')
})()

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

В вышеприведённом примере в консоль попадёт слово executed, после чего IIFE завершит работу. IIFE, точно так же как и другие функции, могут возвращать результаты своей работы.

const something = (function () {
  return 'IIFE'
})()

console.log(something)

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

Поднятие функций


Перед выполнением JavaScript-кода производится его реорганизация. Мы уже говорили о механизме поднятия (hoisting) переменных, объявленных с использованием ключевого слова var. Похожий механизм действует и при работе с функциями. А именно, речь идёт о том, что объявления функций в ходе обработки кода перед его выполнением перемещаются в верхнюю часть их области видимости. В результате, например, оказывается, что вызвать функцию можно до её объявления.
doSomething() //did something
function doSomething() {
  console.log('did something')
}

Если переместить вызов функции так, чтобы он шёл после её объявления, ничего не изменится.

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

doSomething() //TypeError
var doSomething = function () {
  console.log('did something')
}

В данном случае оказывается, что хотя объявление переменной doSomething и поднимается в верхнюю часть области видимости, это не относится к операции присваивания.
Если вместо var в похожей ситуации использовать ключевые слова let или const, такой код тоже работать не будет, правда, система выдаст другое сообщение об ошибке (ReferenceError а не TypeError), так как при использовании let и const объявления переменных и констант не поднимаются.

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


Сейчас мы подробнее поговорим о стрелочных функциях, с которыми мы уже встречались. Их можно считать одним из наиболее значительных новшеств стандарта ES6, они отличаются от обычных функций не только внешним видом, но и особенностями поведения. В наши дни они используются чрезвычайно широко. Пожалуй, нет ни одного современного проекта, где они не использовались бы в подавляющем большинстве случаев. Можно сказать, что их появление навсегда изменило и внешний вид JS-кода и особенности его работы.

С чисто внешней точки зрения синтаксис объявления стрелочных функций оказывается компактнее синтаксиса обычных функций. Вот объявление обычной функции.

const myFunction = function () {
  //...
}

Вот объявление стрелочной функции, которое, в целом, если не учитывать особенности стрелочных функций, аналогично предыдущему.
const myFunction = () => {
  //...
}

Если тело стрелочной функции содержит лишь одну команду, результат которой возвращает эта функция, его можно записать без фигурных скобок и без ключевого слова return. Например, такая функция возвращает сумму переданных ей аргументов.
const myFunction = (a,b) => a + b
console.log(myFunction(1,2)) //3

Как видите, параметры стрелочных функций, как и в случае с обычными функциями, описывают в скобках. При этом, если такая функция принимает всего один параметр, его можно указать без скобок. Например, вот функция, которая возвращает результат деления переданного ей числа на 2.
const myFunction = a => a / 2
console.log(myFunction(8)) //4

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

▍Неявный возврат результатов работы функции


Мы уже касались этой особенности стрелочных функций, но она настолько важна, что её следует обсудить подробнее. Речь идёт о том, что однострочные стрелочные функции поддерживают неявный возврат результатов своей работы. Пример возврата примитивного значения из однострочной стрелочной функции мы уже видели. Как быть, если такая функция должна возвратить объект? В таком случае фигурные скобки объектного литерала могут запутать систему, поэтому в теле функции используются круглые скобки.
const myFunction = () => ({value: 'test'})

const obj = myFunction() 
console.log(obj.value) //test

▍Ключевое слово this и стрелочные функции


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

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

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

Та же самая проблема возникает и при использовании функций в качестве обработчиков событий элементов DOM. Например, HTML-элемент button используют для описания кнопок. Событие click вызывается при щелчке мышью по кнопке. Для того чтобы отреагировать на это событие в коде, нужно сначала получить ссылку на соответствующий элемент, а потом назначить ему обработчик события click в виде функции. В качестве такого обработчика можно использовать и обычную функцию, и стрелочную. Но, если в обработчике событий нужно обращаться к тому элементу, для которого оно вызвано (то есть — к this), стрелочная функция тут не подойдёт, так как доступное в ней значение this указывает на объект window. Для того чтобы проверить это на практике, создайте HTML-страницу, код которой показан ниже, и понажимайте на кнопки.

<!DOCTYPE html>
<html>
  <body>
  
    <button>Function</button>
    <button>Arrow function</button>

    <script>
      const f = document.getElementById("fn")
      f.addEventListener('click', function () {
          alert(this === f)
      })

      const af = document.getElementById("arrowFn")
      af.addEventListener('click', () => {
          alert(this === window)
      })
    </script>
  </body>
</html>

В данном случае при нажатии на эти кнопки будут появляться окна, содержащие true. Однако в обработчике события click кнопки с идентификатором fn проверяется равенство this самой кнопке, а в кнопке с идентификатором arrowFn проверяется равенство this и объекта window.

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

Замыкания


Замыкания — это важная концепция в JavaScript. Фактически, если вы писали JS-функции, то вы пользовались и замыканиями. Замыкания применяются в некоторых паттернах проектирования — в том случае, если нужно организовать строгий контроль доступа к неким данным или функциям.

Когда функция вызывается, у неё есть доступ ко всему тому, что находится во внешней по отношению к ней области видимости. Но к тому, что объявлено внутри функции, извне доступа нет. То есть, если в функции была объявлена некая переменная (или другая функция), они недоступны внешнему коду ни во время выполнения функции, ни после завершения её работы. Однако если из функции возвратить другую функцию, то эта новая функция будет иметь доступ ко всему тому, что было объявлено в исходной функции. При этом всё это будет скрыто от внешнего кода в замыкании.

Рассмотрим пример. Вот функция, которая принимает имя собаки, после чего выводит его в консоль.

const bark = dog => {
  const say = `${dog} barked!`
  ;(() => console.log(say))()
}
bark(`Roger`) // Roger barked!

Значение, возвращаемое этой функцией нас пока не интересует, текст выводится в консоль с помощью IIFE, что в данном случае особой роли не играет, однако, это поможет нам увидеть связь между этой функцией и её вариантом, в котором, вместо вызова функции, которая выводит текст в консоль, мы эту функцию из переписанной функции bark() возвратим.
const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => console.log(say)
}
const bark = prepareBark(`Roger`)
bark() // Roger barked!

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

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

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => {
    console.log(say)
  }
}
const rogerBark = prepareBark(`Roger`)
const sydBark = prepareBark(`Syd`)
rogerBark()
sydBark()

Этот код выведет следующее.
Roger barked!
Syd barked!

Оказывается, что значение константы say привязано к функции, которая возвращена из функции prepareBark().

Обратите внимание на то, что say, при повторном вызове prepareBark(), получает новое значение, при этом значение, записанное в say при первом вызове prepareBark(), не меняется. Речь идёт о том, что при каждом вызове этой функции создаётся новое замыкание.

Итоги


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

Уважаемые читатели! Как вы относитесь к стрелочным функциям в JavaScript?

Function - Веб-технологии для разработчиков

FunctionChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
Function() constructorChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
applyChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 5.5Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
arguments УстаревшаяНестандартнаяChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
bindChrome Полная поддержка 7Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 5.1WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
callChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 5.5Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
caller НестандартнаяChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 8Opera Полная поддержка 9.6Safari Полная поддержка 3WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
displayName НестандартнаяChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 13IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 14Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нетnodejs Нет поддержки Нет
lengthChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
nameChrome Полная поддержка 15Edge Полная поддержка 14Firefox Полная поддержка 1IE Нет поддержки НетOpera Полная поддержка 10.5Safari Полная поддержка 6WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
toSource НестандартнаяChrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 1 — 74
Нет поддержки 1 — 74
Замечания Starting in Firefox 74, toSource() is no longer available for use by web content. It is still allowed for internal and privileged code.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нетnodejs Нет поддержки Нет
toStringChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 5Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
Справочник по JavaScript - Веб-технологии для разработчиков

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

Глобальные объекты

Эта глава описывает все стандартные встроенные объекты JavaScript вместе с их методами и свойствами.

Значения

Глобальные свойства, возвращающие простое значение.

Функции

Глобальные функции, возвращающие результат определённой подпрограммы.

Фундаментальные объекты

Общие языковые объекты, функции и ошибки.

Числа и даты

Объекты, имеющие дело с числами, датами и математическими вычислениями.

Обработка текста

Объекты для манипулирования текстом.

Индексированные коллекции

Коллекции, упорядоченные по индексам. Массивоподобные объекты.

Коллекции по ключу

Коллекции объектов по ключу. Элементы обходятся в порядке вставки.

Структурированные данные

Буферы данных и Объектная нотация JavaScript (JavaScript Object Notation).

Объекты управляющих абстракций

Рефлексия

Интернационализация

Дополнения к ядру ECMAScript, отвечающие за функциональность, чувствительную к языку.

Нестандартные объекты

Прочее

Инструкции

Эта глава описывает все инструкции и объявления JavaScript.

Алфавитный список смотрите в боковой панели слева.

Управление потоком выполнения

Блок
Блок используется для группировки нуля и более инструкций. Блок отделяется парой фигурных скобок.
break
Прерывает текущую инструкцию цикла, ветвления или инструкцию с меткой и передаёт управление на инструкцию, следующую за прерываемой.
continue
Прерывает выполнение инструкции в текущей итерации текущего цикла или цикла с меткой и продолжает выполнение цикла со следующей итерации.
Пустая инструкция
Пустая инструкция используется тогда, когда никакой инструкции быть не должно, а по синтаксису JavaScript она требуется.
if...else
Выполняет инструкцию, если указанное условие является истинным. Если условие ложно, выполняет другую инструкцию.
switch
Вычисляет выражение, сопоставляет вычисленное значение с выражением выбора и выполняет инструкции, ассоциированные с этим выбором.
throw
Выбрасывает пользовательское исключение.
try...catch
Помечает блок инструкций и определяет реакцию на возникновение исключения внутри помеченного блока инструкций.

Объявления

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

Функции

function
Объявляет функцию с указанными параметрами.
function*
Функции-генераторы, упрощающие написание итераторов.
return
Определяет значение, возвращаемое из функции.
yield
Смотрите статьи Что нового в JavaScript 1.7 и Итераторы и генераторы.

Итерации

do...while
Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно false. Условие вычисляется после выполнения инструкции, так что указанная инструкция выполнится хотя бы один раз.
for
Создаёт цикл, состоящий из трёх необязательных выражений, заключённых в круглые скобки и разделённым точками с запятой с последующей инструкцией, выполняющейся в цикле.
for each...in
Проходит указанной переменной по всем значениям свойств объекта. Выполняет инструкции для каждого уникального свойства.
for...in
В случайном порядке проходит по перечислимым свойствам объекта. Выполняет инструкции для каждого уникального свойства.
for...of
Проходит по итерируемым объектам (включающим в себя массивы, массивоподобные объекты и итераторы с генераторами), выполняя пользовательский хук с инструкциями, исполняющимися для значения каждого уникального свойства.
while
Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно true. Условие вычисляется перед выполнением инструкции..

Прочее

debugger
Вызывает любую доступную функциональность отладки. Если функциональность отладки не доступна, эта инструкция ничего не делает.
export
Используется для экспорта подписанным скриптом свойств, функций и объектов в другие подписанные или неподписанные скрипты. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.
import
Используется для импорта скриптом свойств, функций и объектов из подписанного скрипта, который предоставил эту информацию. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.
label
Предоставляет инструкцию с идентификатором, на который вы можете сослаться с помощью инструкций break или continue.
with
Расширяет цепочку областей видимости инструкции.

Выражения и операторы

Эта глава описывает все выражения и операторы JavaScript.

Алфавитный список смотрите в боковой панели слева.

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

Базовые ключевые слова и общие выражения в JavaScript.

this
Ключевое слово this ссылается на контекст выполняемой функции.
function
Ключевое слово function определяет выражение функции.
class
Ключевое слово class определяет выражение класса.
function*
Ключевое слово function* (со звёздочкой) определяет функцию-генератор.
yield
Пауза или продолжение выполнения функции-генератора.
yield*
Делегирует выполнение другому генератору итерируемому объекту.
async function*
async function определяет выражение асинхронной функции.
await
Пауза и продолжение выполнения асинхронной функции и ожидание Promise (результата выполнения) с результатом разрешено/отклонено.
[]
Синтаксис создания инициализатора/литерала массива.
{}
Синтаксис создания инициализатора/литерала объекта
/ab+c/i
Синтаксис создания литерала регулярного выражения.
( )
Оператор группировки.

Левосторонние выражения

Значения слева являются назначением присваивания.

Доступ к свойству
Операторы доступа к членам предоставляют доступ к свойству или методу объекта
(object.property и object['property']).
new
Оператор new создаёт экземпляр объекта с использованием конструктора.
new.target
Свойство new.target ссылается на конструктор или функцию, который был вызван через оператор new.
super
Ключевое слово super вызывает конструктор родительского класса.
...obj
Оператор распространения позволяет развернуть выражение в местах, где ожидается несколько аргументов (при вызове функций) или несколько элементов (при создании литералов массива).

Инкремент и декремент

Операторы постфиксного/префиксного инкремента и декремента.

A++
Оператор постфиксного инкремента.
A--
Оператор постфиксного декремента.
++A
Оператор префиксного инкремента. (Значение переменной, сначала, увеличивается на 1, а затем используется в выражении)
--A
Оператор префиксного декремента.

Унарные операторы

Унарные опарации — это операции с одним операндом.

delete
Оператор delete удаляет свойство из объекта.
void
Оператор void отбрасывает возвращаемое значение выражения.
typeof
Оператор typeof определяет тип переданного объекта.
+
Оператор унарного плюса преобразует свой операнд в тип Number.
-
Оператор унарного минуса преобразует свой операнд в тип Number, а затем меняет его знак.
~
Оператор побитового НЕ.
!
Оператор логического НЕ.

Арифметические операторы

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

+
Оператор сложения.
-
Оператор вычитания.
/
Оператор деления.
*
Оператор умножения.
%
Оператор взятия остатка от деления.
**
Оператор возведения в степень.

Реляционные операторы

Реляционные операторы (операторы отношения) сравнивают свои операнды и возвращают значение типа Boolean, зависящее от того, был ли результат сравнения истинным или ложным.

in
Оператор in определяет, содержит ли объект указанное свойство.
instanceof
Оператор instanceof определяет, является ли объект экземпляром потомком Prototype (или экземпляром) другого объекта.
<
Оператор меньше.
>
Оператор больше.
<=
Оператор меньше или равно.
>=
Оператор больше или равно.

Операторы равенства

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

==
Оператор проверки на равенство.
!=
Оператор проверки на неравенство.
===
Оператор проверки на идентичность.
!==
Оператор проверки на неидентичность.

Операторы побитового сдвига

Операции для сдвига всех битов операнда.

<<
Оператор побитового сдвига влево.
>>
Оператор знакового побитового сдвига вправо.
>>>
Оператор беззнакового побитового сдвига вправо.

Бинарные побитовые операторы

Побитовые операторы трактуют свои операнды как набор из 32 битов (нулей и единиц) и возвращают стандартные числовые значения JavaScript.

&
Оператор побитового И.

Функция в JavaScript

  • Следуйте за нами