JavaScriptに挑戦

JavaScriptに挑戦

(1) JavaScriptとは
　JavaScriptは、HTMLとCSSだけでは静的なウェブサイトになってしまうところに、動的な表現を与えることを可能とするインタプリタ型スクリプト言語です。Javaとは言いますが、商業的理由でそうなっているだけでJavaとは異なる言語です。JavaScriptにより、ウェブサイト上に表示されている文字列を変化させたり、ポップアップを出したり、アニメーションを実現したりできます。

　JavaScriptは、インターネットを閲覧するブラウザの中に既に組み込まれていて、特別な動作環境をダウンロードする必要はありません。HTMLで書かれたファイル内にスクリプトを記述することにより動作します。HTMLファイル内のどこかに<script>～</script>を置いて、この間に記述します。どこに置くかについては、専門的な知識が必要で、検索して調べてみてください。また、<script src="test1.js"></script>とすると、外部ファイルtest1.jsを起動できます。外部ファイルにしておけば複数のページで同じjavascriptを使うことができます。また、セキュリティー上推奨されていませんが、インラインjavascriptと言って、HTML内のタグの記述にそのままスクリプトを書いてしまうことも可能です。

　ブラウザに組み込まれている、ということで、気軽にとっつきやすい印象がありますが、JavaScriptがカバーしている範囲は非常に広く、その全容を追いきれないほどです。また、セキュリティ上の制約からファイルの読み書きが思うように行えず(もし自由にファイルの読み書きが行えるのだったら、ウェブページ上からユーザのファイルにアクセスして盗み出したり、トロイの木馬と言ったタイプのウィルスに感染させたりできてしまいます)、JavaScriptは文科省推薦言語になっていますが、私は、大学入試のテーマにする、あるいは、高校教育には不適切な言語だと思います。

　さて、JavaScriptの説明に入ります。エディタで以下の内容でHTMLのファイル、jtest1.htmlを作ってみてください。ブラウザがGoogle Chromeなら、上のjtest1.htmlをクリック、[F12]キーを押して、デベロッパー・ツールを起動し、メニューで[ソース]を選び、jtest1.htmlをクリックすると、以下のようなソースが表示されます。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScriptのテスト</title>
<style type="text/css">
p{color:black;font-size:medium}
</style>
</head>
<body style="background-color:white">
<p>JavaScriptのテストをします。</p>
<script>
alert("こんにちは。");
</script>
</body>
</html>

ここまでです。

　HTMLファイルは、基本的に、<html><head>～</head><body>～</body></html>という形をしています。最初の<html lang="ja">は、このウェブサイトが日本語のサイトであることをブラウザに伝えています。<head>～</head>(この部分をヘッダと言います)にこのサイトの性格のようなものを記述します。<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">は、この行が"Content-type"の記述であることを示し、UTF-8という文字コードで記述されたHTMLファイルであることを示しています。

　次の<title>JavaScriptのテスト</title>は、このHTML文書のタイトルが「JavaScriptのテスト」であることを示しています。タイトルはブラウザのタブのところに表示されます。次の<style type="text/css">はCSSの記述であることを示し、p{color:black;font-size:medium}は、<p>というタグの表示が、文字色：黒、文字サイズ標準であることを規定しています。</style>でCSSの記述の終了を、</head>でヘッダの終了を表します。

　<body>以降に表示内容の本体が来ます。bodyの後の、style="background-color:white"は、背景色が白ということを指定します。<p>JavaScriptのテストをします。</p>で、画面に「JavaScriptのテストをします。」と表示します。その次の<style>から</style>までが、JavaScriptのプログラムです。alert("こんにちは。");では、画面上に「こんにちは。」と書かれたダイアログを表示します。ダイアログ上の[OK]ボタンをクリックすると、ダイアログが閉じます。</body>で本体記述の終了、</html>でHTMLファイルの終了を表します。エクスプローラなどのファイル一覧で、test1.htmlをダブル・クリックすると、HTMLファイルが起動し、ダイアログが表示されます。

　JavaScriptでは、データ型は、基本的に、文字列型、数値型、論理型の3種類です。JavaScriptはオブジェクト指向言語なので、他に「オブジェクト」があります。Pythonと同様に、JavaScriptのオブジェクトもメソッドとプロパティを持ちます。文字列型のデータはsingle quoteまたは、double quoteで囲みます。"おはよう。"とか、"日本"とか、"123.45"が文字列です。数値型は、1234.567などです。JavaScriptでは整数型と実数型の区別はありません。表示としては2であっても、内部的には倍精度浮動小数点数で、2.00000000001だったりします。論理型には、true(真)とfalse(偽)があります。

