WEBVTT

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

00:00:05.959 --> 00:00:08.999
"객체지향 프로그래밍"을 말이지요

00:00:09.546 --> 00:00:12.415
하지만 먼저 왜 유용한지부터 알아야 합니다

00:00:12.570 --> 00:00:16.955
그래서 객체지향 프로그램이 되면 좋을 것 같은 
프로그램을 준비했어요

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

00:00:25.138 --> 00:00:30.448
전에 배웠듯이 리터럴은
두 개의 중괄호로 나타내고요

00:00:30.448 --> 00:00:33.232
안에 속성의 이름과 값들을 적어줍니다

00:00:34.409 --> 00:00:39.241
두 개의 객체 리터럴하고
밑에 <i>drawWinston</i> 함수도 있습니다

00:00:39.241 --> 00:00:41.129
1개의 매개변수 함수지요

00:00:41.129 --> 00:00:47.882
매개변수를 통해 이미지를
알맞는 x좌표 y좌표에 출력합니다

00:00:47.882 --> 00:00:53.107
닉네임과 나이를 포함한 캡션
또한 생성합니다

00:00:53.107 --> 00:00:58.164
그리고 밑에서 우리는 <i>drawWinston()</i>이라는 함수를
<i>teen</i>과 <i>adult</i>에 대해 호출합니다

00:00:58.164 --> 00:01:01.012
그래서 다음과 같이 출력됩니다

00:01:01.012 --> 00:01:05.527
좋네요 이제 리터럴을 보면

00:01:06.366 --> 00:01:11.196
뭔가 되게 비슷하다는 것을 눈치 채셨을 거예요

00:01:11.410 --> 00:01:17.455
서로 비슷한 속성을 가지고 있고요
둘다 <i>drawWinston()</i> 함수에 쓰입니다

00:01:17.842 --> 00:01:23.732
생각해보면, 둘 다 윈스턴의
타입을 기술하는 거죠?

00:01:24.072 --> 00:01:28.796
그리고 우리는 윈스턴을 기술하는
추상적인 타입도 생각할 수 있겠죠?

00:01:28.796 --> 00:01:36.460
모든 윈스턴은 닉네임과 나이 그리고
xy 좌표를 가지고 있어야 합니다

00:01:36.460 --> 00:01:42.162
여기 우리는 2개의 윈스턴의 인스턴스를
생성했어요

00:01:42.162 --> 00:01:48.465
윈스턴을 표현하기 위해서는
여기 십대의 윈스턴과 성인 윈스턴이 있잖아요.

00:01:48.465 --> 00:01:54.762
서로 서로 닮은 것들이 너무 많아요

00:01:54.762 --> 00:02:01.295
그렇게 생각한다면 인간, 사람이라는
추상 자료형도 생각해볼 수 있겠죠?

00:02:01.295 --> 00:02:05.958
그럼 우리 모두는 우리만의 속성을 가진 인스턴스에 불과합니다

00:02:05.958 --> 00:02:14.948
이제 우리는 객체 지향 프로그래밍을 해볼텐데요
윈스턴 변수들을

00:02:14.948 --> 00:02:21.834
윈스턴 객체의 인스턴스로 표현해서
비슷한 속성을 공유하게 하려고 해요

00:02:21.834 --> 00:02:27.974
그러기 위해서 우리는 윈스턴 추상 자료형을 정의해야 돼요

00:02:27.974 --> 00:02:30.900
이제 변수를 만들게요

00:02:30.900 --> 00:02:38.934
이 안에 자료형을 저장해야겠죠? <i>var Winston</i>이라 할게요
보통 객체 타입으로 첫문자는 대문자로 씁니다

00:02:38.934 --> 00:02:42.196
함수랑 같다고 둘게요

00:02:42.196 --> 00:02:47.030
이 함수를 특별하게 "생성자 함수"라고 부릅니다

00:02:47.030 --> 00:02:52.042
왜냐하면 이 함수가 호출될 때마다
윈스턴 인스턴스가 생기니까요

00:02:52.042 --> 00:02:57.860
<i>teenageWinston</i>을 생성하고 싶거나
<i>adultWinston</i>을 생성하고 싶으면 호출하면 되겠죠

00:02:57.860 --> 00:03:06.417
그럼 이 함수가 속성에 관한 정보를 전달 받아야만이
완벽한 윈스턴을 만들 수 있겠죠?

00:03:06.417 --> 00:03:11.324
이 경우에는 nickname, age, x, y이겠죠

00:03:11.324 --> 00:03:15.063
인수가 전달되고 나서 우리는 이걸로 뭔가 해야겠죠

00:03:15.063 --> 00:03:21.483
윈스턴 객체에 정보를 넣어주어야 합니다

00:03:21.483 --> 00:03:28.672
그래서 새로운 수식어 <i>"this"</i> 를 쓸게요
<i>"this"</i> 는 현재의 인스턴스를 의미합니다

