Web2 JavaScript – 30. 객체를 쓰는 방법과 읽기, 이번에는 객체를 이론적으로 알아보기 위해서 ex10. html 파일을 만들겠습니다.
우리가 지금까지 배운 정보의 양이 많아졌을 때 관련된 정보를 정리 정돈하기 위한 도구 안에 배열이 있었습니다. 배열이라는 도구는 순서에 따라 정리정돈하는 특징이 있었습니다.console을 통해 복습하는 시간을 갖겠습니다.
var coworkers= [egoing], [leezche]]라고 쓰고 Enter 키를 누른 후, 위에 있는 정보를 얻기 위해서는 coworkers[0]와 coworkers[1]를 입력하면 정보를 가져올 수 있었습니다.
배열이라는 도구는 정보를 담는 그릇이면서도 정보가 차례로 저장되는 특징이 있습니다. 순서대로 정보를 보관할 수 있는 것이 있으면 순서대로 정보를 보관할 수 있는 것이 있고 그것이 객체입니다.
아직 오브젝트라는 것을 배우지 않았지만 오브젝트는 데이터를 무작위로 집어넣은 것이 아니고 이름과 함께 넣어서 정리정돈을 하는 것입니다.
위의 사진에서 알 수 있듯이 배열은 대괄호를 사용하고 있는데 오브젝트들은 중괄호를 사용하고 있습니다. 위의 사진처럼 되어 있으면 비어있는 오브젝트가 만들어진 것입니다. 이제 객체 안에 정보를 넣겠습니다.
그냥 넣는 게 아니라 위에 이름 붙여서 넣어야 돼요 그러면 오브젝트에 정보를 넣게 되면 어떻게 꺼내오는지 알 수 있을 겁니다.
14 행을 통해 오브젝트에 저장된 정보를 불러올 수 있습니다. 먼저 .에 대한 이름은 Object Access Operator입니다. 해석을 하면 coworkers라고 하는 오브젝트에 접속해서 운영해 주는 연산자라는 의미입니다.
이렇게 코딩을 하고 웹 페이지를 새로고침을 하면 정보가 어떻게 표시되는지 알 수 있습니다. 만들어져 있는 오브젝트에서 오브젝트 데이터를 가져오는 방법을 찾았습니다. 그럼 이미 만들어져 있는 오브젝트에 정보를 추가하는 방법을 보도록 하겠습니다.
여기서 객체에 정보를 담는 줄은 16번째 행 coworkers.book keeper=”duru”;입니다. 이름 book keeper로 duru님을 넣는다는 뜻입니다. 그것을 17번째 줄을 이용해서 웹 페이지에 업로드 한 것입니다.그리고 만약 datascientist를 추가하고 싶을 때 띄어쓰기가 있어도 문법적으로 그냥 들어갈 수 없습니다. 이를 해결할 수 있는 방법은 다음과 같습니다.
18번째 행을 잘 보시면 대괄호를 이용해서 Object Access Operator 역할 대신 “을 이용해서 문자열로 이름을 지정할 수 있습니다. 그리고 정보를 호출할 때도 같은 방법으로 정보를 호출할 수 있습니다.
이번 시간에는 기억해야 할 것은 오브젝트를 만드는 방법, 오브젝트를 읽는 방법, 오브젝트에 데이터를 추가하는 방법 이렇게 세 가지를 배웠습니다.
Web2 JavaScript – 31. 오브젝트와 반복해서 문장을 지금까지 시간동안 확인 할 수 있는 것은 생성된 오브젝트에 어떤 데이터가 있는지를 다 가져와야 된다면 어떻게 할 것인가입니다. 그런 경우 반복해서 글을 쓰고 배열에서는 데이터를 읽어본 경험이 있습니다. 오브젝트에서는 어떻게 하는지 검색을 통해서 알아볼 겁니다.이 고잉님의 추천검색 키워드는 javascrip to bject iterate(= 반복, 순회하다)입니다.
잘 안 보일 수도 있는데 for… in이라는 걸 쓰라고 하시네요 이것을 사용해 보는 것을 시험해 보는 거죠.
23줄 코드가 무슨 뜻인지 해석하면 다음과 같습니다 for라고 하는 것을 사용하면 coworkers라고 하는 변수가 가리키는 오브젝트에 있는 키 값을 가지고 오는 반복문입니다. 여기서 키라는 값은 예제로 programmer, designer, book keeper, datas cientist입니다.키라는 것이 우리가 가지고 싶은 정보에 도달할 수 있는 키이기 때문에 키라고 부르는 것입니다. 배열에서는 키라는 표현을 쓰지 않고 순서대로 정리 정돈되어 있기 때문에 index라는 것을 사용했다는 차이가 있습니다.정리하면 coworkers에 있는 키를 하나하나 꺼내서 중괄호에 있는 코드를 실행하는 명령어가 바로 for의 기능입니다. 이해가 안 된다면 실행해 볼게요.
4개가 다 나오는 걸 알 수 있어요
coworkers라고 하는 오브젝트에 [key]를 넣으면 비로소 programmer가 들어가고 designer가 들어가고 book keeper, datas cientist가 들어갈 겁니다.
그래서 24번째 줄 코드를 이렇게 새로고침을 해서 실행하게 되면, 이렇게 바뀌는 것을 확인할 수 있습니다.
그 점을 이용해서 이렇게 코드를 작성하면 위와 같은 결과를 얻을 수 있고 오브젝트에 모두 확인할 수 있습니다. 이 시간을 통해 데이터를 순회하는 방법을 알아보았습니다.
Web2 JavaScript -32. 오브젝트 속성과 메서드 이번에는 오브젝트의 마지막 시간입니다. 객체에는 어떤 데이터를 가져올 수 있나요?
글자를 넣었는데 여기에다가 배열을 넣을 수 있고 숫자도 넣을 수 있어요 그리고 객체에는 함수도 담을 수 있습니다.coworkers 라고 하는 오브젝트에 showAll 이라고 하는 메서드를 추가하고 싶습니다. show All은 함수이기 때문에 이전에 배웠듯이 함수와 지정을 function(){}로 하면 OK입니다.
28행, 33행, 37행 세 종류는 다르지만 함수를 저장하는 역할을 하는 것은 동일합니다. show All 하면 모든 coworkers에 있는 각각의 데이터를 iterate하여 화면에 출력할 수 있습니다.
위와 같이 코드를 써서 cowers 오브젝트 안에 함수를 넣습니다. 그런데 여기서 일어나는 문제는 coworkers라고 하는 이름이 함수에 적혀있기 때문에 오브젝트의 이름이 바뀌게 되면 데이터를 가져올 수 없게 됩니다.이러한 경우를 대비해 다음과 같이 this로 바꾸겠습니다.
showAll이라고 하는 이 함수 안에서 함수가 소속된 오브젝트를 나타내는 약속된 기호가 this입니다.그리고 새로고침을 해도 똑같이 실행되는 것을 알 수 있습니다. coworkers라는 객체가 바뀌어도 this는 자기 자신을 가리키기 때문에 영향을 받지 않는다는 것입니다.
그리고 여기서 생기는 또 다른 문제는 showAll 함수도 coworkers 객체에 들어있는 데이터이기 때문에 웹 페이지에 표시되는 것을 알 수 있습니다. 이런 문제를 없애기 위해서는 이 for문 안에서 if문을 통해서 show All은 제거한다라고 하는 코딩을 하면 되는데 지금은 그것이 목적이 아니기 때문에 그대로 진행하겠습니다.
이렇게 해서 coworkers 객체에 소속된 변수 값으로 이렇게 함수를 지정할 수 있고, 그래서 객체에 소속된 함수를 만들 수 있습니다. 그리고 오브젝트에 소속된 함수를 메서드라고 합니다.오브젝트에 소속된 변수(ex. programmer, designer, book keeper, show All. . )를 property라고 부릅니다.우선 method와 property는 문맥적으로 같은 것을 부르는 표현이 다른 정도로 이해해 주세요.