• 회원가입
  • 로그인
  • 구글아이디로 로그인

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



방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
Form JS - Forms - 폼양식 유효성 제어
Form JS - Forms API - 폼유효성
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Functions JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…
Functions JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …
Functions JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…
Functions JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)
DOM JS - DOM (= 돔 = 문서객체모델) 정의
DOM JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)
3/67
목록
찾아주셔서 감사합니다. Since 2012