객체 프로퍼티 접근 방식

점(.) 표기법과 대괄호([]) 표기법을 사용하여 접근한다.

let objProp = 'title';

let obj = {
    title: 'react'
}

// 점 표기법
console.log(obj.title); // 'react'
// 대괄호 표기법 - 문자열 접근
console.log(obj['title']) // 'react'
// 대괄호 표기법 - 변수 접근
console.log(obj[objProp]) // 'react'

배열요소가 객체인 경우

배열 array 의 첫번째 인덱스인 요소의 title 프로퍼티에 접근하는 코드.

let objProp = 'title';
let array = [
    {title: 'react'},
    {title:'node'},
    {title: 'js'}
]

// 점 표기법
console.log(array[0].title); // 'react'
// 대괄호 표기법 - 문자열 접근
console.log(array[0]['title']) // 'react'
// 대괄호 표기법 - 변수 접근
console.log(array[0][objProp]) // 'react'

중첩 객체의 프로퍼티에 접근하는 경우

객체 obj 의 name 프로퍼티의 age 에 접근하는 코드.

let objAge = 'age';
let objName = 'name';
let obj = {
    title: 'objTitle',
    name: {
        age: '11'
    }
}

// 점 표기법
console.log(obj.name.age); // '11'
// 대괄호 표기법 - 문자열 접근
console.log(obj['name']['age']); // '11'
// 대괄호 표기법 - 변수 접근
console.log(obj[objName][objAge]); // '11'

기본적으로 점 표기법을 권장하지만 조건문 작성 혹은 기타 상황에 따라 제한이 있을 수 있다.

점 표기법은 식별자로 동작하는 한계가 있기 때문에 접근에 제한이 있을 수 있다.

const test = {
    one: {width: 12, height: 15},
    two: {width: 5, height: 2}
};
const testNumber = 'one';
...
// testNumber 가 'one' 또는 'two' 로 들어올 때, 그에 따른 style 값을 test 에서 가져오려면,
style={test.testNumber} // error
// 등등 . 뒤에는 만족스러운 값을 가져올 수 없다.

// 대괄호 표기법으로는 가능하다.
style={test[testNumber]} // width: 12, height: 15 가져옴.

대괄호 표기법은 변수로 접근을 할 때 유용하게 사용할 수 있다.