======Javascript Objects======
<WRAP left notice 70%>
  * description : Javascript Object Display
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-30
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article=====
[[https://www.w3schools.com/js/js_object_display.asp|Javascript Object Display]]
\\

=====How to Display JavaScript Objects?=====
%%JavaScript%% 오브젝트를 표시하면 **%%[object Object]%%**가 출력됩니다.\\
\\
<code javascript>
let person = { name: "John", age: 30, city: "New York" };
document.getElementById("demo").innerHTML = person; // [object Object]
</code>
\\

%%JavaScript%% 오브젝트를 표시하는 몇 가지 일반적인 솔루션은 다음과 같습니다.\\

  * 이름으로 오브젝트 프로퍼티 표시
  * 루프에 오브젝트 프로퍼티 표시
  * %%Object.values()%%를 사용하여 오브젝트 표시
  * %%JSON.stringify()%%를 사용하여 객체 표시

=====Displaying Object Properties=====
오브젝트의 프로퍼티들은 문자열로 표시될 수 있습니다.\\
\\
<code javascript>
let person = { name: "John", age: 50, city: "New York" };

document.getElementById("demo1").innerHTML = 
person.name + "," + person.age + "," + person.city;  // John,50,New York
document.getElementById("demo2").innerHTML = person;  // [object Object]
console.log(person);  // {name: "John", age: 50, city: "New York"}
</code>
\\
=====Displaying the Object in a Loop=====
오브젝트의 프로퍼티는 루프에서 수집될 수 있습니다.\\
\\
<code javascript>
let x, txt = "";
let person = { name: "Ellie", age: 35, city: "Los Angeles" };

for (x in person) {
  txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;  // Ellie 35 Los Angeles
</code>
\\
  루프에서 %%person[x]%%를 사용해야 합니다.
  %%person.x%%는 작동하지 않습니다 (x는 변수이기 때문에).
\\

=====Using Object.values()=====
모든 %%JavaScript%% 오브젝트는 ''Object.values()''를 사용하여 배열로 변환할 수 있습니다.\\
\\
<code javascript>
let person = {name:"John", age:30, city:"New York"};

let myArray = Object.values(person);
</code>
\\
''myArray''는 이제 표시할 준비가 된 %%JavaScript%% 배열입니다.\\
\\
<code javascript>
let person = { name: "John", age: 50, city: "New York" };
let myArray = Object.values(person);
document.getElementById("demo1").innerHTML = person;  // [object Object]
console.log(person);  // {name: "John", age: 50, city: "New York"}
document.getElementById("demo2").innerHTML = myArray; // John,50,New York
console.log(myArray); // (3) ["John", 50, "New York"]
</code>
\\
=====Using JSON.stringify()=====
%%JavaScript%% 함수 ''%%JSON.stringify()%%''를 사용하여 모든 %%JavaScript%% 오브젝트를 문자열화(문자열로 변환) 할 수 있습니다.\\
\\
<code javascript>
let person = {name:"John", age:30, city:"New York"};

let myString = JSON.stringify(person);
</code>
\\
''myString''은 이제 표시할 준비가 된 %%JavaScript%% 문자열입니다.\\
<code javascript>
let person = { name: "John", age: 50, city: "New York" };
let myString = JSON.stringify(person);
document.getElementById("demo1").innerHTML = person;  // [object Object]
document.getElementById("demo2").innerHTML = myString;  // {"name":"John","age":50,"city":"New York"}
console.log(person);  // {name: "John", age: 50, city: "New York"}
console.log(myString);// {"name":"John","age":50,"city":"New York"} 
</code>
\\
  결과는 %%JSON%% 표기법을 따르는 문자열입니다.
  {"name": "John", "age": 50, "city": "New York"}
\\
''%%JSON.stringify()%%''는 %%JavaScript%%에 포함되어 있으며, 모든 주요 브라우저에서 지원됩니다.\\
\\

=====Stringigy Dates=====
''JSON.stringify''는 날짜를 문자열로 변환합니다.\\
<code javascript>

</code>

=====Stringify Functions=====
''JSON.stringify''는 함수를 문자열화 하지 않습니다.\\
<code javascript>

</code>
\\
스트링 화하기 전에 함수를 스트링으로 변환하면 "고정"될 수 있습니다.\\
<code javascript>

</code>
\\
=====Stringify Arrays=====
%%JavaScript%% 배열을 스트링화 하는 것도 가능합니다.\\
<code javascript>

</code>
\\
  결과는 %%JSON%% 표기법을 따르는 문자열입니다.
  [ "John", "Peter", "Sally", "Jane"]













{{tag>오션 Javascript Objects Display}}