자바스크립트의 반복문을 정리해보려 한다.
1. for
먼저 for 문의 구조는 다음과 같다.
for(초기값; 조건식; 증감식) {}뒤에서 살펴볼 다른 반복문들과는 다르게 초기값에 들어갈 변수를 let으로 지정해야 한다.
- 예시)
2. for in
for in의 구조는 다음과 같다.
for (const i in 배열 or 객체) {}위에서 언급했다시피 let이 아닌 const를 사용한다. in 오른쪽에 반복할 배열/객체를 넣으면, i 변수에 값의 인덱스가 들어간다.
- 예시)
위에서 i는 인덱스 값임을 확인할 수 있다. 원래 배열의 값을 얻고 싶다면 array[i]와 같이 접근해야 한다. 파이썬의 for in과 다른 점이다.
const obj = {"1": 'a',
"2": 'b'}
for (const i in obj) {
console.log(i);
}
// 결과: 1, 2object의 경우 위와 같이 key값이 출력된다.
3. for of
for of를 이용하면 파이썬의 for in과 같이 값을 바로 얻을 수 있다. 구조는 다음과 같다.
for (const i of 배열) {}사용 방법은 for in과 같다. 방금 말했듯이 i에는 순서에 맞는 값이 들어간다.
for of는 위의 for in과 같은 객체에서 사용이 가능하지 않은 듯 하다.(iterable object에 대해서만 가능하다고 하는데 키와 value가 있는 객체에서는 사용이 불가능한 것으로 보인다.)
- 예시)
4. forEach
forEach는 오직 array에서만 사용 가능하다. 특징은 다음과 같다.
- 배열에서만 사용 가능.
- 배열의 처음부터 끝까지 반복하여 실행한다.
- 인자로 콜백 함수를 받아온다.
- 주어진 함수를 각각의 인자에 모두 실행한다.
* querySelectorAll() 전체 선택자를 이용할 때 주로 사용한다.(html의 여러 요소들을 선택하고 각각에 대해 무언가 실행할 때)
구조는 다음과 같다.
array.forEach(callback(currentvalue[, index[, array]])[, thisArg])- callback : 각 요소에 대해 실행할 함수. 다음 세가지를 매개변수로 받는다.
- currentValue : 처리할 현재 요소.
- index : 처리할 현재 요쇼의 인덱스.
- array : forEach()를 호출한 배열.
- thisArg : callback을 실행할 때 this로 사용할 값.
잘 이해가 가지 않는다. 아래 예시를 확인해 보자. for를 forEach로 바꿔 표현한 것이다.
- 예시)
const items = ['item1', 'item2', 'item3'];
const copy = [];
// 이전
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// 이후
items.forEach(function(item){
copy.push(item);
});이전의 for 반복문들과 모양이 좀 달라 보인다.
반복할 배열.forEach(function(인자){실행할 동작})
정도로 이해하면 될 듯 하다.
array.forEach(item, index) => {console.log(item, index)};화살표 함수를 이용하면 위와 같다. 내 기준엔 더 이해하기 편해 보인다.
5. while
다음은 while이다. for에 비해 단순해 보인다.
while(조건) {실행할 것}조건이 true일 경우 코드를 계속 실행한다.
- 예시)
for와 달리 while의 조건문 밖에서 i를 선언한다.
만약 아래와 같이 코드를 짠다면 어떻게 될까?
while(true) {
console.log('asdf');
};'asdf'가 무한히 출력될 것이다. 이런 경우 언제 반복문을 끝낼 지 나타내는 코드가 필요하다.
let i = 0;
while(true) {
console.log('asdf');
if(i == 5) {
break;
}
i++;
};위와 같이 break를 사용하면 조건문을 통해 반복문을 탈출할 수 있다.
6. do ~ while
do{
실행할 것
}
while(조건문)do ~ while문은 조건문을 판단하기 전에 do의 코드를 먼저 실행시킨다.
따라서 조건이 true든 false든 무조건 한 번은 실행된다.
- 예시)
조건문과 상관없이 무조건 1번은 실행시키고 싶을 때 do ~ while문을 사용하면 유용할 것 같다.
여기까지 반복문의 종류와 기본적인 사용 방법에 대해 알아보았다. 이외에도 다양한 상황에서 쓰이기도 하고, 추가적인 기능도 있지만 그것들은 필요하게 되면 찾아보도록 하자.
다음에는 continue와 break에 대해 알아보면 좋을 것 같다.
