JavaScript: Merge two arrays

Ways to merge two or more arrays in Javascript and which one is more effective

by Varit Patel

JavaScript

const fruits1 = ["🍏", "🍎", "🍐"];

const fruits2 = ["🍊", "🍋", "🍌"];

/**
 * 1. Using concat method
 */

const concatFruits = fruits1.concat(fruits2);
console.log("concat:",concatFruits);

/**
 * Output
 * concat: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 2. Using ES6 spread syntax
 */

const spreadFruits = [...fruits1, ...fruits2];
console.log("spread:",spreadFruits);

/**
 * Output
 * spread: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 3. Using Push method
 * This method will mutate original array [fruits3]
 */

const fruits3 = ["🍏", "🍎", "🍐"];

const fruits4 = ["🍊", "🍋", "🍌"];

const pushFruits = fruits3.push(...fruits4);
console.log("push:",fruits3);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 4. Using unshift method
 * This method will mutate original array [fruits6]
 */

const fruits5 = ["🍏", "🍎", "🍐"];

const fruits6 = ["🍊", "🍋", "🍌"];

fruits6.unshift(...fruits5);
console.log("unshift:",fruits6);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 5. Using splice method
 * This method will mutate original array [fruits7]
 */

const fruits7 = ["🍏", "🍎", "🍐"];

const fruits8 = ["🍊", "🍋", "🍌"];

fruits7.splice(3, 0, ...fruits8);
console.log("splice:",fruits7);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */