자바스크립트 Class와 Object에 대해 쉽게 정리해보았습니다.

목차

1. Object에 자료 담는 법
2. Object에서 자료 뽑아 쓰기
3. 객체지향의 필요성
4. 자바스크립트 객체지향 프로그래밍
   
   

---

1. Object에 자료 담는 법

그냥 자바스크립트 Object는 일단 1차적으로는 단순한 자료형입니다.
Object자료형은 값을 key, value형태의 쌍으로 저장할 수 있습니다.

로이킴 Object를 만들어보죠.

 var royKim = {
    firstName : '로이',
    lastName : '킴',
    age : 30,
    sayHi : function() {
        console.log('안녕하세요.')
    }
 }

royKim 이라는 Object를 하나 만들어보았습니다. royKim은 :

• 이름, 성, 나이라는 '데이터'를 가지고 있으며
• SayHi 이런 식으로 대화를 나누는 '기능'도 있습니다.

그래서 firstName에는 '로이'라는 데이터를 집어넣었고
sayHi()에는 '안녕하세요'를 콘솔창에 출력하는 기능을 넣었습니다.

아무튼 Object는 기본적으로 변수, 문자열, array, 함수, 혹은 또다른 object 등을 저장할 수 있는 공간이라고 생각하면 됩니다.

---

2. Object에서 자료 뽑아쓰기

데이터를 담았다면 그 데이터를 뽑아 쓰는 법도 배워야겠죠.
Object에 담긴 데이터를 뽑아 쓰려면 마침표를 찍고 key 이름을 써주면 됩니다.

 var royKim = {
    firstName : '로이',
    lastName : '킴',
    age : 30,
    sayHi : function() {
        console.log('안녕하세요.')
    }
 }
 human.age; 
 human.sayHi();

royKim.age;
royKim.sayHi();

이런 식으로 점을 찍은 후에 object에 저장된 key값의 명칭을 불러오면 됩니다.
함수를 뽑아쓰고 싶을 땐 key값에 괄호를 붙여 함수라고 명시해주면 됩니다.

우리는 배운 사람들이니까 정식 용어를 써서 한번 말해봅시다. Object내에 저장된 텍스트, 숫자같은 자료는 속성 (properties), 함수는 메소드 (method)라고 부릅니다.

자바스크립트 Object다루기는 이게 끝입니다.
일단 object라는 자료형에 자료를 저장하고 꺼내쓸 수 있기만 하면 성공입니다.

(여기까지의 내용은 흔히 말하는 객체지향 프로그래밍과는 큰 상관이 없습니다. )

---

3. 객체지향의 필요성이 느껴질 때

솔직히 말하면 객체지향 몰라도 자바스크립트로 이것저것 만드는데 아무 문제가 없습니다.

지금 당장 필요 없으면 굳이 안배워도 됩니다. (외워봤자 안쓰면 다 까먹습니다)

그런데 자바스크립트 강의를 듣거나 책을 펼치게 되면 객체지향이라고 꼭 배우고 넘어가죠?

왜냐면 분명 코드짜다보면 Class라는 개념을 만들어쓰면 훨씬 효율적인 경우가 있기 때문입니다.

Class

결론부터 말하자면 Class라는 개념은 반복적인 object를 많이 만들어낼 때 사용합니다.

게임 만드는걸로 비유하면 굉장히 이해가 쉽습니다.

게임 코드를 짜다보면 같은 데이터와 기능을 가진 유닛을 많이 만들 때가 많습니다.

망겜망겜 거리지만 아직도 피시방 점유율 1위2위를 다투고 있는 초절정 인기게임 '리그오브레전드'로 예를 들어볼까요?

(스킨만 팔았을 뿐인데 연 2조원의 매출을 올리는 그 게임입니다.)

롤이라는 게임의 게임진행방식을 간략하게 설명하자면

1. 맘에드는 영웅을 하나 고릅니다.

2. 영웅의 q,w,e,r 이 네개의 스킬을 가지고 플레이합니다.

