How to create an object from javascript function

Question

I'm trying to learn about objects and JavaScript.

The problem I have is, it appears as if both the following do the same thing. My research shows nothing about what (if any) differences there are but this may be because it's very hard to question this within a search box.

Within the code, I've added comments to emphasise the differences

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id = "results"></div>
  <script>

"use strict";
const results = document.getElementById("results");

const Thing = function(){                /* ****** THIS */
      var _x;
      this.set = function(x){
      _x = x;
      },

        this.alert = function(){
            results.innerHTML += _x + "<br />";
        };
    };

    function Other(){                    /* ****** AND THIS */
        var _x;
      this.set = function(x){
      _x = x;
      },

        this.alert = function(){
            results.innerHTML += _x + "<br />";
        };
    };

    const t = new Thing();
    t.set("b");
    t.alert();
    const t2 = new Thing();
    t2.set("b2");
    t2.alert();
    t.alert();
    t2.alert();

    const o = new Other();
    o.set("d");
    o.alert();
    const o2 = new Thing();
    o2.set("d2");
    o2.alert();
    o.alert();
    o2.alert();

  </script>
</body>
</html>

JSFIDDLE

What is the difference or are they both valid?

EDIT

I have seen the duplicate var functionName = function() {} vs function functionName() {}. The difference between the questions is I'm using the word new. My question is, does that actually make a difference?

Possible duplicate of [var functionName = function() {} vs function functionName() {}](https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) — CRice, Apr 20 '18 at 17:20
@CRice is it the same, because the difference I see is my example, the use of the word `new`. I'm happy to accept the dupe of course (and for the record I did Google search first), but it would be really good and reassuring to know for sure — MyDaftQuestions, Apr 20 '18 at 17:24

score 2 · Answer 1 · answered Apr 20 '18 at 17:54

You might find this interesting.

You can use new on regardless of function declaration or expression.
Look at the console output. New creates a new instance of the function. There doesn't appear to be any other side effect.

function funcOne() {};

var f1 = funcOne;
var f2 = funcOne;

var fx = new funcOne();

console.log(funcOne==f1); //true
console.log(f1==f2); //true
console.log(funcOne==fx); //false

const funcTwo = function(){};

var f3 = new funcTwo();
var f4 = new funcTwo();

console.log(funcTwo==f3) //false
console.log(f3==f4); //false

If you're looking for some discussion of functions as objects, I recommend this thread javascript : function and object...?

score 2 · Accepted Answer · answered Apr 20 '18 at 17:55

The steps that new takes are (from MDN):

A new object is created, inheriting from Foo.prototype.

The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.

The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)

It doesn't matter that you used a function expression or a function declaration at that point; just that you used a function.

function Foo() {
    this.hello = "world";
}

const Bar = function() {
    this.fizz = "buzz";
}

const foo = new Foo();
const bar = new Bar();

console.log(foo instanceof Foo);
console.log(bar instanceof Bar);

How to create an object from javascript function

2 Answers2