0:00:00.000,0:00:03.803
윈스턴에 대한 생생한 내용을 [br]알려주는 프로그램을 만들어봤어요

0:00:03.803,0:00:07.469
너무 많이는 말고요[br]왜냐면 윈스톤도 비밀이 있거든요[br]

0:00:07.469,0:00:11.870
자, 어떻게 제가 프로그램을 구성했는지 살펴봅시다

0:00:11.870,0:00:15.334
윈스턴에 대한 정보를 저장하기 위해 제일 위에 변수를 만들었어요

0:00:15.334,0:00:20.034
첫번째 줄부터 나이, 눈 색깔, 배열을 입력했어요

0:00:20.034,0:00:23.955
네번째 줄에는 윈스턴이 좋아하는것을,

0:00:23.955,0:00:27.907
다음 줄에는

0:00:27.907,0:00:31.566
윈스턴이 태어난 태어난 곳을 입력했어요

0:00:31.566,0:00:35.940
그러고나서 여기 아래에, text 구문에 명령어를 입력했어요

0:00:35.940,0:00:39.699
물론 배열의 각 항목에 접근해야 하겠죠

0:00:39.699,0:00:43.450
좋아요

0:00:43.450,0:00:48.636
다섯 변수는 모두 한 가지 것에 대한 [br]정보를 이야기하고 있어요. 바로 윈스톤입니다[br]

0:00:48.636,0:00:51.598
그러나 그 변수들은 서로 따로 따로이죠

0:00:51.598,0:00:55.502
여러분들이 알다시피, 자바스크립트에서

0:00:55.502,0:00:59.289
관련된 여러가지 정보를 저장하고 싶을 때에는

0:00:59.289,0:01:03.125
더 좋은 방법이 있죠. 바로 '객체'입니다

0:01:03.125,0:01:06.795
다섯 가지 변수가 아닌

0:01:06.795,0:01:11.623
모든 정보를 담고있는 하나의 단일 변수를 만들 수 있어요

0:01:11.623,0:01:15.169
윈스턴의 정보를 가지고 만들어봅시다

0:01:15.169,0:01:18.837
먼저 변수를 선언하고 윈스톤이라고 부릅시다

0:01:18.837,0:01:23.399
먼저, 중괄호와 세미콜론을 입력합니다

0:01:23.399,0:01:27.107
객체를 구성했어요

0:01:27.107,0:01:31.047
하지만 아직 객체 안에 정보가 아무것도 없죠

0:01:31.909,0:01:35.668
정보를 넣으려면 속성을 추가해야 해요

0:01:35.668,0:01:41.276
속성은 키와 값입니다[br]나이는 age:19처럼요

0:01:41.276,0:01:43.789
좋아요. 이번엔 눈 색깔을 주기 위해

0:01:43.789,0:01:48.039
콤마를 쓰고 eyes:”black”을 입력합니다

0:01:48.039,0:01:52.742
이제 객체 안에 두 개의 속성이 구성되었서요

0:01:52.742,0:01:55.607
그리고 likes 소성은 여기 것을 가져다가

0:01:55.607,0:02:00.076
여기에 복사할게요

0:02:00.076,0:02:04.000
이제 세 가지 속성이 생겼네요

0:02:04.000,0:02:07.527
모든 속성은 우측에 값이 표기됩니다

0:02:07.527,0:02:12.796
좌측에는 key가 표기됩니다

0:02:12.796,0:02:15.632
Key에 대해서는 자바스크립트의 변수 이름과 같은 규칙을 따릅니다

0:02:15.632,0:02:20.099
스페이스 없이, 모든 것이 문자로 시작합니다

0:02:20.591,0:02:22.960
값에 대해서는 우리가 봐왔던 그런 유형의 값입니다

0:02:22.960,0:02:27.124
숫자, 문자열, 배열 등이 필요로 하겠죠

0:02:27.124,0:02:33.373
부울 함수도 사용되고요, isCool이 참인지 거짓인지 해볼 수 있겠죠

0:02:34.126,0:02:38.398
사실, 값은 또다른 객체가 될 수 있어요

