2nd/10_Wiki/Topic_JavaScript/JavaScript_JSON.md

---
id: javascript-json
title: "JavaScript JSON"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["JSON", "JavaScript Object Notation", "JSON intro", "JS JSON", "data interchange format"]
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"]
raw_sources: ["https://www.w3schools.com/js/js_json.asp"]
applied_in: []
github_commit: ""
---

# [[JavaScript JSON]]

## 🎯 한 줄 통찰 (One-line insight)
JSON (JavaScript Object Notation) is a plain text, language-independent format for storing and transporting data, syntactically identical to JavaScript object code so a JS program can convert it to native objects with no complicated parsing. [S1]

## 🧠 핵심 개념 (Core concepts)
- **JSON = JavaScript Object Notation** — a plain text format for storing and transporting data, used to send, receive and store data. [S1]
- **Language independent** — JSON is text only; although its syntax is derived from JavaScript object syntax, code for reading and generating JSON can be written in any programming language. [S1]
- **Syntactically identical to JS objects** — because the JSON format matches JavaScript object creation, a JavaScript program can easily convert JSON data into native JavaScript objects. [S1]
- **Two built-in functions** — `JSON.parse()` converts JSON strings into JavaScript objects; `JSON.stringify()` converts an object into a JSON string. [S1]
- **Text as the universal storage format** — text is always one of the legal formats for storing data, and JSON makes it possible to store JavaScript objects as text. [S1]
- **Specified by Douglas Crockford** — the JSON format was originally specified by Douglas Crockford. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Name/value pairs** — JSON data is written as name/value pairs: a field name in double quotes, a colon, then a value (`"firstName":"John"`). JSON names require double quotes; JavaScript names do not. [S1]
- **Objects in curly braces** — `{"firstName":"John", "lastName":"Doe"}`. [S1]
- **Arrays in square brackets** — an array can contain objects, each a record (e.g. a person with first and last name). [S1]
- **Receive text → parse → use as object** — read text from a server, `JSON.parse()` it, then access fields like any object. [S1]

## 📖 세부 내용 (Details)
**What is JSON?**
JSON stands for JavaScript Object Notation. It is a plain text format for storing and transporting data, and it is similar to the syntax for creating JavaScript objects. JSON is used to send, receive and store data. [S1]

A simple JSON example string: [S1]
```json
{"name":"John", "age":30, "car":null}
```
The example above defines an object with 3 properties — `"name"`, `"age"`, `"car"` — whose values are `"John"`, `30`, and `null` respectively. [S1]

**Why JSON?**
JSON makes it easy to send and store data between computers, and it is text only and language independent. The syntax is derived from JavaScript object syntax, but JSON is text only, so code for reading and generating JSON data can be written in any programming language. The JSON format was originally specified by Douglas Crockford. [S1]

**JSON and JavaScript**
The JSON format is syntactically identical to the code for creating JavaScript objects. Because of this, a JavaScript program can easily convert JSON data into native JavaScript objects. JavaScript has a built-in function for converting JSON strings into JavaScript objects (`JSON.parse()`) and a built-in function for converting an object into a JSON string (`JSON.stringify()`). You can receive pure text from a server and use it as a JavaScript object, send a JavaScript object to a server in pure text format, and work with data as JavaScript objects with no complicated parsing and translations. [S1]

**Storing data**
When storing data, the data has to be a certain format, and regardless of where you store it, text is always one of the legal formats. JSON makes it possible to store JavaScript objects as text. [S1]

Text that defines an `employees` object with an array of 3 employee objects: [S1]
```json
{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}
```
If you parse the JSON string with a JavaScript program, you can access the data as an object: [S1]
```javascript
let personName = obj.name;
let personAge = obj.age;
```

**JSON data — a name and a value**
JSON data is written as name/value pairs, just like JavaScript object properties. A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value: [S1]
```json
"firstName":"John"
```
JSON names require double quotes; JavaScript names do not. [S1]

**JSON objects**
JSON objects are written inside curly braces. Just like in JavaScript, objects can contain multiple name/value pairs: [S1]
```json
{"firstName":"John", "lastName":"Doe"}
```

**JSON arrays**
JSON arrays are written inside square brackets. Just like in JavaScript, an array can contain objects: [S1]
```json
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
```
In the example above, the object `"employees"` is an array containing three objects. Each object is a record of a person (with a first name and a last name). [S1]

**Converting a JSON text to a JavaScript object**
A common use of JSON is to read data from a web server and display it in a web page. For simplicity this can be demonstrated using a string as input. First, create a JavaScript string containing JSON syntax: [S1]
```javascript
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
```
Then, use the JavaScript built-in function `JSON.parse()` to convert the string into a JavaScript object: [S1]
```javascript
const obj = JSON.parse(text);
```
Finally, use the new JavaScript object in your page: [S1]
```javascript
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
```

## 🛠️ 적용 사례 (Applied in summary)
The canonical applied example on the page is reading server data: build/receive a JSON string, `JSON.parse()` it into an object, then render a field (e.g. `obj.employees[1].firstName`) into `#demo`. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Parse a JSON string into an object and read a nested field:
```javascript
const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
```
Access top-level fields after parsing:
```javascript
let personName = obj.name;
let personAge = obj.age;
```

## ⚖️ 모순 및 업데이트 (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 Syntax]], [[JavaScript JSON Parse]], [[JavaScript JSON Stringify]], [[JavaScript JSON vs XML]]
- **참조 맥락:** The entry point for the JSON section, referenced whenever exchanging or storing structured data with a web server.

## 📚 출처 (Sources)
- [S1] W3Schools — JavaScript JSON — https://www.w3schools.com/js/js_json.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript JSON" page (Astra wiki-curation, P-Reinforce v3.1 format).