Далее на странице...
Здесь мы рассмотрим, что такое функции? Как работают функции в JavaScript и как их можно применять?
А также узнаем, что добавили функциям в новом стандарте JavaScript ES6?
Если говорить простым языком, то функции - это наши действия в коде, своего рода инструкции: внутри функций мы задаем как должен работать код, что он должен делать. При этом мы можем пользоваться различными типами данных и изменять информацию так, как мы укажем.
Кроме это, как и циклы, функции служат для автоматизации и сокращения объема кода: функции программируются на выполнение определенных действий, которые повторяются при каждом вызове функции.
Синтаксис функций
Функции начинаются с ключевого слова function. Таким образом, мы как бы говорим: "Это функция".
Затем следует имя/название функции.
В круглых скобках указываются аргументы функции.
В фигурных скобках выполняются действия/инструкции.
Пример 1.1
function showFirstMessage(){
console.log("Hello world");
}
showFirstMessage(); // Вызов функции
Результат
Hello world
Важно не забывать вызывать функцию. Иначе она не будет работать. Кроме этого важно давать функциям правильные имена.
Существует вне гласное правило: имя функции должно содержать глагол, к которому приписываем то, над чем выполняется действие. В нашем случае это: глагол show (показать) + приписка FirstMessage (первое сообщение).
Имена функций - Анонимные функции
Небольшое отступление: иногда встречаются анонимные функции - без имени. Они вызываются и используются "здесь и сейчас" только один раз.
К анонимной функции (без имени) нельзя обратиться в дальнейшем.
Аргументы функции
Аргументы функции указываются при объявлении функции в круглых скобках.
При вызове функции в качестве аргументов используются какие-либо данные. Затем в фигурных скобках с этими данными выполняются те или иные действия.
Вернемся к примеру 1.1 и изменим его код: добавим к функции аргумент.
Пример 2.1
function showFirstMessage(text){ // text - аргумент функции
console.log(text);
}
// Вызов функции. В качестве аргумента - текст "Hello world"
showFirstMessage("Hello world");
Результат
Hello world
Результат тот же, что и в примере 1.1. В примере 2.1 функция имеет один аргумент. Однако, их число может быть любым.
Пример 2.2
function calc (a,b){ // У функции 2 аргумента
console.log(a + b);
}
// Вызов функции. В качестве аргументов - числа
calc(2,3);
Результат
5
Переменные внутри функции
Как ведут себя переменные внутри функции?
Объявление переменной внутри функции.
Пример 3.1
function showFirstMessage(){
let num = 10; // Локальная переменная
}
// Вызов функции
showFirstMessage();
console.log(num); // Локальная переменная за пределами функции
Результат
'Uncaught ReferenceError: num is not defined'
Переменная объявленная внутри функции (внутри фигурных скобок) недоступна за ее пределами. Об этом упоминалось в статье об отличиях между переменными let, const и var.
Локальные и глобальные переменные
Переменная созданная внутри функции называется локальной. Она существует локально - только внутри функции с ней можно взаимодействовать.
Вернемся к примеру 3.1 и объявим глобальную переменную.
Пример 4.1
let num = 20; // Объявление глобальной переменной
function showFirstMessage(){
num = 10; // Изменение значения глобальной переменной внутри функции
}
showFirstMessage(); // Вызов функции
console.log(num); // Глобальная переменная
Результат
10
В примере глобальная переменная меняет свое значение внутри функции. Это происходит и это можно увидеть только после вызова функции.
Продолжим работать с примером 4.1. И объявим одноименные переменные вне и внутри функции.
Пример 4.2
let num = 20; // Объявление глобальной переменной
function showFirstMessage(){
let num = 10; // Объявление локальной переменной
}
// Вызов функции
showFirstMessage();
console.log(num); // Вывод глобальной переменной
Результат
20
При выводе переменной num в консоль - мы видим ее значение, как глобальной переменной, когда она была объявлена вне функции.
Переменная num, объявленная внутри функции - локальная, и это уже другая переменная.
Замыкание функции
Продолжим работать с примером 4.2.
Пример 4.3
let num = 20; // Объявление глобальной переменной
function showFirstMessage(){
let num = 10; // Объявление локальной переменной
console.log(num); // Вывод локальной переменной
}
// Вызов функции
showFirstMessage();
console.log(num); // Вывод глобальной переменной
Результат
10
20
Что мы имеем? Объявлены две одноименные переменные: одна глобально - за пределами, другая локально - внутри функции.
Как работает функция? Так как внутри функции существует команда console.log(num);, то сначала функция ищет переменную num внутри себя. В данном случае функция ее находит и выводит значение переменной в консоль.
Если убрать объявление локальной переменной num внутри функции, то....
Пример 4.3
let num = 20; // Объявление глобальной переменной
function showFirstMessage(){
console.log(num); // Вывод глобальной переменной
}
// Вызов функции
showFirstMessage();
console.log(num); // Вывод глобальной переменной
Результат
20
20
... функция начнет искать переменную num за своими пределами: на уровень выше.
В данном случае функция находит переменную num, объявленную выше - глобально и выводит ее значение в консоль.
Следует запомнить: при вызове функции она в первую очередь начинает работать со значениями и переменными внутри себя.
Если каких-либо нужных данных она не находит, то при их поиске, функция постоянно идет на уровень выше. До самого высшего и доступного ей уровня. И если говорить по-простому, то...
Замыкание функции - это сама функция со всеми внешними переменными, которые ей доступны.
return - Функция возвращает значение
Что еще могут функции в JavaScript?
Функция может вернуть нам какое-либо значение при помощи ключевого слова return.
Кроме этого, как только функции видит return - она прекращает свое действие (дальнейшую работу с кодом).
Пример 5.1
function calc (a,b){
return (a + b);
}
console.log(calc(2,3));
console.log(calc(4,7));
console.log(calc(8,15));
Результат
5
11
23
Функция calc возвращает сумму двух аргументов. Эту функцию можно использовать любое число раз. Таким образом функции позволяют автоматизировать выполнение многих задач.
После ключевого слова return код выполняться не будет. Такой код называет unreachable code - недостижимый/недоступный код.
Пример 5.2
function calc (a,b){
console.log("before return");
return (a + b);
console.log("after return - unreachable code"); // код не выполняется
}
console.log(calc(2,3));
Результат
5
Итак, ключевое слово return прерывает выполнение кода внутри функции.
Но вернемся к тому, что return в первую очередь возвращает из функции какое-либо значение.
return - Пример
function ret(){
let num = 50;
/*
.
.... Любой код/вычисления .....
.
*/
return num;
}
// В переменную anotherNum помещается результат работы функции ret()
const anotherNum = ret();
console.log(anotherNum); // Вывод переменной anotherNum
Результат
50
Внутри функции объявляется переменная. Затем функция возвращает значение переменной. Результат работы функции заносится в произвольную переменную.
Классификация функций - FUNCTION DECLARATION
Рассмотрим, какие функции бывают в JavaScript.
Объявление функции function declaration - это 1-ый класс/вид функций он был рассмотрен выше.
Особенность функции, объявленной классическим способом: функция существует и работает еще до того, как она была объявлена.
Что это значит и как это работает - рассмотрим далее (аналогично ведут себя переменные объявленные при помощи ключевого слова var, только в случае с функцией это не является ошибкой).
Вернемся к примеру 5.1, но немного изменим его код.
Пример 6.1
console.log(calc(2,3));
console.log(calc(4,7));
console.log(calc(8,15));
function calc (a,b){
return (a + b);
}
Результат
5
11
23
В этом примере (в отличие от 5.1) функция сначала вызывается, затем объявляется. И этот код работает. И в этом нет ошибки.
На практике, эта особенность функций может применяться следующим образом: все функции, объявленные классическим способом, размещаются внизу/в конце кода. И потом используются в коде там, где это необходимо.
FUNCTION EXPRESSION
Function Expression - Функциональное выражение - это еще один подход при работе с функциями.
Функциональные выражения в JavaScript имеют следующий синтаксис (отличный от классического объявления функций).
1. Создается переменная.
2. В переменную помещается функция с использованием ключевого слова function.
3. Аргументы функции и инструкции для нее задаются также, как и в классическом варианте: в круглых и фигурных скобках соответственно.
Пример 7.1
const logger = function(){
console.log('Hello');
};
logger(); // Вызов функции
Результат
Hello
Стоит обратить внимание: после функционального выражения Function Expression ставиться точка с запятой (при объявлении функции классическим способом function declaration точка с запятой не требуется).
Вызов функции Function Expression (функционального выражения) происходит также, как и функции, объявленной классическим способом.
Особенность функциональных выражений Function Expression: функцию, созданную как функциональное выражение, можно вызвать только после ее объявления.
И это главное отличие Function Expression от функций Function Declaration: при создании функционального выражения сначала создается переменная (в которую затем помещается функция), поэтому обращение к такой функции происходит также в обычной последовательности, как к обычной переменной, то есть по порядку (сверху вниз).
Стрелочные функции - Стандарт ES6
Начиная со стандарта ES6 в JavaScript была добавлена стрелочная функция.
Синтаксис стрелочной функции:
1) Сначала создается переменная.
2) В круглых скобках указываются аргументы функции - без использования ключевого слова function.
3) Затем следует знак =>, после которого указывается выполняемое действие/инструкции.
let calc = (a,b) => a + b;
// Аналогичная запись
calc = (a,b) => {return a + b;};
// Или так...
calc = (a,b) => {
return a + b;
};
Первая форма записи стрелочной функции (без фигурных скобок) используется, если код умещается в одну строку.
Если стрелочная функция имеет один аргумент, то круглые скобки для него не обязательны.
const double = (a) => {
return a*2;
}
// Аналогичная запись
const double = a => a*2;
Стрелочная функция позволяет сократить код, но такая функция не имеет своего контекста вызова, поэтому стрелочные функции чаще всего можно встретить в обработчиках событий, но эта тема будет рассмотрена немного позже.
