JavaScript

[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에서 상속된 모든 객체에 영향을 미침.




분류 제목
Basic JS - Break - 반복문중단 (= 브레이크) ★ / Continue - 반복문건너뛰기 (= 컨티뉴) ★…
Basic JS - Type Conversion - 데이터타입변환 (= 데이터유형변환 = 데이터타입변경 = 데이터유형변…
Basic JS - Bitwise Operations -
Basic JS - Regular Expressions -
Basic JS - Errors - Throw and Try to Catch (에러 처리 구문)
Basic JS - Debugging (디버깅/디버그) - (에러/오류) 찾기/제거 방법
Basic JS - Hoisting (호이스팅) - 변수선언끌어올리기 (= 변수선언위치변경)
Basic JS - Use Strict - 엄격모드 ★★★
Basic JS - Style Guide and Coding Conventions -
Basic JS - Best Practices (올바른코딩)
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
3/89
목록
 홈  PC버전 로그인 일본어
그누앞단언어 1
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인