<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//shallow copy
const a_200301 = ['milk','bread']
const a_200302 = a_200301
a_200302.push('sweet potato')
a_200302.push('tomato')
console.log(a_200301)
console.log(a_200302)
//Spread Operator
const a_200303 = [...a_200301]
a_200303.push('sweet potato')
a_200303.push('tomato')
console.log(a_200301)
console.log(a_200303)
//Spreading an array and adding data using the spread operator
const a_200304 = ['sweet potato', ...a_200301, 'tomato']
console.log(a_200301)
console.log(a_200304)
//Copying Objects with Shallow Copy
const cloud ={
name : 'cloud',
age : 6,
species : 'dog',
}
const star = cloud
star.name = 'star'
star.age = 1
console.log(JSON.stringify(cloud))
console.log(JSON.stringify(star))
//Deep copy using spread operator
const star1 = {...cloud}
star1.name = 'star'
star1.age = 1
console.log(JSON.stringify(cloud))
console.log(JSON.stringify(star))
//Add only the properties you want to change
const star2 = {
...cloud,
name : 'star',
age : 1,
Vaccination : true
}
console.log(JSON.stringify(cloud))
console.log(JSON.stringify(star2))
// Go back to the unfolding part
const star3 = {
name : 'star',
age : 1,
Vaccination : true,
...cloud
}
console.log(JSON.stringify(cloud))
console.log(JSON.stringify(star3))
</script>
</head>
<body>
</body>
</html>### Shallow Copy of Arrays
- **Direct Assignment (`a_200301` and `a_200302`)**: The array `a_200302` is assigned the same reference as `a_200301`, meaning any changes made to `a_200302` reflect in `a_200301` because they refer to the same array in memory.
- After pushing "sweet potato" and "tomato" to `a_200302`, both `a_200301` and `a_200302` show these additions, demonstrating that they are indeed the same array.
### Spread Operator for Arrays
- **Creating a New Array (`a_200303`)**: Using the spread operator, a new array `a_200303` is created as a shallow copy of `a_200301`. Modifications to `a_200303` do not affect `a_200301`, showcasing the spread operator's ability to create actual copies of arrays.
- **Combining Arrays (`a_200304`)**: Demonstrates adding elements to the beginning and end of a new array while copying elements from `a_200301` in between. This method effectively combines multiple elements and copies of arrays into a new array.
### Shallow Copy of Objects
- **Direct Assignment (`cloud` and `star`)**: Similar to arrays, direct assignment for objects results in a reference to the same object. Modifying `star` also changes `cloud` since both variables point to the same object.
- **Spread Operator for Objects (`star1`)**: Attempts to create a deep copy of `cloud` into `star1` using the spread operator. However, this is still a shallow copy; nested objects or arrays would still be shared between `cloud` and `star1`. Since `cloud` doesn't contain nested objects or arrays in this example, changing `star1` doesn't affect `cloud`.
- **Selective Overwriting (`star2` and `star3`)**: Demonstrates how to create a new object from an existing one, selectively overwriting properties or adding new ones using the spread operator. The order matters:
- In `star2`, properties from `cloud` are spread first, and then specific properties are overwritten or added. This correctly reflects the intended changes without affecting `cloud`.
- In `star3`, the `cloud` properties are spread after specifying some properties explicitly. This results in `cloud`'s properties overwriting those specified before the spread, effectively negating the manual property assignments before the spread.
### Output
The console logs show the effects of each operation:
- Direct assignment links `a_200301` and `a_200302`, as well as `cloud` and `star`, making them mirror each other.
- The spread operator allows for creating actual copies of arrays (`a_200303`, `a_200304`) and objects (`star1`, `star2`, `star3`), which can be modified independently of the original.
- The nuances of object copying with the spread operator, including how the order of property spreading and assignment affects the outcome (`star2` vs. `star3`).
This example clearly demonstrates the utility and behavior of the spread operator for creating copies and the importance of understanding reference vs. actual copies (deep vs. shallow copying) in JavaScript.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 7) select tag (0) | 2024.12.16 |
|---|---|
| chapter 6) Add object properties dynamically (1) | 2024.12.15 |
| chapter 6) check undefined type (1) | 2024.12.13 |
| chapter 6) href of output script (0) | 2024.12.12 |
| chapter 6) method inside of this keyword (0) | 2024.12.11 |