.map()を使って指定条件で配列を再編したいが、条件外のものまで取得してしまう

Question

###前提・実現したいこと
以下arrayがありまして、「指定キーが空でないもの」で配列を再編したいです。

var array = [
	{ id:1, 'a':'a_1', 'b':'b_1' ,'c':'' },
	{ id:2, 'a':'a_2', 'b':''    ,'c':'c_2' },
	{ id:3, 'a':''   , 'b':''    ,'c':'c_3' },
	{ id:4, 'a':'a_4', 'b':'b_4' ,'c':'' },
];

たとえばbを指定したら「bが空でないもの」という条件で再編し、次のresultが目的となります。

var result = [
	{ id:1, 'a':'a_1', 'b':'b_1' ,'c':'' },
	{ id:4, 'a':'a_4', 'b':'b_4' ,'c':'' },
];

###発生している問題
bと指定しても、それ以外をundefinedで取得してしまいます。

###該当のソースコード
これが問題の発生するソースコードで、結果はコメントアウトしてあるようにb以外がundefinedが取得されるという状況です。

var result = extArrayByName( array, 'b' );
console.log(result);

function extArrayByName( array, name ){
	var result = array.map(function(x){
		if(x[name] != ''){
			return x;
		}
	});
	return result;
}

/*
このような結果になってしまうのが問題です。
[
	{ id:1, 'a':'a_1', 'b':'b_1' ,'c':'' },
	undefined,
	undefined,
	{ id:4, 'a':'a_4', 'b':'b_4' ,'c':'' },
];
*/

###試したこと
まず.map()の戻り値を値を確認し、正しくarrayの中にあるオブジェクトであることを確認しました。

function extArrayByName( array, name ){
  var result = array.map(function(x){
    console.log(x); // arrayの中にあるオブジェクトであることを確認
  });
}

続いてこのオブジェクトから「指定キー」で値を取得できることを確認しました。

var x = { id:4, 'a':'a_4', 'b':'b_4' ,'c':'' };
var test = x['b'];
console.log(test); // b_4が取得できることを確認

ここでわからないのは、正しくオブジェクトが取得され、そのオブジェクトに対して「指定キー」で値を取得できるという２つの確認が済んだにも関わらず、それを組み合わせた「該当のソースコード」で問題が発生するということです。

ここまできてお手上げになってしまいまして、ご助力を乞うた次第です。
どうぞ宜しくお願い致します。

Answer 1

こんにちは

何が問題かというと、ご質問にあるようなことをやろうとしたときに、配列に用意されている様々なメソッドの中で map を選んでしまった点かなと思います。map は、元の配列の各要素に何らかの処理をした結果、得られた値を各要素とする配列を得るメソッドです。したがって、map によって得られる配列の長さは、元の配列の長さと同じになります。map に与える関数が明示的なreturnで値を返さない場合、ご質問のコードでいうと if(x[name] != ''){ の if条件が満たされなかった場合においても、出力の配列に何も追加されないのではなく、関数が明示的なreturnで終了しなかった場合の返り値としての undefined が追加されます。

ご質問のような、「配列から、ある条件を満たす要素だけを抽出して、新たな配列を作る」という場合、mapではなく、filter を使うとよいでしょう。filterを使うと、extArrayByNameは以下のように書けます。

function extArrayByName( array, name ){
    return array.filter(e => e[name]);
}

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/zYxNmRG?editors=0012

参考になれば幸いです。

Comments

[tarakorakko]

最高です。質問内容へのご理解とご説明が半端じゃないです。笑
どうもありがとうございました！

[jun68ykt]

どういたしまして。疑問が解決されたようで、よかったです????

[tarakorakko]

おかげ様でとても気持ちよく理解できました。