(23) JavaScript - 객체 / 객체에서 데이터 접근

객체를 생성했으니 이제 어떻게 다루는지 자세히 살펴보자면..

객체도 결국 값이기 때문에 객체를 다루기 위해서는 ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

먼저 변수에 할당해 주면서 이름을 만들어 줘야한다.

        let exp = {
        Name : '섭이',
        Year : 2024,
        areYouLame: true,
        goodDay: null,
        bestFace: {
            title:'차은우는 사람일까 신일까',
        }
    }

▲ 변수 'exp'를 생성하고..

객체의 프로퍼티에 접근하기 위한 2가지 방법이 있다.

 

객체에서 데이터 접근하기

▷ 점 표기 법 (objectName.propertyName)

점 표기법은 객체의 프로퍼티에 접근하는 가장 간단하고 많이 사용되는 방식이다.

    //점 표기 법 (objectName.propertyName)
    console.log(exp.Year);

▲ 객체 이름 다음에 마침표를 찍은 다음 따옴표 없이 프로퍼티 네임을 입력한다.

실행 해보면 Year 값이 잘 출력된다.

 

한가지 문제점은 점 표기법을 사용하면 따옴표를 생략할 수 없는 프로퍼티 네임으로 접근할 수 없다.

 

이런 식으로 점 표기법으로 접근이 불가능한 상황에서는

두 번째 방법인 '대괄호 표기법'을 사용한다.

 

▷ 대괄호 표기법 (objectName['propertyName'])

대괄호 표기법은 객체이름 다음에 대괄호를 열고 그 안에 프로퍼티 네임을 문자열로 작성한다.

// 대괄호 표기법 (objectName['propertyName'])
console.log(exp['good Day']);

▲ 대괄호 표기법을 사용하면 프로퍼티 네임을 좀 더 유연하게 구성할 수 있다.

띄어쓰기나 숫자로 시작하는 프로퍼티에 접근이 가능하고

객체 이름 다음에 대괄호를 열면 프로퍼티 네임을 문자열로 만들 수있는 어떤 방법이든 사용가능하다.

console.log(exp['good' +' Day']);

 

또는

    let propertyName = 'Name'
    console.log(exp[propertyName]);

▲ 이렇게 변수에 담긴 값도 활용할 수가 있다.

프로퍼티 네임에 Name이라는 문자열이 담겨 있기 때문에 'exp'의 'Name'이라는 프로퍼티에 접근이 가능하다.

한번 실행해보면 'good Day' 의 null 값과 '섭이'가 잘 출력이 된 것을 볼 수있다.

---

위에서 객체 내부에 있는 값에 접근하는 방법을 적어봤는데  

이번에는 객체 안의 객체에 접근해보자면..

객체 안의 객체는 특별한 방법 없이 프로퍼티 네임을 계속 연결해서 접근한다.

 

▷ 객체 안의 객체 접근법

    //객체 안의 객체 표기법
    console.log(exp.bestFace.title);

 ▲ 위와 같이 작성하여

exp라는 객체의 bestFace라는 프로퍼티의 title이라는 프로퍼티로 접근한다. 

그런데 만약에 프로퍼티 네임이 점 표기법으로 접근할 수 없는 경우라면 '대괄호 표기법'을 사용하면 된다. ▼

//객체 안의 객체 표기법 (대괄호 표기법)
    console.log(exp.bestFace['title']);

 

이렇게 프로퍼티 네임의 형태에 따라서 적절한 방식을 잘 활용하면 된다.

---

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

--

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

 

▼ 존재하지 않는 프로퍼티에 접근할 경우

    //존재하지 않는 프로퍼티에 접근하기
    console.log(exp.bestFace['content']);

 

존재하지 않는 프로퍼티에 접근하려고 하면 결과값은 당연히 'undefined' 이다.

간단하지만 기본적인 개념이기에 잊지 않는 것이 좋다.

---

 

정리하자면..

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

 

 

---

★GitHub 주소 (객체에서 데이터 접근 방식)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/2.%EA%B0%9D%EC%B2%B4%EC%97%90%EC%84%9C%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%A0%91%EA%B7%BC.html

JavaScript_soloPlay/Basic/8-객체/2.객체에서데이터접근.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (객체에서 데이터 접근 방식 활용)

https://purrfect-gargoyle-935.notion.site/10de9530b3e18079b6a4f1d64ce9abf4?pvs=4

객체를 활용하여 문자열 출력하기 | Notion