Learn Javascript Functions

#javascript #beginners #programming #tutorial

Introduction

This article explains JavaScript function in detail and followed the previous JavaScript article Learn JavaScript__Part1. Therefore if you are not familiar with JS basics, you may check the mentioned articles.

What are Functions in JavaScript?

Functions are containers that hold reusable code and perform a particular task. Not just JavaScript but almost all programming languages have a concept of functions and every developer must deal with that while coding.

Functions are independent pieces of code and manage the large code. Before moving on how it performs a task, let's see how we can create a function.

In javaScript the function keyword is used to declare a function, to identify a function it should have a name.
Here is the syntax for function declaration

function  name(){

YOUR_CODE

}

Here is the example, the function "sayHi" can be created using a function keyword followed by "sayHi" [function name] and a set of parentheses, the function code will be written inside the curly braces. Whenever the function is called, it performs whatever instruction is written inside it, here I created this function that whenever it is called it should print I like JavaScript.

  function sayHi(){
      console.log("I like JavaScript")
  }
  sayHi();

// I like JavaScript

Here is another function example


  function myFunction(){
      console.log("Hello world");
      let c =  3 + 5;
      console.log(c);
  }

  myFunction();

/*
      Hello world
      8
*/

JavaScript functions can be used as reusable code. In below example, I don't need to type the code every time I need it, I can just call the function.


  function myFunction(){
      console.log("Hello world");
      let c =  3 + 5;
      console.log(c);
  }

  myFunction();
  myFunction();

/*
      Hello world
      8
      Hello world
      8
*/

Functions also accept parameters - parameters are the symbolic name for "data" that goes into a function. A function can have one or more parameters.

In the below example, the function has a parameter called num, num accepts a value and performs the function task based on that value. The parameter value will be initialized while calling the function.

  function myFunction(num){
     console.log(num * num)
  }
  myFunction(3);
  myFunction(10);


/*     9
       100
*/

You don't need to console.log in functions, the " return " is used to return the function statements.

  function myFunction(a, b){
    return a + b;
  }
  console.log(myFunction(3, 5));

//     8

What are the arrow functions?

ES6 introduced more cleaner and proper method for declaring function, let's compare these two functions.

// Normal function
const square = function(number){

return number * number;

}

//Arrow function
const square = number=> number * number;

I write the function called square in an arrow function method. To convert a JavaScript function to an arrow function method, you need to remove the function keyword and after the parenthesis we need a (=>), if there is no parameters for the function, just add an empty parenthesis.

If the return is just a single line, you can remove the return and curly braces.
You can read the arrow function as " number goes to number times number".