자바스크립트(JS) 객체는 무엇이고, 안의 값에 접근하려면 어떻게 해야할까? [객체 키(key) 값과 밸류(value) 값에 접근하기]

 오늘은 자바스크립트에서 객체 : Object 에 대해서 알아보도록 하겠습니다.

 

자바스크립트에서 객체는 우리가 변수처럼 한가지 값에 지정해주는 것이 아니라, 여러가지 값을 하나의 객체 안에 지정하는 것이 가능합니다. 이 말은 곧 우리가 하나에 값에 하나를 저장하던 코드에서 벗어나 비슷한 속성의 값을 묶어서 관리해 줌으로써 더욱 코드를 깔끔하게 구성할 수 있다고 생각하셔도 됩니다. 즉, 기존의 것보다 훨씬 정돈된 코드를 구현할 수 있다는 점 입니다.

 

 위의 슬라이드가 이제 우리가 객체를 확인하고 왜 사용하는지 장점을 명확히 알 수 있는 이유입니다. 일일히 어느 객체 안에 소속되어 있는 것과 달리, 위의 예시에서는 하나하나 변수를 지정해주어야 합니다. 또한 코딩을 할 때 어떠한 그룹으로 묶어서 관리를 하는 것과, 그렇지 아니한 경우로 나뉘어지기 때문에 오히려 그룹으로 묶어서 관리하는 것이 편합니다. 그러므로, 객체의 장점을 알게되시면 당연히 ! 객체 중심적인 프로그래밍을 하게 되실겁니다 :) 

 그러면 위의 예제로 기본적인 예시를 해보겠습니다.

 

 

 

 

1. 자바스크립트 객체 지정( 객체 만들기)

 

우리는 지정해준 방식으로 객체를 한번 만들어봤습니다. challenge라는 객체 안에 여러 데이터 타입을 넣을 수 있는데요. 제가 예시를 든 것은 키(key) 값과 밸류(value) 값들을 가지고 있습니다. 그렇다면 키(key) 값은 무엇이고 밸류(value) 값은 또 어떤걸까요? 아마 파이썬이나 다른 언어를 공부해보셨다면 아시겠지만, : 앞에 있는 값들을 키 값들이라고 하고 밸류 값을 : 뒤에 있는 값으로 이야기 합니다. 사전에 있는 키(key) 값을 '검색 단어' 라고 생각하시고, 밸류(value) 값을 그 단어의 뜻이라고 생각하시면 되겠습니다.

 

지정해준 값에서 Yoo, Ha, Don 등의 값이 키(key) 값, '국민mc', '하로로' 등의 값이 밸류(value) 값이라고 생각하시면 됩니다.

 

 

2. 객체이름.키값 : 첫번째 자바스크립트 객체 접근 방법(. 점 접근법)

 

'Yoo' 와 'Don' 의 별명값(밸류 value값)을 출력해주세요

 작성해준 객체에서 밸류 값을 불러오려면 어떻게 해야할까요? 접근 방법은 간단합니다. 객체이름.키값 으로 접근하면 됩니다. 위의 예시를 토대로 한번 연습해보겠습니다.

 

결과값

 

 

 

 

3. 객체이름['키값'] : 두번째 자바스크립트 객체 접근 방법( [ ] 대괄호 접근법)

 

'Ha' 와 'Jeong' 의 별명값(밸류 value값)을 출력해주세요

 

 이번엔 작성해준 객체 밸류 값에 다른 방법으로 접근하는 방식을 배워보도록 하겠습니다. 점 표기법과는 다르게 [ ] 대괄호 안에서 접근하는 방식입니다. 이것도 마찬가지로 위의 예시로 연습해보겠습니다.

 이번엔  대괄호로 접근하는 방법을 살펴봤습니다. 아래 두개의 코드가 대괄호 접근 방법인데요! 자바스크립트 객체 접근방법의 두번째 값이므로, 이 방법도 상당히 편한 방법으로 사용할 수 있습니다 :) 

 

 

4. 객체 안의 객체 접근방법 : 첫번째 자바스크립트 객체 접근 방법( [ ] 대괄호 접근법)

 

'Ro' 와 'Park' 의 별명 값(밸류 value값)을 출력해주세요

 

 마지막으로 작성해준 객체 안의 객체 값에 접근하는 방식을 배워보도록 하겠습니다. 점 표기법과, [ ] 대괄호 표기법 모두 사용해서 접근이 가능한데요, 이것도 마찬가지로 위의 예시로 연습해보겠습니다.

 

 보시면 Ro 의 밸류값 접근할 때는 . 점표기법을 이용한 것을 볼 수 있으며, Park의 밸류 값에 접근할 때는 [ ] 대괄호 표기법을 통해 출력한 것을 볼 수 있습니다. 객체 안의 객체는 이렇게 집에 들어갈 때 아파트 -> 집문 -> 방문 으로 들어가듯이 차례대로 불러주시면 됩니다 :) 

 

 

 

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 코딩에 도움이 됐으면 좋겠습니다.

좋아요(❤) 버튼 ↙은 항상 감사합니다.

방문하신 모든 분들 좋은 하루 되세요 : )