Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>14 июл 2025</li>

3 <li>0</li>

4 </ul>Руководство для тех, кто только начинает изучать JavaScript.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Автор статей о программировании. 14 лет в IT. Умеет рассказывать о технологиях простыми словами. Автор спецпроекта Advertising for Social Change.

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

8 Содержание

9 <ul><li><a>Зачем вообще нужны функции</a></li>

10 <li><a>Как устроена функция</a></li>

11 <li><a>Как объявить функцию</a></li>

12 <li><a>Как вызвать функцию</a></li>

13 <li><a>Как передавать данные</a></li>

14 <li><a>Как вернуть результат из функции: оператор return</a></li>

15 <li><a>Области видимости: глобальная и локальная</a></li>

16 <li><a>Объявление функции через function expression</a></li>

17 <li><a>Стрелочные функции (arrow functions)</a></li>

18 <li><a>This: как работает контекст выполнения</a></li>

19 <li><a>Типичные ошибки: как их избежать</a></li>

20 <li><a>Советы и лайфхаки для работы</a></li>

21 </ul>Во многих веб-проектах разработчики выполняют одни и те же действия: проверяют формы, открывают модальные окна, управляют выпадающими меню.

22 Если каждый раз писать один и тот же код, он начинает дублироваться во всём проекте. Когда нужно внести правку, приходится менять все копии. Это долго, и легко ошибиться, а ещё код становится длиннее и сложнее для чтения.

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

24 Такой подход помогает:

25 <ul><li>сократить объём кода - не нужно повторять одни и те же фрагменты,</li>

26 <li>улучшить читаемость - можно называть действия своими именами,</li>

27 <li>упростить сопровождение - правки в одном месте срабатывают везде.</li>

28 </ul>Это особенно важно в JavaScript, где многие интерфейсные действия повторяются десятки раз. Без функций код быстро выходит из-под контроля.

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

30 Пример простой функции:

31 function sayHello() { console.log("Привет!"); } sayHello();Здесь:

32 <ul><li>мы объявили функцию sayHello();</li>

33 <li>написали, что она должна делать, - вывести сообщение в консоль;</li>

34 <li>вызвали функцию по имени.</li>

35 </ul>Функция срабатывает, когда мы её вызываем. Если не вызвать, она просто будет существовать в коде без действия.

36 Формально любая функция в JavaScript проходит три этапа:

37 <ul><li>Объявление - создаём функцию и даём ей имя.</li>

38 <li>Определение поведения - пишем, что именно она должна делать.</li>

39 <li>Вызов - запускаем выполнение по имени с помощью круглых скобок.</li>

40 </ul>Это простой и надёжный способ структурировать код. Вместо того чтобы повторять одно и то же - пишем один раз, вызываем сколько угодно.

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

42 Чтобы объявить функцию, начните с ключевого слова function, укажите имя, круглые скобки для параметров (даже если их нет), а затем - фигурные скобки с кодом внутри.

43 function sayHello() { console.log("Привет, мир!"); }Этот код создаёт функцию sayHello, которая содержит внутри себя команду console.log("Привет, мир!").

44 Способ называется function declaration. Он удобен тем, что функцию можно вызывать ещё до её объявления в коде.

45 Создать функцию - только половина дела. Чтобы она сработала, её нужно вызвать. То есть сказать программе: "выполни вот это прямо сейчас".

46 Для этого пишем имя функции и добавляем круглые скобки:

47 sayHello();В этот момент JavaScript находит функцию sayHello и запускает всё, что в ней написано. В нашем примере она выводит в консоль сообщение:

48 Привет, мир!Запомните:если функцию не вызвать - она ничего не сделает. Она будет просто ждать своего часа в коде.

49 Часто бывает нужно, чтобы одна и та же функция работала с разными значениями. Например, вы пишете код для сайта интернет-магазина. Покупателю нужно показать приветствие: "Здравствуйте, [имя]". Имя у каждого пользователя своё, и передать его в функцию гораздо удобнее, чем писать для каждого посетителя свой блок кода.

50 Для этого в функцию можно передавать данные. При её создании мы указываем параметры - это пустые места, в которые потом подставятся нужные значения. А при вызове передаём конкретные данные, которые функция и использует.

51 function sayHelloName(name) { console.log("Привет, " + name + "!"); } sayHelloName("Андрей"); // "Привет, Андрей!" sayHelloName("Марина"); // "Привет, Марина!"Здесь name - это параметр функции sayHelloName. При вызове функции мы передаём конкретное значение, которое подставляется вместо name.

