■ 객체(Object)
우리는 지금까지 '객체(Object)'라는 말을 참 많이했어.
홈페이지는 온통 객체야.
이전 DOM 강좌에서 이야기하고 그 뒤 모든 강좌가 DOM 내의 각 객체를 속성(Property)와 메소드(Method)로 조작하는 것을 배웠어.
그런데 이 객체를 우리가 직접 만들 수도 있어.
마치 변수, 상수, 배열을 만들듯이 일종의 '객체변수'를 만드는 것으로 자료 중에는 상수+배열을 합친 것과 비슷하다고 할까?
그리고 이 객체안에 속성과 메소드를 넣어서 다른 Html 객체들 처럼 다룰 수가 있어.
전에 '변수'를 만들 때는 아래와 같은 형식으로 변수를 선언했어. 기억나지?
let man = "홍길동";
이렇게 변수로 지정하면 person 이라는 변수에 값이 하나(이름) 밖에 안들어가.
직업을 위한 변수가 필요하면 job 같은 변수를 하나 또 만들어야 해.
객체는 다음과 같이 만들어.
const person = {name:"홍길동", job:"도둑", age:"500"};
이렇듯 객체는 상수(const)명 1개에 여러개의 값을 가지게 돼. (이름은 '홍길동', 직업은 도둑, 나이는 500살)
객체 선언은 let 을 사용해도 되지만 보통은 const 로 선언하는 것이 일반적이야.
또 위와 같이 한줄로 선언해도 되지만 보통은 아래와 같이 여러 줄로 선언하는 것이 보기 좋아.
const person = {
name: "홍길동",
job: "도둑",
age: "500"
};
(주의할 점은 맨 마지막 속성 뒤에는 컴마(,)가 없어... 사실 있어도 별 문제는 없지만, 원칙이 그렇다구..)
자, 이제 객체가 되었으니 사용할 때는 지금까지 배운 자바스크립트의 내장 객체 사용법과 동일해.
person.name = "임꺽정"; // 이름을 임꺽정으로 변경
person.job = '대도" // 직업변경
위 내용을 보면 name 과 job 는 우리가 만든 person 의 속성(Property)임을 알 수 있어.
또 객체에는 메소드(Method)도 넣을 수 있어. 아래를 보자구
const person = {
name: "홍길동",
job: "도둑",
age: "500",
nick: function() {
return this.job + " " + this.name;
}
};
nick 이라는 함수(function)을 객체 안에 쑤셔 넣었어.
nick 은 이제 "도둑 홍길동" 을 반환하는 함수로 작동하게 될거야.
여기서도
this 를 사용했네?
앞서 배웠지만 여기서 this 는 지금 이 객체(person)를 뜻해. 그러므로 person.job , person.name 으로 적어도 돼.
그렇지만 이렇게 this 로 사용하면 이 객체를 다른 이름으로 변경해도 수정없이 그대로 사용할 수 있으니 this 가 더 유용하겠지?
메소드의 사용예를 한 번 볼까?
<!DOCTYPE html>
<html>
<body>
<h2>객체 공부 </h2>
<p id="demo"></p>
<script>
const person = {
name: "홍길동",
job: "도둑",
age: "500",
nick: function() {
return this.job + " " + this.name;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.nick();
</script>
</body>
</html>
■ JSON
JSON 은
JavaScript Object Notation 의 약자로 우리도 그냥 '제이슨' 이라고 불러.
프로그램들 간에 데이터를 주고 받을 때 많이 사용하는 '자료교환'용 파일포맷 중 하나인데 요즘 가장 핫하게 많이 쓰이는 형태야.
왜 이런게 필요할까?
예를들어 앞서 배운 setInterval 을 이용해서 1시간 마다 날씨를 갱신한다고 가정해 보자구.
현재 날씨는 기상청에서 제공을 하는데 거기의 특정 주소에 접속하면 지역별 날씨를 특정 데이터 형식으로 출력해줘.
예를들면...
서울:15도:맑음, 부산:20도:흐림, 대구:22도:비, 광주:20도:안개....
그러면 우리가 받아서 이 데이터를 파싱해서 우리 홈페이지에 잘 맞는 용도로 사용하는 거지.
기상청에서 예쁘게 table 로 만들어 출력해 주지 않고 이렇게 내용만 보내 주는 이유는 이 데이터를 실제 사용하는 곳마다 용도가 다를 수 있기 때문이야.
그러니 받은 데이터 중에서 어떤 것을 사용하고, 또 어떻게 꾸미느냐는 우리가 알아서 하라고 기상청은 순수 데이터만 보내 주는 거야.
이때 위의 예제에서는 도시:온도:날씨는 콜론(:)으로 구분하고, 각 지역은 컴마(,)로 구분했어.
이처럼 어떤 기호로 구분하느냐 하는 약속이 바로 포맷이야.
예전에 가장 많이 쓰이던 포맷이 CSV 나 XML 이었어.
그런데 여기 최근에는 JSON 이라는 것이 등장해서 급속도로 치고 올라와 지금은 가장 많이 쓰이는 형태가 되었어.
이전 AJAX 에서 공부했던 XMLHttpRequest() 기억나?
명령어 맨 앞이 XML 이잖아. 위 명령을 해석하자면
"XML 데이터를 Http로 요청하다"가 되는데 바로 자바스크립트의 초기에는 XML 형식이 가장 많이 사용되었다는 일종의 역사가 명령어에 새겨져 있는 셈이지.
그런데 이름은 여전히 XMLHttpRequest() 이지만 요즘에 이 명령을 사용해서 가장 많이 쓰이는 데이터가 바로 JSON 형식이야.
JSON 의 데이터형식은 아래와 같아.
{"name":"홍길동", "job":"도둑", "age":"500"}
잉? 위에서 배운 자바스크립트 객체와 똑같네?
그런데 똑같지는 않아 자바스크립트의 객체는 속성명(name, job, age) 에 쌍따옴표가 없는데, JSON은 속성명도 쌍따옴표로 감쌌어. 그것밖에 차이가 없어.
JSON 이라는 이름 자체가 JavaScript Object Notation 로 자바스크립트가 유행하면서 나온 형태인 만큼 거의 똑같아.
(그런데 기왕이면 완전 똑같이 만들지 쌍따옴표 차이는 왜 만들었을까?... 나도 궁금해)
이 JSON 포맷에서 값은 문자열, 숫자, 배열 그리고 심지어 또 다른 객체까지 속성에 대한 값으로 들어갈 수가 있어.
아래를 한 번 봐..
{"name":"홍길동"}
{"age":30}
{"students":["홍길동", "임꺽정", "황진이"]}
{"students":{"name":"홍길동", "age":30, "job":"도둑"}}
■ JSON.parse()
자, JSON 이 뭔지는 알았는데, 그럼 이제 중요한 거,
이렇게 받은 데이터를 어떻게 쓸까?
바로 자바스크립트의 객체로 변환해서 필요할 때 쓰는거야.
이를 위한 명령어가 바로 JSON.parse() 메소드야.
const person = JSON.parse('{"name":"홍길동", "job":"도둑", "age":"500"}');
이렇게 하면 문자열 {"name":"홍길동", "job":"도둑", "age":"500"}를 자바스크립트의 obj 라는 이름의 객체로 만들어 줘.
즉 위의 자바스크립트 객체에서 배운 아래 내용과 똑같은 객체가 만들어져.
const person = {
name: "홍길동",
job: "도둑",
age: "500"
};
이제 이 person 객체를 마음대로 사용하면 돼.
예를들어 이름을 팝업으로 보여 주려면 alert(person.name); 로 하면 되겠지?
어? 좀 이상한 생각 안들어?
JSON.parse 뒤에 넣는 문자열('{"name":"홍길동", "job":"도둑", "age":"500"}')을 넣어 만든 객체나 const person = {name:"홍길동", job:"도둑", age:"500"}; 로 만드는 객체가 똑같고 타이핑은 쌍따옴표 때문에 오히려 JSON 이 더 많은데 왜 궂이 JSON 을 사용하지? 그런 생각 안들어?
나도 처음 공부할 때 그랬어...ㅎ
큰 차이가 있는 것이 JSON 문자열은 대부분의 경우 우리가 직접 입력해서 만든 문자열이 아니라는 거야.
기상청 이야기도 했지만 다른 사이트나 서버에서 보내준 데이터가 JSON 형식인 경우 이것을 우리가 객체로 변환해 사용할때 사용하는 명령이 JSON.parse() 인거야.
내가 자바스크립트 코드에서 직접 타이핑해서 객체를 만들 때에는 JSON 사용할 필요가 없어.
그냥 const person = {name:"홍길동", job:"도둑", age:"500"}; 같은 식으로 만들면 돼...
■ JSON.stringify()
반대의 경우도 있어.
자바스크립트 객체의 내용을 다른 사용자들에게 전달하기 위해서 반대로 객체를 일반 문자열로 바꿔서 보내 줘야해.
바로 JSON 형태의 문자열로 말이지.
예를들어 기상청의 웹서버에서는 객체에 있는 데이터를 JSON 형식의 문자열로 제공해야해.
그래야 그 데이터를 받은 웹사이트에서 JSON.parse() 메소드를 사용해서 객체로 만들어 사용하겠지.
아직도 좀 헷갈리지.
위에서 만든 const person 은 객체야.
그러므로 alert(person) 이라고 하면 그냥 object 라는 내용만 표시돼.
alert 나 기타 자바스크립트의 코드에서 사용하려면 person.name person.job .. 같이 속성까지 같이 적어 주어야해.
즉 person 자체 만으로는 어떤 속성과 값이 들어 있는지 알 수 없어.
그러므로 남들에게 전달할 때는 속성,값까지 다 알려 주어야해. 그 방법이 JSON 형식의 문자열로 변환해 보내주는 거야.
위에서 만든 person 객체를 다시 JSON 문자열로 바꾸려면..
let jsontxt = JSON.stringify(person);
이제 jsontxt 변수에는 JSON 형식으로 변환된 문자열이 들어 가겠지?
alert(jsontxt); 명령으로 확인해 보면...
{"name":"홍길동", "job":"도둑", "age":"500"}
짠, 원상태로 되돌아 왔어...
지금까지 이번 장에서는 사용자 객체와 JSON 에 대해 공부해 보았어.
그런데 이건 대체 어디어 써 먹을까?
아주 자주 쓰여.
물론 앞서 배운 HTML 요소들 감추기, 바꾸기, 이런데서는 안쓰지만 AJAX 를 사용하는 기능들이 있을 때는 아주 요긴하게 쓰여.
초보자이니 지금 당장 직접 코드를 쓸 일은 없겠지만 다른 고수들이 쓴 코드를 복사할 때에는 종종 보게 될거야.
그때 이 내용을 알아야 이해할 것 아냐?
그래서 이렇게 힘들게 설명했어.