Image for post
Image for post

Functions in JavaScript — Learn Basics

Bharat Agarwal
Apr 21 · 5 min read

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()

Image for post
Image for post

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

Image for post
Image for post

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,

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Default Values of Parameters

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

When one parameter then () can be omitted

Image for post
Image for post

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

Image for post
Image for post

If Function has no Parameter and No return statement.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store