자바스크립트 switch문, 삼항 연산자 사용법, Transpile과 Polyfill

keepitupcoding

switch문

const day = 'monday';

switch(day) {
  case 'monday': // day === 'monday'
    console.log('Plan course structure');
    console.log('Go to coding meetup');
    break;
  case 'tuseday':
    console.log('Prepare theory videos');
    break;
  case 'wednesday':
  case 'thursday':
    console.log('Write code examples');
    break;
  case 'friday':
    console.log('Record videos');
    break;
  case 'saturday':
  case 'sunday':
    console.log('Enjoy the weekend :D');
    break;
  default:
    console.log('Not a valid day');
}
  • 단순 값을 확인하는 조건문의 경우 switch를 사용하면 코드가 더 단순해진다.
  • break;를 사용하지 않을 경우 다음 조건문의 코드블록까지 실행하게 되므로 잊지 말고 작성해준다.
  • default 블록에는 그 외의 값일 경우 실행할 코드 작성

Expression와 Statement의 차이

  • Expression: 변수 선언 등의 action이 없을 경우(just produce value)
    • e.g. 3+4 / 1991 / true && false && !false
  • Statement: 실제 변수가 만들어지지 않는다고 해도 변수 선언 등의 action이 있는 경우
  • template literal에는 expression만 들어갈 수 있는 등의 규칙이 있으므로 차이를 알아둬야 한다

삼항 연산자(Conditional (Ternary) Operator)

const age = 23;
age >= 18 ? console.log('I like to drink wine 🍷') : console.log('I like to drink water 💧');
  • Syntax
    • 조건 ? true일 때 실행할 코드 : false일 때 실행할 코드
let drink;
if (age >= 18) {
  drink = 'wine🍷';
} else {
  drink = 'water💧';
}

const drink2 = age >= 18 ? 'wine🍷' : 'water💧';
  • 간단한 조건에 따라 variable을 설정할 때 유용하게 사용한다.
console.log(`I like to drink ${age >= 18 ? 'wine🍷' : 'water💧'}`);
  • 삼항연산자는 expression이므로 템플릿 리터럴에도 사용할 수 있다.

JavaScript Releases: ES5, ES6+, ESNext

  • 모던 자바스크립트 엔진은 과거의 자바스크립트 코드를 문제없이 호환해서 읽을 수 있도록 만들어졌다.(backwards compatible)
  • 하지만, 현재의 엔진이 미래의 JS release와 호환되는지는 알 수 없다.(not forwards compatible)
  • 따라서 모던 자바스크립트를 사용할 때는…
    • 개발 단계: latest Google Chrome 사용
    • 배포 단계: transpile, polyfill 작업을 거침

Transpile과 Polyfill이란?

  • Transpile: 구형 브라우저에서 정상적으로 작동하도록 ES6로 쓰여진 코드를 ES5로 변환하는 등의 작업
  • Polyfill: ES6에서 새로 나온 문법과 개념들을 사용했을 경우 ES5로 단순히 변환할 수 없으므로 이것들을 구현하기 위한 코드 조각들

Related Posts