objectから値を取得したい

Question

初心者のため手探り状態での学習ですが、どなたかご教示いただけたらと思います。

目的：Object.keysを使いdefaultFormItemsのkeyとvalueを取り出すこと

確認したところ：①でkey: empInput ,value: adminが出力されることは確認できます

わからないところ：②でkeyとvalueの値が①と同じ値が出力されることを期待したが、undefindと出力される

var defaultFormItems = {
emInput: 'admin1'
}

var o = Object.keys(defaultFormItems).forEach( function(key) {
    var value = defaultFormItems[key]
    console.log('[' + key + '] ' + value);　　①
  },defaultFormItems)

  console.log('[' + o.key + '] ' + o.value);　②

Answer 1

えっと、①ですが、

var o = Object.keys(defaultFormItems).forEach( function(key) {
  var value = defaultFormItems[key]
  console.log('[' + key + '] ' + value); //　　①
},defaultFormItems)

まず Object.keys(defaultFormItems) で defaultFormItems のキーをすべて配列として取り出します。defaultFormItems のキーは 'emInput' しかないので 1 要素の配列になります。
次に forEach で配列の各要素に対して無名関数を実行してます。ちなみに forEach の二つ目の引数 defaultFormItems は無名関数の this として使われますが、無名関数では this を使ってないので無意味です。
無名関数では key として 'emInput' が渡された処理が行われます。内容はわかってると思いますので省略します。
最後に、forEach の結果を o に代入してますが、forEach の戻り値は undefined なので、o の値は undefined になります。
参考: Array.prototype.forEach() - JavaScript | MDN

console.log('[' + o.key + '] ' + o.value); //　②

o が undefined なのでエラーになります。①と同じものを表示したいのであれば o.key の代わりに 'emInput'、o.value の代わりに defaultFormItems['emInput'] または defaultFormItems.emInput と書く必要があります。

Comments

[sasurai]

hoshi-takanori様
丁寧な解説ありがとうございます。
forEachの第二引数の理解が不十分でしたが解説により理解できました。
また、forEachに戻り値がなくundefindとなるところは理解が足りていませんでした。

処理対象の連想配列`defaultFormItems`はkeyを複数追加していくことを前提としておりましたので、今回は、forEachで対応するのではなく、yambejp様から指摘いただいた`Object.assign({}`を使った配列処理をしようと思います。
ご回答ありがとうございました。

Answer 2

defaultFormItems にkeyが複数あったときにどうするつもりかにもよりますね

var o = Object.assign({},{key:Object.keys(defaultFormItems)[0],value:Object.values(defaultFormItems)[0]});
console.log('[' + o.key + '] ' + o.value);

Comments

[sasurai]

ご回答ありがとうございます。
配列処理はforEachでできるという頭でいましたが、ご教示いただいたObject.assignを使えば、forEachを使わなくても繰り返し処理に使用できると言うことが理解できました。

[yambejp]

今更ですが、分割代入すればもっと楽かも

var defaultFormItems = {
emInput: 'admin1'
};
[key,value]=Object.entries(defaultFormItems)[0];
var o = {key,value};
console.log('[' + o.key + '] ' + o.value);