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

2
00:00:05,959 --> 00:00:08,999
"객체지향 프로그래밍"을 말이지요

3
00:00:09,546 --> 00:00:12,415
하지만 먼저 왜 유용한지부터 알아야 합니다

4
00:00:12,570 --> 00:00:16,955
그래서 객체지향 프로그램이 되면 좋을 것 같은 
프로그램을 준비했어요

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

6
00:00:25,138 --> 00:00:30,448
전에 배웠듯이 리터럴은
두 개의 중괄호로 나타내고요

7
00:00:30,448 --> 00:00:33,232
안에 속성의 이름과 값들을 적어줍니다

8
00:00:34,409 --> 00:00:39,241
두 개의 객체 리터럴하고
밑에 <i>drawWinston</i> 함수도 있습니다

9
00:00:39,241 --> 00:00:41,129
1개의 매개변수 함수지요

10
00:00:41,129 --> 00:00:47,882
매개변수를 통해 이미지를
알맞는 x좌표 y좌표에 출력합니다

11
00:00:47,882 --> 00:00:53,107
닉네임과 나이를 포함한 캡션
또한 생성합니다

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

13
00:00:58,164 --> 00:01:01,012
그래서 다음과 같이 출력됩니다

14
00:01:01,012 --> 00:01:05,527
좋네요 이제 리터럴을 보면

15
00:01:06,366 --> 00:01:11,196
뭔가 되게 비슷하다는 것을 눈치 채셨을 거예요

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

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

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

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

20
00:01:36,460 --> 00:01:42,162
여기 우리는 2개의 윈스턴의 인스턴스를
생성했어요

21
00:01:42,162 --> 00:01:48,465
윈스턴을 표현하기 위해서는
여기 십대의 윈스턴과 성인 윈스턴이 있잖아요.

22
00:01:48,465 --> 00:01:54,762
서로 서로 닮은 것들이 너무 많아요

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

24
00:02:01,295 --> 00:02:05,958
그럼 우리 모두는 우리만의 속성을 가진 인스턴스에 불과합니다

25
00:02:05,958 --> 00:02:14,948
이제 우리는 객체 지향 프로그래밍을 해볼텐데요
윈스턴 변수들을

26
00:02:14,948 --> 00:02:21,834
윈스턴 객체의 인스턴스로 표현해서
비슷한 속성을 공유하게 하려고 해요

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

28
00:02:27,974 --> 00:02:30,900
이제 변수를 만들게요

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

30
00:02:38,934 --> 00:02:42,196
함수랑 같다고 둘게요

31
00:02:42,196 --> 00:02:47,030
이 함수를 특별하게 "생성자 함수"라고 부릅니다

32
00:02:47,030 --> 00:02:52,042
왜냐하면 이 함수가 호출될 때마다
윈스턴 인스턴스가 생기니까요

33
00:02:52,042 --> 00:02:57,860
<i>teenageWinston</i>을 생성하고 싶거나
<i>adultWinston</i>을 생성하고 싶으면 호출하면 되겠죠

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

35
00:03:06,417 --> 00:03:11,324
이 경우에는 nickname, age, x, y이겠죠

36
00:03:11,324 --> 00:03:15,063
인수가 전달되고 나서 우리는 이걸로 뭔가 해야겠죠

37
00:03:15,063 --> 00:03:21,483
윈스턴 객체에 정보를 넣어주어야 합니다

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

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

40
00:03:34,921 --> 00:03:38,419
생성자로부터 전달받은 값을 넣어주어야 합니다

41
00:03:38,419 --> 00:03:44,005
<i>this.age = age</i>
<i>this.x = x</i> 그리고

42
00:03:44,005 --> 00:03:47,461
<i>this.y = y</i> 이면 되겠죠?

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

44
00:03:57,500 --> 00:04:00,327
이걸 이용해 볼게요

45
00:04:00,327 --> 00:04:05,245
<i>winstonTeen</i>을 다시 만들건데요
이번에는 <i>winstonTeen =</i>

46
00:04:05,245 --> 00:04:10,376
중괄호 대신에 <i>= new Winston</i> 이라 할게요

47
00:04:10,376 --> 00:04:13,950
"이제 새로운 윈스턴 인스턴스를 만든다"라는 뜻이예요

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

49
00:04:22,305 --> 00:04:27,502
전에 썼던 것은 지워버리고요

50
00:04:27,502 --> 00:04:31,082
이제 윈스틴이 만들어졌죠?

51
00:04:31,082 --> 00:04:35,722
이제 <i>winstonAdult = new Winston()</i>

52
00:04:35,722 --> 00:04:39,960
이름은 <i>"Mr. Winst-a-lot"</i>이고요,

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

54
00:04:47,410 --> 00:04:50,812
짜잔 제대로 작동하네요

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

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

57
00:05:05,272 --> 00:05:08,799
그리고 전달받은 속성을 생성자로 다시 대입 시켰죠

58
00:05:08,799 --> 00:05:14,379
외워야 합니다 <i>this.nickname</i>과 <i>this.age</i>에서

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

60
00:05:20,212 --> 00:05:23,103
왜냐하면 밑에 <i>drawWinston</i> 함수에서

61
00:05:23,103 --> 00:05:28,162
<i>winston</i>에 나이 속성이 있어야 하기 때문이죠

62
00:05:28,162 --> 00:05:30,894
다시 말해서, <i>this.age</i>를 안썼다면

63
00:05:30,894 --> 00:05:34,029
나이 속성이 없는 거지요
생성자로 전달 받긴 했는데

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

65
00:05:39,363 --> 00:05:41,444
여기에 덧붙여서 말하자면,

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

67
00:05:46,361 --> 00:05:50,589
"전에 했던 거랑 똑같네"

68
00:05:50,589 --> 00:05:55,996
하지만 이제 모든 윈스턴이 같은 생성자에 들어간다는 겁니다

69
00:05:55,996 --> 00:06:00,830
만약에 윈스턴에서 뭔가를 고치면

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

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

72
00:06:12,804 --> 00:06:17,281
인스턴스만의 속성에 공통적인 속성도 공유할 수 있다는 것이지요

73
00:06:17,281 --> 00:06:20,968
이것이 바로 객체 지향 프로그래밍 만의 장점이지요

74
00:06:20,968 --> 00:06:26,632
여러 종류의 객체가 있을 때 이것을 인스턴스로 만들 수 있고,

75
00:06:26,632 --> 00:06:29,925
이 객체들이 서로 같은 속성이 있다면

76
00:06:29,925 --> 00:06:35,528
뭔가가 다를 때 이 속성은 저 속성과는 다르다는 것을
쉽게 알 수 있겠죠?

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

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

79
00:06:45,829 --> 00:06:48,690
이것 말고도 좋은 점은 무척 많답니다

80
00:06:48,690 --> 00:06:51,000
다음에 만나요!