Functions

Functions⚙️ are needed so as not to repeat the same code in many places in the program algorithm. In modern programs, functions are the main "building blocks".

Don’t repeat yourself

DRY (rus. Do not repeat yourself) is a software development principle aimed at reducing the repetition of information of various kinds, especially in systems with many layers of abstraction. Functions are exactly the type of data that serves this design principle.

Select function name

Function⚙️ is action! Therefore, the function name is usually a verb. It should be simple, precise, and describe the action of the function, so that the programmer reading the code has a good understanding of what the function does.

As a rule, verb prefixes are used, indicating the general nature of the action, followed by a clarification. Typically, development teams have conventions about the meaning of these prefixes.

For example, functions⚙️ starting with `` show '' usually show something.

Functions⚙️ starting with ...

"get .." - return a value,
"calc .." - something is being calculated,
"create .." - create something,
"check .." - check something and return a boolean value, etc.

Examples of such names:

showMessage (..) // shows the message
getAge (..) // returns age (in some value)
calcSum (..) // calculates the sum and returns the result
createForm (..) // creates a form (and usually returns it)
checkPermission (..) // checks access by returning true / false

Thanks to prefixes, at the first glance at the name of a function, it becomes clear what its code is doing and what value it can return.

In any case, you and your team need to understand exactly what a prefix means and what a function⚙️ can and cannot do with it.

Ultra-short function names⚙️

Function names⚙️ that are used very often are sometimes made extra short.

For example, the jQuery framework has a function⚙️ named $. In the Lodash library, the main function⚙️ is represented by the underscore name \ _

These are exceptions. Basically, function names should be reasonably short and descriptive .

Functions === Comments

Functions⚙️ should be short and only do one thing. If it's something big, it makes sense to split the function⚙️ into several smaller ones. Following this rule is definitely helpful, especially in teamwork.

Small functions⚙️ not only make testing and debugging easier - the very existence of such functions⚙️ serves as good comments.

Function declaration

To create functions⚙️ we use a function declaration⚙️.

First comes the keyword function, followed by the name of the function, then the list of parameters in parentheses separated by commas (in the given example it is empty) and, finally, the code of the function, also called the“ body of the function ”, inside curly braces ...

This classic way of writing functions is called Function Declaration.

Syntax :

function name (parameters) {
   ... body ... // Algorithm
   returnTotalValue
}

Attention!

If no return is specified, the function returns undefined instead, and by default it is assumed that the function ends with an empty return stub, executing only internal scripts.

In JavaScript, apart from the classic Function Declaration method, you can create a function⚙️ by using:

• Function Expression
• Arrow Function (arrow functions)

A Function Expression is a declaration of a function⚙️ that is part of an expression (for example, an assignment).

const name = function (parameters) {
  // instructions
}

Let's compare Function Declaration and Function Expression:

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

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

The syntax for Arrow Function will be introduced later in this chapter. This is the simplified and most commonly used way of writing functions.

Function call

To call a function⚙️ and execute it, you need to refer to it by name and then specify two parentheses myMessages():

// function declaration
function myMessage() {
  let str = 'Hello!'
}

myMessage() // function call

Note that in this example the function is called but does not return a value.

Functions with return

In order for a function to return something, the keyword return (point of exit or return of the result) and the return value are specified in its body.

Live Editor

function showNumberFive() { return 5 }

function showNumberFive() {
  return 5
}

Result

Loading...

Experiment, replace the original number 9️⃣ with the number of your years.

Remember!

By declaring a function and then calling it, we in any case get the result of the algorithm (previously described actions) in the function body теле.

Function inside another function

Inside a function⚙️ you can place other functions⚙️. For example, the function⚙️ showNumberFive() will return the number , the value of which will be displayed through the call to the function learn learnJavaScript().

Live Editor

function learnJavaScript() { function showNumberFive() { return 5 } return showNumberFive() }

function learnJavaScript() {
  function showNumberFive() {
    return 5
  }
  return showNumberFive()
}

Result

Loading...

Let's go through all this step by step:

• The keyword function indicates to the interpreter that the following code is user-defined, that is, a created by you, and not a built-in function.
• Written in camelCase showNumberFive ​​is the custom name for this function. For the interpreter, in general, it makes no difference exactly what this function is called, but it is better to give the functions names that clearly indicate what exactly they do.
• () brackets are a required element of any function. Sometimes one, two or more variables are enclosed in brackets , in our case there is nothing in the brackets.
• The body of the function itself must be enclosed in curly braces {} - the essence of the program algorithm.
• The body of the function itself is usually indented to the right (using the TAB key). This is not necessary for the execution of the program, but it is necessary for teamwork, since it greatly facilitates the readability of the code.
• The keyword return means that whenever we call this function, the value will be passed, that is," returned ", to the interpreter, therefore it is called the" return value of the function ".

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