Имя функции позволяющей вывести сообщение например результат вычисления

Обновлено: 05.07.2024

На уроке будут рассмотрены Javascript функции, как пользовательские, так и встроенные; способы создания и вызов функций; локальные и глобальные переменные в функции, а также рекурсивный вызов функции в javascript

Встроенные Javascript функции

В javascript достаточно много функций, встроенных в синтаксис языка. Рассмотрим одну из них.

eval(строка)

Функция eval(строка) вычисляет выражение в указанной строке (в качестве параметра); выражение должно быть составлено по правилам языка JavaScript и не содержать тегов HTML:

Рассмотрим пример использования функции eval:

let y = 5; // значение у равно 5 let x = "if (y==5) y*2-3"; // значение х равно строке символов let rezult = eval(x); // rezult равно 7

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

Пользовательские Javascript функции

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

Функция в роли процедуры. Если функция выполняет какие-либо действия и не возвращает значение:

Синтаксис объявления (создания) функции:

Другой вариант создания функции — Function Expression (Функциональное Выражение):

Вызов функции:

В javascript вызов функции в роли процедуры происходит следующим образом:

имя_функции (аргументы); // с аргументами имя_функции (); // без аргументов

Вызов функции:

В javaScript вызов функции, возвращающей значение, происходит, например, следующим образом:

let a = имя_функции (аргументы); alert(a); // 1-й способ let b = a + a; // 2-й способ

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

Как видно из примера, после return функция действительно завершает свою работу. Поэтому оператор alert("2") выполняться уже не будет.

let a=sayHello(); alert(a);

Вызов функции происходит через присваивание. Вызов в данном примере можно также организовать так: alert(sayHello()); , но это не рекомендуемый вариант.

Важно: Таким образом, директива return указывает на возвращаемое значение функции, которое будет передано переменной при следующей форме вызова:

Примерный фрагмент кода для одного из способов:

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

Javascript функции с параметрами (аргументами) и возврат значений

Рассмотрим подробнее использование инструкции return в функции javascript на двух примерах. Кроме того, рассмотрим использование в Javascript функции с параметрами (аргументами).

Объявите функцию sayHello. В скобках аргументов функции укажите аргумент с именем userName:

sayHello

userName

. let a = sayHello("Вася"); alert(a);

Важно: Обратите внимание на разницу между вызовом функции без директивы return и с директивой: в первом случае функция вызывается как оператор, возвращая значение undefined ; во втором случаем функция вызывается через присваивание, либо участвуя в выражениях (см. ниже)

У функций могут быть необязательные аргументы:

function f(x, y = 3) < return x + y; >f(2); // 5

Все способы создания пользовательских функций

//обязательным является только последний аргумент – тело функции let a1 = new Function('x', 'y', 'return x + y');

let a1 = new Function('return "hello"');

Вызов функций во всех случаях будет:

let a = a1(3, 4); alert(a); // вывод значения на экран

Использование выражений с функциями

Обычное использование javascript функции:

Функция как составная часть выражения:

Во второй функции ( add() ) используется выражение, ссылающееся на первую функцию ( sum() , в 11-й строке).

Задание js4_6. Создать функцию, возвращающую наибольшее из трех чисел. Аргументами функции являются сами числа.

function findMax(a,b,c) < . return . >let max = . .

(только для функций, которые возвращают результат):

Рассмотрим примеры для функции:

function plRectangle(width, height)

Варианты выражений:

⇒ Вызов функции как часть выражения:

S3 = 0.5 * plRectangle(a, b);

⇒ Вызов функции в логических выражениях:

if (plRectangle(a, b) > plRectangle(c, d)) alert("Первый прямоугольник больше второго");

⇒ Вызов javascript функции в качестве параметра другой функции:

let х = "25рх"; let у = 12; let S = plRectangle(parselnt(x), у);

Задание js4_7. Используйте функцию для модернизации примера с окончанием слова про количество ворон. Откройте файл с выполненным заданием про ворон. Необходимо вызывать функцию с параметром – количество ворон.

Что такое аргументы функции и где они указываются?
Может ли на месте аргумента функции находиться вызов другой функции?

Область видимости переменных. Javascript глобальные и локальные переменные в функции

Область видимости переменной — область кода, в котором переменная доступна для использования.

let a = 1; function . .

