Object 사용자 정의 객체
2021. 12. 1. 11:05ㆍStudy/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 |