Javascript Functions

Have you ever thought about the inner workings of a like button on Facebook? If not, from today you will understand what’s happening under the hood when you press the like button. So when you press it it will trigger a function where the function is instructed to increase the like count by 1 and then save it to the database. So how to define a function in javascript? below is the structure of a javascript function.

function functionName() {
  //function body
}

Here function is the keyword that is used to define a function. Then after the function keyword, we will write the function name. Here the function name is functionName. Then we start the first bracket and we close it that is (). Then we start to write the function body within the double curly that is {}. Follow the convention to define a variable or function name. Here we have written functionName as the function name where N is capitalized.

Let us define a function that will print “hello world”.

function printHelloWorld() {
  console.log("Hello World");
}

Here the function name is printHelloWorld and within the double curly we have instructed the function body that will console.log(“Hello World”).

To execute the we have to write the function name after it is defined and then open the first bracket and close it.

function printHelloWorld() {
  console.log("Hello World");
}
printHelloWorld()

The output will be

Hello World

This is the way we have to write a function and then execute it.

Let us take an example of a function that will add two numbers.

function addXY() {
  let x = 5;
  let y = 10;
  const sum = x + y;
  console.log(sum);
}
addXY();

The output will be

15

Let me give you another example where we have two variables x and y whose values are 5 and 10 respectively. First, declare those variables and then do the operation summation and multiplication within the function addXY and multiplyXY, and then print the values of summation and multiplication by executing the function.

function addXY() {
  let x = 5;
  let y = 10;
  const sum = x + y;
  console.log(sum);
}

function multiplyXY() {
  let x = 5;
  let y = 10;
  const mult = x * y;
  console.log(mult);
}

addXY();
multiplyXY();

In the above example, we have defined two functions and then we have executed them by calling the function. The output is

15
50

So as expected we did two operations on x and y and we got results that is printed in the console. But can you improve the code? In the above code, we have defined x and y in each function. You did not need to define it two times. Rather we can define it only once and reuse it multiple times as we need. Apart from that, we have used let to declare x and y where it is possible to redefine them again which in this case is not expected as we want x and y to be as it is. Let’s do that. After refactoring the code looks like this

const x = 5;
const y = 10;

function addXY() {
  const sum = x + y;
  console.log("sum of x and t is", sum);
}

function multiplyXY() {
  const mult = x * y;
  console.log("multiplication of x and y is", mult);
}

addXY();
multiplyXY();

In the above code, we moved x and y out of the functional scope and declare them in the global scope so that we can reuse them in as many functions as we can. Now the output is

sum of x and t is 15
multiplication of x and y is 50

Functional Scope is the scope where you declare a variable and you can only use them within the function but you can not use it outside of the function. In the global scope, you can declare a variable that can be used in any function that is defined in the global scope.

In this case, x and y are declared in the global scope and the functions are also declared in the global scope. So we can use the variables in these two functions.

Now we will declare another two variables in the global scope and hold the value returned from the two functions. Let me show you how to do that in code.

const x = 5;
const y = 10;

function addXY() {
  const sum = x + y;
  console.log("sum of x and t is", sum);
}

function multiplyXY() {
  const mult = x * y;
  console.log("multiplication of x and y is", mult);
}

const addition = addXY();
const mutiplication = multiplyXY();

console.log(addition);
console.log(mutiplication);

If you run the above code you will see

undefined
undefined

If you have done some calculation in a function and want to hold that value to a variable you have to return some value from the function

const x = 5;
const y = 10;

function addXY() {
  const sum = x + y;
  return sum;
}

function multiplyXY() {
  const mult = x * y;
  return mult;
}

const addition = addXY();
const mutiplication = multiplyXY();

console.log(addition);
console.log(mutiplication);

The output will be

15
50

So whatever value you return from a function you will hold that value to a variable if you execute the function and declare a variable to hold it.

If you return nothing from a function as we have shown first we will get undefined from that function. If we return null from the function we will get null.

Now we are doing everything in a function called main function.

function main() {
  const x = 5;
  const y = 10;

  function addXY() {
    const sum = x + y;
    return sum;
  }

  function multiplyXY() {
    const mult = x * y;
    return mult;
  }

  const addition = addXY();
  const mutiplication = multiplyXY();

  console.log(addition);
  console.log(mutiplication);
}
main()

Here everything is the same. But we defined everything in the main function and executed it at the end.

So outer scope variable can be used in the inner scope whereas the inner scope variable can not be used in the outer scope. So the last step is subtraction.

function main() {
  const x = 5;
  const y = 10;

  function addXY() {
    const sum = x + y;
    return sum;
  }

  function multiplyXY() {
    const mult = x * y;
    return mult;
  }

  const addition = addXY();
  const mutiplication = multiplyXY();

  console.log(addition);
  console.log(mutiplication);

  const subsctraction = mutiplication - addition;
  console.log(subsctraction);
}
main();

The output is

15
50
35

So you have done a little bit about function. As you proceed further in this series you will use more and more function and eventually become master of it.

In the next section we will take a look at Javascript Object.

Leave a Comment