6

I created two Objects. The first one is working as intended.

let working = {constructor: function(){
  console.log("working");
}};

let notworking = {constructor(){
  console.log("notworking");
}}

new working.constructor();
new notworking.constructor();

But the second one throws an Error. The Error message is:

Uncaught TypeError: notworking.constructor is not a constructor

Tested on Firefox and Chrome.

In Firefox DevTools the Object itself looks the same. There is a difference in the constructor method. The working constructor has properties arguments, caller, length and name. The notworking constructor has only the properties length and name.

So what is the difference between these two objects or constructors?

Boann
  • 48,794
  • 16
  • 117
  • 146
Nico Richter
  • 227
  • 1
  • 9
  • the second "object" has no key (separated with a `:`) and a missing semicolon – biberman Jul 30 '21 at 13:53
  • Why are you using object literal notation to create an object with a constructor? Why not use a `class` or a `function`? – Heretic Monkey Jul 30 '21 at 14:02
  • 1
    https://www.stefanjudis.com/today-i-learned/not-every-javascript-function-is-constructable/ – Wiktor Zychla Jul 30 '21 at 14:12
  • @NicoRichter: please note that you can replace `constructor` with any name (`foo`) and this still holds, plain functions are constructable, methods (and arrow functions) are not. – Wiktor Zychla Jul 30 '21 at 14:17
  • constructor: ()=>{console.log("notworking")} – Hugo Cox Jul 30 '21 at 14:23
  • "*The working constructor has properties arguments, caller, length and name.*" - you forgot about [the most important one: `.prototype`](https://stackoverflow.com/q/48891399/1048572) :-) – Bergi Jul 30 '21 at 15:37
  • 1
    possible duplicate of [TypeError: function is not a constructor](https://stackoverflow.com/questions/43447648/typeerror-function-is-not-a-constructor-evaluating-new-self-f1) – Bergi Jul 30 '21 at 15:42
  • @Heretic Monkey I just played around with different types of how to create Objects. So for me it was just for interest, why there is a difference. I believed that doing the notworking one is like a already defined variable used in an object literal where name and value are set automatically i.e. let x=1; let y = {x} – Nico Richter Jul 30 '21 at 19:13
  • Also related: [Constructor behaving differently using ES6 shorthand notation](https://stackoverflow.com/questions/41193117/constructor-behaving-differently-using-es6-shorthand-notation) – Bergi Sep 23 '22 at 23:07

1 Answers1

4

The second syntax is the method syntax and it was introduced in ECMAScript 2015. They are almost equivalent, but there's a difference. In the first object, constructor is just a key whose value is a function. In the second object, constructor is a method. Method definitions are not constructable

Methods cannot be constructors. They will throw a TypeError if you try to instantiate them

From: MDN

adiga
  • 34,372
  • 9
  • 61
  • 83
  • Great catch. While most people seem to be rather aware that arrow functions cannot be used as constructors,, this particular rule is not that well known. – Wiktor Zychla Jul 30 '21 at 14:37
  • Thanks for your answer. Never heard of this before. Is there a way to check which type the function is and convert between these different function types? I have seen, that if you create a class the properties of methods are the same as methods. – Nico Richter Jul 30 '21 at 18:47
  • 1
    @NicoRichter No, you cannot convert them - they're meant for different purposes. And you also shouldn't try checking the type of the function, just try to call it with or without `new` and it will throw an exception if the caller of your code passed the wrong kind - document which one you expect and that's it. But if you absolutely need to, [there are ways to test for functions being constructors](https://stackoverflow.com/q/40922531/1048572). Pre-ES6, the existence of a `.prototype` property on the function is also a pretty good indicator. – Bergi Jul 30 '21 at 22:16