【もりけん塾】言語チャレンジ6 – 配列をオブジェクトに変換、keyとvalueを指定 -【JavaScript】

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

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

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

handsonFrontend/work/basic/Work.md at master · kenmori/handsonFrontend

フロントエンドエンジニアを目指す方へのハンズオン資料. Contribute to kenmori/handsonFrontend development by creating an account on GitHub.

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

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

【もりけん塾】言語チャレンジ6 – 配列をオブジェクトに変換、keyとvalueを指定 –
- 配列をオブジェクトに変換、keyとvalueを指定
- PRコード
あとがき

【もりけん塾】言語チャレンジ6 – 配列をオブジェクトに変換、keyとvalueを指定 –

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

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

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

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

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

配列をオブジェクトに変換、keyとvalueを指定

前回は、与えられた配列[“a”, “b”, “c”]をオブジェクト{0: “a”, 1: “b”, 2: “c”}に変換するために、スプレッド構文を使用しました。

function f(input) {
　return {...input};
}

今回は、これでは対応できないため、reduceの使用を考えました。

reduceは配列の要素を順番に取り出して、引数に指定したコールバック関数を各要素に対して実行していくものです。最終的に1つの値を返します。

/* 構文 */
const result = array.reduce((target, current, index, array) => {
　return **;
}, init);

/*
target : コールバック関数の現在の計算結果
current : 現在の要素
index : 現在の要素のindex
array : 対象の配列がそのまま格納
init : 初期値
*/

今回は、新しくオブジェクトを返したいので、initに{ }を入れました。

初期値の空のオブジェクト{ }に、outputで返したい{ a: 0, b: 1, c: 2 }のkeyとvalueを追加していきます。

const result = array.reduce((target, current, index, array) => {
　target[current] = index; //コールバック関数が実行されるごとに{}に追加されていく
　return target 
}, init);

Array.prototype.reduce() - JavaScript | MDN

reduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を...

こちらのブログ記事も参考にさせていただきました。

PRコード

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

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


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

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

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