3. 가끔 같은 팀원의 부모님 안부를 물어보기도 하며

4. 상대 영웅과 본진을 때려뿌수면 이기는 게임입니다.

▲ 동그라미 친 부분을 보시면 Q,W,E,R 이 네개의 키보드 버튼으로 발동되는 스킬들이 각각 보이시죠? 이게 영웅의 핵심기능입니다.

▲ 그리고 왼쪽에 채팅창 맨 밑에 글을 보시면 ~are missing 이라고 뜨죠? "자네 부모님이 missing 하는 것이 아니냐" 라는 부모님 안부를 묻는 기능을 구현한 부분입니다.

이제부터 영웅을 직접 자바스크립트 코드로 구현해봅시다.

영웅이라는 object를 만들건데, object안에는 각각 1. q,w,e,r 스킬과 2. 안부묻기 기능이 들어가야합니다.

 var hunter = {

    q : '활쏘기',
    w : '시야밝히기',
    e : '공격력버프',
    r : '궁극기',

    taunt : function () {
        console.log('당신 부모님은 안녕하신가요?')
    }
 }

 hunter.q ;   /*활을 쏩니다.*/
 hunter.taunt() ;   /*당신 부모님의 안부를 물어봅니다.*/

아까처럼 Object 안에 q,w,e,r 데이터와 기능을 담았습니다.

하지만 함정이 하나 있습니다.

게임에 나오는 영웅은 백개가 넘습니다.

100가지 영웅의 Q,W,E,R, 안부묻기 기능을 각각 object로 각각 만든다고 하면 object를 100번 넘게 만들어야겠죠.

 var destroyer = {

    q : '파괴',
    w : '혼돈',
    e : '망가',
    r : '궁극기',
    
    taunt : function () {
        console.log('당신 부모님은 안녕하신가요?')
    }
 }

 hunter.q ;   /*파괴합니다.*/
 hunter.taunt() ;   /*당신 부모님은 안녕하신가요?*/

영웅을 하나 더 만들어보았습니다. 앞으로 98개의 영웅을 더 만들어내야하는데.. 그럼 코드가 1000줄 넘게 나오겠네요?

이런 일을 수작업으로 시킨다면 당장 퇴사해야합니다.

개발자들은 얼른 퇴근해서넷플릭스봐야하니 이런 식으로 코드를 짜지 않고, 똑똑하게 Class라는 것을 만들어서 사용합니다.

Class 는 아까 말했지만 비슷한 내용의 object를 여러개 만들어야할 때 사용합니다.

Class를 만들고 나면 위에 뻘짓한 것 처럼 object를 계속 새로 선언하는게 아니라, 상속받아 사용합니다.

어떤 식이냐면

1. object를 생성하는 틀(constructor)을 일단 만들어놓고
2. 유사하게 생긴 object(일명 instance)를 반복적으로 뽑아냅니다.

똑똑한 여러분들껜 말로 설명하는 것 보다는 코드 보는게 훨씬 이해가 빠를 수 있습니다.

---

4. Class를 만들어 객체를 무한히 뽑아보자

클래스를 가장 쉽게 만들어 쓸 수 있는 방법은 바로 function키워드를 이용하는 방법입니다. 함수의 문법을 빌려 Class를 만들어봅시다.

 function Hero (skill1, skill2, skill3, skill4) {

    this.q = skill1 ;
    this.w = skill2 ;
    this.e = skill3 ;
    this.r = skill4 ;

    this.taunt = function () {
        console.log('당신 부모님은 안녕하신가요?')
    }
 }

지금 Hero라는 이름을 가진 리그오브레전드 영웅을 생성하는 틀을 만든겁니다.

이 함수는 skill 1 ~ 4까지의 인자를 받는데, 각각 this.q ~ this.r 이라는 곳에 저장합니다.

this라는 키워드가 새로 나오죠? this는 일단 객체로부터 생성된 새로운 영웅(인스턴스)을 지칭하는 키워드라 생각하시면 됩니다.

