I'm trying to understand the difference between 2 different function declarations in JavaScript.

Consider the following code snippet:

function SomeFunction(){

   this.func1 = function(){
   }

   function func2(){
   }
}

What is the difference between the declarations of func1 and func2 above?

I'm trying to understand the difference between 2 different function declarations in JavaScript.

Consider the following code snippet:

function SomeFunction(){

   this.func1 = function(){
   }

   function func2(){
   }
}

What is the difference between the declarations of func1 and func2 above?

• javascript

• 1 If you instantiate an object from SomeFunction you wont be able to access func2 from the instance. You should also consider to use SomeFunction.prototype so you wouldnt create an own function object for each single instance. – Teemoh Commented May 24, 2017 at 4:32

5 Answers 5

In simple language, fun1 is a property of SomeFunction class holding a reference of anonymous function where func2 is named function.

Property

Here fun1 is property of that SomeFunction class, it means when you create instance of SomeFunction class using new keyword, then only you can access it from outside.

Private Method

Here fun2 will work as private method of class SomeFunction, and will be accessible inside that class only.

Sample

function SomeFunction() {
  this.func1 = function() { console.log("in func1") }
  function func2() { console.log("in func2") }
}

var obj = new SomeFunction();

obj.func1();  //Accessible 
obj.func2(); //Not accessible

This way of declaring functions is called Function Expression. This kind of functions can be called only after definition of the function. Function expressions load only when the interpreter reaches that line of code.

var func1 = function() {
     // Code here
}

This way of declaring functions is called Function Declaration. Function declarations load before any code is executed. So it can be called anywhere in the program before it's definition. For reason, read about Hoisting in Javascript

func1 () {
     // Code here
}

When defining these inside another function, Function Expression acts as the property of the function and can be accessed using the object of the parent function. Whereas, the scope of Function Declaration is inside the parent function, so it is not accessible from outside the parent function. This is a very important property in Javascript using which we can simulate the Object Oriented Nature.

In brief, Function declaration acts as Private method of a class and Function Expression as Public method.

Here is the working example below to understand more about it.

function SomeFunction(){
    
  this.func1 = function() {
    console.log('Public function.')
  }
  
  function func2() {
    console.log('Private function.')
  }
  
  this.func3 = function() {
    func2();
  }
  
}

var obj = new SomeFunction();

obj.func1(); // Public Function.
// Can be accessed as it is a Public function
obj.func3(); // Private Function.
// Can be used to access a private function.
obj.func2(); // Error: Uncaught TypeError
// Private function

Hope this helps! :)

function SomeFunction() {

  // Function Expression
  this.func1 = function() {

  }
  // Function Declaration
  function func2() {

  }
}

Update:

Based in your question: What is the best way to declare functions within a Javascript class?

In OOP programming a Class has attributes and methods.

In the following sample code, the Person class contains:

(2) Attributes:

• name
• country

(1) Method:

• showPerson1()

function Person(name, country) {
  // Attributes of Person class.
  this.name = name;
  this.country = country;

  // Function Expression:
  this.showPerson1 = function() {
    var personMessage = "Hi, my name is ";
    personMessage += this.name;
    personMessage += ". I'm from ";
    personMessage += this.country;
    personMessage += ".";
    return personMessage;
  };

  // Function Declaration:
  function showPerson2() {
    var personMessage = "Hi, my name is ";
    personMessage += this.name;
    personMessage += ". I'm from ";
    personMessage += this.country;
    personMessage += ".";
    return personMessage;
  }
}

var person1 = new Person("John", "United States");
console.log(person1.showPerson1()); // Prints: Hi, my name is John. I'm from United States.
console.log(person1.showPerson2()); // Throws an error.

As you can see, you can execute the showPerson1() method because is reference to the Person class by using this keyword and using the Function Expression style.

However, you can't execute showPerson2() method because this function was not created like a reference to the Person class.

You can find more information here.

As far as I know your question revolves around scope. Let's say for a second that you had a main class that called upon functions from other classes. Maybe these other classes have a function called func1 that you needed to use. But wait, you want to use the name func1 in your main class as well without mentioning the global function from the other class. Using this.func1 would allow you to access it as a local function, since .this refers to a local scope.

Basically, it allows him to store the result of the function without declaring a separate variable, which is nice since it's only probably going to be used temporarily and in the context of the function in which it was declared.

Additional Reading (Or in case my analogy falls flat):

http://javascriptissexy./understand-javascripts-this-with-clarity-and-master-it/ https://www.w3schools./js/js_function_invocation.asp

The func1 is actually a property on SomeFunction so essentially you can do

const someClass = new SomeFunction();
someClass.func1()

But you cannot do

const someClass = new SomeFunction();
someClass.func2()

because it is not attached to that class. However, you can still use the func2 internally in your class SomeFunction but not outside the class.

ES6 provides more clean syntax to understand this.

class SomeClass{
  func1(){
    //function body
  }
}

Hope this helps