JavaScriptの基本

コメント

//1行コメント

/*
複数行コメント
2行目
*/

変数　var

変数名、関数名の大文字小文字は区別される。
使用できる文字は半角英数字、アンダーバー、ドル記号。

変数宣言は var を付ける。

var num = 10;

varをつけなかった場合、グローバル変数として解釈される。

グローバル変数の宣言はvarを付けても、付けなくてもいい。（関数外で宣言すればグローバル）
ただ、グローバル変数でもvarで明示的に変数宣言はしたほうが良い。

関数内のローカル変数宣言は、宣言箇所に関わらず関数全体を通して有効になる。
関数の頭で宣言や、途中で宣言など関係ない。

var ret;	//グローバル変数
function Add10(a){
	//エラー。ローカル変数retが真下で定義されて関数全体で有効になるのでローカル変数retへのアクセスになる。
	//しかしretの変数宣言、var ret; はまだ実行されていないので、エラーとなってしまう。
	ret = a + 10;
	
	var ret;	//ここでローカル変数宣言しても関数全体を通して有効なので上の変数retもローカル変数として解釈される。
	
	return ret;
}

変数　let（ES6）

varで変数宣言すると、どこでもグローバルスコープだが、letで変数宣言すれば、ブロックスコープになる。
ES6ではletを使っていくのが基本になる。

if(true){
	let i = 1;
}
i = 2;	//これはエラーになる。

定数宣言　const（ES6）

再代入不可の変数
const data = 100;

let同様、ブロックスコープである。

データ型一覧

データ型 symbol（ES6）

作成したsymbolは、自身としか等しくならない。
Symbol('hoge') === Symbol('hoge') はfalseである。
Symbolの引数はオプションであり、主にデバッグ用かシンボルの説明文としか使われない。
引数が同名だからといって同じものにはならない。同名であっても内部的にユニークIDのようなものが付いていると思われる。
したがって、通常は var sym = Symbol(); というように使う。

const Tokyo = 0;
const Kanagawa = 1;
const Saitama = 2;

let place = Tokyo;

これは if(place === Tokyo) と if(place === 0) はどちらもtrueである。
これをSymbolで定義するとシンボルでしか受け付けなくなる。

const Tokyo = Symbol();
const Kanagawa = Symbol();
const Saitama = Symbol();

let place = Tokyo;

if(place === Tokyo) //true
if(place === 0) //false

ハッシュのキーとしても使える。
var key = Symbol();
myArray[key] = 'hoge';

文字列

シングルクォートかダブルクォートで囲む。
意味に違いは無いのでどちらで囲ってもよいが、HTMLを含む文字列を生成する場合はシングルクォートで囲っていたほうが便利。
文字列中に、シングル/ダブルクォートを使用する場合は、\でエスケープする。
※シングルクォートで囲っている場合はダブルクォートをエスケープする必要はないし、逆も同様

テンプレート文字列　ヒアドキュメントっぽく書く（ES6）

バッククォート（`）で文字列を囲むと改行もそのまま出力されるなどヒアドキュメントっぽく書ける。
バッククォートはキーボードで Shift+＠

let str = `本日は
晴天なり';

エスケープを使った改行コードもそのまま書ける
let str = `本日は\n晴天なり`;

変数も文字列中に展開できる
${変数名}

let str = "World!";
console.log(`Hello! ${str}`);

${}をそのまま文字列として出力したい場合（エスケープ）
\${
または
$\{
と書けばエスケープできる。

2進数、8進数、16進数

16進数はES6以前から使えるが、2進数と8進数の表記はES6から。

16進数は頭に「0x」
0xa8

2進数は頭に「0b」（ES6）
0b11

8進数は頭に「0o」ゼロオー（ES6）
0o12
※ES6以前でも頭にゼロを付けるだけ「012」で8進数として認識されていたが標準仕様ではなく、ブラウザ依存のため使うべきではない。

分割代入（ES6）

let a = 0;
let b = 1;

上記をこのように書ける
let [a, b] = [0, 1];

宣言と一緒じゃなくてもOK。
let a, b;
[a, b] = [0, 1];

変数の値を入れ替える
[a, b] = [b, a];

関数の戻り値で配列を受け取る場合、必要なものだけを受け取る（ES6）

関数の戻り値で配列が返ってくる場合、それを分割代入の形で変数で受け取れる。

function sample(){
	return [0, 1];
}
let [a, b] = sample();

いらない戻り値は無視することも出来る。

function sample() {
  return [1, 2, 3];
}
var [a, , b] = sample();
console.log(a); // 1
console.log(b); // 3

実行例）
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

関数の戻り値でオブジェクトを受け取る場合、必要なプロパティだけを受け取る（ES6）

プロパティ名を指定して取る
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}

名前付き引数を指定する（ES6）

function actorStatusLog({ name = 'ジュニア', age = 30, power = 10}) {
	//関数内ではそのまま変数としてアクセスできる
	console.log(name);
	console.log(age);
	console.log(power);
}
console.log( trapezoid({ name:'マイケル', age:20, power:100 }) );

function MemberAppeal( {name, age} ){
	console.log('私の名前は' + name + '。年齢は' + age + 'です');
}

MemberAppeal( { name:'田中', age:18 } );

初期値も指定出来る。

function MemberAppeal( {name='名無し', age=20} ){
	console.log('私の名前は' + name + '。年齢は' + age + 'です');
}

MemberAppeal( { name:'田中' } );

オブジェクトで特定のプロパティだけを利用することを明示する（ES6）

引数に渡したオブジェクトから特定のプロパティだけを受け取るのにも利用することもできる。
使う側は、オブジェクトを丸ごと渡せばいいだけなので便利。
後から見直すときもnameしか使ってない、というのが分かるので管理しやすい。

let Actor = {
	name: 'マイケル',
	age: 20,
	power: 100
};
let actName = function({name}) {
	console.log(name);
};
actName(Actor); //マイケル

他にも、正規表現のマッチから分割代入として取得できるなどもある。