GASでアロー関数の書き方でmap関数の第2引数のオブジェクトをthisで用いたい

Question

前提

Google Apps Script（GAS）でmapを用いて配列を操作するプログラムを作成しています。

アロー関数でmapの第2引数のオブジェクト（こちらでは配列）をthisで利用したいのですが、上手くできません。
従来の書き方では思うように出力されます。

実現したいこと

従来の書き方で記載したコードは次のソースコードです。

function myFunction01() {
  var wordlist = { 'あ': 1, 'い': 2, 'う': 3, 'え': 4, 'お': 5 };

  var selectword = ['あ', 'い', 'う'];

  var result = selectword.map(
    function (value) { return this[value]; }, wordlist
  );

  console.log(result); //出力結果：[ 1, 2, 3 ]
}

アロー関数で記載すると以下になりますが、出力結果が意図したものではありません。

function myFunction02() {
  let wordlist = { 'あ': 1, 'い': 2, 'う': 3, 'え': 4, 'お': 5 };

  let selectword = ['あ', 'い', 'う'];

  let result = selectword.map((value => this[value]), wordlist);

  console.log(result); //出力結果：[ undefined, undefined, undefined ]
}

アロー関数で記載し、第2引数のオブジェクトをthisで利用したいです。
どのようなコードにしたら、宜しいか、どなたかご教示頂けますと助かります。

発生している問題・エラーメッセージ

アロー関数で第2引数のオブジェクトを利用できず、thisを使えない。出力結果が[ 1, 2, 3 ]にならない。

試したこと

以下のように第２引数を用いず、thisも用いなければ、出力されます。

function myFunction03() {
  let wordlist = { 'あ': 1, 'い': 2, 'う': 3, 'え': 4, 'お': 5 };

  let selectword = ['あ', 'い', 'う'];

  let result = selectword.map((value => wordlist[value]));

  console.log(result); //出力結果：[ 1, 2, 3 ]
}

補足情報（FW/ツールのバージョンなど）

参考サイト：
【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説！
https://www.sejuku.net/blog/21812

Comments

[think49]

let result = selectword.map((value => this[value]), wordlist);
と書きたくない理由は何でしょうか。

出来ない事をやろうとしている場合、XY問題となります。
目的や背景を明らかにし、それに沿ったサンプルコードを出す必要があると思います。
https://ja.meta.stackoverflow.com/questions/2701/

目的を想像して回答していますが、想像ありきの回答な為、最適解ではない可能性があります。

[SkyRocket]

ご回答頂きありがとうございます。

>let result = selectword.map((value => this[value]), wordlist);
>と書きたくない理由は何でしょうか。

分かりずらくて申し訳ございません。
「let result = selectword.map((value => this[value]), wordlist);」のように書きなくないのではなく、書きたいと思っています。書きたいが、書いた場合に「[ undefined, undefined, undefined ]」となってしまい、「[ 1, 2, 3 ]」とならないため困っている状態です。

