들어가기 전에
지난 시간까지 객체의 문법에 대해서 배워봤습니다. 이렇게 배운 객체를 실제 코드에서 어떻게 활용할 수 있을까요? 첫 강의에서 본 예제에 적용해서 알아봅시다.
학습 목표
객체를 적절하게 활용할 수 있습니다.
핵심 단어
- 객체
강의 듣기
들어가기 전에
지난 시간까지 객체의 문법에 대해서 배워봤습니다. 이렇게 배운 객체를 실제 코드에서 어떻게 활용할 수 있을까요? 첫 강의에서 본 예제에 적용해서 알아봅시다.
학습 목표
객체를 적절하게 활용할 수 있습니다.
핵심 단어
강의 듣기
객체의 활용
객체 첫 강의에서 봤던 예제를 다시 한 번 살펴봅시다. 첫 강의에서 우리는 많은 함수들을 만들었고, 이 함수들의 이름이 겹치지 않도록 하기 위해서 많은 노력을 기울였습니다. 이번 강의에서는 객체를 활용해서 이런 문제점들을 해결해 봅시다.
먼저 Body라는 이름의 객체를 다음과 같이 만들어 봅시다.
var Body = {
setColor: function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor: function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
링크에 대해서도 이러한 작업을 하기 위해서 Links라는 객체를 만들어 봅시다.
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;
}
}
}
이렇게 만들면 Body와 Links에 모두 setColor이라는 함수가 존재하게 됩니다. 하지만 이 둘을 사용할 때에는 다음과 같이 다르게 사용하게 됩니다.
Body.setColor('black');
Links.setColor('powderblue');
함수의 이름이 같아도 다른 객체에 소속된 메소드이기 때문에 충돌이 일어나지 않는 것이죠.
생각해보기
1) 이번 강의에서 수정한 코드가 이전의 코드에 비해서 더 좋아진 점은 무엇일까요?
comment
유지보수가 쉬워짐
유지보수가 쉬워졌다.
코드가 간결해졌다.
코드의 수가 간결해지고 유지보수가 쉬워진다
중복감소, 유지보수 용이
의미있는 객체의 속성을 이용하여 함수를 더 구조화하여 정리할 수 있다.
중복된 코드도 줄여주고 유지보수가 용이해진다.
코드의 가독성이 좋다
가독성이 좋아졌음
함수의 이름에 대한 부담이 덜어졌고 관련된 함수들을 객체 안에 모아둘 수 있어서 코드의 가독성이 올라갔다.
같은 이름을 가진 함수를 사용할 수 있다.
가독성이 좋아져서 코드의 유지보수가 쉬워진다.
함수명을 작성할 때 머리가 덜 아프고, 함수명이 길어지는 것을 방지할 수 있다.
활용을 통해 html페이지를 매우 가볍게 만들 수 있다.
또한 가독성을 높여서 각 코드마다 어떤 의미를 담고 있는지도 쉽게 정의를 할 수 있다.
짧고 굵게 만들 수 있다는 점에서 장점이 많아진다.
일단 코드의 가독성 측면에서 매우 향상된다고 생각한다. body라는 객체를 만들어 body내의 function property는 body와 연관하여 무엇을 하는 함수임을 함수명과 같이 연관하여 생각할 수 있다. 이로 인해 함수의 코드가 어떻게 짜여졌는지와 상관없이 어떤 목적을 달성하기 위해 만들어진 함수임을 직관적으로 알 수 있다.
코드가 많아질수록 유지보수가 좋고 코드 길이가 줄고 코드가 무엇을 나타내는지 명확히 알 수 있다
객체의 메소드가 함수만 쓸때보다 어느 디렉토리에서 쓰인 함수인지 알기 쉽다
함수만 쓰면 함수 이름끼리 중복될 위험이 크다
객체 안에 메소드를 담을 수 있어서 메소드 명이 중복되더라도 객체가 다르면 사용할 수 있다. 코드의 가독성이 좋아진다
객체 안에 함수를 넣어서 각각의 객체에 맞는 메소드를 사용할 수 있습니다 ! 매소드 이름이 중첩되어도 객체가 다르면 사용 할 수 있습니다 !
객체 안에 함수를 넣어서 각각의 객체에 맞는 메소드를 사용할 수 있고 메소드 이름이 중첩되어도 객체가 다르면 상관이 없다는 장점이 있습니다.
코드가 짧아졌고, 좀 더 가시적이기에 유지보수가 더욱 쉬워졌습니다
비슷한 기능을 하는 함수를 객체로 묶어서 코드의 가독성이 좋아짐