title: what is the difference between an OOP object.instance.function and OOP object.function in JS?
body: <p>I would like to <strong>understand</strong> what will be the <strong>difference</strong> in JS if I will call a function from an OOP including &quot;instance&quot; before calling the key/instance inside.</p>
  <p><strong>EDIT after solved:</strong></p>
  <p>I need to use the class as singleton but as @VLAS answer below when you export the class as default and add new it will make it singleton automatically. here is the syntax:</p>
  <pre><code>class Person {
      ...
  }
  export default new Person() //this syntax should make it singleton
  </code></pre>
  <p>the code before the edit for the explain of my issue:</p>
  <pre><code>import Person from './personManager';
  const person = new Person()
  person.introduceSelf()
  person.instance.introduceSelf()
  </code></pre>
  <p>I think its a syntax from ES5 that now in ES6 we are don't need any more? or there is something more complex that I didn't understand?</p>
  <p>in our project we have this code I just added the personManager.js for the example:</p>
  <p><strong>syngletonSymbol.js</strong></p>
  <pre><code>/* eslint-disable */
  let SingletonSymbol;
  if (!SingletonSymbol) {
    SingletonSymbol = (function (Object) {
      let ObjectPrototype = Object.prototype,
        defineProperty = Object.defineProperty,
        prefix = `__simbol${Math.random()}__`,
        id = 0;
  
      function get() { /* avoid set w/out get prob */ }
  
      function SingletonSymbol() {
        const __symbol__ = prefix + id++;
        defineProperty(
          ObjectPrototype,
          this._ = __symbol__,
          {
            enumerable: false,
            configurable: false,
            get, // undefined
            set(value) {
              defineProperty(this, __symbol__, {
                enumerable: false,
                configurable: true,
                writable: true,
                value
              });
            }
          }
        );
      }
  
      defineProperty(SingletonSymbol.prototype, 'toString', {
        enumerable: false,
        configurable: false,
        writable: false,
        value: function toString() {
          return this._;
        }
      });
  
      return SingletonSymbol;
    }(Object));
  }
  
  export default SingletonSymbol;
  </code></pre>
  <p><strong>singleton.js</strong></p>
  <pre><code>/* eslint-disable */
  const SingletonSymbol = require('./singletonSymbol');
  
  export default class Singleton {
    static get instance() {
      if (!this[SingletonSymbol]) {
        this[SingletonSymbol] = new this();
      }
  
      return this[SingletonSymbol];
    }
  
    constructor() {
      const Class = new.target ? new.target : this.constructor;
  
      if (!Class[SingletonSymbol]) {
        Class[SingletonSymbol] = this;
      }
  
      return Class[SingletonSymbol];
    }
  }
  </code></pre>
  <p><strong>personManager.js</strong></p>
  <pre><code>import Singleton from 'infrastructure/helpers/singleton';
  class Person extends Singleton{
    name;
    constructor() {
      super()
      this.name = 'John';
      this._init();
    }
    _init = () =&gt; {
        this.name = 'Mario';
    }
    introduceSelf() {
      console.log(`Hi! I'm ${this.name}`);
    }
  
  }
  </code></pre>
  <p>I will appreciate any answer that will help me to understand the idea and if all that singleton is something that is deprecated and can be deleted from my project</p>