객체 [Property][프로퍼티] [JavaScript]

[광고 누르면 오늘의 행운 상승!!]

• 객체 : 여러 값을 모아 놓은 데이터 타입
  - 배열 = 일종의 객체
  - 하나의 대상에 여러 개의 값을 필요로 하는 종류의 데이터 처리
  
  
• 객체의 값 :{(이름) : (값) , (이름) : (값) .....}
  
  
• Property : 어떠한 데이터 타입이라도 가능

var polygon = {side : 5 width : 100, color : "gray"}

• Mehtod : 함수로 된 Property
  - 함수와 같이 기능을 실행
  - 객체에 기능 추가 시 method 정의
  
  
• 사각형 객체

var square {
		width : 50, height : 100, faceColor : "yellow", 
		borderColor : "black",	//Property
		area: function() {return this.width * this.height;} // method
		//square내 area() 메소드 사용
}

 

내장 객체

• JavaScript에서 제공하는 객체

• 그 외 객체 : 브라우저 객체 모델, 문서 객체 모델, 사용자 정의 객체

• 일반적인 객체지향 프로그래밍 : class의 instance로 생성
  → 구체적인 객체 생성 과정

• JavaScript : class 존재하지 않음
  → 생성자 함수와 프로토 타입 정의(모조 클래스)
  → new 생성자를 이용하여 객체를 생성
  → 객체 = 데이터 → 객체 literal 이용하여 객체 생성

객체literal

• 객체 : 대괄호로 싸여 있음
• Property
• 쉼표로 분리
• 프로퍼티 이름과 같이 콜론으로 구분

var polygon = {side : 5 width : 100, color : "gray"}
// 객체        //프로퍼티

var empty = {};
//property가 없이 비어있는 객체 생성 가능

var polygon = {side : 5 width : 100, color : "gray", position:{x:100, y:200)};
//객체의 프로퍼티로 객체가 사용 될 수도 있음

## 상수 이외에 변수도 사용 가능

new 연산자

• 생성자 함수가 있다면? → new 연산자를 이용하여 객체 생성 가능

function square(w,h){ //생성자 함수
		this.width = w;
		this.height =h;
		this.faceColor = "yellow";
		this.borderColor = "black";
		this.position = { x:100, y:100};
}

var mysquare = new square(20,30); //객체 생성자

//
document.writeln(mysquare.faceColor);

-출력
yellow

• 쉼표로 분리
• 프로퍼티 이름과 같이 콜론으로 구분

객체 프로퍼티 생성과 접근

• 객체 프로퍼티에 접근 : .(마침표) 연산자 사용

var line = mysquare.bordercolor;

• 프로퍼티를 추가로 생성하고자 한다면?
  마침표 연산자를 이용하여 추가할 수 있음.

• depth property : 객체에 존재하지 않는 프로퍼티

mysquare.depth = 1;

 

• 존재하지 않는 프로퍼티에 할당 연산자를 통해 값을 할당
  → 프로퍼티가 생성됨

document.writeln(mysquare.depth);

// 1 

 

프로퍼티의 나열 및 확인

for(var p in mysquare){
		document.writeln(p + "<br>");
}

-출력
width
height
faceColor
borderColor
position

//초기화된 프로퍼티
// 객체 생성 후 추가된 depth 프로퍼티

 

• 특정 프로퍼티가 객체에 존재하는지 검사 : in 연산자
  - 프로퍼티를 추가로 생성하고자 한다면?
    마침표 연산자를 이용하여 추가할 수 있음

if("depth" in mysquare){
    mysquare.depth = 10;
}

 

• 존재하지 않은 프로퍼티 참조 : undefined

if(mysquare.depth != undefined){
     mysquare.depth = 10;
}

 

프로퍼티의 삭제

• delete 연산자 : 변수 삭제 X, 프로퍼티 삭제 O

delete mysquare.depth; 

//depth 프로퍼티에 접근 -> undefined 반환