[JS스터디] 제어문, 타입변환과 단축평가

책: 모던 자바스크립트 Deep Dive

제어문

• 블록문
• 조건문
  • if … else 문
    • 조건식은 불리언 값으로 평가될 표현식 (불리언 값이 아닌 값으로 평가되면 암묵적 타입변환)
    • 삼항 조건 연산자 표현식과 달리 값처럼 사용 X → 변수에 할당 X
  • switch 문
    • switch문의 표현식: 보통 문자열이나 숫자 값
    • break 유무 주의
      • break가 없으면, 평가 결과가 일치하는 case문 실행 후 폴스루 fall through → 이후 모든 case문과 default문 전부 실행하게 됨
      • break 없어서 유용한 케이스도 있음!
    • case문끼리 실행할 문이 일치하면 한 줄에 여러 case 묶어서 사용 가능
    • 폴스루 때문에 if … else문을 사용하는 게 더 좋음
      • 조건이 너무 많은 경우에만 switch문 사용
• if … else 문은 논리적 참/거짓에 따라, switch문은 다양한 상황에 따라
• 반복문
  • for문
    • 변수 선언문, 조건식, 증감식
    • 조건식의 평가 결과가 거짓일 때까지 반복
  • while문
    • 조건식의 평가 결과가 거짓일 때까지 반복
      • 조건식의 평가 결과가 불리언 값이 아니면 강제 변환
  • do … while 문
    • 코드 블록 먼저 실행 후 조건식 평가 → 무조건 한 번 이상 실행
• break문
  • 레이블문, 반복문, switch문의 코드 블록을 탈출
  • 레이블문: 중첩된 for문의 외부 for문을 탈출해야 하는 경우 사용
• continue문
  • 반복문의 코드 실행을 잠시 중단하고 반복문의 증감식으로 이동

타입 변환

• 원시 값은 변경 불가능한 값 → 타입변환은 기존 값의 타입을 변경하는 것이 아니라 새로운 타입의 원시 값을 생성하는 것 !
• 명시적 타입 변환 (타입 캐스팅)
  • 개발자가 의도하여 명시적으로 타입을 변경하는 것
  • 문자열로 변환
    • String() : String 생성자 함수를 new 없이
    • .toString() : Object.prototype.toString() 메소드 사용
    • + 문자열 연결 연산자
  • 숫자로 변환
    • Number() : Number 생성자 함수를 new 없이
    • parseInt() , parseFloat() : 문자열만 사용 가능
    • + 단항 연산자
    • + 산술 연산자
  • 불리언으로 변환
    • Boolean() : Boolean 생성자 함수를 new 없이
    • ! 부정 논리 연산자 : 두 번 사용 (부정을 부정)
• 암묵적 타입 변환 (타입 강제 변환)
  • • 문자열 연결 연산 시 문자열이 아닌 피연산자를 문자열로 암묵적 타입 변환
  • 산술 연산 시 숫자 값이 아닌 값을 숫자 값으로 암묵적 타입 변환
    • 을 할 수 없는 경우에는 평가 결과 NaN
  • 비교 연산 시 숫자 값으로 암묵적 타입 변환
  • • 단항 연산 시 숫자 값으로 암묵적 타입 변환
      • <cf> NaN 반환하는 경우: 객체, 비어있지 않은 배열, undefined
  • Falsy, Truthy 값을 false, true로 암묵적 타입 변환
    • false, undefined, null, 0, -0, NaN, ‘’ : Falsy
    • 나머지: Truthy 다

단축 평가

• 단축 평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략
• 논리 연산자를 사용한 단축평가
  • 논리연산은 좌에서 우로 진행
  • 논리합 || , 논리곱 && 연산자 표현식의 평가 결과는 불리언 값이 아닐 수!
    • 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과 결정
    • 첫 번째 피연산자가 true인 경우 첫 번째가 논리합 연산자 표현식의 평가 결과 결정
    • 연산자 표현식의 두 피연산자 중 하나로 평가됨 → 결과를 결정하는 피연산자 타입 변환 X, 그대로 반환 : 단축평가

  var done = true;
  var message = '';
  
  if (done) message = '완료';
  //이는 아래와 같다.
  
  message = done && '완료'; // returns '완료'
  

  • 단축평가의 유용한 패턴
• (ES11) 옵셔널 체이닝 연산자 ?.
  • 객체를 가리키기를 기대하는 변수(좌항)가 null / undefined가 아닌지 확인 후에 프로퍼티(우항) 참조
  • 이전에는 논리곱 &&을 사용한 단축평가로 확인했음
    • 단 이 경우는 좌항이 0, ‘’ 같은 Falsy 값일 때에도 좌항 피연산자를 그대로 반환하는 문제가 있었음
    • → ?. 는 좌항이 Falsy 값이더라도 null / undefined 만 아니면 우항의 프로퍼티 참조를 이어감!
• (ES11) null 병합 연산자 ??
  • 좌항이 null / undefined 인 경우 우항 반환, 아니면 좌항 반환
  • 변수에 기본값을 설정할 때 유용
  • 이전에는 논리합 ||을 이용한 단축평가로 변수에 기본값 설정했음
    • 단 이 경우 역시 좌항이 0, ‘’ 같은 Falsy 값일 때도 예기치 않게 우항을 반환해버리는 문제가 있었음
    • → ?? 는 좌항이 Falsy 값이더라도 null / undefined 만 아니면 좌항의 피연산자 그대로 반환!