[Object] JS - Object Property - 객체속성 ★

Property (속성)은 모든 JS 객체에서 가장 중요한 부분임.

JS property (속성)

 

1.

속성은 JS 객체와 관련된 값임.

 

2.

JS 객체는 정렬되지 않은 속성의 모음임.

 

3.

속성은 일반적으로 변경, 추가 및 삭제할 수 있지만 일부는 읽기 전용임.

 

JS 속성 접근법 (3가지)

 

objectName.property
(예) hz.host

 

---

 

objectName["property"]
(예) hz["host"]

 

---

 

objectName[expression]
(예) x = "host"; hz[x]

 

objectname.property 접근법 예제

 

<p id="demo"></p>

<script>

var hz = {

  site:"홈짱닷컴", 

  host:"Homzzang.com", 

  open:2012

};

 

 

var txt = hz.site + " " + hz.host + " " + hz.open;

document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기

objectname["property"] 접근법 예제

 

<p id="demo"></p>

<script>

var hz = {

  site:"홈짱닷컴", 

  host:"Homzzang.com", 

  open:2012

};

var txt = hz["site"] + " " + hz["host"] + " " + hz["open"];

document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기

for...in 반복문 - 객체의 속성을 반복

 

for (variable in object) {

  // 각 속성마다 한번씩 실행할 코드. 이 경우, objectname[propety] 형식만 가능.

}

 

---

 

<p id="demo"></p>

<script>

var txt = "";

var hz = {site:"홈짱닷컴", host:"Homzzang.com", open:2012}; 

var x;

for (x in hz) {

  txt += hz[x] + " ";

}

document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기

---

 

[주의]

아래처럼, objectname.property 형식으로 하면 undefined 찍힘.

 

<p id="demo"></p>

<script>

var txt = "";

var hz = {site:"홈짱닷컴", host:"Homzzang.com", open:2012}; 

var x;

for (x in hz) {

  txt += hz.x + " ";

}

document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기

속성 추가

 

단순히 값을 지정함으로써 기존 객체에 속성 가능.

(예) objectname.property = "value";

 

---

 

<p id="demo"></p>

<script>

var hz = {

  site:"홈짱닷컴", 

  host:"Homzzang.com", 

  open:2012

};

hz.code = "HTML,CSS,JS,JQ,PHP,SQL";

var txt = hz.site + " " + hz.host + " " + hz.open + hz.code;

document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기

속성 삭제

 

delete 키워드 이용해 객체에서 속성 삭제 가능.

(예) delete objectname.property

 

---

 

<p id="demo"></p>

<script>

var hz = {

  site:"홈짱닷컴", 

  host:"Homzzang.com", 

  open:2012

};

delete hz.open;

var txt = hz.site + " " + hz.host + " " + hz.open;

document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기

---

 

1.

delete 키워드는 속성과 속성값 모두를 삭제.

 

2.

속성 삭제 후, 삭제된 속성은 다시 추가되기 전엔 사용 불가.

만약 다시 추가 전 출력에 사용된 경우, undefined 찍힘.

 

3.

delete 연산자는 객체 속성에 영향을 미치도록 설계됨. (변수나 함수엔 영향 안 미침.)

 

4.

delete 연산자는 사전정의된 JS 객체 속성엔 사용 불가. (프로그램에 치명적 영향 줄 수 있음.)

 

Property Attributes (속성의 특성)

 

1.

모든 속성은 이름과 값을 갖음. (값은 속성의 특성 중 하나임.)

 

2.

속성은 (열거 가능, 구성 가능, 쓰기 가능) 함.

이들 특성들은 속성이 어떻게 접근돼야 하는지 정의. (읽기 가능? 쓰기 가능?)

3.
JS에서 모든 특성은 읽힐 수 있지만, value 속성만 변경 가능 (속성이 쓰기 가능한 경우만).

4.

ECMAScript 5는 모든 속성 특성들을 얻기 세팅하는 메서드를 갖음.

 

Prototype 속성들

 

1.

JS 객체는 프로토 타입의 속성을 상속.

 

2.

delete 키워드는 상속된 속성들을 삭제하지 않으나.

만약, 당신이 prototype 속성을 삭제하면, prototype에서 상속된 모든 객체에 영향을 미침.