00:03:28.672 --> 00:03:34.921
그러면 <i>this.nickname</i>, 즉 이번 객체의 닉네임 속성에는

00:03:34.921 --> 00:03:38.419
생성자로부터 전달받은 값을 넣어주어야 합니다

00:03:38.419 --> 00:03:44.005
<i>this.age = age</i>
<i>this.x = x</i> 그리고

00:03:44.005 --> 00:03:47.461
<i>this.y = y</i> 이면 되겠죠?

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

00:03:57.500 --> 00:04:00.327
이걸 이용해 볼게요

00:04:00.327 --> 00:04:05.245
<i>winstonTeen</i>을 다시 만들건데요
이번에는 <i>winstonTeen =</i>

00:04:05.245 --> 00:04:10.376
중괄호 대신에 <i>= new Winston</i> 이라 할게요

00:04:10.376 --> 00:04:13.950
"이제 새로운 윈스턴 인스턴스를 만든다"라는 뜻이예요

00:04:13.950 --> 00:04:22.305
여기에 정보를 전달해야 되므로,
<i>"Winsteen", 15, 20, 50</i> 로 쓸게요

00:04:22.305 --> 00:04:27.502
전에 썼던 것은 지워버리고요

00:04:27.502 --> 00:04:31.082
이제 윈스틴이 만들어졌죠?

00:04:31.082 --> 00:04:35.722
이제 <i>winstonAdult = new Winston()</i>

00:04:35.722 --> 00:04:39.960
이름은 <i>"Mr. Winst-a-lot"</i>이고요,

00:04:39.960 --> 00:04:47.410
<i>30, 229, 50</i>을 차례로 넣을게요
전에 리터럴은 지워버리고요

00:04:47.410 --> 00:04:50.812
짜잔 제대로 작동하네요

00:04:50.812 --> 00:04:58.094
아직까지 우리가 한 것을 정리해볼게요
우리가 만든 윈스턴 추상자료형이고요

00:04:58.094 --> 00:05:05.272
자기자신만의 속성을 가지고 새로운
윈스턴 인스턴스를 만들었어요

00:05:05.272 --> 00:05:08.799
그리고 전달받은 속성을 생성자로 다시 대입 시켰죠

00:05:08.799 --> 00:05:14.379
외워야 합니다 <i>this.nickname</i>과 <i>this.age</i>에서

00:05:14.379 --> 00:05:20.212
만약에 <i>this.age</i> 대입문을 안썼다면 "정의 안됨" 오류가 날 거예요

00:05:20.212 --> 00:05:23.103
왜냐하면 밑에 <i>drawWinston</i> 함수에서

00:05:23.103 --> 00:05:28.162
<i>winston</i>에 나이 속성이 있어야 하기 때문이죠

00:05:28.162 --> 00:05:30.894
다시 말해서, <i>this.age</i>를 안썼다면

00:05:30.894 --> 00:05:34.029
나이 속성이 없는 거지요
생성자로 전달 받긴 했는데

00:05:34.029 --> 00:05:39.363
그것으로 아무것도 안했잖아요
<i>this</i>를 이용해 객체에 대입해야 합니다.

00:05:39.363 --> 00:05:41.444
여기에 덧붙여서 말하자면,

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

00:05:46.361 --> 00:05:50.589
"전에 했던 거랑 똑같네"

00:05:50.589 --> 00:05:55.996
하지만 이제 모든 윈스턴이 같은 생성자에 들어간다는 겁니다

00:05:55.996 --> 00:06:00.830
만약에 윈스턴에서 뭔가를 고치면

00:06:00.830 --> 00:06:06.590
모든 윈스턴들이 다 고쳐집니다
예를 들어 나이 뒤에 <i>"years old"</i>라 하면

00:06:06.590 --> 00:06:12.804
여기만 바꿨는데, 모든 윈스턴 뒤에
<i>"years old"</i>가 붙어요

00:06:12.804 --> 00:06:17.281
인스턴스만의 속성에 공통적인 속성도 공유할 수 있다는 것이지요

00:06:17.281 --> 00:06:20.968
이것이 바로 객체 지향 프로그래밍 만의 장점이지요

00:06:20.968 --> 00:06:26.632
여러 종류의 객체가 있을 때 이것을 인스턴스로 만들 수 있고,

00:06:26.632 --> 00:06:29.925
이 객체들이 서로 같은 속성이 있다면

00:06:29.925 --> 00:06:35.528
뭔가가 다를 때 이 속성은 저 속성과는 다르다는 것을
쉽게 알 수 있겠죠?

00:06:35.528 --> 00:06:40.741
그게 아니라 속성이 서로 비슷하다면,
서로 공유하는 함수를 만들어

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

00:06:45.829 --> 00:06:48.690
이것 말고도 좋은 점은 무척 많답니다

00:06:48.690 --> 00:06:51.000
다음에 만나요!