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

# [[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]
```javascript
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]
```javascript
<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]
```javascript
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]
```javascript
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]
```javascript
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]
```javascript
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:
```javascript
const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
document.getElementById("demo").innerHTML = obj.name;
```
Reviver to reconstruct a date during parse:
```javascript
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).