[자바스크립트 / Vanilla JS] 반복문에 대하여 (for.. for in.. for of.. forEach)

 

자바스크립트의 반복문에는 총 8가지의 반복문이 존재한다

1. for : 고전적인 for문

2. for in : 객체의 프로퍼티 키 열거 전용

3. for of : 이터러블 순회 전용

4. forEach(): 배열 순회 전용 메서드

5. while : 고전적인 while문

6. do while : 고전적인 do...while문

7. Object 객체 메서드: 객체 순회 전용

8. Array.prototye 메서드 : 배열 전용

 

이 번 글에서는 간단하게 for, fon in, for of, forEach문을 다룰 예정이다.

 

1. forEach 문

코드 리팩토링에서 잠깐 다뤘던 forEach문이다.

forEach()는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.

 

forEach는 파라미터로 콜백 함수를 받는데,

그 콜백 함수의 파라미터는 배열의 요소, 배열의 index 그리고 앞서 정의한 배열이다.

＊ 콜백 함수는 반드시 순서대로 정의가 되어야하며 currentElement를 쓰지 않는다해서 콜백 함수에 정의 해주지 않는다면 에러가 뜨니 주의.

let Newarr = ["a", "b", "c"];
 
// ES6의 화살표 함수
arr.forEach(item => {
    // item 변수는 배열 각각의 요소들을 순환.
    console.log(item);
});

Newarr.forEach((currentElement, index, array) => {
    console.log(`배열의 요소: ${currentElement}`); // 배열의 요소
    console.log(`배열의 index: ${index}`); // 배열의 index
    console.log("배열 = " + array); // 배열 그 자체
});

 

2. for...in 문

for...in문은 일반적인 for과 다른 형태를 띄고있다.

for in문은 객체의 속성들을 반복하여 작업을 수행할 수 있다. 모든 객체에서 사용이 가능합니다. for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않는다.

자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있다. 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않는다.

 

for in 문에서 주의할 사항

1. 프로퍼티를 열거하는 순서

2. 열거할 수 없는 프로퍼티의 존재

3. 프로토타입 상속한 프로퍼티

 

let Newarr = ["a", "b", "c"];
 
for (var item in arr) {
    // item : 배열 각각의 요소
}

3. for..of 문 (ES6에서 탄생)

for...of 명령문은 반복가능한 객체(iterable 객체) (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

 

** iterable
반복되는 열거가능(enumerable)한 속성이 있는 객체.

let Newarr = ["a", "b", "c"];
 
for (let item of arr) {
    // item: 배열 각각의 요소
}

---

for in 반복문과 for of 반복문의 차이점

• for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
• for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용
• for in은 배열의 속성 목록을 반환하고 for of는 배열의 원소 목록을 반환한다.

---

4. 전통적인 for 문

다 알고있는 그런 for문의 기본적인 형태이다

사실 가독성 때문에 잘 쓰지 않으니 예시만 제시하고 마무리 하겠다.

let Newarr = ["a", "b", "c"];

for (var i = 0; i < Newarr.length; ++i) {
	console.log(Newarr[i]) // a -> b -> c
}

 

 

출처: https://curryyou.tistory.com/202 

https://webclub.tistory.com/243

https://jsdev.kr/t/for-in-vs-for-of/2938