자바스크립트 반복문 for of / for in / for 기초 for SAPUI5

자바스크립트 반복문 For는 for of, for in foreach 등 다양한 형태로 제공하고 있습니다.

for of, for in 반복군은 배열 등과 함께 사용하는 명령어이고, for는 범용적으로 사용하는 구문입니다.

자바스크립트 반복문 for of , for in

for of, for in은 배열 및 오브젝트 등과 사용할 때 편리하게 사용할 수 있습니다.

of를 사용하는 경우에는 ‘값’이 iterator 변수에 들어가게 되고

for  (const iterator of object ){
//
}

in를 사용하는 경우에는 인덱스값 혹은 Key 값이 iterator 변수에 들어가게 됩니다.

for  (const iterator in object ){
//
}
// for of 는 배열 객체에서 값을 리턴
const arr = ['바나나', '사과', '귤']
  for  (const item of arr ){
  console.log(item)
}

//for in 은 배열 객체에서 인덱스 값을 리턴
for  (const index in arr ){
  console.log(index , arr[index])
}

배열객체로부터 for of for in 사용법

for in 과 for of 의 차이점

for in의 경우 배열의 경우는 index를 반환하는 반면, Object인 경우에는 객체 오브젝트의 Key를 리턴합니다.

var obj = {
a: "가",
b: "나",
c: "다"
};
for (var item in obj) {
  console.log(item);
  console.log(obj[item])
}

반면, for of 의 경우에는 객체를 참조할 수 없습니다.

var obj = {
a: "가",
b: "나",
c: "다"
};
for (var item of obj) {
  console.log(item);
  console.log(obj[item])
} // ncaught TypeError: obj is not iterable 에러 발생!

일반 for 반복문의 경우

배열 및 객체의 갯수 등을 참조하여 반복을 하는 일반적인 for 문입니다.

//0부터 4까지 반복
for(let i = 0; i < 5; i++ ){ console.log( i ) }
// 0부터 9까지 2씩 증가하며 반복
for(let i = 0; i < 10; i +=2 ){ console.log( i ) }
// 10부터 19까지 3씩 증가하며 반복
for(let i = 10; i < 20; i += 3 ){ console.log( i ) } 
// 20부터 11까지 -1 씩 감소하며 반복 
for(let i = 20; i > 10; i-- ){ console.log( i ) }

자바스크립트 반복문 for 일반 사용법

for of / for in의 const VS for let 요소 반복

for of 및 for in에서 사용되는 const는 스코프상으로 각 반복시마다 생성 + 소멸을 갖게 되므로 const로 반복이 가능합니다.

for  (const iterator of object ){
  //
}

하지만 일반 for 문의 경우에는 스코프상으로 for 문 외부에서 선언되는 구조이므로 let을 사용해야 하며 따라서 const를 사용하게 되면 다음과 같은 오류를 발생합니다.

일반 for문에서 const를 사용한 경우

이상으로 자바스크립트 반복문인 for in for of 등에 대해서 알아보았습니다. 좀 더 자세한 세부 사항은 모질라 문서 for..of(링크) 및 for..in(링크)를 참조하시면 도움이 되실꺼라 생각됩니다.

 

함께 보면 좋은 글

자바스크립트 배열 메소드 기초 for SAPUI5 초보자

자바스크립트 Boolean – VS ABAP BOOL