자바스크립트: If, While, For, Switch

 

모던자바스크립트 2.10 ~ 2.14 (https://ko.javascript.info/first-steps)

 

If문 (If statement)

- 조건에 따라 다른 행동을 취할 때 사용하며, 괄호 안의 결과가 true일 경우만 동작을 실행한다. 

- if 문 후 ( ) 안에 조건을, { } 안에 실행할 동작을 쓴다. (동작이 하나일 경우 {}를 쓰지 않아도 되지만 가독성이 하락한다.)

- If 문의 ( ) 는 값을 불린형으로 반환한다.

- False일 경우 행동을 별도로 지정해주고 싶다면 else, 조건문을 nest하고 싶으면 else if를 사용한다.

if (year == 2015) {
  alert( "정답! 와아~~" );
 }

 

조건부 연산자 ? (Conditional operator)

- 조건부 연산자인 '?'는 if 절을 함축하여 표현할 수 있다. 

- 피연산자가 세 개인 유일한 자바스크립트 연산자로, 삼항 연산자 (ternary operator)로 부르기도 한다.

- 평가대상이 truthy하다면 value1, 아니라면 value2를 반환한다. 보통 가독성을 위하여 조건을 괄호로 감싼다.

let result = condition ? value1 : value2;
let accessAllowed = (age > 18) ? true : false;

길고 수직적인 코드가 가독성이 좋으므로, 여러 조건을 수직적으로 나열할 경우에만 사용하는 것이 좋다.

 

|| OR

- 피연산자가 여러 개인 경우, 가장 왼쪽 피연산자부터 시작해 각 피연산자를 불린형으로 변환하여 평가한다.

- 변환 후 true 값인 피연산자를 찾을 경우 연산을 멈추고 해당 피연산자의 변환 전 값을 반환한다.

- 모든 피연산자가 false인 경우 마지막 피연산자의 변환 전 값을 반환한다.

- 이처럼 truthy를 만났을 경우 나머지 피연산자는 판단하지 않은 채 평가를 멈추는 프로세스를 '단락 평가 (short circuit evaluation)'이라고 한다.  

true || alert("not printed"); // 출력되지 않는다
false || alert("printed"); // 출력된다

 

&& AND

- AND 연산자도 OR 윤산자와 유사하게 단락 평가 방식으로 평가하지만, OR 연산자와 달리 falsy를 만났을 경우 해당 피연산자의 변환 전 값을 반환한다.

- && 는 || 보다 우선순위가 높다.

 

! NOT

- NOT 연산자는 인수를 하나만 받으며, 피연산자를 불린형으로 변환하여 변환한 값의 역을 반환한다.

- !!를 사용하면 불린형 변환만 수행할 수 있다.

- NOT 연산자는 논리 연산자 중 가장 우선순위가 높다.

 

?? 연산자

- ?? null 병합 연산자 (nullish coalescing operator)는 값이 확정되어 있는 변수를 찾을 수 있다.

- a ?? b에서 a가 null이나 undefined가 아닐 경우 a를 반환, 그 외에는 b를 반환한다.

- 따라서 값이 정해진 변수를 추려내고 싶을 때 ?? 를 사용하면 편리하다. 또한, 기본값을 할당하고 싶을 때 사용할 수 있다.

- ??는 우선순위가 높지 않기 때문에 괄호를 사용하여 연산하는 것이 좋다.

- 안정성 이슈 때문에 ?? 는 괄호를 사용하지 않는 이상 && 또는 || 와 함께 사용하지 못한다.

 

While 반복문 (While Loop)

- 특정 조건을 충족할 경우 동작을 반복하는 코드를 반복문이라고 한다.

- 반복문 본문 (반복문 내 동작)이 한 번 실행되는 것을 반복(iteration)이라고 부르며, 한 번의 반복이 올 수도 있고 무한대가 될 수도 있다. 브라우저는 이 경우 무한 반복을 멈추는 매커니즘이 내장되어 있다.

let i = 0;
while (i < 3) {
  alert( i );
  i++;
}

여기서 세 번의 이터레이션이 만들어진다.

 

 

Do...while Loop

- 조건(condition)을 반복문 본문(loop body) 밑으로 내릴 수 있는 문법이 do...while이다.

- 조건을 확인하기 전에 본문이 먼저 한 번 실행되며, 조건이 truthy인 동안 계속 실행된다.

- 따라서 본문을 최소한 한번이라도 실행하고 싶을 때 적합하다.

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

 

For Loop

- for 반복문은 begin, condition, body, step의 세 요소로 이루어진 반복문이다.

- for (begin; condition; step) {body} 형태로 구성된다.

- begin 한 차례 실행 --> condition 확인 --> body 실행 --> step 실행의 순으로 반복된다.

 

인라인 변수 선언

- i를 반복문 안에서 선언한 경우 (ex. for의 begin 안에서) 인라인 변수 선언 (inline variable declaration)이라고 부른다.

- 인라인 변수 선언 후에는 반복문 밖에서는 해당 변수에 접근할 수 없다. 따라서 반복문 본문에서 반환해야만 한다.

- begin과 step에 동작이 없을 경우 생략해도 된다. 이럴 경우 while가 동일해지며, 조건도 없을 경우 무한 반복문이 만들어진다.

 

반복문 빠져나오기

- Break는 특별한 지시자(directive)로, 언제든지 원하는 때 반복문을 종료한다. 이 경우 반복문 밖 첫 번째 줄이 실행된다.

- Continue는 전체 반복문을 멈추지 않지만, 현재 이터레이션을 멈추고 다음 이터레이션을 강제로 실행시킨다. 특정 조건일 때만 반복문을 실행시키고 싶을 때 적합하다.

- ? 연산자를 사용하면 break나 continue와 같은 지시자를 사용할 수 없으므로, if문으로 작성해야 한다.

- 중첩 반복문을 빠져나오려면, 전체 반복문을 레이블Label로 식별할 수 있다. 레이블은 반복문 앞에 콜론(:)과 함께 쓰이는 식별자(identifier)이다. 이 때 Nested된 반복문에서 break를 사용해도 레이블을 활용하여 전체 반복문에서 나올 수 있다.

outer: for  (let i = 0; i < 3; i++) {

	for (let j = 0; j < 3; j++) {
    	
        let input = prompt(`${i},${j}의 값`, '');
        
        if (!input) break outer;
        
       }
   }
}
alert('완료!');

 

Switch문

- Switch문은 다양한 상황에서 특정 변수를 비교할 수 있게 해준다.

- Switch문은 하나 이상의 case문과 (선택) default문으로 구성되는데, switch(x)는 변수 x의 값과 첫 번째 case문의 값을 일치 비교한 후, 두 번째 case 문의 값과 비교한다.

- 변수 x와 일치하는 값을 찾으면 해당 case문의 코드가 실행되며, break문을 만나거나 switch문이 끝나면 실행이 멈춘다.

- 값이 일치하는 case 문이 없다면 default문이 실행된다.

- case 문 안에 break 문이 없으면 조건을 따지지 않고 이어지는 case 문을 실행한다.

let a = "1";
let b = 0;

switch (+a) {
	case b + 1:
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행된다.");
    break;
    
    default:
    alert("이 코드는 실행되지 않는다.");
}