Apps Scriptの画面で「let result = selectword.map(」と入力すると、mapについての説明が表示され、書くことができるように読み取れたのですが、上手く行かない為、悩んでいるためです。
*****
map(callbackfn: (value: string, index: number, array: string[]) => any, thisArg?: any): any[]
A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

Calls a defined callback function on each element of an array, and returns an array that contains the results.

＜翻訳＞
最大 3 つの引数を受け入れる関数。 map メソッドは、配列内の要素ごとに callbackfn 関数を 1 回呼び出します。

配列の各要素に対して定義済みのコールバック関数を呼び出し、結果を含む配列を返します。
*****

このmapの説明は、従来の書き方に当てはまる説明で、アロー関数では通用しない書き方なのですかね。

[think49]

@SkyRocket さん
すみません。2022/12/30 15:47の修正依頼では引用コードが間違っていました。
「下記コードではNGな理由は何でしょうか」が私が確認依頼した意図になります。

let result = selectword.map((value => wordlist[value]));

[SkyRocket]

ご確認及びご回答頂きありがとうございます。
NGな理由についてですが、私の変なこだわりだと思います。

let result = selectword.map((value => wordlist[value]));
と記載すれば、要件通りになったのですが、
map関数では第2オブジェクトを指定できるように説明書きされていましたが、
その通りにならない結果になったので、困っておりました。

他の方とやり取りさせていただき、
仕様上、私のコードでは難しいことが分かりました。

ありがとうございました。

Answer 1

アロー関数で第2引数のオブジェクトを利用できず、thisを使えない。

アロー関数は、thisが書いた環境によって決まるのが仕様で、呼び出し方によって変えることはできません。

「第２引数を用いず、thisも用いない」形で書くしかありません。

Comments

[SkyRocket]

ご回答頂きありがとうございます。

Answer 2

this値の束縛

this値の束縛は「早いもの勝ち」です。
アロー関数でthis値を束縛した後に、Array.prototype.map()の第二引数でthis値を束縛し直すことはできません。

---

ここでいう「束縛」とは「外部から関数コード内で使用する値を固定する挙動」を指します。
Function.prototype.bind() でも「this値を束縛」することが可能です。

• Function.prototype.bind() - JavaScript | MDN

例えば、下記2つのコードは等価です。

'use strict';
const wordlist1 = {'あ': 1, 'い': 2, 'う': 3, 'え': 4, 'お': 5};
const wordlist2 = {'あ': 'a', 'い': 'b', 'う': 'c', 'え': 'd', 'お': 'e'};

(function () {
  let selectword = ['あ', 'い', 'う'];

  const result1 = selectword.map(value => this[value], wordlist1);
  const result2 = selectword.map(function (value) { return this[value]; }.bind(wordlist2), wordlist1);

  console.log(result1); // 出力結果：['a', 'b', 'c']
  console.log(result2); // 出力結果：['a', 'b', 'c']
}).call(wordlist2);

アロー関数はいったん忘れて、call, apply, bindあたりの挙動を追いかけてみると、見えるものがあるかもしれません。

'use strict';
const sample = function sample () { console.log(this); };
sample.bind(1).call(2);    // 1
sample.bind(1).apply([3]); // 1

解決方法

質問文を素直に読めば、「従来の書き方で記載したコード」で解決できますが、

let result = selectword.map((value => wordlist[value]));

この状況で、Array.prototype.map() の第二引数を指定しようとする理由がないので、実際のコードでは第一引数に指定すべき変数が別スコープにあるものと想像します。
結論としては、関数宣言か関数式で関数定義しましょう。

'use strict';
const callbackfn = function callbackfn (value) { return this[value]; };

function myFunction03() {
  let selectword = ['あ', 'い', 'う'];
  let wordlist = {
    'あ': 1,
    'い': 2,
    'う': 3,
    'え': 4,
    'お': 5
  };
  let result = selectword.map(callbackfn, wordlist);

  console.log(result); //出力結果：[ 1, 2, 3 ]
}

myFunction03();

Comments

[SkyRocket]

ご回答頂きありがとうございます。

状況について、投稿内容について、別の言い方で再度お伝えいたします。
＃＃＃＃＃
Apps Scriptの画面で「let result = selectword.map(」と入力すると、mapについての説明が表示されます。
この説明の1行目に「thisArg?: any」と第2引数があります。

*****
map(callbackfn: (value: string, index: number, array: string[]) => any, thisArg?: any): any[]
A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

Calls a defined callback function on each element of an array, and returns an array that contains the results.

＜翻訳＞
最大 3 つの引数を受け入れる関数。 map メソッドは、配列内の要素ごとに callbackfn 関数を 1 回呼び出します。

配列の各要素に対して定義済みのコールバック関数を呼び出し、結果を含む配列を返します。
*****

前述した従来の書き方では次のように記載していました。
-----
var result = selectword.map(
function (value) { return this[value]; }, wordlist
);
-----

アロー関数の書き方で
「let result = selectword.map((value => this[value]), wordlist);」
のように記載すると、出力結果が
「[ undefined, undefined, undefined ]」となってしまうので、困っていました。
＃＃＃＃＃

勉強不足で初歩的な質問となり恐縮です。
コメント頂いたコード（18行ある方）の書き方が、この私のコメント内の上部で記載した「mapについての説明」の使い方になるのでしょうか。
===
map(callbackfn: (value: string, index: number, array: string[]) => any, thisArg?: any): any[]
===
の意味は、map関数の
第１引数が「callbackfn: (value: string, index: number, array: string[]) => any」で
第２引数が「thisArg?: any」で
最後の「: any[]」は”配列を扱う関数”と意味するのではないかと思っています。

また、頂いたコード大変勉強になりました。
頂いたコードでは、myFunction03を実行すると配列を設定し、「let result = selectword.map(callbackfn, wordlist);」に移動し、「const callbackfn = function callbackfn (value) { return this[value]; };」に移りますが、この「function callbackfn (value) 」の「value」は、「let result = selectword.map」の第１引数のvalueであり、「return this[value]」の「this」は、「map(callbackfn, wordlist);」のwordlistが該当しているのだと思いました。このような書いたことが少ないので、もし認識違いでしたらご指摘いただけますと幸いです。

[maisumakun]

> コメント頂いたコード（18行ある方）の書き方が、この私のコメント内の上部で記載した「mapについての説明」の使い方になるのでしょうか。

何を疑問視されているのでしょうか。

[SkyRocket]

ご確認頂きありがとうございます。

説明で以下のように表示される関数の使い方について、お聞きしたいと思いました。
*****
map(callbackfn: (value: string, index: number, array: string[]) => any, thisArg?: any): any[]
*****

以下のようにグローバルで定義することが一般的なのでしょうか。
-----
myFunction03関数内
> let result = selectword.map(callbackfn, wordlist);
> console.log(result); //出力結果：[ 1, 2, 3 ]

グローバル
>'use strict';
>const callbackfn = function callbackfn (value) { return this[value]; };
-----

グローバルで「const callbackfn・・・」と定義しないで、
「let result = selectword.map((value => this[value]), wordlist);」（仮）のように
関数内で利用することは出来ないのでしょうか。

初歩的な質問でしたら申し訳ございません。

[think49]

@SkyRocket さん
> コメント頂いたコード（18行ある方）の書き方が、この私のコメント内の上部で記載した「mapについての説明」の使い方になるのでしょうか。

すみませんが、「Apps Script」が出力するヘルプの意図についてまでは私は責任を持てません。
少なくとも、アロー関数が意図しない動きになる理由については、本回答の「this値の束縛」が回答になっていると思っています。
原理を理解した上で、ヘルプの解釈についてはご自身で判断をお願いします。

> グローバルで「const callbackfn・・・」と定義しないで、
> 「let result = selectword.map((value => this[value]), wordlist);」（仮）のように
> 関数内で利用することは出来ないのでしょうか。

そのように書く目的は何でしょうか。
私がArray.prototype.map() の第二引数を指定する理由は、本回答に書いた通りですが、それ以外に何か具体的な理由があれば教えて下さい。
「目的」は「そのコードを書く必然性」と捉えてもいいと思います。
私は「目的」を始めに設定し、「要件」を作り、要件を満たすコードを書く、というやり方をします。
その過程で矛盾がないのであれば、それが自分にとっての良いコードだと思います。

[SkyRocket]

ご確認及びご回答頂きありがとうございます！

>私がArray.prototype.map() の第二引数を指定する理由は、本回答に書いた通りですが、それ以外に何か具体的な理由があれば教えて下さい。

自身の勉強不足であることを痛感致しました。

thisの束縛という情報が分からなかったため、
Googleで「アロー関数 this値 束縛」と調べたところ、ご教示頂いた内容がすこし理解できました。
アロー関数でのthisの取り扱いは難しいですね。

私のコードを改めて記載します。
>let result = selectword.map((value => this[value]), wordlist);
仰っていることは以下のことと思いました。
※しかし、「>this値の束縛は「早いもの勝ち」です。アロー関数でthis値を束縛した後に、Array.prototype.map()の第二引数でthis値を束縛し直すことはできません」の「アロー関数でthis値を束縛した」がどの部分で束縛したか自信が持てませんでした。

＃＃＃
１．このコードの【let result = selectword.map((value => this[value】内にあるthisには「selectword.map(」のselectword配列オブジェクトが入る。（このように、最初にこのthisにセットされる。）
２．１のつづきの第2引数の【]), wordlist);】ではthisには既に１で入っているので、入れない。
＃＃＃

現時点で詳細を伺っても私の基礎が足りていないので、
お手を煩わせてしましそうです。勉強してまいります。

ありがとうございました。

[think49]

@SkyRocket さん
遅くなりましたが、「束縛」の説明を本回答の「this値の束縛」に追記しました。

[SkyRocket]

ご確認頂きありがとうございます。

お陰さまで理解度が高まりました。
※まだなんとなくですが、直前のやり取りよりは理解しました。

「下記2つのコード」とはコード内にある２つ（wordlist1とwordlist2の関連）ことですね。

次のように理解しました。
１．コードが実行される。
２．wordlist1、wordlist2で連想配列を設定する。
３．function関数を先に囲んでいるのが「.call(wordlist2);」である。
　　selectword 配列を設定した後に、
　　const result1 = selectword.map(value => this[value], wordlist1);
　　にある「this」は「.call(wordlist2);」の「wordlist2」である。
　　※「selectword.map(value => this[value], wordlist1);」の第２引数の「wordlist1」
　　　は既に「.call(wordlist2);」の「wordlist2」で設定されているので、設定できない。
４．「console.log(result1);」で「['a', 'b', 'c']」が出力される。

>例えば、下記2つのコードは等価です。

■□■□■□■□■□■□■□■□■□■□
'use strict';
const wordlist1 = {'あ': 1, 'い': 2, 'う': 3, 'え': 4, 'お': 5};
const wordlist2 = {'あ': 'a', 'い': 'b', 'う': 'c', 'え': 'd', 'お': 'e'};

(function () {
let selectword = ['あ', 'い', 'う'];

const result1 = selectword.map(value => this[value], wordlist1);
const result2 = selectword.map(function (value) { return this[value]; }.bind(wordlist2), wordlist1);

console.log(result1); // 出力結果：['a', 'b', 'c']
console.log(result2); // 出力結果：['a', 'b', 'c']
}).call(wordlist2);
■□■□■□■□■□■□■□■□■□■□

ちなみに試しに「}).call(wordlist2);」を「}).call(wordlist1);」に変えたところ、
[ 1, 2, 3 ]
[ 'a', 'b', 'c' ]
が表示されることも確認しました。

以下のコードは「sample.bind(1)」で1で設定した後に、「.call(2);」で2にしようとしても設定できない、という例えですね。

■□■□■□■□■□■□■□■□■□■□
'use strict';
const sample = function sample () { console.log(this); };
sample.bind(1).call(2); // 1
sample.bind(1).apply([3]); // 1
■□■□■□■□■□■□■□■□■□■□

大変勉強になりました！ありがとうございます。

追伸
コメント欄でコード枠を設けれなかったので、■□■線でコードを囲んでいます。

Answer 3

アロー関数から見たthisはglobalThisと同義になります
おとなしく普通のfunctionを使いましょう

Comments

[SkyRocket]

ご回答頂きありがとうございます。