Blog

자바스크립트 객체 개념 익히기

주변에서 자바스크립트 객체가 무엇인지 궁금해 하시는 분이 계셔서, 비전공자가 이해하기 쉽도록 정리를 해보도록 하겠습니다. 잘못된 정보가있으면 댓글로 알려주시면 수정하도록 하겠습니다.

우선 객체는 사람, 자동차, 건물, 새, 고양이, 선풍기, 믹서기, 냉장고등 현실에 존재하는 모든 물건 이라고 보시면 됩니다. 이러한 객체는 프로그래밍 관점에서 보면 메소드와, 프로퍼티를 가지고 있습니다. (굳이 따지면 개발자의 마음에따라 둘다 없을수도 둘다 있거나 하나만 있을수도 있습니다.)

그럼 메소드와 프로퍼티는 무었인지 알아보겠습니다.

우선 메소드 부터 보겠습니다. 메소드는 쉽게 동사라고 보면됩니다. 사람이라는 객체의 메소드는 “먹다, 씻다, 말하다” 등이 있을 수 있고, 냉장고의 경우 “약냉, 강냉”등 어떠한 기능이 수행되는 것들을 메소드라고 할 수 있습니다. 프로그래밍에서는 냉장고가 말하거나 걷게할 수 도 있습니다. ㅋ

다음으로 프로퍼티는 사람의 경우 나이, 이름, 성별, 좋아하는 것 등과 같이 동작이아닌 명사와 같은것들을 프로퍼티라고 합니다. 마찬가지로 냉장고의 경우 가격, 에너지소비효율등급 등과 같은 것들이 프로퍼티 입니다. 개념은 여기까지 정리하시면 되겠습니다.

그러면 프로그래밍언어(javascript)에서 객체는 어떻게 되느냐. 자바스크립트에는 많은 객체가 있는데 Object라는 객체가 최상위 객체이 있습니다. 다른 모든 객체는 Object의 객체를 상속받기 때문에 이 객체가 가지고 있는 메소드와 프로퍼티도 자연스럽게 상송받게됩니다. 이외에도 string, date, array… 등 프로그래밍 언어에서 미리 정의된 객체와 사용자가 정의한 객체등 많은 객체가 있습니다. 객체들은 상속받은 객체들의 메소드, 프로퍼티에 접근이 가능하겠죠? 상속에 관해서는 다음에 포스팅 하도록 하겠습니다.

그러면 프로그래밍(jQuery)에서 객체는 어떻게 되느냐. jQuery역시 javascript로 만들어진 라이브러리이기 때문에 마찬가지로 Object객체가 최상위 객체입니다.(질문자 분께서 제이쿼리를 사용하셔서ㅋ)  웹에서 가장 많이 사용되는 html(DOM) 숨겼다 나타내기 기능으로 설명드리겠습니다.

아래와 같은 마크업이 있습니다.

클래스명 item_box인 div와 자식요소로 클래스명이 item인 div요소 가 있습니다. (참고로 개발에서 말하는 클래스와 html의 class와는 완전 다른것 입니다. 개발에서 말하는 클래스는 객체를 생성하기 위한것인데.. 자바스크립트에는 클래스는 없습니다. 너무 깊게 들어가면 머리가 아프니 이부분은 나중에 따로 포스팅하여 링크를 걸어두겠습니다.)

jQuery에는 수 많은 편리한 메소드와 프로퍼티(API)가 미리 정의되어 있습니다. 웹문서(html, php, jsp…)에서 jQuery파일(jquery-1.10.1.min.js)을 호출하면 그때 부터 jQuery에 미리정의된 메소드, 프로퍼티를 호출 가능한 상태가 됩니다. 이제 DOM요소를 다루기 위한 메소드나 프로퍼티를 사용하기 위해선 html을 jQuery 객체로 변환을 시켜야 합니다.  그래야 jQuery의 메소드와 프로퍼티를 사용할 수 있습니다.  jQuery에서는 $() 를 통해서 html을 객체로 반환합니다.

그럼 이제 jQuery의 수 많은 메소드와 프로퍼티를 .을 사용하여 아래와 같이 호출할 수 있습니다. (.을 닷 연산자라고도 합니다. 마침표로 사용하는 그것 입니다.)

프로그래밍은 반복되는 작업을 최소화 하는 것이 중요하다고 생각합니다.  글의 주제와 별개지만 위의 소스를 최적화 해 보겠습니다.

위와같이 동일 객체에 .을 계속 붙여서 메소드를 호출하는것을 메소드 체인이라고 합니다.

조금 이해가 되셨을지 모르겠네요. 저는 프로그래밍세계에서 개발자는 마법사와 같다고 생각합니다. 불가능이없죠. 위의 소스를 현실로 옮기면 박스 3개가 들어있는 큰박스에다 대고 ”사라져라!” 라고 명령해서 사라진거와 같습니다.  이 마법사는 jQuery라는 마법을 배운거죠. 주문은 hide() show() 등이었습니다. (*jQuery는 언어는 아니고 프레임워크입니다.)

객체이야기를 하다가 마법사까지 왔는데 현실의 모든 것들을 프로그래밍에 옮긴다고 생각하고 개발하시면 좀 더 편안하고 쉽게 개념을 잡을 수 있지 않을까라고 생각합니다.

비전공자라고 포기하지 마시고 같이 열공합시다~ 궁금하신점은 댓글이나 이메일로 남겨주세요~