Share This
Связаться со мной
Крути в низ
Categories
//Как работают функции в JavaScript

Как работают функции в JavaScript

Знакомимся с фундаментальным строительным блоком любого приложения на JavaScript — функцией.

kak rabotajut funkcii v javascript 50c9972 - Как работают функции в JavaScript

Что такое функция

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

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

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

Как объявить функцию

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

Синтаксис такой:

Синтаксис функции на JavaScript

         function имя(параметры) {   тело функции (любые команды) };     

Например, функция, которая вызывает предупреждение:

Код функции с предупреждением

         function showMessage() {   alert( 'Предупреждение!' ); };      

kak rabotajut funkcii v javascript 2e399eb - Как работают функции в JavaScript

Схема строения функции

Как вызвать функцию

Функцию вызывают по имени. Например, чтобы вызывать функцию из нашего примера, нужно после функции написать showAlert();

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу

Параметры и аргументы

Аргументы

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

Например:

Пример использования параметров и аргументов

         function showMessage(from, text) { // параметра: from, text   alert(from + ', ' + text); };  showMessage('Привет', 'мне нравится proglib'); // Привет, Мне нравится proglib      

В примере мы используем два параметра: from и text. Затем в теле функции соединяем from + ', ' + text. А снаружи функции присваиваем им аргументы и выводим на экран.

Передачи одной функции в другую

В функцию можно передать значение другой функции. Например:

Примеры передачи одной функции в другую

         function getDomNodesBySelector(selector) {   return Array.from(document.querySelectorAll(selector)); }; document.querySelector('.total__button').addEventListener('click', applyDiscount); let numDiscount = 15; function applyDiscount() {       let items = getDomNodesBySelector('.price-value');       items.forEach(function(item){             item.innerText = item.innerText - (item.innerText*numDiscount/100);       }); };      

В примере задано две функции:

  1. getDomNodesBySelector — преобразует найденные селекторы на веб странице в массив.
  2. applyDiscount — считает какую-то величину и берет данные для этого из функции getDomNodesBySelector.

Колбэки

Строки кода в языке JavaScript выполняются по очереди. Например:

Пример функций, которые выполняются по порядку

         function one(){   console.log('один'); } function two(){   console.log('два'); } one();//один two();//два      

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

Например:

Пример функций, которые выполняются не по порядку

         function one(){ setTimeout( function(){     console.log(1);   }, 500 );    console.log('один'); }// функция выполнится через 500 миллисекунд  function two(){   console.log('два'); } first();//два second();//один      

Вызов функции с отсрочкой называется колбэк (callback).

Колбэк передают в виде параметра. Например:

Пример колбэка

         function myHomework(subject, callback) {   alert(`Starting my ${subject} homework.`);   callback(); } function myHomeworkFinished(){   alert('Finished my homework'); } myHomework('math', myHomeworkFinished);      

Функция myHomework имеет два параметра subject и callback.

Затем мы вызываем параметр subject, а параметр callback вызовем функцией myHomeworkFinished.

Когда код выполнится, появятся два предупреждения: Starting my math homework и Finished my homework.

kak rabotajut funkcii v javascript 01b578a - Как работают функции в JavaScript

Порядок вызова функций и колбэков

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

Локальные переменные видны только внутри тела функции. За пределами функции эти переменные уже не работают.

Например:

Пример кода  с локальной переменной

         function showMessage() {   let message = "Я локальная переменная"; // локальная переменная    alert( message ); }  showMessage(); // Я локальная переменная  alert( message ); // <-- будет ошибка, так как переменная видна только внутри функции      

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

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

Во втором случае — получаем ошибку, потому что переменную видно только внутри функции.

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

Давайте возьмем пример выше. Оставим внутри функции значение переменной message. А за пределами функции заведем другую переменную и назовем ее message.

Пример кода с локальной и внешней переменной

         function showMessage() {   let message = "Я локальная переменная"; // локальная переменная    alert( message ); } let message = "Я внешняя переменная" showMessage(); // Я локальная переменная alert( message ); //Я внешняя переменная      

В коде у нас две переменные с одинаковым именем. Но наш сценарий будет считать их разными переменными.

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

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

Когда мы указали параметр и не присвоили ему аргумент, то его значение будет undefined.

Например:

Пример кода с параметром по умолчанию

         function showMessage(from, text) { // параметра: from, text   alert(from + ', ' + text); }  showMessage('Привет', ); // Привет, undefined      

В примере параметру text мы не передали значение аргумента. Поэтому в результате мы видим аргумент параметра from и undefined.

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

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

Пример возврата значения функции с помощью директивы return

         function sum(a, b) {   return a + b; }  let result = sum(1, 2); alert( result ); // 3      

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

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

Функция, которая возвращает функцию

Функцию из предыдущего примера можно записать так:

Пример функции, которая возвращает функцию

         const generateSumFinder = () => {   const sum = (a, b) => a + b;      return sum;                       };  const sum = generateSumFinder();    sum(1, 5);       

Что мы сделали:

  1. Создали переменную generateSumFinder и присвоили ей значение стрелочной функции. Когда мы видим значок =>, перед нами стрелочная функция.
  2. Внутри функции создали переменную sum. Это локальная переменная и видна только внутри функции и присвоили ей значение стрелочной функции, которая складывает аргументы a и b.
  3. Вернули переменную sum.
  4. За пределами функции создали переменную sum. Это внешняя переменная и она не зависит от переменной внутри функции. Этой переменной мы присвоили значение функции generateSumFinder.

Рекурсия

В рекурсии функция вызывает саму себя. Рекурсия достигается за счет конструкции if…else. Чтобы применить рекурсию нужно определить базовый и рекурсивный случай. Функция будет вызывать саму себя, пока результат не приведет к базовому случаю. В других случаях будет выполняться рекурсивный случай.

Например:

Пример рекурсии

         function countdown (i){              if (i <=1){                  return i;              } else {                  return i-1              };          };           alert (countdown(1));      

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

Перегрузка функций в JavaScript

У перегруженных функций одинаковые имена, но разные параметры. JavaScript не поддерживает перегрузку.

Например:

Пример функции без перегрузки 

         function overload(a){     console.log(«Параметр») }  function overload(a,b){     console.log(«Два параметра») } overload(1);      // Два параметра overload(1,2);    // Два параметра      

Несмотря на то, что в первой функции один параметр, вывод аргументов этой функции выведет два параметра. Как вы помните, второй ее параметр будет undefined.

В JavaScript есть способы, как перегрузить функцию. Для этого используют метод arguments.length.

Например:

Пример функции с перегрузкой 

         function overload () {   if (arguments.length === 1) {     console.log(«Параметр»)   }   if (arguments.length === 2) {     console.log(«Два параметра»)   } } overload(1);      // Один параметр overload(1, 2);  // Два параметра      

В примере с помощью метода arguments.length мы узнаем количество параметров в функции и выводим столько параметров, сколько аргументов мы задаем.

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

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

Использовать слова на английском языке

неправильно правильно
pokazatSoobsheniye showMessage

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

неправильно правильно
Message (сообщение) showMessage (показать сообщение)

Комментарии в функции

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

Например:

Пример комментария в функции

         function getDomNodesBySelector(selector) {   return Array.from(document.querySelectorAll(selector)); };// функция возвращает массив, который она возьмет из списка DOM узлов по указанному селектору.       

Замыкания

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

Например:

Пример замыкания функции на внешней переменной

         let name = "Nikolay";  function sayHi() {   alert("Hi, " + name); }  name = "Irina";  sayHi();//Hi, Irina     

В примере функция sayHi() будет оперировать со вторым значением переменной name. Таким образом, функция замыкает свое действие на известной переменной, где бы не задали ее значение.

Приведем еще один пример:

Пример замыкания функции на внутренней переменной

         function makeWorker() {   let name = "Nikolay";    return function() {     alert(name);   }; }  let name = "Irina";  // create a function let work = makeWorker();  // call it work(); //Nikolay      

В примере функция makeWorker() замыкается на внутренней переменной name = "Nikolay". Поэтому при инициализации переменных, следует обращать внимание, какая функция будет ими пользоваться и на какой из них будет замыкаться.

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

Функцию можно задать не только с помощью слова function. Есть способ короче, для этого используют значок =>.

Например:

Пример функции, которая складывает параметры a и b

         let sum = (a, b) => a + b;      

Если параметр в функции один, то скобки можно не писать.

Например:

Пример записи стрелочной функции с одним параметром n

         let double = n => n * 2; alert(double(3))//6      

Если параметров нет, то пишут круглые скобки.

Например:

Пример стрелочной функции без параметров

         let sayHi = () => alert("Hello!");  sayHi();//Hello!      

Лексика this

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

Например:

Пример использования this в стрелочной функции

         let object = {   title: "our object",   students: ["Nikolay", "Irina", "Roma"],    showList() {     this.students.forEach(       student => alert(this.title + ': ' + student)     );   } };  object.showList();      

***

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

  • видимость переменных;
  • параметры и аргументы;
  • стрелочные функции;
  • лексика this;
  • замыкания;
  • рекурсия;
  • колбэки.

Материалы по теме

  • ☕ 40 основных и нестандартных методов для работы со строками в JavaScript
  • ☕ 5+5=? Преобразование значений в строку или число в JavaScript
  • ☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close