[자바스크립트 / 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