JS 습관 기르기

강정우·2023년 4월 20일
0

JavaScript

목록 보기
36/53
post-thumbnail

1.let, const 대신 var를 사용하는 것

  • var를 사용하지 말자. 다음과 같은 이유로 var 대신 let과 const를 사용해야 한다.
    1. 범위가 분명해진다. (지역변수)
    2. 전역 객체를 생성하지 않는다.
    3. 동일 변수명을 다시 선언할 때 오류를 표시한다.

2. 주석을 사용해 코드를 설명하는 것

  • 주석은 소프트웨어를 작성할 때 기본적인 부분이다.
  • 이는 우리가 읽고 있는 코드를 더욱 잘 이해할 수 있도록 도와주지만, 코드가 하는 일을 모두 다 설명해주려고 하는 실수에 빠지면 안 된다.
    즉, 더 중요한 것은 코드를 읽기 편하게 작성하는 것이며, 주석은 맥락을 설명해야 한다.

Tip. 의견 중복하지 않기. 무슨 일을 하는지 쓰지 말고, "왜" 하는지에 대해 작성
함수 / 변수 / 클래스 이름으로 설명하는 것이 장황한 주석보다 낫다.
최대한 많이 요약하기. 꼭 필요한 경우가 아니라면 문단 단위로 작성하지 않기.
주석 언어 사용에 대해 항상 일관성을 유지할 것.
시간이 지나도 주석은 수정되지 않아야 함.

  • 사실 이 글을 보고는 약간 뜨끔했다. 우선 나는 로직 작성에 바빠 제대로된 주석마저 작성하지 않은 아주 나쁜 습관을 가졌기 때문이다. 이 기본기를 읽고서 이제는 꼭 바뀌어야겠다!!

3. === 대신 ==를 사용하는 것

  • 해당 연산자에 대해 먼저 이해해야 할 것은 둘은 겉보기에 매우 유사하지만, 정작 기능적으로 완전히 다른 역할을 수행한다.
  • 첫 번째는 일반 항등 연산자(==)이며, 두 번째는 완전 항등 연산자(===)이다.

4. 옵셔널 체이닝?을 사용하지 않는 것

  • 옵셔널 체이닝 연산자 ?를 사용하면, 해당 객체의 모든 레퍼런스를 확인하지 않아도 객체 체인의 깊숙한 곳에 있는 속성값을 확인할 수 있다.
  • 이는 존재하지 않는 속성값에 접근하려고 할 때 오류를 방지해준다.
  • 옵셔널 체이닝 ?를 사용한다면 자바스크립트는 에러를 생성하지 않지만, 해당 프로퍼티가 정의되지 않았음을 알려준다.
    때때로 우리가 통제할 수 없는 이러한 오류에 대해 미리 예방하는 것은 장기적으로 큰 차이를 만들어낸다.
  • 사실 이 optional은 TypeScript에서도 아주 잘 사용하고 있는 연산자 중 하나이고 ? 의 반대는 !이다.

5. 매직 넘버와 매직 스트링을 사용하지 않는 것

  • 매직 넘버 또는 매직 스트링은 코드에서 직접 사용되는 숫자 또는 문자열로, 명확한 컨텍스트는 없지만 목적이 있다.
    상수에 이러한 값을 할당하는 것이 가장 좋다. 그렇지 않으면 이해하고 디버그하기가 어려워 질 수 있다.

  • 즉, 메모리 아끼겠다고 상수를 그냥 집어 넣는 것이 아닌, 위 2번 철직 주석을 사용하는 것과 마찬가지로 매직 넘버, 매직 스트링으로써 코드를 설명해주는 부가 효과도 가질 수 있다는 것이다.

6. API 호출 오류에 대한 부적절한 처리

  • 우리는 언제나 async/await 안에서 try/catch를 사용하여 에러를 처리해야 한다.
    만일 이 규칙을 지키지 않는다면, 프로그램(앱)이 폭발할 가능성이 매우 높다.

  • 사실 이 부분도 vuex를 사용하여 온갖 데이터를 state화 하여 관리하고 수많은 API를 작성하다 보면 빼먹을 수 있지만 앞으론 더 꼼꼼히 신경써야겠다.

7. 객체를 매개변수로 사용하는 것

const someMethods = (object) => {
  console.log(object.property1)		// hello
  console.log(object.property2)		// world!
}

가 아닌

const someMethods = (변수1, 변수2) => {
  console.log(변수1)		// hello
  console.log(변수2)		// world!
}
  • 객체에서 여러 속성값이 필요한 함수를 정의할 때, 객체를 사용하는 것보다 여러 매개 변수를 사용하는 것이 좋다.
    이는 다음과 같은 몇 가지 사항에 도움이 된다.

    1. 먼저 함수에 필요한 매개변수를 정확히 명시할수록 코드를 읽는 것이 쉬워진다.
    2. 함수를 테스트하기 쉽게 만들어준다. 그리고 시간이 지나도 제품의 유지 보수를 쉽게 만들어 준다.
      게다가 가비지 콜렉팅(사용한 객체를 메모리에서 지우는 행위) 혹은 불필요한 객체 매개변수 생성을 방지하므로, 애플리케이션의 성능이 향상된다.
  • 만약 타입스크립트를 사용하면서 여러 개의 매개변수가 있는 경우, 매개변수의 인터페이스를 정의하기가 더 쉽기 때문에, 타입을 확인하고 오류를 방지하는 유형 검사 및 자동 추천의 이점을 누릴 수 있다.
    즉, IDE로 하여금 자동완성의 이점을 확보할 수 있다는 뜻이다.

8. 약어를 사용하지 않는 것

  • 즉, null, undefined를 처리하기 위해
if(변수!==null||변수!==undefined){
  로직
}

이 아닌

if(!!변수){
  로직
}

을 사용하란 뜻이다

profile
智(지)! 德(덕)! 體(체)!

0개의 댓글