【もりけん塾】言語チャレンジ8 – 配列をオブジェクトを含む配列に変換する -【JavaScript】

今日は、もりけん塾の新しい課題”言語チャレンジ8に挑戦したので、学習ノートを書いていきます！

こんにちは。Webコーダーのはるです。

もりけん塾の新課題、言語チャレンジに挑戦しました。

https://github.com/kenmori/handsonFrontend/blob/master/work/basic/Work.md

この課題における、もりけん先生(@terrace_tec)のスタンスを補足します⏬

✅　inputとoutputの型が合っていれば、答えに問題はない
✅　もっといい方法や書き方、改善まで全ての人にレビューするのは大変
✅　先生のベストの解答が塾外の誰かが見た時にそうではない
✅　自分なりのベストを調べ尽くしてほしい
✅　サクサク進めることで言語を学ぶ楽しさを味わってほしい

【もりけん塾】言語チャレンジ8 – 配列をオブジェクトを含む配列に変換する –
あとがき

【もりけん塾】言語チャレンジ8 – 配列をオブジェクトを含む配列に変換する –

今回、取り組んだ課題はこちらです。

【課題8】
input: [“a”, “b”, “c”]
output: [{0: “a”}, {1: “b”}, {2: “c”}]

・inputの値をoutputの値として出力すること

・関数の引数に入力を渡し、実行した結果(出力)をconsole.logで示してください

（もりけん先生の言語チャレンジより）

for文

まず、for文を使用してみました。

//input: ["a", "b", "c"]
//output: [{0: "a"}, {1: "b"}, {2: "c"}]

const f = (input) => {
　const array = [];

　for(let i = 0; i < input.length; i ++){
　　array.push({[i] : input[i]});
　}
　return array;
}

const input = ["a", "b", "c"];
const output = f(input);
console.log(output);

空配列に、indexと値をpushしていきました。

しかし、原始的？コードが長い？と思い他にも考えてみることにしました。

map

配列を扱うので、map()を使うコードを考えました。

最初は以下のように考えたのですが、これだとエラーで動きませんでした。

const f = (input) => {
　return input.map((value, index) => {
　　{[index] : value}
　});
}

MDNと以下記事を参考に、ここで新たにオブジェクトを作りたいときはその{ }を( )で括る必要があることを知りました。

Array.prototype.map() - JavaScript | MDN

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

https://qiita.com/Nossa/items/f348ce9a143d8f3a69d1

{ }で括ってしまうとアロー関数用の{ }と見做されてエラーになってしまうそうです。

1列で書いた方がスマートでしょうか・・？

const f = (input) => {
  return input.map((value, index) => ({[index] : value}));
}

reduce

練習中のreduceでも書いてみることにしました。苦手・・

const f = (input) => {
　return input.reduce((target, current, index) => {
　　target.push({[index] : current});
　　return target;
　}, [])
}

これでPRしたわけではないので、あってるのかこれ？というコードになっていますが一応動きました・・

もっとスマートに書けるのかもしれない。。

間違えていましたら、お問い合わせから教えていただけると助かります＿|￣|○

PRコード

今回はこちらでApproveいただきました🎉

//input: ["a", "b", "c"]
//output: [{0: "a"}, {1: "b"}, {2: "c"}]

const f = (input) => {
　return input.map((value, index) => ({[index] : value}));
}

const input = ["a", "b", "c"];
const output = f(input);
console.log(output);

学習に使用している本は、もりけん先生推奨の”JavaScript本格入門”です。