객체에 대해서도 같이 적용이 됩니다. 다음의 예제를 참조해 보세요
객체의 복사
spread_ex08.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체의 복사</title>
<script>
let kimc = {
name:"김종서", age:33, gender:true,
toString : function(){
return this.name + "(" + this.age +"세, " + (this.gender ? "남":"여") + ")";
}
}
let kimc2 = kimc;
document.write("kimc : " + kimc + "<br>");
document.write("kimc2 : " + kimc2 + "<br><br>");
kimc2.name = "김선달"
// 두개 모두 변경되었다. 주소가 복사되었다. 얕은 복사이다.
document.write("kimc : " + kimc + "<br>");
document.write("kimc2 : " + kimc2 + "<br>");
document.write("<hr>");
// 객체 역시 전개 연산자로 깊은 복사를 사용할 수 있습니다.
let kimc3 = {...kimc};
document.write("kimc : " + kimc + "<br>");
document.write("kimc3 : " + kimc3 + "<br><br>");
kimc3.name = "김삿갓"
// 1개만 변경되었다. 새로운 객체가 만들어졌다. 깊은 복사이다.
document.write("kimc : " + kimc + "<br>");
document.write("kimc3 : " + kimc3 + "<br>");
document.write("<hr>");
// 무엇보다도 강력한 점은 복사와 함께 새로운 값을 할당할 수 있다는 점 입니다.
let shinc = {...kimc, name:"신사임당", gender:false};
document.write("kimc : " + kimc + "<br>");
document.write("shinc : " + shinc + "<br>");
document.write("<hr>");
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
객체의 결합
spread_ex09.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체의 결합</title>
<script>
let person = {
"name": "한사람",
"age": 34,
"gender": true,
"email": "hansaram@example.com",
}
let picture = {
"large": "https://randomuser.me/api/portraits/men/33.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/33.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/33.jpg"
}
document.write(`${JSON.stringify(person)}<br>`);
document.write(`${JSON.stringify(picture)}<br>`);
let new_obj1 = { ...person };
let new_obj2 = { ...person, ...picture };
let new_obj3 = { ...person, "hobby":"낚시" };
document.write(`${JSON.stringify(new_obj1)}<br>`);
document.write(`${JSON.stringify(new_obj2)}<br>`);
document.write(`${JSON.stringify(new_obj3)}<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 템플릿 리터럴(Template literals) (0) | 2024.10.17 |
|---|---|
| [JavaScript] Spread Operator(전개 연산자) 함수에서 사용 (2) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 배열의 결합/복사 (0) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 기본 사용법 (0) | 2024.10.17 |
| [JavaScript] json-server 사용해보기 (6) | 2024.10.17 |
