자바스크립트(JS) for문 구조와 활용 예시(짝수만 출력)를 통해, 간단하게 살펴보겠습니다.

 오늘은 자바스크립트에서 가장 중요한 역할을 한다고 해도 무방한 !! 자바스크립트 for문에 관해서 공부 해보도록 하겠습니다. 특히 반복문은 프로그래밍 언어의 핵심 중에 핵심이며, 기초적인 부분이기에 처음 배우시는 분이라면 혼자 코드화를 할 수 있을 때까지 반복 연습해보시는 것이 좋을 것 같습니다.

 

 제가 생각하기에 처음 프로그래밍 언어를 공부하시는거면 어느 자리에 어떤 정보가 들어가고, 어떤 방식으로 작성해야하는지 조금 막막할 수 있습니다. 그럴 땐 너무 스트레스 받지 마시고, 코드를 그대로 따라치면서 큰 틀 구조를 익히는게 좋습니다. 저를 포함해서 많은 분들이 처음 코드를 배울 때 한번에 for문의 코드를 안 보고 칠수 있지 않았습니다! 그러니 지금 고민하고 걱정 하고 있으신 블로그 방문자님도 마찬가지일겁니다 !! 처음 볼 때는 잘 안 보이고, 어떻게 쳐야할지 감이 안 오겠지만 계속 치면서 문장이 선명해지는 경험을 느낄 수 있을겁니다.

 

 아직 저도 많이 모자라고 공부해나가고 있는 입장이지만, 어떠한 코드를 공부하더라도 이와 마찬가지로 항상 같은 방법으로 스트레스 받지 않고 습득하려고 체득하려고 하고 있습니다. 

 사설이 너무 길었네요 ! html & css 를 마치고 자바스크립트 언어로 처음 프로그래밍 언어를 공부하시는 분이 있으시다면 이 위에 글을 보고 힘 얻으셔서 공부 파이팅 하셨으면 좋겠습니다 !!

 

 

0. 자바스크립트 for 반복문에 대한 기본 구조는 어떻게 될까요?

 

 그러면 자바스크립트 에서 for문의 기본 구성은 어떻게 될까요?

위와 같이 구성됩니다 ! 처음 보니깐 너무 모르겠다고 생각 안 하셔도 됩니다. 크게 보시면 JS 문의 영어 for 와 { } 중괄호 안에 값들이 보일 겁니다.

 

중괄호 { } 안에 값들은 우리가 소괄호( ) 안에 값들이 그 해당 하는 조건을 돌면서 출력되는 종속적인 부분을 구성해주는 부분입니다.

 

 중괄호{ } 부분이 비교적 종속적인 부분이라면 ! 그럼 자동차의 엑셀레이터, 브레이크, 핸들 부분은 어떤 것이 하게될까요? 맞습니다. 그 부분을 차지하는 것이 바로 소괄호 ( ) 부분입니다 .

 시작점

시작점 부분은 주로 우리가 변수를 지정해줍니다. 예를 들어 let i = 1; 처럼 우리가 이 for 반복문에서 반복이 일어나는 동안의 주체적인 역할, 시작점 부분을 하는 엑셀레이터와 역할을 진행하게 됩니다. 여기서 지정해준 변수를 통해서 우리는 원하는 값에 앞으로도 갈 수 있고 멈출 수 있는 것이죠 !

 

정지점

 정지점 부분은 우리가 지정해준 변수와 반복문이 말 그대로, 멈추게 만들어주는 브레이크와 같은 역할을 하게 됩니다. 간혹 코드를 잘못 작성하여 for 반복문 안에서 빙빙 돌게 만든다면 브레이크 역할을 하는 정지점까지 오지 못하여 무한루프에 빠지게 됩니다. 즉 브레이크를 못 밟게 되어 계속 반복문 안에서 무한히 돌게 되는 것이죠. 그렇기에 정지점에서 우리가 지정해주는 수가 굉장히 중요합니다.

 

 간격 부분은 반복문이 어떠한 방향으로 나아갈지를 나타내는 핸들과 유사한 역할을 합니다. 하지만!!! for 반복문 내에서도 이 간격 부분은 지정이 가능하니 꼭 저 그림의 간격 자리에 적지 않아도 된다는 점만 아시면 될 것 같습니다 !! 

 

간단한 예시로 자바스크립트 for 문을 확인해보도록 하겠습니다.

 

 

1. 1 이상 50 이하 수 출력하기

 

가장 기본 중의 기본 예시입니다. 모든 수를 출력하기 간격 부분의 ++ 는 수를 + 1 추가하여 진행해주게 합니다.

 

방법 1. ( ) 소괄호 내 간격(진행방향) 지정 

출력이 너무 길게되어서 중간에서 잘랐습니다.

 

 

방법 2. { } 중괄호 내 간격(진행방향) 지정 

출력이 너무 길게되어서 중간에서 잘랐습니다.

 

 

 두가지 코드 다 출력이 잘 되는 것을 확인할 수 있습니다. 여기서 확인하셔야하는 점은 !!! 아까 위에서 자바스크립트 for 문의 특징에 대해 말씀 드렸던 간격 부분을 ( ) 소괄호 내에서 지정하느냐 { } 중괄호 내에서 지정하느냐에 따라 코드 모양이 확실히 다르다는 것입니다. 물론 더 조건이 복잡해지고 세부 조건이 많아질 수록 { } 중괄호 내에서 지정하는 경우가 많아집니다. 

 

 

2. 1 이상 100 이하 모든 짝수 출력하기

 

이번엔 짝수만 출력해주는 방법입니다. 물론 if 문도 사용해주면 더욱 좋겠지만, 이 포스팅에서는 for 문을 사용하는 것이 메인이기 때문에 if 문은 되도록 제외한 상태에서 작성해보도록 하겠습니다.

 

 

 

반복문을 통해 잘 출력되는 것을 확인할 수 있습니다.

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 코딩에 도움이 됐으면 좋겠습니다.

좋아요(❤) 버튼 ↙은 항상 감사합니다.

방문하신 모든 분들 좋은 하루 되세요 : )