Exactly what is the difference between the three types of function declarations in JavaScript?

user_2642822 0
Viewed 99

I am aware of 3 different type of function declarations in Javascript, and I know minor differences, but I don't know why is it good, why do we need all three?

function MyObject{
    function SomeName(){}

    this.SomeName = function(){}

    var SomeName = function(){} 
}
function javascript
3 Answers

function SomeName(){}: you cannot assign SomeName to be another thing; the function gets hoisted to the nearest function scope, allowing you to declare it further down in the code while you use at the top

this.SomeName = function(){}: you expose this function so that it can be accessed via MyObject.SomeName

var SomeName = function(){}: you can assign SomeName to another thing; the variable name gets hoisted to the nearest function scope, but using it before the declaration will cause SomeName is not a function error

Just for fun, there's also

const SomeName = function(){}: you cannot assign SomeName to another thing; using it before the declaration will cause SomeName is not defined error

let SomeName = function(){}: you can assign SomeName to another thing; using it before the declaration will cause SomeName is not defined error

Preference

Personally, I tend to use export function SomeName(){} but const SomeName = () => {} when I do not immediately export the function.

user_2630030

They're actually similar. You're asking about differences in function expressions and function declarations

// function declaration
function add(a, b) {
  return a+b; 
}

// function expression
var add = function(a, b) {
  return a+b;
}

There is still a significant difference:

Hoisting : When a javascript file is loaded all of the functions written with function declarations are hoisted, basically "known", before any code is executed. So you can call a function earlier in the program, and declare it later. It will work.

Which is not the case with "function expressions". If you call a function before you've expressed it, It won't work.

// function declaration works
add(5, 10);
function add(a, b) {
  return a+b;
}

// function expression doesn't work
subtract(3, 9);
var subtract = function(a, b) {
  return a - b;
}

So you must declare the function expressions before you use them.

user_58209780

  1. function SomeName(){} ==> When you create a function like this it's a whole behavior or you can say it's the functionality of this function at the whole.

  2. this.SomeName = function(){} ==> This you are using for a particular instance of the time and later using the output of that function as any datatype.

  3. var SomeName = function(){} ==> function SomeName(){} and var SomeName = function(){} doesn't make that much significant difference. As it's just upon your need how you execute and use it. As the third version, you use you are assigning some value to it. So, it may consume memory more than that of version 1. Apart from it, I don't see any difference between them. More above applying var to any function you are assigning a datatype to a function which restricts its output at some context.

I hope I made your concept clear in short explanation. Any suggestion or query, I would like to respond.

user_99557880
Related