Property - 프로퍼티, 속성

프로퍼티란 속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다.
객체는 프로퍼티로 구성된다. 프로퍼티는 "key(키)" : "value(값)" 의 형식으로 객체 안의 콤마(쉼표 ,)로 구분되어 할당된다.
Key는 속성명이라 생각해도 되고 문자열만 가능하며, 문자열이지만 따옴표가 없어도 된다.(있어도 무방. 띄어쓰기가 있는 경우는 있어야 함.)
Value는 속성값이라고도 부르며, 어떤 값이든지(문자열, 숫자, 객체, 함수 등 아무거나) 상관없다.
객체에 함수를 정의할 경우, 속성값이라 하지않고 메소드(Method)라고 부른다.
객체를 활용함에 있어서 유용하다. 특정 객체가 가지고 있는 정보를 품고 있기에 해당 객체가 가진 정보에 직접적으로 접근할 수 있게 해준다.

객체의 프로퍼티 접근

property에 접근하는 방법은 2가지가 있다.(객체명은 Namespaces처럼 동작)

변수명.a;    // 'a'
변수명['a']; // 'a'

• 대괄호([])로 접근 (브라캣 연산자)
• 점 표기법을 이용한 접근
  주로 마침표를 사용하고 대괄호는 속성명에 띄어쓰기가 들어가 있는 경우 사용한다.
  간단한 Property일 수도 있고, 배열의 일부이거나 객체의 Method를 호출할 수도 있다.

하위 Namespaces

다른 객체를 객체 멤버의 값으로 갖는 것도 가능하다.

var obj = {
  a : {
    bb: 'bbb',
    cc: 'ccc'
  }
}
obj.a.bb; // "bbb"
obj.a.cc; // "ccc"

객체의 속성 삭제

객체의 속성을 삭제하는 방법도 있다. 앞에 delete 키워드를 붙이면 된다.

var obj = {
  a : {
    bb: 'bbb',
    cc: 'ccc'
  }
}
delete obj.a.bb;
obj.a; // { cc: 'ccc' }

객체와 반복문

배열에 있는 값을 가져올 때, 객체의 속성들을 반복하여 작업할 때 사용한다.

var obj = {'prop1': 100, 'prop2': 200, 'prop3': 300 } // 변수에 객체를 만듬.
for (key in obj) {
  console.log("key : "+key+", value : "+obj[key]);
}

// 결과
// key : prop1, value : 100
// key : prop2, value : 200
// key : prop3, value : 300

객체 안의 함수

객체의 속성값으로 함수가 저장될 수 있다.
자바스크립트에서는 함수도 일종의 값이며, 변수에 저장될 수 있다.
어떤 객체의 속성으로 접근해서 사용하는 함수를 method(메소드)라고 부른다.
하나의 객체 안에 서로 관련된 데이터와 함수를 그룹핑 할 수 있는데, 이러한 프로그래밍 기법을 객체지향 프로그래밍이라고 한다.

var obj = {
  'list': {'a': 10, 'b': 60, 'c': 80},
  'show' : function(){
    for(var key in this.list){ // this[^1]
      console.log(key + ": " + this.list[key] + "<br />");
    }
  }
};
obj.show();

// 결과
// a: 10
// b: 60
// c: 80

var obj = {
  a: 1,
  b: function bb() {
    console.log(this); // obj
  },
  c: function() {
    console.log(this.a); // 1
  }
};
obj.b(); // 메소드 호출
obj.c(); // 메소드 호출

console.dir(obj.b); // bb()
console.dir(obj.c); // c()

함수와 메소드는 this 바인딩 여부의 차이점이 있다. 메소드는 this를 바인딩한다.

프로퍼티의 속성

프로퍼티는 크게 2가지 속성이 있다.

데이터 프로퍼티 (data property)

일반적으로 사용하는 프로퍼티로 값을 저장하기 위한 프로퍼티이다.(값을 가진다.)