　他に、0同士の除算で出てくるNaN，初期化しただけでデータが入っていない変数・配列で出てくるundefined，返り値が存在しない場合にnullを返すメソッドもあります。また、1を0で割ると、Infinityになります。1をInfinityで割ると0になります。対数関数でMath.log(0)とすると、－Infinityになります。

(2) JavaScriptの文法

　JavaScriptには、ECMAScript2015(ES2015)という規格があり、機能追加とともに、それ以前と文法がやや変化しています。JaveScriptについて正確な情報が欲しい場合には、ECMAScript2015 Language Specificationにアクセスしてみてください。また、JavaScriptの詳細な使い方については、JavaScript | MDNも参考になると思います。

　JavaScriptでは、処理の単位を文と言います。原則として、文の終わりにはセミコロン';'をつけます。';'で区切ることにより、1行に複数の文を置くことが可能です。幾つかの処理をまとめて'{'と'}'で囲むことがあります。これをブロックと言います。関数は1つのブロックを作ります。if文や、while文でもブロックを作ります。

　JavaScriptで、プログラム中にコメントを入れる場合は、//か、/*～*/を使います。1行中(行頭でもよい)に//を入れると、そこから行末までは、コメントとして無視されます。コメントが複数行にまたがるときは、コメントの先頭に/*を置き、コメントの末尾に*/を置きます。この部分も無視されます。

　JavaScriptでは、インデントを付けてプログラムを作らないと動作しない、ということはありませんが、見易くするためにインデントを使って構造化してコーディングするようにしましょう。

(a) 定数

　名前をつけて定数を定義する場合には、constを付けます。

const pi = 3.14;
conat japan = "日本";

という具合です。constを付けると、pi，japanに再代入して、内容を書き換えることはできません。

(b) 変数

　名前をつけて変数を定義する場合には、varを付けます。

var x1 = 1.0;
var name = "青木";

という具合です。x1，nameには、代入操作が行えます。もちろん、初期値を与えずに、

var x1;

とすることもできますが、値の入っていない変数の値はundefinedになっていて、この変数を参照すると、例えば、

var x2 = x1;

とすると、x2の内容もundefinedになります。

　JavaScriptには、スコープと言いますが、変数名、配列名の有効範囲があります。2つの関数func1とfunc2があるとき、func1でもfunc2でも、x1という変数名を使いたいとします。

var x1 = 2.0;
var x2 = 0.0;
func1();
func2();
console.log(x2);
function func1() {

x1 = 3.0;

}
function func2() {

x2 = x1;

}

としてしまうと、console.logの段階でx2は3.0です。func1でx1=3.0になってしまうからです。ですが、func1のx1は、他のx1とは違う、とするのであれば、func1の中で、そのことを明示しないといけません。func1の中のx1にvarをつけてvar x1 = 3.0;とすれば、console.logの段階でx1=2.0となります。func1の中のvarがついているx1はfunc1の中でのみ有効となります。この変数名の有効範囲をスコープと言います。

function func1() {

var x1 = 3.0;

}

とすると、x1という変数名のスコープはこの関数内だけになり、func1()のx1は関数外からはアクセスできません。

　複数の作業者でプログラム開発するときにスコープが重要になります。うっかり他の人が作成した関数を不注意に使った時に、その関数内でも同じ変数名が使われていて、自分が使っている変数の値が変わってしまう、ということが起こり得ます。極力、関数内の変数には、varという宣言を付けるようにしましょう。

　また、変数宣言は、関数内のどこに置いても有効です。関数の最後の方でvar x1;と宣言し、最初の方で変数x1にアクセスできます。ですがx1を参照してもundefinedになります。これを防ぐために、変数宣言は、思いついたときではなく、なるべく関数の最初の方で行うようにします。

　実は、ES2015という規格には、letという変数宣言が導入されていて、let x1;とすると、x1を再定義できなくなります。これも複数の作業者でプログラム開発するときに起こり得ることですが、ある作業者が、ある目的で、var x1;と宣言しているのに、同一の関数内で別の作業者が別の目的で、var x1;と宣言してしまい、一つの変数が二重の目的に使われて、その関数が正常に動作できない、ということがあり得ます。そのためletが導入され、一旦、let x1;とすると、別目的で、var x1;とできなくなります。高校の授業で、一人でプログラミングする場合には、varという変数宣言でよいのですが、ソフト業界に就職したときには、varを使わず、letで宣言するように言われるかも知れません。本サイトでは、原則としてvarを使います。

