Javascript 連想配列(オブジェクト)をforEachでループさせたい。

いい加減配列のループにはArray#forEachを使っていきたいと思っています。
通常の配列であれば下記のような感じ。

var array = ['暁', '響', '雷', '電'];

array.forEach(function(val, i) {
  console.log(i, elmval; 
});
/* ↓ 出力
0 "暁"
1 "響"
2 "雷"
3 "電"
*/

連想配列をforEachでループさせる

しかし連想配列(オブジェクト)の場合

var obj = { first: '暁', second: '響', third: '雷', fourth: '電' };

obj.forEach(function(val, key) {
  console.log(key, val); 
}); // => Uncaught TypeError: obj.forEach is not a function

そのまま Object.forEach とするとエラーになってしまいます。

Object.keys() で連想配列のキーを配列にして利用する

連想配列(オブジェクト)をforEachで回すにはキーの配列を利用すればOK... なのだけど

var obj = { first: '暁', second: '響', third: '雷', fourth: '電' };

Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key]);
});
/* ↓ 出力
first 暁
second 響
third 雷
fourth 電
*/

ループ内で obj[key] ってループの外にある変数を参照するのがイケてない...

forEachの第二引数にオブジェクトを渡してあげればOK！

array.forEach(callback[, thisObj]);
引数
callback ... 各要素に対して実行するコールバック関数で、３つの引数をとります。
thisObj ... 任意。callback 内で this として使用する値

Array.prototype.forEach() - JavaScript | MDN

どうやら、forEach()の第二引数に渡した値がループ内でthisとして使用できるようなので、第二引数にオブジェクトを渡すと良い感じになりそうです。

var obj = { first: '暁', second: '響', third: '雷', fourth: '電' };

// 第二引数に obj を渡す
Object.keys(obj).forEach(function(key) {
  var val = this[key]; // this は obj
  console.log(key, val);
}, obj);
/* ↓ 出力
first 暁
second 響
third 雷
fourth 電
*/