본문 바로가기
Study/Java Script

[Java Script] 08. 제어문

by 코딩파이 2022. 7. 30.

** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다.
** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부정확한 정보전달이 있을 수 있습니다. 
** 피드백은 언제나 환영입니다!

제어문?

조건문이나 반복문 처럼 특정 조건에 따라 코드를 실행할 때 사용한다.

다만 제어문은 위 → 아래로 진행하는 일반적인 코드 실행 순서를 바꿀 수 있으니 주의할 것.

아무튼 가보자!

 

1. 블록문

중괄호로 문(statement)을 묶는 것을 뜻한다.

{
    var result = 10;
    console.log(result)
}
// ...뭔가 허전하다.

앞으로 소개 할 반복문과 조건문의 몸통 정도라고 생각하면 된다.

이렇게 블록문만 잘 쓰이진 않는다.

 

2. 조건문

주어진 조건식에 따라 코드를 실행하는 것을 뜻한다.

조건문의 종류는 if else 와 switch 문 두가지가 존재하는데,

둘다 중요하니 하나씩 알아보자.

 

1. if ... else 문

if 문은 조건식의 true / false 여부에 따라 코드블록을 실행한다.

예시를 보면서 이해하는게 가장 빠르다

// 12세 이용가 영화를 체크한다고 하자.
var age = 15; // 15살! 이면 좋겠다.

if (age >= 12) { // 조건식 : 12 살 이상이면...
	console.log("이 영화를 볼 수 있습니다");	// 조건식이 true면 이 코드를 실행한다.
}

if (age >= 12) console.log("이 영화를 볼 수 있습니다"); // 코드 한줄은 괄호를 없앨수도 있다.

이렇게 if (조건식) 이 true(참) 이라면, 블록문 안에 코드를 실행한다.

엇, if else 문인데, 그럼 else는 어떻게 쓸까?

 

let age = 15;

if (age >= 12) { // 조건식
	console.log("이 영화를 볼 수 있습니다");	// 기존 12살 이상 조건식과
} 
if (age < 12) {
	console.log("이 영화를 볼 수 없어요!"); // 12 미만 조건식, 이렇게 두개를 작성할 수 있지만
}

if (age >= 12) { 
	console.log("이 영화를 볼 수 있습니다");
} else {
	console.log("이 영화를 볼 수 없어요!");  // else를 이용하여 false인 경우 실행할 코드를 작성할 수 있다.
}

이렇게 else를 사용한다면 if 조건식에 해당되지 않아 false인 상황에서 코드를 실행시킬 수 있다.

 

그럼 더 많은 조건을 넣고 싶다면 어떻게 할까?

연령별 영화를 안내한다고 가정하자.

var age = 27; // 슬프다.

if (age >= 18) {
	console.log("성인영화를 볼 수 있습니다");
}
if (age >= 15) {
	console.log("15세 이용가 영화를 볼 수 있습니다.");
}
if (age >= 12) {
	console.log("12세 이용가 영화를 볼 수 있습니다.");
}
...
// 결과는 3개가 다 출력된다.
// 3개의 조건문을 다 거치기 때문이다.

이렇게 if문을 여러개 작성할 경우, 매 if문을 거치기 때문에 console.log 3개가 다 출력 될 것이다

물론, 아래처럼 더 상세히 조건문을 작성할 수 있겠지만

if (age >= 18 && age < 15) {
	console.log("성인영화를 볼 수 있습니다");
}
...

// 이렇게 하면 3개의 조건문을 거쳐 "성인영화를 볼 수 있습니다" 만 출력되나,
// 코드 가독성이 매우 떨어진다.

짜잔! 이렇게 몇 개씩 있다간 정말 보기싫은 코드가 될 거 같다.

이럴 때 바로 else if 를 사용할 수 있다.

if (age >= 18) {
	console.log("성인영화를 볼 수 있습니다");
} else if (age >= 15) {
	console.log("15세 이용가 영화를 볼 수 있습니다.");
} else if (age >= 12) {
	console.log("12세 이용가 영화를 볼 수 있습니다.");
} else {
	console.log("어린이는 주무실 시간")
}

 if , else if ,else 를 모두 사용하여 짧고 보기 쉬운 코드를 작성하였다.

물론, 굳이 else나 else if 를 굳이 쓸 필요가 없는 상황이라면 쓰지 않는 것이 코드가 덜 복잡해보인다.

그러니 else if와 else를 무조건 적으로 쓰는건 유의할 것.

 

if else 조건문과 삼항 조건 연산자

둘다조건식에 맞게 코드를 실행하는 문 인데, 어떤 상황에 사용하면 좋을까?
사실 정답은 없지만 내 개인적인 느낌을 적는다.

삼항연산자: 값을 할당하거나 조건과 실행할 문이 간단할 때
if else 조건문: 외에 일반적인 상황
// 이처럼 조건문이 간단하고, 바로 할당할 값들은 삼항연산자가 편하다.
var result = score > 10 ? "pass" : "fail";

