मुख्य कंटेंट तक स्किप करें

कार्यों

@serverSerrverlesskiy

कार्यों⚙️ нужны, ताकि एक ही कोड को दोबारा न दोहराएं प्रोग्राम एल्गोरिथम में कई स्थानों पर। आधुनिक कार्यक्रमों में, कार्य मुख्य "बिल्डिंग ब्लॉक्स" हैं।

Don’t repeat yourself

DRY (हिन। दोहराना मत) — यह एक सॉफ्टवेयर विकास सिद्धांत है जिसका उद्देश्य विभिन्न प्रकार की सूचनाओं की पुनरावृत्ति को कम करना है, विशेष रूप से अमूर्तता की कई परतों वाले सिस्टम में। फ़ंक्शंस ठीक उसी प्रकार के डेटा हैं जो इस डिज़ाइन सिद्धांत को पूरा करते हैं।

फ़ंक्शन का नाम चुनना

समारोह⚙️ – यह क्रिया! इसलिए, फ़ंक्शन नाम आमतौर पर एक क्रिया है। यह सरल, सटीक होना चाहिए और फ़ंक्शन की क्रिया का वर्णन करना चाहिए ताकि प्रोग्रामर जो कोड पढ़ेगा , फ़ंक्शन क्या करता है इसका एक अच्छा विचार मिला।

Choice

एक नियम के रूप में, क्रिया उपसर्गों का उपयोग किया जाता है, जो क्रिया की सामान्य प्रकृति को दर्शाता है, इसके बाद स्पष्टीकरण दिया जाता है। आमतौर पर, विकास टीमों में इन उपसर्गों के अर्थ के बारे में परंपराएं होती हैं।

उदाहरण के लिए, फ़ंक्शन⚙️, के साथ शुरू "show" आमतौर पर कुछ दिखाते हैं।

कार्यों⚙️, के साथ शुरू ...

"get.."     – वापसी मूल्य,
"calc.." – कुछ गिनना,
"create.." – कुछ बनाओ,
"check.." – कुछ जांचें और वापस आएं बूलियन, आदि

ऐसे नामों के उदाहरण:

showMessage(..)     // संदेश दिखाता है
getAge(..) // रिटर्न उम्र (कुछ मूल्य में)
calcSum(..) // योग की गणना करता है और परिणाम देता है
createForm(..) // एक फॉर्म बनाता है (और आमतौर पर इसे वापस करता है)
checkPermission(..) // लौटकर पहुँच की जाँच करता है true/false

उपसर्गों के लिए धन्यवाद, फ़ंक्शन के नाम पर पहली नज़र में, यह स्पष्ट हो जाता है कि इसका कोड क्या कर रहा है। , और यह किस मूल्य पर वापस आ सकता है.

किसी भी मामले में, आपको और आपकी टीम को यह समझना चाहिए कि उपसर्ग का क्या अर्थ है और यह कि कार्य⚙️ वह उसके साथ क्या कर सकता है और वह क्या नहीं कर सकता।

अल्ट्रा-शॉर्ट फ़ंक्शन नाम⚙️

समारोह के नाम⚙️, जिनका प्रयोग बहुत बार किया जाता है, कभी-कभी उन्हें अति लघु बना दिया जाता है।

उदाहरण के लिए, ढांचे में jQuery एक समारोह है⚙️ नाम के साथ $. पुस्तकालय में Lodash मुख्य समारोह⚙️ अंडरस्कोर के नाम से दर्शाया गया है _

ये अपवाद हैं। मूल रूप से, फ़ंक्शन नाम यथोचित रूप से संक्षिप्त और वर्णनात्मक होने चाहिए। .

कार्य === टिप्पणियाँ

cut

कार्यों⚙️ छोटा होना चाहिए और केवल एक ही काम करना चाहिए। अगर यह कुछ बड़ा है तो फ़ंक्शन को तोड़ना समझ में आता है⚙️ थोड़ा कम। इस नियम का पालन करना निश्चित रूप से सहायक है, खासकर टीम वर्क में।

छोटे कार्य⚙️ न केवल परीक्षण और डिबगिंग को आसान बनाते हैं - ऐसे कार्यों का अस्तित्व⚙️ अच्छी टिप्पणियों के रूप में कार्य करता है।

