객체 쓰기와 읽기
지금까지 배웠던 것중에 정보양이 많아졌을 때 서로 연관된 정보를 정리정돈 하기 위해서 만들었던 도구는 '배열'입니다. 그리고 배열이라고 하는 도구는 순서에 따라서 정보를 정리정돈 한다는 특징이 있었습니다.
즉. 정보를 담는 그릇이면서 정보가 순서대로 정돈된다는 것입니다.
순서대로 정보가 저장될 수 있는 것이 있다면 순서 없이 정보를 저장할 수 있는 것이 바로 '객체' 입니다.
그런데 우리가 '객체'라는 것은 배우지 않았지만. 데이터를 무작위로 집어넣으면 되는걸까요? 아닙니다. 우리가 꺼낼필요가 있다면 물건은 수납상자안에 집어넣으면서 수납상자에 이름을 붙여서 꺼낼 수 있게 되겠죠. 바로 객체는 이름이 있는 정리상자 라고 생각하시면 됩니다.
배열은 [ ] , 객체는 { }
let coworkers = {
"programmer":"egoing",
"designer":"leezche"
};코드해석:
coworkers라는 객체에 'egoing'이라는 정보를 'programmer' 딱지를 붙여서 저장한 것이고, 'leezche'라는 정보를 'designer'라는 딱지를 붙여서 저장 한 것이다. 그러면 그 정보를 꺼내올려면 어떻게 해야하는 걸까요?
let coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer:"+coworkers.programmer+"<br>");
document.write("designer:"+coworkers.designer+"<br>");코드해석:
- 결과
programmer:egoing
designer:leezche
coworkers.programmer에서 . 은 coworkers를 동작을 하게 해주는 오퍼레이터다.
즉 우리가 지금 뭘 살펴봤냐면 만들어져있는 객체에서 데이터를 가져오는 방법을 살펴본 것이다. 그러면 이미 객체가 만들어진 다음에 정보를 추가하고 싶다면 어떻게 해야할까요.
let coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer:"+coworkers.programmer+"<br>");
document.write("designer:"+coworkers.designer+"<br>");
coworkers.bookkeeper="duru";
document.write("bookkeeper:"+coworkers.bookkeeper+"<br>");코드해석:
- 결과
programmer:egoing
designer:leezche
bookkeeper:duru
이렇게 된다는 것입니다. 여기서 data scientist 를 추가해볼까요?
coworkers.data scientist = "taeho";이렇게 되면 문법적으로 말이 안되는 형식이 되어버립니다. 이름에는 띄어쓰기가 적용이 안되기 때문이죠. 그렇기때문에 여기서는 . 을 쓸 수가 없습니다. 그러므로 [ ] 를 쓰고 문자를 " "로 감싸주면 똑같이 쓸 수 있습니다.
coworkers["data scientist"] = "taeho";
document.write("data scientist:"+coworkers["data scientist"]+"<br>");- 결과
programmer:egoing
designer:leezche
bookkeeper:duru
data scientist:taeho
이런식으로 말이죠.
객체의 기본적인 것. 객체 생성법, 객체 데이터를 가져오는 법, 데이터를 넣는 법 까지 알아보았습니다.
객체와 반복문
생성된 객체의 어떤 데이터가 있는지. 모조리 다 가져와야하는 경우가 있습니다. 그럴때는 반복문을 써서 데이터를 가져왔었는데 객체에서는 어떻게 해야할까요?
for(let key in coworkers) {
}코드해석:
for 라고 하는 걸 쓰면 coworkers라고 하는 변수가 가르키는 객체'in'(의) 있는 key값들을 가져오는 반복문이다. 여기서 key 값이라고 하는 것은
programmer,designer,bookkeeper,data scientist 를 말하는 것입니다. 즉. key라고 하는 것은 정보의 도달할 수 있는 열쇠라는 것입니다. 저걸 key라고 합니다. (사실 key라는 이름 말고 다른 이름으로 해도 되지만 의례적으로 key라고 쓴다고 합니다.) 배열에서는 index라고 부르죠.
coworkers에 있는 key를 하나하나 꺼내서 { } 에 있는 코드를 실행해주는 명령이 for이다.
coworkers 객체에 있는 데이터들이 쭉 있을텐데, 그 데이터에 있는 수만큼 { } 에 있는 코드들이 실행될텐데. 실행될때마다 key값 하나하나를 변수값으로 셋팅해준다는 의미입니다.
let coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer:"+coworkers.programmer+"<br>");
document.write("designer:"+coworkers.designer+"<br>");
coworkers.bookkeeper="duru";
document.write("bookkeeper:"+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho";
document.write("data scientist:"+coworkers["data scientist"]+"<br>");
for(let key in coworkers) {
document.write(key+'<br>')
}코드해석:
- 결과 (for문에 있는거)
programmer
designer
bookkeeper
data scientist
coworkers(의)'in' 있는 key값들을 모조리 출력하고 있습니다.
그렇다면 coworkers에 있는 어떤 특정한 데이터를 가져올 때, 우리는 배열의 형식을 사용해서 index를 사용하는 곳에 key값을 넣었을 때 값을 가져올 수 있었습니다.
coworkers라는 객체에 [key]라고 해주면
for(let key in coworkers) {
document.write(coworkers[key]+'<br>')
}결과는
egoing
leezche
duru
taeho
라고 나올 것입니다.
for (let key in coworkers) {
document.write(key + ':' + coworkers[key] + '<br>')
}이렇게 하면
- 결과
programmer:egoing
designer:leezche
bookkeeper:duru
data scientist:taeho
맨위에 여러줄로 적었던 것보다 두 줄로 깔끔하게 같은 결과가 나온다는 사실이다. 위에 값과 똑같은 결과를 얻을 수도 있으면서 모든 데이터를 순회하면서 우리에게 필요한 데이터가 있는지 없는지 확인할 수 있는 기능이라고 할 수 있습니다.
-- 최종적으로 줄여본 코드입니다.--
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
};
coworkers.bookkeeper = "duru";
coworkers["data scientist"] = "taeho";
for (let key in coworkers) {
document.write(key + ':' + coworkers[key] + '<br>')
}!잠깐! 잘 모르겠는 부분📖
-
원례 학계에선 저 coworker의 데이터구조가 hash라고 하는건데,
짝이 있을 때 정보를 얻는 key와 data(value) 이런식으로 부릅니다.(특정 데이터를 얻는 열쇠처럼 비유)
예를 들면 "programmer":"egoing"은 key가 "programmer"가 되고 data가 "egoing"이 됩니다. -
coworker[key]를 입력하면 컴퓨터는 대괄호 안의 key를 변수로 인식합니다. 따라서 for()에서 정의했던 변수key를 대입하여 속성값들을 끄집어 낼 수 있는겁니다.
-
:(콜론) 과 = (등호)의 쓰임새에 대하여
- 콜론은 key : value를 나타낼 때 사용합니다.
cowerkers[“programmer”] 를 콘솔로 찍어보면 “egoing”이 나옵니다.
배열에 인덱스를 사용해서 값을 찾을 때와 비슷합니다
등호는 선언할 때 사용합니다
선언해서 할당받은 값은 key가 아니기 때문에
콜론처럼 foo[bar]이렇게 사용할 수 없습니다.
- 한마디로 key라고 하면 key(data와 이어주는 열쇠/ data에 붙은 이름)를 찾고 [key]라고 하면 key의 data. 즉 변수key를 찾는 것이다.
객체프로퍼티와 메소드
객체의 data값에는 뭐든 다 담을 수 있습니다. 우리는 여태까지 ""로 이루어진 문자만 입력했지만 함수도 담을 수 있습니다.
coworkers.showAll = function (){
}이렇게 말이죠. 일반적인 함수의 모양은 아니지만 이걸 풀어본다면 이렇게 할 수 있습니다.
function showAll() {
}이 표현과 마찬가지입니다.
계속 진도를 나아가봅시다.
coworkers.showAll = function (){
for (let key in coworkers) {
document.write(key + ':' + coworkers[key] + '<br>')
}
}
coworkers.showAll();코드해석:
showAll을 하면 모든 coworkers에 있는 각각의 data들을 되풀이해서 화면에 출력하는 코드입니다.
하지만 이 코드는 좋은 코드는 아닙니다.
왜냐하면 여기있는 coworkers라는 이름이 for문에 박혀있기때문에 나중에 객체 이름이 바뀌면 되풀이가 안되는 현상을 보일 수가 있습니다.
그런경우에 어떻게 하면 되냐.
showAll이라는 함수 안에서 함수가 소속되어있는 객체를 가르키는 약속된 기호가 있는데 이때 this를 쓰면 됩니다.
coworkers.showAll = function (){
for (let key in this) {
document.write(key + ':' + this[key] + '<br>')
}
}
coworkers.showAll();이렇게 해도 똑같은 결과를 얻을 수 있습니다. 좋은 점은 coworkers 라는 변수의 이름이 다른걸로 바껴도 this 는 자기 자신을 가르키기 때문에 영향을 받지 않는다는 것입니다. 그리고 좀 아쉬운건
showAll 조차도 coworkers안에 소속되어있는 data이기때문에 화면에 표시가 됩니다.
programmer:egoing
designer:leezche
bookkeeper:duru
data scientist:taeho
showAll:function (){ for (let key in this) { document.write(key + ':' + this[key] + '
') } }이런 문제를 없애기 위해서는 for문 안에서 if문으로 show문을 제어할 수 있습니다.
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
};
coworkers.bookkeeper = "duru";
coworkers["data scientist"] = "taeho";
coworkers.showAll = function () {
for (let key in this) {
if (key !== "showAll") {
document.write(key + " : " + this[key]+'<br>');
}
}
}
coworkers.showAll();- 결과
programmer : egoing
designer : leezche
bookkeeper : duru
data scientist : taeho
이렇게 깔끔하게 값을 얻을 수 있습니다.
우리가 왜 여태까지 이렇게 했냐면
메소드를 쓰기 위해서 함수를 다르게 표현하는 방법을 사용한 것이고,
이렇게 만든 메소드 함수를 이름만 쓰고 괄호 안에 변수를 넣으면 이렇게 저렇게 이용이 가능하다는 것을 보여준 것이다.
