1
00:00:00,000 --> 00:00:03,803
윈스턴에 대한 생생한 내용을 
알려주는 프로그램을 만들어봤어요

2
00:00:03,803 --> 00:00:07,469
너무 많이는 말고요
왜냐면 윈스톤도 비밀이 있거든요


3
00:00:07,469 --> 00:00:11,870
자, 어떻게 제가 프로그램을 구성했는지 살펴봅시다

4
00:00:11,870 --> 00:00:15,334
윈스턴에 대한 정보를 저장하기 위해 제일 위에 변수를 만들었어요

5
00:00:15,334 --> 00:00:20,034
첫번째 줄부터 나이, 눈 색깔, 배열을 입력했어요

6
00:00:20,034 --> 00:00:23,955
네번째 줄에는 윈스턴이 좋아하는것을,

7
00:00:23,955 --> 00:00:27,907
다음 줄에는

8
00:00:27,907 --> 00:00:31,566
윈스턴이 태어난 태어난 곳을 입력했어요

9
00:00:31,566 --> 00:00:35,940
그러고나서 여기 아래에, text 구문에 명령어를 입력했어요

10
00:00:35,940 --> 00:00:39,699
물론 배열의 각 항목에 접근해야 하겠죠

11
00:00:39,699 --> 00:00:43,450
좋아요

12
00:00:43,450 --> 00:00:48,636
다섯 변수는 모두 한 가지 것에 대한 
정보를 이야기하고 있어요. 바로 윈스톤입니다


13
00:00:48,636 --> 00:00:51,598
그러나 그 변수들은 서로 따로 따로이죠

14
00:00:51,598 --> 00:00:55,502
여러분들이 알다시피, 자바스크립트에서

15
00:00:55,502 --> 00:00:59,289
관련된 여러가지 정보를 저장하고 싶을 때에는

16
00:00:59,289 --> 00:01:03,125
더 좋은 방법이 있죠. 바로 '객체'입니다

17
00:01:03,125 --> 00:01:06,795
다섯 가지 변수가 아닌

18
00:01:06,795 --> 00:01:11,623
모든 정보를 담고있는 하나의 단일 변수를 만들 수 있어요

19
00:01:11,623 --> 00:01:15,169
윈스턴의 정보를 가지고 만들어봅시다

20
00:01:15,169 --> 00:01:18,837
먼저 변수를 선언하고 윈스톤이라고 부릅시다

21
00:01:18,837 --> 00:01:23,399
먼저, 중괄호와 세미콜론을 입력합니다

22
00:01:23,399 --> 00:01:27,107
객체를 구성했어요

23
00:01:27,107 --> 00:01:31,047
하지만 아직 객체 안에 정보가 아무것도 없죠

24
00:01:31,909 --> 00:01:35,668
정보를 넣으려면 속성을 추가해야 해요

25
00:01:35,668 --> 00:01:41,276
속성은 키와 값입니다
나이는 age:19처럼요

26
00:01:41,276 --> 00:01:43,789
좋아요. 이번엔 눈 색깔을 주기 위해

27
00:01:43,789 --> 00:01:48,039
콤마를 쓰고 eyes:”black”을 입력합니다

28
00:01:48,039 --> 00:01:52,742
이제 객체 안에 두 개의 속성이 구성되었서요

29
00:01:52,742 --> 00:01:55,607
그리고 likes 소성은 여기 것을 가져다가

30
00:01:55,607 --> 00:02:00,076
여기에 복사할게요

31
00:02:00,076 --> 00:02:04,000
이제 세 가지 속성이 생겼네요

32
00:02:04,000 --> 00:02:07,527
모든 속성은 우측에 값이 표기됩니다

33
00:02:07,527 --> 00:02:12,796
좌측에는 key가 표기됩니다

34
00:02:12,796 --> 00:02:15,632
Key에 대해서는 자바스크립트의 변수 이름과 같은 규칙을 따릅니다

35
00:02:15,632 --> 00:02:20,099
스페이스 없이, 모든 것이 문자로 시작합니다

36
00:02:20,591 --> 00:02:22,960
값에 대해서는 우리가 봐왔던 그런 유형의 값입니다

37
00:02:22,960 --> 00:02:27,124
숫자, 문자열, 배열 등이 필요로 하겠죠

38
00:02:27,124 --> 00:02:33,373
부울 함수도 사용되고요, isCool이 참인지 거짓인지 해볼 수 있겠죠

39
00:02:34,126 --> 00:02:38,398
사실, 값은 또다른 객체가 될 수 있어요

