객체 / 객체의 활용

프로그래밍을 하다보면 코드가 많아지고, 이를 정리하기위해 함수를 이용합니다.

그리고 함수뿐 아니라 연관되어있는 변수가 많아지면 똑같이 복잡도의 한계에 도달하게 됩니다.

이러한 상황에서 서로 연관된 함수와 변수들을 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구가 바로 객체입니다.

 

이전 시간에 만들었던 nightDayHandler()함수 입니다. 

위에 표시한 var alist로 시작하는 부분이 중복되는 것을 볼 수 있습니다.

중복된 코드를 함수로 독립시켜보도록 하겠습니다.

 

위에 중복되었던 부분을 setColor()라는 함수로 생성하였습니다.

그리고 실제 적용할 색상은 'powderblue'와 'red'로 각각 다르기때문에 매개변수로 (color)를 설정하고 함수를 호출할때 매개변수를 통해 색상값을 적용할 수 있도록 하였습니다.

그리고 함수를 호출할때는 setColor('적용할색상'); 으로 작성하면 됩니다.

위 예시에서는 nightDayHandler()함수 내에서 setColor('powderblue')와 setColor('red')를 호출하도록 처리한 것을 볼 수 있습니다.

기존과 기능은 동일하게 작동되지만 중복을 줄이는 방편인 것입니다.

 

---

이번에는 위 예시에서 또다시 중복되는 "target.style.color" 부분에 주목해봅시다.

물론, 한줄밖에 되지않기때문에 함수화의 큰 의미는 없지만 한줄이어도 그 의미가 불명확하거나 시간이 지나면서 무슨뜻인지 파악하기 어려울때 함수를 통해 그 로직에 이름을 부여하는 방법도 있습니다.

그런 의미에서 위의 "target.style.color" 부분을 함수화 해보겠습니다.

 

함수화를 할때 중요한 점은 함수의 이름을 설정하는 것입니다.

이전의 예시에서 setColor()라는 함수를 생성하였습니다. 

setColor()라는 것은 '색상을 설정한다'라는 것으로 이해할 수 있는데 색상을 정하는 함수가 하나 있을때는 문제가 없었지만, 위처럼 'a'태그나 Body태그에 각각 색상을 적용하는 함수가 여러개 생성한다고 생각했을때 이름이 겹치지않게 설정하기가 매우 어렵습니다.

그래서 앞전의 생성한 setColor()함수의 이름을 LinksSetColor()로 수정하였고 아래 함수 호출하는부분도 수정하였습니다.

그리고 추가로 생성하는 함수의 이름은 BodySetColor()라고 지어주었습니다.

추가로, 기존에 생성했던 함수에서 "target.style.color"을 복사해올때 "document.querySelector('body')"로 수정해야 정상적으로 실행됩니다. 왜냐하면 target이 nightDayHandler() 함수내에 선언된 변수이기 때문에 target으로 입력하면 실제 적용하고자하는 태그를 찾지못합니다.

 

---

그런데 위 예시처럼 이름을 바꾸는 것이 아닌 객체를 활용하는 방법도 있습니다.

서로 연관된 함수와 변수를 그루핑해서 정리정돈하기위한 수납상자로서 객체가 존재합니다.

컴퓨터에 수많은 파일들을 정리할때 이용하는 폴더와 개념이 비슷하다고 생각하면 됩니다.

 

아직 객체를 만드는 법을 배우진않았지만 위 예시에도 객체가 있습니다.

여기서 document 라는 것은 객체이고 .querySelector()은 객체에 속한 함수라는 것을 볼 수 있습니다.

이 때 객체에 속한 함수는 함수라 부르지 않고 메소드(Method)라고 부릅니다.

---

위 예제를 객체를 활용하여 작성한 코드

주야간모드전환.txt

0.00MB