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