Categories

Javascript Functions

Posted on: December 26, 2016 by Dimitar Ivanov

The JavaScript language has a great variety of definition methods for functions. Knowing the differences between them helps to make your code better. This article describes the syntax and discusses their strengths and weaknesses. Its aim is to go through all traditional and modern ways to create a function in javascript.

function declaration

The most popular way to define a function in javascript language is a function declaration. Its syntax includes the function keyword, followed by the function name and function parameters enclosed in parentheses. While the parameters are optional, the parentheses are mandatory. The function body is enclosed in curly braces.

function square(x) {
    return x * x;
}
square(3); // 9

function expression

Also known as function literal, it creates a variable and store a function into. The optional name can be used in recursive functions or by debuggers and dev tools.

  • Anonymous function expression:
    var square = function(x) {
        return x * x;
    };
    square(3); // 9
    
  • Named function expression:
    var getFactorial = function factorial(n) {
        if (n === 0) {
            return 1;
        } else {
            return n * factorial(n - 1);
        }
    };
    getFactorial(5); // 120
    
  • Self-defining functions:
    var hello = function () {
        console.log('Guten tag');
        hello = function () {
            console.log('Bonjour');    
        };
    };
    hello(); // Guten tag
    hello(); // Bonjour
    

Function declarations are hoisted to the top of their scope. This is not valid for function expressions. That's why a function expression could not be invoked before being assigned to a variable. And that's the main difference between them.

The Function constructor

The Function constructor creates a new object with type of function. It syntax includes the new keyword right before the Function keyword. Then follows a multiple parameters (optional) and function body which are enclosed in parentheses. However, the use of Function constructor to create functions is not recommended.

var multiply = new Function('x', 'y', 'return x * y');
multiply(2, 3); // 6

var rand = new Function('return Math.floor(Math.random() * 9999)');
rand(); // 1917
rand(); // 6143

Self-invoked functions

These type of functions are immediately executed at the place they are defined.

  • Anonymous self-invoked functions:
    (function (x) {
      return x * x;
    })(2);
    
    // 4
    
  • Self-invoked function declaration:
    function speak(text) {
      console.log(text);
    }('JavaScript Rocks!');
    
    // JavaScript Rocks!
    
    speak('JavaScript functions tutorial'); // JavaScript functions tutorial
    

arrow functions

The ES6 fat arrow functions has some differences compared with traditional function expressions. They have a shorter syntax, always are anonymous, does not change the value of this, do not own arguments object and can't be used as constructor functions.

  • Syntax:
    // No parameters
    var rand = () => Math.floor(Math.random() * 9999);
    
    // Single parameter, parenthesis are optional
    var square = x => x * x;
    
    // Multiple parameters
    var multiple = (x, y) => x * y;
    
    // Statement over expression
    var divide = (x, y) => { if (y === 0) { throw new Error('Can not divide to zero'); } return x / y; };
    
  • The new keyword:
    new square(); // Uncaught TypeError: square is not a constructor
    
  • The prototype property:
    square.prototype; // undefined
    
  • The arguments object:
    var multiple = (x, y) => {console.log(arguments); return x * y};
    multiple(2, 5); // Uncaught ReferenceError: arguments is not defined
    
  • Browser compatibility: IE - no support, Edge 12+, Firefox 22+, Chrome 45+, Safari 10+, Opera 32+

Callback functions

Those functions that are passed as an argument to other functions are called a callback functions.

  • Named callback functions
    function callback() {
        console.log('I am callback');
    }
    window.setTimeout("callback", 1000);
    
  • Anonymous callback functions
    window.setTimeout(function () {
        console.log('I am callback');
    }, 1000);
    
  • Callback functions in jQuery
    // Named callback
    $('button').click(callback);
    
    // Anonymous callback
    $('button').click(function (event) {
        console.log('I am callback');
    });
    
    // AJAX callback (named)
    $.get('ajax.php').done(callback);
    
    // AJAX callback (anonymous)
    $.get('ajax.php').done(function () {
        console.log('I am callback');
    });
    

Arguments object

The arguments array-like object represents parameters in every javascript function except the ES6 fat arrow functions.

function ratio() {
    if (arguments.length === 2) {
        return arguments[0] / arguments[1];
    }
    throw new Error('Invalid number of arguments');
}
ratio(16, 9); // 1.7777777777777777
ratio(16); // Uncaught Error: Invalid number of arguments
See also
Share this post

If you have questions about javascript functions, leave a comment below. Thanks so much for reading.


0 Comments

Leave a comment

Captcha