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

[객체에서 데이터 접근]

 

자바스크립트 객체에 접근하는 방법은 크게 두가지가 있다.

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

 

1. 점 표기법 (ObjectName.PropertyName)

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

console.log(codeit.bornYear); // 2017

그러나 따옴표가 있는, 따옴표를 생략할 수 없는 프로퍼티 네임을 가진 객체에는 접근할 수 없음.

 

2. 대괄호 표기법

 

대괄호 안에 프로퍼티 네임을 작성해주는 방법으로, 어떤식으로던 작성할 수 있음.

let codeit = {
  name: '코드잇',
  'born Year': 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
};

console.log(codeit['born Year']); // 2017

let codeit = {
  name: '코드잇',
  'born Year': 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
};

console.log(codeit['born Year']); // 2017
console.log(codeit['born' + ' Year']); // 2017

let propertyName = 'name';
console.log(codeit[propertyName]); // '코드잇'

 

객체안의 객체에 접근하기

 

다음과 같이 점 표기법, 대괄호 표기법등을 이용해 객체안의 객체 값에 접근할 수 있음.

let codeit = {
  name: '코드잇',
  'born Year': 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
};

console.log(codeit.bestCourse.title); // '자바스크립트 프로그래밍 기초'
console.log(codeit.bestCourse['title']); // '자바스크립트 프로그래밍 기초'

 

객체에 없는 값에 접근할 경우, Error 가 아닌 undefined 가 출력됨.

let codeit = {
  name: '코드잇',
  'born Year': 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
};

console.log(codeit.bestCourse.teacher); // undefined