Javascriptの配列型

Question

非常に単純な質問で申し訳ございません。
Javascript上、配列型の中に関数を入れることは誤った記法でしょうか。
①下記、なぜそのよう方法で配列に入れるのかは置いておいたとして、記法自体は誤りでしょうか？

var A= 5;
var B= 10;

var data =[document.write(A+","+B)];

②また、配列の中身を変数にしたい場合には（サーバーサイドから必要な情報を条件に合わせて代入する）はJacascriptの場合、通常どのように記載するものでしょうか？本当にまだまだ不案内なのですが、scriptタグ内にphpでSQL文を書くべきなのか、それともnode.js等で対応するのか基本的な点がまだわかりません。
*現在Chart.jsというものを使っているのですが、サーバーから情報を引っ張り、動的にグラフを作りたいのですが、javascriptが全くの初心者のため、どのように一般的に対応するのかがわかりません、、

低い水準の質問であることは重々承知をしておりますが
お力添えのほど、よろしくお願い申し上げます。

Answer 1

① , ② ともすでに回答がでてますが、
配列の中身を関数にするJavaScriptの記載方法
について、利用例を提示します。

問題：
２つの数をあたえられたら、和、差、積、商を計算するとします。

解法：

• その１

function calcs(a, b) {
  return[a + b, a - b, a * b, a / b];
}
console.log (calcs(10, 2));

• その２

配列に関数を入れるようにして、次のように書くこともできます。

function add(x, y) { return x + y; }
function sub(x, y) { return x - y; }
function mul(x, y) { return x * y; }
function div(x, y) { return x / y; }
function calcsX(ops, a, b) {
  return ops.map(function(elem) { return elem(a, b);});
  // map() がわからなければ、次のように書いても同じです。
  // var ans = [];
  // for (var i = 0; i < ops.length; i++) {
  //   ans.push (ops[i](a, b));
  // }
  // return ans;
}
console.log (calcsX([add, sub, mul, div], 10, 2));

計算結果の順番変更、計算方法の追加、削除をしたい場合、
1 番目の方法では、cakcs() の中身を書き換えるか必要があります。
2 番目の方法では、calcX() の呼び出す時の ops の配列を変更するだけで済みます。

変更例：
足し算と掛け算の結果だけを返すように変更する。

• その1

function calcs2(a, b) {
  return[a + b, a * b];
}
console.log (calcs2(10, 2));

• その２

console.log (calcsX([add, mul], 10, 2));

add(), mul() を定義せず、直接 配列に関数を代入することもできます。

ops = [
  function(a,b) { return a + b;},
  function(a,b) { return a * b;}
];
console.log (calcsX(ops, 10, 2));

Comments

[SugiuraY]

ご回答頂き有難うございます。
その2は少し私も勉強はしてからでなければ、未だ分からない部分がございます。その1についてですが、returnのあとに［］で記述すること事で、このfunctionは、常に配列を返す様に働くことになるのでしょうか？
どの部分が配列を返す仕組になっていれのかが、直感的に正直わかりません。
return［］としているからこそ、console.logでもどのような関数でも、そのfunctionを呼び出し引数を指定すれば、配列をかえしてくれるという事になるのでしょうか？それとも、例えばconsole.logそのものに配列を返す機能がふくまれているのでしょうか。
非常に分かりづらい文面で誠に申し訳ございませんが、何卒宜しくお願い申し上げます。

Answer 2

①記法自体は誤りでしょうか？

エラーは出ませんが、関数を配列に入れているのではなく、document.write(A+","+B) の結果（画面に5,10が出力され、この関数は返り値が無いため undefined ）が入ります。

関数を入れるのであれば下記のようにも書けます。

var c = 5, d = 10;
var data = [ function( a, b ){ document.write( a + ',' + b ) } ];
data[ 0 ]( c, d );	// 「5,10」がHTMLに出力される

Comments

[SugiuraY]

ご回答頂き有難うございます。
返り値は5,10になるのではないでしょうか？また、HTMLに5,10を出力したいというよりも、javascript上の配列に5,10を順番に格納したい《data［5,10］を作りたい》というところが目的なのですが、《従って、無理やり［］の中に、php的な感覚でdocument.writeを入れてみました》が如何でしょうか？
宜しくお願い申し上げます。

[kei344]

document.write は 「document」に「write」する関数です。そのため、HTMLに出力する以外に返り値を持ちません。PHPでも var data = [ echo( 5, 10 ) ]; とは書かないと思います。
配列 [5,10] を作りたければ、var data = [ 5, 10 ]; とすれば良いです。

[SugiuraY]

ご回答頂き有難うございます。document.writeに関して大変、納得致しました。
この5,10の数値がサーバーから条件により変化するために、この度［］の中に単純に数値を入れずに中に関数等を入れようと思った次第でございます。
なので、直接数値型を入れない場合のやり方に奮闘をしておりました。

[kei344]

「PHPから出力するHTMLのJavaScriptに値を渡す方法」をお探しでしょうか。PHPの出力部分および「出力結果として欲しいHTML＆JavaScript」を提示されれば、回答を得られやすいと思います。

Answer 3

ご回答頂き、誠に有難うございます。
ご記載頂いた
data(A,B)
とは、何を意味している文になりますでしょうか？

度々、恐れ入りますが
よろしくお願い申し上げます。

Comments

[takasima20]

これは自分宛ですかね?
自分の回答にコメントしときます。

[SugiuraY]

あ、すみません、funcの引数部分に代入しているという事ですね。。
失礼致しました。

[SugiuraY]

失礼致しました。使い慣れておらず、申し訳ございません。

Answer 4

① 記法自体は誤りでしょうか？
→ 間違いではないです。

② 配列の中身を変数にするJavaScriptの記載方法
こんな感じでどうでしょう。

var func = function(C, D) {
  console.log(C+","+D)
}

var data =[func];

var A= 5;
var B= 10;
data[0](A, B);

Answer 5

var A= 5;
var B= 10;
var data = func;
data(A, B);

function func(a, b){
    document.write(a + "," + b);
}

とか。関数入れるとこはこんな感じでも

var data = function(a, b){
    document.write(a + "," + b);
};

WebページのJavaScriptにデータを渡す場合、
HTMLをサーバで生成する際に埋め込んでおく方法と
Ajaxで後からとってくる方法がありますかね。

Comments

[takasima20]

上の例では、通常以下のように使います。
func(A, B);
ここで、dataに関数が入ってるので
data(A, B);
としても同じ意味になります。
ついでに Olympic2020さんの例でいうと
data[0](A, B);
も同じ意味になります。(この場合は関数が配列に
入ってるのでこういう書き方になるということです)
自分の場合は、配列に入れたいわけじゃないのかなあ
と解釈して、ああいう書き方としました。

[SugiuraY]

非常にわかりやすいご記載を頂き有難うございます。
本当に有難いです。改めて、
深謝を申し上げます。