52 Можно передавать сразу несколько параметров. Указываем их через запятую:

53 function sayHelloFullname(name, surname) { console.log("Привет, " + name + " " + surname + "!"); } sayHelloFullname("Андрей", "Иванов"); // "Привет, Андрей Иванов!"Не всегда получается передать все значения во время вызова функции. В таких случаях можно задать значение по умолчанию, тогда JavaScript сам подставит нужное значение.

54 function sayHelloName(name = "гость") { console.log("Привет, " + name + "!"); } sayHelloName(); // "Привет, гость!" sayHelloName("Катя"); // "Привет, Катя!"Здесь, если функция sayHelloName вызывается без аргумента, параметр name принимает значение "гость".

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

56 function logEvent(message, timestamp = new Date().toISOString()) { console.log(`[${timestamp}] ${message}`); } logEvent("Неверный логин"); // [2025-02-22T12:34:56.789Z] Неверный логин logEvent("Ошибка подключения", "2025-01-01T00:00:00Z"); // [2025-01-01T00:00:00Z] Ошибка подключенияИногда заранее не известно, сколько параметров передастся в функцию. Например, пользователь может выбрать один, два или десять элементов из списка - и все они должны попасть в функцию. В этом случае пригодится оператор ... (rest), который собирает все дополнительные аргументы в массив. Он записывается в виде трёх точек перед нужным параметром.

