목차
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
[출력방법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
