JavaScript 프로퍼티

안녕하세요. 오늘은 자바 스크립트의 Property에 대해서 알아보겠습니다.

C++의 멤버 변수라고 생각하시면 될텐데요,

그러나 C++와 다르게 프로퍼티 또한 객체로서 따로 정의하지 않아도 갖는 속성들이 있어서
자바스크립트의 프로퍼티는 어떤 특징들이 있는지 한 번 정리해보려고 합니다.

1. 프로퍼티 개념

프로퍼티(Property) 란?

객체의 속성을 정의하는 변수입니다.

객체 지향 스크립트 언어인 자바 스크립트에 없어서는 안 될 존재라 할 수 있습니다.

프로퍼티의 예시

1. '사람' 이라는 객체에 '나이'라는 정보가 저장 돼있다면, '나이'는 '사람' 객체의 프로퍼티가 된다.

2. C++ 에서 class의 멤버 변수와 동일한 개념

우리가 어떤 사물을 설명하려고 하면 그에 대표되는 특징을 이야기 해야 알 수 있죠.

객체에도 그런 속성들을 저장하게 되는데 그 속성을 저장하는 변수를 프로퍼티(Propoerty)라고 합니다.

2. 프로퍼티의 속성

위 내용은 너무나 당연한 이야기들이었죠?

이제 본론으로 들어가서, 자바 스크립트에서 프로퍼티는 두 가지 속성을 갖고 있습니다.

1. Data Property

값에 자체에 대한 속성

2. Access Property

값에 접근성에 대한 속성

둘이 똑같은 거 아닌가..? 라고 생각되실 수 있는데 그것은 지극히 정상입니다.

아마 Data, Acess 프로퍼티를 구체적으로 살펴보면 조금 어떤 느낌인지 감이 오실 겁니다.

각 프로퍼티에 대한 설명은 밑에서 상세히 말씀드리겠습니다!

3. 데이터 프로퍼티 (Data Property)

말 그대로 값에 대한 속성을 정의합니다.

1. value : 프로퍼티에 저장된 실제 값 (JS의 모든 자료형이 가능하다.)
2. writable : 'value' 의 변경 가능 여부
3. enumerable : 연속 접근 가능 여부 (for-in 등의 반복문을 통해 객체를 순회할 때 현재 프로퍼티의 노출 여부)
4. configurable : 'value'의 변경을 포함한 삭제 및 enumerable 가능 여부

여기서 헷갈릴 수 있는 writable과 configurable에 대해 말씀드리자면!

writable vs configurable

쉽게 생각해서

writable은 value만을 위해 존재하는 값, value의 수정 가능 여부를 나타 냄

반면

configurable은 프로퍼티의 수정 가능 여부를 나타 냄

예를 들어

let foo = {} // 객체를 하나 만들고

Object.defineProperty(foo, 'name', { // JS에서 프로퍼티를 정의하는 하나의 방법입니다.
    configurable: false              // configurable은 원래 default가 false지만 임의로 적어놓겠습니다.
});

다음과 같이 foo 객체에 name이라는 프로퍼티를 정의하고, configurable을 false로 준다면,

이후로는 name 프로퍼티의 삭제는 당연히 안 되고 defineProperty로 재정의하는 것 마저 불가능해집니다.

configurable은 default 값이 false 이므로
어떤 객체에 configurable : true 라는 표시가 없다면, 무조건 있는 그대로 사용하셔야 한다는 사실!

기억하시기 바랍니다.

4. 접근자 프로퍼티 (Access property)

1. get 접근자 : value를 가져올 때 불리는 함수
2. set 접근자 : value에 값을 쓸 때 불리는 함수
3. enumerable : 위에랑
4. configurable : 똑같음 ㅋ

이건 말로만 해서는 도저히 이해할 수 없으니.. 예제와 함께 보시죠!

접근자 프로퍼티 실습

function Man( name, age ) {    // 생성자 함수를 하나 만들고
    let _name = name;
    let _age = age;

Object.defineProperty(this, 'name', { // get set 접근자를 정의해준다.
    get : function() {
           console.log("가져오세요");
           return name;
    },
    set : function(val) {
           console.log("세팅해주세요");
           name = val;
    }
});

}

위 코드를 F12를 눌러 나오는 개발자 도구 콘솔에 붙여넣기 후 한 번 따라해보세요!

1. Man 객체 생성

$ let boo = new Man('Grandpa', 100);

2. 프로퍼티의 값을 가져와서 get 함수가 불리면서 "가져오세요" 로그가 출력되는지 확인한다.

$ boo.name

3. 프로퍼티의 set 함수가 불리면서 "세팅해주세요" 로그가 출력되는지 확인한다.

$ boo.name = 'Roo'

4. 프로퍼티가 정상적으로 세팅되어 'Roo'이 출력되는지 확인한다.

$ boo.name

이처럼 JS에는 프로퍼티에 접근할 때에 불리는 함수를 별도로 정의할 수도 있습니다.

5. 요약

오늘 내용을 요약해보면,

1. 프로퍼티 = 멤버 변수

2. 프로퍼티 속성 두 가지 (Data, Access)

3. Data property는 값에 대한 속성을 정의할 수 있다.

4. Access property는 접근에 대한 속성을 정의할 수 있다.

가 되겠습니다!

C++ 같은 언어와 다르게 많은 기능들을 제공하기 위해 프로퍼티가 미리 저런 속성들을 갖고있다는 것이 흥미롭네요!

모르고 보면 어렵지만, 알고 보면 보이는 신기한 속성들이어서 따로 정리 해봤습니다.

혹시 추가가 필요한 내용이 있다면 댓글 환영입니다!