0:02:38.398,0:02:42.709
Birthcity와 BirthState는 결국 같은 것에 대한 정보이고

0:02:42.709,0:02:46.616
같은 위치에 존재합니다

0:02:46.616,0:02:51.042
그래서, 그것들을 하나의 객체로서 저장하는 게 어떨까 생각할 수 있어요

0:02:51.042,0:02:54.836
또다른 key인 birthplace를 입력하고 중괄호를 넣어줍니다

0:02:54.836,0:02:58.376
그리고 안에 city: "Mountain View" 와

0:02:58.376,0:03:02.287
state: "California" 를 입력할게요

0:03:02.287,0:03:06.766
이제 여려분은 객체 안에

0:03:06.766,0:03:10.480
많은 정보를 저장할 수 있게 되었어요

0:03:11.033,0:03:15.459
좋아요, 이제 객체 안에 윈스턴에 관련된 많은 정보를 입력할 수 있으니

0:03:15.459,0:03:18.783
기존에 따로 따로 되어있던 변수들을 삭제해봅시다

0:03:18.783,0:03:23.066
어라

0:03:23.066,0:03:27.039
오류 메세지 창이 떴네요

0:03:27.039,0:03:30.739
Text 명령어가 이전 변수를 참조하고 있기때문입니다

0:03:30.739,0:03:34.502
객체에 사용된 변수들을 사용하기 위해 재설정 해야 합니다

0:03:34.502,0:03:38.218
하나씩 하기 위해서 아래 세 줄을 없애버릴게요

0:03:38.218,0:03:41.872
좋아요

0:03:41.872,0:03:46.396
이제 WinstonAge인데요

0:03:46.396,0:03:50.293
그것을 Winston으로 바꿀게요

0:03:50.293,0:03:53.834
만약 이렇게 남겨둔다면, 객체 객체 뿐이지요

0:03:53.834,0:03:57.369
이렇게 하면 자바스크립트가 전체 객체를 하나의 문자열[br]값으로 변환하려는 것처럼 되는겁니다.

0:03:57.369,0:04:02.109
그렇게 하지말고 [br]그 객체안의 age만 가져오고 싶은거죠

0:04:02.109,0:04:06.134
그래서 우리가 할 일은 점을 찍고,

0:04:06.134,0:04:11.063
속성의 key인 age를 쓰는 것입니다

0:04:11.063,0:04:14.897
우리는 이것을 "dot notation(점 표기)"라고 부릅니다

0:04:14.897,0:04:18.284
우리가 쓰고자 하는 객채명을 쓰고 점을 찍고 그리고 속성키를 씁니다

0:04:18.284,0:04:21.791
좀 더 해봅시다

0:04:21.791,0:04:26.244
WinstonEyes 대신에 Winston.eyes를 씁니다

0:04:26.244,0:04:29.877
이것도

0:04:29.877,0:04:34.074
winston.likes 가 되겠지요

0:04:34.074,0:04:37.741
Winston.likes[1]이 되고요

0:04:37.741,0:04:42.501
그리고 이 마지막 것은 객체 안에 객체가 있어서

0:04:42.501,0:04:45.451
조금 더 복잡해보일 수는 있겠네요

0:04:45.451,0:04:48.784
이번엔 winston의 birthplace를 바꿔봅시다

0:04:48.784,0:04:53.288
.city를 입력해주어야 합니다

0:04:53.288,0:04:57.455
자, 여기에도 한번 해볼까요

0:04:57.455,0:05:01.572
winston.birthplace.state

0:05:01.572,0:05:05.791
이제 여러분이 객체 안에 있는 정보에 접근할 수 있게 되었어요

0:05:05.791,0:05:09.416
좋아요

0:05:10.863,0:05:13.919
훌륭해요. 여러분이 보신 것처럼

0:05:13.919,0:05:17.597
객체는 어떤 객체에 대한 관련된 정보들을 저장하는 좋은 방법입니다

0:05:17.597,0:05:21.406
나중에 만들어 놓은 객체에 접근할 수도 있지요

0:05:21.406,0:05:25.406
계속 연습해보면, 객체가 얼마나 유용한지 알게 될거에요