[Javascript] JSON

---

 

#1. JSON

1. JSON 이란?

• JavaScript Object Notation의 약자로 자바스크립트 객체 표기법이다.
  • 즉, 어떤 변수 안에 하위 변수를 내장시키기 위한 자바스크립트 표기법이다.
• JSON은 데이터를 저장하거나 전송할 때(통신 프로토콜) 사용되는 하나의 규격으로서 역할도 한다.
  • 경량의 DATA 교환 형식으로 사람과 기계 모두 이해하기 쉽고, 용량이 작아서 최근에 많이 쓰이는 중이다.

 

2. JSON으로 객체 정의

1) 변수들의 그룹으로서의 JSON

• 하나의 변수에 하위 정보들이 포함되어 있는 변수들의 그룹.
• 중괄호 { } 를 사용하여 정의한다.
• key(이름) : value(값) 의 형식으로 값을 명시한다.
• 두 개 이상의 데이터는 콤마( , )로 구분한다.
• 원칙적으로 key 이름은 따옴표로 감싸는 것이 맞지만, 이름에 띄어쓰기나 대시( - )가 없는 경우, 생략해도 된다.
• 객체는 속성(property)의 집합이다.
  • 속성의 값은 모든 자료형이 가능하다 (object 포함)

// 객체 선언
const 객체이름 = {
	이름1 : 값1,
    	이름2 : 값2,
    	이름3 : 값3,
};


// 데이터 출력1 → 대부분 이 방식을 사용 
console.log(객체이름.이름1); // 값1
console.log(객체이름.이름2); // 값2
console.log(객체이름.이름3); // 값3


// 데이터 출력2 → 쌍따옴표, 홑따옴표 구분없이 사용 가능
console.log(객체이름['이름1']); // 값1
console.log(객체이름["이름2"]); // 값2
console.log(객체이름['이름3']); // 값3

• JSON으로 선언된 객체의 key(이름)를 Object를 활용하여 배열로 반환할 수 있다.

const 객체이름 = {
	이름1 : 값1,
    	이름2 : 값2,
    	이름3 : 값3,
};

const 변수이름 = Object.getOwnPropertyNames(객체이름);
console.log(변수이름);  // [ 이름1, 이름2, 이름3 ]

 

2) 배열을 포함하는 JSON

• JSON의 값에는 다양한 형태의 데이터 타입이 지정될 수 있다.
• 데이터에 접근하는 방법은 점( . )으로 연결하거나 배열처럼 접근하는 방법이 있다.

const 객체이름 = {
	이름1 : "ㅋㅋㅋ",
    	이름2 : 123,
        이름3 : ["문자열", 3.14, 1111, true, null]
};

// 데이터 출력
console.log(객체이름.이름1);    // ㅋㅋㅋ
console.log(객체이름["이름2"]); // 123
console.log(객체이름.이름3); // ["문자열", 3.14, 1111, true, null]
console.log(객체이름.이름3[0]); // 문자열
console.log(객체이름.이름3[1]); // 3.14
console.log(객체이름["이름3"][2]); // 1111
console.log(객체이름.이름3[3]); // true
console.log(객체이름.이름3[4]); // null

 

3) 계층구조

• JSON 표기법의 장점은 복잡한 정보 구조를 계층화하여 표한할 수 있다.

// 단일 형태의 JSON
const name1 = {
	a : 1,
    	b : 2
};


//다른 JSON을 포함하는 JSON
const jason1 = {
	c : name1,
        d : 3
};

console.log(jason1.c); // { a: 1, b: 2 }
console.log(jason1.c.a); // 1
console.log(jason1.c.b); // 2
console.log(jason1.d); // 3


// 계층적으로 정의된 경우
const jason2 = {
  name2 : {
    a2 : 4,
    b2 : 5
  },
  c2 : 6
};

console.log(jason2.name2); // { a2: 4, b2: 5 }
console.log(jason2.name2.a2); // 4
console.log(jason2.name2.b2); // 5
console.log(jason2.c2); // 6

 

4) 목록 구조

• JSON의 value가 배열로 정의되어 있으면서, 각 배열의 원소가 또 다른 JSON 형식인 형태이다.
• 배열의 원소로 포함되는 JSON 끼리는 동일한 구조를 갖는다.(목록형태는 표시하는 항목이 동일하다)
• JSON 안에 배열이 들어갈 수 있고, 반대로 배열 안에 JSON이 들어갈 수 있다

const example = {
	key: [{
    		key1: 1, 
        	key2: 2
	}, {
    		key1: 3, 
        	key2: 4
	}]
};
console.log(example); // { key: [ { key1: 1, key2: 2 }, { key1: 3, key2: 4 } ] }

• JSON 객체를 다른 JSON 객체에 안에 배열 형식으로 넣을 수 있다.

// JSON 객체 정의
const example1 = {
	key1: 1,
    	key2: 2,
    	key3: '3'
};

