A Deep Dive Into JavaScript Functions

Sonu Yadav — Tue, 04 Feb 2020 10:43:20 +0000

A Deep Dive Into JavaScript Functions

There is a lot of information about functions in JavaScript on the Internet, but in this article, we'll try to dig deep into it and we'll make sure to cover every minute detail of it.

Introduction

Every function in JavaScript is said to be a Function Object.

The function is a set of reusable code that is designed to perform a particular task.

It is mainly composed of several statements which are usually called function bodies.

Also, functions are said to be first-class objects because they can be assigned to a value, and they can be passed as arguments and used as a return value.

Syntax

Let's get started with writing a function that prints the best of luck to console.

Function declaration:

function wishLuck() {
  console.log("Best of luck")
}

In the above example function is known as function keyword and wishLuck() is the function name and the part which is under curly brackets is called function body or statements.

Functions can also be assigned to variables (this is called a function expression):

var dosomething = function dosomething(x) {
  // statement
}

Declaring a function with named expression is useful because when an error occurs it holds the name of a function.

Parameters

A function can have one or more than one parameter.

function data(x,y) {
  var z = x * y;
}
data(4,5);

In the above example x,y is said to be the parameters and the value 4,5 are called arguments.

data(4,5)

data(4,5) means that data function has been called and it needs to perform the task as assigned.

Capturing a function

function data(x,y) {
  var z = x * y;
}
var v = data(4,5);

As you can see the value of data function has been stored to new variable v this is known as capturing.

Return Values

Every function returns a value, which by default is undefined.

function dosomething() {
  return 'test'
}
var result = dosomething()

If you pass a value, that value is returned as the result of the function. You can only return one value.

Returning multiple values, you can return an array, and use a destructuring assignment when calling the function.

function student(){
  return[Alex,6]
}
var [name,age] = student();

So when you will call student() function it will give its output as name: Alex and age: 6.

Nested functions

Functions can be used or defined in other function as well and this is known as nested functions.

function dosomething() {
  function dosomethingelse() {
    //some code here
  }
  dosomethingelse()
  return 'test'
}

The nested function is scoped to the outside function, and cannot be called from the outside. This means that dosomethingelse() is not reachable from outside dosomething().

function dosomething() {
  function dosomethingelse() {
    //some code here
  }
  dosomethingelse()
  return 'test'
}

dosomethingelse() //ReferenceError: dosomethingelse is not defined

The inner function is scoped to the outside function and it cannot be used out of its scope because of which when it is called outside of its scope its gives an reference error.

Any function is terminated when its lines of code end, or when the execution flow finds a return keyword.

Diferent ways of writing functions

1. A function that takes no arguments and returns nothing.

function sayHi() {
  console.log("Hi");
}

As you can see we have created a function called sayHi() that has no arguments and no return value.

2. A function that takes something and returns nothing.

function sayHi(name) {
  console.log("Hi "+ name);
}
sayHi("sunny")

3. A function that takes something and returns something.

function data(x,y) {
  var z = x * y;
  return z;
}
var v = data(4,5);

IIFE, Immediately Invocated Function Expressions

An IIFE is a function that’s immediately executed right after its declaration

var something = (function dosomething() {
  return 'something'
})()

Function Hoisting

JavaScript before executing the code reorders it according to some rules.

Functions in particular are moved at the top of their scope. This is why it’s legal to write

dosomething()
function dosomething() {
  console.log('did something')
}

// Output: did something

JavaScript moves the function before its call, along with all the other functions found in the same scope:

function dosomething() {
  console.log('did something')
}
dosomething()

Now, if you use named function expressions, since you’re using variables something different happens. The variable declaration is hoisted, but not the value, so not the function.

dosomething()
const dosomething = function dosomething() {
  console.log('did something')
}

// Output: Uncaught Reference error: dosomething is not defined

Conclusion

In this tutorial, we have learned about javascript functions from basics and have mostly tried to cover every part of it to get started with function.

You can learn more about functions i.e writing functions easily with arrow functions while learning ES6+.

Now, let's go and get started by using a function and building something useful with the help of it.

DEV Community: Sonu Yadav

A Deep Dive Into JavaScript Functions

A Deep Dive Into JavaScript Functions

Introduction

Syntax

Parameters

Capturing a function

Return Values

Nested functions

Diferent ways of writing functions

1. A function that takes no arguments and returns nothing.

2. A function that takes something and returns nothing.

3. A function that takes something and returns something.

IIFE, Immediately Invocated Function Expressions

Function Hoisting

Conclusion