fix(curriculum): clarify shallow copy explanation and add nested array examples (#61756)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Ilenia M <nethleen@gmail.com>
This commit is contained in:
ran-cho
2025-09-26 04:26:00 -07:00
committed by GitHub
parent acf368d2d8
commit 71adf50f6a
3 changed files with 19 additions and 17 deletions
@@ -7,15 +7,17 @@ dashedName: what-is-a-shallow-copy-of-an-array-and-what-are-some-ways-to-create-
# --description--
A shallow copy of an array is a new array that contains references to the same elements as the original array. Creating shallow copies of arrays is a common operation, especially when you want to manipulate an array without modifying the original.
A shallow copy of an array is a new array that has the same items as the original. If the array only contains primitive values like numbers or strings, the new array is completely separate. But if the array contains other arrays inside it, both the original and the copy have references to the same inner arrays. This means that if you change something inside a shared inner array, you will see that change in both arrays.
Shallow copies are helpful when you need to modify the top-level structure, such as adding, removing, or reordering elements, without modifying the original array or the inner array.
There are several methods for creating shallow copies of arrays, and we'll explore some of the most common ones: `concat()`, `slice()`, and the spread operator.
Let's start with the `concat()` method. This method creates a new array by merging two or more arrays. When used with a single array, it effectively creates a shallow copy. Here's an example:
```js
let originalArray = [1, 2, 3];
let copyArray = [].concat(originalArray);
const originalArray = [1, 2, 3];
const copyArray = [].concat(originalArray);
console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false
@@ -28,8 +30,8 @@ The `copyArray` contains the same elements as `originalArray`, but it is a diffe
Another method to create a shallow copy is the `slice()` method. When called without arguments, `slice()` returns a shallow copy of the entire array. Here's how it works:
```js
let originalArray = [1, 2, 3];
let copyArray = originalArray.slice();
const originalArray = [1, 2, 3];
const copyArray = originalArray.slice();
console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false
@@ -40,8 +42,8 @@ In this case, `originalArray.slice()` creates a new array that is a shallow copy
The spread operator (`...`), introduced in ES6, provides another concise way to create shallow copies of arrays. Here's an example:
```js
let originalArray = [1, 2, 3];
let copyArray = [...originalArray];
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
console.log(copyArray); // [1, 2, 3]
console.log(copyArray === originalArray); // false
@@ -50,8 +52,8 @@ console.log(copyArray === originalArray); // false
The spread operator (`...`) spreads the elements of `originalArray` into a new array, effectively creating a shallow copy. It's important to note that all these methods create new array objects, which means you can modify the copy without affecting the original array. For example:
```js
let originalArray = [1, 2, 3];
let copyArray = [...originalArray];
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
copyArray.push(4);
console.log(originalArray); // [1, 2, 3]
@@ -69,8 +71,8 @@ In summary, shallow copies of arrays can be easily created using methods like `c
What will be the output of the following code?
```js
let arr1 = [1, 2, 3];
let arr2 = arr1.slice();
const arr1 = [1, 2, 3];
const arr2 = arr1.slice();
arr2.push(4);
console.log(arr1, arr2);
```
@@ -112,8 +114,8 @@ The `slice()` method creates a shallow copy of the array.
What will be the output of the following code?
```js
let fruits = ["apple", "banana", "orange"];
let fruitsCopy = [...fruits];
const fruits = ["apple", "banana", "orange"];
const fruitsCopy = [...fruits];
console.log(fruitsCopy.length);
```
@@ -154,8 +156,8 @@ The spread operator (`...`) creates a shallow copy of the entire array.
What will be the output of the following code?
```js
let arr1 = [1, 2, 3];
let arr2 = [].concat(arr1);
const arr1 = [1, 2, 3];
const arr2 = [].concat(arr1);
console.log(arr1 === arr2);
```
@@ -160,7 +160,7 @@ const newList = programmingLanguages.concat("Perl");
console.log(newList); // ["JavaScript", "Python", "C++", "Perl"]
```
- **`slice()` Method**: This method returns a shallow copy of a portion of the array, starting from a specified index or the entire array. A shallow copy will copy the reference to the array instead of duplicating it.
- **`slice()` Method**: This method returns a new array containing a shallow copy of a portion of the original array, specified by start and end indices. The new array contains references to the same elements as the original array (not duplicates). This means that if the elements are primitives (like numbers or strings), the values are copied; but if the elements are objects or arrays, the references are copied, not the objects themselves.
```js
const programmingLanguages = ["JavaScript", "Python", "C++"];
@@ -277,7 +277,7 @@ console.log(text.includes("fox")); // true
console.log(text.includes("cat")); // false
```
- **The `slice()` Method**: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
- The **`slice()` Method**: This method returns a new array containing a shallow copy of a portion of the original array, specified by start and end indices. The new array contains references to the same elements as the original array (not duplicates). This means that if the elements are primitives (like numbers or strings), the values are copied; but if the elements are objects or arrays, the references are copied, not the objects themselves.
```js
const text = "freeCodeCamp";