2021-04-11
자바스크립트 내부에서는 for을 이용한 몇 가지 형식의 반복문 구문이 존재한다. 이를 통해 코드의 양을 줄이고 반복적인 업무를 수행할 수 있게 된다. 이 for의 사용법을 알아보도록 하자.
- for
아래는 기본 for문 코드이다 정수가 들어가 변수에 루프를 돌면서 더해주는 구조이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var num = 1
for(var i = 1; i < 5; i++){
num += i
console.log(num)// 2, 4, 7, 11
}
</script>
</head>
<body>
Hello World
</body>
</html>
for() 안에는 3가지 매개값이 들어간다.
1. for구문안에서 사용할 변수(반복 변수)
2. 조건식(해당 조건식의 범위를 벗어나면 루프는 종료된다.)
3. 루프를 한번 끝낼때마다 실행될 코드
위의 for구문에서 num변수는 루프마다 [ 1, 2, 3, 4]의 값이 더해지게 된다.
- for(in)
for in 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구조이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var content = "";
var arr = ["I ","am ", "a ", "Boy ", "!"];
var x;
for (x in arr) {
console.log(x) // 0, 1, 2, 3, 4
content += arr[x]
}
console.log(content)
</script>
</head>
<body>
Hello World
</body>
</html>
for( [인덱스변수] in [배열/오브젝트]) 같은 구조로 순환되며, 위의 코드에서 x는 arr의 인덱스 역할을 하며 0부터 하나씩 증가하게 된다. 결과를 콘솔에서 확인하면 아래와 같다.
- for(of)
for of는 for in 과는 조금 다른 방법으로 동작하는데, 기존의 for in은 for( [인덱스변수] in [배열/오브젝트]) 와 같이 인덱스 변수는 말 그대로 인덱스를 나타내는 의미로 사용된다. 하지만 for of에서는 for( [인덱스변수] of [배열/오브젝트]) 이 인덱스 변수가 실제 배열 또는 오브젝트의 실제 데이터를 받아들인다. 표현이 다소 난해 할 수 있다. for in 때 사용한 코드를 그대로 사용해 for of 구문은 어떤식으로 반응하는지 알아보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var content = "";
var arr = ["I ","am ", "a ", "Boy ", "!"];
var x;
for (x of arr) {
console.log(x) // I , am , a , Boy , !
content += arr[x] // 인덱스가 아닌 데이터 자체를 받음
}
console.log(content) //content에는 아무값도 저장되지 않음
</script>
</head>
<body>
Hello World
</body>
</html>
아래의 결과를 보자 x에는 인덱스 번호가 해당 인덱스의 데이터가 들어간 것을 확인할 수 있다. (마치 자바의 forEach 구문가 같은 동작을 하는 것처럼 보인다.) 때문에 content의 변수에는 아무것도 저장되지 않고 undefine 값만 5번 들어간 것을 확인할 수 있다.
메인 이미지 출처: Photo by Sirisvisual on Unsplash