forEach, for...of, for...in 차이

안녕하세요
react 에서 for문을 사용하였는데 for보다는 forEach를 사용하는게 좋을 것 같다는 피드백을 들었습니다.
그래서 forEach로 바꿔봤더니 더 간단하더라고요!
forEach, for of, for in 때에 따라 맞는걸 사용하면 된다고 들었습니다만, 모르니까 공부 시작!!

 

✔ forEach 문

배열의 요소와 인덱스 모두에 접근할 수 있습니다.

반면 예외를 던지지 않고는 forEach()를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐지도 모릅니다.

 

mdn에 forEach 검색하니까 바로 for 문을 forEach() 로 바꾸는 방법이 나왔습니다.

이후가 훨씬 깔끔하죠?

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach((item)=> {
  copy.push(item);
});

 

✔ for..of문

for..of문은 객체 내부 Symbol.iterator 프로퍼티를 호출해 이터러블 객체를 반복합니다. 다음은 배열의 간단한 for..of 루프입니다:

let someArray = [1, "string", false];
for (let entry of someArray) {
console.log(entry); // 1, "string", false
}

for-of를 활용하면, 키만 접근하거나, 혹은 키와 값 모두 접근하거나 하는 것이 모두 가능하다.

const arr = ['a', 'b', 'c']
for (const [key, value] of arr.entries()) {
  console.log(key, value)
}
// 0 "a"
// 1 "b"
// 2 "c"

 

✔  for..ofvs.for..in문

for..of와 for..in문은 모두 리스트를 반복하지만 반복하는 값이 다릅니다. for..in은 반복하는 객체의 key 리스트를 반환하지만 for..of는 반복하는 객체의 숫자 프로퍼티인 value 리스트를 반환합니다.

다음은 이러한 차이를 보여주는 예시입니다:

let list = [4, 5, 6];
for (let i in list) {
  console.log(i); // "0", "1", "2",
}
for (let i of list) {
  console.log(i); // "4", "5", "6"
}

또 다른 차이는 for..in이 모든 객체에서 작동한다는 것입니다. 그래서 객체의 프로퍼티를 검사하는 방법으로 사용합니다. 반면에 for..of는 주로 이터러블 객체의 값에 중점을 둡니다. Map과 Set 같은 내장 객체는 저장된 값에 접근할 수 있는 Symbol.iterator 프로퍼티를 구현합니다.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";
for (let pet in pets) {
  console.log(pet); // "species"
}
for (let pet of pets) {
  console.log(pet); // "Cat", "Dog", "Hamster"
}

 

✔ 요약

for 문이 성능은 좋습니다.

for .. in 은 객체의 key 반환

for .. of 는 객체의 value 반환

 

 

✔ 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

https://www.typescriptlang.org/ko/docs/handbook/iterators-and-generators.html

Documentation - Iterators and Generators

https://yceffort.kr/2021/06/best-solution-for-looping-over-array

Home