Property 프로퍼티란? + 프로퍼티에 접근하는 방법

NestJS 강의를 듣던 도중 '프로퍼티'라는 단어를 듣게 되었다. 이전에도 몇 번 들어본적은 있지만..? 설명하라고 하면 정확히 설명하지도 못하고 떠오르는 이미지도 딱히 없었기 때문에 이건 모르는 개념이다! 생각하여 프로퍼티에 대해 정리하고자 한다. 

 

Property

'어떤 값' 

'객체 내부의 속성'

 

출처 https://velog.io/@kjhabc2002/Javascript-3.-%EA%B0%9D%EC%B2%B4%EC%9D%98-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

이해를 돕기 위해 위의 사진에서 코드화를 해보자면 

객체.너비

객체.높이 

객체.색상

객체.무게 이렇게 Dot Notation으로도 접할 수 있다. 

 

Property의 접근 

1) Dot Notation 

let fruits = { 
    kind1 : 'apple', 
    kind2 : 'banana', 
    kind3 : 'lemon', 
    cafe  : { 
        juice : 'fruits juice', 
        city : 'seoul' 
    }
}

console.log(fruits.kind1); 
console.log(fruits.cafe);

실행 결과 

console.log(fruits.kind1);의 결과는 예상이 갔지만, 

console.log(fruits.cafe);는 어떤 결과가 나올까 궁금했었다. 

 

 

내부에도 여러 메소드가 있었는데, 그중 'hasOwnProperty'라는 메소드를 주목하여 찾아보았다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

Object.prototype.hasOwnProperty() - JavaScript | MDN

MDN 문서에 따르면 '객체(Object)가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언(boolean)값을 반환한다'라고 한다. 

 

 

모든 객체는 hasOwnProperty를 상속하는 Object의 자식이다. 객체가 특정 프로퍼티를 자기만의 직접적인 프로퍼티로 소유하고 있는지를 판단하는데 사용한다. 

object1이라는 객체는 처음에 빈 배열 값으로 변수에 할당되었고, 그 다음에

1. obejct1 객체에

2. Dot Notation(.)으로 접근하며

3. hasOwnProperty 메소드를 이용하여

4. property1의 속성을 접근한다. 

property1은 object1이라는 객체의 속성으로 프로퍼티다. (property1이라는 직관적인 이름을 주었지만) 

 

2. Bracket Notation 

대괄호 [] 사이에 키값을 '문자열'로 넣어 접근한다. 

. 과 [] 를 이용하여 객체의 프로퍼티에 접근할 수 있는 2가지 방식을 알게 되었다.

계속 써오던 방식인데, 정확한 개념을 모르고 쓴 것 같다. 

 

참고 

https://velog.io/@kjhabc2002/Javascript-3.-%EA%B0%9D%EC%B2%B4%EC%9D%98-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95