Value는 프로퍼티의 속성값을 말하며, 단지 값을 의미할뿐 다른 기능은 없다.
Value에 대한 접근 권한자를 설정하기 위해서 Enumerable, Writable, Configurable를 이용할 수 있다.

프로퍼티가 열거할 수 있는 속성(Enumerable)이라면, for...in... 루프를 사용하여 접근할 수 있다.

접근자 프로퍼티 (accessor property)

객체가 가진 프로퍼티 값을 읽거나 쓸 때 호출하는 함수를 값 대신에 지정할 수 있는 프로퍼티이다.(값이 없다.)
접근자 프로퍼티의 본질은 함수이며, 이 함수는 값을 얻고(get) 설정(set)하는 역할을 담당한다.
외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다.

get & set 은 ES6에서 부터 나오기 시작한 문법으로 객체의 속성값에 대한 접근 권한자 역할을 할 수 있다.

객체의 프로퍼티를 객체 외부에서 직접 조작하는 것은 데이터의 유지 보수성을 해칠 수 있는 주요한 원인이 된다.

프로퍼티는 접근자 프로퍼티나 데이터 프로퍼티 중 한 종류에만 속하고 둘 다에 속할 수 없다.
get & set 자체로 writable의 역할을 가지고 있기 때문에 get & set 과 wriatable 속성을 함께 줄 수 없다.
한 프로퍼티에 get과 value를 동시에 설정하면 에러가 발생한다.

getter와 setter

접근자 프로퍼티의 메소드이다. 객체 리터럴 안에서 getter와 setter 메소드는 get과 set으로 나타낸다.

getter 매소드

{ get prop() { ... } } // prop: 프로퍼티를 가져올 함수의 이름
{ get [expression]() { ... } } // expression: ES6에서 추가, 동적으로 이름을 정의

• 객체의 특정 프로퍼티 값을 가져오는 메소드이다.
• 동적으로 계산이 필요한 프로퍼티 값을 가져와야 할 때, getter를 사용한다면 별도의 함수를 만들 필요가 없다.

setter 메소드

{ set prop(val) { ... } } // prop: 프로퍼티를 가져올 함수의 이름
{ set [expression](val) { ... } } // expression: ES6에서 추가, 동적으로 이름을 정의

• 객체의 특정 프로퍼티 값을 설정하는 메소드이다.
• setter는 프로터티 값이 변경될 때마다 함수를 실행하는데 사용한다.

getter와 setter의 사용

var obj = {
  name: "mook",
  age: 30,
  get func() {
    return console.log(this.name, this.age);
  },
  set func(val) {
    [this.name, this.age] = val.split(" ");
  }
}
obj.func; // mook 30

obj.func = "person 20";

obj.name; // person
obj.age;  // 20
obj.func; // person 20

객체엔 func이라는 가상의 프로퍼티가 만들어지고, 가상의 프로퍼티는 읽고 쓸 수 있지만 실제로는 존재하지 않는다.

• 객체를 초기화 할 때 선언 할 수 있다.
• delete를 이용해 삭제가 가능하다.
• 객체가 이미 존재 할 때, Object.efineProperty() 메소드로 정의 할 수 있다.

사용시 유의할 점

• 식별자로 숫자와 문자를 모두 사용 가능하다.

• getter는 파라미터가 없어야하고, setter는 한개의 파라미터만 가진다.

• 리터럴 객체의 같은 이름의 get, set이나 동일한 이름의 프로퍼티를 가질 수 없다.

  { get x() { ... }, get x() { ... } },
  { x : ..., get x() { ... } }
  // 불가능하다.
  
  { set x() { ... }, set x() { ... } },
  { x : ..., set x() { ... } }
  // 불가능하다.

---

🔎 참고자료 🔎
- MDN
- 생활코딩
- PoiemaWeb
- javascript info
- 코어 자바스크립트
- 러닝 자바스크립트
- 인사이드 자바스크립트