Web programming

Understanding Functions in JavaScript

Ngoc Phuong

Ngoc Phuong

2020-02-24 . 118 view

 In programming, there is quite important knowledge that anyone who studies must understand, that is function. What a function is, types of functions in JavaScript, and how to use, will be presented in the article below.

I. What is a function?

A function is a set of command lines used to solve a specific problem depending on the input and can return a corresponding result. This makes programming easier, allowing for reuse of code and effective product changes and upgrades.

II. Types of function in JavaScript

1. Normal functions

A function without parameters is a function whose execution result always remains the same.

Example of a normal function with no parameters and no return value.

function sayHelloWord () {
  console.log("Hello Word!");
}

sayHelloWord(); // Gọi function sayHelloWord

Example of a normal function with parameters and a return value.

function square(number) {
 return number * number;
}
console.log(square(2));

2. Arrow functions

Arrow Function is an alternative way of writing functions supplemented from ES6, making the code concise and easy to understand. Arrow functions do not bind to this.

Example of an Arrow Function with no parameters and does not return any value.

const sayHelloWord = () => {
  console.log("Hello Word!");
}
sayHelloWord();  //Cách gọi 1 Arrow Function giống như gọi 1 Function bình thường

Why doesn't the above function return any value?

=> If you try to store the result of the function call above in a variable, it will receive a value of undefined. Follow the example below

let message = sayHelloWord();
// The below console.log will return undefined as the function 
// doesn't return any value.
console.log (message);

Note: If a function does not return any value explicitly, by default when the function is called it will return undefined.

Example of an Arrow Function with parameters and a return value.

const total = (a, b) => {
 return a + b 
};

3. Anonymous functions

Anonymous functions are unnamed functions, a function that is generated exactly at the runtime of the program. Anonymous functions are declared using operator rather than using the normal function definition syntax.

Example of an Anonymous function

var callMe = function()
{
    alert('Alo!');
};
callMe();

4. Function taking a function as a parameter (callback function)

Functions are first-class objects so they can be passed as parameters/arguments in a function.

Follow the example below for a better understanding.

// Định nghĩa một hàm tên là dispatch để nhận một hàm làm tham số truyền vào.
    function dispatch(cb) {
        cb();
    }

    // Cách 1: khai báo 1 arrow function để làm tham số
    const say = () => {
        console.log("Hello Word 1!");
    }
    dispatch(say);

    // Cách 2: khai báo 1 anonymous function bên trong
    dispatch(function () {
        console.log("Hello Word 2!");
    });

    // Cách 3: khai báo 1 arrow function bên trong
    dispatch(() = > {
        console.log("Hello Word 3!");
    });

5. Function can call itself (like recursion)

In programming, there is a concept of recursion, functions can call themselves. If you don't add a condition to stop, it will run forever until memory overflow and crash.

Example of a function being called again and handling the stopping condition.

function countDown(n) {
  console.log (n);
  if (n >= 1) {  //Điều kiện để dừng
    countDown(n-1);
  }
}

countDown(5);  // -> Output sẽ là 5, 4, 3, 2, 1, 0

 

Ngoc Phuong
Ngoc Phuong

Web Developer

Thank you for visiting my website. My name is Ngoc Phuong, and I have over 10 years of experience in website development. I am confident in stating that I am an expert in creating impressive and effective websites. If you need a website designed, please feel free to contact me via email at [email protected].

0 feedback