// 아래처럼 조건문이 길어져 가독성을 해칠때나 실행할 문이 많은 보통 상황에선 if문이 낫다
if (linsten > 7 && write > 8 .....아무튼 긴 조건) {
	// ...
    // 아무튼 수많은 코드
    // ...
}...

 

위와 같이 할당이나 간단한 조건은 삼항 연산자가 훨씬 더 짧고 눈에 잘 들어온다 (사실 처음배울땐 안그랬다.)
쓰다 보면 자연스럽게 이해 될테니 걱정하지 말자.

 

 

2. Switch 문

if else 처럼 true / false 조건식이 아닌, 여러 문자열이나 숫자와 일치하는지 여부에 따라 조건을 실행할 때 주로 쓰인다.

아래 영화별 장르 예시를 같이 보자.

var 장르 = "액션";

switch (장르) {
	case "액션": // 장르 === "액션"
		console.log("액션 장르 영화입니다");
		break;
	case "코미디": // 장르 === "코미디"
		console.log("코미디 장르 영화입니다");
		break;
	case "로맨스": // 장르 === "로맨스"
		console.log("로맨스 장르 영화입니다");
		break;
	default: // 위 조건에 아무것도 해당되지 않을때
		console.log("등록되지 않은 장르입니다.");
}

이렇게 switch (조건대상) 형태로 비교할 대상을 넣는다.

그리고 case 해당조건 : 의 형태로 조건식을 적는다고 생각하면 된다.

처음에 볼 땐 if 문에 비해 한눈에 들어오지 않지만, 그래도 어렵지 않으니 겁먹지 말자.

 

break 문 ?
위 switch문 에서 왜 매 코드 이후에 break를 붙일까?
여기서 break는 현재 코드블록을 탈출하는 역할을 한다.
 
...	
	case "액션":
		console.log("액션 장르 영화입니다"); // console.log 를 출력하고
		break; // switch 조건문을 더이상 실행하지 않겠다는 뜻.
...​


그럼 만약 break가 없다면 어떻게 될까?
위 if 문 예시에서 if문만 사용했던 것 처럼 여러번 실행될 수 있다.

 

var 장르 = "액션";

switch (장르) { // 이렇게 사용하면
	case "액션":
		console.log("액션 장르 영화입니다");
	case "코미디":
		console.log("코미디 장르 영화입니다");
	default:
		console.log("등록되지 않은 장르입니다.");
}
// 액션, 코미디, default 다 출력된다.

switch (장르) { // 이렇게 사용하면
	case "코미디":
		console.log("코미디 장르 영화입니다");
	case "액션":
		console.log("액션 장르 영화입니다");
	default:
		console.log("등록되지 않은 장르입니다.");
}
// 이렇게 사용하면 액션, default만 출력된다.​

직접 콘솔창에 붙여넣어보자.
아무튼, 이렇게 동작하는 방식을 폴스루(fall through) 라는 것인데,
case 조건과 일치했다면, 일치 이후 swtich문이 끝날때 까지 모든 case가 true인 것 처럼 실행되는 것이다.

때문에 꼭 break 를 사용하여 조건문이 실행된 시점에서 switch 문을 종료시켜줘야 한다.

 

3. 반복문

말 그대로 조건식이 true일 경우, 해당 블록문을 반복하는 문법이다.

반복문의 종류는 for / while / do while 세 가지와

for문의 변형문법들이 몇가지가 있는데, 여기선 앞의 세 가지만 알아보자.

 

1. for 문

for 문은 크게 4가지 부분으로 이루어져 있다. 예시부터 보자.

for (var i = 0 ; i < 3 ; i++) { // ; 로 구분하니 잘 확인하자!
	console.log(`현재 숫자는 ${i} 입니다.`);
}

죄송한 수준의 글씨체(...)

위와 같이 이루어진게 for 조건문이다. 각 부분별로 설명하자면

  1. 변수 선언/할당문
    조건식을 평가할 변수를 선언, 할당    한다, 보통 i j k 이렇게들 짧게 쓴다.
  2. 조건식
    평가(실행)될 조건식이다. 해당 조건식이 true 이면 블록문을 실행한다.
  3. 증감식
    선언/할당할 변수의 값을 변경시켜, 일정 횟수만큼 반복을 위해 설정한다.
    보통 단일 할당 연산자의 형태로 많이 쓰지만, i += 2이런식으로 쓰기도 한다.
  4. 블록문
    실행될 블록문

도움이 될 진 모르겠지만 위 for 문을 if 문 처럼 한번 야매로 변환해보자면,

var i = 0;

if (i < 3) { // 1
	console.log(`현재 숫자는 ${i} 입니다.`);
	i++
	1로 가서 조건문을 한번 더수행하시오.
} else {
	종료!
}

이런식으로 작동한다고 볼 수 있다.

(함수와 재귀형태를 쓴다면 좀더 완벽하게 반복문의 형태로 변형할 수 있겠지만,

단순히 이해를 돕기 위해 작성한 함수이므로 엉터리로 작성하였다.)

 

