📚 공부한 내용

'if’문

if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행된다

if (year == 2015) {
  console.log( "정답입니다!" );
}

불린형으로의 변환

if (…) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.

'else’절

if문엔 else 절을 붙일 수 있다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year == 2015) {
  alert( '정답입니다!' );
} else {
  alert( '오답입니다!' ); // 2015 이외의 값을 입력한 경우
}

'else if’로 복수 조건 처리하기

유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있다. 이때 else if를 사용할 수 있다.

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

조건부 연산자 ‘?’

조건에 따라 다른 값을 변수에 할당해줘야 할 때 '물음표(question mark) 연산자’라고도 불리는 '조건부(conditional) 연산자’를 사용하면 더 짧고 간결하게 변형할 수 있다.

조건부 연산자는 물음표?로 표시한ㄷ. 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부른다.

• let result = condition ? value1 : value2;
  평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환
  

다중 ‘?’

물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있다.

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

조건문은 "문" 값을 반환하지 않지만
삼항 연산자, 조건"식"은 값을 반환함 (true / false)

논리 연산자

자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다.

|| (OR) 논리합

result = a || b;
인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환
a만 트루 면 a 반환
b만 트루면 b 반환
a b 둘다 트루면 a반환
둘다 false면 b 반환

첫 번째 truthy를 찾는 OR 연산자 ‘||’

result = value1 || value2 || value3;

• 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
• 각 피연산자를 불린형으로 변환한다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
• 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환한다.

단락 평가

OR 연산자 ||가 제공하는 또 다른 기능은 '단락 평가(short circuit evaluation)'다.

OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 '단락 평가’라고 한다.

true || console.log("not printed");
false || console.log("printed");

첫 번째 줄의 || 연산자는 true를 만나자마자 평가를 멈추기 때문에 alert가 실행되지 않는다.

단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다.

&& (AND) 논리곱

result = a && b;
두 피연산자가 모두가 참일 때 true를 반환다. 그 외의 경우는 false를 반환.

첫 번째 falsy를 찾는 AND 연산자 ‘&&’

result = value1 && value2 && value3;

• 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가.
• 각 피연산자는 불린형으로 변환. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환.
• 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환.

AND 연산자는 첫 번째 falsy를 반환. 피연산자에 falsy가 없다면 마지막 값을 반환.

! (NOT)

result = !value;

• NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행.
  • 피연산자를 불린형(true / false)으로 변환.
  • 1에서 변환된 값의 역을 반환.

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다.

alert( !!"non-empty string" ); // true
alert( !!null ); // false

alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false

switch 문

복수의 if 조건문은 switch문으로 바꿀 수 있다.

switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다.

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    break

  case 'value2':  // if (x === 'value2')
    ...
    break

  default:
    ...
    break 	  // else에 해당, 옵션임. break가 없어도 됨
}

• 변수 x의 값과 첫 번째 case문의 값 'value1'를 일치 비교한 후, 두 번째 case문의 값 'value2'와 비교한다.
• case문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case 문의 아래의 코드가 실행. 이때, break문을 만나거나 switch 문이 끝나면 코드의 실행은 멈춘다.
• 값과 일치하는 case문이 없다면, default문 아래의 코드가 실행(default 문이 있는 경우).

여러 개의 "case"문 묶기

• case 3과 case 5는 동일한 메시지를 보여준다.
  • if(a === 3 || a === 5)

...
  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;
...

자료형의 중요성

switch문은 일치 비교로 조건을 확인

let arg = prompt("값을 입력해주세요.");

switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}

nullish 병합 연산자 '??'

nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있다.

a ?? b의 평가 결과는 다음과 같다.

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b
• nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다.
  x = (a !== null && a !== undefined) ? a : b;

'??'와 '||'의 차이

nullish 병합 연산자는 OR 연산자 ||와 상당히 유사해 보인다.
실제로 위 예시에서 ??를 ||로 바꿔도 그 결과는 동일하다.

두 연산자 사이에는 중요한 차이점

• ||는 첫 번째 truthy 값을 반환한다.
• ??는 첫 번째 정의된(defined) 값을 반환한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

연산자 우선순위

??의 연산자 우선순위는 5로 꽤 낮다

따라서 ??는 =와 ? 보다는 먼저, 대부분의 연산자보다는 나중에 평가된다

그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋다

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

제약사항

??엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있다.

안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다.

아래 예시를 실행하면 문법 에러가 발생.
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'

Logical Assignment Operators

let x;
let y;

x ||= y; // x가 false면 y값을 x에 할당 하겠다. x = x || y;

x &&=  y; // x가 ture이면 y값을 x에 할당하겠다. x = x && y;

x ??= y;  // x가 undefined,null이면 y값을 x에 할당하겠다. x = x ?? y;

반복문

while

condition(조건)이 truthy 이면 반복문 본문의 코드가 실행된다.

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

• i(iteration,이터레이션 - 반복)

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

‘do…while’ 반복문

do..while 문법을 사용하면 condition을 반복문 본문 아래로 옮길 수 있다.

do {
  // 반복문 본문
} while (condition);

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

do..while 문법은 조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한 번이라도 실행하고 싶을 때만 사용해야 한다.
대다수의 상황에선 do..while보다 while(…) {…}이 적합하다.

for

• 기본형

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

• 예시

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력된다.
  alert(i);
}

구성요소
begin	i = 0	반복문에 진입할 때 단 한 번 실행.
condition	i < 3	반복마다 해당 조건이 확인. false이면 반복문을 멈춘다.
body	alert(i)	condition이 truthy일 동안 계속해서 실행된다.
body	i++	각 반복의 body가 실행된 이후에 실행된다.