⬅ Back

ARRAY METHODS IN JAVASCRIPT

This note explains the most important beginner array methods in simple language.

You already know what arrays are. Now you will learn how to work with arrays more easily using built-in methods.

These methods are very useful in real projects for combining values, splitting text into parts, copying parts of arrays, joining arrays together, finding elements, and adding new elements.

1. What are array methods?

Array methods are built-in actions that help you work with arrays.

They let you do things like:

Diagram 1. What array methods help with

Array methods
│
├─ join elements into a string
├─ split text into an array
├─ copy part of an array
├─ combine arrays
├─ search in arrays
└─ add elements

Explanation

Instead of writing complex code from zero, JavaScript already gives you methods for common array tasks.

2. The join() method

The join() method combines array elements into one string.

Syntax

array.join(delimiter)

Diagram 2. How join() works

["JavaScript", "is", "amazing"]
   ↓ join(" ")
"JavaScript is amazing"

Explanation

join() takes all elements from the array and connects them into one string.

The separator you give becomes the text between the elements.

3. join() examples

const words = ["JavaScript", "is", "amazing"];

console.log(words.join(""));  // "JavaScriptisamazing"
console.log(words.join(" ")); // "JavaScript is amazing"
console.log(words.join("-")); // "JavaScript-is-amazing"

Diagram 3. Different separators in join()

join("")  → "JavaScriptisamazing"
join(" ") → "JavaScript is amazing"
join("-") → "JavaScript-is-amazing"

Explanation

The delimiter changes how the final string looks. This is why join() is very flexible.

4. Saving the result of join()

You can store the result in a variable.

const words = ["JavaScript", "is", "amazing"];
const sentence = words.join(" ");

console.log(sentence); // "JavaScript is amazing"

Diagram 4. join() result in a variable

words
 ↓
join(" ")
 ↓
sentence = "JavaScript is amazing"

Explanation

This is useful when you want to use the new string later in your code.

5. Real example: snake_case to kebab-case

function transformString(string) {
  const words = string.split("_");
  return words.join("-");
}

console.log(transformString("user_age"));         // "user-age"
console.log(transformString("price_per_droid"));  // "price-per-droid"

Diagram 5. snake_case → kebab-case

"user_age"
   ↓ split("_")
["user", "age"]
   ↓ join("-")
"user-age"

Explanation

This example shows how split() and join() often work together.

6. The split() method

split() is a string method, but it is very important in array work.

It does the opposite of join(). It turns a string into an array.

Syntax

string.split(delimiter)

Diagram 6. How split() works

"JavaScript essentials"
   ↓ split(" ")
["JavaScript", "essentials"]

Explanation

split() cuts a string into parts and puts those parts into an array.

7. split() examples

const name = "Aaron";
const letters = name.split("");
console.log(letters); // ["M", "a", "n", "g", "o"]

const message = "JavaScript essentials";
const words = message.split(" ");
console.log(words); // ["JavaScript", "essentials"]

const slug = "amazing-french-recipes";
const slugParts = slug.split("-");
console.log(slugParts); // ["amazing", "french", "recipes"]

Diagram 7. Different ways to use split()

"Aaron".split("")
→ ["M", "a", "n", "g", "o"]

"JavaScript essentials".split(" ")
→ ["JavaScript", "essentials"]

"amazing-french-recipes".split("-")
→ ["amazing", "french", "recipes"]

Explanation

The delimiter decides how the string is cut into pieces.

8. join() and split() are opposites

These two methods are often used together.

Diagram 8. split() and join() together

String
 ↓ split(delimiter)
Array
 ↓ join(delimiter)
String

Explanation

This pair is very important in practical JavaScript.

9. The array slice() method

The array method slice() returns a new array containing part of the original array.

It does not change the original array.

Syntax

array.slice(begin, end)

Diagram 9. How array slice() works

slice(begin, end)

begin → included
end   → not included

Explanation

This rule is exactly like string slice(): start is included, end is excluded.

10. slice() examples

const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];

console.log(planets.slice(0, 2)); // ["Earth", "Mars"]
console.log(planets.slice(0, 4)); // ["Earth", "Mars", "Venus", "Jupiter"]
console.log(planets.slice(1, 3)); // ["Mars", "Venus"]

Diagram 10. slice(1, 3) on planets

["Earth", "Mars", "Venus", "Jupiter", "Saturn"]

Index:    0         1       2        3          4

slice(1, 3)
Take indexes: 1 and 2
Result: ["Mars", "Venus"]

Explanation

Index 3 is not included.

11. Saving slice() result

const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
const result = planets.slice(1, 3);

console.log(result); // ["Mars", "Venus"]

Diagram 11. slice() result in a variable

planets
 ↓
slice(1, 3)
 ↓
result = ["Mars", "Venus"]

Explanation

This is useful when you need to keep only a part of the original array.

12. slice() with no arguments

If you call slice() without arguments, it creates a full copy of the array.

const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
console.log(planets.slice()); // ["Earth", "Mars", "Venus", "Jupiter", "Saturn"]

