メソッドチェーンと返り値の型の制御を両立できない

Question

メソッドチェーンと返り値の型の制御を両立できない

Javascript で、classの作成をしています。
クラス内のメソッドを実行すると、配列が返される状態です。
したいことは以下の二つです。片方ずつならできるものの、両立ができずに悩んでいます。
①メソッドチェーンを行う
②console.log()で出力した際に、Array型で出力させる。

/*
例として、+-5歳の年齢を返す(10歳なら、5~15)メソッドを作成します。
*/
class Person{
 constructor(name, age){
   this.name = name;
   this.age = age;
}
   nearly_years_old(){
    const youngest = this.age - 5;
    const oldest = this.age +5;
    const out = new Array();
    for(let i=youngest;i<=oldest;i++){
     out.push(i);
  }
     return out;
 }
/* 
以下に、チェーン用のメソッドが他かにもいくつか記載されていると仮定します。
*/
}

上記のソースコードであれば、『② Array型で出力』は可能です。
しかし①ができないため、メソッドチェーンを行うために、
return outを、return thisに変えたところ(thisを返す前に、this.nearly_years_olds = outとしています。)、戻り値がArrayではなくObjectになりました。
このため、メソッドチェーンをすると返り値が違い、返り値を制御するとメソッドチェーンができない、という状況になってしまっています。

「そもそも、そう言ったことができるのか」という疑問ですが、Array.lengthを想定してみると、可能だろう、と考えています。
console.log(arr). /** @type {arr<array>} */では、arrが配列形式で出力されます。
しかし、console.log(arr.length)とすると、オブジェクトのような挙動(lengthプロパティを持っている)をします。
これを自作できないか、というのが質問の趣旨です。

もちろん、返り値のオブジェクトに対して、データが入ったプロパティを指定させることで解決自体はできますが、煩雑なコードを避けたいため、質問しました。

Comments

[think49]

> ①メソッドチェーンを行う

具体的にコードを書くと、どうなりますか。

Answer 1

※前提として、「（nearly_years_old メソッドに於いて）メソッドチェーンをあえて使用したいがために、nearly_years_old は this を返す（return this している）」ものとします。
nearly_years_old が this以外の戻り値を返すパターンの可能性については、ここでは論じません。

---

console.log() のlog メソッドの引数に何かを指定した場合に、引数に指定されたモノの toString メソッドが呼ばれるかどうかは処理系の実装に依存しているようです。
少なくとも、Windows の Chromium Edgeでは、log メソッドの引数に 独自のObject を指定した場合、その Object に toStringメソッドが実装されていても、自動的にそのtoStringメソッドが呼ばれるわけではないようです。
たとえば、質問にある Person クラスに、「年齢の配列を返す toString メソッド」が実装されていても、

person = new Person('John', 30);
person.nearly_years_old();
console.log(person);

の3行目の

console.log(person);

という記法で 年齢の配列だけを表示させることはできません。（実装によるようですが、そのクラスに実装されているプロパティが全部表示されるようです）

また、

(略)
console.log(String(person));

とすると

 Uncaught TypeError: Cannot convert object to primitive value

というエラーが発生します。

---

やり方としては、

class Person{
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.ageRange = [];
  }

  nearly_years_old() {
    const youngest = this.age - 5;
    const oldest = this.age + 5;
    for(let i=youngest; i<=oldest; i++) {
      this.ageRange.push(i);
    }
    return this;  // 要件：メソッドチェーンを使いたいので this を返す
  }

  // getAgeRange メソッドの実装
   getAgeRange() {
    return this.ageRange
  }
}

というように、年齢の配列（ageRange） を返すメソッド（上の例ではgetAgeRange()メソッド）を実装しておき、
呼び出すほうで、

person = new Person('John', 30);
person.nearly_years_old();
console.log(person.getAgeRange());

とするか、特に getAgeRange を実装する必要がなければ、単純に

略
console.log(person.ageRange);

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