const example2 = {
	key1: 4,
    	key2: 5,
    	key3: '6'
};

// JSON 객체를 배열로 명시
const example3 = {
	sample: [example1, example2]	
};
console.log(example3);
// { sample: [ { key1: 1, key2: 2, key3: '3' }, { key1: 4, key2: 5, key3: '6' } ] }

• 배열의 원소로서 JSON 구조를 직접 명시할 수 있다.

const example = {
	key: [{
    		key1: 1,
        	key2: 2,
        	key3: '3'
	}, {
    		key1: 4,
        	key2: 5,
        	key3: '6'
    	}]
};
console.log(example);
// { key: [ { key1: 1, key2: 2, key3: '3' }, { key1: 4, key2: 5, key3: '6' } ] }

• 목록을 구성하는 배열 외에 목록을 설명하기 위한 부가 정보도 함께 포함할 수 있다.
  • 가장 일반적인 형태의 목록 구조이다

const example = {
	title: "공지사항",
    	count: 4,
    	item: [
    		{id: 1, subject: "첫 번째 게시물 제목"},
            	{id: 2, subject: "두 번째 게시물 제목"},
            	{id: 3, subject: "세 번째 게시물 제목"},
            	{id: 4, subject: "네 번째 게시물 제목"}
        ]
};
console.log("제목: " + example.title);
console.log("게시물 수: " + example.count);


// JSON 객체 안에 선언된 배열도 for문을 통해 탐색할 수 있다
for(let i = 0; i < example.item.length; i++) {
	console.log(`${example.item[i].id}번-${example.item[i].subject}`);
}

[출력]
/*
제목: 공지사항
게시물 수: 4
1번-첫 번째 게시물 제목
2번-두 번째 게시물 제목
3번-세 번째 게시물 제목
4번-네 번째 게시물 제목
*/

 

3. JSON의 구조 확장

존재하지 않는 key를 사용하는 경우

• 존재하지 않는 key에 대해 출력하거나 다른 변수에 대입할 경우 undefined로 처리된다.

const example = {
	name: "이름",
    	age: 1
};


// 존재하지 않는 값 출력
console.log(example.height); // undefined


// 존재하지 않는 값에 대한 연산 (+오타)
const example2 = example.height + 1;
console.log(example2); // NaN


// 존재하지 않는 key에 대한 대입
example.gender = "male";
console.log(example); // { name: '이름', age: 1, gender: 'male' }


// 빈 객체 확장
const myJson = {}; // 빈 객체 선언

for(let i = 0; i < 5; i++)	{
  const key = "value" + i;
  myJason[key] = i * 10;
}
console.log(myJson); // { value0: 0, value1: 10, value2: 20, value3: 30, value4: 40 }

 

4. for-in 문

• JSON 객체의 key를 탐색할 수 있다.
• for-of 는 배열 탐색할 때 사용하고, for-in 은 JSON의 객체를 탐색할 때 사용한다.

const example = {
	key1: 1,
	key2: 2,
	key3: "33",
	key4: "44"
};

for(let i in example) {
	console.log(i)
}

[출력]
/*
key1
key2
key3
key4
*/

// for-in 문으로 key:value 출력하기
for(let i in example) {
	console.log(`${i}: ${example.[i]}`);
}

[출력]
/*
key1: 1
key2: 2
key3: 33
key4: 44
*/

 

5. 참조 복사

• 배열, JSON은 데이터가 어딘가에 저장되고, 데이터를 찾아갈 수 있는 위치 정보가 복사되는 형태라서 원본을 바꾸면 다 바뀐다.

※ 일반 변수끼리 복사한 경우, 원본이 변경돼도 복사본에는 영향이 없다.

let a = 100;
let b = a;
console.log(`a = ${a}, b = ${b}`);  // a = 100, b = 100

//일반 변수끼리 복사한 경우, 원본이 변경되도 복사본에는 영향이 없다.
a++;
console.log(`a = ${a}, b = ${b}`);  // a = 101, b = 100

 

1) 얕은 복사 (=참조 복사)

• 배열, JSON, 객체끼리의 복사는 참조 처리된다.
• 원본을 수정하면 복사본도 함께 수정된다. (반대의 경우도 마찬가지)

const example = {
	name: "Andy";
};

// 다른 변수에 객체 대입
const who = example;

console.log(example);  // { name: 'Andy' }
console.log(who);  // { name: 'Andy' }

// 다른 변수에 대입된 객체 이름 수정
who.name = "Tom";

console.log(example);  // { name: 'Tom' }
console.log(who);  // { name: 'Tom' }

 

2) 깊은 복사

• 원본을 수정해도 복사본은 변경되지 않는다. (반대의 경우도 마찬가지)
• for-in 문을 활용해서 깊은 복사를 할 수 있다.

// 객체 생성
const addr = {
	country: "한국",
	city: "서울"
    
};

