나쁜 자바스크립트 관행에 작별 인사

Nov 29 2022

멋진 프로그래밍 세계로 첫 발을 내디딜 때 우리는 프로그래밍이 수백만 명의 사람들에게 어떤 역할을 하는지 직접 확인하게 됩니다. 프로그래밍 덕분에 많은 사람들의 삶이 장치에서 몇 개의 키를 누르는 것만으로 더 쉬워졌습니다(이것은 마법입니다).

프로그래밍은 또 다른 종류의 초능력이지만 Ben 삼촌이 그의 조카인 Peter Parker에게 말했듯이 "큰 힘에는 큰 책임이 따른다." 프로그래밍 세계에서 우리의 가장 큰 책임은 우리가 작성한 코드를 쉽게 테스트할 수 있고 시간이 지나도 유지 관리할 수 있도록 하는 것입니다.

프로그래밍에는 우리가 작성하는 코드와 최종 결과로 생성하는 제품에 지속적으로 부정적인 영향을 미칠 수 있는 몇 가지 작은 관행이 있습니다. 저는 이러한 문제를 직접 경험했습니다. 그것이 무엇인지, 그리고 어떤 대가를 치르더라도 피해야 하는 이유를 공유하는 것이 중요합니다.

1. let 및 const 대신 var 사용

이제 var 사용에 작별을 고할 때입니다.

다음과 같은 이유로 let 및 const만 사용해야 합니다.

● 범위가 더 명확해졌습니다(중괄호 사이).

● 전역 객체를 생성하지 않습니다.

● 오류를 재선언하면 오류에 플래그를 지정합니다.

사랑받는 IE11과 같은 구형 브라우저를 사용하지 않는 한 var를 사용하지 않는 것이 가장 좋습니다. Let과 const는 앞으로 가장 친한 친구가 될 것입니다.

2. 주석을 사용하여 코드 설명하기

주석은 우리가 소프트웨어를 빌드할 때 기본이 되는 부분으로 우리가 읽고 있는 코드를 조금 더 잘 이해할 수 있도록 도와주지만 우리 코드가 하는 일을 차근차근 설명하는 오류에 빠지면 안 되며, 우리가 쉽게 이해할 수 있는 코드를 만들어야 합니다. 읽기 및 주석은 컨텍스트만 제공해야 합니다.

다음은 전문가처럼 코드 주석을 작성하는 데 도움이 되는 몇 가지 팁과 알림입니다.

● 귀하의 의견이 중복되지 않도록 하십시오. 당신이 하는 일을 쓰지 말고 왜 하는가를 쓰십시오.

● 설명적인 변수/함수/클래스 이름이 설명적인 주석보다 낫습니다.

● 가능한 한 많이 요약하십시오. 꼭 필요한 경우가 아니면 단락을 작성하지 마십시오.

● 항상 같은 언어와 스타일의 댓글을 사용하도록 노력하세요.

● 시간이 지남에 따라 주석은 일반적으로 유지(수정)되지 않는 코드입니다.

3. === 대신 == 사용

첫 번째로 이해해야 할 것은 시각적으로 매우 유사하지만 다른 기능을 수행한다는 것입니다. 첫 번째는 정규 동등 연산자(==)이고 두 번째는 완전 동등 연산자(===)입니다.

일반 등호 연산자(==)는 피연산자가 유사한지 여부만 확인하므로 불쾌한 놀라움이 발생할 수 있습니다.

완전 항등 연산자(===)는 피연산자의 유형과 값이 서로 다른지, 정확히 동일한지 항상 확인합니다.

4. 옵셔널 체이닝을 사용하는 것을 잊는다

선택적 연결 연산자(?)를 사용하면 연결된 개체 체인의 모든 단일 참조를 확인하지 않고도 연결된 개체 체인의 깊숙한 곳에 있는 속성 값을 읽을 수 있습니다.

이는 존재하지 않는 속성에 액세스하려고 할 때 오류를 방지하는 데 도움이 됩니다. 예를 들어 해당 포켓몬의 정보를 포함하는 포켓몬 개체가 있다고 가정해 보겠습니다.

이 예제와 같이 정의되지 않은 속성에 액세스하려는 경우 'attack' Javascript 속성에 액세스하면 오류가 발생하고 애플리케이션이 중단됩니다. 선택적 연결(?)을 사용할 때 Javascript는 속성이 정의되지 않았지만 오류를 생성하지 않는다고 알려줍니다. 때때로 우리가 통제할 수 없는 이러한 유형의 오류에 대해 생각하는 것은 장기적으로 큰 차이를 만듭니다.

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

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

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

우리는 항상 async/await에서 try/catch로 오류를 처리해야 합니다.

프라미스의 오류를 처리하지 않으면 애플리케이션이 폭발할 가능성이 매우 높으며 이러한 일이 발생하는 것을 원하지 않습니다.

7. 객체를 단일 매개변수로 사용

개체에서 여러 값이 예상되는 함수를 선언할 때 단일 개체 입력 대신 여러 입력 매개 변수를 사용하는 것이 가장 좋습니다. 이는 다음과 같은 여러 가지 측면에서 도움이 됩니다.

첫째, 함수에 필요한 매개변수를 처음부터 알면 코드를 더 쉽게 읽을 수 있습니다.

둘째, 기능을 테스트하기 쉽게 만들고 이 두 가지를 함께 사용하면 시간이 지남에 따라 제품을 유지 관리할 수 있습니다. 또한 가비지 수집이나 불필요한 객체 매개변수 생성을 방지하므로 애플리케이션의 성능이 향상됩니다.

또 다른 장점은 TypeScript를 사용하고 여러 매개변수가 있는 경우 유형 검사 및 오류를 방지하는 자동 제안의 이점을 얻기 위해 매개변수의 인터페이스를 정의하기가 더 쉽다는 것입니다.

8. 약어의 힘 잊기

우리 모두는 변수가 존재하는지 또는 변수에 null 또는 undefined가 아닌 다른 종류의 값이 포함되어 있는지 궁금해하는 위치에 있었습니다. 이 때문에 종종 다음과 같은 매우 긴 유효성 검사를 수행하게 됩니다.

약어는 이러한 문제를 피하는 데 도움이 됩니다. 더 간단하고 우아한 방법으로 위의 코드를 다음과 같이 줄일 수 있습니다.

결론

깨끗한 코드를 작성하는 것은 항상 우리의 책임입니다. 개발자로서의 경험을 통해 유지 관리 가능하고 읽기 쉬운 코드가 있으면 여러분과 여러분의 팀이 많은 시간을 절약할 수 있다는 것을 배웠습니다.

우리는 코드를 작성하는 것보다 읽는 데 더 많은 시간을 소비한다는 점을 기억하십시오. 이 작은 팁이 마법과도 같은 놀라운 제품을 만드는 데 도움이 되기를 바랍니다.