Functions in JavaScript — Learn Basics

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure — a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.

A function definition (a function declaration) consists of the function keyword, followed by:

• The name of the function.
• A list of parameters to the function separated by commas and enclosed in parentheses.
• The JavaScript statements that define the function, enclosed in curly brackets, {...}.

Example, the following code defines a simple function named multiplyby2()

The function multiplyby2 takes one parameter, called number. The function consists of one statement that says to return the parameter of the function (that is, number) multiplied by itself.

Why Functions?

You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce different results.

Basic syntax

A Function can take multiple parameters or no parameters at all, and function can return a statement or does not return any statement it can be a void function (A function when does not return anything).

For example,

here function showName() does not take any parameter and does not return any statement.

Here function showName()does not take any parameter and return Bharat Agarwal as String.

here function fullName() takes 2 parameters firstName and lastName and return Full Name by concatenating First Name and Last Name.

Default Values of Parameters

First has only one non-default.
The second has both a and b.
Third has all three arguments

First, it has no arguments.
Second, b is taken as Default.
Third, a is taken as Default
Fourth, both are passed

When the Default value of any parameter is used then it is optional to pass its value while calling, if you pass value while calling then it will take passed value otherwise default value will be taken

Function Expression

A function expression is determined by a function keyword, followed by an optional function name, a list of parameters in a pair of parenthesis (para1, ..., paramN) and a pair of curly braces { ... } that delimits the body code.

The function is assigned to a variable as an object fullname = function(.){.}

Arrow Functions

An arrow function is defined using a pair of parenthesis that contains the list of parameters (param1, param2, ..., paramN), followed by a fat arrow => and a pair of curly braces {...} that delimits the body statements.

An Arrow Function Expression is a shorter syntax for writing function expressions. Arrow functions do not create their value.

Different Types of Arrow Functions

It looks like a regular function expression but has an arrow (=>) key.

When one parameter then () can be omitted

When there is only one statement i.e. return then return statement and {} can be omitted

If Function has no Parameter and No return statement.

The function does not has any parameter and return the string “Bharat Agarwal”

Multiple Parameters passed in an arrow function addAll() returns addition of all x, y, z

Default parameters in an arrow function. This will return multiple of all three numbers irrespective of any parameter is passed or not.

Shorthand method definition

Shorthand method definition can be used in a method declaration on object literals and ES2015 classes. You can define them using a function name, followed by a list of parameters in a pair of parenthesis (para1, ..., paramN) and a pair of curly braces { ... } that delimits the body statements.

add() and get() methods in the collection object is defined using a short method definition. These methods are called as usual: collection.add(...) and collection.get(...)

Function with: new Function

The Function constructor creates a new Function object.

new Function way to declare functions normally should not be used. Mainly because it opens potential security risks, doesn’t allow code auto-complete in editors and loses the engine optimizations.

Which Function Type to Choose? 🤔

There is no harden fast rule to choose the same declaration type of function. The decision which declaration type to choose depends on the situation.

Loved the article? Don’t Forget to 👏.

Got questions or feedback? Let me know in the comments! Thanks for reading! Hope the information was helpful.