[JavaScript] 객체 기본 개념 예제
오늘은 객체의 기본 개념에 대해서 배웠다.
객체란 무엇인지, 객체의 데이터를 추출하는 방법 (반복문), 메소드를 배웠다.
우리는 정보량이 많아 졌을 때 서로 연관된 정보를 순서대로 정리정돈 하기 위해 배열을 사용했다.
많은 정보를 순서와 상관없이 정리정돈을 하기 위해서는 객체를 사용한다.
객체란 무엇인가
배열은 대괄호 []를 사용했고, 객체는 중괄호 {}를 사용한다.
객체로 사용할 데이터를 출력할 때 띄어쓰기가 필요할 경우에 대괄호 []를 사용하면 된다.
coworkers["data scientist"] = "taeho";
document.write("data scientist : " + coworkers["data scientist"]+"<br>");
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
</head>
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer" : "gosim",
"designer" : "sohee"
};
document.write("programmer : " + coworkers.programmer+"<br>");
document.write("designer : " + coworkers.designer+"<br>");
coworkers.bookkeeper = "seoyeon";
document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
coworkers["data scientist"] = "taeho";
document.write("data scientist : " + coworkers["data scientist"]+"<br>");
</script>
</body>
</html>
반복문을 이용한 객체 데이터 출력
"javascript object iterate"를 검색하면 반복문을 이용한 객체 데이터를 출력하는 기본 코드를 알 수 있다.(https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object)
for (let [key, value] of Object.entries(yourobject)) {
console.log(key, value);
}
객체 key값 출력
<h2>Iterate</h2>
<script>
for(var key in coworkers){
document.write(key + '<br>');
}
</script>console 창에서 입력하지 않고 vs code를 이용하여 코드를 출력 하였기에 document.write를 사용하였다.
객체 value값 출력
<script>
for(var key in coworkers){
document.write(coworkers[key]+'<br>');
}
</script>
객체 key + value값 출력
<h2>Iterate</h2>
<script>
for(var key in coworkers){
document.write(key + '<br>');
}
</script>
<br>
<script>
for(var key in coworkers){
document.write(coworkers[key]+'<br>');
}
</script>
<br>
<script>
for(var key in coworkers){
document.write(key + ' : ' + coworkers[key]+'<br>');
}
</script>
객체 key value 출력 예제
<h2>Iterate</h2>
<script>
for(var key in coworkers){
document.write(key + '<br>');
}
</script>
<br>
<script>
for(var key in coworkers){
document.write(coworkers[key]+'<br>');
}
</script>
<br>
<script>
for(var key in coworkers){
document.write(key + ' : ' + coworkers[key]+'<br>');
}
</script>
메소드
메소드는 객체지향언어에서 함수를 부르는 용어라고 이해하면 편하다.
<h2>Property & Method</h2>
<script>
coworkers.showAll = function(){
for(var key in this){
document.write(key + ':' + this[key]+'<br>');
}
}
coworkers.showAll();
</script>function showAll() { }와 동일
메소드를 이용해서 객체 데이터들을 출력할 경우 객체의 이름이 변경된다면 편하게 수정 가능하다.
배움이 부족하여 맨 밑 show.All:function(){for(var key in this){document.write(key+':'+this[key]+'');}}까지 출력됨