Posted at

javascript

:use strict

"use strict"という文字列をファイルまたは関数の先頭に書くことで、そのスコープにあるコードはstrict modeで実行


変数


var 変更できる
const 変更できない


エラー


構文エラーと実行エラーの2種類

SyntaxError: missing ) after argument list[詳細] index.js:1:13
^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^ ^^^^
エラーの種類 | |  行番号:列番号
エラー内容の説明 ファイル名

実行エラー

ReferenceError



データ型

データ型を大きく分けると、プリミティブ型とオブジェクト

プリミティブ型(基本型): 真偽値や数値などの基本的な値の型
オブジェクト型: プリミティブ型以外

確かに配列もオブジェクト型だったな

console.log(typeof true);// => "boolean"
console.log(typeof 42); // => "number"
console.log(typeof "JavaScript"); // => "string"
console.log(typeof Symbol("シンボル"));// => "symbol"
console.log(typeof undefined); // => "undefined"
console.log(typeof null); // => "object"
console.log(typeof ["配列"]); // => "object"
console.log(typeof { "key": "value" }); // => "object"
console.log(typeof function() {}); // => "function"
実行



undefined

undefinedはリテラルではない



オブジェクトリテラル

 オブジェクトリテラルは{}(中括弧)を書くことで、新しいオブジェクトを作成

{}がオブジェクト

https://jsprimer.net/basic/data-type/



演算子

べき乗演算子

console.log(2 ** 4); // => 16

NaNは"Not-a-Number"

三項演算子
const valueA = true ? "A" : "B";
console.log(valueA); // => "A"

OR演算子(||)

const x = true;
const y = false;
// xがtrueなのでyは評価されない
console.log(x || y); // => true
// yはfalseなのでxを評価した結果を返す
console.log(y || x); // => true



関数


functionがキーワード

// 関数宣言
function 関数名(仮引数1, 仮引数2) {
// 関数を呼び出された時の処理
// ...
return 関数の返り値;
}
// 関数呼び出し
const 関数の結果 = 関数名(引数1, 引数2);
console.log(関数の結果); // => 関数の返り値

例)

function multiple(num) {
return num * 2;
}

console.log(multiple(10));

デフォルト引数

function echo(x = "デフォルト値") {
return x;
}

console.log(echo(1)); // => 1
console.log(echo()); // => "デフォルト値"

可変長引数

引数を固定した数ではなく任意の個数の引数を受け取れること

const max = Math.max(1, 5, 10, 20);
console.log(max); // => 20

...args

※argsの命名はなんでも良い

function fn(...args) {
// argsは引数の値が順番に入った配列
console.log(args[0]); // => "a"
console.log(args[1]); // => "b"
console.log(args[2]); // => "c"
}
fn("a", "b", "c");

分割代入

const { id } = user;

関数式

※factorialに引数を持たせたいときは()をつけていいのか

const factorial = function innerFact(n) {
if (n === 0) {
return 1;
}
// innerFactを再帰的に呼び出している
return n * innerFact(n - 1);
};
console.log(factorial(3)); // => 6

アロー関数

const 関数名 = () => {
// 関数を呼び出した時の処理
// ...
return 関数の返す値;
};

// 仮引数の数と定義
const fnA = () => { /* 仮引数がないとき */ };
const fnB = (x) => { /* 仮引数が1つのみのとき */ };
const fnC = x => { /* 仮引数が1つのみのときは()を省略可能 */ };
const fnD = (x, y) => { /* 仮引数が複数の時 */ };
// 値の返し方
// 次の2つの定義は同じ意味となる
const mulA = x => { return x * x; }; // ブロックの中でreturn
const mulB = x => x * x; // 1行のみの場合はreturnとブロックを省略できる

メソッド

const object = {
method1: function() {
// `function`キーワードでのメソッド
},
method2: () => {
// Arrow Functionでのメソッド
}
};

const object = {};
object.method = function() {
};

省略記法

const object = {
method() {
return "this is method";
}
};
console.log(object.method()); // => "this is method"





ブロック文

{
文;
文;
}



条件分岐

const version = "ES6";

if (version === "ES5") {
console.log("ECMAScript 5");
} else if (version === "ES6") {
console.log("ECMAScript 2015");
} else if (version === "ES7") {
console.log("ECMAScript 2016");
}



ループ処理


while

let x = 0;
console.log(`ループ開始前のxの値: ${x}`);
while (x < 10) {
console.log(x);
x += 1;
}
console.log(`ループ終了後のxの値: ${x}`);

for

let total = 0; // totalの初期値は0
// for文の実行フロー
// iを0で初期化
// iが10未満(条件式を満たす)ならfor文の処理を実行
// iに1を足し、再び条件式の判定へ
for (let i = 0; i < 10; i++) {
total += i + 1; // 1から10の値をtotalに加算している
}
console.log(total); // => 55

forEach

const array = [1, 2, 3];
array.forEach(currentValue => {
console.log(currentValue);
});
// 1


続きはオブジェクトから