[TIL] 08 -JS Basic #4 제어문

UlongChaS2·2021년 4월 23일
0

TIL - JS

목록 보기
4/6
post-thumbnail

제어문(Control flow statement)

주어진 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.
일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문은 코드의 실행 순서를 인위적으로 제어할 수 있다.

블럭문(Block statement/Compound statement)

0개 이상의 문들을 중괄호로 묶은 것으로 코드 블럭 또는 블럭으로 JS는 블록문을 하나의 단위로 취급한다.

ex)

{
  var foo = 10;
  console.log(foo);
}

조건문(conditional statement)

조건식(conditional expression)의 평가 결과가 truethy value, falsely value인지에 따라 코드 블럭(블록문)의 실행을 결정한다.

if..else문

조건식의 평가 결과가 참(true)일 경우 if문 코드 블록이, 거짓(false)일 경우 else문 코드 블록이 실행된다. 조건을 더 추가하고 싶으면 if문과 else문 사이에 else if문을 사용한다. (else if문은 수 제한 없이 사용 가능하다)

if (조건식1) { 
  // 조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) {
  // 조건식2이 참이면 이 코드 블록이 실행된다.
} else {
  // 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}
  • 코드 블럭내의 동작문이 한개라면 {} 생략 가능
  • 복잡하지 않는 if…else문은 삼항 조건 연산자로 바꿔쓸 수 있다

switch 문

switch문의 표현식과 case의 표현식과 일치하고 뒤에 break문이 있다면 실행되지만 모든 case 문이 일치하는게 없다면 실행 순서는 default 문으로 이동한다. default 옵션으로 사용할 수도 있고 사용하지 않을 수도 있다.

switch (표현식) {
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 문의 표현식과 표현식2가 일치하면 실행될 문;
    break;
  default:
    switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없을 때 실행될 문;
}
  • switch 문은 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.
  • break문을 사용하지 않으면 마지막 동작문이 할당된 후 거기에도 break문이 없어 결론적으로 default값을 가지게 된다. (default는 마지막에 위치함으로 딱히 break문이 필요없어 생략한다.)

반복문(Loop statement)

조건식(conditional expression)의 평가 결과가 참인 경우 코드 블럭을 실행한 후 조건식이 계속 참인 경우 진행하고, 거짓이 될 때까지 반복한다.

for문

가장 일반적인 반복문으로 조건식이 거짓일 때까지 반복한다.

for (초기화식; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문(동작문);
}

이해를 쉽게 하기 위해 예를 들어보자
ex)

for (let i = 0; i < 2; i++) {
  console.log(i);
}
  1. for문 파라미터에 i라는 변수명을 가진 변수를 선언하고(초기화식) let i = 0;
    i는 2보다 작다라는 조건(조건식)을 주고 i < 2
    블럭문을 돌 때마다 i가 얼마나 증감할지 정해준다(증감식) i++
  2. i가 0일 때 조건식 값이 true로 동작문 console.log(i) // 0을 보여주고
  3. i++으로 i는 1, 조건식 값 true, 동작문 console.log(i) // 1을 보여주고
  4. i++으로 i는 2로 조건식 값이 false로 for문을 나오게 된다.
  • for문 안에 for문을 넣어 중첩으로 사용 가능하다.
  • for문 안에 어떤 식도 넣지 않으면 무한루프로 사용 가능하다.
for(;;) //무한루프

while문

초기화식
while (조건식) {
  조건식이 참인 경우 반복 실행될 문(동작문);
  증감식
}

이해를 쉽게 하기 위해 예를 들어보자
ex)

let i = 0;
while (i < 2) {
  console.log(i);
  i++;
}
  1. 반복문 밖에서 i라는 변수명을 가진 변수 선언 let i = 0
  2. while문 파라미터에 i 는 10보다 작다라는 조건(조건식)을 주고 i < 2
  3. while문 블럭 안에 동작문 console.log(i);와 블럭문을 돌 때마다 얼마나 증감할지 정해준다(증감식) i++
  4. i가 0인 상태로 while문 들어가 조건식 값이 true로 동작문 작동하여 console.log(i) // 0을 보여주고 i++로 증감하여 i = 1
  5. i는 1로, 조건식 값 true, 동작문 console.log(i) // 1을 보여주고 i++로 증감하여 i = 2
  6. i는 2로 조건식 값이 false로 while문을 나오게 된다.
  • while은 조건식에 truthy value만 넣으면 무한 반복하게 된다.
while(true){} //무한루프

do…while문

코드 블록을 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한번 이상 실행된다.

var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
  console.log(count);
  count++;
} while (count < 3); // 0 1 2

break문

코드 블록을 탈출하는 것이 아니라 레이블 문, 반복문(for, for…in, for…of, while, do…while) 또는 switch 문의 코드 블록을 탈출, 이외에 break문을 사용하면 SyntaxError(문법 에러)가 발생한다.


레이블문(Label statement)

식별자가 붙은 문으로 프로그램의 실행 순서를 제어하기 위해 사용한다.
ex) case문, default문

// foo라는 식별자가 붙은 레이블 블록문
foo: {
  console.log(1);
  break foo; // foo 레이블 블록문을 탈출한다.
  console.log(2);
}
console.log('Done!');

중첩된 for 문을 외부로 탈출할 때 레이블문은 유용하지만 그 외의 경우 레이블 문은 일반적으로 권장하지 않는다. 사용하면 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문이다.


continue문

반복문(for, for…in, for…of, while, do…while)의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 이동, break와 다른 점은 반복문을 탈출하지 않는다.

2개의 댓글

comment-user-thumbnail
2021년 4월 24일

유정님도 처음부터 정리 시작하셨네요! 감사히 잘 보겠습니다

1개의 답글