Javascript

JSON Object

아이티프로 2023. 1. 24.
반응형

현재 대부분 자료형을 JSON Object를 사용해서 핸들링하고 있으므로 명확하게 인지해야 한다.

let jsonObject = {};
jsonObject.name = "John";
jsonObject.age = 30;
jsonObject.address = {
    street: "123 Main St",
    city: "Anytown",
    state: "USA"
};
console.log(jsonObject);
// Output: { name: "John", age: 30, address: { street: "123 Main St", city: "Anytown", state: "USA" } }

{}키워드로  jsonObject를 생성하고 프로퍼티 값을 넣는다. 자바스크립트에서 Object와 JSON Object는 다르지 않다.

JSON규약의 문자열을 자바스크립트에서 Object화 시킨 것으로 Object사용에서는 동일하다.

 

let jsonString = '{"name":"John", "age":30}';
let jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: "John"
console.log(jsonObject.age); // Output: 30

JSON.parse(jsonString)문을 보면 JSON규약의 문자열을  JSON.parse문을 사용하여 jsonObject로 만든것 이다.

 

let jsonString = '[1, 2, 3, 4, 5]';
let jsonArray = JSON.parse(jsonString);
console.log(jsonArray[0]); // Output: 1
console.log(jsonArray[4]); // Output: 5

배열로 되어 있는 문자열을 JSON.parse문을 사용하여 변환하면 JSON array가 되며 array는 인덱스로 핸들링한다.

array안의 값이 원시형 변수면 변수값으로 리턴되고, Object형이 객체로서 핸들링한다.

 

let jsonObject = { name: "John", age: 30, address: { street: "123 Main St", city: "Anytown", state: "USA" } };
console.log(jsonObject.name); // Output: "John"
console.log(jsonObject.address.city); // Output: "Anytown"

위 예에서는 jsonObject 안에 address라는 Object가 존재하므로 jsonObject.address.city처럼 값을 가져올 수 있다.

 

let jsonArray = [];
jsonArray.push({name: "John", age: 30});
jsonArray.push({name: "Jane", age: 25});
console.log(jsonArray);
// Output: [{name: "John", age: 30}, {name: "Jane", age: 25}]

console.log(jsonArray[1].name); // Output: "Jane"

 jsonArray라는 배열을 생성하고 배열에 push매소드를 사용해 값으로 name속성과  age속성을 갖는 객체 {}를 추가하는 예제이며 이 경우 jsonArray에 들어있는 데이터는 객체유형이다.

배열의 인덱스로 객체를 구하여 console.log(jsonArray[1].name); // Output: "Jane" 

처럼 가져올 수 있다.

 

let jsonObject = { name: "John", age: 30, address: { street: "123 Main St", city: "Anytown", state: "USA" } };
let jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // Output: {"name":"John","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"USA"}}

jsonObject를 일반문자열로 변환한다.

 

let jsonObject = { name: "John", age: 30, address: { street: "123 Main St", city: "Anytown", state: "USA" } };
jsonObject.name = "Jane";
jsonObject.address.city = "Anothertown";
console.log(jsonObject);
// Output: { name: "Jane", age: 30, address: { street: "123 Main St", city: "Anothertown", state: "USA" } }

위의 예제는 jsonObject의 속성값을 변경하는 예제이다. 점 `.'을 사용해 해당 프로퍼티를 지정하고 값을 할당하여 변경할 수 있다. 

 

let jsonObject = { name: "John", age: 30 };
jsonObject.gender = "male";
console.log(jsonObject);
// Output: { name: "John", age: 30, gender: "male" }

jsonObject에 점 `.`을 사용해서 신규 속성명(키워드)에 값을 할당하여 신규 속성을 추가할 수 있다.

 

 

반응형

'Javascript' 카테고리의 다른 글

에러 처리 & 디버깅  (0) 2023.01.24
Arrow function 화살표함수  (0) 2023.01.24
Class 클래스  (0) 2023.01.24
Cookie  (0) 2023.01.24
window 객체  (0) 2023.01.23

댓글