오늘 기술면접 진행중에 면접관님께서 JSON에 관하여 물어보셨다. 그 중에서도 JSON.stringfy에 관하여 여러가지 물어보셨다.
JSON.stringfy를 이용하여 객체를 비교하였는데 객체가 아닌 다른 값들을 대입하면 결과값이 무엇인지에 대한 질문이었다.
사실 평소에 깊게 생각해보지 않아서 이번 기회에 정리해보려 한다.
JSON이란?
우선 JSON이 무엇인지에 대해 살펴보아야 할 것 같다.
JavaScript Object Notation의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환방식
과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그 등의 여러 요소로 가독성이 떨어지고 용량이 크기 때문에 이를 대체한 것이 JSON이다.
JSON은 string, number, boolean, null, object, array의 6가지 자료형을 표현할 수 있다.
객체 안에 객체를 넣을 수 있어 xml처럼 복잡한 구조 또한 표현 가능하다.
기본적으로 자바스크립트 객체 표기법의 부분집합이기 때문에 웹 브라우저에서 쉽게 해석할 수 있으며, 규칙이 단순하여 다른 언어에서 구현하기 쉽다.
하지만 문법 오류에 민감하며(콤마 누락, 중괄호 오타 등 오류 발생시 Json 파일이 망가짐) 주석을 지원하지 않는다.
JSON.stringfy
MDN에 작성되어있는 설명을 가져와 보면 다음과 같다.
JSON.stringify()는 값을 JSON 표기법으로 변환한다.
- 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다.
- Boolean, Number, String 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 변환된다.
- undefined, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환된다(배열 안에 있을 경우).
- 심볼을 키로 가지는 속성들은 replacer 함수를 사용하더라도 완전히 무시된다.
- 열거 불가능한 속성들은 무시된다.
MDN에 작성되어있는 예제들을 살펴보자.
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify('foo'); // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
// '"2006-01-02T15:04:05.000Z"'
JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'
// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
if (typeof k === 'symbol') {
return 'a symbol';
}
});
// '{}'
// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}'이 외에도 면접 당시 받았던 질문들은 아래와 같다.
JSON.stringify(undefined); //undefined
JSON.stringify(new Set([1,2,3,4]); //'{}'
const map1 = new Map();
map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
JSON.stringify(map1); //'{}'
class A {
constructor(){
this.name = "classA"
}
}
class B {
constructor(){
this.name = "classB"
}
}
class C {
constructor(){
this.name = "classC"
}
c(){
console.log("c");
}
}
JSON.stringify(new A());//'{"name":"classA"}'
JSON.stringify(new B());//'{"name":"classB"}'
JSON.stringify(new B());//'{"name":"classC"}'그냥 JSON이 지원하는 6가지 자료형만 사용하는 것이 마음 편할 것 같다.
