JavaScript の for...in ループ内で hasOwnProperty を使っているコード例を見かけますが、hasOwnProperty を使うことにどういう意味があるかを書きます。（詳細は後述しますが、下の画像で赤枠が hasOwnProperty を使わない場合、青枠が使った場合の結果です）
MDN (Mozilla Developer Network) の記事「Object.prototype.hasOwnProperty()」に "in 演算子と違って、このメソッドはオブジェクトのプロトタイプチェーンをたどってチェックしません" と書いてあって、for...in ループの中で hasOwnProperty プロパティを使うコード例もありましたが、自分的にはどうもピンときません。
なので、自分的に納得できる具体例を以下に書いておきます。
マイクロソフト公式解説書「プログラミング Microsoft ASP.NET MVC」の 10.1.2 章に書いてあったことですが、JavaScript でオブジェクト指向を実装するのにプロトタイプを利用できるそうです。だからプロトタイプを使用したコーディングが主流になっているということなのでしょうか？
プロトタイプを使用したコード例として、本に書いてあったように、Person クラスを以下のように定義したとします。
// Person クラスの疑似コンストラクター
var Person = function (name, lastname, birthdate) {
this.initialize(name, lastname, birthdate);
}
// メンバー
Person.prototype.initialize =
function (name, lastname, birthdate) {
this.Name = name;
this.LastName = lastname;
this.BirthDate = birthdate;
}
// メンバー
Person.prototype.getAge = function () {
return 18;
}
Person クラスの Own プロパティは Name, LastName, BirthDate のみです。しかしながら、以下のコードのように for...in で Person クラスの各要素をコンソールに出力すると、Name, LastName, BirthDate の他に、プロトタイプチェーンをたどって initialize, getAge も出力されてしまいます。上の画像の赤枠で示した部分が下記のコードの実行結果です。
var p = new Person("web", "surfer", "2017/6/30");
for (var key in p) {
console.log(key + ':' + p[key]);
}
それを、以下のように、p.hasOwnProperty(key) が true になる要素のみをコンソールに出力すれば、上の画像の青枠部分に示した通り、Name, LastName, BirthDate のみとなります。
for (var key in p) {
if (p.hasOwnProperty(key)) {
console.log(key + ':' + p[key]);
}
}
上記は、あくまで自分が思いついた自分的に納得できる例で、他にもっと適切で分かりやすい例があるかもしれませんが・・・