[javascript 언어공부] 객체(2)

다음으로 객체를 다루는 방법에 대해서 알아보자.

특히 반복문을 이용해서 객체를 다루는 방법을 알아보자.

배열에서

var arr = ['a','b','c'] 라는 배열을 다룰 때 반복문을 통해 

for (var i=0;i<arr.length;i++){

document.write(arr[i])

}

이렇게 가져왔다. 이렇게 가져올 수 있었던 이유는 각각의 값들이 내부적으로 index값을 자동으로 부여받기 때문에, 

그 배열이 몇개의 원소를 갖고 있느냐를 length를 통해 알아낸다면, 

그 length보다 작은 값을 index값으로 부여하는 것을 통해서 값을 가져올 수 있었다.

즉 배열은 저장된 데이터들이 순서를 가지고 있다.!!! (배열에서 아주 중요한 요소) 

그래서 먼저 들어간것과 나중에 들어간 것이 기록되어 있고, 그 상태가 내부적으로 유지되고 있기 때문에

우리가 데이터를 가져오게 되면 집어넣었던 순서대로 꺼내올 수 있다.

배열에서 추가된 순서라는 것은 그것 자체로 굉장히 중요한 정보이다.

하지만 객체 안에 저장된 값은 순서가 없고, key랑 value가 있을 뿐이다. 그래서 key와 value쌍이 객체 안에 저장이 되는데

저장된 순서는 존재하지 않기 때문에 저장된 값이 순서에 따라 나오지 않을 것이다라고 생각하고 값을 가져와야 할 것이다.

객체에 있는 값을 가져올때는 for in문을 사용한다.

var grades = {'estelar':'10','yesri':'6','hongjoo':'80'};

다음과 같은 객체를 만들고, 그 객체를 변수에 집어넣는다.

그 후 

for (key in grades){

document.write('key'+'<br />')

}

in을 중심으로 뒤쪽에는 객체를, in 앞에다가 key라는 변수를 정의해주게되면,

자바스크립트는 grades라는 변수가 가리키는 그릇에 담겨있는 값들을 반복문이 한번 실행될 때마다 하나씩 가져와서

key값을 가져와서 key라는 변수에 담는다. 

따라서 위의 코드를 실행하게 되면

estelar

yesri

hongjoo

라고 브라우저에 실행된다.

이를 순서대로 정리해보면

grades라는 변수에서 key값을 가져오고,

그 key값을 for in문 내부의 변수인 key값에 담아주며

그 변수 key값을 출력하면 객체의 key값을 가져올 수 있게 되는 것이다.

하지만 우리는 key값만 원하는 것은 아니다.

그렇다면 안에 있는 값들은 어떻게 가져올까???

앞서 index값만 알면 배열의 값을 가져올 수 있었듯, 

key값만 알면 내부의 값을 가져올 수 있는 것은 당연하다.

for (key in grades){

document.write(grades[key])

}

이렇게 해주면, 혹은 grades.key 라고 해주면 객체 안에 저장돼있는 값들을 가져올 수 있게 된다.

그래서 최종적으로 객체의 key값와 value를 보두 가져오려면 다음과 같이 작성하면 된다. 

for (key in grades){

document.write("key : "+key+" value : "+grades[key]+"<br />");

}

for in문 안의 key는 결국 변수이기 때문에 바꿀 수 있다. 만약 name으로 바꾼다면, 다음과 같이 사용할 수 있다.

for (var name in grades){

document.write("key : "+name+", value : "+grades[key]+"<br />");

}

결과는 다음과 같다.

key : estelar, value : 10

key : estelar, value : 6

key : estelar, value : 80

마지막으로 for in문은 객체 뿐 아니라 배열에서도 사용할 수 있다.

for(var name in arr){

console.log(name)

}

이라고 하면 0,1,2 가 출력된다. 

그리고 console.log(arr[name]) 

이라고 하면 그 안의 값을 똑같이 가져올 수 있게 된다.