Object 사용자 정의 객체

2021. 12. 1. 11:05Study/JavaScript

Object

객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고, 다른것과 식별 가능한 것을 말한다.

객체는 속성과 동작으로 구성되어 있다고 보면 되는데 자바스크립트에서는 이 속성과 동작을 각가 property와 method라고 부른다.

객체 = property (속성, 변수, 함수) + method (함수)
var a = [10,20,30];
console.log(typeof(a)); // object

또, 객체는 내장객체와 사용자 정의 객체 2가지로 나뉜다.

 

 

객체 예시

더보기

객체를 가장 잘 표현하고 있는 현실세계의 예시는 인간이다.

 

property (속성) = 형태, 상태, 크기

이름, 키, 몸무게, 나이, 성별, 피부색, 팔2, 다리2, ....

 

method (메소드/함수) = 기능, 동작

본다(), 먹는다(), 싼다(), 웃는다(), 걷는다(), 싸운다(), 잔다(), ...

 

 

게임에서의 예시

property = 캐릭터 체력/공격력/방어력/마법력/레벨

method = 공격하다(), 방어하다(), 마법쓰다(), 이동하다(),

 


 

사용자 정의 객체

사용자가 직접 객체를 만들어 사용할 수 있다.

 

객체 선언 방법

*속성과 메소드() 생성하기
var 객체명 = { };
var 객체명 = Object();
var 객체명 = {
     속성1 : 초기값1 ,
     속성2 : 초기값2 ,

     속성3 : 초기값3,
     메소드 : function(매개변수1, 매개변수2, ....){
          // 처리코드
          return 값;
     }
};

* 객체 안에서는 '=' 대입연산자를 쓸 수 없고 ':' 콜론을 사용한다.

 

 

객체의 속성이 가질 수 있는 자료형

//*객체의 속성이 가질 수 있는 자료형
var object = {
  number: 273,
  string: 'RintIanTta',
  boolean: true,
  array: [52, 273, 103, 32],
  method: function () {
  }
};

 

 

객체 속성에 접근하는 방법 2가지

*도트연산자로 부르는 법과 대괄호를 사용해 부르는 방법 2가지가 있다.
// 도트연산자
객체명
.
속성  /  객체명.메소드();

// 대괄호
객체명['속성']

 

ex1. 객체를 생성하고 속성을 만든 후 부르는 법

var product = {
  name: '7D 건조 망고',
  type: '당절임',
  ingredient: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
  country: '필리핀',
  price:[100,150,200]
};

product['name'] = prompt('제품명을 입력하세요', '');  // 초기값 변경도 가능하다
product.conutry = '제주도';  // 초기값 변경도 가능하다

console.log(product.name + '\n' + product.type + '\n' + product.ingredient + '\n' + product.country + '\n' + product.price[1]);
console.log(product['name'] + '\n' + product['type'] + '\n' + product['ingredient'] + '\n' + product['country']);

 

ex2. 메소드

var person = {
  name: '홍길동',
  eat: function(food) {
  	console.log(this.name + '이' + food + '을/를 먹습니다.');
  }
};

person.eat('라면');
person.eat('아롱사태');

 

var person = {
  name: '홍길동',
  eat: function(food) {
  	return this.name + '이 ' + food + '을(를) 먹습니다.';
  }
};

person.name = prompt('이름을 입력하세요', '');
var a = person.eat('아롱사태');
console.log(a);

 

 

with문

*객체를 줄여 쓰는 문법 (축약문법)
*앞에 객체 이름을 생략할 수 있다.
with (객체명) {
     output = 속성1+속성2+속성3
}
var output = '';
var student = {
  이름: '연하진',
  국어: 92, 수학: 98,
  영어: 96, 과학: 98
};
with (student) {
  output += '이름: ' + 이름 + '\n';
  output += '국어: ' + 국어 + '\n';
  output += '수학: ' + 수학 + '\n';
  output += '영어: ' + 영어 + '\n';
  output += '과학: ' + 과학 + '\n';
  output += '총점: ' + (국어 + 수학 + 영어 + 과학);
}
alert(output);

 

 

ex3. 객체를 생성하는 또 다른 방법 예제

var hotel = {};

hotel.name='green';
hotel.rooms=50;
hotel.reserve=10;

hotel.checkRoom = function(){
	return this.rooms - this.reserve;  
};

console.log(hotel.checkRoom()+'개의 방이 남았습니다');

 

 

'Study > JavaScript' 카테고리의 다른 글

BOM, DOM Object Model  (0) 2021.12.02
Object 내장객체  (0) 2021.12.01
변수의 유효범위 scope  (0) 2021.11.30
사용자 정의 함수 Function  (0) 2021.11.30
break; continue;  (0) 2021.11.30