[부스트코스 서포터즈3기]Javascript객체 -순회 &프로퍼티와 메소드

들어가기 전 

______________________________________________

 

안녕하세요!! 좋은 하루 보내고 계신가요!? 

 

 

오늘은 객체 중 순회 & 프로퍼티와 메소드에 관해 이야기해보려 합니다!! 

 

 

그럼 한번 살펴보도록 하겠습니다! 

 

 

 

순회 

______________________________________________

 

먼저 학습 목표 , 핵심단어부터 살펴보도록 하겠습니다 :) 

 

 

 

이전 시간에는 반복문을 통해 배열에 있는 모든 값들을 꺼내왔었습니다.

 

 

 

순회란 이와 같이 해당 객체를 반복하며 모든 값을 가져오는 것을 이야기합니다. 

ex) for 등의 반복문이 이때 사용되겠죠!? 

 

 

이전 시간 객체를 만들고 불러오는 포스트에서 딕셔너리 구조라고 이야기했던 것이 떠오르시나요!? 

 

 

해당 강의를 통해 이러한 구조가 맞다는 것을 알게되었습니다 :) 

 

 

한번 코드를 통해 살펴볼까요!? 

 

해당 코드는 저번시간에 작성했던 코드와 이번 시간 작성한 코드를 이야기합니다. 

 

 

비교를 하기위해서 붙여서 가져와봤습니다 :) 

 

 

두 가지의 코드를 비교했을 때도 이전 시간 코드보단 훨씬 간결하다는 것이 확인되시나요!? 

 

 

이번 코드에 대해 해석하게 된다면 다음과 같습니다. 

 

 

coworkers의 범위 내 key값을 반복하는데 

 

 

key값 + ':' + coworkers[key] (객체 내에 있는 key값의 value값) + "<br>" 

 

 

key : value 이 구조로 딕셔너리가 구성되어있는데

 

 

key값을 호출하면 해당 key값에 해당되는 value 값이 출력되게 됩니다.

 

 

그렇게 되면 결과는 다음과 같음을 알 수 있습니다! 

 

 

현재 우리는 coworkers 객체를 가지고 이용했기 때문에 해당 객체 내의 모든 값들이 출력됨을 알 수 있습니다. 

 

 

 

프로퍼티 & 메소드 

______________________________________________

 

다음 프로퍼티 & 메소드의 학습 목표와 핵심 단어를 살펴보도록 하겠습니다. 

 

 

 

먼저 프로퍼티와 메소드에 대해 설명하자면 

 

 

프로퍼티는 객체 내에 있는 변수들을 의미하며 

 

 

메소드란 객체 내에 있는 함수를 의미합니다.

 

 

해당 강의에서는 객체 내 showAll()이라는 메소드를 추가하여 표현했습니다.

 

 

한번 코드를 통해 살펴보도록 하겠습니다! 

 

 

 

해당 코드를 보시게 되면 coworkers.showAll = function()을 사용하게 되며 함수로 지정했으며

 

 

해당 함수 내에서는 이전 순회 부분에서 사용하던 부분을 그대로 가져옴을 확인할 수 있습니다.

 

 

근데 이때 this가 사용된 이유는 만약 객체의 이름 등 변경이 될 경우 값을 가져올 수 없기 때문에

 

 

this를 사용해 줌으로써 값을 가져올 수 있게 만든 것입니다. 

 

 

한번 결과를 통해 살펴보겠습니다. 

 

 

결과 값을 잘 가져옴을 알 수 있는데 이때 밑 showAll 부분의 코드 부분이 전부 출력됨을 확인할 수 있습니다.

 

 

해당 부분은 if문을 이용하여 지울 수 있는데 (그 이후는 배우지 않았다는 점 :( ) 

 

 

생각해보기 

______________________________________________

 

생각해보기를 통해 배운 내용들을 다시 되짚어 보겠습니다. 

 

순회 생각해보기

프로퍼티 & 메소드 생각해보기

 

한번 고민해보시고 문제 해결해보시길 바랍니다 :) 

 

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

 

순회 생각해보기 정답

프로퍼티와 메소드

 

문제의 의도만 파악한다면 쉽게 해결할 수 있는 문제였습니다 :) 

 

 

마치며

______________________________________________

 

이번 시간까지 객체의 이론은 마무리되었습니다 :) 

 

 

어떠셨나요!?  저는 너무 재밌게 들었습니다! 

 

 

이제 마지막 단원만을 남겨두고 있는데 끝까지 파이팅!! 

 

 

다음 시간에는 Javascript 활용 부분에 대해 업로드하겠습니다! 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

www.boostcourse.org/cs124

자바스크립트의 시작