Medium - JavaScript’s Magical Tips Every Developer Should Remember

24 Dec 2019 in Trend

Trend 파악을 위한 Medium 기고문 포스팅 - 모든 개발자가 알아야 하는 마법같은 자바스크립트 팁; 자바스크립트를 좀 더 깔끔하게 사용할 수 있는 팁들입니다

Photo by Markus Spiske on Unsplash

자바스크립트는 풀스택 개발자들에게 가장 유명한 언어입니다. 저는 노드를 주로 했으며 가끔 앵귤러도 하면서 모든 프로그래밍 언어들은 특성과 상관없이 어떤 트릭이나 팁들이 항상 있다는 것을 알게 되었습니다. 저는 수도없이 너무 복잡하게 코딩을 하는 개발자들을 봤으며 이것은 개발 환경을 더욱 혼란스럽게 만들고 문제를 만들게 됩니다. 이것과 관련된 Eric Elliott의 포스트 를 읽어보세요.

1. Use “var” when creating new variable

여러분이 새로운 변수를 만들 때 전역변수가 되길 원치 않는다면 항상 이름앞에 “var”를 붙이시길 바랍니다. 왜냐면 “var”를 붙이지 않고 변수를 만들게 되면 자동적으로 전역 변수가 되기 때문입니다. “let”, “const” 같은 다른 옵션도 있지만 사용법에 따라 달라집니다. let은 항상 변수를 블록 스코프로 만듭니다. 다음과 같은 코드를 보시죠

function varDeclaration(){
  let a = 10;
  console.log(a); //output 10
  if(true){
    let a = 20;
    console.log(a); //output 20
  }
  console.log(a); //output 10
}

그리고 다음은 우리가 많은 언어에서 볼 수 있는 행동입니다.

function varDeclaration(){
  let a = 10;
  let a = 20;         //throws syntax error
  console.log(a);
}

Error Message: Uncaught SynctaxError: Identifier ‘a’ has already been declared.

그러나 var를 쓰면 제대로 동작하게 되죠. var 구문을 사용한다면 스코프가 잘 관리될 것이고 내부함수에서 var 구문은 코드를 더욱 깔끔하게 만들어 줄 것입니다. 위의 예제를 통해 var와 let에 대해 잘 이해를 하셨으면 좋겠네요. const 의 경우 한번 값이 할당되면 다시 재할당 할 수 없습니다. const 구문의 스코프는 let과 비슷합니다. 만약 const에 값을 재할당 한다면 에러가 발생하게 됩니다.

2. Always use “===” as comparator instead of “==” (strict equal)

비교를 할 때는 항상 “===” 연산자를 사용하시길 바랍니다. 왜냐하면 “==” 연산자는 자동 형변환이 있어서 원하지 않는 오류가 발생할 수 있기 때문입니다.

3 == '3' //true
3 === '3' //false

이것은 “===” 비교 연산자가 값과 타입을 모두 비교하기 때문입니다.

[10] == 10 // is true
[10] === 10 // is false
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true
'' === false // is false

3. ‘undefined’, null, 0, false, NAN, ‘‘(empty string) are all false conditions

4. Empty an array

var sampleArray = [2, 223, 54, 31];
sampleArray.length = 0; //smapleArray becomes []

5. Rounding number to N decimal places

var n = 2.4134213123;
n = n.toFixed(4); // computes n = "2.4134"

6. Verify that your computation will produce finite result or not

isFinite(0/0);        //false
isFinite('foo');      // true
isFinite('10');       // true
isFinite(10);         // true
isFinite(undefined);  // false
isFinite();           // true

이 함수의 사용처를 이해하실 수 있도록 예를 들어보겠습니다. 엄청나게 많은 데이터가 있는 테이블에 대한 쿼리를 작성하신다고 하실 때 쿼리의 실행 결과가 가능한 결과 값인지 아닌지 확신을 하지 못할 겁니다. 쿼리의 데이터는 여러분이 쿼리에 동적으로 넣는 뭔가에 따라 달라지겠죠. 이런 경우에 여러분은 결과에 대한 프로퍼티를 유한값으로 확신할 수 있고 무한대인지 조건문을 걸지 않아도 바로 값을 사용할 수 있습니다.

따라서 isFinite()함수를 미리 사용하면 무한대 값을 깔끔하고 쉽게 처리할 수 있습니다.

7. Use a switch/case statement instead of a series of if/else

2개의 케이스가 넘어가는 경우에는 switch/case를 사용하는 것이 더욱 빠르고 잘 구성할 수 있습니다. 여러분이 10개 이상의 케이스를 처리해야 할 경우에는 사용을 피하세요.

8. Use of “use strict” inside your file

strict를 사용하는 것은 1번에서 말씀드렸던 변수 선언에 대한 걱정을 덜게 해줍니다.

(function () {
  a = 43;
  console.log(a); //42;
})();
console.log(a); //42;

위의 예제에서는 a가 함수 스코프내에 있음에도 불구하고 전역변수가 되어버립니다. 그러나 strict 모드를 사용하면 이런 실수를 막아줍니다. 여러분은 함수 외부에서 use strict를 사용하지 않는 것에 대해 궁금하실 수도 있습니다. 근데 그렇게 해버리면 전역에 적용되어 버립니다. 그럼 전체 코드와 다른 라이브러리에도 영향을 주게 됩니다.

9. Use && and || to create magic

"" || "foo"
// -> "foo"

undefined || 42
// -> 42

function doSomething () {
  return { foo: "bar" };
}
var expr = true;
var res = expr && doSomething();
res && console.log(res);
// { fooL "bar"}

추가적으로 코딩을 할 때 뷰티파이어를 쓰는 걸 있지마세요. JSLint와 minification을 꼭 사용하시기 바랍니다. 이것들은 여러분의 코드를 가능한한 표준으로 유지할 수 있게 도와줍니다.

Summary

자바스크립트에서 유용한 코딩 규칙 및 트릭
변수 선언할 때는 var를 기본으로 붙이자. 빼먹으면 전역변수가 되어 버린다
isFinite() 메소드로 무한대 값이 나올 수 있는 값을 직접적으로 처리할 수 있게 된다.
, && 연산자를 적절하게 쓰면 삼항연산자보다 더욱 깔끔하게 코딩할 수 있다.