JavaScript の基礎

'hello'          // string
42               // number  ← 整数と小数の区別が無い。すべて64bit浮動小数点
10n              // bigint  ← 大きな整数用
true             // boolean
undefined        // 値が入っていない（宣言されたが未代入）
null             // 「無い」ことを明示的に表す
Symbol('id')     // symbol（ほぼ使わない）

const x = 1;   // 再代入できない（基本これ）
let y = 2;     // 再代入する時だけ
var z = 3;     // 使わない

if (true) { var a = 1; let b = 2; }
console.log(a);   // 1     ← ブロックの外から見えてしまう
console.log(b);   // エラー ← 正しい挙動

0 == '0'        // true   ← 文字列が数値に変換される
0 == ''         // true
0 == false      // true
null == undefined  // true
'' == '0'       // false  ← 直感に反する

NaN === NaN         // false
Number.isNaN(NaN)   // true   ← 判定にはこれを使う

const a = { n: 1 };
const b = a;
b.n = 2;
console.log(a.n);   // 2   ← 同じものを指している

function addTax(items) {
  items.forEach((i) => { i.price *= 1.1; });   // 引数を破壊している
}

const withTax = items.map((i) => ({ ...i, price: Math.floor(i.price * 1.1) }));

function f(a, b = 10) { return a + b; }      // 関数宣言（巻き上げられる）
const g = (a, b = 10) => a + b;              // アロー関数（式）
const h = (...args) => args.length;          // 可変長引数

function counter() {
  let count = 0;
  return () => ++count;    // 外側の count を「閉じ込めて」いる
}
const next = counter();
next();   // 1
next();   // 2

const obj = {
  name: 'sato',
  hello() { return this.name; },
};
obj.hello();              // 'sato'   （obj.  の形で呼んだから）
 
const fn = obj.hello;
fn();                     // undefined（呼び出し元が消えた）

class Timer {
  constructor() { this.count = 0; }
  start() {
    setInterval(() => { this.count++; }, 1000);       // 動く
    setInterval(function () { this.count++; }, 1000); // 動かない（this が違う）
  }
}

const users = [{ name: 'a', age: 20 }, { name: 'b', age: 30 }];
 
users.map((u) => u.name);            // 変換 → ['a', 'b']
users.filter((u) => u.age >= 25);    // 絞り込み
users.find((u) => u.name === 'a');   // 最初の1件（無ければ undefined）
users.some((u) => u.age > 25);       // 1件でも該当するか → boolean
users.every((u) => u.age > 10);      // 全部該当するか
users.reduce((sum, u) => sum + u.age, 0);   // 畳み込み → 50
users.flatMap((u) => [u.name, u.age]);      // 変換して平坦化
Object.groupBy(users, (u) => u.age >= 25 ? 'senior' : 'junior');  // 分類

const a = [3, 1, 2];
const b = a.sort();     // a も [1,2,3] に変わる（b と a は同じ配列）
const c = a.toSorted(); // a は変わらない（新しい配列）

const { name, age = 0 } = user;              // 分割代入（既定値つき）
const [first, ...rest] = list;               // 配列の分割代入
const merged = { ...defaults, ...options };  // スプレッド（後勝ち）
 
user?.profile?.avatar        // オプショナルチェイニング（途中が null/undefined なら undefined）
user.name ?? '名無し'         // null 合体（null/undefined の時だけ既定値）
`${name} さん（${age}歳）`     // テンプレートリテラル

fetch('/api/users')            // Promise を返す（まだ結果は無い）
  .then((res) => res.json())   // 成功したら次へ
  .then((data) => console.log(data))
  .catch((err) => console.error(err))   // どこかで失敗したらここ
  .finally(() => console.log('完了'));

async function loadUsers() {
  try {
    const res = await fetch('/api/users');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    logger.error({ err }, 'ユーザーの取得に失敗');
    throw err;
  }
}

// 直列: 合計 300ms（100 + 100 + 100）
const a = await fetchA();
const b = await fetchB();
const c = await fetchC();
 
// 並列: 合計 100ms（同時に始めて、全部揃うのを待つ）
const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]);

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
 
// 出力: 1, 4, 3, 2

// export する側
export const VERSION = '1.0';
export function hello() {}
export default class Server {}
 
// import する側
import Server, { hello, VERSION } from './server.js';
import * as server from './server.js';

// CommonJS（古い方）
const { hello } = require('./server');
module.exports = { hello };