iterating over object

Juyeon Lee·2022년 6월 20일
0

JavaScript에서 객체를 반복하려면 다양한 방법이 있다.
예를 들어 이런 object가 있다고 하자,

const testScores = {
  juyeon: 100,
  kim: 44,
  Julia: 60,
  nadia: 80
};

여기에 for of loop배운것처럼

for (let person of testScores) {
	console.log(person)
    }

이렇게 쓰면 testScores is not iterable이라고 에러가 난다.
object는 이 방법으로 loop안되는 것을 알 수 있다.
그렇다면 object를 loop할수 있는 방법은 무엇일까?

1: for...in

위의 코드에서 of 대신 in을 써주면 key 값이 loop되어 나온다.
만약 특정 key의 value도 loop해주고 싶다면 아래의 코드처럼 써주면 된다.

for (let person in testScores) {
  console.log(`${person} scored ${testScores[person]}`);
}

2: Object.keys()

Object.keys() 메소드를 사용하여 객체 키들을 배열로 가져온 뒤, forEach() 메소드 또는 for...of 루프를 사용하여 각 키를 반복한다.

Object.keys(testScores).forEach(person => {
  console.log(`${person} scored ${testScores[person]}`);
});

3: Object.values()

Object.values(testScores)이렇게 하면 values들이 나오지만 array 형식으로 나오게 된다.

Object.values(testScores).forEach(value => {
  const key = Object.keys(testScores).find(key => testScores[key] === value);
  console.log(`${key} scored ${value}`);
});

4: Object.entries()

기 Object.entries()를 사용하면 키와 값 모두 array로 나온다. 이후 forEach() 메소드 또는 for...of 루프를 사용하여 키와 값을 loop해준다.

Object.entries(testScores).forEach(([person, score]) => {
  console.log(`${person} scored ${score}`);
});

0개의 댓글