В этой части учебника мы посмотрим на функции языка программирования JavaScript, как с ними работать.
Для чего нужны функции:
Перед тем как начнём разбирать работу с функциями, нужно объяснить для чего они нужны, если кратко говоря, то для прошение кода.
Их смысл в том, что вы можете написать один раз функции и вставлять её везде, где это нужно, а не повторять код постоянно.
Создание функции:
Теперь посмотрим как объявить функцию в JavaScript, для этого нужно использовать ключевое слово function, вот пример.
1 2 3 4 5 6 7 | // Объявление (создание) функции с названием helloWorld function helloWorld () { console.log('Hello World'); } // Вызов (запуск) функции helloWorld helloWorld(); |
То есть тут, в начале после слова function, мы пишем название функции, круглые скобки, а потом фигурные, в них уже пишем код, дальше для того чтобы её объявить, то просто пишем называние, с круглыми функциями, вот что получилось.
Как видите всё работает, также нужно сказать, что в JS, название не зависит от регистра, то есть, вы можете при объявление написать всё заглавными буквам, к примеру.
Ещё вы можете её вызывать по несколько раз, в своём коде, так как, они были специально для этого сделаны.
Параметры функции в JS:
Также для гибкости, вы можете использовать параметры, вот не большой пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Объявление функции с названием num_top function numTop (a, b) { if (a > b) { console.log('a > b, a = ' + a); } else if (a < b) { console.log('a < b, b = ' + b); } else { console.log('a = b, b и a = ' + a); } } // Объявление функции numTop(2, 8); numTop(10, 7); numTop(6, 6); |
В этом коде мы выводим число которое больше, вот результат.
Ещё в JS есть возможность делать параметры по умолчанию, для этого при создание функции, нужно параметру присвоить какой нибудь значение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Объявление функции с названием num_top function numTop (a = 0, b = 0) { if (a > b) { console.log('a > b, a = ' + a); } else if (a < b) { console.log('a < b, b = ' + b); } else { console.log('a = b, b и a = ' + a); } } numTop(2, 8); numTop(10); numTop(-6); |
Вот результат.
Всё работает так как надо.
Возврат значения в функции:
Последние что стоит знать про функции, это то, что они способны возвращать значение, для этого используете ключевое слово return
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Объявление функции с названием numTop function numTop (a, b) { if (a >= b) { // Возвращает a, если a больше или равно b return a; } else { // Иначе возвращает $b return b; } } // Вызов несколько раз функции numTop с разными параметрами let a = numTop(3, 1); // Переменная a равна 3 let b = numTop(5, 10); // Переменная a равна 10 // выводим в консоль, чему равны переменные console.log('a = ' + a + ', b = ' + b); |
Вот результат.
Тут мы просто присваиваем переменным возвращаемое значение функцией numTop, которую мы создали и выводим их значения на экран.
Стрелочные функции:
Последние что мы разберём, это стрелочные функции, этот тип функций появился ещё в стандарте языка ES6, для начала покажу вам несколько примеров:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const fun1 = () => { return "Стрелочная функция"; } const fun2 = name => { return "Меня зовут " + name; } const fun3 = (surname) => { return "Моя фамилия " + surname; } const fun4 = (a, b) => { return a + b; } |
Первое что вы можете заметить, не cчитая другого синтаксиса, это то, что мы присваиваем функцию переменной.
В остальном разница между стрелочной функцией и обычной в js, всего две, первое, это то что в отличии от обычных функций, где можно создать её и потом вызвать до объявления, второе, это другая работа с this
, но об этом в другой части учебника.
Вывод:
В этой части учебника мы рассмотрели функции языка программирования JavaScript, что это такое и как с ними работать.