(d) 配列

　複数のデータをまとめて扱う場合、JavaScriptでは配列を使います。配列を定義する方法は2通りあり、一つは、

var a1 = [1, 2, 3];

という具合に、カギ括弧で挟んで複数のデータを並べます。空の配列を作る場合は、

var a1 = [];

とします。

　もう一つの方法は、配列クラスArrayのコンストラクタnewを使う方法で、

var a1 = new Array(3);

とすると、空のデータが3個入っている配列ができます。要素数0の配列を作るのには、new Array(0);とします。

　配列のデータには、何番目のデータかという番号(先頭は0，末尾は配列の要素数－1です。この番号を配列の添字と言います)をカギ括弧に挟んでアクセスします。配列a1の3番目の要素はa1[2]です。a1 = [1, 2, 3];とした場合には、a1[2]に3が入っています。

　配列の定義にも注意すべき点があります。やはり複数の作業者でプログラミングを行う場合、

var a1 = [1, 2, 3];

とした後で、別の作業者が、

var a2 = [1, 2, 3];

として、うっかり、

a1 = a2;
a2.push(4);

などとやってしまうと、a1を操作している作業者が、a1[3]にはデータが入っていないはずと思っているのに、a1[3]に4が入っているのです。これは、a1 = a2とした時に、配列a1が配列a2に置き換わってしまうために起こります。こうした事故を防ぐために、ソフト業界では、配列の定義にはvarではなくconstを使えと言われると思います。constで定義したら、配列に代入できるのかと思うかも知れませんが、constで配列を定義しても、配列内の要素の値を書き換えることも、pushメソッドを使うこともできます。

　JavaScriptでは、連想配列を扱えます。配列の場合、a1[2]のようにしてアクセスしますが、連想配列では、配列の特定の要素を指定するのに文字列を使います。例えば、appleの値段が150円、orangeの値段が200円、bananaの値段が80円、というような配列を作る場合、商品名を'name'というキーに、値段を'price'というキーに設定して、

のように記述します。goods配列3番目のデータの'name'キーを取り出すのには、goods[2]['name']とすると、"banana"が得られます。goods配列の2番目のデータの'price'キーを取り出すのには、goods[1]['price']とすると、200が得られます。また、goods[2]['name']はgoods[2].name，goods[1]['price']はgoods[1].priceとすることもできます。

(e) クラス、オブジェクト

JavaScriptにおいて、クラスは、constructorメソッドを持ちます。その他にmethod1()，method2()の2つのメソッドを持つクラスを定義するのには以下のようにします。

