[TIL] 내배캠 7일차

7일차에는 자바스크립트 핸드북 파트2에 배운 내용을 정리해봤다.

if문

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

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

if (year == 2015) {
	alert( '정답입니다!' );
}

불린형으로 변환

• 숫자 0, 빈 문자열(""), null, undefined, NaN은 불린형으로 변환 시 모두 false다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부른다.
• 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부른다.

// 항상 실행되지 않음
if (0) { // 0은 falsy입니다.
  ...
}

// 항상 실행됨
if (1) { // 1은 truthy입니다.
  ...
}

조건이 여러개일경우 else if절을 붙이고, 그 경우에 모두 해당되지 않을 경우 else절을 붙일 수 있는데 선택사항이기 때문에 생략도 가능하다.

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

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

조건부에 따라 if문을 쓸 수도 있는데 이걸 삼항연산자라고도 부른다.

// 문법은 아래와 같고 condition이 참이면 value1을 반환하고 그렇지 않으면 value2를 반환한다.
let result = condition ? value1 : value2;

// 예시
let accessAllowed = age > 18 ? true : false;

다중 ?
물음표 ?를 여러개 연결해서 사용하면 복수의 조건도 처리가 가능하다.

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

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

alert( message );

부적절한 ? 예시는 다음과 같다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

평가 결과를 변수에 할당하지 않고, 결과에 따라 실행되는 표현식이 달라지도록 하는것은 코드를 짧게 쓸 수 있어 편하지만 가독성이 떨어지므로 이런식으로 쓰는건 권장하지 않는다.

Switch문

switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. 코드 자체가 비교 상황을 잘 설명한다는 장점이 있다.

switch문은 하나 이상의 case문으로 구성되어 있다. 대개 default문도 있지만, 필수는 아니다.

// 문법
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]
  case 'value2':  // if (x === 'value2')
    ...
    [break]
  default:
    ...
    [break]
}

// 예시
let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
    break;
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}

case에 표현식을 넣을수도 있으며, break문이 없으면 자동으로 다음 case로 넘어가기 때문에 꼭 넣어줘야 한다.

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

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

  default:
    alert('계산 결과가 이상하네요.');
}

위에 예시처럼 case문을 묶어서 같은 실행결과를 동작시킬 수도 있다.

case문의 주의할점

자료형이 일치하지 않으면 동작하지 않으니 자료형을 신경써줘야 한다.

let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

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

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

7일차 공부를 마치며...

제일 중요한 파트를 간단하게 배웠는데 예제를 많이 연습해봐야겠다.