Object Types (Video Version)

이제 자바스크립트의 기초를 모두 다졌으니
제가 이것을 활용한 멋진 것들을 소개할게요

"객체지향 프로그래밍"을 말이지요

하지만 먼저 왜 유용한지부터 알아야 합니다

그래서 객체지향 프로그램이 되면 좋을 것 같은
프로그램을 준비했어요

시작하기 되게 좋은 프로그램이예요
간단한 리터럴을 저장하는 두 개의 변수가 있어요

전에 배웠듯이 리터럴은
두 개의 중괄호로 나타내고요

안에 속성의 이름과 값들을 적어줍니다

두 개의 객체 리터럴하고
밑에 drawWinston 함수도 있습니다

1개의 매개변수 함수지요

매개변수를 통해 이미지를
알맞는 x좌표 y좌표에 출력합니다

닉네임과 나이를 포함한 캡션
또한 생성합니다

그리고 밑에서 우리는 drawWinston()이라는 함수를
teen과 adult에 대해 호출합니다

그래서 다음과 같이 출력됩니다

좋네요 이제 리터럴을 보면

뭔가 되게 비슷하다는 것을 눈치 채셨을 거예요

서로 비슷한 속성을 가지고 있고요
둘다 drawWinston() 함수에 쓰입니다

생각해보면, 둘 다 윈스턴의
타입을 기술하는 거죠?

그리고 우리는 윈스턴을 기술하는
추상적인 타입도 생각할 수 있겠죠?

모든 윈스턴은 닉네임과 나이 그리고
xy 좌표를 가지고 있어야 합니다

여기 우리는 2개의 윈스턴의 인스턴스를
생성했어요

윈스턴을 표현하기 위해서는
여기 십대의 윈스턴과 성인 윈스턴이 있잖아요.

서로 서로 닮은 것들이 너무 많아요

그렇게 생각한다면 인간, 사람이라는
추상 자료형도 생각해볼 수 있겠죠?

그럼 우리 모두는 우리만의 속성을 가진 인스턴스에 불과합니다

이제 우리는 객체 지향 프로그래밍을 해볼텐데요
윈스턴 변수들을

윈스턴 객체의 인스턴스로 표현해서
비슷한 속성을 공유하게 하려고 해요

그러기 위해서 우리는 윈스턴 추상 자료형을 정의해야 돼요

이제 변수를 만들게요

이 안에 자료형을 저장해야겠죠? var Winston이라 할게요
보통 객체 타입으로 첫문자는 대문자로 씁니다

함수랑 같다고 둘게요

이 함수를 특별하게 "생성자 함수"라고 부릅니다

왜냐하면 이 함수가 호출될 때마다
윈스턴 인스턴스가 생기니까요

teenageWinston을 생성하고 싶거나
adultWinston을 생성하고 싶으면 호출하면 되겠죠

그럼 이 함수가 속성에 관한 정보를 전달 받아야만이
완벽한 윈스턴을 만들 수 있겠죠?

이 경우에는 nickname, age, x, y이겠죠

인수가 전달되고 나서 우리는 이걸로 뭔가 해야겠죠

윈스턴 객체에 정보를 넣어주어야 합니다

그래서 새로운 수식어 "this" 를 쓸게요
"this" 는 현재의 인스턴스를 의미합니다

그러면 this.nickname, 즉 이번 객체의 닉네임 속성에는

생성자로부터 전달받은 값을 넣어주어야 합니다

this.age = age
this.x = x 그리고

this.y = y 이면 되겠죠?

그럼 우리는 윈스턴이라고 부르는 추상 자료형을 만들었고요
이 자료형은 새로운 윈스턴을 만들기 위한 생성자가 있어요

이걸 이용해 볼게요

winstonTeen을 다시 만들건데요
이번에는 winstonTeen =

중괄호 대신에 = new Winston 이라 할게요

"이제 새로운 윈스턴 인스턴스를 만든다"라는 뜻이예요

여기에 정보를 전달해야 되므로,
"Winsteen", 15, 20, 50 로 쓸게요

전에 썼던 것은 지워버리고요

이제 윈스틴이 만들어졌죠?

이제 winstonAdult = new Winston()

이름은 "Mr. Winst-a-lot"이고요,

30, 229, 50을 차례로 넣을게요
전에 리터럴은 지워버리고요

짜잔 제대로 작동하네요

아직까지 우리가 한 것을 정리해볼게요
우리가 만든 윈스턴 추상자료형이고요

자기자신만의 속성을 가지고 새로운
윈스턴 인스턴스를 만들었어요

그리고 전달받은 속성을 생성자로 다시 대입 시켰죠

외워야 합니다 this.nickname과 this.age에서

만약에 this.age 대입문을 안썼다면 "정의 안됨" 오류가 날 거예요

왜냐하면 밑에 drawWinston 함수에서

winston에 나이 속성이 있어야 하기 때문이죠

다시 말해서, this.age를 안썼다면

나이 속성이 없는 거지요
생성자로 전달 받긴 했는데

그것으로 아무것도 안했잖아요
this를 이용해 객체에 대입해야 합니다.

여기에 덧붙여서 말하자면,

여러분은 아마 이렇게 생각할지도 몰라요
"코드가 작동하는 군. 그냥 멋지네"

"전에 했던 거랑 똑같네"

하지만 이제 모든 윈스턴이 같은 생성자에 들어간다는 겁니다

만약에 윈스턴에서 뭔가를 고치면

모든 윈스턴들이 다 고쳐집니다
예를 들어 나이 뒤에 "years old"라 하면

여기만 바꿨는데, 모든 윈스턴 뒤에
"years old"가 붙어요

인스턴스만의 속성에 공통적인 속성도 공유할 수 있다는 것이지요

이것이 바로 객체 지향 프로그래밍 만의 장점이지요

여러 종류의 객체가 있을 때 이것을 인스턴스로 만들 수 있고,

이 객체들이 서로 같은 속성이 있다면

뭔가가 다를 때 이 속성은 저 속성과는 다르다는 것을
쉽게 알 수 있겠죠?

그게 아니라 속성이 서로 비슷하다면,
서로 공유하는 함수를 만들어

비슷하게 이용하면 될 것입니다
이것이 바로 객체지향 프로그래밍의 장점의 일부고요

이것 말고도 좋은 점은 무척 많답니다

다음에 만나요!