[JavaScript] JS의 프로퍼티(property) / instance 프로퍼티, static 프로퍼티

JS를 공부하다보면 자주 만날 수 있는 키워드인 '프로퍼티'에 대해서 정확하게 공부하고 기록하고자 한다.

 

✅ JS에서 프로퍼티란 무엇일까?

프로퍼티- 다른 값 ( 일반적으로 object )과 연관되어 있는 특정한 값

 

예를 들어 아래의 코드에서 str.length 는 문자열의 length 프로퍼티이다.

문자열에는 length라는 property가 포함되어 있는데 이 프로퍼티는 문자열 안에 있는 문자의 양을 정수로 나타낸 값을 담고 있다.

const str = '문자수';

//str문자열 객체의 length 프로퍼티를 출력
console.log(str.length);

//출력된 값
//>3
[출처] [JavaScript] property란 무엇인가?|작성자 AIdev

 

< MDN에서 정의하고 있는 Property >

Property(JavaScript)
property는 해당 object의 특징입니다. property는 보통 데이터 구조와 연관된 속성을 나타냅니다. property에는 2가지 종류가 있습니다.
property는 이름(string 이나 symbol)과 값(원시함수(primitive), 메서드(method) 또는 객체 참조(object reference))을 가지고 있습니다.

​

 

보통 "프로퍼티가 object를 가지고 있다"라는 것은 "property가 object reference"를 가지고 있다는 것을 줄여서 말한 것이다.  property의 값을 변경할 때 기존에 참조된 object는 그대로 남아있기 때문에 이걸 구분하는 것이 중요.

 

---

따라서 아래의 코드에서 

name, age, occupation 등의 값은 당연히 프로퍼티이다.

 

var person = {
 name: "Jason",
 age: 25,
 occupation: "Student",
 getPersonProfile: function() {
  return "Name : " + this.name +
   "\nAge : " + this.age +
   "\nOccupation : " + this.occupation;
 }
};
[출처] [JavaScript] property란 무엇인가?|작성자 AIdev

getPersonProfile 는 객체 안에서 object와 연결된 값을 가지고 있으며 함수이다.

object 안에 속해있고 어떤 기능을 정의하고 있는 함수이기에 '메서드 method'에 속할까?

JS에서는 함수 또한 '값'으로 취급하기에 값을 담고 있으니 프로퍼티에도 속할 수 있다.

 

따라서 getPersonProfile는 프로퍼티로도, 메서드로도 볼 수 있다. (일반적으로 함수를 담은 프로퍼티를 메서드라고 부른다.)

 

 

 

✅ 인스턴스 프로퍼티 vs 정적 프로퍼티 

JS에서 class 문법을 사용할 때 

class문법을 이용해 새롭게 선언된 객체를 '인스턴스'라고 한다. 

 

이 인스턴스 내에서만 사용할 수 있는 프로퍼티가 '인스턴스 프로퍼티'이다.

따라서 인스턴스 프로퍼티는 클래스 자체로 접근할 수는 없다. 

class Employee {
   constructor() {
      this.Name = "Leonardo Lima";
   }
}
const emp = new Employee();
console.log(emp.Name); //output Leonardo Lima
console.log(Employee.Name); //output undefined

class Employee {
   Name = "Leonardo Lima";
}
const emp = new Employee();
console.log(emp.Name); //output Leonardo Lima
console.log(Employee.Name); //output undefined

 

반대로 

class 문법을 이용해서만 접근할 수 있는 프로퍼티를 '정적 프로퍼티'라고 한다. 

따라서 정적 프로퍼티는 인스턴스로는 접근할 수 없다. 

class Employee {
   static Name = "Leonardo Lima";
}
const emp = new Employee();
console.log(emp.Name); //output undefined
console.log(Employee.Name); //output Leonardo Lima

 

인스턴스 프로퍼티 /정적 프로퍼티 각각의 쓰임은?

따라서 모든 인스턴스에서 필요한 공통적인 기능을 관리할 때에는 정적 프로퍼티로 일괄 관리하는 것이 좋다.

반면 각 인스턴스의 특징을 반영하거나 개별 상태를 표시해야 하는 프로퍼티는 (ex. 이름 , 나이 , 옵션 등.. ) 인스턴스 프로퍼티로 관리하는 것이 좋다.

 

 

 

---

참조

 

 

 

JS 객체 지향 프로그래밍- class와 instance ( prototype, constructor, this 키워드)

 

 

Javascript tips — Class vs Instance properties

 

[JavaScript] property란 무엇인가?