for (let i=1;i — явно объявляются в теле javascript функции;

Задание js4_9. Дополните код согласно заданию:
Создать 2 переменные глобальной и локальной области видимости (то есть внутри функции func ) с именами: global , local .
Переменной global присвоить текст “Привет, ”, а local — “Мир”. Используя переменные, выведите их значения дважды: в основной программе и в теле функции.

function func() < >func();

Область видимости переменных

Рассмотрим конкретные примеры области видимости переменных в javascript при использовании глобальных и локальных переменных.

let S = 2; // Глобальная переменная S function plRectangle(width, height) < let S = width * height; return S // Локальная переменная S >z = plRectangle(2, 3); alert(z); alert(S);

Пример: Значение z равно 6, а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе

function plRectangle(width, height) < let s = width * height; // аргументы всегда локальны width = width + 10; return s >width = 2; height = 3; z = plRectangle(width, height); alert(z); alert(width);

function Plrectangle(width, height) < S = width * height; //глобальная переменная return S >z = Plrectangle(2, 3); S=2; // изменяем глобальную переменную alert(z); alert (S);

Пример: Значение z равно 6, а значение S равно 2, то есть значению измененной глобальной переменной, определенной во внешней программе

function plRectangle(width, height) < let S = width * height; let x = 17; return S >z = plRectangle(2,3); alert(z); alert(x); // не определена во внешней программе alert (S); // не определена во внешней программе

Пример: Значение z равно 6; переменная S во внешней программе не определена; переменная х во внешней программе не определена

Какова разница между локальными и глобальными переменными?
Зачем в программировании существует необходимость деления переменных на локальные и глобальные?

Рекурсивная функция javascript

Важно: В информатике и программировании, а, соответственно, и в javascript, рекурсия — это вызов функции из самой же функции, т.е. функция в функции

Бывают также косвенная или сложная рекурсия, когда функция вызывается не непосредственно из самой себя, а из вложенной в нее функции: например, функция A вызывает функцию B , а функция B — функцию A . Количество вложенных вызовов функции или процедуры называется глубиной рекурсии.

начальное условие (известное значение для переменной, отправной момент рекурсии);
рекурсивное правило;
условие окончания рекурсии.

Рекурсия javascript рассмотрена ниже на примере возведения числа в степень.
Для начала рассмотрим итерационный вариант возведения в степень, т.е. с использованием цикла:

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

let chislo,stepen; function degree(chislo,stepen) < for(let result = 1; stepen >0; stepen--) < result *= chislo; >return result; > document.write(degree(2,4)); // выводит 16

Пример: Выполнить возведение числа в степень через рекурсию. Оба значения запрашивать у пользователя. Выдавать результат в виде:

Объявите глобальные переменные для числа и степени и запросите их:

let chislo,stepen; chislo = parseInt(prompt('число: ')); stepen = parseInt(prompt('степень: '));

function degree(chislo,stepen) < if(stepen) < … >return 1; // если степень равна нулю то возвращаем 1 >

document.write(chislo,' в степени ', stepen, ' = ', degree(chislo,stepen));

function f(counter) < counter--; document.write(counter + "
"); if (counter != 0) f(counter); document.write(counter + "
"); > f(2);

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

let m = 2; x = factorial(m); document.write(x); function factorial(n)< if(n

Что такое рекурсия?
Назовите основные условия организации рекурсии, как вы их понимаете?

Стрелочные функции или лямбда выражения в javascript

Пример стрелочной функции с одним аргументом:

let f = x => x + 1; alert(f(5))

Расшифровываем так:
функция f равна значению x, такое, что x = x + 1.
То есть в результате в окно выведется 6.

Пример стрелочной функции с двумя аргументами:

let g = (x, y) => x + y; alert(g(5,3))

Пример: Написать стрелочную функцию для вычисления факториала числа. Функция должна быть рекурсивной.

Назовем функцию factorial.
Определим рекурсивные правила:
Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:

let factorial = n => (n > 0) ? n * factorial(n-1) : 1;

Пример: Написать стрелочную функцию для вычисления первых n чисел ряда Фибоначчи. Функция должна быть рекурсивной.

Назовем функцию fib.
Определим рекурсивные правила:
Теперь данные правила опишем в самой рекурсивной функции в скрипте. Для написания функции будем использовать тернарный оператор:

let fib = n => (n > 2) ? fib(n-1) + fib(n-2) : 1;

Задание js4_14:
Используя стрелочную функцию, создайте последовательность 1 3 9 27 81 243 729 2187 6561 19683

Какие функции называются стрелочными функциями?
Есть ли разница между стрелочными функциями и лямбда выражениями в javascript?
Каков синтаксис стрелочных функций?

Рубрики:

В вашем задание ответ неправильный. Ответ будет 6 и 6. Попробуйте сами запустить этот код function Plrectangle(width, height) S = width * height;
return S
>
S=2;
z = Plrectangle(2, 3);
alert(z);
alert (S);
Пример: Значение z равно 6, а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе

admin

Да нет, всё верно

Dmitriy

Всё же не верно. S — глобальная переменная, и в теле функции S изменяется. Результат 6 и 6. Чтобы было верно, надо в в функции поставить var S=…

10. Функции ввода и вывода данных.

Функция ввода данных InputBox () . Эта функция позволяет вводить данные с помощью диалогового окна ввода. Аргументами этой функции являются две строки, а значением функции — строка, введенная пользователем в текстовое поле.

Например, можно с помощью функции InputBox () запросить имя и фамилию и присвоить это значение строковой переменной Family :

Если пользователь введет имя и фамилию в текстовое поле и щелкнет по кнопке ОК, то значением функции станет строка, введенная пользователем в текстовом поле. Если пользователь щелкнет по кнопке Cancel , то значением функции станет пустая строка " ".

Рис. 2.15. Диалоговое окно ввода функции InputBox ()

ЧисКод1+ЧисКод2 определяет внешний вид окна, а строка "Заголовок" выводится в строку заголовка окна. Последние два аргумента не являются обязательными.

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

Например, для функции

Зачастую нам надо повторять одно и то же действие во многих частях программы.

Примеры встроенных функций вы уже видели – это alert(message) , prompt(message, default) и confirm(question) . Но можно создавать и свои.

Объявление функции

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

Пример объявления функции:

Наша новая функция может быть вызвана по её имени: showMessage() .

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

Локальные переменные

Переменные, объявленные внутри функции, видны только внутри этой функции.

Внешние переменные

У функции есть доступ к внешним переменным, например:

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

Внешняя переменная используется, только если внутри функции нет такой локальной.

Если одноимённая переменная объявляется внутри функции, тогда она перекрывает внешнюю. Например, в коде ниже функция использует локальную переменную userName . Внешняя будет проигнорирована:

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

Глобальные переменные видимы для любой функции (если только их не перекрывают одноимённые локальные переменные).

Параметры

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

В нижеприведённом примере функции передаются два параметра: from и text .

Когда функция вызывается в строках (*) и (**) , переданные значения копируются в локальные переменные from и text . Затем они используются в теле функции.

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

Параметры по умолчанию

Если параметр не указан, то его значением становится undefined .

Например, вышеупомянутая функция showMessage(from, text) может быть вызвана с одним аргументом:

Это не приведёт к ошибке. Такой вызов выведет "*Аня*: undefined" . В вызове не указан параметр text , поэтому предполагается, что text === undefined .

Если мы хотим задать параметру text значение по умолчанию, мы должны указать его после = :

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

В данном случае "текст не добавлен" это строка, но на её месте могло бы быть и более сложное выражение, которое бы вычислялось и присваивалось при отсутствии параметра. Например:

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

В примере выше anotherFunction() будет вызываться каждый раз, когда showMessage() вызывается без параметра text .

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

Например, явная проверка на undefined :

…Или с помощью оператора || :

Возврат значения

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

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

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

Вызовов return может быть несколько, например:

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

В коде выше, если checkAge(age) вернёт false , showMovie не выполнит alert .

Если функция не возвращает значения, это всё равно, как если бы она возвращала undefined :

Пустой return аналогичен return undefined :

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

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

Таким образом, это фактически стало пустым return .

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

И тогда всё сработает, как задумано.

Выбор имени функции

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

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

Например, функции, начинающиеся с "show" обычно что-то показывают.

Функции, начинающиеся с…

"get…" – возвращают значение,
"calc…" – что-то вычисляют,
"create…" – что-то создают,
"check…" – что-то проверяют и возвращают логическое значение, и т.д.

Примеры таких имён:

Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код, и какое значение она может возвращать.

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

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

Несколько примеров, которые нарушают это правило:

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

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

Например, во фреймворке jQuery есть функция с именем $ . В библиотеке Lodash основная функция представлена именем _ .

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

Функции == Комментарии

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

Небольшие функции не только облегчают тестирование и отладку – само существование таких функций выполняет роль хороших комментариев!

Например, сравним ниже две функции showPrimes(n) . Каждая из них выводит простое число до n .

Первый вариант использует метку nextPrime :

Второй вариант использует дополнительную функцию isPrime(n) для проверки на простое:

Второй вариант легче для понимания, не правда ли? Вместо куска кода мы видим название действия ( isPrime ). Иногда разработчики называют такой код самодокументируемым.

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

Итого

Объявление функции имеет вид:

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

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

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

Имя функции должно понятно и чётко отражать, что она делает. Увидев её вызов в коде, вы должны тут же понимать, что она делает, и что возвращает.
Функция – это действие, поэтому её имя обычно является глаголом.
Есть много общепринятых префиксов, таких как: create… , show… , get… , check… и т.д. Пользуйтесь ими как подсказками, поясняющими, что делает функция.

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

Задачи

Обязателен ли "else"?

Следующая функция возвращает true , если параметр age больше 18 .

В ином случае она запрашивает подтверждение через confirm и возвращает его результат:

Будет ли эта функция работать как-то иначе, если убрать else ?

Есть ли хоть одно отличие в поведении этого варианта?

Оба варианта функций работают одинаково, отличий нет.

Перепишите функцию, используя оператор '?' или '||'

Следующая функция возвращает true , если параметр age больше 18 .

В ином случае она задаёт вопрос confirm и возвращает его результат.

Перепишите функцию, чтобы она делала то же самое, но без if , в одну строку.

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

Функции в JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все функции возвращают некое значение. Если команда возврата явно не задана — функция возвратит undefined .

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

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

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

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

Функции можно объявлять внутри других функций.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Замыкания

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

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

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

Значение, возвращаемое этой функцией нас пока не интересует, текст выводится в консоль с помощью IIFE, что в данном случае особой роли не играет, однако, это поможет нам увидеть связь между этой функцией и её вариантом, в котором, вместо вызова функции, которая выводит текст в консоль, мы эту функцию из переписанной функции bark() возвратим.

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

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

Этот код выведет следующее.

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

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

Итоги

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

Читайте также: