Understanding const in JavaScript: Why Your Array Keeps Modifying

Explore the behavior of `const` in JavaScript and learn why modifying an array declared with `const` affects the original array.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Javascript beginner - function modifiing global const

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding const in JavaScript: Why Your Array Keeps Modifying

As a beginner in JavaScript, you might encounter some unexpected behavior while working with variables, particularly when it comes to constant declarations. One common confusion arises when modifying arrays that are declared with the const keyword. In this post, we'll break down this phenomenon and clarify why your original array changes, even though it is declared as a constant.

The Issue at Hand

Consider the following situation where you have a function that modifies an array and returns it. You might expect that the original array would remain unchanged, but upon running your code, you find that the original array keeps growing in size with each function call. Here’s a code snippet to illustrate the problem:

[[See Video to Reveal this Text or Code Snippet]]

The Confusion Explained

The core of the confusion lies in how JavaScript handles const and mutable objects like arrays. Let’s clarify a few points:

What const Means:

When you declare a variable with const, you're telling JavaScript that you cannot reassign it to a different value or object. This means you cannot do the following:

[[See Video to Reveal this Text or Code Snippet]]

Mutable Structures:

However, const does not make the object itself immutable. For instance, if you declare an array with const, you can modify the contents of that array. This is why your original array keeps changing when you use methods like splice, push, or similar array methods.

Why is the Original Array Modifying?

In the test function, the splice method is being used to add elements to the array:

[[See Video to Reveal this Text or Code Snippet]]

This call inserts the elements of strings into the original array at index 1. Since arr is the same reference to the original array, modifications done in the test function reflect in the original arr.

Conclusion: What You Should Remember

Declaring an array with const prevents you from reassigning the variable itself.

You can still modify the contents of that array if it is an object or a mutable data structure.

To maintain the integrity of the original array, consider copying the array before making modifications within functions. You can do this using methods like slice() or the spread operator.

By understanding these fundamentals, you can avoid unexpected behavior and have a better grasp of working with const and mutable types in JavaScript. Happy coding!