Skip to main content

Command Palette

Search for a command to run...

Functions in JavaScript

Published
3 min read
Functions in JavaScript
V

Hello, I'm a Frontend engineer with a passion for learning new tech, writing blogs, and sharing my knowledge with others.

Apart from coding, I love staying up-to-date with the latest trends and tools in the tech industry. I'm always learning and exploring new technologies and techniques to improve my work and create more efficient and scalable solutions.

I enjoy sharing my knowledge with others through writing blogs and creating courses. Recently, I created a course for Educative on React.

As a freelancer, I'm seeking projects related to Shopify and React. I enjoy working on projects that challenge me and help me grow as a developer.

In this blog, we will learn about functions like any other programming language JavaScript also has functions that help us to perform the same task again and again without writing the same code again.

1. Function

​Syntax:

carbon.png

functionName = Name of the function (add, sub etc.)

para1, para2 = Parameters

functionName( arg1 ,arg2 ) = Function calling

arg1 , arg2 = Arguments

The function call is used to execute the code inside the function body.

  • Hoisting

It is the JavaScript feature that allows us to call the function before it is declared.

NOTE: Arrow function does not support Hoisting.

carbon (2).png

  • Argument VS Parameter

Most of the time developers use both these words interchangeably. However, they are different.

Arguments are the values that you pass while calling the function. Parameters are the values that you give while defining the function.

carbon (6).png

  • First-Class Citizens

JavaScript functions are First-Class-Citizens that means you can store functions in variables, you can pass them into another function as an argument, you can also return another function as a return value.

a. Store function as a variable

carbon (3).png

Here we stored subtract function in the result variable.

b. Pass function as an argument

carbon (4).png

anotherFunction = is a High Order Function

subtract = is a callback function

Here we passed the subtract function as an argument to anotherFunction. Functions that accept other functions as an argument, or return another function are called High Order Function and that function which is passed as an argument is called callback function.

c. Return another function as a return value

carbon (5).png

Here we are returning multiply function as a return value to the calculation function.

Types of the functions in JavaScript

(i) Anonymous Functions

(ii) Immediately Invoked Function Expression (IIFE)

(iii) Arrow functions


2. Anonymous Functions

Anonymous functions are functions without names. The anonymous function has no name between the function keyword and the parentheses (). These functions are defined by declaring a function body to a variable.

carbon (7).png


3. Immediately Invoked Function Expression (IIFE)

IIFE are the functions expressions that are invoked just after the declaration of the function.

carbon (8).png


4. Arrow Function

Arrow function was provided in the ES6 version of JavaScript. It is the shorter syntax to write the functions.

carbon.png

You can avoid using parentheses() if there is only ONE parameter used in the function. But if there are no parameters used then you MUST USE parentheses().

carbon (1).png

You can also avoid the curly brackets { } if the function is only of one line.


Thanks for reading the blog. Do share your valuable feedbacks.

Connect on Twitter

J

Great post Vansh. I didn't know about Hoisting. Are there any other differences between regular functions and arrow functions? I've heard that there are but I don't know what they are.

1
V

Thanks, John Yes, there are other differences also like "this" keyword, argument object.

To know more you can read this post https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/

1