[객체] 03. 객체에서 데이터 접근하기

// 객체 (Object)
let codeit = {
 name: '코드잇',
 bornYear: 2017,
 isVeryNice: true,
 worstCourse: null,
 bestCourse: {
 	title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
 }
};

객체도 결국은 값이기 때문에 일단 객체를 다루기 위해서는 먼저 변수에 할당해 주면서 이름을 만들어 주어야 합니다.

//점 표기법(objectName.ProertyName);
console.log(codeit.bornYear); // 2017

이 상태에서 객체의 프로퍼티에 접근하는 방법은 두 가지가 있는데 첫 번째는 '점 표기법'입니다.

객체 이름 다음에 마침표를 찍고 따옴표 없이 프로퍼티 네임을 입력하는 방식입니다. 이 점 표기법은 객체의 프로퍼티에 접근하는 가장 간단하고 많이 사용되는 방식인데 한 가지 문제점은 점 표기법을 사용하면 따옴표를 생략할 수 없는 프로퍼티 네임으로는 접근할 수가 없습니다. 예를 들어 'born Year' 이 상태에서 점 표기법으로 접근하려고 하면 codeit.born 띄우고 Year라고 써야 하는데 이렇게 되면 codeit의 born이라는 부분과 Year라는 부분을 서로 다른 문장으로 해석하기 때문에 접근을 할 수가 없게 되는 겁니다.

 

이런 식으로 점 표기법으로 접근이 불가능한 상황에서는 두 번째 방법인 '대괄호 표기법'을 사용하면 됩니다. 대괄호 표기법은 객체 이름 다음에 대괄호를 열고 그 안에 프로퍼티 네임을 문자열로 작성해 주는 방식입니다. 대괄호와 따옴표를 작성하는 게 조금 번거롭긴 하지만 대괄호 표기법을 사용하면 프로퍼티 네임을 좀 더 유연하게 구성할 수 있다는 장점이 있습니다. 

//대괄호 표기법 (objectName['propertyNme'])
console.log(codeit['born Year']); // 2017

//대괄호 표기법 (objectName['propertyNme'])
console.log(codeit['born' + 'Year']); // 2017

//변수에 담긴 값 활용
let propertyName = 'name'
console.log(codeit[codeit[propertyName]]); // 코드잇

띄어쓰기나 숫자로 시작하는 프로퍼티에 접근이 가능하기도 하고 일단 객체 이름 다음에 대괄호를 열면 프로퍼티 네임을 문자열로 만들 수 있는 어떤 방법이든 사용할 수가 있습니다.

혹은 변수에 담긴 값도 활용할 수 있습니다. 프로퍼티 네임에 name이라는 문자열이 담겨있기 때문에 저장하고 출력하면 코드잇이라는 값이 잘 출력됩니다.

// 객체 안의 객체에 접근하는 방법
console.log(codeit.bestCourse.title); // 자바스크립트 프로그래밍 기초
console.log(codeit.bestCourse['title']); // 자바스크립트 프로그래밍 기초

객체 안의 객체에 접근하는 방법

객체 안의 객체는 특별한 방법 없이 프로퍼티 네임을 계속 연결해서 접근하면 됩니다. 그런데 만약 이 프로퍼티 네임이 점 표기법으로 접근할 수 없는 경우라면 대괄호 표기법을 사용해주면 됩니다.

console.log(codeit.bestCourse['teacher']); //

그런데 만약 존재하지 않는 프로퍼티에 접근하려고 하면 에러가 나는 것이 아니라  undefined가 출력이 됩니다. 

 

정리하면 객체는 변수에 담겨서 이름을 만들고 점 표기법과 대괄호 표기법  두 가지 방식으로 그 값에 접근할 수 있었습니다.