[JavaScript] JSON

JSON

JavaScript Object Notation(자바스크립트 객체 표기법)의 줄임말로 JSON이라 표현한다. 데이터를 저장하거나 전송할 때 많이 사용되는 Data 교환 형식이며, 객체를 만들 때 사용하는 표현식을 의미한다. 단순히 데이터를 표시하는 표현 방법이며, 데이터 포맷일 뿐이다. 사실상 산업 표준으로 사용하고 있다.

Object(객체)의 임시 정의

데이터 이름과 값의 한 쌍으로 구성되며, key와 value의 쌍으로 구성된 자료 구조이다.
하나의 변수 안에 다른 하위 변수를 내장하는 특수한 형태의 변수이며, 하위 데이터에 접근하기 위해서는 점(.)으로 구분한다.
그러므로, JSON은 어떤 변수 안에 하위 변수를 내장시키기 위한 JavaScript의 표기법이라고 할 수 있다.

객체변수이름.하위변수1이름 = 123;
객체변수이름.하위변수2이름 = 456;
객체변수이름.하위변수n이름 = 999;

JSON 표기법으로 객체 정의

1. 변수들의 그룹으로서의 객체 정의

하나의 변수에 하위 정보들이 포함되어 있는 변수들의 그룹으로 이해한다.
key 이름을 지정한 후, 콜론(:)으로 구분 지은 후에 값을 명시하며, 두 개 이상의 데이터는 콤마(,)로 구분한다.
원칙적으로 key 이름은 따옴표로 감싸는 것이 맞지만, key 이름에 띄어쓰기나 대시(-)가 ㅇ벗는 경우에는 따오표 처리를 생략해도 무관하다. 숫자, boolean, null, undefined는 따옴표를 적용하지 않는다.

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

/** 변수들의 그룹으로서의 JSON 정의 */
const student = {
    // key: value, key: value ... 의 형식으로 나열
    // 숫자, boolean, null, undefined는 따옴표 적용 안 함
    studno: 10101,
    grade: 1,
    name: "학생1",
    phoneno: "010-1231-2342"
};

• 가장 기본적인 방법의 출력
  • 데이터에 접근하는 기본적인 방법은 객체이름.하위정보이름이며, 90% 이상의 경우에서 이 방식을 사용한다.

console.log("----------출력 type1----------");
console.log("학번: " + student.studno);
console.log("학년: " + student.grade);
console.log("이름: " + student.name);
console.log("연락처: " + student.phoneno);
console.groupEnd();

• JSON의 key 이름을 배열의 인덱스처럼 활용

console.log("----------출력 type2----------");
console.log("학번: " + student['studno']);
console.log("학년: " + student['grade']);
console.log("이름: " + student['name']);
console.log("연락처: " + student['phoneno']);
console.groupEnd();

• 접근하고자 하는 하위 변수의 이름을 동적으로 설정해야 할 경우

const keyName = "phoneno";
console.log(student[keyName]);

• JSON의 key를 배열로 반환하는 명령

const keys = Object.getOwnPropertyNames(student);
console.log(keys);

2. 배열을 포함하는 JSON

JSON의 값에는 지금까지 다룬 모든 형태의 데이터 타입이 지정 가능하다.

const 객체이름 = { 이름1: 숫자, 이름2: 문자열, ..., 이름n: [값1, 값2, 값3 ... 값n] };

console.log(객체이름.이름n[0]);

3. 복합 자료 구조

다양한 데이터 타입을 포함하는 구조로, 점을 통한 접근을 권장한다.

접근 방법	code
점으로 연결	console.log(conpany.name); console.log(conpany.department[0]);
배열처럼 연결	console.log(conpany['since']); console.log(conpany['department'][0]);

const company = {
    name: "(주)굿모닝컴패니",
    since: 2013,
    department: ["기획팀", "디자인팀", "개발팀"]
};

console.log(company.name); //점으로 연결
console.log(company['since']); // 배열처럼 연결
console.log(company.department[0]); //점으로 연결
console.log(company.department[1]); //점으로 연결
console.log(company['department'][0]); // 배열처럼 연결

4. 계층 구조

JSON 표기법의 장점은 복잡한 정보 구조를 계층화하여 표현 가능하다는 것이다.
단일 형태의 JSON 구조를 별도로 참조하는 것이 아닌, 직접 정의하는 패턴으로도 표현이 가능하다.

/** 단일 형태의 JSON */
const json1 = { ... };
const json2 = { ... };


/** 다른 JSON을 포함하는 JSON */
const json3 = {
    data1: json1,
    data2: json2
};


/** 계층적으로 정의된 JSON */
const myjson = {
    data1: {        
        ...
    },
    data2: {
        ...
    }
};

