[TIL] JSON

JSON

Javacsript 객체 문법으로 여러 언어에서 데이터 교환형식으로 쓰이며, 객체 문법 외에도 배열, 문자열도 표현가능

객체(Object) 타입

{} (중괄호)로 감싸며, 키(Key)와 값(Value)로 구성됨
이미 존재하는 키를 중복선언하면 나중에 선언한 해당 키에 대응한 값이 덮어쓰이게 된다.

// 중복인 경우 나중에 선언한 kim으로 덮어쓰인다.
{
	"name" : "jeong",
    "name" : "kim"
}

1. JSON 객체 (Object) 타입 예제

{
  "name": "홍길동",
  "age": 30,
  "email": "hong@example.com",
  "address": {
    "city": "서울",
    "zip": "12345"
  }
}

1-1. 접근 방법

const data = {
  name: "홍길동",
  age: 30,
  email: "hong@example.com",
  address: {
    city: "서울",
    zip: "12345"
  }
};

// 객체의 속성 접근
console.log(data.name);        // 홍길동
console.log(data.age);         // 30
console.log(data.email);       // hong@example.com

// 중첩된 객체 접근
console.log(data.address.city); // 서울
console.log(data.address.zip);  // 12345

배열(Array) 타입

[] (대괄호)로 감싸며, 여러 개의 값을 포함할 수 있음

2. JSON 배열 (Array) 타입 예제

{
  "users": [
    { "id": 1, "name": "김철수", "email": "kim@example.com" },
    { "id": 2, "name": "이영희", "email": "lee@example.com" },
    { "id": 3, "name": "박민수", "email": "park@example.com" }
  ]
}

2-2. 접근방법

const data = {
  users: [
    { id: 1, name: "김철수", email: "kim@example.com" },
    { id: 2, name: "이영희", email: "lee@example.com" },
    { id: 3, name: "박민수", email: "park@example.com" }
  ]
};

// 배열의 특정 요소 접근
console.log(data.users[0].name);  // 김철수
console.log(data.users[1].email); // lee@example.com

/* 출력 결과:
ID: 1, 이름: 김철수, 이메일: kim@example.com
ID: 2, 이름: 이영희, 이메일: lee@example.com
ID: 3, 이름: 박민수, 이메일: park@example.com
*/

3. JSON 객체 + 배열 혼합 예제

{
  "company": "GreenTech",
  "employees": [
    { "id": 101, "name": "최민호", "position": "Backend Developer" },
    { "id": 102, "name": "강지훈", "position": "Frontend Developer" },
    { "id": 103, "name": "윤서연", "position": "UI/UX Designer" }
  ]
}

3-1. 접근방법

const companyData = {
  company: "GreenTech",
  employees: [
    { id: 101, name: "최민호", position: "Backend Developer" },
    { id: 102, name: "강지훈", position: "Frontend Developer" },
    { id: 103, name: "윤서연", position: "UI/UX Designer" }
  ]
};

// 회사명 출력
console.log(companyData.company); // GreenTech

// 특정 직원 정보 출력
console.log(companyData.employees[1].name);     // 강지훈
console.log(companyData.employees[1].position); // Frontend Developer

// 전체 직원 목록 출력
companyData.employees.forEach(emp => {
  console.log(`${emp.id}: ${emp.name} - ${emp.position}`);
});