JS クラスの動作確認 console.logでうまく表示されない

Question

2つの配列を比較して、同じ値がある場合は、一つだけを配列に入る関数です。
正常に動作するかを確認するために最後にconsole.logで表示しようとしたのですが、結果が、
Set {
has: [Function],
values: [Function],
add: [Function],
remove: [Function],
size: [Function],
union: [Function] }
になってしまいます。

function Set() {
    // the var collection will hold the set
    var collection = [];
    // this method will check for the presence of an element and return true or false
    this.has = function(element) {
        return (collection.indexOf(element) !== -1);
    };
    // this method will return all the values in the set
    this.values = function() {
        return collection;
    };
    // this method will add an element to the set
    this.add = function(element) {
        if(!this.has(element)){
            collection.push(element);
            return true;
        }
        return false;
    };
   // this method will remove an element from a set
    this.remove = function(element) {
        if(this.has(element)){
           var index = collection.indexOf(element);
            collection.splice(index,1);
            return true;
        }
        return false;
    };
    // this method will return the size of the set
    this.size = function() {
        return collection.length;
    };
    // change code below this line

    this.union = function(arr) {
        var newSet = new Set()
        this.values().forEach(el => newSet.add(el))
        arr.values().forEach(el => newSet.add(el))
        return newSet;
    }

    // change code above this line
}

var setA = new Set();
var setB = new Set();

setA.add('a')
setA.add('b')
setB.add('b')
setB.add('c')
setB.add('a')
setB.add('a')
console.log(setA.union(setB));  //期待するのは、["a", "b", "c"]

素人なので、よろしくお願いします。

Answer 1

組み込みのSetがあるので、他の回答者さんがおっしゃるとおり、そちらを使うのが定石です。
組み込みのものは速くて安心です。
こちらでは、質問者さんが上書きされているSetの話をします。

結論から言えば、意図した動作はしていると思います。
最後を

console.log(setA.union(setB).values());

にすればいいのではないでしょうか。

prototypeやclassを使う実装の方がいいかもしれませんが、そこは後で調べてください。

Comments

[nahi123]

ありがとうございます。動作しました。
Setクラスを作る勉強してたので、質問しました。

Answer 2

今のままではSetクラスのcollectionにアクセスできないと思います。
まずはcollectionの箇所をthis.collectionに書き換えましょう。

function Set() {
  // the var collection will hold the set
  this.collection = [];
  // this method will check for the presence of an element and return true or false
  this.has = function(element) {
      return (this.collection.indexOf(element) !== -1);
  };
  // this method will return all the values in the set
  this.values = function() {
      return this.collection;
  };
  // this method will add an element to the set
  this.add = function(element) {
      if(!this.has(element)){
          this.collection.push(element);
          return true;
      }
      return false;
  };
 // this method will remove an element from a set
  this.remove = function(element) {
      if(this.has(element)){
         var index = this.collection.indexOf(element);
          this.collection.splice(index,1);
          return true;
      }
      return false;
  };
  // this method will return the size of the set
  this.size = function() {
      return this.collection.length;
  };
  // change code below this line

  this.union = function(arr) {
      var newSet = new Set()
      this.values().forEach(el => newSet.add(el))
      arr.values().forEach(el => newSet.add(el))
      return newSet;
  }

  // change code above this line
}

それと、unionの戻り値はSetクラスになっているので、newSetのcollectionをlog出力することで期待する結果が得られるかと思います。

console.log(setA.union(setB).collection);

Answer 3

素人なので、よろしくお願いします

javascriptにSetオブジェクトがあるので

var setA = new Set();
var setB = new Set();

setA.add('a')
setA.add('b')
setB.add('b')
setB.add('c')
setB.add('a')
setB.add('a')

console.log(setA); // ["a","b"]
console.log(setB); // ["b","c","a"]

となります