목차

Javascript Objects

  • description : Javascript Object Display
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-30


The source of this article

Javascript Object Display

How to Display JavaScript Objects?

JavaScript 오브젝트를 표시하면 [object Object]가 출력됩니다.

let person = { name: "John", age: 30, city: "New York" };
document.getElementById("demo").innerHTML = person; // [object Object]


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

Displaying Object Properties

오브젝트의 프로퍼티들은 문자열로 표시될 수 있습니다.

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"}


Displaying the Object in a Loop

오브젝트의 프로퍼티는 루프에서 수집될 수 있습니다.

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


루프에서 %%person[x]%%를 사용해야 합니다.
%%person.x%%는 작동하지 않습니다 (x는 변수이기 때문에).


Using Object.values()

모든 JavaScript 오브젝트는 Object.values()를 사용하여 배열로 변환할 수 있습니다.

let person = {name:"John", age:30, city:"New York"};
 
let myArray = Object.values(person);


myArray는 이제 표시할 준비가 된 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"]


Using JSON.stringify()

JavaScript 함수 JSON.stringify()를 사용하여 모든 JavaScript 오브젝트를 문자열화(문자열로 변환) 할 수 있습니다.

let person = {name:"John", age:30, city:"New York"};
 
let myString = JSON.stringify(person);


myString은 이제 표시할 준비가 된 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"} 


결과는 %%JSON%% 표기법을 따르는 문자열입니다.
{"name": "John", "age": 50, "city": "New York"}


JSON.stringify()는 JavaScript에 포함되어 있으며, 모든 주요 브라우저에서 지원됩니다.

Stringigy Dates

JSON.stringify는 날짜를 문자열로 변환합니다.

 

Stringify Functions

JSON.stringify는 함수를 문자열화 하지 않습니다.

 


스트링 화하기 전에 함수를 스트링으로 변환하면 “고정”될 수 있습니다.

 


Stringify Arrays

JavaScript 배열을 스트링화 하는 것도 가능합니다.

 


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