📌

JavaScript

に公開

コールバック関数

コールバック関数は、関数に引数として渡される関数のことで、渡ってきた関数を任意のタイミングで実行できる。

function greet(name, callback) {
  console.log("こんにちは、" + name + "さん!");
  callback();
}

function sayGoodbye() {
  console.log("さようなら!");
}

greet("太郎", sayGoodbye);

実行結果

こんにちは、太郎さん!
さようなら!

分割代入

基本的

const array = [1, 2, 3];

const [a, b, c] = array;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

スキップ可能

const [x, , z] = [10, 20, 30];

console.log(x); // 10
console.log(z); // 30

オブジェクトの分割代入

const user = {
  name: "Taro",
  age: 25
};

const { name, age } = user;

console.log(name); // "Taro"
console.log(age);  // 25

プロパティ名と変数名が違うとき

const user = {
  name: "Taro",
  age: 25
};

const { name: userName, age: userAge } = user;

console.log(userName); // "Taro"
console.log(userAge);  // 25

関数の引数で使うこともできる

function greet({ name, age }) {
  console.log(`こんにちは、${name}さん(${age}歳)`);
}

const person = { name: "Hanako", age: 30 };

greet(person);
// → こんにちは、Hanakoさん(30歳)

スプレッド演算子(...)

基本的

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]

配列のコピー・結合

const a = [1, 2];
const b = [3, 4];

const copy = [...a]; // [1, 2]
const merged = [...a, ...b]; // [1, 2, 3, 4]

関数の引数展開

function sum(x, y, z) {
  return x + y + z;
}

const nums = [1, 2, 3];
console.log(sum(...nums)); // 6

オブジェクトのコピー・マージ(ES2018以降)

const obj1 = { name: 'Alice' };
const obj2 = { age: 25 };

const mergedObj = { ...obj1, ...obj2 };
// { name: 'Alice', age: 25 }

配列の一部を取り出して新しい配列に

const original = [1, 2, 3, 4];
const [first, ...rest] = original;

console.log(first); // 1
console.log(rest);  // [2, 3, 4]

なお、シャローコピーである。

falsy(ファルシー)

falsy(ファルシー)とは、偽(false)とみなされる値のこと。

false
0         // 数値のゼロ
-0        // マイナスゼロ(あまり使わないけど存在する)
0n        // BigIntのゼロ
""        // 空文字列
null
undefined
NaN       // 計算不能な数値(例: 0 / 0)

非同期処理

どちらも非同期処理だが、async / awaitの方がコードが分かりやすい

Promise

https://chatgpt.com/share/67ee9323-1c80-800e-9b4a-be55cb91578f

async / await

https://chatgpt.com/share/67ee93fd-5d10-800e-8a36-40dc20f97dda

use strict

use strictとは、コードに対してエラーチェックを強化し、より安全な書き方を強制する。
https://chatgpt.com/share/67efd66a-6108-800e-b910-ede99c697189

テンプレートリテラル

文字列を扱うときにとても便利な機能
変数展開(埋め込み)

const name = "太郎";
const message = `こんにちは、${name}さん!`;
console.log(message); // → こんにちは、太郎さん!

式の評価

const a = 5;
const b = 10;
console.log(`合計は ${a + b} です`); // → 合計は 15 です

複数行の文字列

const text = `これは
複数行に
またがった文字列です`;
console.log(text);

関数との組み合わせ(タグ付きテンプレート)

function emphasize(strings, ...values) {
  return strings[0] + values.map((v, i) => `**${v}**${strings[i + 1]}`).join('');
}

const name = "太郎";
const age = 20;
console.log(emphasize`名前は${name}、年齢は${age}歳です`);

https://chatgpt.com/share/67f1eeaf-2f84-800e-b201-d2ec162c99f3

Discussion