57 function sayHelloManynames(...names) {; let fullName = names.join(" "); console.log(`Привет, ${fullName}!`); // Объединяет все имена в одну строку с пробелами } sayHelloManynames("Омар", "ибн", "аль-Хаттаб", "аль-Фарук"); // Привет, Омар абн аль-Хаттаб аль-Фарук!Здесь ...names собирает все переданные аргументы в массив names, который затем объединяется в строку с помощью join(" ").

58 Функции в JavaScript могут не только выполнять действия, но и возвращать результат своей работы. Допустим, вы пишете калькулятор. Пользователь вводит два числа, а калькулятору нужно показать сумму. В этом случае удобно создать функцию sum(a, b), которая возвращает результат сложения. Вы передаёте ей значения и получаете ответ, с которым можно работать дальше - например, отобразить его на экране или использовать в других вычислениях.

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

60 function greet(name) { return "Привет, " + name + "!"; } const message = greet("Марина"); console.log(message); //Выведет: "Привет, Марина!"Здесь:

61 <ul><li>JavaScript выполнит вызов функции greet(), передав ей строку "Марина";</li>

62 <li>вернёт полученную строку "Привет, Марина!" и присвоит её переменной message;</li>

63 <li>выведет message на печать.</li>

64 </ul>Важно:когда интерпретатор JavaScript встречает return, выполнение функции немедленно прекращается. Код после return внутри функции не будет выполнен.

65 function greet(name) { return "Привет, " + name + "!"; console.log("Это сообщение никогда не будет выведено."); }Функция может возвращать любое значение:

66 <ul><li>строку или число;</li>

67 <li>массив;</li>

68 <li>объект;</li>

69 <li>другую функцию.</li>

70 </ul>function createUser(name, age) { return { name: name, age: age }; } console.log(createUser("Тимофей", 25)); // { name: "Тимофей", age: 25 }Возврат значений часто используется, чтобы создавать структуру данных - например, карточку пользователя, заказ или товар.

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

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

73 function greet(name) { console.log("Привет, " + name + "!"); } const message = greet("Марина"); // Выведет: "Привет, Марина!" console.log(message); // Выведет: undefinedЧто произойдёт:

74 <ul><li>в консоль выведется "Привет, Марина!";</li>

75 <li>затем выведется undefined, потому что функция greet() ничего не вернула.</li>

76 </ul>Если в функции нет return, JavaScript автоматически возвращает undefined.

77 Чем отличается функция, возвращающая значение, от функции без return:

78 <ul><li>Если функция использует return, она возвращает указанное значение.</li>

79 <li>Если функция не использует return, она по умолчанию возвращает undefined.</li>

80 </ul>В JavaScript область видимости (scope) - это правило, по которому переменные доступны в разных частях кода. Когда мы объявляем переменную, она "живёт" только в определённой зоне. И важно понимать, где именно она будет доступна.

81 С функциями связаны две основные области видимости: глобальная и локальная.

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

83 const globalVar = "Я доступна везде!"; // Глобальная переменная function showVar() { console.log(globalVar); // Доступ к глобальной переменной внутри функции } showVar(); // "Я доступна везде!"Важно:глобальные переменные легко случайно изменить из разных частей программы. Это может привести к ошибкам, которые трудно отследить.

84 Если переменная объявлена внутри функции, она локальная. То есть доступна только в этой функции и нигде больше.

85 function showVar() { let localVar = "Я доступна в функции!"; console.log(localVar); // Доступна внутри функции } showVar(); // "Я доступна в функции!" console.log(localVar); // Ошибка! localVar не определена за пределами функцииПочему так: переменная localVar существует только внутри функции showVar. За её пределами она не видна и не может быть использована.

86 Важно:локальные переменные защищены от изменений извне. Это делает код более предсказуемым и безопасным.

87 В JavaScript функция может "запоминать" переменные из того места, где она была создана. Даже если вызвать её позже, в другом месте, - она всё равно будет помнить эти значения.

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

89 Представьте, что внутренняя функция как будто кладёт переменные в невидимый "рюкзак" и носит с собой:

90 function createCounter() { let count = 0; // Переменная из внешней области видимости return function() { count++; console.log("Текущее значение:", count); }; // Внутренняя функция, имеющая доступ к count } const counter = createCounter(); // Создаём функцию-счётчик counter(); // Текущее значение: 1 counter(); // Текущее значение: 2 counter(); // Текущее значение: 3Здесь:

91 <ul><li>createCounter() создаёт переменную count и возвращает функцию;</li>

92 <li>эта функция увеличивает count и выводит его значение;</li>

93 <li>даже после завершения createCounter() переменная count не исчезает, - она "живёт" внутри замыкания.</li>

94 </ul>Это и есть замыкание: внутренняя функция "помнит" переменную count, потому что была создана в той же области видимости.

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

96 <ul><li>вы создаёте счётчик, который увеличивается каждый раз, когда вызывается функция;</li>

97 <li>пишете обработчик событий, которому нужно помнить, что было раньше;</li>

98 <li>хотите сгенерировать уникальные ID и не повторяться;</li>

99 <li>хотите спрятать данные от внешнего доступа и не дать другим частям программы их менять.</li>

100 </ul>Во всех этих случаях замыкание помогает сохранить переменные внутри функции, не делая их глобальными.

101 В JavaScript есть два основных способа создать функцию:

102 <ul><li>через function declaration - привычное объявление с ключевым словом function;</li>

103 <li>Через function expression - функция создаётся внутри выражения и сохраняется в переменную.</li>

104 </ul>Пример:

105 const greet = function () { console.log("Привет!"); }; greet();Такую функцию нельзя вызвать до её создания, потому что переменная, в которую она записана, появляется только в момент выполнения.

106 Когда это бывает полезно

107 Допустим, у нас есть условие: если пользователю меньше 18 - одно сообщение, если больше - другое. Мы хотим выбрать подходящую функцию в зависимости от возраста.

108 const age = Number(prompt("Сколько вам лет?")); // Выводит диалоговое окно с вопросом let greet; // Объявляем переменную greet, которой затем присвоим значение функции if (age < 18) { greet = function() { alert("Привет!"); }; } else { greet = function() { alert("Здравствуйте!"); }; } greet();Здесь:

109 <ul><li>мы запрашиваем возраст с помощью prompt();</li>

110 <li>определяем функцию greet() в зависимости от значения age;</li>

111 <li>вызываем greet(), и пользователь получает соответствующее приветствие.</li>

112 </ul>Важно:пример с prompt() и alert() работает только в браузере. В среде Node.js такие функции не поддерживаются.

113 Если попробовать создать функцию обычным способом - function greet() { ... } - прямо внутри if, могут возникнуть проблемы.

114 В JS есть директива use strict, которая включает строгий режим. Он делает код более безопасным: запрещает некоторые устаревшие конструкции и помогает сразу замечать ошибки.

115 В строгом режиме такая функция будет существовать только внутри блока if. За пределами блока она будет недоступна - и, если вы попытаетесь её вызвать снаружи, получите ошибку.

116 Function expression - это способ избежать этой ошибки. Мы сначала создаём переменную, например greet, а потом в нужный момент записываем в неё нужную функцию. Так код работает надёжно и предсказуемо - вне зависимости от условий.

117 Стрелочные функции - это короткий способ записать функцию. Их добавили в JavaScript в 2015 году (ES6).

118 Главное отличие - вместо function используется стрелка =>. Ещё одна особенность: если внутри функции всего одна строка, можно не писать фигурные скобки и return - JavaScript поймёт всё сам.

119 Пример:

120 const greet = (name) => `Привет, ${name}!`; console.log(greet("Анна")); // Выведет: "Привет, Анна!"Почему это удобно:

121 <ul><li>Меньше кода. Особенно для коротких функций, которые делают что-то одно.</li>

122 <li>Проще читать. Нет function, нет лишних скобок, - всё ясно с первого взгляда.</li>

123 <li>this работает иначе. В стрелочных функциях this не меняется. Это удобно, когда нужно сохранить контекст из внешней области.</li>

124 </ul>Когда JavaScript начинает выполнять код, он создаёт для этого специальную "рабочую зону". Эта зона называется контекстом выполнения (или просто контекстом). Она помогает понять, где сейчас выполняется код и какие переменные и объекты доступны.

125 У каждого контекста есть три важные части:

126 <ul><li>Область видимости - показывает, какие переменные и функции доступны в данный момент.</li>

127 <li>this - указывает на объект, к которому привязана текущая функция.</li>

128 <li>Стек вызовов (call stack) - как стопка тарелок: JavaScript складывает туда функции, когда они вызываются, и убирает обратно, когда они завершаются.</li>

129 </ul>1. Глобальный контекст.Когда страница загружается (или скрипт запускается), создаётся глобальный контекст. В браузере это объект window, в Node.js - global.Все переменные и функции, созданные вне других блоков, становятся частью этого объекта.

130 console.log(this); // В браузере: window2. Контекст функции.Каждый раз, когда вызывается функция, создаётся новый контекст. Внутри него есть свои переменные, аргументы и значение this.

131 function greet() { console.log(this); // В обычной функции this зависит от способа вызова } greet();Если вызвать greet() просто так, this укажет на window (в нестрогом режиме).

132 3. Контекст объекта(this). Когда функция вызывается как метод объекта, this ссылается на этот объект.

133 const user = { name: "Андрей", greet() { console.log(`Привет, ${this.name}`); } }; user.greet(); // Привет, АндрейЗдесь this ссылается на объект user, поэтому мы получаем имя пользователя.

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

135 Когда JavaScript вызывает функцию, он кладёт её в стек вызовов - список, в котором отслеживается порядок выполнения. Это работает по принципу LIFO (last in, first out): последним пришёл, первым ушёл.

136 Рассмотрим на примере двух вложенных функций.

137 function first() { second(); } function second() { console.log("Привет из второй функции!"); } first();Как меняется стек вызовов поэтапно:

138 <ul><li>JavaScript начинает выполнение - стек пуст.</li>

139 <li>Вызов first(). Функция first() добавляется в стек.</li>

140 <li>Внутри first() вызывается second(). second() добавляется в стек поверх first().</li>

141 <li>second() выполняет console.log. Вызов console.log() попадает в стек.</li>

142 <li>console.log() завершился. После вывода в консоль, console.log() убирается из стека.</li>

143 <li>second() завершилась, - она убирается из стека.</li>

144 <li>first() завершилась, стек пуст.</li>

145 </ul>Одна из распространённых ошибок при работе с функциями - забыть или неправильно использовать return.

146 returnна новой строке без()

147 function getNumber() { return 42; // return завершает выполнение, и эта строка не выполнится! } console.log(getNumber()); // undefinedПочему так происходит:JavaScript думает, что return уже завершил функцию. А 42 он просто игнорирует.

148 Правильный вариант:

149 function getNumber() { return 42; // Возвращаем число правильно }Если всё же хочется перенести число на новую строку, оберните его скобками:

150 function getNumber() { return ( 42 ); } console.log(getNumber()); // 42Нет return в некоторых ветках кода

151 function checkAge(age) { if (age >= 18) { return "Доступ разрешён"; } // Здесь нет return! } console.log(checkAge(20)); // "Доступ разрешён" console.log(checkAge(15)); // undefined (ожидали строку, но её нет)Почему так:если age < 18, функцияничего не возвращает, и результат undefined.

152 Правильный вариант:

153 function checkAge(age) { if (age >= 18) { return "Доступ разрешён"; } return "Доступ запрещён"; // Теперь всегда есть return } console.log(checkAge(15)); // "Доступ запрещён"Рекурсивная функция без выхода

154 function countdown(n) { console.log(n); countdown(n - 1); // Функция вызывает саму себя без остановки! } countdown(5);Что произойдёт:

155 <ul><li>Функция countdown будет бесконечно уменьшать n.</li>

156 <li>Когда n станет отрицательным, вызовы продолжатся.</li>

157 <li>В итоге JavaScript выдаст "Maximum call stack size exceeded" (переполнение стека).</li>

158 </ul>Чтобы всё исправить, надо добавить условие выхода.

159 Правильный вариант:

160 function countdown(n) { if (n <= 0) { // Условие выхода console.log("Стоп!"); return; } console.log(n); countdown(n - 1); } countdown(5); // Выдаст 5 ... 4 ... 3 ... 2 ... 1 и остановитсяnull вместо undefined при значении по умолчанию

161 function greet(name = "Гость") { console.log(`Привет, ${name}!`); } greet(null); // "Привет, null!"Почему так:в функции задано значение по умолчанию ("Гость"), и мы хотим его использовать. Значения по умолчанию срабатывают, только если аргумент не определён (undefined). В JavaScript null и undefined часто используются как "отсутствие значения", но они не идентичны. Иногда разработчики явно задают null, думая, что это undefined.

162 Правильный вариант:

163 function greet(name = "Гость") { console.log(`Привет, ${name}!`); } greet(); // "Привет, Гость!" greet(undefined); // "Привет, Гость!"Используйте понятные имена.

164 <ul><li>Давайте функциям ясные и осмысленные названия, чтобы код было легче читать и понимать.</li>

165 <li>Вместо неопределённого ct лучше использовать calculateTotal.</li>

166 </ul>Пишите короткие и лаконичные функции.

167 <ul><li>Одна функция должна выполнятьодну конкретную задачу.</li>

168 <li>Если код слишком разрастается, разбейте его на несколько функций.</li>

169 </ul>Используйтеconstи letвместоvar.

170 <ul><li>const для неизменяемых переменных, let для изменяемых.</li>

171 <li>Это улучшает читаемость и снижает вероятность ошибок.</li>

172 </ul>Не изменяйте переданные аргументы.

173 <ul><li>Функция не должна менять входные данные, если это не её основная цель.</li>

174 <li>При необходимости возвращайте новый результат.</li>

175 </ul>Используйте параметры по умолчанию.

176 <ul><li>Позволяет избежать ошибок, если аргумент не передан.</li>

177 </ul>Напишите функцию, которая принимает массив целых чисел и возвращает сумму всех чисел, кратных 3.

178 Решение:

179 function sumMultipleOfThree(arr) { let sum = 0; for (let i = 0; i < arr.length; i++) { if (arr[i] % 3 === 0) { sum += arr[i]; } } return sum; }Напишите функцию, которая определяет, является ли переданная строка палиндромом. Палиндромом считается строка, которая читается одинаково как слева направо, так и справа налево.

180 Решение:

181 function isPalindrome(str) { const reversedStr = str.split('').reverse().join(''); return str === reversedStr; } // Примеры использования: console.log(isPalindrome('level')); ``// Вернёт true console.log(isPalindrome('hello')); ``// Вернёт falseЗдесь:

182 <ul><li>str.split('') - превращает строку в массив символов (например, 'hello' → ['h', 'e', 'l', 'l', 'o'])</li>

183 <li>reverse() - переворачивает массив ( ['h', 'e', 'l', 'l', 'o'] → ['o', 'l', 'l', 'e', 'h'])</li>

184 <li>join('') - собирает массив обратно в строку ( ['o', 'l', 'l', 'e', 'h'] → 'olleh')</li>

185 </ul>Сравниваем оригинал и перевёрнутую строку: return str === reversedStr;

186 Напишите функцию, которая возвращает случайное сообщение из заранее заданного списка.

187 Список сообщений:

188 <ul><li>"Ты молодец!"</li>

189 <li>"Продолжай в том же духе!</li>

190 <li>"Отличная работа!"</li>

191 <li>"Ты на верном пути!"</li>

192 </ul>Решение:

193 function generateRandomMessage() { const messages = [ "Ты молодец!", "Продолжай в том же духе!", "Отличная работа!", "Ты на верном пути!" ]; const index = Math.floor(Math.random() * messages.length); // Выбор случайного индекса из массива return messages[index]; // Возврат выбранного сообщения } console.log(generateRandomMessage());Здесь:

194 <ul><li>Math.random() → генерирует случайное число от 0 до 1 (например, 0.72).</li>

195 <li>Умножаем это число на messages.length (количество элементов в заданном списке, в данном случае 4).</li>

196 <li>Math.floor(...) округляет вниз до целого числа от 0 до 3 - это и есть случайный индекс массива.</li>

197 <li>return messages[index] - возвращается сообщение, определённое по индексу.</li>

198 </ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>