아무튼 for 문은 보통 원하는 만큼 블록문을 반복하고 싶을 때 사용한다.

위 조건문 (i <3) 은 세번만 반복하게 설정해 놓은 코드이며, 조건식과 증감문을 설정하여 반복 횟수를 조절 할 수 있다.

그렇다면 명확하게 반복하는 횟수를 알 지 못 할 때에는 어떻게 반복문을 쓸까?

 

2. while 문

while 문은 아주 단순하다.

for (score > 10) { // 조건식
	console.log("통과에용") // 실행할 블록문
}

짧은 그림도 죄송하다

이러한 형태로 이루어져있다.

아까 for 문에 아주 단순해서 마음에 드는데, 이렇게만 쓰면 될까?

정답은 아니다. 빠진 부분은 채워주자

아무튼 죄송하다.

이렇게 변수 선언 / 할당과 증감식 부분은 while 문 내/외부에 추가로 작성해줘야 잘 동작한다.

허접한 그림 대신 이해를 돕기 위해 예시로 알아보자.

var 잔고 = 100;
var 일수 = 0;

while (잔고 >= 7) {
	잔고 -= 7;
	일수++
}
console.log(일수, 잔고);

이 코드는 총 100 원을 하루 7원씩 쓴다면 며칠동안 쓸 수 있을지 계산하는 코드다.

각 블록문이 실행할 때 마다 일수를 증가시키면서 반복 횟수 세고,

잔고가 -(마이너스) 가 되지 않는 상황에서 실행되는 조건식을 작성하였다.

 

var 잔고 = 100;
var 일수 = 0;

while (true) {
	잔고 -= 7;
	일수++
	if (잔고 >=7) break;
}
console.log(일수, 잔고);

짜잔, 아까 배운 break 문 을 활용한 코드이며, 위 코드와 동일하게 동작한다.

이는 조건식을 true로 지정하여 무한반복문을 만든 후,

if 문으로 break 문을 실행시켜 적절히 무한반복문을 탈출시키는 코드이다.

두 방식 다 알고는 있으되, 편한 방법으로 작성하자.

 

3. do ... while 문

do while 문은 while 문과 비슷하지만 조건식 이전에 블록문을 한 번 먼저 실행한다.

while: 조건식검사 → 블록문 실행 → 조건식 검사 → 블록문 실행 …

do while: 블록문 실행 → 조건식 검사 → 블록문 실행 → 조건식검사 …

 

코드 작성방법은 아래와 같다.

var 잔고 = 100;
var 일수 = 0;

do {
	잔고 -= 7;
	일수++
}
while (잔고 >= 7)
console.log(일수, 잔고);

사실 나는do while문은 잘 작성하지 않는다.

 

continue 문

앞선 예제에서 나오진 않았지만 자주 쓰이는 continue 문은
반복문에서 현재블록문을 종료하고 한 턴 쉬게하는, 미니 탈출같은 기능이다.
역시 예제로 알아보는게 가장 빠르다.

// 1부터 50까지,5의 배수에서만 출력하는 코드를 짠다고 가정하자.

// 반복문과 조건문을 이용하여 짤 수도 있지만
for (var i = 1; i <= 50; i++) {
	if (i === 5) console.log(`5의 배수, ${i} 입니다.`)
} 

// continue 문을 이용하여 짤 수도 있다.
for (var i = 1; i <= 50; i++) {
	if (i !== 5) continue; // 5 의 배수가 아니라면 아래 코드를 실행하지 여기서 바로 다음 반복문을 실행한다.
	console.log(`5의 배수, ${i} 입니다.`)
}​

그럼 둘 중 어떤 코드가 좋은 코드인가?
사실 둘 다 동작하는 횟수와 방식은 같기 때문에 보기 좋은 코드로 짜면된다.
간단한 예시로 if 문 안에 코드가 길어지면 continue 문을 사용하는게 좀 더 보기 편하다.
나머진 직접 알아보자!

 

오늘의 후기

사실 이번 챕터에서는 새로 알게 된 내용이 거의 없다.

그만큼 반복문은 자주 쓰이기 때문에 상세히 알고 있어야 하며,

모르면 나 처럼 오류랑 부딪혀가며 직접 배우게 될 것이다. (이젠 그만…)

그러다 보니 이번 글은  반복문을 잘 모르는 사람도 이해할 만한 글의 작성을 목표로

예시를 들어가며 상세히 쓰는데에 집중했던 것 같다.

앞으로는 더 상세하고 쉬운 글을 쓸 수 있으면 좋겠다 😊

'Study > Java Script' 카테고리의 다른 글

[Java Script] 10. 객체 리터럴  (0) 2022.08.02
[Java Script] 09. 타입 변환과 단축평가 (feat. 옵셔널 체이닝 연산자)  (1) 2022.07.31
[Java Script] 07. 연산자  (0) 2022.07.28
[Java Script] 06. 데이터 타입  (0) 2022.07.27
[Java Script] 05. 표현식과 문  (1) 2022.07.25

관련글

티스토리툴바