WEB/JavaScript

[JavaScript] JS for 구문의 다양한 형식(in/of) 알아보기

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

저작자표시 비영리

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] JS getElementById() 이용한 아이디 요소 객체 선택 (0)	2021.04.15
[JavaScript] JS this(자기자신) 키워드 알아보기 (0)	2021.04.13
[JavaScript] JS Switch 구문을 통한 상황 처리 알아보기 (0)	2021.04.09
[JavaScript] JS Boolean Value에 대하여 알아보기. (0)	2021.04.08
[JavaScript] JS 통한 랜덤값 생성하는 방법 알아보기 (0)	2021.04.07

Contents

새소식

인기 검색어