Diagram 12. slice() with no arguments

slice()
 ↓
copy the whole array

Explanation

This is a simple way to create a shallow copy of an array.

13. slice() with only begin

If you provide only the start index, copying continues to the end.

const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];

console.log(planets.slice(1)); // ["Mars", "Venus", "Jupiter", "Saturn"]
console.log(planets.slice(2)); // ["Venus", "Jupiter", "Saturn"]

Diagram 13. slice(begin) to the end

slice(2)

Start at index 2
Copy everything to the end

Explanation

This is very useful when you want “everything from this position onward”.

14. Negative begin in slice()

If begin is negative and end is missing, JavaScript counts from the end.

const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
console.log(planets.slice(-2)); // ["Jupiter", "Saturn"]

Diagram 14. Negative start index

["Earth", "Mars", "Venus", "Jupiter", "Saturn"]

slice(-2)
 ↓
take last 2 elements
 ↓
["Jupiter", "Saturn"]

Explanation

Negative indexes in slice() are very useful for getting elements from the end.

15. Important idea about slice()

slice():

Diagram 15. Original array stays unchanged

Original array
   ↓
slice()
   ↓
new copied array

Original stays the same

Explanation

This is a very important method behavior to remember.

16. The concat() method

concat() combines two or more arrays into a new array.

Syntax

array1.concat(array2, array3, ...)

Diagram 16. How concat() works

Array 1 + Array 2 + Array 3
          ↓
     one new array

Explanation

concat() joins arrays together in the order you provide them.

17. concat() example

const firstArray = ["Mercury", "Venus"];
const secondArray = ["Mars", "Jupiter"];
const result = firstArray.concat(secondArray);

console.log(result); // ["Mercury", "Venus", "Mars", "Jupiter"]

Diagram 17. Joining two arrays

["Mercury", "Venus"]
+
["Mars", "Jupiter"]
=
["Mercury", "Venus", "Mars", "Jupiter"]

Explanation

All elements are placed into one new array.

18. concat() does not change original arrays

const firstArray = ["Mercury", "Venus"];
const secondArray = ["Mars", "Jupiter"];
const result = firstArray.concat(secondArray);

console.log(firstArray);  // ["Mercury", "Venus"]
console.log(secondArray); // ["Mars", "Jupiter"]
console.log(result);      // ["Mercury", "Venus", "Mars", "Jupiter"]

Diagram 18. concat() keeps originals unchanged

firstArray   → stays the same
secondArray  → stays the same
result       → new combined array

Explanation

Like slice(), concat() creates a new array instead of changing the originals.

19. Order matters in concat()

const firstArray = ["Mercury", "Venus"];
const secondArray = ["Mars", "Jupiter"];
const thirdArray = ["Saturn", "Neptune"];

console.log(firstArray.concat(secondArray, thirdArray));
// ["Mercury", "Venus", "Mars", "Jupiter", "Saturn", "Neptune"]

console.log(firstArray.concat(thirdArray, secondArray));
// ["Mercury", "Venus", "Saturn", "Neptune", "Mars", "Jupiter"]

Diagram 19. Order of arguments = order of result

first.concat(second, third)
→ first, then second, then third

first.concat(third, second)
→ first, then third, then second

Explanation

The order of the method arguments controls the order of the elements in the new array.

20. The indexOf() method for arrays

The array method indexOf() finds the first index of an element.

It returns:

Syntax

array.indexOf(element)

Diagram 20. What indexOf() returns

If found     → return index
If not found → return -1

Explanation

This is similar to string indexOf(), but now it works on arrays.

21. indexOf() example

const clients = ["Aaron", "Samuel", "Benjamin", "David", "Benjamin"];

console.log(clients.indexOf("Benjamin"));    // 2
console.log(clients.indexOf("Monkong")); // -1

Diagram 21. First match only

["Aaron", "Samuel", "Benjamin", "David", "Benjamin"]

indexOf("Benjamin")
 ↓
first "Benjamin" is at index 2
 ↓
result = 2

Explanation

Even though "Benjamin" appears again later, indexOf() returns only the first match.

22. indexOf() uses strict equality

indexOf() compares using ===.

That means values must match exactly.

Diagram 22. Strict equality in indexOf()

indexOf() uses ===

"5" is not equal to 5
true is not equal to "true"

Explanation

This is important when searching in arrays with mixed data types.

23. The push() method

push() adds one or more elements to the end of an array.

Syntax

array.push(element1, element2, ..., elementN)

Diagram 23. How push() works

Original array
   ↓
push(new elements)
   ↓
same array becomes longer

Explanation

Unlike slice() and concat(), push() changes the original array.

24. push() examples

const planets = ["Earth", "Mars", "Venus"];

planets.push("Jupiter");
console.log(planets); // ["Earth", "Mars", "Venus", "Jupiter"]

planets.push("Saturn", "Neptune");
console.log(planets); // ["Earth", "Mars", "Venus", "Jupiter", "Saturn", "Neptune"]

