< Return to Video

Intro to Objects

  • 0:00 - 0:04
    윈스턴에 대한 생생한 내용을
    알려주는 프로그램을 만들어봤어요
  • 0:04 - 0:07
    너무 많이는 말고요
    왜냐면 윈스톤도 비밀이 있거든요
  • 0:07 - 0:12
    자, 어떻게 제가 프로그램을 구성했는지 살펴봅시다
  • 0:12 - 0:15
    윈스턴에 대한 정보를 저장하기 위해 제일 위에 변수를 만들었어요
  • 0:15 - 0:20
    첫번째 줄부터 나이, 눈 색깔, 배열을 입력했어요
  • 0:20 - 0:24
    네번째 줄에는 윈스턴이 좋아하는것을,
  • 0:24 - 0:28
    다음 줄에는
  • 0:28 - 0:32
    윈스턴이 태어난 태어난 곳을 입력했어요
  • 0:32 - 0:36
    그러고나서 여기 아래에, text 구문에 명령어를 입력했어요
  • 0:36 - 0:40
    물론 배열의 각 항목에 접근해야 하겠죠
  • 0:40 - 0:43
    좋아요
  • 0:43 - 0:49
    다섯 변수는 모두 한 가지 것에 대한
    정보를 이야기하고 있어요. 바로 윈스톤입니다
  • 0:49 - 0:52
    그러나 그 변수들은 서로 따로 따로이죠
  • 0:52 - 0:56
    여러분들이 알다시피, 자바스크립트에서
  • 0:56 - 0:59
    관련된 여러가지 정보를 저장하고 싶을 때에는
  • 0:59 - 1:03
    더 좋은 방법이 있죠. 바로 '객체'입니다
  • 1:03 - 1:07
    다섯 가지 변수가 아닌
  • 1:07 - 1:12
    모든 정보를 담고있는 하나의 단일 변수를 만들 수 있어요
  • 1:12 - 1:15
    윈스턴의 정보를 가지고 만들어봅시다
  • 1:15 - 1:19
    먼저 변수를 선언하고 윈스톤이라고 부릅시다
  • 1:19 - 1:23
    먼저, 중괄호와 세미콜론을 입력합니다
  • 1:23 - 1:27
    객체를 구성했어요
  • 1:27 - 1:31
    하지만 아직 객체 안에 정보가 아무것도 없죠
  • 1:32 - 1:36
    정보를 넣으려면 속성을 추가해야 해요
  • 1:36 - 1:41
    속성은 키와 값입니다
    나이는 age:19처럼요
  • 1:41 - 1:44
    좋아요. 이번엔 눈 색깔을 주기 위해
  • 1:44 - 1:48
    콤마를 쓰고 eyes:”black”을 입력합니다
  • 1:48 - 1:53
    이제 객체 안에 두 개의 속성이 구성되었서요
  • 1:53 - 1:56
    그리고 likes 소성은 여기 것을 가져다가
  • 1:56 - 2:00
    여기에 복사할게요
  • 2:00 - 2:04
    이제 세 가지 속성이 생겼네요
  • 2:04 - 2:08
    모든 속성은 우측에 값이 표기됩니다
  • 2:08 - 2:13
    좌측에는 key가 표기됩니다
  • 2:13 - 2:16
    Key에 대해서는 자바스크립트의 변수 이름과 같은 규칙을 따릅니다
  • 2:16 - 2:20
    스페이스 없이, 모든 것이 문자로 시작합니다
  • 2:21 - 2:23
    값에 대해서는 우리가 봐왔던 그런 유형의 값입니다
  • 2:23 - 2:27
    숫자, 문자열, 배열 등이 필요로 하겠죠
  • 2:27 - 2:33
    부울 함수도 사용되고요, isCool이 참인지 거짓인지 해볼 수 있겠죠
  • 2:34 - 2:38
    사실, 값은 또다른 객체가 될 수 있어요
  • 2:38 - 2:43
    Birthcity와 BirthState는 결국 같은 것에 대한 정보이고
  • 2:43 - 2:47
    같은 위치에 존재합니다
  • 2:47 - 2:51
    그래서, 그것들을 하나의 객체로서 저장하는 게 어떨까 생각할 수 있어요
  • 2:51 - 2:55
    또다른 key인 birthplace를 입력하고 중괄호를 넣어줍니다
  • 2:55 - 2:58
    그리고 안에 city: "Mountain View" 와
  • 2:58 - 3:02
    state: "California" 를 입력할게요
  • 3:02 - 3:07
    이제 여려분은 객체 안에
  • 3:07 - 3:10
    많은 정보를 저장할 수 있게 되었어요
  • 3:11 - 3:15
    좋아요, 이제 객체 안에 윈스턴에 관련된 많은 정보를 입력할 수 있으니
  • 3:15 - 3:19
    기존에 따로 따로 되어있던 변수들을 삭제해봅시다
  • 3:19 - 3:23
    어라
  • 3:23 - 3:27
    오류 메세지 창이 떴네요
  • 3:27 - 3:31
    Text 명령어가 이전 변수를 참조하고 있기때문입니다
  • 3:31 - 3:35
    객체에 사용된 변수들을 사용하기 위해 재설정 해야 합니다
  • 3:35 - 3:38
    하나씩 하기 위해서 아래 세 줄을 없애버릴게요
  • 3:38 - 3:42
    좋아요
  • 3:42 - 3:46
    이제 WinstonAge인데요
  • 3:46 - 3:50
    그것을 Winston으로 바꿀게요
  • 3:50 - 3:54
    만약 이렇게 남겨둔다면, 객체 객체 뿐이지요
  • 3:54 - 3:57
    이렇게 하면 자바스크립트가 전체 객체를 하나의 문자열
    값으로 변환하려는 것처럼 되는겁니다.
  • 3:57 - 4:02
    그렇게 하지말고
    그 객체안의 age만 가져오고 싶은거죠
  • 4:02 - 4:06
    그래서 우리가 할 일은 점을 찍고,
  • 4:06 - 4:11
    속성의 key인 age를 쓰는 것입니다
  • 4:11 - 4:15
    우리는 이것을 "dot notation(점 표기)"라고 부릅니다
  • 4:15 - 4:18
    우리가 쓰고자 하는 객채명을 쓰고 점을 찍고 그리고 속성키를 씁니다
  • 4:18 - 4:22
    좀 더 해봅시다
  • 4:22 - 4:26
    WinstonEyes 대신에 Winston.eyes를 씁니다
  • 4:26 - 4:30
    이것도
  • 4:30 - 4:34
    winston.likes 가 되겠지요
  • 4:34 - 4:38
    Winston.likes[1]이 되고요
  • 4:38 - 4:43
    그리고 이 마지막 것은 객체 안에 객체가 있어서
  • 4:43 - 4:45
    조금 더 복잡해보일 수는 있겠네요
  • 4:45 - 4:49
    이번엔 winston의 birthplace를 바꿔봅시다
  • 4:49 - 4:53
    .city를 입력해주어야 합니다
  • 4:53 - 4:57
    자, 여기에도 한번 해볼까요
  • 4:57 - 5:02
    winston.birthplace.state
  • 5:02 - 5:06
    이제 여러분이 객체 안에 있는 정보에 접근할 수 있게 되었어요
  • 5:06 - 5:09
    좋아요
  • 5:11 - 5:14
    훌륭해요. 여러분이 보신 것처럼
  • 5:14 - 5:18
    객체는 어떤 객체에 대한 관련된 정보들을 저장하는 좋은 방법입니다
  • 5:18 - 5:21
    나중에 만들어 놓은 객체에 접근할 수도 있지요
  • 5:21 - 5:25
    계속 연습해보면, 객체가 얼마나 유용한지 알게 될거에요
Title:
Intro to Objects
Description:

more » « less
Video Language:
English
Duration:
05:26
Next Nhn edited Korean subtitles for Intro to Objects
승환 김 edited Korean subtitles for Intro to Objects
승환 김 edited Korean subtitles for Intro to Objects
승환 김 edited Korean subtitles for Intro to Objects

Korean subtitles

Revisions