끄적끄적 개발기록

안녕하세요 워누입니다😀

오늘은 자바스크립트에서 배열이나 객체를 더욱 쉽게 다룰 수 있는 반복문인

for in 반복문과 for of 반복문에 대하여 포스팅해보고자 합니다.

자바(java)의 향상된 for문과 비슷한 내용이며 일전에 제가 포스팅한 적이 있으니 참고하시면 좋을 듯 합니다ㅎㅎ

https://seoneu.tistory.com/17

자바스크립트에서는 위에서 언급한 것처럼 for in, for of 두가지 방식으로 반복문을 제공하고 있는데요,

예시 코드를 보면서 어떻게 쓰는지 바로 보여드릴게요!

우선 일반적인 for문으로 구현된 반복문입니다!

(html의 <script> 부분만 작성했습니다.)

<script>

var array = ['포도', '바나나', '사과', '망고'];

for (var i=0; i<array.length; i++){
	alert(array[i]);
}

</script>

보시다시피 array 배열안에 있는 요소를 하나씩 출력하는 프로그램이며,

결과는 예상하실 수 있다시피 아래 이미지처럼 포도, 바나나, 사과, 망고 순으로 alert 창에 출력됩니다!

이를 for in 반복문으로 구현하면 다음과 같습니다. 

<script>

var array = ['포도', '바나나', '사과', '망고'];

for (var i in array) {
	alert(array[i]);
}

</script>

결과는 똑같이 나오면서도 쓰는 코드는 좀 더 간결해졌음을 알 수 있습니다!

마지막으로 ECMAScript 6에서 추가된 반복문 문법인 for of 반복문은 아래와 같이 구현할 수 있습니다!

<script>

for (var array of ['포도', '바나나', '사과', '망고']){
	alert(`${array}`);		
}

</script>

for in 반복문과 비슷하지만 반복 변수를 따로 선언하지 않고 배열의 요소들을 직접 입력해주는게 특징입니다!

추가로 for of 반복문은 배열 이외에도 문자열이나 맵(map) 등의 자료형에도 사용할 수 있다고 하네요..!

위 세개의 반복문을 잘 숙지하고 있다가 상황에 맞게 잘 사용하면 코드를 더 깔끔하게 작성할 수 있을 것 같습니다ㅎㅎ

오늘 포스팅한 내용도 누군가에게는 도움이 되었기를 바라며 이만 마무리하겠습니다!

안녕하세요 블로거 워누입니다! 

어느새 Tistory 블로그를 버려둔지 꽤 시간이 지나버렸네요..ㅎ 

. 

하지만 어떤 계기로 인해 이 블로그를 다시 살리게 되었습니다! 공부한 내용들을 조금씩 올리는 용도로 작성 예정이니 즐감하셨으면 좋겠습니다! 

. 

오랜만에 java 공부하다가 java에 향상된 For문이라는 것이 있더라구요! 

그래서 간단한 예제를 만들어보고 이렇게 쓰는 거구나 싶어서 아래와 같이 작성해보았습니다. 

<소스코드>

<결과>

많은 자바 책에서 이미 소개되고 있어서 저만 너무 늦게 알았나 싶습니다.. ㅎㅎ 

기존의 for문은 소괄호 안에 (반복변수; 조건; 반복변수증감) 형태로 작성하고 중괄호에 {실행문}을 작성하였으나 

향상된 for문에서는 소괄호 안에 (타입 변수 : 배열) 이런 형태로 작성하고 중괄호에 {실행문}을 작성합니다.

즉, 향상된 for문의 형태는 아래 형태를 가지고 있는데, 

====================

for( 타입변수 : 배열 ) {

    실행문;

}

====================

for문이 처음 실행될 때 배열에서 가져올 첫번째 값이 있는지 판단한 후 값이 있으면 해당 값을 변수에 저장합니다.

그리고 실행문을 실행하며 이게 하나의 루프입니다. 

. 

해당 루프는 배열 안에서 가져올 다음 값이 없을 때까지 실행되며, 배열안에 가져올 값이 없게 되면 해당 반복문을 종료합니다. 따라서, 향상된 for문의 반복 횟수는 배열의 항목 수(=배열.length)가 됩니다.  

배열은 어디서나 많이 쓰이니까 향상된 for문도 공부해둔다면 개발하다가 유용하게 쓸 수 있을것 같네요 ㅎㅎ

앞으로도 공부하다가 공유할 내용이 있다면 블로그에 소개하겠습니다! 오늘은 여기까지 작성할게요!!