JavaScript | For문, While문 (반복문)

Ryan·2020년 8월 11일
0

JavaScript

목록 보기
5/18
post-thumbnail

반복문은 일련의 자동으로 반복하게 해주는 프로그래밍 도구다.
우리는 어떤 동일한 동작을 반복해야 할 경우 Function에 묶어두곤 한다.
하지만 이러한 경우 함수를 여러번 불러와야만 한다.
이때 반복문을 쓰면 자동화되는 효율적인 코드를 만들 수 있다.

1. For 문

1) 'for'문이란

: for문은 어떤 조건이 달성할 때까지 동일한 코드를 반복적으로 실행시켜준다.
주로 반복 횟수를 알고 있을때 사용된다.

let str = '';
for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str); // output: "012345678"
  • 형식 : for(초기화; 조건; 반복시 실행되는 코드) {반복해서 시행할 코드}

2) 'for in' 문이란

: for ~ in문을 이용하여 조금 더 쉽게 작성할 수 있다.
하지만 이것은 한정적으로만 쓸 수 있다.

var grades = {'a': 10, 'b': 6, 'c': 80};
for(var key in grades) {
    document.write(grades[key]); // output: 10, 6, 80
}
  • for문과 마찬가지로 grades라는 객체의 모든 엘리먼트에 접근해서 스퀘어브라켓의 코드를 실행한다.
  • 형식 : for(엘리먼트 파라미터 in 객체명) {모든 엘리먼트를 실행할 코드}
  • 예시에 작성한 key는 고유명사로 사용 가능한 것이 아니라 내가 임의로 설정한 파라미터이름이다.

3) 배열에서의 'for'문

: for문은 배열에서 많이 쓰인다.

const animals = ['Bear', 'rabbit', 'Lion'];
for (let i = 0; i < animals.length; i++){
  console.log(animals[i]);
}
  • 배열의 엘리먼트에 어떻게 접근할 수 있을지 고민해보자.
    = 인덱스다. 그렇다면 배열에서 인덱스에 접근하기 위해선? length를 쓰면 된다. 참 쉽죠?
const items = ['item1', 'item2', 'item3'];
const copy = [];
// for문
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}
// forEach문
items.forEach(function(item){
  copy.push(item);
});
  • for문은 어레이 메서드를 이용해서forEach문으로 위와 같이 바꿀 수 있다.

4) 'for'문 안에 'for'문

: for문안에 for문을 쓸 수도 있다.
두개의 배열의 엘리먼트를 비교할 때에는 자주 쓰인다.

const myArray = [6, 19, 20];
const yourArray = [19, 81, 2];
for (let i = 0; i < myArray.length; i++) {
  for (let j = 0; j < yourArray.length; j++) {
    if (myArray[i] === yourArray[j]) {
      console.log('Both loops have the number: ' + yourArray[j])
    }
  }
};

2. 'While' 문

: While문은 조건이 True일 경우 컬리 브라켓 내부 코드를 반복시킨다.
무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우 주로 활용된다.
파일을 읽고 쓸때 많이 사용되기도 한다.

let counterTwo = 1;
while (counterTwo < 4) {
  console.log(counterTwo);
  counterTwo++;
}
  • 형식 : while (조건) {조건이 참일 경우 실행되는 코드}
  • 조건이 거짓일 경우 while문 이후로 넘어간다.

3. 'Do-While' 문

: Do-While문도 while 문과 동일하게 조건에 따라 반복을 계속할지를 결정한다.
다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정한다.

let countString = '';
let i = 0;

do {
  countString = countString + i;
  i++;
} while (i < 5);

console.log(countString);
  • 형식 : do {실행되는 코드} while (조건)
  • 조건이 거짓일 경우 do-while문 이후로 넘어간다.

4. 반복문 컨트롤(Break, continue)

: 반복 작업을 중간에 중단시키고 싶다면 어떻게 해야할까? break를 사용하면 된다.
: 그럼 실행을 즉시 중단 하면서 반복은 지속되게 하려면 어떻게 해야 할까? Continue를 사용하면 된다.

for(var i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    document.write('coding everybody'+i+'<br />');
}
  • 예시와 같은 경우 output은 5를 제외하고 0부터 9까지를 출력한다. 5에서 중단시켰지만 반복은 지속된다.
profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글