LoginSignup
1
3

More than 3 years have passed since last update.

javascript

Posted at

: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

続きはオブジェクトから

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3