자바스크립트 데이터타입을 공부하면 object 타입의 객체 데이터를 볼 수 있다. 객체는 데이터 덩어리로 이해하면 편하다. 데이터는 개별로 존재하는 것처럼 보이지만 최소단위 데이터들의 집합이기도 하다. 그렇기에 거의 모든 데이터는 객체로써 볼 수 있다.
자바스크립트 객체 란 구성 종류
javascript object
데이터 타입이 객체임을 알고 싶다면 typeof 함수를 사용하면 된다.
typeof 함수를 사용하면 변수 데이터가 객체인지 여부를 확인할 수 있다.
만약 데이터가 객체형태라면 object 라고 표시가 된다.
null 또한 객체이다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 객체</h1>
<p id="display"></p>
<script>
console.log("null : ", typeof(null))
</script>
</body>
</html>결과화면을 보자.
null 또한 객체이기 때문에 object 형태로 출력된다.
객체
객체는 데이터 덩어리라 이해하자.
무슨 말인가.
object 라는 사전적 의미를 보면 물건, 물체 를 의미한다.
우리 눈에 보이는 모든 것들이 객체이고, 물건이며 사물이다.
이들 객체는 각자 공통된 특성 요소를 가지고 있기도 하고, 그 객체만의 고유한 특성 요소를 가지고 있다.
모든 물건은 동적이기도 하고, 정적이기도 하다.
움직임이 있고, 없기도 하다.
우리 생활의 모든 사물들이 객체라면 한다면 데이터 구성 또한 객체이다.
구성
실행활에서 사물이 가지는 것은 이름이나, 특성이나 움직임등이 있다.
이것을 객체로 비유하면 아래와 같다.
- 이름 : 객체명
- 특성 : 프로퍼티
- 움직임 : 메서드
조금 억지스러울 수 있다.
거리에 붙어있는 광고판을 보자.
이걸 데이터로 표현하면 문자열, 숫자, 특수 문자의 데이터집합이다.
거리를 돌아다니는 대중교통을 보자.
이걸 데이터로 표현하면 문자열도 있고, 움직임도 있고, 특성이 있다.
이것들은 데이터로 구조화한 것을 객체라고 할 수 있다.
코드샘플
자바스크립트의 간단한 객체들을 살펴본다.
지금 자바스크립트를 하는 사람들의 경우 json 데이터를 많이 사용할 것이다.
json 데이터 또한 데이터의 집합으로 객체라 볼 수 있다.
직접 눈으로 보면 아 이런 것이구나 이해가 될 것이다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 객체</h1>
<p id="display"></p>
<script>
let vNull = null;
console.log("vNull : ", typeof(vNull), vNull)
let vJson = {"ent":"YG Ent", "name":"블랙핑크"}
console.log("vJson : ", typeof(vJson), vJson)
let vArray = ["지수","제니","로제","리사"]
console.log("vArray : ", typeof(vArray), vArray)
let vObject = {
ent : "YG Ent",
name : "blackpink",
songs : function() {
return ["track1", "track2", "track3"];
},
albums : function() {
return ["album1", "albums2", "albums3"];
}
}
console.log("vObject : ", typeof(vObject), vObject)
</script>
</body>
</html>결과화면을 보자.
데이터 덩어리가 객체라고 언급했다.
객체를 어떻게 사용하면 되는지만 알면 자바스크립트를 객체지향적으로 구조화하여 사용할 수 있게 된다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 이벤트 종류 마우스 또는 키보드를 클릭하면 동작을 하는 것 (0) | 2021.10.28 |
|---|---|
| 자바스크립트 객체 구성 요소 프로퍼티 메서드 javascript object property method (0) | 2021.10.27 |
| 자바스크립트 함수 리턴 사용하기 javascript function return (0) | 2021.10.26 |
| 자바스크립트 함수 파라미터 사용 방법 javascript function parameter (0) | 2021.10.24 |
| 자바스크립트 함수 사용 방법 javascript function (0) | 2021.10.24 |
댓글