Functions in JavaScript.

• There are many core building blocks in programming language JavaScript included, and one the fundamental of any programming language is a function.

Function can simply be defined as code on demand or a block of code, which can be executed at a later point of time or called anywhere in your code to perform a specific task.

How to create functions

** Function Declaration**

A function declaration (also known as a function statement, or function definition) must have the following:

• Function keyword  (must).

• Any name of your choice, which serves as the name of the function.

• A parameter or list of parameters enclosed in parentheses (not a must).

• The function body is between curly brackets, which is the code you want to execute.

The code below shows a function named upscale.

The above function has the function keyword, the body of the function (code inside the curly brackets), but doesn’t have a parameter.

Function expressions

 Function expression syntax is almost the same as that of a function declaration/statement, but in this case, the function is defined inside an expression with the function keyword at the right side of an assignment operator.

 

Anonymous Function

An anonymous function is the same as a function expression without a function name. An anonymous function can be used where you don’t store them in variables. An example is when it is used in an addEventListener method.

Arrow function

The arrow function is a newly added feature to JavaScript to shorten and make our code neater. In this form of writing a function, the keyword "function" that is a must in all of the above ways of defining a function is not needed. Instead, we make use of an arrow symbol. It is always used on the right side of the equal sign and in place of the anonymous function. A sample is shown in the code below.

The above code can be re-written in a shorter way if there is no argument, as shown below.

Note: An empty pair of parentheses is required.

Parentheses can be removed outright if there is only one parameter/argument, and if there is a single expression in the code, it can be written as shown below, where curly brackets can be omitted.

Calling the defined functions

JavaScript will store the above code in memory because the code doesn’t run immediately when the script is loaded until you execute it by calling the function.

A function is called using the name of the function with parentheses, and can be called as often as you like and wherever you want it to be called in your code.

Function Hoisting

For function declarations and statements, the code is automatically hoisted to the top and fully initialized by JavaScript, which means a function statement can be called before declaring it.

While the code is hoisted to the top in function expressions, it is, however, hoisted as undefined as you can’t call a function expression without defining it.

The difference between functions and methods

Functions are reusable code that can be called anywhere in your code to execute a specific task. A method is also a function, but a function associated with an object or data type (String). They are defined on an object or a data type (String), whereas a function is defined on its own.

Rest Parameters

The rest parameters/operator look like the spread operator. You add three dots "..." but the place you use the operator is different from the spread operator. In rest operator, the three dots are used in the function parameter list to perform the task of taking all the arguments the function gets and merging them all into an array, which enables you to call the function without passing an array.

One important note about rest parameters is that there must not be more than one rest parameter and they must be the last arguments on the list.

Functions inside of functions

It is quite possible to have functions inside of functions, with the exception that the function inside will have a local scope to the functions. This kind of function is also known as a nested function.

If you noticed from the above code, the nested function is inside of an object. Don’t be surprised, the function is also an object.

**Parameters and arguments

**

It is not suicidal for a programmer to use the words "parameter" and "argument" interchangeably, but there is a slight difference between the two.

Parameters are those variables used while defining a function within the parentheses.

Arguments, on the other hand, are the concrete values you pass to a function when calling it.

 

 

Understanding callback functions

Callback functions are functions called for you by something else that can’t be controlled. This can be achieved with either an anonymous function or by storing it in a constant and passing the pointer to the function.

In the above code shown, we are passing a pointer to a function to another function, which makes it a value for a parameter of the addEventListener function.

I hope you will learn one or two tips from this article.

Enjoy.