Help us understand the problem. What is going on with this article?

(0,fn)(args)

これ何?

タイトルを見てなんだこれはと思われた方もいらっしゃると思いますが

Babelでトランスパイルをしたコードを見ていると

title=トランスパイル前
import { b } from './a.js'

function c(n) {
  return b(n)
}
title=トランスパイル後
var _a = require('./a.js')

function c(n){
 return (0,_a.b)(n)
}

のようなコードが出てくる事が気になって調べた。

ちなみにBabelのREPL結果、presetsはenvのみ適用

image.png

ちょっと抽象的すぎるコードなので、 fn(args) を実行した時との動作の違いがわかるようなコードを用意した。というかStackOverflowから引っ張ってきた。

title=より具体的な例
var foo = { 
              fullName: "Peter", 
              sayName:  function() { console.log("My name is", this.fullName); } 
          };

// もしくは単に、fullName = 'Shiny';
window.fullName = "Shiny";

foo.sayName();       // My name is Peter
(foo).sayName();     // My name is Peter
(foo.sayName)();     // My name is Peter
(0, foo.sayName)();  // My name is Shiny

ブラウザで実行してみた例↓

image.png

この例をみてわかるように、 (0, foo.sayName)() 以外で実行した時はfullNamefoo オブジェクトにbindされているが、 (0, foo.sayName)()fullNameグローバルオブジェクトにbindされている。
(2020/06/19追記: fooへのbindが解除されて結果、グローバル変数であるfullNameを参照する事になるとの事でした。@shiracamusさん、丁寧な解説ありがとうございました。:bow:)

ちなみに最初の数字は 0 以外でもいけるみたいだ。

image.png

何個でも0書いても結果は同じ

image.png

nullでもundefinedでもなんなら、fooオブジェクトでも、最後がfoo.sayNameなら実行できる

image.png

どうも右から左に評価されて最後に評価された結果を返すらしい。

活用事例

var a = 0,
    b = 1,
    c;

c = ( a++, b++, a + 2 ); // a is added, b is added, and a is added then returned

a; // 1
b; // 2
c; // 3

よく見る例としては、for文

for (i = 0, j = 42; i < 10; i++, j--) {}

i = 0 が評価されて、 j = 42; i < 10; i++ が評価されて、最後に j-- が評価されると見るらしい。

なるほど!

for文をこのように解釈したのは生まれて初めてかもしれない。

まとめ

しかし、なぜBabelはimportしたオブジェクトaのプロパティー(関数) bを実行する時に、bindをグローバルにするのかよく分かってない。
(2020/06/19追記。解決したのでコメント欄に書いております。@shiracamusさん、丁寧な解説ありがとうございました。:bow:)

テクニックの一つとして覚えておいたら役に立つ時がくるのかな?

Babelを学ぶとJavaScript力つくなこりゃ...

この記法について

(2020/06/20追記)
この (0, fn)(args)acorn で調べたら、SequenceExpression となっているので、 シーケンス式 と呼べるものだと思います。

image.png

参考

yukihirop
気の向くまま。意の向くままにコードを書くプログラマー。 役に立つツールを作るのって本当に難しい。
https://creator-of-what.yukihirop.me/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした