2nd/10_Wiki/Topic_JavaScript/JavaScript_JSON_Parse.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
json-parse	JSON Parse	Frontend	draft	conceptual		JSON.parse JSON parse parse JSON JSON to object reviver function		B	0.9	2026-06-23	2026-06-23			javascript js web frontend w3schools json parse	https://www.w3schools.com/js/js_json_parse.asp

JSON Parse

🎯 한 줄 통찰 (One-line insight)

When data arrives from a web server it is always a string; JSON.parse() turns that JSON string into a usable JavaScript object (or array), and dates and functions — which JSON cannot carry — must be reconstructed by hand or via a reviver. [S1]

🧠 핵심 개념 (Core concepts)

• Server data is always a string — a common use of JSON is to exchange data to/from a web server; when receiving it, parse with JSON.parse() and the data becomes a JavaScript object. [S1]
• Text must be valid JSON — make sure the text is in JSON format, or you will get a syntax error. [S1]
• Arrays parse to arrays — using JSON.parse() on JSON derived from an array returns a JavaScript array, not an object. [S1]
• Dates are not allowed in JSON — store a date as a string, then convert it back to a Date object later (directly or with a reviver function). [S1]
• Functions are not allowed in JSON — avoid them; reconstructing requires eval(), and functions lose their scope. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Receive → parse → render — JSON.parse(text) then read fields into the page. [S1]
• Reviver pattern — pass a function as the second argument to JSON.parse() to transform values (e.g. convert a "birth" string into a Date) during parsing. [S1]
• Manual rehydration — after parsing, replace a string field with a real object: obj.birth = new Date(obj.birth). [S1]

📖 세부 내용 (Details)

A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Parse the data with JSON.parse(), and the data becomes a JavaScript object. [S1]

Example — parsing JSON Imagine we received this text from a web server: '{"name":"John", "age":30, "city":"New York"}'. Use JSON.parse() to convert the text into a JavaScript object: [S1]

const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

Make sure the text is in JSON format, or else you will get a syntax error. Then use the object in your page: [S1]

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Array as JSON When using JSON.parse() on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object: [S1]

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Exceptions — parsing dates Date objects are not allowed in JSON. If you need to include a date, write it as a string. You can convert it back into a date object later. Convert directly after parsing: [S1]

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Or use the second parameter of JSON.parse(), called the reviver function, which is called on each value before returning it: [S1]

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Exceptions — parsing functions Functions are not allowed in JSON. If you need to include a function, write it as a string and convert it back into a function later: [S1]

const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

You should avoid using functions in JSON; the functions will lose their scope, and you would have to use eval() to convert them back into functions. [S1]

🛠️ 적용 사례 (Applied in summary)

Applied examples on the page: parse server text into obj and render obj.name into #demo; parse a JSON array into a real array; rehydrate a date both manually and via a reviver; and (discouraged) rebuild a function with eval(). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Parse server text into an object:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
document.getElementById("demo").innerHTML = obj.name;

Reviver to reconstruct a date during parse:

const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.90
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: JavaScript Tutorial
• 관련 개념: JavaScript JSON Stringify, JavaScript JSON, JavaScript JSON Data Types, JavaScript JSON Objects
• 참조 맥락: Referenced whenever consuming JSON received from a server or storage and turning it into usable objects.

📚 출처 (Sources)

• [S1] W3Schools — JSON Parse — https://www.w3schools.com/js/js_json_parse.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "JSON Parse" page (Astra wiki-curation, P-Reinforce v3.1 format).