JavaScript 객체(Object)
#객체(Object)
객체 또한 코드의 정리, 효율을 위한 개념이 존재하는데, 서로 연관된 함수와 변수가 많아질 때, 이를 정리하고 묶어주는 용도로 이해할 수 있다.
이전에 앞서서 작성하였던 theme코드를 다음과 같이 리팩토링하면
//백그라운드 컬러 변경
function setBgColor(color){
document.querySelector('body').style.backgroundColor= color;
}
//바디 텍스트 컬러 변경
function setBodyColor(color){
document.querySelector('body').style.color= color;
}
// a 링크 태그 컬러 변경
function linksSetColor(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i<alist.length){
alist[i].style.color=color;
i++;
}
}위와 같이 3가지의 함수로 정리할 수 있었는데, 이렇게 하나의 기능에 사용하기 위해서 파생된 함수들이 수 없이 많다면 복잡해지고 서로 다른 함수의 이름을 사용하기 위해서 보다 다양하고 긴 함수의 이름을 사용하게 될 것이다.
이때, 객체를 사용하여 함수들을 비슷한 성격끼리 그룹으로 만들어 묶어줄 수 있다.
document.querySelector('body');
// document - 객체
// querySelector - 객체 내에 속한 함수 = 메소드(Method)간단히 예를 들어, document가 객체가 되고 querySelector는 document 내에 속한 함수이고 객체에 속한 함수들을 메소드(Method)라는 별도의 이름으로 부르게 된다.
#객체(쓰기와 읽기)
객체(Object)는 배열(Array)과 달리 순서 없이 저장되는 구조이며, 순서가 없는 대신 각각의 이름을 통해 값을 꺼내고 넣는다.
객체를 만들 때에는 배열과 달리 중괄호를 사용한다. 그리고 각 요소는 각각의 이름과 값으로 이루어진다.
var fruits = {
"Afruit":"Apple",
"Bfruit":"Banana"
};이처럼 fruits라는 객체 안에 Apple이라는 value값이 있고 Afruit라는 key값이 붙어있는 것이다.
즉, 객체는 선언 시 [key, value] 쌍의 배열을 반환한다.
요소를 꺼내어 사용할 때에는
document.write("A fruit : "+fruits.Afruit+"<br>");
document.write("B fruit : "+fruits.Bfruit+"<br>");fruits라는 객체 내의 Afruit와 Bfruit라는 key값을 가진 값을 가져와 출력하게 된다.
객체에 요소를 추가하는 방법은
fruits.Cfruit = "Coconut";
document.write("C fruit : "+fruits.Cfruit+"<br>");다음과 같이 추가하고 출력할 수 있지만, 만약 'anotehr Afruit'라는 key값을 가진 데이터 값을 추가하고 싶다면,
fruits["another Afruit"] = "Avocado";
document.write("another Afruit : "+fruits["another Afruit"]+"<br>");와 같이 fruits라는 객체 내에 대괄호를 통해서 key값을 선언하고, 출력 또한 기존 방법과 다르게 대괄호를 통해서 묶어주어야 한다.
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
//변수 선언
var fruits = {
"Afruit":"Apple",
"Bfruit":"Banana"
};
//출력
document.write("A fruit : "+fruits.Afruit+"<br>");
document.write("B fruit : "+fruits.Bfruit+"<br>");
//요소 추가
fruits.Cfruit = "Coconut";
document.write("C fruit : "+fruits.Cfruit+"<br>");
//중간 공백을 가진 요소 추가
fruits["another Afruit"] = "Avocado";
document.write("another Afruit : "+fruits["another Afruit"]+"<br>");
</script>
</body>
#객체(순회)
객체 내에 들어가 있는 모든 값들을 가져오기 위해서는 순회(iteration)이라고 한다. 배열에서는 반복문을 사용했었고 객체에서는 for in이라는 것을 사용한다.
위에서 선언한 객체와 key, 그리고 값들을 모두 불러오기 위해서
//객체 선언 및 요소 추가
var fruits = {
"Afruit":"Apple",
"Bfruit":"Banana"
};
//key 값 불러오기
for(var key in fruits) {
document.write(key+'<br>');
}다음과 같이 코딩할 수 있는데 여기서 key값은 Afruit와 Bfruit가 된다.
그럼 요소의 값인 Afruit의 Apple과 Bfruit의 Banana값을 출력하기 위해서는 어떻게 해야할까. 바로 key값을 통해서
for(var key in fruit) {
document.write(fruit[key] + '<br>');
}다음과 같이 코딩하여 Apple과 Banana값을 출력할 수 있다.
#객체(Property와 Method)
객체에는 숫자, 문자열 등 다양한 것을 담을 수 있는데, 그 중 함수 또한 담을 수 있다.
fruits라는 객체 내에 있는 모든 값들을 출력하는 showAll()이라는 함수를 추가해보면,
fruits.showAll = function() {
for(var property in this) {
document.write(property+' : '+this[property]+'<br>');
}
}다음과 같이 메소드를 추가할 수 있다. 여기서 for-in 에서 in fruits가 아닌 this를 사용한 것은 앞전에 선언한 fruits라는 변수의 이름이 바뀌면 함수도 수정해야하는 경우가 발생하는데 fruits대신 해당 함수가 쓰인 객체를 가리키는 this를 사용해주는 것이 더욱 효율적이다.
이렇게 객체 내에서 생성된 함수들을 메소드(Method)라고 부르고, 객체에 해당하는 변수들, fruits라는 객체내의 Afruit, Bfruit 등이 이에 해당된다. 이런 변수들을 프로퍼티(Property)라고 부른다.
#객체의 활용
맨 위에서 언급한 기존 페이지에서의 세가지 기능을 Body라는 객체로 묶어보자.
//Body 객체 선언
var Body = {
// body태그의 글씨색 변경
setBodyColor:function (color){
document.querySelector('body').style.color= color;
},
//body태그의 배경색 변경
setBgColor:function (color){
document.querySelector('body').style.backgroundColor= color;
},
// a 태그의 모든 요소 글씨색 변경
linksSetColor:function (color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i<alist.length){
alist[i].style.color=color;
i++;
}
}
}위 처럼 Body라는 객체로 3가지의 메소드를 묶어주고 이를 통해 기존의 themeChanger()이라는 함수에서 작성되었던
function themeChanger(self){
var target1 = document.querySelector('body');
if(self.value==='day'){
//setBgColor('white');
//setBodyColor('black');
//linksSetColor('black');
Body.setBgColor('white');
Body.setBodyColor('black');
Body.linksSetColor('black');
self.value='night';
}
else{
//setBgColor('black');
//setBodyColor('white');
//linksSetColor('white');
Body.setBgColor('black');
Body.setBodyColor('white');
Body.linksSetColor('white');
self.value='day';
}
}//주석 코드 앞에 Body.을 붙여 선언해주면 정상적으로 기능은 작동이 되면서 해당 메소드를 Body라는 객체에 정리하였다.
<참고자료 : boostcourse : 생활코딩 > https://www.boostcourse.org/cs124/joinLectures/43689?isDesc=false
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org