समारोह घोषणा

Announcement

फ़ंक्शन बनाने के लिए⚙️ हम विज्ञापन का उपयोग करते हैं कार्य।⚙️

सबसे पहले चाबी आती है🗝️ शब्द function, इसके बाद फ़ंक्शन का नाम⚙️, फिर कोष्ठक में मापदंडों की सूची, अल्पविराम से अलग (दिए गए उदाहरण में, यह खाली है) और अंत में, कोड समारोह⚙️, इसे "फ़ंक्शन बॉडी भी कहा जाता है⚙️», घुंघराले ब्रेसिज़ के अंदर।

यह लिखने का क्लासिक तरीका है कार्यों को कहा जाता है Function Declaration.

वाक्य - विन्यास :

function नाम(मापदंडों) {
... तन ... // कलन विधि
return कुल मूल्य
}
ध्यान !

यदि एक return निर्दिष्ट नहीं है, इसके बजाय कार्य करें⚙️ रिटर्न undefined और डिफ़ॉल्ट रूप से यह माना जाता है कि फ़ंक्शन⚙️ एक खाली ठूंठ के साथ समाप्त होता है return, केवल आंतरिक स्क्रिप्ट निष्पादित करना।

में JavaScript एक समारोह बनाएँ⚙️ क्लासिक तरीके को छोड़कर Function Declaration आप भी उपयोग कर सकते हैं:

  • Function Expression
  • Arrow Function(तीर कार्य)

Function Expression - यह घोषणा समारोह⚙️, जो कुछ अभिव्यक्ति का हिस्सा है (उदाहरण के लिए, एक असाइनमेंट)।

const नाम = function (मापदंडों) {
// अनुदेश
}

तुलना Function Declaration तथा Function Expression:

// Function Declaration
function sum(num1, num2) {
return num1 + num2
}

// Function Expression
const sum = function (num1, num2) {
return num1 + num2
}

वाक्य रचना के साथ Arrow Function (तीर कार्य) हम इस अध्याय में बाद में एक दूसरे को जानेंगे। यह लिखने का सबसे सरल और सबसे अधिक इस्तेमाल किया जाने वाला तरीका है कार्य।

फंक्शन कॉल

किसी फ़ंक्शन को कॉल करने के लिए⚙️, इसे निष्पादित करें, आपको इसे नाम से संदर्भित करना होगा और फिर दो कोष्ठक निर्दिष्ट करना होगा myMessage():

// समारोह घोषणा
function myMessage() {
let str = 'Hello!'
}

myMessage() // फंक्शन कॉल

ध्यान दें कि इस उदाहरण में, फ़ंक्शन⚙️ कहा जाता है लेकिन वापस नहीं आता मूल्य।

के साथ कार्य return

Return

कार्य करना⚙️ कुछ लौटाया, उसके शरीर में कुंजी इंगित करें🗝️ शब्द return (निकास या वापसी बिंदु परिणाम) और लौटा मूल्य।

लाइव एडिटर
परिणाम
Loading...

प्रयोग, मूल संख्या के स्थान पर लगाएं9️⃣ आपके वर्षों की संख्या।

Запомните!

घोषणा करके समारोह⚙️, और फिर इसे कॉल करके, किसी भी स्थिति में, हमें फ़ंक्शन के शरीर में एल्गोरिथम (पहले वर्णित क्रियाओं) के निष्पादन का परिणाम मिलता है⚙️.

दूसरे फंक्शन के अंदर फंक्शन

Matryoschka

Внутри функции⚙️ можно размещать другие функции⚙️. Например функция⚙️ showNumberFive() вернет цифру , значение которой выведем через вызов функции⚙️ learnJavaScript().

लाइव एडिटर
परिणाम
Loading...