Diagram 24. Adding to the end with push()

Before:
["Earth", "Mars", "Venus"]

push("Jupiter")
 ↓
["Earth", "Mars", "Venus", "Jupiter"]

push("Saturn", "Neptune")
 ↓
["Earth", "Mars", "Venus", "Jupiter", "Saturn", "Neptune"]

Explanation

push() always adds new elements at the end.

25. push() changes the original array

This is very important.

push() does not create a new array. It modifies the original one.

Diagram 25. push() is a changing method

push()
 ↓
changes the same array

Explanation

This is different from methods like:

Those return new results without changing the original array.

26. Using push() inside a loop

const tags = [];

for (let i = 0; i < 3; i += 1) {
  tags.push(`tag-${i}`);
}

console.log(tags); // ["tag-0", "tag-1", "tag-2"]

Diagram 26. Building an array with a loop

Start:
[]

i = 0 → push("tag-0") → ["tag-0"]
i = 1 → push("tag-1") → ["tag-0", "tag-1"]
i = 2 → push("tag-2") → ["tag-0", "tag-1", "tag-2"]

Explanation

This is a very common way to build arrays dynamically.

27. Which methods change the array, and which do not?

This is one of the most important practical ideas.

Do not change the original array

Changes the original array

Diagram 27. Changing vs non-changing methods

Do not change original:
join()
slice()
concat()
indexOf()

Change original:
push()

Explanation

This distinction is very important when you write real code.

28. Practical examples

Example 1. Turn array into sentence

const words = ["I", "love", "JavaScript"];
const sentence = words.join(" ");

console.log(sentence); // "I love JavaScript"

Example 2. Split sentence into words

const sentence = "I love JavaScript";
const words = sentence.split(" ");

console.log(words); // ["I", "love", "JavaScript"]

Example 3. Copy part of an array

const colors = ["red", "green", "blue", "yellow"];
const shortColors = colors.slice(0, 2);

console.log(shortColors); // ["red", "green"]

Example 4. Combine two lists

const frontend = ["HTML", "CSS"];
const backend = ["Node.js", "MongoDB"];
const stack = frontend.concat(backend);

console.log(stack); // ["HTML", "CSS", "Node.js", "MongoDB"]

Example 5. Search for an item

const users = ["Sarah", "Nikita", "Isaac"];
console.log(users.indexOf("Nikita")); // 1
console.log(users.indexOf("John"));   // -1

Example 6. Add new items

const cart = ["apple", "banana"];
cart.push("orange", "grape");

console.log(cart); // ["apple", "banana", "orange", "grape"]

Diagram 28. Common real uses

Need one string from array?     → join()
Need array from string?         → split()
Need part of an array?          → slice()
Need combine arrays?            → concat()
Need find position?             → indexOf()
Need add at the end?            → push()

Explanation

This is a useful practical guide for choosing the right method.

29. Common beginner mistakes

Mistake 1. Forgetting that split() is a string method

Wrong idea:

array.split(",")

Correct:

string.split(",")

Mistake 2. Thinking join() returns an array

Wrong idea:

const result = ["a", "b"].join("-");

result is:

"a-b"

It is a string, not an array.

Mistake 3. Forgetting that slice() does not change the original

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

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

Mistake 4. Forgetting that push() does change the original

const arr = [1, 2];
arr.push(3);

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

Mistake 5. Thinking indexOf() finds all matches

Wrong idea:

["a", "b", "a"].indexOf("a")

Result:

0

Only the first match is returned.

Diagram 29. Common mistakes

1. split() belongs to strings
2. join() returns a string
3. slice() returns a new array
4. push() changes the original array
5. indexOf() returns only the first match

Explanation

These are very common beginner misunderstandings.

30. Quick summary of all methods

join(delimiter)

Turns an array into a string.

split(delimiter)

Turns a string into an array.

slice(begin, end)

Returns part of an array as a new array.

concat(...)

Combines arrays into a new array.

indexOf(elem)

Returns the first index of an element, or -1.

push(...)

Adds elements to the end of the original array.

Diagram 30. Final map of array methods

Array methods
│
├─ join()
├─ slice()
├─ concat()
├─ indexOf()
└─ push()

Related string method:
split()

Explanation

These are some of the most important beginner tools for array work.

31. Revision block

1. join() converts an array to a string
2. split() converts a string to an array
3. slice() copies part of an array
4. slice() does not change the original array
5. concat() combines arrays into a new array
6. concat() does not change original arrays
7. indexOf() returns the first matching index or -1
8. indexOf() uses strict equality
9. push() adds elements to the end
10. push() changes the original array

32. Final conclusion

Array methods make JavaScript much more powerful and convenient.

If you understand how join(), split(), slice(), concat(), indexOf(), and push() work, then you already have a strong base for working with collections of data.

These methods are used everywhere in full stack development: processing text, building slugs, splitting input, copying data, combining results, searching in lists, and dynamically building arrays.

⬅ Back