// 빈 객체 생성
const copy = {};


// for-in문을 활용해서 copy 변수에 객체 대입(복사)
for(let key in addr) {
	copy[key] = addr[key];
};

console.log(addr);  // { country: '한국', city: '서울' }
console.log(copy);  // { country: '한국', city: '서울' }

// 원본의 객체 값을 "부산"으로 변경
addr.city = "부산";

console.log(addr);  // { country: '한국', city: '부산' } // 원본 변경
console.log(copy);  // { country: '한국', city: '서울' } // 복사본 변경x

• Object.assign()을 활용한 깊은복사

const addr = {
	country: "한국",
	city: "서울"
    
};

// 빈 객체 생성
const copy2 = {};

Object.assgin(copy2, addr);
console.log(copy2);  // { country: '한국', city: '서울' }

3) 배열의 얕은 복사와 깊은 복사

• 얕은 복사

const a = [1,2,3];
const b = a;

console.log(a;  // [1, 2, 3]
console.log(b;  // [1, 2, 3]

a[0]++;
a[1]++;
a[2]++;
console.log(a;  // [2, 3, 4]
console.log(b;  // [2, 3, 4]

 

• 깊은 복사

const a1 = [1,2,3];

// 원본과 동일한 길이의 배열 생성
const a2 = new Array(a1.length);

// 배열을 온전히 값 복사하기 위해서는 원소끼리 개별복사를 해야 한다
for(let i = 0; i < a1.length; i++) {
	a2[i] = a1[i];
};


// ※ slice() 메서드를 활용한 깊은 복사
const a3 = a1.slice();  // 깊은 복사를 한번에 해주는 배열 메서드

console.log(a1);  // [ 1, 2, 3 ]
console.log(a2);  // [ 1, 2, 3 ]
console.log(a3);  // [ 1, 2, 3 ]

a1[0] += 100;

console.log(a1);  // [ 101, 2, 3 ]
console.log(a2);  // [ 1, 2, 3 ]
console.log(a3);  // [ 1, 2, 3 ]

 

6. 구조 분해

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

1) JSON에 대한 구조분해 (=비구조 할당)

• JSON(혹은 객체)에서 값들을 추출해 새로운 상수로 만든다.
• 객체 안에 명시된 항목과 동일한 key를 갖는 데이터가 존재해야 한다. (원본 key 이름과 일치해야 한다)

const example = {
	a: 1,
    	b: 2
};

const {a, b} = example;

console.log(a);  // 1
console.log(a);  // 2

• 구조분해를 활용하여 필요한 데이터만 추출할 수 있다.

const example = {
	name: "Andy",
    	age: 25,
    	height: 180,
    	weight: 86
};

const {name} = example;
console.log(name);  // Andy


// 객체 안에 있는 key를 분해하면서 이름을 변경할 수 있다.
const {name: a, age: b, height: c, weight: d} = example;

console.log(a);  // Andy
console.log(b);  // 25
console.log(c);  // 180
console.log(d);  // 86

// 원본 객체의 key는 그대로인 것을 확인 할 수 있다. 
console.log(example); // { name: 'Andy', age: 25, height: 180, weight: 86 }

 

2) 나머지 매개변수 활용

• 구조분해를 수행한 나머지를 별도로 분리할 수 있다. (나머지 매개변수)
• " ...이름 " 을 활용하여 구분한다.

const example = {
	a: 1,
    	b: 2,
        c: 3,
        d: 4,
};

const {a, b, ...etc} = example;
console.log(a);  // 1
console.log(b);  // 2
console.log(etc);  // { c: 3, d: 4 }

• 나머지 매개변수를 활용한 기존 데이터에 새로운 값을 추가하여 새로운 객체 생성

const origin = {
	name: "Josh",
    	age: 27
};

const newdata = {...origin, gender: "male"};
console.log(newdata); // { name: 'Josh', age: 27, gender: 'male' }


// 새로운 데이터 생성시 원본과 동일한 이름의 속성이 있다면 데이터가 수정된다.
const newdata2 = {...origin, age: 30, gender: "female"};
console.log(newdata2) // { name: 'Josh', age: 30, gender: 'female' }

// 처음 선언한 객체는 그대로인 것을 확인할 수 있다.
console.log(origin); // { name: 'Josh', age: 27 }

 

3) 배열에 대한 구조분해

• JSON은 key의 이름으로 구분하지만, 배열은 위치로 구분하기 때문에 원본과 이름이 일치하지 않아도 된다.

const example = [1,2];
const [ex1,ex2] = example;

console.log(ex1);  // 1
console.log(ex2);  // 2

• 배열도 나머지 매개변수를 활용하여 별도로 분리할 수 있다.

[b1, b2, ...etc] = [3,1,2,4,6,8,7,5,9];

console.log(b1);  // 3
console.log(b2);  // 1
console.log(etc);  // [ 2, 4, 6, 8, 7, 5, 9 ]