이번에는 어떻게 JavaScript에서 유용한 Short-hand 구문들로 컴퓨팅 시간을 절감하는 방법에 대해서 설명합니다. 이러한 Short-hand 기술들은 일부 다른 언어에서도 작동하는 바가 있기도 하니 꼭 참고바랍니다.

  • 화살표 함수는 Short-hand된 문법 중 하나이지만 this의 의미가 달라져 다루지는 않았습니다.

Ternary operator

한글로는 ‘삼향연산자’라고도 알려진 이 기술은 If 구문을 한 줄에 서술할 수 있게 해줍니다. If 문을 쓰기 위해서 한 블럭을 추가하기가 아까울 경우 사용합니다. 그러나 구문 자체는 If 문의 짧은 버전입니다. 그래서 성능 관리에 주의하면서 사용해야 합니다.

let number = 1

if (number > 0) {
  console.log('Variable number is positive number.')
} else {
  console.log('Variable number is negative number.')
}

위 코드는 간단히 변수 number가 양수인지 음수인지 판단하는 코드입니다. 하지만 아래와 같이 Ternary operator를 사용하여 쓰여질 수도 있습니다.

let number = 1

(number > 0) ? console.log('... positive') : console.log('... negative')

Short-circuit evaluation

이 기술은 연산자를 통해서 If 문을 사용하지 않고 변수의 대체제(alternative)를 정의할 수 있게 해줍니다. 컴퓨팅 시간을 효과적으로 줄일 수 있습니다.

function defaultAsOne(variable) {
  if (variable || variable === null || variable === new String()) {
    variable = 1
  }

  return variable
}

위의 코드는 변수 variable이 존재하지 않거나 빈 값(Null)을 가지고 있다면 1의 값을 매겨 돌려주는 함수입니다. 하지만 연산자를 적당히 활용하면 굳이 If 문을 거치지 않고도 1줄만에 완성할 수 있습니다.

function defaultAsOne(variable) {
  /* variable = variable || 1 */
  return variable || 1
}

return 문을 한 번에 작성했습니다만 상단에 주석을 보시면 어떻게 사용하는지 알아채셨을겁니다. || 연산자를 통해서 positive 상태에 있는 항목을 선택합니다.

For loop of Array

For 문을 통해서 전체 배열에 루프 작업을 실행할 때 짧게 대체 가능하기도 합니다. 기존의 알고 계신 For 문으로는 총 3가지 항목이 필요했었습니다.

const arr = new Array(3).fill(Math.round(Math.random()))

for (let i = 0; i < arr.length; i++) {
  console.log((i + 1) + ' of ' + ' + arr.length + ' value from array is ' + arr[i])
}

하지만 실제로는 아래와 같이 훨씬 짧게도 같은 동작을 시킬 수 있습니다.

const arr = new Array(3).fill(Math.round(Math.random()))

for (let i of arr) {
  console.log((i + 1) + ' of ' + ' + arr.length + ' value from array is ' + arr[i])
}

Template literal

템플릿 리터럴이며, ES6 이상의 환경에서 사용가능한 문법입니다. 고로 웹브라우저에서는 사용하지 못합니다. 그러나 Node.JS에서는 효과적으로 쓰일 수 있습니다. (단, Chromium 등 최근 브라우저는 최신 문법을 지원합니다)

이전 예제를 끌어와 사용하겠습니다.

const arr = new Array(3).fill(Math.round(Math.random()))

for (let i of arr) {
  console.log((i + 1) + ' of ' + ' + arr.length + ' value from array is ' + arr[i])
}

여기에서는 Console.log 메서드에 들어가는 문자열에 변수를 훨씬 깔끔하게 바인딩할 수 있게 해줍니다. 또한 문자열을 따옴표 대신 백틱(`)이라는 기호로 묶어줍니다. 그리고 이 백틱은 중간에 줄이 바뀌어도 문제가 없습니다. (자동으로 \n으로 대치될 것입니다.)

const arr = new Array(3).fill(Math.round(Math.random()))

for (let i of arr) {
  console.log(`${i + 1} of ${arr.length} value from array is ${arr[i]}`)
}

Decimal base exponents

이 구문은 긴 숫자를 간편하게 표현하게 해줍니다. 100000과 같은 숫자는 우리가 직접 0을 모두 적기에는 너무 길기 때문입니다. 바로 예제를 보겠습니다.

  • 1e5는 100000와 동일합니다.
  • 1e6는 1000000와 동일합니다.

위와 같이 e 다음 숫자가 얼마나 많은 자릿수를 확장할 지 결정해줍니다.

Object property definition

보통 객체를 추가하고 각 속성을 정의하기에는 변수와 객체 key 이름이 같은 경우가 많아 상당히 더러워 보입니다.

const a = 1
const b = 2
const c = 3

const abc = {
  a: a,
  b: b,
  c: c
}

하지만 아래와 같이 변수와 객체의 key 이름이 같은 경우 굳이 value에서 변수를 참조해주지 않아도 됩니다.

const a = 1
const b = 2
const c = 3

const abc = {a, b, c}

Double bitwise

JavaScirpt bitwise 연산자 중 NOT에 해당하는 연산자는 Math.floor() 메서드를 대체할 수 있습니다. 또한 이는 Math.floor() 함수보다 훨씬 빠릅니다.

Math.floor(3.495) === 3 // NOTE: true

아래와 같이 사용합니다. (Bitwise 연산자에 관해서는 MDN 문서를 참조하세요)

~~3.495 == 3 // NOTE: true