【JavaScript】スプレッド構文、レスト構文、分割代入まとめ

学習に使用した教材

以下の動画でJavaScriptのスプレッド構文、レスト構文、分割代入について勉強したので、備忘録として残しておきます

スプレッド構文

配列やオブジェクトの要素を展開できる構文

複数の配列を1つの配列にまとめる

app.js

const backend = ["Ruby", "PHP", "Python"];
const frontend = ["HTML", "CSS", "JavaScript"];

const languages = [...backend, ...frontend, "Java", "TypeScript"];

console.log(languages);

// 出力結果
// ['Ruby', 'PHP', 'Python', 'HTML', 'CSS', 'JavaScript', 'Java', 'TypeScript']

複数のオブジェクトを1つのオブジェクトにまとめる

app.js

const taroSkills = {
    javascript: 80,
    react: 70
};
const hanakoSkills = {
    javascript: 70,
    ruby: 80,
};

const totalSkills = {...taroSkills, ...hanakoSkills, sql: 70};

console.log(totalSkills);

// 出力結果
// {javascript: 70, react: 70, ruby: 80, sql: 70}

• 展開するオブジェクト同士で同じパラメータがある場合は、後に展開したオブジェクトのパラメータの値で上書きされる

関数の呼び出しにスプレッド構文を使う

app.js

function add (a, b, c) {
    return a + b + c;
}

const nums = [1, 2, 3];

const sum = add(...nums);

console.log(sum); // 6

レスト構文（残余引数）

残りの引数を1つの配列に集約できる構文

app.js

function awardMedals(gold, silver, bronze, ...others) {
    console.log(`金メダル: ${gold}\n銀メダル: ${silver}\n銅メダル: ${bronze}\n4位以下: ${others}`);
}

awardMedals("Japan", "China", "USA", "GB", "Ukraine", "Italy");

// 出力結果
// 金メダル: Japan
// 銀メダル: China
// 銅メダル: USA
// 4位以下: GB, Ukraine, Italy

分割代入

配列の要素やオブジェクトのプロパティに割り当てる変数を一度に複数定義できる構文

配列の分割代入

app.js

const result = ["Japan", "China", "USA"];

const [gold, silver, bronze] = result;

console.log(`${gold}, ${silver}, ${bronze}`);

// 出力結果
// Japan, China, USA

オブジェクトの分割代入

プロパティと同名の変数に値が代入される

app.js

const player = {
    name: "Shohei Ohtani",
    team: "Los Angeles Dodgers"
};

const { name, team } = player;

console.log(`${name}, ${team}`);

// 出力結果
// Shohei Ohtani, Los Angeles Dodgers

プロパティ名とは別名の変数に値を代入したい場合は、以下のように書く

app.js

const player = {
    name: "Shohei Ohtani",
    team: "Los Angeles Dodgers"
};

const { name: playerName, team: belongingTeam } = player;

console.log(`${playerName}, ${belongingTeam}`);

// 出力結果
// Shohei Ohtani, Los Angeles Dodgers

パラメータの分割代入

プロパティと同名のパラメータに値が代入される

app.js

const player = {
    firstName: "Shohei",
    lastName: "Ohtani",
    team: "Los Angeles Dodgers"
}

function fullName ({firstName, lastName}) {
    return `${firstName} ${lastName}`;
}

const playerName = fullName(player);

console.log(playerName); // Shohei Ohtani