[JS] for~in 구문+@과 객체 순회

파이썬이나 C++에 익숙한 분들은 for~in 또는 for(~:~) 구문이 익숙할 것이다.
다만 Javascript에서는 이러한 기능을 forEach로 구현중인데,

그렇다면 JS에서 for in과 for of는 뭘까?

아래에서 계속 우려먹을 이러한 객체가 있다고 치자.

let solarSystem={
            "수성":"Mecury",
            "금성":"Venus",
            "지구":"Earth",
            "화성":"Mars",
            "목성":"Jupiter",
            "토성":"Saturn",
            "천왕성":"Uranus",
            "해왕성":"Neptune"
        }

객체는 property(키 이름): value로 구성이 되어있으므로,
solarSystem["수성"]은 바로 "Mecury"를 반환함을 알 수 있다.

for in

for in은 객체의 프로퍼티(key)를 가져오는 키워드다.
python과 달리, 객체의 쌍 하나하나를 가져오는게 아니다!

for(name in planets) {
	console.log(`key: ${name} - value:${planets[name]}`);
}

그럼 배열은?

let arr = [1,2,3];
for(name in arr){console.log(name)'}; //뭐가 출력될까?
//출력결과
//0 
//1 
//2

이상하다, python이라면 1 2 3이 출력되어야 할텐데??

바로 이것이 python과 JS에서 for in의 차이다.
객체를 이루는 요소를 묶음으로 가져오는 것이 아니라,
객체를 이루는 요소의 키들을 가져오는 것이다.

배열의 경우, 인덱스:값 으로 이루어져 있기 때문에, 배열의 키인 인덱스가 출력이 되는 것!

(난 이래서 JS가 싫다.)

for of (배열에만 사용 가능)

for of는 객체를 순환하는거라고 생각했을텐데,,,
for of는 배열 외 객체에는 사용이 불가능하다. 쩝!

let arr2=[[생선,참치],[유제품,치즈],[음료,커피]];

for(item of arr2){
	console.log(`${item[0]}에는 ${item[1]}이 있다.`); 
}

이런 식은 가능하지만, 위의 solarSystem처럼 배열이 아니라 객체인 경우에는 사용이 안된다...ㅋㅋ
즉, 객체는 forEach 또는 entries를 통해 따로 접근을 해줘야한다.

Object.keys(객체)

Object.keys(객체) : 프로퍼티의 key(프로퍼티 이름)가 배열로 반환된다.

//["수성","금성"...."해왕성"]
Object.keys(solarSystem).forEach(name=>{
	console.log(`key: ${name} value: ${solarSystem[name]}`);
});

Object.entries(객체)

key-value 한 쌍이 요소인 2차원 배열이 반환된다.

//[[수성,Mecury],[금성,Venus].....[해왕성,Neptune]]
Object.entries(planets).forEach((array) => {
            console.log(`key: ${array[0]} - valeu: ${array[1]}`);
        })