1

I was tackling this question in leet code:

Implement the MapSum class:

MapSum() Initializes the MapSum object. void insert(String key, int val) Inserts the key-val pair into the map. If the key already existed, the original key-value pair will be overridden to the new one. int sum(string prefix) Returns the sum of all the pairs' value whose key starts with the prefix.

In javascript, the template for solving the question is:

/**
 * Initialize your data structure here.
 */
var MapSum = function() {

};

/** 
 * @param {string} key 
 * @param {number} val
 * @return {void}
 */
MapSum.prototype.insert = function(key, val) {

};

/** 
 * @param {string} prefix
 * @return {number}
 */
MapSum.prototype.sum = function(prefix) {

};

/** 
 * Your MapSum object will be instantiated and called as such:
 * var obj = new MapSum()
 * obj.insert(key,val)
 * var param_2 = obj.sum(prefix)
 */

I was struck by the class template. I'm used to seeing javascript classes more similar to this:

class MapSum {
  constructor() {

  }

  insert(key, value) {

  }

  sum(prefix) {

  }
}

Is the template leetcode provided, considered a class? What kind of class is it? What is it called when you initialize an object via function expression (var MapSum = function() { //....}) ? What are the biggest differences/implications from writing a class that way vs the way I suggested?

maddie
  • 1,854
  • 4
  • 30
  • 66
  • 3
    The `class` syntax is relatively new to JavaScript. It does basically (not exactly) what a constructor function and prototype initialization does. – Pointy Apr 19 '21 at 19:02
  • https://www.w3schools.com/js/js_object_constructors.asp / https://www.w3schools.com/js/js_object_prototypes.asp – CherryDT Apr 19 '21 at 19:05
  • Does this answer your question? [What is the difference between (function(global){}(this), constructor functions, and classes in Javascript?](https://stackoverflow.com/questions/47540155/what-is-the-difference-between-functionglobalthis-constructor-functions) – CherryDT Apr 19 '21 at 19:06
  • 2
    This tutorial looks obsolete (apart from prototypes, they're using `var` and seem not to be aware of the built-in `Map`). Just find another one. – georg Apr 19 '21 at 19:31

1 Answers1

0

The class keyword is actually just syntaxic sugar over prototypal inheritance

This code demonstrates that the two syntaxes are equivalent:

class MapSum {
  constructor() {
    
  }
    
  insert(key, value) {
    
  }
    
  sum(prefix) {
    
  }
}

console.log(typeof MapSum); // function (actually the constructor)
console.log(MapSum.prototype.insert); // function
console.log(MapSum.prototype.sum); // function

A class is actually just a constructor function, which has a special object named prototype attached to it. Every instance of the class has an internal link to the prototype of the constructor.

Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • So I am understanding that my version is syntactic sugar over Leetcode's template. If I used a class - what is it called, what Leetcode did? Function expression? Object constructor? – maddie Apr 19 '21 at 19:21
  • I don't know if leetcode supports ECMAScript2015 (also known as ES6) but if it does the behavior should be the same because it will test your code by calling `new MapSum(...)` then calling the methods on the instance. – Guerric P Apr 19 '21 at 19:27
  • 1
    The two syntaxes are [prototypal inheritance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain), your version is just a modern syntax. – Guerric P Apr 19 '21 at 19:30