40
00:02:38,398 --> 00:02:42,709
Birthcity와 BirthState는 결국 같은 것에 대한 정보이고

41
00:02:42,709 --> 00:02:46,616
같은 위치에 존재합니다

42
00:02:46,616 --> 00:02:51,042
그래서, 그것들을 하나의 객체로서 저장하는 게 어떨까 생각할 수 있어요

43
00:02:51,042 --> 00:02:54,836
또다른 key인 birthplace를 입력하고 중괄호를 넣어줍니다

44
00:02:54,836 --> 00:02:58,376
그리고 안에 city: "Mountain View" 와

45
00:02:58,376 --> 00:03:02,287
state: "California" 를 입력할게요

46
00:03:02,287 --> 00:03:06,766
이제 여려분은 객체 안에

47
00:03:06,766 --> 00:03:10,480
많은 정보를 저장할 수 있게 되었어요

48
00:03:11,033 --> 00:03:15,459
좋아요, 이제 객체 안에 윈스턴에 관련된 많은 정보를 입력할 수 있으니

49
00:03:15,459 --> 00:03:18,783
기존에 따로 따로 되어있던 변수들을 삭제해봅시다

50
00:03:18,783 --> 00:03:23,066
어라

51
00:03:23,066 --> 00:03:27,039
오류 메세지 창이 떴네요

52
00:03:27,039 --> 00:03:30,739
Text 명령어가 이전 변수를 참조하고 있기때문입니다

53
00:03:30,739 --> 00:03:34,502
객체에 사용된 변수들을 사용하기 위해 재설정 해야 합니다

54
00:03:34,502 --> 00:03:38,218
하나씩 하기 위해서 아래 세 줄을 없애버릴게요

55
00:03:38,218 --> 00:03:41,872
좋아요

56
00:03:41,872 --> 00:03:46,396
이제 WinstonAge인데요

57
00:03:46,396 --> 00:03:50,293
그것을 Winston으로 바꿀게요

58
00:03:50,293 --> 00:03:53,834
만약 이렇게 남겨둔다면, 객체 객체 뿐이지요

59
00:03:53,834 --> 00:03:57,369
이렇게 하면 자바스크립트가 전체 객체를 하나의 문자열
값으로 변환하려는 것처럼 되는겁니다.

60
00:03:57,369 --> 00:04:02,109
그렇게 하지말고 
그 객체안의 age만 가져오고 싶은거죠

61
00:04:02,109 --> 00:04:06,134
그래서 우리가 할 일은 점을 찍고,

62
00:04:06,134 --> 00:04:11,063
속성의 key인 age를 쓰는 것입니다

63
00:04:11,063 --> 00:04:14,897
우리는 이것을 "dot notation(점 표기)"라고 부릅니다

64
00:04:14,897 --> 00:04:18,284
우리가 쓰고자 하는 객채명을 쓰고 점을 찍고 그리고 속성키를 씁니다

65
00:04:18,284 --> 00:04:21,791
좀 더 해봅시다

66
00:04:21,791 --> 00:04:26,244
WinstonEyes 대신에 Winston.eyes를 씁니다

67
00:04:26,244 --> 00:04:29,877
이것도

68
00:04:29,877 --> 00:04:34,074
winston.likes 가 되겠지요

69
00:04:34,074 --> 00:04:37,741
Winston.likes[1]이 되고요

70
00:04:37,741 --> 00:04:42,501
그리고 이 마지막 것은 객체 안에 객체가 있어서

71
00:04:42,501 --> 00:04:45,451
조금 더 복잡해보일 수는 있겠네요

72
00:04:45,451 --> 00:04:48,784
이번엔 winston의 birthplace를 바꿔봅시다

73
00:04:48,784 --> 00:04:53,288
.city를 입력해주어야 합니다

74
00:04:53,288 --> 00:04:57,455
자, 여기에도 한번 해볼까요

75
00:04:57,455 --> 00:05:01,572
winston.birthplace.state

76
00:05:01,572 --> 00:05:05,791
이제 여러분이 객체 안에 있는 정보에 접근할 수 있게 되었어요

77
00:05:05,791 --> 00:05:09,416
좋아요

78
00:05:10,863 --> 00:05:13,919
훌륭해요. 여러분이 보신 것처럼

79
00:05:13,919 --> 00:05:17,597
객체는 어떤 객체에 대한 관련된 정보들을 저장하는 좋은 방법입니다

80
00:05:17,597 --> 00:05:21,406
나중에 만들어 놓은 객체에 접근할 수도 있지요

81
00:05:21,406 --> 00:05:25,406
계속 연습해보면, 객체가 얼마나 유용한지 알게 될거에요