[HUFS/GnuVil] #3 제어문, 타입변환과 단축평가

제어문

// 블록문
{
  var foo = 10;
}

// 제어문
var x = 1;
if (x < 10) {
  x++;
}

// 함수 선언문
function sum(a, b) {
  return a + b;
}

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다

* 블록문은 언제나 문의 종료를 의미하기에 세미콜론을 붙이지 않는다

 

var num = 2;

// 0은 false로 취급된다.
var kind = num ? (num > 0 ? '양수' : '음수') : '영';

console.log(kind); // 양수

삼항 연산자를 중첩해서 사용할 수 있다

 

// 무한루프
for (;;) { ... }
while (true) { ... }

for 문에 어떠한 식도 선언하지 않으면 무한루프가 된다

 

// outer라는 식별자가 붙은 레이블 for 문
outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    // i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출한다.
    if (i + j === 3) break outer;
    console.log(`inner [${i}, ${j}]`);
  }
}

console.log('Done!');

for 문에 레이블을 붙이면 중첩된 for문을 빠져나갈 수 있지만 객체와 헷갈려서 권장하지 않는다

* 차라리 함수에 중첩 for문을 넣고 원하는 조건에 return 시키자

 

// continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다.
for (var i = 0; i < string.length; i++) {
  // 'l'이면 카운트를 증가시킨다.
  if (string[i] === search) {
    count++;
    // code
    // code
    // code
  }
}

// continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다.
for (var i = 0; i < string.length; i++) {
  // 'l'이 아니면 카운트를 증가시키지 않는다.
  if (string[i] !== search) continue;

  count++;
  // code
  // code
  // code
}

continue 문은 특정 조건에서 반복문의 코드를 실행하지 않고 넘어간다

* break 문처럼 반복문을 탈출하지는 않는다

 

타입변환과 단축평가

var x = 10;

// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다.
var str = x.toString();
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(= 타입 캐스팅)이라 한다

 

var x = 10;

// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

의도와 상관없이 자바스크립트 엔진에 의해 변환되는 것을 암묵적(= 강제) 타입 변환이라 한다

 

// 아래의 조건문은 모두 코드 블록을 실행한다.
if (!false)     console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null)      console.log(null + ' is falsy value');
if (!0)         console.log(0 + ' is falsy value');
if (!NaN)       console.log(NaN + ' is falsy value');
if (!'')        console.log('' + ' is falsy value');

false로 평가되는 falsy 값 외의 모든 값은 true로 평가된다

 

명시적 타입 변환은 표준 빌트인 생성자 함수 (String, Number, Boolean)를 new 연산자 없이 호출하는 방법과 빌트인 메서드 (toString, parseInt, parseFloat ..)를 사용하는 방법이 있다

 

// 논리합(||) 연산자
'Cat' || 'Dog'  // -> "Cat"
false || 'Dog'  // -> "Dog"
'Cat' || false  // -> "Cat"

// 논리곱(&&) 연산자
'Cat' && 'Dog'  // -> "Dog"
false && 'Dog'  // -> false
'Cat' && false  // -> false

논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자를 반환하는데, 이 때 타입을 변환하지 않고 그대로 반환하며 이를 단축 평가라고 한다

 

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
  return str.length;
}

getStringLength();     // -> 0
getStringLength('hi'); // -> 2

ES6부터 매개변수의 기본값을 설정해줄 수 있다!

 

var elem = null;

// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined

var str = '';

// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length); // 0

ES11부터 변수가 유효한지 확인하고 프로퍼티를 참조할 때 옵셔널 체이닝 연산자를 사용한다

 

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'default string';
console.log(foo); // "default string"

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined이 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'default string';
console.log(foo); // ""

마찬가지로 ES11부터 변수에 기본값을 설정할 때 null 병합 연산자를 사용해줄 수 있다

 

본 내용은 위키북스의 '모던 자바스크립트 Deep Dive'를 바탕으로 작성되었습니다.