[JS] ๐Ÿ–‡JSON.stringify / ๐Ÿ–‡JSON. parse

TATAยท2023๋…„ 2์›” 13์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
24/25

โ–ท JSON์ด๋ž€?

JavaScript Object Notation

JSON์€ ๋ฐ์ดํ„ฐ ๊ตํ™˜์„ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๊ฐ์ฒด ํ˜•ํƒœ์˜ ํฌ๋งท์„ ๋งํ•œ๋‹ค.

const message = {
  sender: "TATA",
  receiver: "CHIMMY",
  message: "CHIMMY์•ผ ์˜ค๋Š˜ ์ ์‹ฌ ๋ญ ๋จน์„๊นŒ?",
  createdAt: "2022-02-14 10:10:10"
}
// ๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ์ด ๊ฐ์ฒด ๋‚ด์šฉ์„ ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋žจ์—๊ฒŒ ์ „์†กํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด,
// JSON.stringify์™€ JSON.parse๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.
// JSON.stringify => ๊ฐ์ฒด๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.
// JSON.parse => JSON์„ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.
// โ—๏ธ์ฐธ๊ณ ) ์ „์†ก ๊ฐ€๋Šฅ ์กฐ๊ฑด - ์ˆ˜์‹ ์ž์™€ ๋ฐœ์‹ ์ž๊ฐ€ ๊ฐ™์€ ํ”„๋กœ๊ทธ๋žจ์„ ์‚ฌ์šฉ, ๋˜๋Š” ๋ฌธ์ž์—ด์ฒ˜๋Ÿผ ๋ฒ”์šฉ์ ์œผ๋กœ ์ฝ์„ ์ˆ˜ ์žˆ์–ด์•ผ ํ•จ

๐Ÿ–‡JSON.stringify

๊ฐ์ฒด๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ด๋‹ค.
(JSON์œผ๋กœ ๋ณ€ํ™˜๋œ ๊ฐ์ฒด์˜ ํƒ€์ž…์€ ๋ฌธ์ž์—ด์ด๋‹ค.)

โ—๏ธ์ฐธ๊ณ ) stringifyํ•˜๋Š” ์ด ๊ณผ์ •์„ ์ง๋ ฌํ™”(serialize)ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

// message๊ฐ์ฒด๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ JSON.stringify
let transferableMessage = JSON.stringify(message)

console.log(transferableMessage) 
// `{"sender":"TATA","receiver":"CHIMMY","message":"CHIMMY์•ผ ์˜ค๋Š˜ ์ ์‹ฌ ๋ญ ๋จน์„๊นŒ?","createdAt":"2022-02-14 10:10:10"}`

console.log(typeof(transferableMessage))
// `string`

๐Ÿ–‡JSON. parse

JSON(๋ฌธ์ž์—ด)์„ ๋‹ค์‹œ ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜์‹œ์ผœ ์ค€๋‹ค.

โ—๏ธ์ฐธ๊ณ ) JSON.parseํ•˜๋Š” ๊ณผ์ •์„ ์—ญ์ง๋ ฌํ™”(deserialize)ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

// ์ง๋ ฌํ™”๋œ JSON์— ๋ฉ”์„œ๋“œ JSON.parse๋ฅผ ์ ์šฉํ•˜๋ฉด,
// ๋‹ค์‹œ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
let packet = `{"sender":"TATA","receiver":"CHIMMY","message":"CHIMMY์•ผ ์˜ค๋Š˜ ์ ์‹ฌ ๋ญ ๋จน์„๊นŒ?","createdAt":"2022-02-14 10:10:10"}`
let obj = JSON.parse(packet)

console.log(obj)
/*
 * {
 * sender: "TATA",
 * receiver: "CHIMMY",
 * message: "CHIMMY์•ผ ์˜ค๋Š˜ ์ ์‹ฌ ๋ญ ๋จน์„๊นŒ?",
 * createdAt: "2022-02-14 10:10:10"
 * }
 */

 console.log(typeof(obj))
 // `object`

์ง๋ ฌํ™”์™€ ์—ญ์ง๋ ฌํ™” ๋ชจ์‹๋„


๐Ÿ”ฅJSON vs JS๊ฐ์ฒด

๋น„์Šทํ•ด ๋ณด์ด์ง€๋งŒ ๋‹ค๋ฅด๊ฒŒ ์ƒ๊ธด JSON๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒดJSON
ํ‚คํ‚ค๋Š” ๋”ฐ์˜ดํ‘œ ์—†์ด ์“ธ ์ˆ˜ ์žˆ์Œ { key : "property" }๋ฐ˜๋“œ์‹œ ์Œ๋”ฐ์˜ดํ‘œ๋ฅผ ๋ถ™์—ฌ์•ผ ํ•จ '{"key":"property"}'
๋ฌธ์ž์—ด ๊ฐ’์ž‘์€๋”ฐ์˜ดํ‘œ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ { "key" : 'property' }๋ฐ˜๋“œ์‹œ ํฐ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ธ์•ผ ํ•จ '{"key":"property"}'
ํ‚ค์™€ ๊ฐ’ ์‚ฌ์ด ๊ณต๋ฐฑ์‚ฌ์šฉ ๊ฐ€๋Šฅ {"key" : 'property'}์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅ '{"key":"property"}'
ํ‚ค-๊ฐ’ ์Œ ์‚ฌ์ด ๊ณต๋ฐฑ์‚ฌ์šฉ ๊ฐ€๋Šฅ { "key":'property', num:1 }์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅ '{"key":"property","num":1}'



๐Ÿ‘‰ JSON ๊ณต์‹ ๋ฌธ์„œ

profile
๐Ÿพ

0๊ฐœ์˜ ๋Œ“๊ธ€