Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

JavaScript Functions

4.91/5 (11 votes)
20 Dec 2017CPOL2 min read 9.9K  
Javascript Functions explained

JavaScript has evolved into a mainstream language over a decade. The amount of flexibility that JavaScript provides has made it into a powerful language.

In JavaScript, almost everytime a piece of code is written, it's usually written inside a function. Most of our code execution is a result of function invocation. To better understand the functions, we need to look at some of the features of the JavaScript Objects. Javascript Objects can:

  • be created with literals
  • be assigned to variables, arrays, and properties of other objects
  • be passed to the functions as arguments
  • have properties
  • be returned as value

Well, JavaScript function can do all that the Object can, with an addition of having the capability to be invoked. We can safely say that JavaScript Functions are objects, that can be:

  • created with literals:
    JavaScript
    function myFunc() { };
  • assigned to variables, arrays, and properties of other objects:
    JavaScript
    var myFunc = function() { };     //Function assigned to variable
    
    myArray.push(function() { });    //Function pushed into the array
    
    myObj.myFunc = function() { };   //Function assigned to object's property
  • passed as an argument to other function:
    JavaScript
    function myFunc(someFunc) {
        someFunc();
    }
    myFunc(function() { });
  • have properties:
    JavaScript
    var myFunc = function() { };
    myFunc.someProperty = "George";
  • returned as value:
    JavaScript
    function myFunc(){
         return function() { };
    }

Defining JavaScript Functions

Functions in JavaScript can be defined in a number of ways.

Function Declaration and Function Expression

Two of the most common ways a function could be defined in JavaScript is via Function Declaration and Function Expression. Function Declaration takes the function keyword followed by the function's name along with the parenthesis for function parameters and opening and closing curly braces, like:

JavaScript
function myFunc() {
     return "Function Declaration";
}

On the other hand, Function Expression works like any expression written in JavaScript with just the function keyword along with function parameters and the function body, like:

JavaScript
var myFunc = function() { return "Function Expression"; };

Immediately Invoked Function Expressions

As the name suggests, functions defined as Immediate Functions are evaluated as soon the expression is written. The IIFE mimic the module development in JavaScript:

JavaScript
var sum = (function (param1, param2) { return param1 + param2;  })(2,3);

Arrow Functions

Arrow Functions are an ES6 addition of JavaScript. They can be seen as a simplification to the Function Expressions by adding syntactic sugar to it. Arrow Functions are defined with fat arrow sign =>, like: 

JavaScript
var var1 = name => "Hi " + name;   //Defines an arrow function
var var2 = var1("George");

In case there is no parameter for the function, an arrow function can be defined as:

JavaScript
var myFunc = () => alert('Arrow Function Invoked');

In the next article, I will try to explain the implicit parameters that the JavaScript Function has.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)