5. 목록 구조

JSON의 value가 배열로 정의되어 있으면서 각 배열의 원소가 또다른 JSON 형식인 경우이다. 배열의 우너소로 포함되는 JSON끼리는 동일한 구조이며, 보통 list형 컨텐츠 구조로 사용한다.

/** 목록 구조를 갖는 JSON 객체 **/
const 객체이름= {
    key: [value, value...]
}


/** 배열의 원소로서 JSON 구조를 직접 명시 **/
const 객체이름 = {
    key : [ {
        key: value, key: value...
    }, {
        key: value, key: value...
    }, {
        key: value, key: value...
    }, {
        key: value, key: value...
    } ]
}

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

const bbs = {
    title: '공지사항',
    count: 4,
    item: [
        {id: 1, subject: '첫 번째 게시물 제목'},
        {id: 2, subject: '두 번째 게시물 제목'},
        {id: 3, subject: '세 번째 게시물 제목'},
        {id: 4, subject: '네 번째 게시물 제목'}
    ]
};

JSON 구조 확장

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

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

• 존재하지 않는 값에 대한 출력

const foo = {
    name: "자바스크립트",
    age: 19
};

// 존재하지 않는 값에 대한 출력 -> undefined
console.log(foo.email);

• 존재하지 않는 값을 활용한 연산

const foo = {
    name: "자바스크립트",
    age: 19
};

const nextAge = foo.aga + 1;	// undefined + 1
console.log(nextAge);

// 숫자가 아닌 결과값이 되므로 Not A Number를 의미하는 NaN이 출력

2. 존재하지 않는 key에 대한 대입

즉시 객체를 확장하며, 존재하지 않는 key에 대한 대입은 자주 사용된다.

const foo = {
    name: "자바스크립트",
    age: 19
};

foo.email = "hello@world.com";
console.log(foo);


/** 결과 **/
{ name: '자바스크립트', age: 19, email: 'hello@world.com' }

3. 빈 객체 확장

아무런 key도 정의되지 않은 빈 JSON 객체에 점진적으로 내용을 덧붙일 수 있다.

const myJson = {}; // 빈 객체
console.log(myJson);

for (let i=0; i<10; i++) {
    const key = "value" + i;
    myJson[key] = i * 100;
}

console.log(myJson);


/** 결과 **/
{}
{
  value0: 0,
  value1: 100,
  value2: 200,
  value3: 300,
  value4: 400,
  value5: 500,
  value6: 600,
  value7: 700,
  value8: 800,
  value9: 900
}

JSON 반복문

배열의 키를 참조하여 반복문을 사용한다. 반복하는 동안 객체를 추가 또는 제거할 수 있다.

for(변수 in Json) {

}

const student = {
    studno: 10101,
    grade: 1,
    name: "학생1",
    phoneno: "010-1231-2342"
};

for (let key in student) {
    console.log(student[key]);
};


/** 결과 **/
10101
1
학생1
010-1231-2342

참조 복사

1. 값 복사

일반 값 복사는 일반 변수끼리의 복사를 의미한다. 일반 변수끼리 복사한 경우, 원본이 변경되면 복사본은 영향을 주지 않는다.

let a = 100;
let b = a; // 변수 b에 변수 a 값 복사
console.log("a = " + a + ", b = " + b);		// a = 100, b = 100

a++; // a 값 1 증가
console.log("a = " + a + ", b = " + b);		// a = 101, b = 100

2. 참조 복사 (=얕은 복사)

배열, JSON, 객체끼리의 복사는 참조 처리를 한다.
여기서 참조 처리란, 원본을 수정하면 복사본도 함께 수정되며, 복사본을 수정해도 원본이 함께 수정되는 것을 말한다.
서로 다른 변수가 같은 객체를 바라보고 있는 것을 의미하며, 객체 안에 객체가 있을 경우에는 한 개의 객체라도 원본 객체를 참조한다면 이는 참조 복사(=얕은 복사)가 된다.
C언어의 포인터(Pointe)와 같은 개념으로 이해가 가능하며, 실제로 값이 복사되지는 않는다.
말 그대로 얕은 복사이므로 에러 발생률이 높은데, 에러 발생률을 낮추기 위해 배열끼리의 복사(=깊은 복사)를 사용한다.

const user = {
    name: "Lee"
};

const member = user; // 상수 member에 상수 user 값 복사
console.log(user);
console.log(member);

member.name = "Kim"; // member의 name 값 수정
console.log(user);
console.log(member);


/** 결과 **/
{ name: 'Lee' }
{ name: 'Lee' }
{ name: 'Kim' }
{ name: 'Kim' }

