JavaScriptの定数

// 基本的な定数宣言
const name = value;

// 分割代入で定数を宣言
const arr = [1, 2];
const [item1, item2] = arr;

// ループ構文での要素を定数として取得
for (const item of arr) {
    // ...
}

const num = 1;

// 定数に対してデータを直接変更するような操作を行っているためエラー
num = 5;
num += 2;
num++;

// 初期化が行われていないため、エラー
const notInitialied;

let num = 1;
num = 3;
num += 2;
num++;

/**
 * プリミティブのデータの定数を利用しないでテーブルの表示を 20 行毎に分割し、
 * 指定されたページに該当する20行の表示制御を行う。
 * @param {number} displayPageNumber 表示したいページ
 * @param {HTMLTableElement} tableElement 表示を制御したいテーブル
 * @param {string} trDefaultDisplay 該当テーブルのtrの display プロパティ
 */
function pagenate1(displayPageNumber, tableElement, trDefaultDisplay = 'block') {
    let tableRows = [...tableElement.querySelectorAll('tr:has(> td)')];
    // 20 がどのような数値なのか、コメントが無ければ周りの処理から推測するしかない
    if (tableRows.length / 20 < displayPageNumber) {
        console.log('displayPageNumber に存在しないページが指定されました。');
        return;
    }

    // テーブルの行を一旦全て不可視にする
    for (let row of tableRows) {
        row.style.display = 'none';
    }
    
    // 該当するページの行のみ可視状態とする
    for (let row of tableRows.slice(displayPageNumber * 20, (displayPageNumber + 1) * 20)) {
        row.style.display = trDefaultDisplay;
    }
}

/**
 * プリミティブのデータの定数を利用してテーブルの表示を 20 行毎に分割し、
 * 指定されたページに該当する20行の表示制御を行う
 * @param {number} displayPageNumber 表示したいページ
 * @param {HTMLTableElement} tableElement 表示を制御したいテーブル
 * @param {string} trDefaultDisplay 該当テーブルのtrの display プロパティ
 */
function pagenate2(displayPageNumber, tableElement, trDefaultDisplay = 'block') {
    let tableRows = [...tableElement.querySelectorAll('tr:has(> td)')];

    const maxDisplayRowNumber = 20;
    const lastPageNumber = tableRows.length / maxDisplayRowNumber; 
    if (lastPageNumber < displayPageNumber) {
        console.log('displayPageNumber に最大ページ数より大きな値が指定されました。');
        return;
    }

    // テーブルの行を一旦全て不可視にする
    for (let row of tableRows) {
        row.style.display = 'none';
    }

    // 計算の経過を定数に保持
    const start = displayPageNumber * maxDisplayRowNumber;
    const end = (displayPageNumber + 1) * maxDisplayRowNumber;

    // 該当するページの行のみ可視状態とする
    for (let row of tableRows.slice(start, end)) {
        row.style.display = trDefaultDisplay;
    }
}

const obj = {
    prop1: 1,
    prop2: 'foo',
    setProp2: function(value) { this.prop2 = value; },
};

// プロパティの値変更
obj.prop1 = 3;
// メソッドを介したプロパティの変更
obj.setProp2('var');
// 動的なプロパティの追加
obj.prop3 = 3;
obj['prop4'] = { prop1: 1 };

const arr = [1];
// 配列の定数もメソッドによる要素の変更が可能
arr.push(2, 3, 4);
// 添え字アクセスによる要素の変更
arr[2] = 5;
// 配列も動的にプロパティを追加可能
arr.lastChangeIndex = 2;

/**
 * 定数を利用してテーブルの表示を 20 行毎に分割し、
 * 指定されたページに該当する20行の表示制御を行う
 * @param {number} displayPageNumber 表示したいページ
 * @param {HTMLTableElement} tableElement 表示を制御したいテーブル
 * @param {string} trDefaultDisplay 該当テーブルのtrの display プロパティ
 */
function pagenate3(displayPageNumber, tableElement, trDefaultDisplay = 'block') {
    const tableRows = [...tableElement.querySelectorAll('tr:has(> td)')];

    const maxDisplayRowNumber = 20;
    const lastPageNumber = tableRows.length / maxDisplayRowNumber; 
    if (lastPageNumber < displayPageNumber) {
        console.log('displayPageNumber に最大ページ数より大きな値が指定されました。');
        return;
    }

    // テーブルの行を一旦全て不可視にする
    for (const row of tableRows) {
        row.style.display = 'none';
    }

    // 計算の経過を定数に保持
    const start = displayPageNumber * maxDisplayRowNumber;
    const end = (displayPageNumber + 1) * maxDisplayRowNumber;

    // 該当するページの行のみ可視状態とする
    for (const row of tableRows.slice(start, end)) {
        row.style.display = trDefaultDisplay;
    }
}

const obj1 = { prop: 5 };

// 15に変更される
obj1.prop = 15;

// これ以降obj1に対する変更を行うことはできない
Object.freeze(obj1);

// 反映されない or エラー
obj1.prop = 25;

console.log(obj1.prop); // 15

// freezeメソッドは引数に渡したオブジェクトをそのまま返すため、
// 初めからイミュータブルなオブジェクトの定数を宣言することも可能
const obj2 = Object.freeze([1, 2, 3, 4]);

// 反映されない or エラー
obj2.push(5);

console.log(obj2); // Array [1, 2, 3, 4]

const obj3 = Object.freeze({ innerObj: {} });

// プロパティに格納されているデータ自体にはfreezeの効力が及ばないため、
// 下記のような変更は出来てしまう
obj3.innerObj.prop = 1;

console.log(obj3.innerObj.prop); // 1