foreach, for of, for in 등등 항상 헷갈리는 자바스크립트 for 문 등 반복문 메소드에 대해서 총정리해 보았습니다.
자바스크립트의 반복문은 대표적으로 for문을 사용하여 반복을 하게 됩니다. for 문의 기본 반복문 및 foreach, for of, for in 등의 다양한 형태의 반복문을 제공하고 있습니다.
항상 헷갈리는 자바스크립트 for 문 의 기본 반복문 및 배열 혹은 객체 등에서 사용하는 for 문 메소드 등을 정리해 보았습니다.
목차
자바스크립트 for 문 기본
자바스크립트의 기본 for 반복문은 다음과 같은 형식을 사용합니다.
for ([초기시작카운트]; [반복조건]; [증감조건])
<html lang="ko">
<body>
<script>
기본for배열 = ["a", "b", "c", "d"];
for (i = 0; i < 기본for배열.length; i++) {
console.log(기본for배열[i]);
}
</script>
</body>
</html>
조건에 부합하는 인덱스를 기준으로 배열 객체에 인덱스로 접근하여 값을 가져오는 구조입니다.
자바스크립트 foreach 반복문
foreach 문은 배열 객체의 반복 형태로써, 배열에서 주로 사용되는 반복문입니다.
배열 처음시작을 기준으로 마지막 요소로 반복하며 값 및 인덱스 등을 가져오게 됩니다. 반복하며 처리하는 로직은, 인자로 받게되는 콜백 함수를 통해 처리합니다.
자바스크립트 foreach 의 기본 형태
기본적인 자바스크립트 foreach 형태는 다음과 같습니다.
<html lang="ko">
<body>
<script>
기본foreach배열 = ["a", 2, false, "d"];
기본foreach배열.forEach((elem) => {
console.log(elem);
});
</script>
</body>
</html>
아래와 같이 각 항목을 반복하며 foreach 결과를 확인할 수 있습니다.
foreach 콜백함수 파라메터 currentvalue, index, array
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
foreach의 콜백함수의 파라매터는 현재 요소인자(element), 현재 요소 인덱스(index), 배열 자신 그리고, this를 넘길 수 있습니다.
<html lang="ko">
<body>
<script>
// 배열 선언
const arrList = [205, 1154, 123, 5420, 165, 132, -123];
//콜백 function
arrList.forEach(myCallback);
function myCallback(value, index, array) {
// console.log( "index : ", index );
console.log("value값은? : ", value);
console.log("index값은? : ", index);
console.log("array값은? : ", array);
}
</script>
</body>
</html>
arrList에 담긴 배열을 순차적으로 반복하며 현재 요소값, 현재 인덱스 그리고 배열 전체값을 콜백 함수를 통해 처리할 수 있습니다.
콜백함수는 아래와 같이 화살표 함수를 사용해서 반복을 수행할 수 있습니다.
<html lang="ko">
<body>
<script>
const arrList = [205, 1154, 123, 5420, 165, 132, -123];
//콜백 function >> 화살표 함수로 변경
arrList.forEach( (value, index, array ) => {
console.log("value : ", value);
console.log("index : ", index);
console.log("array : ", array);
});
</script>
</body>
</html>
아래와 같이 객체를 포함한 배열에 대해서도 forEach 사용이 가능합니다.
<html lang="ko">
<body>
<script>
var objForEach = [
{ id: 4, name: "철수", age : 30 },
{ id: 5, name: "영희", age : 15 },
{ id: 2, name: "민정", age : 34 },
];
objForEach.forEach(function (value, index) {
console.log(
index,
value.id,
value.name
);
});
</script>
</body>
</html>
foreach 반복문의 객체 혹은 유사 객체에서의 활용
foreach문은 배열 뿐만 아니라 객체(Object)에서도 사용이 가능합니다.
아래는 Set 객체에서 forEach를 사용해서 value 값을 반복하는 구문입니다.
자바스크립트 Set는 , 객체 내의 요소를 유일하게 하나만 갖게 되는 객체 입니다. 중복요소를 갖지 않으며 순서나 인덱스가 의미가 없기 때문에 foreach의 index 파라메터는 의미가 없습니다.
<html lang="ko">
<body>
<script>
const forEachSet = new Set();
forEachSet.add("사과");
forEachSet.add("바나나");
forEachSet.add("포도");
console.log(forEachSet.size);
console.log(forEachSet.keys()[0]);
console.log(forEachSet.entries());
forEachSet.forEach((value) => {
console.log(value);
});
</script>
</body>
</html>
자바스크립트 반복문 for of
자바스크립트 for 문 중에서, ES6에서 추가된 컬렉션 전용 반복 구문인 for of 반복문은, 객체가 ITERATOR의 속성을 갖고 있어야 합니다. 배열에 주로 사용되며, 배열 안에서 자료를 하나씩 꺼내어 처리하고자 할 때 사용됩니다.
for (const iterator of object ){
//
}
<html lang="ko">
<body>
<script>
const forOfList = ["바나나", "사과", "귤"];
for (const iter of forOfList) {
console.log(iter);
}
</script>
</body>
</html>
순차적으로 반복되어 const iter 요소에 값을 넣어주게 됩니다.
배열 뿐만 아니라 iterator의 속성을 갖고 있는 객체에서 사용할 수 있으므로, arguments, querySelectorAll 등의 nodeList, 그리고 Set이나 Map 등의 객체에서도 사용이 가능합니다.
아래의 코드는 arguments에 대해 for of 를 활용하여 반복하는 예제 입니다.
<html lang="ko">
<body>
<script>
function forOfArguments(a, b, c) {
for ( argu of arguments ){
console.log( argu )
}
// console.log(arguments[0]);
// console.log(arguments[1]);
// console.log(arguments[2]);
}
forOfArguments(10, 22, 35);
</script>
</body>
</html>
querySelectorAll 등의 반환값인 NodeList에 대해서도 다음과 같이 for of 를 사용할 수 있습니다.
<html lang="ko">
<body>
<div class="memberList">
<p>영희</p>
<p>민정</p>
<p>민수</p>
<p>영철</p>
</div>
<script>
const memberList = document.querySelectorAll("p");
for (member of memberList) {
console.log( member );
}
</script>
</body>
</html>
물론, NodeList는 foreach도 사용이 가능합니다. index 값도 같이 활용이 필요하면 forEach를 사용하면 됩니다.
<html lang="ko">
<body>
<div class="memberList">
<p>영희</p>
<p>민정</p>
<p>민수</p>
<p>영철</p>
</div>
<script>
const memberList = document.querySelectorAll("p");
for (member of memberList) {
console.log( member );
}
memberList.forEach( (elem, index ) =>{
console.log( elem, index );
} )
</script>
</body>
</html>
Map 객체에서 for of를 다음과 같이 사용할 수 있습니다.
<html lang="ko">
<body>
<script>
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const forOfList = array.map((number) => number * 2);
for ( iter of forOfList ){
console.log( iter );
}
</script>
</body>
</html>
자바스크립트 반복문 for in
for in 반복문은 index 혹은 key를 리턴하기 때문에 주로 객체를 처리할 때 사용됩니다. for of 와는 달리 iterator 객체가 아닌 경우 반복을 처리할 수 있기 때문에 key를 기준으로 순차적으로 처리하고자 할 때 사용할 수 있습니다.
<html lang="ko">
<body>
<script>
const myWork = {
title: "자바스크립트 개발자",
salary: 8000,
name: "짱구",
office: "판교",
};
// iterator 객체가 아니더라도 처리 가능
for (key in myWork) {
console.log(key, myWork[key]);
}
</script>
</body>
</html>
key를 기준으로 순차적으로 반복하며 해당 요소의 key 값으로 객체에 접근할 수 있습니다.
자바스크립트 반복문 for of 와 for in 의 차이점은
위에서 본 바와 같이, for in 반복문의 경우에는 모든 열거(enumerable) 가능한 속성을 기준으로 반복문을 수행할 수 있으며, for of 반복문의 경우에는 iterator 속성을 가지는 컬렉션에 대해서만 사용이 가능합니다.
즉, Symbol.Iterator 의 속성을 가진 객체의 경우에는 아래와 같이 for of, for in 모두 사용이 가능합니다.
<html lang="ko">
<body>
<script>
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const forOfList = array.map((number) => number * 2);
for (iter of forOfList) {
console.log(iter);
}
for (key in forOfList) {
console.log(forOfList[key]);
}
</script>
</body>
</html>
하지만, enumerable 열거 가능하지만 Symbol.Iterator 속성이 없는 경우, for of 는 사용할 수 없습니다.
<html lang="ko">
<body>
<script>
let myWork = {
title: "자바스크립트 개발자",
salary: 8000,
name: "짱구",
office: "판교",
};
// for of 는 iterator가 없는 객체를 처리할 수 없음
// Uncaught TypeError: myWork is not iterable
for (iter of myWork) {
console.log(iter);
}
</script>
</body>
</html>
따라서 위의 예제는 Uncaught TypeError: myWork is not iterable 오류가 발생하게 됩니다.
자바스크립트 for 반복문에 대해서 정리해보았습니다. 위의 내용은 MDN 문서 루프와 반복을 참고하여 작성하였습니다.
도움 되시길 바랍니다.