5月11日(土)に開催されたTSKaigi2024に、エムスリーエンジニアリンググループはリフレッシュメントスポンサーとして協賛しました。リフレッシュメントコーナーでは、レッドブル・ラムネ・焼き菓子等々を提供しておりましたが、その中でも一際目立っていたであろうものが....『難読コードクイズ付き』のコアラのマーチ！ ！
ということで今回は、TSKaigiでリフレッシュメントクイズとして出題したコードクイズの解説をお送りします。
自己紹介
初めまして、今年の4月から24卒の新卒として入社しました池奥(@Selria1)です！ エンジニアリンググループのデジスマチームに所属しています。 今まではもっぱらウェブフロントばかり触っていましたが、入社してからはメンターさんやチームの方々の助けを借りながら、バックエンドやインフラも幅広く挑戦中です。
好きなことはハッカソン！学生時代は毎月のように出ていた時期もありました。社会人になってからも出場機会をうかがっています！
リフレッシュクイズの解答と解説
問題再掲
問題を再掲しますので、「お菓子をもらい損ねた！」という皆さんもぜひ解いてみてください。
問題は、次のコードの実行結果を求める問題でした。
// 実行結果を求めてください
[1, 2, 3].map(n => {out: n}).join()
お菓子を手に取って考え込む方も多くいらっしゃいましたが、なかなかの難問だったのではないでしょうか。
ちなみにエムスリーのSlackには、#crazy-programming というチャンネルがあり、日々このような難読クイズが投稿されています。今回の問題も、#crazy-programming に投稿された問題をみんなでブラッシュアップしたものでした！
解説
ここからは、3ステップに分けて解説していきます。
Step1: 丸カッコがないということは...
JavaScript、 TypeScriptを書き慣れている方々は、問題のコードを見たときに違和感を感じたのではないでしょうか。
そうです、丸カッコが抜けているんですね！
通常のmap関数でオブジェクトに変換するコードであれば、{out: n} の周りに丸カッコが入るはずです。
// よくある配列変換のコード
[1, 2, 3].map(n => ({out: n}))
丸カッコがない場合、{...}はアロー関数の本体を表すカッコとして解釈されます。わかりやすく改行すると、問題は次のようになります。
[1, 2, 3].map(n => {
// 関数本体
out: n
}).join()
Step2: out: の正体に気づこう
こうなると、out: nの部分が気になります。会場でも、「シンタックスエラーになりませんか？」と何度か質問をお受けしましたが、実は正しい文法です。
実は、このout:はラベルを表しています。二重forループで外側のforをブレークする際によく使うアレです。
a: for(let i = 0; i < N; i++) {
^コレ
for(let j = 0; j < M; j++) {
if(10 < i + j) {
break a; // <-- ここでラベルを参照している
}
}
}
今回はoutのラベルを参照している部分はありませんので、トラップとして設置されていました！
これが分かれば、n => { out:n }は何もリターンしない関数ということが分かりますので、問題のコード[1, 2, 3].map(n => {out: n}).join()は[undefined, undefined, undefined].join()と読み替えることができます。
Step3: join関数の仕様をチェック
最後に、join関数です。文字列を結合する関数としてお馴染みですが、今回の配列の中身はundefinedです。
join関数の仕様では、配列中のundefined/nullは空文字として扱うことになっています。また、join関数は第一引数として区切り文字(separator)を受け取りますが、今回のように第一引数が指定されない場合は,を利用するという仕様になっていますので*1、これらを踏まえると...
解答
正解は、,,（カンマ2つ）になります！
Xでも正解された方がちらほらいらっしゃったようです！ おめでとうございます🎉
学生向けLTイベント！
TSKaigi2024はまだまだ終わらない...！ Progateさんと共催で、TSKaigiサブイベントとして学生向けLTイベントを開催します！
日付が迫っておりますが、5/17 (金)にProgate にオフィスにて実施しますので、興味のある学生の方はぜひご参加ください！（オンラインもあります）
「プロポーザルを出すのがコワイ...」 「何について話せばいいかわからない...」 「今の技術レベルで登壇していいのだろうか...？」 そんな学生の皆様も気軽に参加できる会となっております！
TypeScriptについてはもちろん、VPoE河合からエムスリーの開発についてもお話しします。私も参加予定ですので、「ぶっちゃけ新卒で働いてみてどう？」などのカジュアルな質問もウェルカムです！ ぜひご参加ください！
TSKaigiのスタッフをやってみて
5/7の投稿でご紹介いただいたように、私は入社前からTSKaigiのスタッフとして参加していました。TSKaigiは今回が初開催でしたので、カンファレンス立ち上げの時期にスタッフとして関われたことを嬉しく思っています。年齢や役職を問わず、他社のエンジニアやTS好きな方々と関われたことは、学生としても社会人1年生としても非常に貴重な経験でした。また、そんな私の活動を応援する形で（それだけではないですが）リフレッシュメントスポンサーとして協賛してくれる弊社！ ありがたい！
スタッフとしてはスポンサーチームに所属し、スポンサー特典プランの設計や各スポンサー様とのコミュニケーション、リフレッシュメントの選定や発注、そして実は、公式サイトやリーフレットに掲載されている会場マップのデザインなども行っていました。エンジニアリングとは無縁のタスク達でしたが、だんだんイベントが出来上がっていく様子を肌で感じることができ、とても楽しかったです！
We are hiring !!
エムスリーでは、エンジニアリングを楽しむ人達が、未来を変えるイノベーションを起こすと信じて、エンジニアリング組織を運営、制度や仕組みを設計しています。 JavaScript、TypeScriptを含むプログラミング言語の話題でワイワイ盛り上がれる、ギークな皆さんのジョインを心からお待ちしております！
*1:https://262.ecma-international.org/13.0/?gl=1alnifcgaMTcyNTE5MjgzMC4xNzA5MjY3ODYz_ga_TDCK4DWEPP*MTcwOTI2Nzg2My4xLjEuMTcwOTI2ODAzMi4wLjAuMA..#sec-array.prototype.join
