javascriptの基本のき

比較演算子

比較演算子を忘れないようにメモ。

=(イコール)一つだと代入という意味になってしまうので、等しいはイコール２つ。

==	等しい
!=	等しくない
<	小さい
<=	以下
>	大きい
>=	以上
===	型も等しい
!==	型も等しくない

文字列か数値か

Javascriptで

5 + 5 = 10だけど、

5 + ‘5’ = 55になる。

つまり、文字列なのか数値なのかは、型をはっきりさせておかないといけない。

よく分かる例がprompt関数。

const n = prompt(‘数字を入力してください’);

console.log(n + 5);

prompt関数で入力したものは文字列とみなされます。

だから例えば１５と入力すれば、

15 + 5 で 20と表示されると思いきや、文字列の連結と認識されるので、

155と出力されます。

この入力文字を数字として認識させるには、

console.log( Number(n) + 5 ); とすればOK！

そうすれば20と表示されます。

初めから

const n = Number(prompt(‘数字を入力してください’));

とも入力可能です。

+=

sum += element;

は、以下を表します。

sum = sum + element;

+=を使うときの注意点

+= は数値と文字列の両方を使用することができます。

よって、数値なのか文字列なのかをはっきりさせないと、予期しない動作になってしまいます。

数値の場合

let sum = 0;
sum += 5;
console.log(sum); // 5

文字列の場合

let concatenatedString = "";
concatenatedString += "Hello, ";
concatenatedString += "world!";
console.log(concatenatedString); // "Hello, world!"

もう一つ注意する点は、初期化をするということ。

let sum = 0;のように初期化していないと、NaN（Not-a-Number）になってしまいます。

let sum;
sum += 5; // sumは未定義(undefined)のまま5が加算されようとするため、NaN（Not-a-Number）になる
console.log(sum); // NaN

null

nullとは、「値を持たない」「有効な値が存在しない」こと。

０や’’(空文字)はnullではないので要注意。

if文

言語によってif elseなのかelse ifなのかこんがらがるので、メモメモ。

if(){
} else if {
} else {
}

が正しい。最後にセミコロンは不要。

早期リターン

特殊なケースを先に振るい落とすための早期リターンがあります。

function checkString(str) {
    // 特殊なケース: 文字列が空の場合
    if (str === '') {
        return 'エラー: 文字列が空です';
    }

    // 通常の処理
    return '文字列の長さは ' + str.length + ' です';
}

console.log(checkString('Hello'));   // 出力: 文字列の長さは 5 です
console.log(checkString(''));         // 出力: エラー: 文字列が空です
console.log(checkString('Test'));     // 出力: 文字列の長さは 4 です

switch文

分岐する値が明確な時はif文ではなく、switch文を使うとよいです。

switch(color) {
   case 'red':
      console.log('赤');
　　　　　　break;
   case 'blue':
      console.log('青');
　　　　　　break;
　　　case 'yellow':
   case 'orange'
      console.log('黄色系');
　　　　　　break;
　　　default:
      console.log('なし');
　　　　　　break;
}

if文同様最後にセミコロンは不要。

条件を２つにする場合は、caseを2行にすればOKです。

for文

次は反復処理のfor文について。

for文もカンマで区切るかセミコロンで区切るのかを混同しやすいので、メモメモ。

consoleではテンプレートリテラルも使用しています。

for ( let i = 0; i < 10; i++) {
　　　console.log("繰り返すのは" + i +"回");
　　　console.log(`${i} 回繰り返す`);
}

while文

繰り返す回数が決まっている場合はfor文でいいですが、決まっていない場合はwhile文を使うことができます。

while(条件式){
}

do while文

では、do while文はwhile文とどのような違いがあるでしょうか？

while文は先に条件判定をしたいとき

do while文は1回は実行して、そのあとで条件判定するとき

になります。

do {
} while (条件式);

do whileは最後にセミコロンが必要です。

forEach文

array.forEach(function(element, index, array) {})

引数は３つ。

1. 現在の配列要素
2. 現在の配列要素のインデックス
3. forEachが呼び出された元の配列

です。

私はforEach文で何度もnot a functionとエラーになったことがあります。

その原因のほとんどはarrayが配列オブジェクトではないということでした。

悪い例

const obj = { a: 1, b: 2, c: 3 };
obj.forEach(element => console.log(element)); // エラー: obj.forEach is not a function

良い例

const array = [1, 2, 3];
array.forEach(element => console.log(element)); // 正常に動作する例

対策

Array.isArray()を使って配列かどうかの確認

if (Array.isArray(array)) {
  array.forEach(element => console.log(element));
} else {
  console.log("This is not an array");
}

Array.from()で配列に変換

const nodeList = document.querySelectorAll('div');
Array.from(nodeList).forEach(element => console.log(element));

また、arrayがnullやundefinedの場合エラーになるので、デフォルト値を設定するとよいでしょう。

const array = maybeUndefinedOrNullArray || [];
array.forEach(element => console.log(element));

三項演算子

score > 70 ? 'A' : 'B'

score > 70が成立していたらA、成立していなかったらBという意味になります。

三項演算子は変数に代入して使うことが可能。

関数宣言と関数式

関数宣言

function double(num) {
   return num * 5;
}

関数式

const double = function(num) {
   return num *5;
};

関数式にはセミコロンが必要です。

また、関数宣言の特徴として、コードの巻き上げがあります。

コードの巻き上げとは、コードのどこに書いてもコードの先頭に書いたことになる、ということです。

アロー関数式

アロー関数はES6から導入された書き方。

　const double = (num) => {
   return num * 5;
};

引数が１つの場合は以下のように書くことができます。

const double = num => {
   return num * 5;
};

さらに戻り値が１文の場合は以下のようになります。

const double = num => num * 5;

オブジェクトが複数ある場合にはかっこ（）を使えば１文として扱えます。

const func = (num1, num2) =>({
   number01 : num1,
   number02 : num2
})

console.log(func(10, 20))//{number01: 10, number02 : 20}

アロー関数の注意点

アロー関数の注意点は

thisの値が変わることです。

const name = 'Global Name';

const obj = {
  name: 'Alice',
  arrowFunction: () => {
    console.log('Arrow function:', this.name); // アロー関数内のthisはグローバルスコープを指す
  },
  regularFunction: function() {
    console.log('Regular function:', this.name); // 通常の関数内のthisはobjを指す
  }
};

obj.arrowFunction(); // "Arrow function: Global Name"
obj.regularFunction(); // "Regular function: Alice"

今回はここまで。続きはまた次回。