this.q = skill1

부분을 다시 설명하면

Hero()함수의 skill1 인자로 "활쏘기" 라는 텍스트를 전달하면 그게 새로운 영웅의 q스킬로 할당된다는거죠.

(▲ 이 말이 이해가 안가면 밑에 있는 영웅object 생성 코드를 보도록 합시다.)

그럼 이걸 이용해서 어떻게 새로운 영웅을 만들어내냐면

 function Hero (skill1, skill2, skill3, skill4) {

    this.q = skill1 ;
    this.w = skill2 ;
    this.e = skill3 ;
    this.r = skill4 ;

    this.taunt = function () {
        console.log('당신 부모님은 안녕하신가요?')
    }
 }

 var hunter = new Hero('활쏘기', '시야', '버프', '궁극기');

 hunter.q ;   /*활쏘기*/
 hunter.taunt()   /* 당신 부모님은 안녕하신가요? */

아까보다 훨씬 간단해졌죠?

var hunter = new Hero('활쏘기', '시야', '버프', '궁극기');

이거 한줄만 있으면 hunter라는 새로운 영웅이 만들어집니다.

아까는 완전히 새롭게 object를 새로 만들어야했는데

이번엔

var hunter = new Hero(어쩌구) 이런 식으로

Hero라는 이름을 가진 생성자를 이용해 새로운 영웅(인스턴스)를 만들어냈습니다.

앞으로 계속 함수에 인자만 달리해주는 것으로

각각 새로운 q,w,e,r 스킬 혹은 새로운 taunt 기능을 가진 'destroyer', 'gunner', 'smasher' 등 새로운 인스턴스를 계속 뽑아낼 수 있겠죠.

(그래서 class/object 검색해보시면 이런 그림들이 많습니다. Car라는 틀을 만들어놓고 틀을 이용해 object1, object2, object3을 계속 뽑아냅니다.)

끝내기 전에 용어를 정리하자면

생성자 : object를 찍어낼 수 있는 '틀'입니다. 보통 대문자로 이름을 짓습니다. 자바스크립트에선 function 키워드를 빌려 만들어냅니다. 자바스크립트 용어로 정확히 말하면 Constructor가 되겠습니다.

인스턴스 : 생성자로 만들어낸 새로운 object입니다. 인스턴스를 만들 땐 new라는 키워드를 이용합니다.

this : 새로 생산될 '인스턴스'를 지칭하는 키워드이며. 생성자 내에서 사용합니다. (onclick같은 이벤트 함수 내부에 쓰이는 this랑은 조금 다른 의미입니다)

메소드와 속성 : object 내에 저장되어있는 함수나 변수라고 생각하시면 됩니다.

실은 다른 용도도 있습니다.

객체를 만들어쓰면 사람들은 inheritance라는 장점과 encapsulation이라는 장점이 있다고 합니다. 아까 체험해본 것은 inheritance, 즉 상속기능을 구현한 것입니다.

encapsulation이라는 장점은, 여러개의 함수, 혹은 데이터를 하나로 묶을 수 있다는 것입니다.

흔히 자바스크립트 라이브러리를 만들 때 저렇게 클래스를 이용해서 비슷한 기능들을 하나로 묶게되면 사용자 입장에서 굉장히 편해집니다.

아까 그 게임을 예시로 들자면, 공격기능들은 전부 attack 이라는 Class로 묶고, 방어기능은 전부 defense 라는 Class로 묶으면 나중에 꺼내쓸 때 굉장히 편리해지겠죠.

자바스크립트 개발할 때 흔히 사용하는 Javascript DOM 을 조작하는 메소드들도 전부 객체 안에 함수를 넣어놓았기 때문에

element.style.display = 'none';

이런 식으로 점을 찍어서 여러가지 기능을 편하게 꺼내어 쓸 수 있는겁니다.

그럼 오늘 강의는 여기까지
codingapple.com