☰
CreateLife ~AlwaysLatest~

文と式について

JavaScript

この辺をしっかり理解しておくとReactなどにステップアップした際につまづかない。
ここには「式」しか書けない、、みたいな事が出てくるから

前提

ECMAScript（JavaScriptの規格）に明示的に「文」と「式」の定義は書かれていない

その上での定義付となる

定義

式

変数代入時に右辺に書けるもの
値を生成するもの
式が必要とされるところで文は書けない

文

実行すると何かをするもの
文が必要とされるところで式は書ける⇒式文という

式

10;5 * 2;true; 'hello'; ; ...etc

文

let
const
break
continue
function
for
...etc

定義からわかる事

  • 一番外側（グローバルスコープ）は全て分である
  • JavaScriptは全て「文」の連なりである
  • 式は文の一部で使う
if(ここは文){} //　全体は式

ブロック文

{}
  • 複数の文を１つにまとめる
  • ブロック文はブロックスコープを持つ

if文でやっていること

if(hoge)の後に続くのは「文」ならなんでも良い

if(hoge) ok = true;

でもいいわけだ

ただ、「1つの文しか取れない」制約があるのでブロック文をつなげることが多いに過ぎない

if(hoge) {
	const hello = 'hello';
	return;
}

switch文について

before

function vegetableColor(vegetable) {
	if(vegetable === 'tomato'){
		console.log('red!');
	} else if(vegetable === 'pumpkin') {
		console.log('orange!');
	} else if(vegitable === 'onion') {
		console.log('white!');
	} else {
		console.log('noColor');
}
vetetableColor('tomato'); //red!

after

function vegetableColor(vegetable) {
	switch (vegetable) {
		case 'tomato':
			console.log('red!');
			break;
		case 'pumpkin':
			console.log('orange!');
			break;
		case 'onion': {
				const color = 'white';
				console.log(color);
				break;	
			}
		case default:
			console.log('noColor');
	}
}

ポイント

  • breakしないと全て実行されてしまう。
  • default設定が可能
  • 各ケースにブロック分を使える(case ‘onion’参照)
    • 各ケースで定数を定義できる

while文について

例

let count = 0;
while(count < 10 条件式) {
	console.log(count);
	count++;
}

ポイント

  • 毎回、条件式の中を評価してtrueなら繰り返す
  • 無限ループを避ける仕組みを書いておいた方が良い（例の様な）

do-while文について

例

let count = 0;
do {
	count++;
} while (count < 10);

ポイント

  • while文との違い
    • 初回の実行プログラムがあるかないか
    • do-whileのdo{}の中身は初回に必ず実行される
    • その後条件式を評価してtrueならループする
  • 初回実行したいかどうか

for文について

書き方

「式」を3つ取れる

  1. 初期化(let文、const文も取れる)
  2. 条件式
  3. 実行文の最後に行う式
for(初期化; 条件式; 実行文の最後に行う処理){}
// 例
for(let count=0; count < 10; i++){
	console.log(i);
}

応用的な書き方

  • 前提知識
    • let、constはカンマ区切りで書くことが出来る
    • カンマ演算子というものがある（複数の式を１つにまとめる）
let a='a', b='b';

// ↓カンマ演算子
count += 1, otherCount += 1;
  • ↑を利用してこんな書き方もできる
for(let count=0,otherCount=5; count<5; count+=1,otherCount+=2;){
	console.log(count); // 0 1 2 3 4 
	console.log(otherCount); // 5 7 9 11 13
}

for-of文

使い所

配列をループする時に使う

  • before
const fruits = ['apple','banana','orange','mango'];
for(let i = 0;i < fruits.length; i++){
	console.log(fruits[i]);
}
  • after
const fruits = ['apple','banana','orange','mango'];
for(const fruit of fruits){
	console.log(fruit);
}

ポイント

  • for-ofのofの左側はconstが一般的
    • 与えられた配列の要素を書き換えたくないから
    • for文の様に変数の更新というより毎回ブロック文を生成して実行するイメージ⇒そのため、constでエラーが出ない
  • オブジェクトのループはできない
    • オブジェクトはiterable（反復可能）ではない
  • for-ofの厳密な定義は
    • ofの右側にはiterableオブジェクトしか取れない

for-in文

使い所

オブジェクトのループに使う

const coffee = {
	name: 'Caffe Latte',
	size: 350,
	isHot: true,
}
for (const key in coffee) {
	console.log(key); // name size isHot
	console.log(coffee[key]); // 'Caffe Latte' 350 true
}

ポイント

  • 配列にも使える
    • 分けておくと良い

try-catch文について

  • エラーが発生しても処理を継続させる事ができる
  • どうしてもエラーが防げない様な場面で使用する（開発者が対処しきれないエラー）
  • 例
    • ログイン時、ユーザー登録していないユーザーがログインしようとした時⇒サーバーがエラーを返す
try {
	// エラーが起こりうる処理をかく
	console.log(hoge);
} catch {
	// ↑try{}内でエラーが起きた瞬間に処理がこちらに移る
	console.log('catch');
}
console.log('non');
  • hogeが未定義の場合
    • ‘catch’⇒’non’が表示
  • let hoge = ‘hoge’としていた場合
    • ‘hoge’⇒’non’が表示（’catch’は表示されない）

try-catch-finally文

基本的にはあまり使わない（try-catchの後始末）

  • try,catchが実行された後に必ずfinallyが実行される
  • try{}内で
    • returnされようと
    • continueしようと
    • エラーがでようと
    何をしてもfinally{}は実行される

throw文について

try{}とcatch{}で同じ処理がしたい（エラーが起きようと起きまいとしたい処理）とかに使う事が多い

  • エラーを作り出すもの
  • try{}内に書けば強制的にcatchに移る
  • throwで投げた式はcatchで受け取れる
try {
	throw 'hoge';
} catch (error){
	console.log(error); // 'hoge'
}

ちなみに、

throwで投げなくてもcatch(error)のerrorにはブラウザが内部的に作ってくれるエラーオブジェクトが受け取れる

try {
	console.log(hoge);
} catch (error) {
	console.log(error); // ブラウザが作ってくれるエラーオブジェクトが入っている
	console.log(error.name); // とかできる
}

HOME >  JavaScript >  文と式について