意外と知らないJavaScriptの便利な機能8選

flat()

ネストされた配列をフラット化。引数に深さを指定することも可能

const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat());  //[1, 2, 3, 4] 1レベルの深さまでフラット化 

const arr2 = [1, 2, [3, [4]]];
console.log(arr2.flat(2)); //[1, 2, 3, 4] 2レベルの深さまでフラット化 

const arr3 = [1, [2, [3, [4, [5]]]]];
console.log(arr3.flat(Infinity)); //[1, 2, 3, 4, 5]  「Infinity」指定でどんなネストもフラットに 

Object.entries()

オブジェクトのキーとバリューをペアの配列として取得

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [["foo", "bar"], ["baz", 42]]

Object.fromEntries()

キーとバリューのペアの配列をオブジェクトに変換

const entries = [['foo', 'bar'], ['baz', 42]];
console.log(Object.fromEntries(entries)); // { foo: 'bar', baz: 42 }

padStart()とpadEnd()

文字列の先頭や末尾を特定の文字列で埋める

console.log('5'.padStart(3, '0')); // "005"
console.log('abc'.padEnd(6, 'def')); // "abcdef"

Object.values()

オブジェクトの全てのバリューを配列として取得する

const obj = { a: 'apple', b: 'banana', c: 'cherry' };
console.log(Object.values(obj)); // ["apple", "banana", "cherry"]

Numeric Separators（数値セパレータ）

数字リテラル内でアンダースコア(_)を使用して数値を視覚的に区切る

const num1 = 1_000_000;　//整数
console.log(num1);  // 1000000

const num2 = 3.141_592_653;　//小数点
console.log(num2);  // 3.141592653

「??」（Null合体演算子）

左側の値がnullまたはundefinedの場合にのみ右側の値を返す

const value = null;
const defaultValue = "こんにちは";
console.log(value ?? defaultValue); // "こんにちは"

「?.」（オプショナルチェーン演算子）

存在しないプロパティへのアクセスがエラーにならず、undefinedを返す。

const obj = { a: { b: 1 } };

//オプショナルチェーン演算子を使用、存在しないオブジェクトだが「undefined」を返す
console.log(obj.c?.b);  // undefined

//通常指定の場合。存在しないオブジェクトなので、エラーを返す。
console.log(obj.c.b);  //TypeError: Cannot read properties of undefined (reading 'b')