[JavaScript] : 제어문

제어문을 배우기 전 까지 혹은 변수 선언 및 할당에서 배웠던 것을 돌이켜 보면 코드를 실행 했을 때 위에서 아래로 순차적으로 실행 되는 것을 알 수 있을 것이다. 이러한 코드의 흐름을 제어 할 수 있는 코드를 우리는 제어문 이라고 부른다. 이번 기회에 제어문을 확실히 이해 한 후 넘어 가보자.

⇒ 필자가 코딩을 처음 배웠을 당시 가장 재밌게 익힌 자바스크립트 문법 중 하나 이다. 처음 배웠을 때 이상하게 매력적이었고 재밌었다.

✍️ 조건문 [Conditional Statement]

조건문은 말 그대로 조건을 붙여 그 조건의 결과 (boolean 타입) 에 따라 특정 코드가 실행 될 수 있도록 제어하는 문이다.

📝 if…else 문

한국 말로 해석해보면 만약 ~라면 ..이고 그 외라면..이다 이다. 필자가 가장 많이 써 본 코드 중에 하나 이며, 형태는 다음과 같다.

if (조건) {
 // 상기 조건이 참이면 이 중괄호 안에 있는 코드가 실행된다.
} else {
 // 상기 조건이 거짓이면 이 중괄호 안에 있는 코드가 실행된다. 
} 

// 만약 조건이 2개 이상이면 다음과 같은 형태로 바꿔 쓰면 된다. 

if (조건1) {
 // 1번째 코드가 참일 시 실행되는 코드
} else if (조건2) {
 // 2번째 코드가 참일 시 실행되는 코드
} else {
 // 그 외 결과 일시 실행되는 코드
}

// 한 가지 더 추가하자면 else 문의 경우 생략이 가능하다. 즉,

if (조건) { //실행 코드 } //이렇게 조건문을 끝 낼 수 있다.

if 내에 있는 조건의 결과 값은 True 과 False로 결과가 표현이 되기 때문에 강제적으로 타입을 boolean 값으로 변환해서 조건문을 실행한다.

if / else 문의 경우에는 이 전 시간에 다뤘던 삼항 연산자로 표현을 바꿔 실행 할 수 있는데 간단한 결과를 가지는 조건문의 경우 삼항 연산자를 사용하여 표기 할 시 가독성이 좋아 질 수 있다.

📝 Switch 문

아직 한 번도 프로젝트 내에서 녹여 본 적이 없는 제어문이다.

if / else 와 같이 조건문을 불리언 값에 따라 조건문 내에 쓰여 있는 코드를 실행하는 것이 아닌 조건문f이 정해져 있는 특정 결과 뱉을 때 마다 실행 될 수 있도록 제어를 하는 것이다.

const studentNumber = 3;
let studentName;
switch (studentNumber) {
case 1 : studentName = "OH";
	break;
case 2 : studentName = "KIM";
	break;
case 3 : studentName = "Park";
  break;
case 4 : studentName = "Lee";
	break;
case 5 : studentName = "Choi";
  break;
default : studentName = "Please Call Anyone"
}

break 문을 넣어두는 이유는 이 것이 없다면 case를 전부 다 돌고 나서 default에 설정된 값이 할당되어 결과가 도출되기 때문에 우리가 의도하고자 하는 결과 값을 얻지 못 한다. 각 케이스 별로 코드가 진행이 된 후 조건문(코드 블록)에서 탈출 할 수 있도록 설정한다.

사실 Swtich 문의 if / else 문 보다 더욱 복잡하고 사용해야 되는 예약어들이 많아 가독성이 떨어지는 경우가 많아 if / else 문을 더 많이 활용하는 편인데, 조건이 다양할 경우 Swtich 문이 더 가독성이 좋아 보인다.

✍️ 반복문 [Iteration]

반복문의 경우, 필자가 생각하기에는 자바스크립트 용법 중에서 가장 중요한 문법 중 하나라는 생각이 든다. 간단하게 설명하자면, 반복문 내에서 특정 조건을 설정 해 놓고 설정된 조건이 만족 되는 한 반복문 내에 있는 코드가 계속 실행이 된다.

📝 for 문

for (변수 선언 및 할당 문 ; 조건식 ; 증감식 ) {
	조건식이 참일 경우 반복적으로 실행될 코드
}

// 예제 코드

sum = 0;
for (let i = 0 ; i < 10 ; i++){
  sum += i
}
console.log(sum) // 45

for 문을 간단하게 설명하자면, 처음 i 에 0 이 할당되고, 다음 조건 식에서 해당 i가 조건에 부합하는지 결과를 확인하고 중괄호 내에 있는 코드가 실행이 된 다음에 i++에 맞춰 i가 증가하고 조건식에 맞는지 검증 단계를 거친 후 다시 중괄호 내에 있는 코드가 실행된다. 이런 식으로 조건 식에 부합하지 않을 때까지 실행이 된다. 조금 복잡할 수도 있지만 반복적으로 특정 코드를 실행할 때 가장 많이 쓰이는 문법이다. (복잡한 만큼, 코드의 가독성을 떨어뜨리는 주 원인 중 하나라고 한다).

⇒ 그리고 for 문 내에서는 for 문을 추가적으로 써 이중 for문을 할 수 있거나 조건문을 추가 할 수 있다.

📝 while 문 과 do…while 문

while문과 do…while문은 for문과 똑같은 반복문 이지만 차이점이 있다면 기획 단계 시 반복 횟수가 명확하지 않을 때 주로 사용된다.

// while 문

while (조건) {
	실행되는 코드
}

// do...while
do {
	실행되는 코드
} while (조건)

while문과 do…while 문의 차이라면 do…while의 경우 위에서 아래로 실행되는 자바스크립트 성격 상 코드 블록이 먼저 실행이 되고 난 뒤에 조건문을 따지는 방식이기에 코드 블록이 무조건 한 번 이상 실행 된다.