개발자를 희망하는 초보의 자기개발 이야기

JavaScript 반복문(Loop) 본문

프론트엔드(Front-end)/JavaScript

JavaScript 반복문(Loop)

클라우드아실 2020. 12. 26. 19:59
반응형

JavaScript 반복문(Loop)

 : 반복문은 같거나 비슷한 코드를 여러 번 실행시켜야 할 때 사용합니다. for 형태가 대표적으로 기본형태는 아래와 같습니다. 1부터 4까지 반복해서 출력하는 반복문을 만들어 보겠습니다.

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

 

 : 초기화 부분은 for문 안에서 동작할 임의의 변수와 시작값을 할당해주는 부분입니다. 보통 i를 많이 쓰는데 iterator(반복자)의 약자로 봅니다. 1부터 더해야 하기에 i = 1을 할당해서 선언합니다. ; 표기로 항목을 구분합니다.

for(let i = 1; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

 

 : 조건식은 언제까지 해당 코드를 반복할지 입력하는 부분입니다. 앞서 i가 1부터 시작해서 4까지 반복할 테니 i <5 또는 i <=4 까지 반복해야 합니다. 

for(let i = 1; i <= 4; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

 

 : 마지막 증감문은 반복하면서 얼마씩 증가시킬지 입력합니다. 1부터 4까지는 1씩 증가하니 i = i +1로 표현하거나 증감연산자를 통해 i++로 표현하는 게 일반적입니다.

for(let i = 1; i <= 4; i++){
    반복해서 실행될 코드
}

 

  : 이제 출력 부분은 2번째 줄에서 console.log를 통해서 나타냅니다.그럼 console.log가 반복되면서 1부터 4까지 출력됩니다.

for(let i = 1; i <= 4; i++){
    console.log(i)
}

 

 : 1부터 4까지 값을 더한다 가정하면 for문 밖에 합산값을 넣을 임의의 변수를 만들고 for문에 해당 변수를 통해 합산하면 됩니다. 만약 아래 sum 변수를 1로 할당한다면 2번째줄 let문의 i는 2부터 시작해야 합니다.

let sum = 0;
for(let i = 1; i <= 4; i++){
    sum = sum + i;
}

 

 : while문의 경우 for문의 초기식, 조건식, 증감문을 다 분리한 형태입니다. 초기식은 while문 위로. 조건식은 while문 괄호 안에. 증감문은 반복할 코드 아래로 분리됩니다. 즉, for문은 while문으로. while문은 for문으로 표현 가능합니다. 한 줄에 다 표현할 수 있으므로 for문을 선호합니다.

let sum = 0;
let i = 1;

while(i <= 4) {
    sum = sum + i;
    i++
}

 

 : for문 안에 if문으로 조건을 제시하거나 if문 안에 for문을 둘 수 있습니다. 

for(let i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
   console.log(i);
}

 

 : for문 안에 for문을 한 번 더 넣어서 이중for문을 만들 수도 있습니다.

for(var i = 0; i < 10; i++){
    for(var j = 0; j < 10; j++){    
        console.log(String(i)+String(j)+'<br />');
    }
}

 

정리

  • for문, while문, do...while 문
  • 초기화, 조건식, 증감문
  • for문은 while문으로. while문은 for문으로 작성 가능
  • 이중for문
  • continue, break

참고

생활코딩 반복문

제로초 반복문

TCPSCHOOL.COM 반복문

반응형

'프론트엔드(Front-end) > JavaScript' 카테고리의 다른 글

JavaScript 객체(object)  (0) 2021.01.03
JavaScript 배열(Array)  (0) 2021.01.03
JavaScript 문자열(String)  (0) 2020.12.20
JavaScript 조건문(Condition)  (0) 2020.12.20
JavaScript 연산자(operator)  (0) 2020.12.20