はじめに
この記事は、学習の過程で得た知識を備忘録として記録したものです。
同じように未経験からIT業界を目指す方や、学習中の方の参考になれば幸いです。
学習した内容
- 変数宣言
- 型
- 演算子
- 条件分岐
- ループ
変数宣言
var
特徴
- 古い書き方(ES6以前)
- 関数スコープ
- 再宣言可能
- 巻き上げされる
例
var x = 10;
var x = 20; // 再宣言OK
console.log(x); // 20
注意点
console.log(a); // undefined
var a = 5;
「巻き上げ」により、宣言だけが先に評価されている
let
特徴
- ブロックスコープ(
{}で囲まれた部分) - 再宣言できない(同じスコープ内で)
- 巻き上げされるが、使用前にアクセスするとエラーになる
例
let y = 10;
// let y = 15; // Error
if(true) {
let y = 5; // 宣言OK
console.log(y); // 5
}
console.log(y); // 10
巻き上げ
console.log(b); // ReferenceError
let b = 3;
const
特徴
- 定数
- ブロックスコープ
- 再宣言できない
- オブジェクトや配列の中身の変更は可能
例
const a = 1;
// const a = 3; // エラー
const array = [1, 2, 3];
array.push(4); // OK
console.log(array); // 1, 2, 3, 4
使い分けの目安
| 使う場面 | 変数宣言 |
|---|---|
| 値があとで変わる(ループや一時的な変数) | let |
| 値を固定したい、変更しない定数 | const |
| 現在非推奨 | var |
結論
- 基本
constを使う。変更する必要がなければ - 変更する必要があるときは
letを使う -
varは使わないのがベター。古いコードで使っている場面もある
| 特徴 | var | let | const |
|---|---|---|---|
| スコープ | 関数スコープ | ブロックスコープ | ブロックスコープ |
| 再宣言 | 可能 | 不可 | 不可 |
| 再代入 | 可能 | 可能 | 不可 |
| 巻き上げ(ホイスティング) | あり | なし | なし |
型と型変換
let num = 40; // "number"
let str = "Hello World"; // "string"
let isTrue = true; // "boolean"
let emptyNum = null; // null(object)
let undifinedVlue; // "undefined"
let array = [1, 2, 3]; // 配列(object)
// 関数型のデータ型
function greet() {
console.log("Hello!");
}
greet(); // function
// 日付型のデータ型
let date = new Date();
console.log(typeof date); // "object"
// 暗黙的な型変換
let addNum = 1 + "1";
console.log(typeof addNum); // "string"
console.log(addNum); // "11"
let subsractedNum = 4 - "1";
console.log(typeof subsractedNum); // "number"
console.log(subsractedNum); // "3"
// 明示的な型変換
// 数値型への変換
let numFromStr = parseInt("42"); // 文字列から数字へ
let floatNumFromStr = parseFloat("3.14");
console.log(numFromStr); // "42"
console.log(typeof numFromStr); // "number"
console.log(floatNumFromStr); // "3.14"
console.log(typeof floatNumFromStr); // "number"
// 文字列型への変換
let strFromNum = String(42);
let strFromNum2 = (123).toString();
console.log(strFromNum);
console.log(typeof strFromNum); // "string"
console.log(strFromNum2);
console.log(typeof strFromNum2); // "string"
// 真偽値型への変換
// 0はFalse、1はTrue
let boolFromNumber = Boolean(1); // "True"
let boolFromEmptyString = Boolean(""); // "False"
console.log(typeof boolFromNumber); // "boolean"
console.log(typeof boolFromEmptyString); // "boolean"
// 配列型への変換
let arrayFromStr = Array("a", "b", "c");
console.log(typeof arrayFromStr); // "object"
console.log(arrayFromStr); //["a", "b", "c"]
// オブジェクト型への変換
let objFromStr = Object("a");
console.log(typeof objFromStr); // "object"
console.log(objFromStr); // String('a')
// データ型の判定
// 演算子
if ("2" == 2){ // True
console.log("True");
} else {
console.log("False");
}
if ("2" === 2){ // False
console.log("True");
} else {
console.log("False");
}
演算子
四則演算
| 記号 | 説明 |
|---|---|
| + | 加算 |
| - | 減算 |
| * | 乗算 |
| / | 除算 |
| % | 剰余 |
論理演算子
| 記号 | 説明 |
|---|---|
| && | AND |
| ｜｜ | OR |
| ! | NOT |
比較演算子
| 記号 | 意味 |
|---|---|
| == | 等しい |
| === | 厳密に等しい |
| != | 等しくない |
| !== | 厳密に等しくない |
| > | 大なり |
| >= | 以上 |
| < | 小なり |
| <= | 以下 |
三項演算子
(条件式) ? (Trueの場合の処理) : (Falseの場合の処理);
例
let age = 21;
let message = age >= 18 ? "成人です" : "未成年です";
console.log(message); // 成人です
条件分岐
if文
if(条件式1) {
// 条件式1がTrueの場合
} else if(条件式2) {
// 条件式2がTrueの場合
} else {
// 条件式1,2がFalseの場合
}
ループ
forループ
for (let i = 0; i < 5; i++) {
// i++とは、i = i + 1と同じ
console.log(i); // 0 1 2 3 4
}
whileループ
let j = 0;
while (j < 5) {
console.log("数値:", j); // 数値:0, 数値:1, 数値:2, 数値:3, 数値:4
j++;
}
do-whileループ
// 最低1回は必ず処理する
let k = 4;
do {
console.log("数値:", k);
k++;
} while (k < 5);
foreachループ
let fruits = ["apple", "banana", "grape"];
fruits.forEach(function(value) {
console.log(value);
});
// 出力結果:
// apple
// banana
// grape
まとめ
var、let、constの使い分けでは、「スコープ」「再宣言」「再代入」「ホイスティング」の違いが混同しやすいため、慣れるまでは都度復習しながら使うようにする。
また、数値は文脈によってnumber型やstring型に変わる場合があり、型が厳密に設定されないのがJavaScriptの特徴であることを意識しておく。