[JS] JSON과 객체 다루기

안녕하세요 Foma 💻 입니다!

 

오늘은 JavaScript로 JSON과 객체를 다루는 법에 대해서 정리해 보도록 하겠습니다.

 

바로 시작할게요~

---

객체를 JSON으로 바꾸기

 

JSON.stringify(객체) 구문을 사용하시면 됩니다.

 

let user = {
    name:"foma",
    age:27,
    color:"Black",
    [Symbol("id")]:123
}
let json = JSON.stringify(user)
console.log(json) //{"name":"foma","age":27,"color":"Black"}

 

만약 메서드나 undefined값을 가진 프로퍼티가 있다면 자동으로 무시합니다.

 

user.sayHi = function() {
    print("sayHi")
}
user.somthing = undefined
let json = JSON.stringify(user)
console.log(json) //{"name":"foma","age":27,"color":"Black"}

 

중첩된 객체도 알아서 바꿔줍니다.

 

user.family =  {
    father:"KS",
    mother:"MR"
}
let json = JSON.stringify(user)
console.log(json) //{"name":"foma","age":27,"color":"Black","family":{"father":"KS","mother":"MR"}}

 

주의하실 점은 아래와 같이 순환참조가 있다면 에러가 납니다.

 

let room = {
    number:92
}
room.user = user
user.room = room
//에러
console.log(JSON.stringify(user))

 

원하는 프로퍼티만 인코딩하는 방법은 두 가지가 있는데요.

 

첫 번째는 원하는 프로퍼티를 지정해주는 방법이고,

 

console.log((JSON.stringify(user,['name','age'])) //{"name":"foma","age":27}

 

두 번째는 원하지 않는 프로퍼티를 빼는 방법입니다.

 

return key == "빼고싶은 프로퍼티명" 을 넣으시면 됩니다.

 

let json = JSON.stringify(user,function replacer(key,value) {
    return (key == "name") ? undefined : value
}) 

console.log(json) //{"age":27,"color":"Black","family":{"father":"KS","mother":"MR"}}

 

JSON.stringify(value,replacer,space)에서 space에 값을 넣어줘 가독성을 높일 수 있습니다.

 

print(JSON.stringify(user,null,2))
/*{
  "name": "foma",
  "age": 27,
  "color": "Black",
  "family": {
    "father": "KS",
    "mother": "MR"
  }
}
*/

---

JSON을 객체로 만들기(Parsing)

 

JSON.parse("JSON문자열") 구문을 이용하면 됩니다.

 

let parse = JSON.parse(json)
print(parse.name) //"foma"

 

만약 날짜를 나타내는 것이 있다면 객체로 바꿀 때 Date로 바꿔줘야겠죠?

 

아래와 같이 특정 프로퍼티만 원하는 자료형으로 바꿀 수 있습니다.

 

let parse1 = JSON.parse(json,function(key,value) {
    if (key == "createdDate") {
        return new Date(value)
    }else {
        return value
    }
})
print(parse1.createdDate.getDate()) //4

---

Reference

 

모던 JavaScript 튜토리얼