자바스크립트 객체는 데이터 덩어리이다. 우리 눈에 보이는 모든 사물도 객체이다. 객체는 생김새, 특성, 이름이 있고, 움직이는 동작을 할 수 있다. 이런 사물들의 특성을 데이터화하면 데이터 객체 덩어리가 된다. 말이 어렵지만 코드로 보면 또 어렵지 않다.
자바스크립트 객체 구성 종류
javascript object
객체는 데이터 덩어리로 배열 형태가 될 수도 있고, 단지 이름이 될 수도 있고, 기능들이 구성될 수 있다.
이런 것들이 데이터로 모여 집합을 이룬 것이 객체이기도 하다.
말을 많이 해도 이해가 어렵다.
그냥 데이터 덩어리로 이해하도록 하자.
구성 요소
객체의 구성을 자바스크립트로 코딩하면 이해하기 쉽다.
let vObject;
vObject = null;
vObject = ["a", "b", "c", "가", "나", "다"]
vObject = {
name : "name",
type : "type"
function : function() { . . . }
}위의 코드에서 변수 vObject 로 선언되었지만, 데이터는 집합의 형태를 가진다.
위의 경우 또한 모두 객체이다.
구성 의미
객체의 구성은 변수와 프로퍼티, 메서드가 있다.
변수는 단순히 값을 저장하는 기능을 한다.
객체에는 다양한 변수의 값을 저장한다.
이것들이 프로퍼티이다.
이 프로퍼티들을 이용하거나 입력되는 인수들을 활용하여 어떤 동작을 하면 이것이 함수이다.
함수는 곧 메서드이다.
이 말이 어려울 수 있다.
자동차를 예를 들어 보자.
전기차를 예를 들어 코드를 작성해 보자.
let vCar;
vCar = {
comp : "현대자동차",
type : "전기차"
charge : function() {
let vStatus = ["충전필요","충전중","충전완료"]
return vStatus;
},
distance : ["10km", "150km", "350km"]
}위의 경우에서 객체는 vCar이다.
프로퍼티는 comp, type, distance 가 된다.
메서드는 charge 가 된다.
프로퍼티는 객체의 특성과 특징들의 정보를 가지고 있다.
메서드는 객체의 동작을 나타낸다.
프로퍼티의 접근은 점을 이용한다.
위의 코드를 이용하면 다음과 같다.
let vCar;
// 객체 생성
vCar = {
comp : "현대자동차",
type : "전기차"
charge : function(status) {
let vStatus = ["충전필요","충전중","충전완료"]
return vStatus[status];
},
distance : ["10km", "150km", "350km"]
}
// 프로퍼티 접근
vCar.comp
vCar.type
vCar.distance[0]
// 메서드 접근
vCar.charge(0)코드샘플
이미 위에서 보듯이 점을 이용하면 객체의 특성인 프로퍼티와 동작인 메서드에 접근할 수 있다.
코드를 다시 만들어 보자.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 객체</h1>
<p id="display"></p>
<script>
let vIdol = {
ent : "YG Ent",
name : "blackpink",
albums : function(selectd) {
let albums = ["album1", "albums2", "albums3"];
return albums[selectd];
},
songs : function(selectd) {
let tracks = ["track1", "track2", "track3"];
return tracks[selectd];
}
}
console.log(typeof(vIdol.ent), "기획사 : ", vIdol.ent);
console.log(typeof(vIdol.albums(2)), "이름 : ", vIdol.albums(2));
console.log(typeof(vIdol.songs(2)), "플레이중 : ", vIdol.songs(2));
</script>
</body>
</html>코드를 보면 알듯 있듯이 객체의 구성은 어느정도 들어가 있다.
중간에 배열도 있다.
데이터 덩어리인 객체의 프로퍼티와 메서드는 점으로 접근하고 있다.
결과를 보자.
데이터가 잘 나오고 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 마우스 클릭 이벤트 만들기 javascript mouse onclick event (0) | 2021.10.29 |
|---|---|
| 자바스크립트 이벤트 종류 마우스 또는 키보드를 클릭하면 동작을 하는 것 (0) | 2021.10.28 |
| 자바스크립트 객체 란 의미와 종류 javascript object (0) | 2021.10.27 |
| 자바스크립트 함수 리턴 사용하기 javascript function return (0) | 2021.10.26 |
| 자바스크립트 함수 파라미터 사용 방법 javascript function parameter (0) | 2021.10.24 |
댓글