프로퍼티

---

• 자바스크립트에서 객체는 프로퍼티로 구성된다고 공부하였습니다.
  프로퍼티는 "키" : "값" 의 형식으로 지정해주면 됩니다.
  프로퍼티에는 함수도 지정할 수 있습니다.
  객체에 함수를 정의할 경우 이를 '메소드'라고 부릅니다.
   
• 이번 토픽에서는 객체의 프로퍼티에 접근하는 방법에 대해 공부해봅니다.

 

 

 

---

• 일반적으로 다음과 같은 방식으로 객체의 프로퍼티에 접근하면 됩니다.

객체.프로퍼티

 

• 다음의 예제를 봅시다.

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

 

• 'myCar' 객체를 하나 생성하였습니다.
  Object() 생성자는 빈 객체를 생성할 때 사용합니다.
  자바스크립트의 모든 객체는 Object 객체를 상속받습니다.
  따라서 객체의 원형인 Object 객체의 생성자를 이용한 것입니다.
   
• 그러나 빈 객체에 'make', 'model', 'year' 프로퍼티를 넣은 것을 볼 수 있습니다.
  자바스크립트에서 객체의 프로퍼티를 추가할 때에는 단지 '객체.추가할 프로퍼티'와 같은 형식을 사용하면 됩니다.
  이렇게 사용하면 'myCar' 객체에 한정하여 프로퍼티를 추가할 수 있습니다.

 

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

document.write(myCar.make + "<br>");
document.write(myCar.model + "<br>");
document.write(myCar.year + "<br>");

 

• 또 다른 방법으로 객체의 프로퍼티에 접근할 수도 있습니다.

객체["프로퍼티 변수 이름"]

 

• 다음은 대괄호([]) 표기법을 사용한 객체의 프로퍼티에 접근하는 예제입니다.
  대괄호 안에는 객체의 프로퍼티를 문자열로 표현하여 사용하면 됩니다.

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

document.write(myCar["make"] + "<br>");
document.write(myCar["model"] + "<br>");
document.write(myCar["year"] + "<br>");

 

• 이와 같은 대괄표 표기법을 사용하면 장점이 있습니다.
  일반적인 점(.)을 이용한 프로퍼티에 접근하게 되면 자바스크립트 식별자(identifier)로 적합하지 않으면 접근할 수 없습니다.
  예를 들면, 1make(숫자로 시작하기 때문에 식별자로 사용할 수 없음) 또는 "today time"(빈칸 존재) 등의 식별자로 적합하지 않은 것은 점(.)을 이용하여 프로퍼티에 접근할 수 없습니다만 대괄호 표기법은 문자열로 접근하기 때문에 접근이 가능합니다. 문자열로 변환이 가능한 것이라면 가능합니다.

 

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

myCar["1make"] = "포드";
myCar["today time"] = "19/07/20 00:08";

document.write(myCar["make"] + "<br>");
document.write(myCar["model"] + "<br>");
document.write(myCar["year"] + "<br>");
document.write(myCar["1make"] + "<br>");
document.write(myCar["today time"] + "<br>");

 

 

 

---

• 객체 프로퍼티가 무엇인지 정확히 알아야 하는 경우(숨겨진 프로퍼티가 존재할 가능성)나 순회해야 하는 경우 다음 3가지 방법으로 프로퍼티를 알아낼 수 있습니다.
   
• for ... in 루프
• Object.keys() 메소드
• Object.getOwnPropertyNames() 메소드

 

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

myCar["1make"] = "포드";
myCar["today time"] = "19/07/20 00:08";

for (var i in myCar) {
    if (myCar.hasOwnProperty(i)) {
        document.write(i + "<br>");
    }
}

document.write("<br>");
document.write(Object.keys(myCar) + "<br>");
document.write(Object.getOwnPropertyNames(myCar) + "<br>");

 

• hasOwnProperty() 메소드는 객체가 해당 프로퍼티를 가지고 있는지의 여부를 조사하여 true, false를 리턴해줍니다.

 

 

 

 

---

• 프로퍼티 형태로써 메소드를 객체에 생성해보도록 하겠습니다.

 

• 단일 객체에 메소드를 생성할 때에는 다음과 같이 하면 됩니다.

객체.메소드이름 = function(매개변수) {
    /// ...do something
};

 

• 생성자 함수를 이용하여 객체를 생성하는 경우 메소드를 생성하는 방법입니다.

var myObj = {
    메소드이름: function (매개변수) {
        // ...do something
    }
};

 

• 메소드 호출은 다음과 같이 하면 됩니다.

객체.메소드이름(인자);

 

 

var myCar = new Object();
        
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;
myCar.move = function(person) {
    document.write(person + "이 탑승하여 움직입니다. <br>");
}

myCar.move("사람");

 

 

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.move = function (person) {
        document.write(person + "가 탑승하여 움직입니다. <br>");
    }
}

var car1 = new Car("Nissan", "300ZX", 1992);
car1.move("김철수");