객체와 반복문
생성된 객체에 어떤 데이터가 있는지를 모두 다 가져와야 하는 경우가 있다.
이런 경우 반복문을 사용하여 배열에서 반복문으로 데이터를 다 가져와야 하는데
그렇다면 객체에서는 그런 것을 어떻게 하느냐
추천 검색어 javascript object iterate
추천 검색어 How to iterate over a JavaScript object?
<script>
for(var key in coworkers){
}
</script>
for 를 쓰면 coworkers 라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문이다.
ex10.html 에서 가져올 key 값들은 beginner, programmer, bookkeeper, data scientist 이다.
즉 key 라는 것은 우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠
(반면, 배열에서는 순서대로 배열이 되어있기 때문에 key 라고 사용하지 않고 index 라고 사용한다.)
for 는 coworkers 라고 하는 객체에 데이터들이 있는데 그 데이터의 수만큼 중괄호의 코드들이 실행되는데 실행될 때마다 key 값들 하나하나를 변수값으로 세팅해 준다는 뜻이다.
for(var key in coworkers){
document.write(key+'<br>');
}
이 코드를 추가해주면 coworkers 에 있는 key 값들을 모조리 출력해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"beginner":"livebyfaith117",
"programmer":"egoing"
};
document.write("beginner:"+coworkers.beginner+"<br>");
document.write("programmer:"+coworkers.programmer+"<br>");
coworkers.bookkeeper="duru";
document.write("bookkeeper:"+coworkers.bookkeeper+"<br>");
coworkers["data scientist"]="taeho";
document.write("data scientist:"+coworkers["data scientist"]);
</script>
<h2>Iterate</h2>
<script>
for(var key in coworkers){
document.write(key+'<br>');
}
</script>
</body>
</html>
coworkers 에 있는 어떠한 특정한 데이터를 가져올 때 배열의 형식을 사용해서 index 가 들어가는 곳에 key 값을 넣었더니 데이터를 가져올 수 있었다.
coworkers["data scientist"]="taeho";
document.write("data scientist:"+coworkers["data scientist"]);
이 점을 착안하여
for(var key in coworkers){
document.write(coworkers[key]+'<br>');
}
이렇게 바꾸면
이 점을 착안하여
for(var key in coworkers){
document.write(key+':'+coworkers[key]+'<br>');
}
이렇게 바꾸면
위에 직접 작성한 것과 똑같은 결과를 얻을 수 있으면서, 모든 데이터를 순회하면서 필요한 데이터가 있는지 없는지 확인할 수 있는 그런 기능이라고 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"beginner":"livebyfaith117",
"programmer":"egoing"
};
document.write("beginner:"+coworkers.beginner+"<br>");
document.write("programmer:"+coworkers.programmer+"<br>");
coworkers.bookkeeper="duru";
document.write("bookkeeper:"+coworkers.bookkeeper+"<br>");
coworkers["data scientist"]="taeho";
document.write("data scientist:"+coworkers["data scientist"]);
</script>
<h2>Iterate</h2>
<script>
for(var key in coworkers){
document.write(key+':'+coworkers[key]+'<br>');
}
</script>
</body>
</html>
객체의 데이터를 순회하는 방법을 살펴봤다.
'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글
| WEB2 - JavaScript 33 (객체의 활용) (0) | 2021.09.30 |
|---|---|
| WEB2 - JavaScript 32 (객체프로퍼티와 메소드) (0) | 2021.09.29 |
| WEB2 - JavaScript 30 (객체, object) (1) | 2021.09.28 |
| WEB2 - JavaScript 29 (객체 'object' 의 예고) (0) | 2021.09.27 |
| WEB2 - JavaScript 28 (함수의 활용) (6) | 2021.09.24 |