(생활코딩) Javascript 객체 -1-

객체를 알아보자. 영어로는 Object라고 부른다.

객체는 함수 기반위에서 객체라는 것이 존재한다.

 

프로그래밍을 하다보면 코드가 많아지고, 그 코드들을 잘 정리정돈하기 위해서 함수라는걸 쓴다.

또 함수가 많아지고, 그 함수와 연관되어 있는 변수들이 많아지면 복잡도의 한계에 도달된다.

그러한 한계에서 서로 연관된 함수와 변수들을 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구를 객체라고 한다.

 

 

전에 함수 포스팅에서의 코드를 보면 중복되는 부분들이 있다. 저 중복된 코드들을 함수로 독립시켜보자.

 

setcolor 함수로 정의.

 

setcolor함수 호출

 

5줄의 코드가 1줄의 함수로 줄어든 것을 볼 수 있다.

 

그리고 해당 부분의 코드가 중복이 되니 함수로 정의해준다.

물론 한 줄 밖에 되지 않기 때문에 함수화시키는 것은 별로 의미가 없을 수도 있지만, 의미가 불명확하거나 시간이 지나면 원래 무슨 뜻이었는지 파악하기 어려운 코드는 함수를 통해 그 로직에 이름을 부여하는 것도 좋은 전략이다.

 

만약에 함수명이 겹치는 경우에는 뒤에 작성한 함수가 적용된다. 이러한 함수명과 관련해서 지금 작성하려고 함수명이 이전에 있었는지 파악하기란 쉽지 않다. 이름을 충돌나지 않기 위해서 앞에 Links/Body를 붙여준다.

 

setcolor관련 함수

setcolor함수관련 여기서 target이라는 변수를 document.querySelector('body')로 바꿔줘야한다.

(night_Handler에 값을 선언했기 때문에 setcolor함수에서 target을 사용하면 기능을 사용할 수 없다.)

 

night_handler 기능 함수

 

여기서 이름을 Links/body로 하는 것도 방법이지만, 이런 경우에도 객체를 사용할 수 있다.

서로 연관된 함수와 연관된 변수들을 그룹핑해서 정리정돈하기 위한 객체를 사용해보자.

 

"."을 찍어 객체형태로 만들 수 있다. 객체는 폴더라는 관점으로 봐도 무관하다. 

 

여기서 우리가 자주쓰는 위의 명령어에 대해서, document가 객체라는 것을 알 수 있고, document. 뒤에 querySelector형태를 보니깐 document라는 객체에 속해 있는 함수라는 것을 알 수 있다. 그리고 객체에 속한 함수는 함수라 하지 않고 메소드(method)라고 부른다.