JavaScript 再入門(その9) 条件分岐 if

条件分岐 if

JavaScript の if 文はカッコ内の式を評価して、結果を Boolean型 に変換し true であれば処理を実行します。
false であれば else の処理を実行します。

let x = 'JavaScript' ;
if ( x == 'JavaScript' ) { // true
	console.log( 'JavaScript !' ) ;
} else {
	console.log( 'PHP' ) ;
}
// JavaScript !

JavaScript の Boolean への変換例

Boolean型への変換時に、0 (数値型)、” (文字列型空文字)、 null、undefined 、NaN のときに false となります。

console.log( Boolean(0) ) ; // false ***
console.log( Boolean(1) ) ; // true
console.log( Boolean(2) ) ; // true
console.log( Boolean(3) ) ; // true
console.log( Boolean('') ) ; // false ***
console.log( Boolean('A') ) ; // true
console.log( Boolean('B') ) ; // true
console.log( Boolean(null) ) ; // false ***
console.log( Boolean( undefined ) ) ; // false ***
console.log( Boolean( NaN ) ) ; // false ***

else if

複数の条件分岐を評価する場合は else if で条件をつなぎます。

let x = 'PHP' ;
if ( x == 'JavaScript' ) {
	console.log( 'JavaScript !' ) ;
} else if ( x == 'PHP' ) {
	console.log( 'PHP !' ) ;
} else if ( x == 'Python' ) {
	console.log( 'Python !' ) ;
} else {
	console.log( 'Other !' ) ;
}
// PHP !

三項演算子

条件の評価により値を返す必要がある場合に利用されます。

let result = condition ? trueValue : falseValue ;

condition が評価されて、ture であれば trueValue を、 false であれば falseValue を result へ返します。

let x = 'JavaScript' ;
let result = ( x == 'JavaScript' ) ? 'JavaScript !' : 'Other !' ;
console.log ( result ) ; // JavaScript !

if … else で置き換えると次になります。

let x = 'JavaScript' ;
let result ;
if ( x == 'JavaScript' ) {
	result = 'JavaScript !' ;
} else {
	result = 'Other !' ;
}
console.log ( result ) ; // JavaScript !

複数の条件をつなぐこともできます。

let x = 'PHP' ;
let result =
	( x == 'JavaScript' ) ? 'JavaScript !' :
	( x == 'PHP' ) ? 'PHP !' :
	( x == 'Python' ) ? 'Python !' : 'Other !' ;
console.log ( result ) ; // PHP !

if … else if で置き換えると次になります。

let x = 'PHP' ;
let result ;
if ( x == 'JavaScript' ) {
	result = 'JavaScript !' ;
} else if ( x == 'PHP' ) {
	result = 'PHP !' ;
} else if ( x == 'Python' ) {
	result = 'Python !' ;
} else {
	result = 'Other !' ;
}
console.log ( result ) ; // PHP !

参考リンク

MDN 開発者向けのウェブ技術 > if…else
MDN 開発者向けのウェブ技術 > 条件 (三項) 演算子
MDN 開発者向けのウェブ技術 > 式と演算子
MDN 開発者向けのウェブ技術 > JavaScript「再」入門