Давайте рассмотрим всё это шаг за шагом:

  • Ключевое слово function указывает интерпретатору на то, что следующий далее код является пользовательским, то есть созданной Вами, а не встроенной функцией.
  • Написанное верблюжьимРегистром showNumberFive является пользовательским названием этой функции. Для интерпретатора в общем‑то нет разницы, как именно называется эта функция, но лучше давать функциям названия, из которых чётко следует, что именно они делают.
  • () скобки обязательный элемент любой функции. Порой в скобки заключается одна, две и более переменных , в нашем случае в скобках нет ничего.
  • В фигурные скобки {} должно быть заключено само тело функции - суть алгоритма программы.
  • Само тело функции принято выделять отступами справа (при помощи клавиши TAB). Это не обязательно для выполнения программы, но обязательно для коллективной работы, поскольку значительно облегчает читабельность кода.
  • Ключевое слово return означает, что всякий раз когда мы вызываем эту функцию, значение будет передано, то есть «возвращено», интерпретатору, поэтому оно называется «возвращаемое значение функции».

Параметры и аргументы функций

couple

Объявим ещё одну функцию⚙️, но уже с переменной в скобках. Когда при функции⚙️ в скобках есть ещё и переменная , мы будем называть её формальным параметром (заранее неопределенным, мы же не знаем чему будет равно значение x). У большей части функций⚙️ будут параметры, но иногда нам встретятся функции⚙️ и без них.

function addThree(x) {
return x + 3
}

После объявления функции⚙️ и её параметров, мы можем вызвать (запустить) «блок кода» с конкретным значением (например: 5). Такое присваивание значения мы будем называть аргументом:

addThree(5)

Ответ: 8

В нашем примере цифра является аргументом функции - конкретное передаваемое значение внутрь функции⚙️. Как только наша функция⚙️ получила свой аргумент, она тот час же присвоила его значение переменной x (которое является формальным параметром нашей функции⚙️).

Пример кода:

Экспериментируйте :

लाइव एडिटर
परिणाम
Loading...

Разница между параметрами и аргументами

Dedefencce

Состоит в следующем:

аргумент — это конкретное значение, которое мы «передали» функции⚙️ при её вызове в скобочках. Это значение или набор значений присваивается формальным параметрам этой функции⚙️.

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

Множество программистов используют эти термины (аргумент и параметр) взаимозаменяемо, но мы то разницу поняли.

Пример:

Mathematics

Давайте попробуем объявить функцию⚙️ расчета по двум сторонам периметра прямоугольника, параметры которой будут ожидать два 2️⃣ числа в качестве своего значения. Обратите внимание, что если у вас более одного параметра, то их необходимо отделять друг от друга запятой.

लाइव एडिटर
परिणाम
Loading...

Когда мы вызовем эту функцию⚙️, мы должны будем задать ей в качестве аргументов два 2️⃣ числа - значения сторон конкретного прямоугольника (отделённых друг от друга запятой):

calcPrym(7, 8)

Ответ: 30

О, большое спасибо, компьютер ️!

Передавая функции⚙️ уже другие значения, она сразу посчитает периметры и других прямоугольников.

Еще раз!

Одно из главных предназначений функций⚙️ - это избавление от дублирования кода и возможности их многократного вызова для решения ваших задач.

Встроенные функции

Integration

console.log()

Secret

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

Нажмите в браузере Google Chrome сочетание клавиш🎹 Ctrl + Shift + I и на вкладке Console наберите:

console.log('Совершенно секретно! Только для разработчиков!')

Как явствует из названия функции⚙️, мы выводим в консоль «лог» (то есть информацию о работе системы); этой доброй суперспособностью разработчики пользуются постоянно. Скажем, когда у вас были сообщения об ошибках, вы видели в консоли именно это — интерпретатор выдавал («логгировал») в консоль информацию о работе системы, чтобы вы могли прочесть и исправить нужные параметры. Словом, очень полезная штука. Вам не раз и не два 2️⃣ придётся прибегнуть к помощи console.log(), так что запомните эту функцию⚙️!

Построчно введите следующий команды:

console.log('Выведите любое сообщение, какое пожелаете')
console.log('просто введите сюда какую‑нибудь ' + 'строку')
let myMessage = 'А ещё в качестве аргумента можно использовать переменные!'
console.log(myMessage)

Пока вы играете с логами в консоли, я покажу вам ещё один трюк. Его мне поможет выполнить наш старый добрый друг — обратный слэш!

