for of, in, each 문 정리

찬찬잉·2022년 3월 14일
0
post-thumbnail

주말에 다니는 학원에서 공부로 조금 눈이 틔기 시작하지만
조금 더 확실하게 정리하고자한다.

for문의 진화형 in문과 of문을 정리하여 조금 더 확실하게 정리하고자한다.

for in문

for문과는 전혀 다른 형태의 반복문입니다.
for in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해줍니다.

※열거할 수 있는 프로퍼티란 내부적으로 enumerable(열거자) 플래그가 true로 설정된 프로퍼티를 의미합니다.

<script>
  var obj = {
  name : "이순신",
  age : 20
  };

  for (var i in obj) {
  document.write(i + "<br>");
  }
</script>

for of문

for of 문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문입니다.
for of문은 익스플로우에서 지원하지않는다.

<script>
  var arr = new Set([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 5, 5]);

  for (var value of arr) {
  document.write(value + " ");
  }
</script>

forEach 문

forEach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.
[] 배열의 요소들을 반복하여 작업을 수행할 수 있습니다.
forEach 구문의 인자로 callback함수를 등록할 수 있고, 배열의 각 요소들이 반복 될 때 이 callback 함수가 호출됩니다.
callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.

  var arr = ['가','나','다','라']; 
  arr.forEach(function(item,index,arr2){ 
      console.log(item,index,arr2[index+1]); 
  }) 
  //첫번쨰 인수는 배열의 각각의 item //두번쨰 인수는 배열의 index //세번째 인수는 배열 그자체
let numbers = [1, 2, 3, 4, 5, 6, 7];
  numbers.forEach(function(numbers) {
    console.log(numbers);
}) 

let fruits = ['banana', 'apple', 'orange', 'grape'];
let fruits2 = ['cherry'];

fruits.forEach(fruits => fruits2.push(fruits));

console.log(fruits2);

반복문 종류

  1. for : 고전적인 for문
  2. for in : 객체의 프로퍼티 키 열거 전용
  3. for of : 이터러블 순회 전용
  4. forEach() : 배열 순회 전용 메서드
  5. while : 고전적인 while문
  6. do while : 고전적인 do...while문
  7. Object 객체 메서드 : 객체 순회 전용
  8. Array.prototye 메서드 : 배열 전용

결론

일반적인 순회용 반복문은 아래의 메서드 사용을 추천한다.

1. 배열인 경우 : 배열.forEach() 사용

2. 객체인 경우 : Object.keys(객체) 사용

함수형 프로그래밍에 가깝기도 하고, 예상치 못한 버그를 예방할 수 있기 때문이다.

[참고 블로그]](https://curryyou.tistory.com/202)

profile
디자이너, 기획자 출신의 개발자

0개의 댓글