2023.12.28 3번째 포스팅
- 학습 목표🔥
Javascript 객체 문법 이해와 활용
이번 포스팅에서는 Javascript 문법의 핵심이라고 볼 수 있는 '객체(Object)'에 대해서 정리하려고 한다.
객체(Object)란 무엇인가?
이전에 배웠던 함수(Function)는 코드가 중복될 때 중복된 코드를 정리하여 코드 가독성과 유지 보수성을 향상시킨다. 즉, 정리정돈하는 도구이다.
마찬가지로, 객체(Object)도 정리정돈 도구이다.
객체는 함수와 변수가 많아지면 연관된 것들을 서로 그룹화해서 정리정돈하는 도구이다.
객체의 생성
그렇다면, 객체는 어떻게 만드는 가?
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
</script>위 코드를 설명하자면, coworkers라는 객체를 생성하고 객체의 속성인 프로퍼티(Property) programmer, designer가 있는 것이다. 우리는 이 프로퍼티를 Key라고 부르고, 각 Key에 대응하는 값이 egoing,leezch인 것이다.
객체에 접근
객체를 생성했으니, 이제 접근하여 데이터를 사용할 줄 알아야 한다.
document.write("programmer : "+coworkers.programmer+"<br>"); //(A)
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "duru"; //(B)
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho"; //(C)
//객체이름에 공백 포함하기 위해서
document.write("data scientist : "+coworkers["data scientist"]+"<br>"); //(D)위 코드에서 볼 수 있듯이, 객체의 데이터에 접근하는 방법은 다음과 같다.
(접근할)객체명.(값을 가져올)프로퍼티
(B)코드는 기존의 객체에 'bookkeeper'라는 프로퍼티(key)를 추가하고, duru라는 key값을 할당한다.
또한 프로퍼티명에 공백이 들어간다면 (B)와 같은 방법으로는 프로퍼티 추가가 불가능하다.
따라서, (C)처럼 추가해준다. 당연히 접근도 마찬가지로 대괄호를 통해서 수행할 수 있다.
객체의 활용
이제 객체의 생성과 접근까지 알아보았고, 그렇다면 이 객체를 어떻게 활용할 수 있는지에 대해서 고민해보자.
객체의 key값에는 함수(Function)도 들어갈 수 있다!
객체의 key값에 함수가 들어간다는 사실 하나로 객체의 활용이 광범위해진다.
var Links = {
setColor:function(color) {
var alist = document.querySelectorAll('a');
var i=0;
while(i<alist.length){
alist[i].style.color = color;
i = i+1;
}
}
}
var Body = {
setColor:function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function(color) {
document.querySelector('body').style.backgroundColor = color;
}
}위 코드를 살펴보면, Links 객체에는 setColor라는 key(=프로퍼티)가 있고
key값으로는 함수가 정의되어 있다.
요약하자면, Links라는 객체 안에 setColor라는 메소드가 정의되어 있는 것이다.
우리가 Links.setColor("black"); 이라는 코드를 작성한다면
이 한줄만으로도 문서에 있는 모든 <a>태그들의 color를 black으로 변경할 것이다.
만약 <a>태그 color설정이 아니라, body 태그 color 설정하고 싶다면 우리는 body라는 객체를 만들어서 body 태그에 적용할 목적인 메소드를 정의해주는 것이다.
이렇게 했을 때, 우리는 객체의 이름을 통해서도 '아 이것은 <a>태그에 적용할 함수구나', '아 이것은 <body>태그에 적용할 함수구나' 를 한눈에 파악하기 쉽고 이는 곧 가독성과 유지보수성 향상에 명백한 도움을 준다.
마치며...
이번 포스팅을 끝으로 자바스크립트 문법을 모두 정리해보았다. 타 언어들과 꽤나 유사했지만, 객체 파트에서는 특이함을 느꼈다. 이제 막 자바스크립트의 첫 걸음마를 뗀 것이기때문에, 곧바로 자바스크립트 단순한 프로젝트들을 혼자서 만들어보면서 자바스크립트의 문법과 웹 페이지 작성에 익숙해져보려고 한다.
