JavaScript 사용할 때 주의할 점

 

첫 번째. var, let 그리고 const

 

• var 만 사용하든지, let 과 const 만 사용한다(추천)

  function letConstOnly() {
    const num = 1;
    const str = 'school';
    let bool = true;
  }

 

• var 와 let, const 모두를 섞어 쓰지 말자
  

  function mixUse() {
    const min = Infinity;
    var max = -Infinity;
    var sheIs = 'Jane';
    const heIs = 'John';
  }

 

 

 

두 번째. 세미콜론(;)

 

• 세미콜론을 항상 사용하자. 정 내 스타일이 아니다 싶으면 하나도 사용하지 말 것을 권장한다.
  

  function useSemicolons() {
    const myName = 'Jackie';
    
    console.log(`Hi, my name is ${myName}`);
  }

 

• 썼다가 안 썼다가는 금물
  

  function mixUsageSemicolons() {
    const students = ['James', 'Jane', 'Mike'];
    
    for (let i = 0; i < students.length; i += 1) {
      if (students[i] === 'Jane') {
        console.log('I found Jane!')
      } else {
        console.log(`It's ${students[i]}, not Jane`);
      }
    }
    
    console.log('Printed all students name')
  }

 

 

 

세 번째. 일치 연산자

이 부분 역시 항상 === 을 사용하는 것이 현재 2019년 기준 국룰이다. 

그 이유는 == 을 사용했을 경우 예기치 못한 경우에서 true, false 가 결과로 반환될 수 있기 때문이다. 

해서, 정말 특별하게 반드시 == 을 사용해야하는 경우가 아니라면, === 을 사용하는 것이 바람직하다.

 

• 항상 === 을 사용하고 == 은 사용하지 말자.
  

  function strictComparison(names) {
    for (let i = 0; i < names.length; i += 1) {
      if (names[i] === 'Jane') {
        console.log('I found Jane!');
      }
    }
  }

 

 

 

네 번째. 불변성

외부 스코프에 대한 영향력을 줄여 사이드 이펙트를 방지하고 원본 객체의 상태를 온전히 보존한다는, 객체의 원본 보존성, 즉 불변성이다.

함수에서 개발자가 지켜야 할 제일 첫 번째는 바로 인자로 들어온 값을 수정하지 않는 것이다.

수정하는 순간, 그 함수는 종료가 되는 그 시점까지 절대로 순수함수가 될 수 없다.

 

실제 코드에서 방금 언급한 규칙이 지켜져야 함에도 불구하고 지켜지지 않는 곳이 있는데,

대표적으로 자바스크립트 내장 메소드인 sort 다.

 

• 새 객체에 깊은 복사로 값을 복사해서 사용하자.
  

  function sortByAges(array) {
    const _array = array.slice();
    _array.sort((a, b) => a.age - b.age);
    return _array;
  }

 

• 인자는 무슨 일이 있어도 변경하지 말자. 사이드 이펙트를 야기할 가능성이 높다.

 

 

 

마지막. 삼항 연산자

 

• 깔끔하게 처리할 수 있을 때 삼항 연산자를 사용하자.

 

• 단순히 if 를 사용하기 싫어서 삼항 연산자를 사용하는 것이라면, 정말 삼항 연산자가 필요한 순간에 사용했었는지 고민해보자.

 

 

 

 

↓출처 사이트

https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%94%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%97%90%EC%84%9C-%EA%B0%80%EC%9E%A5-%EB%A7%8E%EC%9D%B4%ED%95%98%EB%8A%94-%EC%8B%A4%EC%88%98%EB%93%A4-a10df2c884c