JavaScript & TypeScriptにおける配列・オブジェクトの操作

初めに

こんにちは！JavaScriptとTypeScriptの配列操作 (map, filter, reduce) についてまとめていきたいと思います。

JavaScript編

map(各要素を変換)

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); 

実行結果
[ 2, 4, 6, 8, 10 ]

filter(条件に一致する要素を抽出)

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); 

実行結果
[ 2, 4 ]

reduce(値を累積)

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); 

実行結果
15

TypeScript編

map(各要素を変換)

const numbers: number[] = [1, 2, 3, 4, 5];
const doubled: number[] = numbers.map((num: number) => num * 2);
console.log(doubled); 

実行結果
[ 2, 4, 6, 8, 10 ]

filter(条件に一致する要素を抽出)

const numbers: number[] = [1, 2, 3, 4, 5];
const evens: number[] = numbers.filter((num: number) => num % 2 === 0);
console.log(evens); 

実行結果
[ 2, 4 ]

reduce(値を累積)

const numbers: number[] = [1, 2, 3, 4, 5];
const sum: number = numbers.reduce((acc: number, num: number) => acc + num, 0);
console.log(sum); 

実行結果
15

オブジェクトの配列を扱う場合

JavaScript

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 17 },
  { id: 3, name: "Charlie", age: 30 }
];

const adultUsers = users.filter(user => user.age >= 20);
console.log(adultUsers);

実行結果

TypeScript

type User = { id: number; name: string; age: number };

const users: User[] = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 17 },
  { id: 3, name: "Charlie", age: 30 }
];

const adultUsers: User[] = users.filter((user: User) => user.age >= 20);
console.log(adultUsers);

実行結果
[
{ id: 1, name: 'Alice', age: 25 },
{ id: 3, name: 'Charlie', age: 30 }
]

まとめ

JavaScriptでは、map・filter・reduce などの配列操作を型の指定なしで自由に使えます。これは書きやすい反面、意図しないデータ型やエラーに気づきにくいというデメリットがあります。一方、TypeScriptでは型アノテーションを付けることで、各関数の引数や戻り値に型の制約を持たせられます。これにより、型のミスマッチやバグをコンパイル時に発見できます。