[JavaScript] for문

Zinny·2023년 4월 6일
3

JavaScript

목록 보기
1/3
post-thumbnail

자바스크립트를 배운지 3일차, 연습 코딩테스트가 시작되었다.
아무것도 모르고 연습이니까 하는 가벼운 마음으로 코딩테스트를 응시했다가 크게 디인 후(문제는 매우 기초였다...) 프로그래머스로 혼자 하루에 3~5문제씩 풀어보며 연습하던 중, 강의로도 학습했지만 사용할 때마다 헷갈리는 for문을 중심적으로 공부해보겠다.


for문

for문은 반복문이다. 주로 블록문으로 작성하는데 블록문이란 0개 이상의 구문을 묶을 때 사용한다고 한다.

📝 작성 방법

for (초기식; 조건식; 증감식) {
       조건식이 참일 경우에 실행되는 실행문
}

➡️ (필수) 초기식과 조건식 뒤에는 ;를 붙여줘야한다.
➡️ 세 개의 식은 모두 선택사항이다. 비우고 싶다면 비우고 작성 가능. 단, 초기식과 조건식은 뒤에 ;을 붙여 줘야한다.

초기식

초기식에는 식이나 변수를 선언한다. var,let 키워드를 사용해서 변수를 선언한다. var로 선언한 변수는 for문 이외에도 사용가능하지만 (반복문에 제한되지 않음) let으로 선언한 변수는 반복문의 지역 변수가 된다.

지역변수란?

함수 안에서 만들어지는 변수를 지역변수라고 한다. 다른 개념으로는 함수 밖에서 만들어진 변수인 전역변수가 있다. 지역변수는 함수가 호출되면서 생성되서 함수의 실행 종료와 함께 없어지고, 전역변수는 계속 사용 가능하다.

조건식

식을 반복할 때마다 평가할 식이다. 평가 결과가 true라면 실행문을 실행하고 거짓이라면 for문의 다음 식으로 넘어간다. (생략한다면 결과는 항상 true)

증감식

식을 반복한 후 평가할 식이다. 다음 반복할 식의 조건식을 평가하기 전에 발생하며, 주로 변수를 증감하거나 바꿀 때 사용한다.

실행문

조건식의 평가가 true일 때 실행하는 문이다. 여러 문을 반복실행하려면 {}로 묶어야한다. (대부분 묶어 사용) 아무것도 실행하지 않으려면 공백문 ;을 사용할 수 있다.

🛠️ 사용법

1️⃣ 예시 - 0부터 9보다 작은 수 출력하기

for (var i = 0; i < 9; i++) {
   console.log(i);
}

👆 MDN 문서의 예시이다. 해석해보자면, 변수 i가 9보다 작을 때 i에 1씩 더한다는 의미이다.
i++는 후위 증감 연산자로, 초기식인 i=0을 먼저 실행한 후 1씩 i에게 더한다. console 창을 확인해보면 아래와 같이 0부터 8까지의 i 값을 출력하게 된다.

2️⃣ 예시 - 정수 n 이하의 모든 짝수의 합

function solution(n) {
  let sum = 0;
  for (let i = 2; i <= n; i += 2) {
    sum += i;
  }
  
  return sum;
}

👆 프로그래머스에서 내가 작성한 정수 n 이하의 모든 짝수의 합을 구하는 알고리즘이다.
변수의 이름은 sum으로 지정했다. (작성 당시에는 몰랐는데 지금 다시 보니 i의 변수를 let 키워드를 사용해 할당해서 지역변수로 할당했다.)
for문을 해석해보면, i의 초기값은 2이고, i가 입력할 인자 n보다 작거나 같은 경우에, i 값에 2를 더하라는 의미이다.
✏️ i += 2의 의미는 i = i + 2와 같다.
만약, n의 값이 9일 경우에 반복문이 어떻게 실행되는지 살펴보자.

실행순서ni (2씩 증가)실행식: sum = sum + i;sum(출력값)
1번 반복92 (초기값이 2)sum = 0 + 22
2번 반복94sum = 2 + 46
3번 반복96sum = 6 + 612
4번 반복98sum = 12 + 820
5번째에 종료910조건식에 맞지 않으므로 실행 X

마치며

원래 if문과 함께 작성하려고 했던 블로그 글이 for문 하나만 적어도 많아져서 if문은 다음에 작성하기로 했다. 아직 초보 중의 초보라 mdn문서만 봐도 모르는 단어도 많고 생각해봐야 이해할 수 있는 문장도 많다. 그래도 블로그 작성하면서 몰랐던 내용도 많고 코드들도 차근히 살펴볼 수 있어서 배워가는 점이 많은 것 같아서 뿌듯하다...😎 자주 자주 작성을 해야겠다.

참고사이트
https://developer.mozilla.org/ko/ (mdn)
https://wikidocs.net/62 (지역변수)

profile
Studying for Frontend

1개의 댓글

comment-user-thumbnail
2023년 4월 14일

for... 이제는 for문 그만 쓰고 싶어요...🥲

답글 달기