목차
- JS 객체 표시 방법
- JS 객체 속성 표시
- 반복문 이용해 객체 표시
- Object.values() 메서드 - (객체 → 배열) 변환
- JSON.stringify() 메서드1 - (객체 → 문자열) 변환
- JSON.stringify() 메서드2 - (날짜 → 문자열) 변환
- JSON.stringify() 메서드3 - (함수 → 문자열) 변환
- JSON.stringify() 메서드4 - (배열 → 문자열) 변환
JS 객체 표시 방법
- 객체 자체를 출력하면, [object Object] 출력됨.
- 객체 내용을 출력하려면, 목차 2~4번 이용 필요.
[예제]
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
document.getElementById("demo").innerHTML = hz;
</script>
결과값: [object Object]
JS 객체 속성 표시
객체 내용을 표시하려면, 객체의 속성명 이용해야 함.
※ objectName.propertyName 형식 (예) hz.site
PS. 객체 속성을 나열해 출력하는 방법 2가지
[출력방법1] - 덧셈 기호로 연결해 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
document.getElementById("demo").innerHTML = hz.site + " " + hz.host + " (Since " + hz.open + ")";
</script>
결과값: 홈짱닷컴 Homzzang.com (Since 2012)
[출력방법2] - 백틱(`)으로 감싸서 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
document.getElementById("demo").innerHTML = `${hz.site} ${hz.host} (Since ${hz.open})`;
</script>
결과값: 홈짱닷컴 Homzzang.com (Since 2012)
반복문 이용해 객체 표시
출력할 속성이 많을 경우, 반복문 이용해 출력 가능.
- 반복문에선 hz.x 형식이 아닌 hz[x] 형식 사용. (∵ x는 속성이 아닌 변수이므로.)
- 일부 속성을 다르게 출력하려면, if 조건문 이용. (예제2 참고)
[예제1] - 동일 패턴으로 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
let txt = "";
for (let x in hz) {
txt += hz[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
</script>
결과값: 홈짱닷컴 Homzzang.com 2012
[예제2] - if조건문 이용해 일부 속성을 다른 패턴으로 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
let txt = "";
for (let x in hz) {
if (x === 'open') {
txt += "(Since " + hz[x] + ") ";
} else {
txt += hz[x] + " ";
}
}
document.getElementById("demo").innerHTML = txt;
</script>
결과값: 홈짱닷컴 Homzzang.com (Since 2012)
Object.values() 메서드 - (객체 → 배열) 변환
객체를 배열로 변환.
- 배열은 배열 자체로 내용 출력 가능.
- 배열의 색인번호는 0부터 시작함.
- 구문: Object.values(objectName)
- 주의: Object의 첫글자는 대문자임.
- 지원: 2016년 이래 주요 최신 브라우저 모두 지원.
[예제1] - 배열 자체 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
const hzArray = Object.values(hz);
document.getElementById("demo").innerHTML = hzArray;
</script>
결과값: 홈짱닷컴,Homzzang.com,2012
[예제2] - 배열의 색인번호 이용해 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
const hzArray = Object.values(hz);
document.getElementById("demo").innerHTML = `${hzArray[0]} ${hzArray[1]} (Since ${hzArray[2]})`;
</script>
결과값: 홈짱닷컴 Homzzang.com (Since 2012)
JSON.stringify() 메서드1 - (객체 → 문자열) 변환
객체를 'JSON 표기법 따르는 문자열'로 변환.
- (예) {"site":"홈짱닷컴","host":"Homzzang.com","open":2012}
- 구문: JSON.stringify(objectName)
- 지원: 주요 브라우저 모두 지원.
[예제1] - JSON 표기법으로 된 문자열 자체 출력
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
let hzString = JSON.stringify(hz);
document.getElementById("demo").innerHTML = hzString;
</script>
결과값: {"site":"홈짱닷컴","host":"Homzzang.com","open":2012}
[예제2] - JSON 표기법으로 된 문자열을 JSON 접근법으로 접근하려면, JSON.parse() 적용해야 가능함.
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: 2012
};
let hzString = JSON.stringify(hz);
// JSON 문자열을 JSON 객체로 파싱
const hzJSON = JSON.parse(hzString);
// JSON 접근법 사용해 객체 속성에 접근
const site = hzJSON.site; // "홈짱닷컴"
const host = hzJSON.host; // "Homzzang.com"
const open = hzJSON.open; // 2012
document.getElementById("demo").innerHTML = site +" " + host + " (Since " + open + ")";
</script>
결과값: 홈짱닷컴 Homzzang.com (Since 2012)
JSON.stringify() 메서드2 - (날짜 → 문자열) 변환
<p id="demo"></p>
<script>
var hz = {
site: "홈짱닷컴",
date: new Date()
};
let hzString = JSON.stringify(hz);
document.getElementById("demo").innerHTML = hzString;
</script>
결과값: {"site":"홈짱닷컴","date":"2023-09-15T02:30:50.617Z"}
JSON.stringify() 메서드3 - (함수 → 문자열) 변환
- 함수는 JSON.stringify() 적용 안 됨. [예제1]
- 함수를 문자열로 변환하려면, toString() 먼저 적용 후 JSON.stringify() 적용. [예제2]
[예제1] - 함수는 JSON.stringify() 적용 안 됨.
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: function () {return 2012;}
};
document.getElementById("demo").innerHTML = JSON.stringify(hz);
</script>
결과값: {"site":"홈짱닷컴","host":"Homzzang.com"}
[예제2] - 함수 경우, toString() 먼저 적용 후 JSON.stringify() 적용하면 문자열로 변환 됨.
<p id="demo"></p>
<script>
const hz = {
site: "홈짱닷컴",
host: "Homzzang.com",
open: function () {return 2012;}
};
hz.open = hz.open.toString();
document.getElementById("demo").innerHTML = JSON.stringify(hz);
</script>
결과값: {"site":"홈짱닷컴","host":"Homzzang.com","open":"function () {return 2012;}"}
JSON.stringify() 메서드4 - (배열 → 문자열) 변환
- 배열을 JSON.stringify() 적용해 문자열로 변환 시, 대괄호 기호까지 출력. (예제1)
- 배열 자체로 출력 시, 대괄호 없이 내용만 출력. (예제2)
[예제1] - JSON.stringify() 적용 후 출력
<p id="demo"></p>
<script>
const hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = JSON.stringify(hz);
</script>
결과값: ["홈짱닷컴","Homzzang.com",2012]
[예제2] - 배열 자체 출력
<p id="demo"></p>
<script>
const hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = hz;
</script>
결과값: 홈짱닷컴,Homzzang.com,2012
