Mastering JavaScript slice(): Complete Guide with Examples and Best Practices

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

Why is the slice method important?

• Extracts partial values without modifying the original data.
• Works not only on arrays but also on strings.

Article Goals and Structure

1. Basic usage of the slice method
2. Practical examples for arrays and strings
3. Comparison with other methods (splice and split)
4. Real-world use cases
5. Common errors and troubleshooting
6. Best practices for cleaner coding

2. What Is the slice Method? 【Basic Syntax and Usage】

Basic Syntax of slice

array.slice(start, end)

• start (required): The index where extraction begins (0-based).
• end (optional): The index where extraction ends (this element is not included).

3. Comparison with Other Methods｜slice vs splice vs split

Difference Between slice and splice

Example: Using slice

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(1, 4);

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

4. Practical Use Cases｜Useful Applications of slice

Copying an Array

const original = [1, 2, 3, 4, 5];
const copy = original.slice();

console.log(copy);       // [1, 2, 3, 4, 5]
console.log(original);   // [1, 2, 3, 4, 5]
console.log(copy === original); // false (different objects)

Pagination Processing

const items = ["商品1", "商品2", "商品3", "商品4", "商品5", "商品6"];
const itemsPerPage = 2;

function getPage(pageNumber) {
  const start = (pageNumber - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return items.slice(start, end);
}

console.log(getPage(1)); // ["商品1", "商品2"]
console.log(getPage(2)); // ["商品3", "商品4"]

5. Common Errors and How to Fix Them 【Troubleshooting】

Error 1: Specifying an Out-of-Range Index

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(10, 15);
console.log(result); // []

const arr = [1, 2, 3, 4, 5];
const start = 10;
const end = 15;

if (start < arr.length) {
  const result = arr.slice(start, end);
  console.log(result);
} else {
  console.log([]);
}

Error 2: Confusion with Negative Indexes

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(-1, -3)); // []

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(-3, -1);
console.log(result); // [3, 4]

6. Performance and Best Practices

Processing Load with Large Data Sets

const largeArray = Array(1000000).fill(0);
const result = largeArray.slice(0, 500000);

• Copying large datasets may consume significant time and memory.
• Limit the data range to the minimum necessary and reduce operation frequency.

Copying Nested Data Structures

const nestedArray = [[1, 2], [3, 4]];
const shallowCopy = nestedArray.slice();
shallowCopy[0][0] = 99;

console.log(nestedArray); // [[99, 2], [3, 4]]

const deepCopy = JSON.parse(JSON.stringify(nestedArray));
deepCopy[0][0] = 99;

console.log(nestedArray); // [[1, 2], [3, 4]]

Best Practices

Write Readable Code

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

const result = arr.slice(startIndex, endIndex);
console.log(result); // [2, 3, 4]

Make Reusable Functions

function paginate(array, pageSize, pageNumber) {
  const start = (pageNumber - 1) * pageSize;
  const end = start + pageSize;
  return array.slice(start, end);
}

const items = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(paginate(items, 3, 2)); // [4, 5, 6]

7. Summary｜Master the slice Method

Key Points of the slice Method

1. Basic Syntax and Features

• Syntax: array.slice(start, end)
• A non-destructive method that does not modify the original array or string.

1. Use Cases and Practical Examples

• Useful for copying arrays, pagination, and extracting the latest data.
• Understanding the differences from other methods helps you choose the right tool.

1. Important Notes and Best Practices

• Optimize operations when handling large datasets.
• Understand the difference between shallow and deep copies, and choose accordingly.
• Improve code readability and reusability by creating functions.

Next Steps

• Learn other array manipulation methods (map, filter, reduce).
• Try using slice within frameworks like React or Vue.js.
• Explore performance optimization for large datasets.