함수의 파라미터 부분에서도 비구조화 할당을 사용할 수 있습니다.
이러한 문법은 특히 API 응답 값을 처리하는데에 유용하게 사용됩니다.
spread_ex10.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
43
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전개 연산자 함수에서 사용</title>
<script>
function showUser({name, age, gender}){
return name + "(" + age +"세, " + (gender ? "남":"여") + ")";
}
let users = [
{name:"김종서", age:33, gender:true},
{name:"이순신", age:25, gender:true},
{name:"강감찬", age:31, gender:true},
{name:"지문덕", age:42, gender:false},
{name:"개소문", age:22, gender:false}
];
document.write("1번 : " + showUser(users[0]) + "<br>");
document.write("2번 : " + showUser(users[1]) + "<br>");
document.write("<hr>");
users.map((user,index) => {
document.write(index+1 + "번 : " + showUser(user) + "<br>");
});
document.write("<hr>");
// map함수의 파라미터에도 바로 사용할 수 있습니다.
users.map((user,index) => {
document.write(index+1 + "번 : " + JSON.stringify(user) + "<br>");
});
document.write("<hr>");
// 배열 내 객체들은 for of 문을 사용하여 비구조화 할 수 있습니다.
for({name : n, age : a, gender : g} of users){
document.write(n + "(" + a +"세, " + (g ? "남":"여") + ")<br>");
}
document.write("<hr>");
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
중첩된 객체 및 배열 역시 비구조화 할 수 있습니다.
spread_ex11.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!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 boxOffice = {
"boxofficeType": "일별 박스오피스",
"date": "20231010",
"dailyBoxOfficeList": [
{
"rank": "1",
"movieNm": "30일",
"openDt": "2023-10-03",
},
{
"rank": "2",
"movieNm": "천박사 퇴마 연구소: 설경의 비밀",
"openDt": "2023-09-27",
},
{
"rank": "3",
"movieNm": "1947 보스톤",
"openDt": "2023-09-27",
},
{
"rank": "4",
"movieNm": "크리에이터",
"openDt": "2023-10-03",
},
{
"rank": "5",
"movieNm": "더 넌 2",
"openDt": "2023-09-27",
},
{
"rank": "6",
"movieNm": "거미집",
"openDt": "2023-09-27",
},
{
"rank": "7",
"movieNm": "사나: 저주의 아이",
"openDt": "2023-10-04",
},
{
"rank": "8",
"movieNm": "화란",
"openDt": "2023-10-11",
},
{
"rank": "9",
"movieNm": "퍼피 구조대: 더 마이티 무비",
"openDt": "2023-10-06",
},
{
"rank": "10",
"movieNm": "잠",
"openDt": "2023-09-06"
}
]
}
document.write(boxOffice.boxofficeType + "(" + boxOffice.date+ ")<br>");
document.write("<hr/>");
var {boxofficeType:type, date:today, dailyBoxOfficeList: dailyList } = boxOffice;
document.write(type + "(" + today + ")<br>");
document.write("<hr/>");
dailyList.map((movie)=>{
document.write(movie.rank + ". " + movie.movieNm + "(" + movie.openDt + ")<br>");
});
document.write("<hr/>");
dailyList.map(({rank, movieNm: movie_name,openDt: open_date})=>{
document.write(rank + ". " + movie_name + "(" + open_date + ")<br>");
});
document.write("<hr/>");
for({rank, movieNm: movie_name,openDt: open_date} of dailyList){
document.write(rank + ". " + movie_name + "(" + open_date + ")<br>");
}
document.write("<hr>");
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 화살표 함수(Arrow Function) (2) | 2024.10.17 |
|---|---|
| [JavaScript] 템플릿 리터럴(Template literals) (0) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 객체의 결합/복사 (1) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 배열의 결합/복사 (0) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 기본 사용법 (0) | 2024.10.17 |
