티스토리 뷰
반응형
자바스크립트 JSON 문법
JSON.stringfy
JSON.stringfy | 객체 ==> JSON |
JSON.parse | JSON ==> 객체 |
let me = {
name : 'coorin',
age : 200,
MBTI : 'INFJ'
};
let json = JSON.stringify(me); //객체 ==> JSON
console.log(typeof json); //string
console.log(json); //{"name":"coorin","age":200,"MBTI":"INFJ"}
JSON.stringfy(me)를 호출하자, me가 문자열로 변환됨
이렇게 변경된 문자열은 JSON으로 인코딩된(JSON-encoded), 직렬화처리된(serialized), 문자열로 변환된(stringfied), 결집된(marshalled) 객체라고 부름. 객체는 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장할 수 있음
JSON으로 인코딩된 객체는 일반 객체와 다른 특징 : 문자열은 큰따옴표로 감싸야 함!! (백틱, 작은따옴표 사용 X)
JSON.stringfy는 객체뿐만 아니라 원시값에도 적용할 수 있음
문자열을 JSON으로 인코딩하면 문자열이지만, 큰따옴표가 추가됨
또한 중첩객체도 알아서 문자열로 변경해줌
console.log(JSON.stringify(1)); // 1
console.log(JSON.stringify('test')); //"test"
console.log(JSON.stringify(true)); //true
console.log(JSON.stringify([1,2,3])); //[1,2,3]
//중첩객체
let me = {
name : 'coorin',
age : 200,
MBTI : 'INFJ',
day : {
number : 31,
week : ['one', 'two']
}
};
console.log(JSON.stringfy(me));
//{"name":"coorin","age":200,"MBTI":"INFJ","day":{"number":31,"week":["one","two"]}}
JSON.stringfy 호출 시 무시되는 프로퍼티
- 함수 프로퍼티 (메서드)
- 심볼형 프로퍼티 (키가 심볼인 프로퍼티)
- 값이 undefined인 프로퍼티
let user = {
sayHi(){ //메소드 무시
console.log("HI");
},
[Symbol("id")] : 123, //심볼 무시
something : undefined //undefined 무시
};
console.log(JSON.stringify(user)); // {} 빈 객체
JSON.parse
JSON 데이터를 객체 형식으로 변환시켜줌
let rabbit = {
name : 'tori',
color : 'white',
size : null,
participants: [{name: "John"}, {name: "Alice"}],
birthDate : new Date(),
jump : () => { // 함수는 스트링화 안됨.
return 100;
}
}
let json = JSON.stringify(rabbit); //JSON => 객체
let obj = JSON.parse(json); //객체 => JSON
console.log(json);
console.log(obj);
json 결과값 :
{"name":"tori","color":"white","size":null,"participants":[{"name":"John"},{"name":"Alice"}],"birthDate":"2023-04-20T02:47:48.236Z"}
obj 결과값 :
{
name: 'tori',
color: 'white',
size: null,
participants: [ { name: 'John' }, { name: 'Alice' } ],
birthDate: '2023-04-20T02:47:48.236Z'
}
꼭 JSON 타입이 아니더라도, 문자열 타입의 데이터가 있다면 이 역시 변환이 가능함 (다만 JSON 포맷에 반드시 따라야함)
!! 문자열은 ' ' 가 아닌 , " "로 감싸야 함!
반응형
'Language > JavaScript' 카테고리의 다른 글
스크립트로 테이블 자동 생성 (0) | 2023.05.15 |
---|---|
dropzone 공부 (0) | 2023.05.03 |
JSON 기본 (0) | 2023.04.20 |
FormData 기본 (0) | 2023.04.20 |
동기와 비동기 (0) | 2023.04.20 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 문자열함수
- StringTokenizer 클래스
- Objects 클래스
- Date 클래스
- StringBuffer 클래스
- 요소선택
- Random 클래스
- java.time.package
- 딕셔너리
- 리스트
- Format 클래스
- Arrays 클래스
- 스레드 스케줄링
- FALSE
- 프로그램
- 기본 API 클래스
- 포장 클래스
- 리스트연산자
- not_in
- 파이썬
- 자료형
- Pattern 클래스
- StringBuilder 클래스
- 역반복문
- python
- 함수
- Calendar 클래스
- IndexError
- 순환할당
- Math 클래스
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
글 보관함