[JS] 반복문 문법

forEach()

forEach() 반복문은 배열의 요소들에 대하여 인자로 주어진 callback 함수를 실행한다. 오직 Array 객체에서만 (ES6부터는 Map, Set 등에서도) 사용 가능하다.

인자로 전달된 callback 함수에서, 배열 요소의 인덱스와 값에 모두 접근할 수 있다.

사용법

// 매개변수 : callback 함수 only
arr.forEach(callback(currentvalue)); 
arr.forEach(callback(currentvalue, index, array));

// 매개변수 : callback 함수 & thisArg (callback 실행 시 this 값)
arr.forEach(callback(currentvalue), thisArg);

첫번째 매개변수 callback

• 각 요소에 대해 실행할 함수를 의미
• 총 3가지의 매개변수
  • currentValue : 처리할 현재 요소
  • index : 처리할 현재 요소의 인덱스
  • array : forEach() 를 호출한 배열

두번째 매개변수 thisArg

• callback 함수를 실행할 때 this로 사용할 값을 의미

for...in

for...in 반복문은 객체의 속성들을 반복한다.
객체에 상속된 열거 가능 속성들 & 객체에서 문자열로 키가 지정된 열거 가능 속성들에 대해 특정 작업을 반복적으로 수행하며, 모든 타입의 객체에서 사용이 가능하다.

for...in 구문은 객체의 key 값에 접근하여 정수가 아닌 이름을 가진 속성을 반환한다. value 값에 접근하는 방법은 제공하지 않는다.

사용법

for (variable in object) {
  statement
}

배열에서의 사용

배열의 인덱스 역시 정수로 된 열거 가능한 속성이며 일반적인 객체의 속성들과 같으므로 for...in 반복문을 사용할 수 있지만,
for...in 구문은 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없으므로 반복문의 요소 방문 순서가 중요한 배열의 경우에는 숫자 인덱스 사용이 가능한 for 반복문 혹은 forEach(), for...of 구문을 사용하는 것이 좋다.

for...of

for...of 명령문은 반복 가능한 객체(Array, String, TypedArray, arguments 객체 등을 포함)에 대해 사용 가능한 반복 구문이다. 객체의 각 개별 속성값에 대해 특정 작업을 반복하는 루프를 생성한다.

사용법

for (variable of iterable) {
  statement
}

for...in 과 for...of 의 차이점

for...in

• 객체의 모든 열거 가능한 속성에 대해 반복

for...of

• 반복 가능한 객체의 속성에 대해 반복

참고한 글

• MDN
  • forEach()
  • for...in
  • for...of
• 자바스크립트 for in vs for of 반복문 정리