При его содействии \n можно разбивать свой код по строчкам. Попробуйте сами! Построчно введите следующий команды:

console.log('Можно разбить любой текст\n на многие\n строчки.')
console.log('Вот первая.\nА вот 2‑я.\n3‑я\n4‑я\n5‑я!')

Эта штука с \n вообще‑то имеет множество полезных практических применений. Например, можно нарисовать в кодировке ASCII мишку в консоли. Набирайте в консоли:

console.log(" c___c\n /. .\\\n \\_T_/\n /' '\\\n(/ . \\)\n/';‑;'\\\n()/ \\()")

Понятно, почему так выходит?

Каждый \n задаёт переход на новую строчку, так что последующие символы как бы «спускаются» ниже, и вуаля! Мы с вами внесли серьёзный вклад в развитие общества нарисовав премилого мишку!

Math.random()

Random

Ещё одна полезная встроенная функция⚙️: Math.random(). Обратите внимание, что, в отличие от предыдущих, название этой функции⚙️ начинается с прописной буквы 'M'. Тому есть причины, приписные и строчные буквы в JavaScript различаются по внутренним кодам . В каждом языке , будь то русский, английский или JavaScript, всегда есть какие‑то исключения из правил. Вот это — одно из них. Все прочие переменные и функции⚙️, которые вы встретите, следует писать со строчной буквы. Помните, что регистр — это важная штука и, если название Math.random() начать с math, то функция⚙️ просто не запустится!

लाइव एडिटर
परिणाम
Loading...

Каждый раз новое число! Функция⚙️ выдаёт случайное вещественное число между 0 и 1.

Давайте модернизируем уравнение :

लाइव एडिटर
परिणाम
Loading...

Если вам вдруг понадобится случайное число в диапазоне 0 до 100, то эта функция⚙️ вам очень пригодится.

Math.floor()

Floor

Эта функция⚙️ требует число или цифру в качестве аргумента и получив округляет их в меньшую сторону.

Math.floor(10.7) // 10
Math.floor(4.8) // 4
Math.floor(14.19723) // 14
लाइव एडिटर
परिणाम
Loading...

Math.round()

rounding

Math.round(x) же наоборот до ближайшего целого, без каких‑либо десятых долей после запятой.

Math.round(10.7) // 11
Math.round(4.8) // 5
Math.round(14.19) // 14
लाइव एडिटर
परिणाम
Loading...

.toUpperCase() / .toLowerCase()

Words

Вы КОГДА‑НИБУДЬ замечали, ЧТО в НЕКОТОРЫХ сообщениях ЧЕРЕСЧУР много СЛОВ, выделенных ПРОПИСНЫМИ буквами? Что ж, именно этому мы сейчас и научимся.

Вы можете запросто взять любую строку и вернуть её новую версию через прописные буквы (то есть в верхнем / нижнем регистре), используя встроенный метод .toUpperCase() / .toLowerCase(). И, соответственно, можно вернуть любую строку в строчных буквах (то есть в нижнем регистре).

Помните, что метод — это всего лишь функция, прикреплённая к описанному объекту, в данном случае к универсальной строке.

Работает это так, .toUpperCase() в прописные буквы :

लाइव एडिटर
परिणाम
Loading...

А .toLowerCase() в строчные:

लाइव एडिटर
परिणाम
Loading...

А теперь всё вместе!

Mix

Попробуем замешать небольшой коктейль из только что выученных функций⚙️.

लाइव एडिटर
परिणाम
Loading...

Надеюсь, ничего из сделанного не оказалось для вас трудной задачкой, и вы всё поняли. Если нет, то не торопясь просмотрите каждую строчку и комментарии к ней.

Arrow Function (стрелочные функции)

Arrow

Существует ещё более простой и краткий синтаксис для создания функций⚙️, который часто лучше, чем другие виды.

Итак, классический вариант записи функции⚙️:

Function Declaration:

function func1(arg1, arg2, ...argN) {
return expression
}

Function Expression:

let func1 = function (arg1, arg2, ...argN) {
return expression
}