（これは murabito さんの「普通にプロパティーアクセスした方が良いと思います。」の趣旨です）

Answer 2

const person = new Person('taro', 10)
console.log(person) // 配列で表示

このようなことをしたいのでしょうか？
であれば不可能だと思います。

PersonクラスにtoStringメソッドを実装した上で、
以下のように呼び出す必要がありますね。

const person = new Person('taro', 10)
console.log(person.toString()) // 配列で表示
console.log(String(peson)) // 配列で表示

もしくは、以下のようにIterableにして呼び出すか。。。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  *[Symbol.iterator] () {
    const youngest = this.age - 5;
    const oldest = this.age + 5;
    const out = new Array();
    for (let i = youngest; i <= oldest; i++) {
      out.push(i);
    }
    yield out
  }
}

const person = new Person('taro', 10)
console.log(...person) 

意見

返り値のオブジェクトに対して、データが入ったプロパティを指定させることで解決自体はできますが、煩雑なコードを避けたいため、質問しました。

煩雑になるとも感じませんし、逆に不可解なコードにはなりそうなので、普通にプロパティーアクセスした方が良いと思います。

Answer 3

console.log(arr). /** @type {arr<array>} */では、arrが配列形式で出力されます。
しかし、console.log(arr.length)とすると、オブジェクトのような挙動(lengthプロパティを持っている)をします。
これを自作できないか、というのが質問の趣旨です。

　なにか、大きな勘違いをされているように思います。

　arr.lengthはメソッドチェーンできないです。たとえば、arr.length.pop()などとしても、想定しているような動作ではないだろうと思います。

---

　もちろん、arr.lengthが返してくる数値に対してはメソッドチェーンをすることができます。arr.length.toPrecision(2)とすれば想定しているようにメソッドがつながっていることが分かるだろうと思います。

　ですので、

const taro = new Person('taro', 10)
console.log(taro.nearly_years_old().pop()) // 15

　のようなメソッドチェーンをつなぐことはできます。この場合はthisを返す必要はありません。

---

　もし、nearly_years_old()に「+-5歳の年齢を返す」という主作用の他に副作用があり、主作用は必要ないが副作用だけ作用させた上でメソッドチェーンをつなぎたい場合がある、ということであれば、他の方のご回答のように副作用を別メソッドとして分離した方が読みやすいコードになるかと思います。

副作用 (プログラム) - Wikipedia

		class Person {
			constructor(name, age) {
				this.name = name;
				this.age = age;
			}

            sideEffect(){
                //...
                return this
            }

			nearly_years_old() {
                sideEffect()
                //...
				return out;
			}
		}

---

　それでも、あえて、どうしても、ということであれば、こんな感じではどうでしょうか？

		class Person {
			constructor(name, age) {
				this.name = name;
				this.age = age;
			}

			nearly_years_old() {
				const youngest = this.age - 5;
				const oldest = this.age + 5;
				const out = new Array();
				for (let i = youngest; i <= oldest; i++) {
					out.push(i);
				}

				//return Object.setPrototypeOf(out, this);
				return Object.setPrototypeOf(out, new Proxy(this, {
					get: function (target, prop) {
						return Array.prototype[prop] ?? target[prop];
					}
				}));

			}

			sayHello() {
				console.log(`Hello, my name is ${this.name}.`)
			}
		}
		const taro = new Person('taro', 10)
		console.log(taro.nearly_years_old())
		console.log(taro.nearly_years_old().sayHello()) 

Answer 4

toStringを実装しましょう

Comments

[ouoyoueee]

ありがとうございます！
無知なもので、Number型以外へのtoString()の挙動をイマイチ理解できていません。
もしよろしければ具体的に教えていただけませんか。。？

[ozwk]

console.logはそのオブジェクトのtoString()を呼んだ結果を表示する(厳密にはどうだったかは忘れた)ので、PersonクラスでtoString()という名前のメソッドを
表示したい文字列を返すように定義します