🐿️

JavaScript④

2022/12/14に公開

インクリメントとデクリメント

  • インクリメント
    数値の値を1増加させる
    インクリメント演算子 (++)

  • デクリメント
    数値の値を1減少させる
    デクリメント演算子 (--)

let num = 10;

// インクリメント
num++;
console.log(num);

// デクリメント
num--;
console.log(num);

前置演算子と後置演算子で違いが発生するケースについて

実務上では使われない割に、理解が難しいテーマ

++や—を変数の後につけた場合を後置演算子
変数の前に++や—をつけた場合は前置演算子

前置演算子はインクリメントしてから代入されるのに対して
後置演算子では代入してからインクリメントが行われるため
計算に違いが生じる

let num1 = 10;
let num2 = 10;
let ans1 = ++num1;
let ans2 = num2++;

直感的に分かりにくくややこしいプログラムは書かない事!
前置演算子と後置演算子で違いが出る場合があることを覚えておく
ほとんどのケースで後置演算子が使われる

条件分岐について

  • 「もし○○なら××する」というプログラム
  • 言い換えると、値によって処理するプログラムを分岐させる

例1)ECサイト:通販に商品代金合計が、もし2000円未満なら送料5000円を請求する。
例2)選挙の事務:Aさんが、もし18歳以上ならば投票の入場券を発送する。

条件分岐のパターン

  • if/else
  • if/else if/else
  • switch
    3つのパターンがある

構文 if/else

if(条件式) {
//条件式がtrueの場合に実行したい処理
}else {
//条件式がfalseの場合に実行したい処理
}

補足:条件式がfalseの時に実行する処理がない場合はelseを省略可能、
if(条件式) {
//条件式がtrueの場合に実行したい処理
}

例題

  • 変数xを宣言すると同時に整数を代入
  • 変数xの値が、100以上だったら、’100以上の値です’とコンソールに出力
  • 変数xが100未満だったら、’100未満の値です’とコンソールに出力

100以上の場合

const x = 100;
if(x >= 100) {
    console.log('100以上の値です');
} else {
    console.log('100未満の値です');
}

100未満の場合

const x = 99;
if(x >= 100) {
    console.log('100以上の値です');
} else {
    console.log('100未満の値です');
}

比較演算子の種類

演算子 説明
== 等しい
!= 等しくない
=== 厳密に等しい
!== 厳密に等しくない
> より大きい
>= 以上
< より小さい
<= 以下

構文 if/else if/else

if(条件式1) {
//条件式1がtrueの場合に実行したい処理
} else if (条件式2) {
//条件式2がtrueの場合に実行したい処理
] else {
//全ての条件式が成り立たなかった場合に実行したい処理
}
補足:else ifは、複数記述可能

例題
テストの点数xによって、通知表の成績をコンソールに出力する

  • 90点以上A
  • 80点以上B
  • 60点以上C
  • 60点未満D

Aが出力される

const x = 90;
if(x >= 90) {
    console.log('A');
} else if(x >= 80) {
    console.log('B');
} else if(x >=60) {
    console.log('C');
} else {
console.log('D');
}

比較演算子

比較演算子「==」「===」の違いについて理解してプログラムが書けるようになる
==等しい
===厳密に等しい

「==」同じと見なされる

let num = 100;
let str = '100';

if(num == str) {
    console.log('同じ');
} else {
    console.log('同じではない');
}

「===」同じと見なされない

let num = 100;
let str = '100';

if(num === str) {
    console.log('同じ');
} else {
    console.log('同じではない');
}

「==」は抽象的な比較で内容が同じであれば型は違ってもtrueと見なされる
比較する前に型の変換が行われる

「===」は厳密な比較で内容も型も同じ時にtrueと見なされる

どちらを使ったら良いか?
「===」原則としてこっち!
曖昧に比較するよりも厳密に比較した方がバグが発生しにくくなる

——

switchまでやりたかったけど今日はジムも行って時間なかったから明日に!
今週、来週と仕事ラストスパートで忙しいけどなるべく残業せず
効率よく終わらせて帰るのが目標💪🏻
それか気分転換に会社の近くのカフェで勉強してみようかな🥺明日もパワー!!

Discussion