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

[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 - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012