[Javascript] JSON 객체 - parse(), stringify() 같이 사용하여 깊은 복사하기
JSON(JavaScript Object Notation)이란, 자바스크립트에서 객체를 만들 때 사용하는 표현식이다. 데이터 전송 등에 많이 사용된다. JSON에 내장된 함수인 parse()와 stringify() 메서드에 대해 알아보고 이 두 가지 메서드를 활용하여 깊은 복사하는 방법까지 알아보도록 하자.
1. JSON.parse()
JSON.parse() 메서드를 사용하면, 문자열(String)을 객체(Object)로 만들 수 있다.
구문
|
1
|
JSON.parse('텍스트', (속성명, 속성값));
|
cs |
매개변수인 속성명(key)과 속성 값(value)은 선택사항으로, 사용해야 하는 경우에만 작성해준다.
예제
|
1
2
3
4
5
6
7
8
9
10
|
JSON.parse('{}'); // {}
JSON.parse('[1, 40, 13, "가", "나"]'); // [1, 40, 13, '가', '나']
JSON.parse('{"name": "Jay", "age": 33, "gender": "M"}'); // {name: 'Jay', age: 33, gender: 'M'}
JSON.parse('{"name": "Jay", "age": 33, "gender": "M"}', (key, value) => {
console.log(value);
return key;
});
// Jay
// 33
// M
|
cs |
2. JSON.stringify()
JSON.stringify() 메서드를 사용하며, 객체(Object)를 JSON 문자열(String)로 만들 수 있다. JSON.parse()와 반대의 역할을 하는 메서드이다.
구문
|
1
|
JSON.stringify(객체);
|
cs |
예제
JSON.stringify를 사용하면 날짜 객체의 경우도 문자열로 반환해준다.
|
1
2
|
JSON.stringify({name: "Jay", age: 33, gender: "M"}); // '{"name":"Jay","age":33,"gender":"M"}'
JSON.stringify(new Date(2021, 9, 18, 15, 4, 5)); // '"2021-10-18T06:04:05.000Z"'
|
cs |
3. JSON.parse() + JSON.stringify() 깊은 복사하기
JSON.perse()와 JSON.stringify()는 서로 반대 성향의 메서드이다. 이 두 가지를 한 번에 사용하면 유용한 메서드가 탄생한다. 바로, 깊은 복사(deep copy)다. 이 두 메서드를 조합하여 객체를 깊은 복사할 수 있다. 참조와 복사에 대해서는 아래 페이지에서 참고하면 된다.
[Javascript] 객체의 참조, 얕은 복사, 깊은 복사
자바스크립트에서 객체를 다루려면 참조와 복사의 개념에 대해 반드시 알아야 한다. 객체의 참조, 얕은 복사, 깊은 복사의 차이점에 대해 자세히 알아보도록 하겠다. 요약 의미 방식 참조 (referen
fromnowwon.tistory.com
참조(reference)는 같은 객체를 저장했다면, 한쪽에서 수정하여도 다른 쪽 객체가 똑같이 수정되는 현상이다. 복사(copy)는 이러한 참조 현상이 생기지 않는다. 아래 예제를 통해 참조와 깊은 복사의 차이를 알아보도록 하자.
예제
참조
변수 b는 변수 a와 같은 객체를 참조하고 있으므로, a 변수에 담긴 객체를 수정하면 b 변수에 담긴 객체도 동일하게 수정된다. a와 b는 객체 간에 참조 관계가 있다.
|
1
2
3
4
5
6
7
8
9
|
const a = {
"name": "Jay",
"age": 33,
"gender": "M"
};
const b = a;
a["name"] = "Mike";
console.log(b["name"]); // Mike
|
cs |
깊은 복사
변수 b에 a와 같은 내용의 객체를 담았지만, JSON.parse와 JSON.stringify 메서드를 사용하여 복사했기 때문에 새로운 객체로써 사용할 수 있다. 따라서, a에 담긴 객체의 name 값을 변경하였지만 b에 담긴 객체는 변경되지 않는다.
|
1
2
3
4
5
6
7
8
9
|
const a = {
"name": "Jay",
"age": 33,
"gender": "M"
};
const b = JSON.parse(JSON.stringify(a));
a["name"] = "Mike";
console.log(b["name"]); // Jay
|
cs |