class myClass {

constructor(a, b) {

this.a = a;
this.b = b;

}
method1() {

return this.a * this.b;

}
method2(d, e) {

this.d = d;
this.e = e;
return;

}

クラスmyClassのインスタンスを生成するconstructorは2つの引数a，bを持ち、それを、インスタンスのプロパティaとプロパティbに保持します。上記でthisとしているのは、コンストラクタが作ろうとしているインスタンス自身(Pythonのselfのようなもの)という意味です。this.a，this.bに代入すると、インスタンスのプロパティとして登録されます。メソッドmethod1()は、プロパティaとプロパティbの積を返します。メソッドmethod2()は、2つの引数dとeをとり、それをインスタンスのプロパティdとプロパティeに保持します。

　クラスmyClassのインスタンスobj1を生成するためには、newと言う演算子をmyClassに作用させてconstructorを起動します。constructorが2つの引数2と3を取るのであれば、

var obj1 = new myClass(2, 3);

とします。constructorでは、2をobj1.aに保持し、3をobj1.bに保持します。constructorの中のthisは、生成されたobj1を指します。
myClassのメソッドmethod1をobj1に対して動かすのには、

var c = obj1.method1();

とします。cには、method1の戻り値2*3=6が入ります。
method2の引数を4と5にして、method2をobj1に対して動かすには、

obj1.method2(4, 5);

とします。method2では、4をobj1.dに保持し、5をobj1.eに保持します。結局、obj1.a=2，obj1.b=3，obj1.d=4，obj1.e=5になっています。

　JavaScriptでは、オブジェクトは連想配列としてとらえられています。プロパティをキーとして、obj1を連想配列と見ると、obj1['a']=2，obj1['b']=3，obj1['d']=4，obj1['e']=5となっています。JavaScriptでは、無名関数が可能なのですが、メソッドとして無名関数を設定するとき、キーを、関数名、メソッド名として扱うことができます。

(f) 文

1. if文

　条件分岐を行う場合は、if文を使います。if文は、

if (条件式1) {

処理1

}
else if (条件式2) {

処理2

}
else {

処理3

}

という基本構造をしています。ifの後の{･･･}をifブロックと言います。条件式1がtrueの場合に処理1が行われ、条件式1がfalseで条件式2がtrueの場合に処理2が行われ、条件式1も条件式2もfalseのときに処理3が行われます。else ifやelseは省略可能です。

2. while文
　繰り返し処理を行う場合は、while文を使います。while文には、2通りの方法があり、一つは、

while (条件式) {

処理

}

と、もう一つは、

do {

処理

} while (条件式)

です。どちらも条件式が真である限り処理を繰り返し実行します。どちらも、{･･･}をwhileブロックと言います。前者では、はじめから条件式がfalseだと処理は1回も実行されませんが、後者では処理は必ず最低1回は実行されるところに違いがあります。

　処理の途中で、繰り返し処理を打ち切りたい場合には、break文を用います。処理の途中で、後続の処理をそこで打ち切ってwhileブロックの最初に戻りたい場合にはcontinue文を用います。

3. for文
　繰り返し処理を行う場合、はじめから繰り返し回数が決まっている場合には、for文を使います。for文には幾つかのパターンがあります。まず、

for (初期指定式; 条件式; 増減指定式) {

処理

}

例えば、初期指定式をj=0，条件式をj<11，増減指定式をjを1ずつ増加させるj++とし、最初に0だったsumをjずつ増加させる場合、

sum = 0;
for (var j = 0; j < 11; j++) {

sum += j;

}

となります。11回繰り返し処理を行いforループを抜けるとsumは等差数列の和55になっています。

　連想配列のキー(オブジェクトのプロパティ)を順番に取り出してその値をダイアログに表示させるような場合、for-inの組み合わせにして、

var a4 = {'name':"apple", 'price':150, 'made':'aomori', 'weight':600};
for (var p1 in a4) {

alert(p1 + ': ' + a4[p1]);

}

とします。ダイアログに、name: apple，price: 150，made: aomori，weight: 600と表示されていきます。

　配列の要素を順番に取り出すときには、for-ofの組み合わせにして、

var fruits = ['apple', 'orange', 'banana']
for (fruit of fruits) {

alert(fruit);

}

とします。ダイアログに、apple，orange，bananaが順番に表示されていきます。

　for文でも、処理の途中で、繰り返し処理を打ち切りたい場合には、break文を用います。処理の途中で、後続の処理をそこで打ち切って最初に戻りたい場合にはcontinue文を用います。

4. switch文

　if文では、trueかfalseかで分岐するだけですが、分岐が3つ以上になるとき、if{～}else if{～}else{～}の構造以外に、switch文を使うこともできます。switch文は、

switch (式) {
case 値1:

処理1
break;

case 値2:

処理2
break;

case 値3:

処理3
break;

default:

処理4
break;

}

という基本構造をしています。式の値が値1に一致するときに処理1，式の値が値2に一致するときに処理2，式の値が値3に一致するときに処理3，式の値が値1にも値2にも値3にも一致しないときに処理4が実行されます。一致・不一致の比較は、等価比較ではなく、厳密比較によって行われることに注意してください。

(g) 演算子(論理演算の場合、JavaScriptの数値は32ビットであることに注意)

1. +演算子

・2つの数値を加算します。c = a + b;

・文字列を結合します。"abc" + "defg"とすると、"abcdefg"になります。

2. 計算に用いる2項演算子

　-(減算)，*(乗算)，/(除算)，%(剰余)，**(べき乗)，>(左が右より大きいときにtrue)，<(左が右より小さいときにtrue)，>=(左が右以上の時にtrue)，<=(左が右以下のときにtrue)，
　&(ビットごとAND演算)，|(ビットごとOR演算)，^(ビットごとXOR演算)，<<(左の数値を右の数値分左シフト)，>>(左の数値を右の数値分右シフト、上位側ビットは元々のMSBで埋められます)，>>>(左の数値を右の数値分右シフト、上位側ビットは0で埋められます)，
　&&(左と右がともにtrueのときにtrue，それ以外はfalse)，||(左と右のどちらか一方がtrueのときにtrue，それ以外はfalse)，??(左がnull，undefinedのときに右で置き換える)

3. 代入演算子(2項演算子)

　=(代入演算子、右の数値を左に代入します)，
　+=(左に右の数値を加えて左に代入)，-=(左から右の数値を引いて左に代入)，*=(左に右をかけて左に代入)，/=(左を右で割って左に代入)，%=(左を右で割った余りを左に代入)，**=(左を右乗したものを左に代入)，
　&=(右のビットが0の左のビットを0にします)，|=(右のビットが1の左のビットを1にします)，^=(右のビットが1の左のビットを反転、右のビットが0の左のビットはそのまま)，
　<<=(左を右の数値分左シフトして左に代入)，>>=(左を右の数値分右シフト、上位側ビットを元々のMSBで埋めたものを左に代入)，>>>=(左を右の数値分右シフト、上位側ビットを0で埋めたものを左に代入)

4. 計算に用いる単項演算子

+数字(数字を数値に変換、+"1"でも数値1にします。変換できない文字を含む場合はNaNになる)，-数字(負数を表します。-"1"でも数値-1にします)，++(インクリメント演算子、++aとすると、1増やしてからaを評価、a++とすると、評価してから1増やします)，--(デクリメント演算子、--aとすると、1減らしてからaを評価、a--とすると、評価してから1減らします)，~(全ビット反転)，!(trueならばfalse，falseならばtrue)

5. 比較演算子

・等価比較演算子：同じデータ型同士を比較する場合は厳密比較と同じ。データ型が異なる同士の場合は、暗黙的型変換を行って比較(必ずしも一致比較でないので注意してください)

==(一致)，!=(不一致)
　例えば、1=='1'はtrue，1==trueはtrue，0==nullはfalse，null==undefinedはtrueになります。

・厳密比較演算子：一致比較の場合、同じ型で同じ値同士のみのときにtrue，それ以外はfalseになります。

===(一致)，!==(不一致、異なる型同士の比較でtrue)

6. 3項演算子

?と:を組み合わせた演算子があります。

条件式 ? trueのときに実行する式 : falseのときに実行する式

が基本形です。例えば、priceに数値が入っているとして、

action = price > 1000 ? "買わない" : "買う";
alert(action);

ダイアログに、priceが1000以下なら"買う"と表示し、1000を超すときは"買わない"と表示します。

7. 上記以外の演算子

new myClassとすると、クラスmyClassのインスタンスを生成します。

a in objectとすると、aがobjectのキー(プロパティ)の中にあればtrueになります。

delete obj1.propertyとすると、オブジェクトobj1のプロパティpropertyを削除します。5個の要素を持つ配列arrayに対して、delete array[2];とすると、array[2]の内容はundefinedになります。

typeof aとすると、aの型を示す文字列を返します。

8. 演算の優先順位

　原則カッコ(...)が優先されますが、A && (B | C)というような場合は、B | Cにカッコがついていても、Aがfalseならばそこで結果がfalseに確定するので、B | Cは評価されません。それ以外は、原則左から右に評価されていきます。
　評価する式の中に関数呼び出しがあれば優先されます。
　次に、a++，a--が評価されます。
　次に、!，~，+，-，++a，--a，typeof，deleteが評価されます。
　次に、**が評価されます。
　次に、*，/，%が評価されます。
　次に、ビットシフトが評価されます。
　次に、大小関係、inが評価されます。
　次に、等価比較演算子、厳密比較演算子が評価されます。
　次に、&，^，|，&&，||，??が評価されます。
　次に、3項演算子が評価されます。
　最後に代入演算子が評価されます。

(h) 関数

　類似の処理を何度も繰り返しコーディングしなくてよいように、関数を使います。JavaScriptでは、関数の定義の仕方が幾つかありますが、もっとも基本的なものは、

function 関数名(引数) {

処理
return 戻り値;

}

というものです。呼び出し側の引数の並びと関数の引数の並びは対応します。引数の個数に制限はありません。引数には、変数や数値だけでなく、配列、オブジェクト、関数を入れることができます。関数の中で引数の値を変更しても呼び出し側の変数には影響がありません。但し、配列やオブジェクトは、配列要素やプロパティの内容を関数内で変更すると、呼び出し側でも変更されてしまいます。呼び出し側と関数側で引数の型に相違があれば当然正しく動作しません。

　JavaScriptでは関数も1つのオブジェクトなので、変数に代入することができます。そのため、以下のように関数名を省略して変数に代入する、という書き方も可能です。

var data1 = function (arg1, arg2) {

処理
return 戻り値;

}

この場合、戻り値が変数に代入されます。こうした関数は無名関数と呼ばれますが、代入する変数名が関数名になります。配列要素に代入されるような場合には無名のままです。

　また、関数の引数並びや、配列要素、オブジェクトのプロパティとして、直接関数記述することも可能です。例えば、

var data1 = function (arg1, function (arg2) {

処理1
return 戻り値1;

}) {

処理2
retuen 戻り値2;

}

こうすると、まず、function(arg2)が呼ばれて戻り値1が、外側のfunction(arg1,･･･の第2引数となり、この関数の戻り値2がdata1に代入されます。

　また、以下のようにして、アロー関数式で関数を定義することが可能です。アロー関数式は、(引数) => {処理内容}という形をしています。

alert(data2("function"));
var data2 = (str1) => {

return str1 + "name";

}

こうすると、alert文で、data2を表示しようとしてアロー関数が"function"を引く数として呼び出され、str1に入った引数の"function"と、"name"を連結して、ダイアログ内にfunctionnameと表示されます。なお、アロー関数定義を、1行で、

var data2 = (str1) => str1 + "name";

と書いてしまうこともできます。これでも、str1 + "name"の結果がdata2に入ります。

　また、関数の再帰的呼び出しと言いますが、関数の引数にその関数自身を入れることができます。HTMLのDOMツリー全体を走査するような場合に使います。

var data3 = function rec1(s1, rec1) {

処理
if (終了条件) {

return 1;

}
if (rec1(s2, rec1)) return 1;
else return 0:

}

という具合にします。また、色々な条件により処理内容を変える必要がある場合に、以下のように、変数名だけで事前に定義しておいて、条件により変数に入れる関数を入れ替えて処理を変える、ということもできます。

var fn1;
･･････
if (条件1) fn1 = func1;
else if (条件2) fn1 = func2;
else fn1 = func3;
data4 = fn1(s3);
function func1(arg1) {

処理1

}
function func2(arg1) {

処理2

}
function func3(arg1) {

処理3

}

これで、条件1が成立するときに処理1，条件2が成立するとき処理2，それ以外の場合に処理3が行われます。

　なお、関数は、宣言だけでは実行されません。関数の呼び出し時点で実行されます。また、関数宣言はそのスコープ全体で有効なので、関数の定義を関数呼び出しの後に置くことが可能です。上記の例ではそうなっています。

　また、上記では変数fn1は関数になっているので、関数オブジェクトの機能を使うことができます。関数オブジェクトのプロパティには以下のようなものがあります。
fn1.name

fn1にfunc2が入っていれば、"func2"になります。

fn1.length

fn1に入っている関数の引数の数が入っています。上記の例では1です。

　関数を定義するとき、呼び出し側で関数の引数を省力したり、引数にundefinedが渡される場合に備えて、デフォルト引数を指定できます。以下のようにb=1とすると、第2引数が渡されれば渡された値をbとし、第2引数を省略するとb=1として動作します。

function func4(a, b=1) {

return a + b;

}

alert(func4(3));
alert(func4(7,5));
最初のalertでは、3+1で4と表示され、2番目のalertでは、7+5=12で12と表示されます。

　引数の数が不定の関数定義において、引数を配列のように操作する方法があります。引数並びの最後に、...theArgsを入れて(theArgsはfunc5内をスコープとする'theArgs'と決まった名前の配列で、残余引数と言います)、

function func5(a, b, ...theArgs) {

処理

}

とした関数があり、func5(1, 2, 3, 4, 5, 6);として呼び出すと、aに1，bに2が張りますが、残りの引数が、配列theArgsに入り、theArgs[0]=3, theArgs[1]=4, theArgs[2]=5, theArgs[3]=6となります。これを、for(const arg of theArgs)として取り出すことができます。また、theArgs.lengthは4になっていて引数の数を知ることができます。関数の引数すべてを残余引数にするには、関数定義をfunc5(...theArgs)とします。

JavaScriptに挑戦(その2)に続く

【広告】ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。

【広告】広告はここまでです。

　　記事TOP　　ブログTOP　　TOPページに戻る

【広告】ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。

【広告】広告はここまでです。

苦学楽学塾 随時入会受付中！
理系大学受験ネット塾苦学楽学塾
(ご案内はこちら)ご入会は、
まず、こちらまでメールを
お送りください。