Найти в Дзене
Илья Дмитриев

JavaScript Урок №7 (функции и область видимости)

Функции Функции позволяют нам сократить написание кода, где необходимо повторять один и тот же код. Функции являются основными «строительными блоками» программы. —Примеры встроенных функций вы уже видели – это: Но можно создавать и свои. В конце статьи размещено видео для тех кто любит смотреть и слушать. Объявление функции Пример объявления функции: Вначале идёт ключевое слово function, после него имя функции, затем список параметров в круглых скобках через запятую (в вышеприведённом примере он пустой) и, внутри фигурных скобок, код функции, также называемый «телом функции». Пример: Чтобы вызвать функцию необходимо далее написать: sayHi() Что бы еще раз вызвать необходимо еще раз написать: sayHi() Повторный вызов функции дает понять основное преимущество избавления дублирования кода. Если потребуется поменять способ вывода сообщения с document.write() на alert(), то достаточно поменять в одном месте. Подробнее о параметрах В наших примерах мы вызывали функцию sayHi() без параметров.
Оглавление

Функции

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

Функции являются основными «строительными блоками» программы.

—Примеры встроенных функций вы уже видели – это:

  • —alert(message);
  • —prompt(message, default);
  • —confirm(question);

Но можно создавать и свои.

В конце статьи размещено видео для тех кто любит смотреть и слушать.

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

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

-2

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

Пример:

-3

Чтобы вызвать функцию необходимо далее написать:

sayHi()

Что бы еще раз вызвать необходимо еще раз написать:

sayHi()

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

Если потребуется поменять способ вывода сообщения с document.write() на alert(), то достаточно поменять в одном месте.

Подробнее о параметрах

В наших примерах мы вызывали функцию sayHi() без параметров.

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

-4

Инструкция return

Чаще всего функция должна не выводить что-то через alert или document.write() на экран, а возвращать.

Возвращает функция с помощью инструкции return.

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

Модернизируем наш пример так, чтобы функция принимала имя человека, а выводила строку 'Привет, %имя_человека_переданное_функции%;

-5

Теперь вызовем нашу функцию и запишем значение в переменную message:

-6

Можно поздороваться с группой человек:

-7

Попробуйте повторить самостоятельно, сначала с помощью конспекта, потом по памяти.

Функция. Возвращение значения

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

-8

console.log(func()) - выведет"Hello, world!";

Если из функции убрать return выведет undefined

Вызов или обращение к функции

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

Когда указываются скобки() это вызов функции.

После вызова выполняется функция которая возвращает значение.

Без круглых скобок вы просто обращаетесь к функции без вызова.

func() // это вызов функции;

func // это обращение к функции;

Что дает нам обращение к функции:

1. Можно присвоить функцию переменной, что позволит вызвать функцию под другим именем:

const f = func;

console.log(f()) // выведет Hello world!

2. Присвоить функцию свойству объекта:

const obj = {};

obj.f = func;

console.log(obj.f());

3. Добавить функцию в массив:

const arr = [1, 2, 3, 5];

arr[1]= func;

console.log (arr[1]()) // выведет Hello, world!

Эти примеры проясняют значение круглых скобок. Если javaScriptвстречает круглые скобки то это функция и ее надо вызвать. А функция в свое время возвращает значение.

Область видимости

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

Один из ярких примеров это область видимости аргументов функции. Аргументы функции существуют только в теле функции:

-9

console.log(f(5)); // выведет 8

console.log(x) // выведет ReferenceError: x is not defined

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

  • —let
  • —var
  • —const

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

Определение – это объявление и присвоение значения переменной.

В javaScript эти два типа являются синонимами. Поскольку всем переменным присваивается значения при их объявлении. В противном случае переменным присваивается значение undefined

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

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

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

Когда нечто прекращает существовать javaScript не обязательно освобождает память, просто помечается как не используемая. Освобождается только тогда когда запускается процесс сборки мусора(garbage collection).

Лексическая (динамическая) область видимости.

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

-10

Нельзя путать с моментом вызова функции, так как функции могут вызываться не последовательно.

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

-11

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

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

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

Все что объявлено в глобальной области видимости называется глобальными переменными.

Пример глобальной области видимости:

-12

Но есть проблема. Глобальные переменные очень зависят от того что происходит с этими переменными в функциях. Допустим в функции происходит перезапись переменной. Тогда и глобальные переменные будут иметь другой вид.

-13

В итоге вызова функции наш Иван 25 лет поменялся на Елену 86 лет. Поэтому важно не завесить от глобальной области видимости.

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

Все что находится внутри { … } находится в области видимости блока.

Пример:

-14

console.log(x);//выведет ReferenceError: x is not defined

Переменную не видно вне блока, если в переменная создана с помощью let.

Замените let на var и проверьте результат.

Ситуация когда есть вложенные блоки.

-15

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

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

До введения в ES6 ключевого слова let переменные объявлялись ключевым словом var и имели всю область видимости функции. Глобальные переменные объявленные var вне функции имеют тоже самое поведение в функции.

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

Пример

-16

К переменным var можно обращаться прежде че они будут объявлены

Суть в том что к переменным объявленным с помощью var применяется механизм подьема(hoisting). JavaScriptсначала просматривает всю область видимости и поднимает к ее вершине все переменные, объявленные с помощью var. Поднимаются только объявления а не присвоения.

Еще один нюанс механизма подъёма это то что javaScript не обращает внимание на повторное объявление переменных с одним именем var во вложенных блоках { {..} } как было с let.Браузер будет показывать одну и туже переменную.

Из-за такой проблемы и создали ключевое слово let

Подъем функций

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

-17

Функции присвоенные переменным не поднимаются. Они подчиняются правилам областей видимости о которых говорили ранее.

Видео для тех кто любит смотреть и слушать

Задачи
  1. Дан массив с элементами 3, 6, 8, 14, 0, 7. Используя for и if выведите на экран элементы массива, которые больше 4, но меньше 9.
  2. Дан массив с элементами [3, 6, 8, 14, 0, 7]. Используя for найдите сумму элементов массива. Запишите ее в переменную result.
  3. Дан массив с положительными и отрицательными числами. Найдите сумму положительных элементов массива.