Такой код создаёт функцию⚙️ func1 с аргументами arg1, .. argN и вычисляет expression - набор действий алгоритма с правой стороны с их использованием, возвращая результат вычислений через ключевое🗝️ слово return.

Теперь давайте применим стрелочные функции - Arrow functions:

let func1 = (arg1, arg2, ...argN) => expression

Другими словами, это более короткий вариант такой записи .

Во как !

=> нам заменила { return ... } с правой стороны и позволила не писать ключевое 🗝️ слово function с левой стороны!

Давайте взглянем на конкретный пример :

लाइव एडिटर
परिणाम
Loading...

Оба варианта правильны! function практически не используется в современом написании кода , поэтому используйте "стрелочные функции⚙️"!

Только один аргумент

only one

Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче let num2 = n => n * 2

लाइव एडिटर
परिणाम
Loading...

Если нет аргументов

no

Если нет аргументов, то чтобы не получилось двойное ==, указываются пустые круглые скобки :

लाइव एडिटर
परिणाम
Loading...

"Функции-стрелки" удобны и очень компактны!

Самовыполняющиеся функции(IIFE)

Start

Immediately Invoked Function Expression - это JavaScript функция, которая выполняется сразу же после того, как она была определена. JavaScript позволяет создавать, кроме обычных и стрелочных, также и анонимные функции⚙️, выполняющие важную роль в JavaScript.

Анонимные функции

Anonym

Если после function есть имя — функция⚙️ именованная, во всех остальных случая анонимная. Анонимные функции⚙️ зачастую создаются и сразу же запускаются. Еще одно важное отличие в том, что именованные функции⚙️ объявляются, а анонимные создаются при помощи оператора function.

Наберите в консоле Google Chrome следующий код:

(function (num1, num2) {
return num1 + num2
})(7, 4)

Самовызывание создается скобками в конце функции⚙️, которые говорят интерпретатору, что эту функцию⚙️ необходимо запустить сразу.

Заключение

conclusion

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

EnglishMoji!

Проблемы?

Problem

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы

question

Где размещаются декларации?

  1. .d.ts
  2. .h
  3. .js

С помощью какой команды устанавливается декларация?

  1. npm search -D @types/name
  2. npm view -D @types/name
  3. npm install -D @types/name

Каким синтаксисом нужно воспользоваться для создания декларации?

  1. declare 'libname' { ... }
  2. module 'lib' { ... }
  3. declare module 'libname' { ... }Question

Как объявляется функция?

  1. function имя (параметры, через, запятую) { // тело, код функции }
  2. procedure имя (параметры) { // тело, код функции }
  3. let имя (параметры) {}

Точка выхода или возврата результата в функции ?

  1. Esc
  2. return
  3. Hello

Ключевое слово return внутри тела функции:

  1. обязательна
  2. не обязательна
  3. по-разному

Дана функция

function addThree(x) {
return x + 3
}

addThree(20)

Определите формальный параметр:

  1. 20
  2. x
  3. x + 3

Дана функция

function addThree(x) {
return x + 3
}

addThree(20)

Определите аргумент:

  1. 20
  2. x
  3. x + 3

Где встроенная функция?

  1. console.log()
  2. myMessage()
  3. return()

Какой синтаксис используют стрелочные функции?

  1. Вперед()
  2. =>
  3. go.Стрелка

Использование стрелочных функций позволяет?

  1. Писать код компакто и более безопасно
  2. Увеличивает структуру кода
  3. Позволяет использовать новые переменные

Самовыполняющаяся функция - это

  1. Функция, которая выполняется сразу же после того, как она была определена
  2. Встроенная функция в JavaScript
  3. Это обыкновенная процедура, выполняющая последовательность команд

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме.

EnglishMoji!

Ссылки:

  1. MDN web docs - Function
  2. Learn.javascript.ru - Статья "Функции"
  3. Learn.javascript.ru - Статья "Функции-стрелки"
  4. Анонимные и самовыполняющиеся функции в JavaScript
  5. Developer.mozilla.org - Статья "Math"
  6. Developer.mozilla.org - Статья "Стрелочные функции"
  7. Basicweb.ru - Статья "JavaScript функции"
  8. Javascript.ru - Статья "Функции"
  9. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