Transforming Arrays: slice, concat, flat, join

Med

Array transformation methods create new arrays or values from existing arrays without mutating the original. slice creates shallow copies, concat merges arrays, flat flattens nested structures, and join creates strings. These are essential tools for immutable array operations.

Interactive Visualization

mutation Methods

1
2
3

Key Points

  • slice(start, end) - extracts portion, returns new array
  • concat(...arrays) - merges arrays, returns new array
  • flat(depth) - flattens nested arrays
  • flatMap(callback) - map + flat combined
  • join(separator) - creates string from array
  • All return new values (non-mutating)

Code Examples

slice - Shallow Copy

const arr = [1, 2, 3, 4, 5];

// Extract portion
const middle = arr.slice(1, 4);  // index 1 to 3 (end is exclusive)
console.log(middle);  // [2, 3, 4]

// Copy entire array (shallow)
const copy = arr.slice();
console.log(copy);  // [1, 2, 3, 4, 5]
console.log(copy === arr);  // false (different array)

// Last N elements
const last3 = arr.slice(-3);
console.log(last3);  // [3, 4, 5]

// Original unchanged
console.log(arr);  // [1, 2, 3, 4, 5]

slice extracts a portion without mutating. Use slice() for shallow copy.

concat vs Spread

const arr1 = [1, 2];
const arr2 = [3, 4];

// concat
const combined = arr1.concat(arr2, [5, 6]);
console.log(combined);  // [1, 2, 3, 4, 5, 6]

// Spread syntax (modern, preferred)
const combined2 = [...arr1, ...arr2, 5, 6];
console.log(combined2);  // [1, 2, 3, 4, 5, 6]

// Originals unchanged
console.log(arr1);  // [1, 2]
console.log(arr2);  // [3, 4]

concat merges arrays. Spread syntax [...a, ...b] is modern equivalent.

flat - Flatten Nested Arrays

const nested = [1, [2, 3], [[4, 5]], 6];

// flat(depth) - default depth 1
console.log(nested.flat());     // [1, 2, 3, [4, 5], 6]
console.log(nested.flat(2));    // [1, 2, 3, 4, 5, 6]
console.log(nested.flat(Infinity));  // Fully flattened

// Remove empty slots
const sparse = [1, , 3, , 5];  // Has holes
console.log(sparse.flat());  // [1, 3, 5] (holes removed)

// Practical: flatMap
const sentences = ['Hello world', 'Goodbye moon'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words);  // ['Hello', 'world', 'Goodbye', 'moon']

flat() flattens nested arrays. flatMap() = map() + flat(1).

join - Array to String

const words = ['Hello', 'world', 'from', 'JS'];

// join(separator)
console.log(words.join());       // "Hello,world,from,JS" (default comma)
console.log(words.join(' '));    // "Hello world from JS"
console.log(words.join('-'));    // "Hello-world-from-JS"
console.log(words.join(''));     // "HelloworldfromJS"

// CSV format
const rows = [
  ['Name', 'Age'],
  ['Alice', '25'],
  ['Bob', '30']
];
const csv = rows.map(row => row.join(',')).join('\n');
console.log(csv);
// Name,Age
// Alice,25
// Bob,30

join() creates a string from array elements with specified separator.

Common Mistakes

  • Confusing slice (non-mutating) with splice (mutating)
  • Thinking slice makes deep copies (it is shallow)
  • Not understanding flat default depth is 1
  • Using join without specifying separator

Interview Tips

  • Know slice vs splice difference
  • Understand shallow vs deep copy
  • Know when to use flatMap
  • Prefer spread over concat for simple cases