ZeroCho Blog

안녕하세요. 이번 시간에는 자바스크립트의 syntactic sugar에 대해 알아보겠습니다. 제목은 자바스크립트 가지고 놀기라고 지었는데요. 이번 시간의 여러 코드들을 알아두면 코딩하는 데 많은 도움이 될 겁니다. (도움이 되었으면 좋겠습니다...) 직관적이지는 않지만 코드의 양을 줄여줍니다. 이런 것들을 syntactic sugar라고 부르는 데요. 문법적인 설탕이란 뜻으로, 프로그래밍을 할 때 문법적으로 알아두면 편한 것들을 말합니다.

실제로 ES2015에서는 여러가지 syntactic sugar가 추가되었다고 평가받는데요. 그 예로 class가 있습니다. 자바스크립트의 생성자, 상속과 유사하지만 다른 언어 사용자의 진입장벽을 낮추기 위해 도입되었습니다. 또한 객체 분해(Desturcture)나 spread도 syntactic sugar라고 여겨지고 있죠.

보호 연산과 기본값 연산

먼저 알아볼 것은 논리 연산자입니다. 엄청 오래전에 배웠죠? &&과 ||가 있습니다. 이 둘은 true나 false를 구분할 때 쓰이지만, 다른 용도로도 많이 쓰입니다.

var a;
if (b) {
  a = b;  
} else if (c) {
  a = c;
} else {
  a = d;
}

이 긴 구문을 다음과 같이 줄일 수 있습니다. 바로 false 성질을 띄는 것(undefined, null, 0, '', false, NaN, document.all)들과 ||의 성질을 이용한 건데요. b가 아니면 c, c도 아니면 d까지 확인합니다. 결국 b, c가 모두 아니면 a는 d가 되는거죠.

var a = b || c || d;

다음은 && 예제입니다. ||과는 반대로 b도 있고 c도 있으면 a = d가 됩니다. b는 있는데 c가 없으면 a = c가 되고요. b가 없으면 a = b가 됩니다.

var a = b;
if (b) {
  a = c;
  if (c) {
    a = d;
  }
}

var a = b && c && d;

||는 값이 false 성질을 띄지 않을 때까지 다음 것을 찾고, &&는 값이 true 성질을 띄지 않을 때까지 다음 것을 찾습니다. ||는 주로 기본값(default)을 정할 때 많이 쓰입니다. 예를 들면 다음과 같이 사용자가 함수의 인자로 아무 것도 안 넣어주었을 때 기본으로 []가 설정됩니다.

function setting(option) {
  var result = option || [];
  return console.log(result);
}
setting([1, 2, 3]); // [1, 2, 3]
setting(); // []

다음과 같이 해도 default를 표현할 수 있습니다.

var result = option ? option : [];

&&는 필수 조건을 의미할 때 주로 쓰입니다.

function condition(cond) {
  var result = cond && 'hello';
  return console.log(result);
}
condition(true); // 'hello';
condition(); // undefined

또는 객체 안의 속성에 안전하게 접근하기 위해 사용됩니다. 보호 연산이 이런 의미입니다. cannot read property of undefined 에러를 피하기 위해 사용되죠.

var a = object && object.inner && object.deeper

시간 변환

다음과 같이 하면 현재 시간을 밀리초단위 숫자로 변환할 수 있습니다. 빠른 시간 계산 때 유용합니다. 뭔가 표준같지 않다고 느껴지면 new Date().valueOf() 또는 new Date().getTime()하면 됩니다.

+new Date(); // 1970년 이후로 지나간 밀리초

불린 변환

빠르게 해당 값이 true인지 false인지를 체크할 수도 있습니다. 느낌표 두개를 사용하는 겁니다.

var a = [];
var b = NaN;
!!a; // true
!!b; // false

다차원 배열 생성

자바스크립트에서 재귀를 통해 다차원 배열을 쉽게 만드는 방법입니다. 2x3x4 배열을 만듭니다.

var array = [];
for (var i = 0; i < 2; i++) {
  array[i] = [];
  for (var j = 0; j < 3; j++) {
    array[i][j] = [];
    for (var k = 0; k < 4; k++) {
      array[i][j][k] = [];
    }
  }
}

기존에는 위처럼 했다면, 이제는 아래처럼 하면 됩니다.

function createArray(length) {
  var arr = new Array(length || 0),
    i = length;
  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while(i--) arr[length-1 - i] = createArray.apply(this, args);
  }
  return arr;
}
var arr = createArray(2,3,4);

앞으로도 괜찮다 싶은 유용한 문법이 있으면 계속 추가하도록 하겠습니다!