jsondataから緯度と経度を取得する。

Question

jsonデータからオブジェクトのあるプロパティ（latitudeとlongitude）を取り出しています。
初学者なので段階を追っております。

こちらはconsoleに出力をすることが出来ました。

   data.forEach((poi_location) =>{
            console.log(poi_location.latitude+","+poi_location.longitude);
        });

次に取り出したデータを変数に入れようと思い下記のコードを書きました。
consoleではundefinedとなります。同じ値が出力されるイメージで書いたのですが
何が問題なのでしょうか？？？

 var box = data.forEach((poi_location) =>{
            return poi_location.latitude+","+poi_location.longitude;
        });

        console.log(box);

Answer 1

仕様です。

戻り値

undefined
戻り値 | Array.prototype.forEach() - JavaScript | MDN

mapを使われるといいかと思います。

戻り値

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列。
戻り値 | Array.prototype.map() - JavaScript | MDN

Comments

[papinianus]

解決するようにおまじない。
var box = data.map((poi_location) =>{
return poi_location.latitude+","+poi_location.longitude;
});

[Lhankor_Mhy]

補足ありがとうございます。

[flower_tako]

ご返答ありがとうございます。
mapでイメージしていたことを実現できました。
forEachはreturn文を使うことはほぼないということでしょうか？

[papinianus]

ないっていうかforEachは値を戻せません。
> map() や reduce() と異なり、常に undefined を返しチェーンできません
他の言語をご存じであれば、voidに相当するので、undefinedが返るのは暗黙に返るだけで、無意味です。

[Lhankor_Mhy]

おっしゃるとおりです。
forEach は for 文で回すのと同じイメージで使うのがいいと思います。いわゆる「副作用」で処理をする時に使う感じです。

[flower_tako]

お二人方たいへん勉強になりました！ありがとうございます????

Answer 2

mapを使うのが回答なのは既にLhankor_Mhyさんがおっしゃってますが、
アロー関数使っているということはES2015の書き方しても大丈夫そうですね。
もう少し踏み込んでコードをかっこよくしてみました。

const box = data.map(poi_location =>
  `${poi_location.latitude},${poi_location.longitude}`
);

console.log(box);

解説

• varやletでの変数宣言は「後で変える可能性があるぞ気をつけろ！」という注意に他ならないのでできるだけconst使おう
• アロー関数の引数が1個の時は括弧を省略出来る(0, 2, 3…個は不可能)
• アロー関数の波括弧を省略すると、1つの式だけ書けてreturnする文章になる
• テンプレート演算子を使うとダブルクォートや+記号から解放される(そのかわり${}で包むけど)

Comments

[miyabi-sun]

これ全部使わなきゃいけないというわけでもないので、
気に入った箇所だけ持っていってください。

[flower_tako]

とても丁寧に解説していただけてありがたいです！！！！

[flower_tako]

今回const boxで取得した値が文字列で→それを数値にする予定なのですがその場合はvarやletを使うのが最適ですかね????？

[miyabi-sun]

うーん、出来ない事はないのですが
「そもそも型が変わるような代入はバグの元になるからやめとけ」って感じですね。

死ぬほど考えたけど、for文の前でletで宣言しておいて、ループで回しながら抽出するやり方しか思いつきませんでしたごめんなさい許してぶたないで。
こういうケース以外ではletやvarを使う事は殆どありません。
関数全体のスコープの中でletが最高1個までで済むようにアルゴリズムの構築頑張ってください。

この追加質問の用途だと、data.map(fn).map(文字列→数値関数)という1行でいつでもboxの数値版が取れますよね？
なので基本はdataという配列1個だけを持っておいて、必要になる箇所の直前で準備するのが勝ちパターンですね。