const d1 = [1, 2, 3];
const d2 = d1; // 상수 d2에 상수 d1 값 복사
console.log(d1);
console.log(d2);

d1[0] += 10; // d1의 0번째 값에 +10
d1[1] += 10; // d1의 1번째 값에 +10
d1[2] += 10; // d1의 2번째 값에 +10
console.log(d1);
console.log(d2);



/** 결과 **/
[ 1, 2, 3 ]
[ 1, 2, 3 ]
[ 11, 12, 13 ]
[ 11, 12, 13 ]

3. 배열끼리의 복사 (=깊은 복사)

• 반복문 이용
  • 같은 값을 출력하며, 온전히 배열의 값을 복사하기 위해서는 원소끼리의 개별 복사가 필요하다.

const a1 = [1, 2, 3];

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

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

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

a1[0] += 100;

console.group("----- a1[0] += 100 -----");
console.log(a1);	// [ 101, 2, 3 ]
console.log(a2);	// [ 1, 2, 3 ]
console.groupEnd();

• 메서드 이용
  • slice 메서드를 이용하면 원소끼리의 개별 복사가 가능하다.

const a1 = [1, 2, 3];

// 배열 객체가 갖는 메서드를 활용한 깊은 복사 방법
const a2 = a1.slice();

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

a1[0] += 100;

console.group("----- a1[0] += 100 -----");
console.log(a1);	// [ 101, 2, 3 ]
console.log(a2);	// [ 1, 2, 3 ]
console.groupEnd();

• JavaScript 내장 기능 이용
  • 빈 JSON 객체를 생성하여, 생성한 객체가 비어 있다면 원본 JSON 객체를 누적 추가하여 복사한다.

/** 반복문 for문 이용 **/
const addr = {
    city: '서울',
    gu: '서초'
};

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

for (let key in addr) {
    copy[key] = addr[key];
}

console.log(addr);	// { city: '서울', gu: '서초' }
console.log(copy);	// { city: '서울', gu: '서초' }

addr.gu = '강남';

console.group("----- addr.gu = '강남' -----");
console.log(addr);	// { city: '서울', gu: '강남' }
console.log(copy);	// { city: '서울', gu: '서초' }
console.groupEnd();

/** Object .assign() 이용 **/
const addr = {
    city: '서울',
    gu: '서초'
};

// 깊은 복사를 수행할 빈 JSON 객체 생성
const copy = {};

// addr을 copy2에 깊은 복사를 수행하는 JS 내장 기능
// 복사될 copy2가 비어있는 json일 경우 복사 가능
// 비어 있지 않으면 추가를 하게 됨 --> 누적
Object.assign(copy, addr);
console.log(copy);	// { city: '서울', gu: '서초' }

addr.gu = '강남';

console.log(addr); // { city: '서울', gu: '강남' }
console.log(copy); // { city: '서울', gu: '서초' }

옵셔널 체이닝 (Optional Chaining)

?.의 형태로 사용하며, 각 참조가 유효한지에 대한 여부를 검사하는 연산자이다.
참조가 null 혹은 undefined라면, 검사를 중지하고 에러식 발생 대신 undefined 값을 리턴한다.
속성 값이 존재한다는 확실한 보증이 없을 경우, 그 객체를 탐색하는 데에 도움을 준다.
옵셔널 체이닝을 사용함으로서 문법의 가독성이 올라가고, 간결한 표현식으로 작성이 가능하다.
그러나, 필수적이지 않은 객체에게만 사용해야 하며, 필수적인 객체에게는 옵셔널 체이닝 대신 if문으로 존재 여부를 검사하는 유효성 검사를 수행하는 것이 좋다.
ES2020에서 새롭게 등장해 JavaScript에 추가된지 얼마 되지 않은 문법으로, IE에서는 지원하지 않고 10% 미만으로 드물게 사용된다.

1. 정의되지 않은 객체에 접근

/** user 안에 address가 정의되지 않았으므로 undefined가 발생 **/
const user = {};

console.log(user.address);	// undefined

2. 정의되지 않은 객체의 하위 기능에 접근

/** address 자체가 정의되지 않은 상태에서 하위 기능에 접근하므로 에러 발생 **/
const user = {};

console.log(user.address.city);		// Error

3. AND 연산자로 객체 존재 여부 검사

/** 단계별로 객체가 존재하는지 검사 **/
const user = {};

console.log(user && user.address && user.address.city);		// undefined

4. 옵셔널 체이닝으로 객체 존재 여부 검사

/** if문이나 AND 연산자 사용 없이 객체 존재 여부 검사 가능 **/
const user = {};

console.log(user?.address?.city);		// undefined