Beginner: 우리는 인간이고 실수는 매우 흔합니다. > 50개의 실수/일.
Intermediate: 우리는 인간이며 실수를 피할 수 있습니다. < 50 실수/일.
Expert: 우리는 인간이고 Javascript로 말할 수 있습니다 🤣. < 5개의 실수/일.

꽤 흥미롭지 않나요? 위의 진술에서 보면 실수는 어디에나 있습니다. 그렇다면 전문가 마인드가 일반적으로 무엇을 할 것인가?

그는 결과를 예측하고 그에 따라 결과를 업데이트할 수 있는 반면 초보자는 코딩하는 동안 시행착오를 합니다.

If you know the disease well then you can cure it well instead of eating the whole medical shop.

구글에 좋은 속담이 있을 수 있는데 갑자기 생각나서 적어봅니다. 컨텍스트를 얻으시기 바랍니다.

나는 덤불 주위를 두드리는 것을 좋아하지 않습니다. 시작하자:

실수를 피하고 더 짧은 시간에 코딩할 수 있는 몇 가지 멋진 팁을 제공하고 싶습니다.

팁 1: 기본을 잘 연습하세요

무엇이든 코딩할 때마다 전체 기능을 가능한 한 작은 작은 부분으로 분리하고 코딩을 시작합니다.

코딩의 각 단계에서 우리는 브라우저에 보여주고 싶은 데이터를 어떻게든 가지고 놀게 됩니다.

예시:

애플리케이션에 직원 목록을 표시하고 사용자가 새 직원을 추가하는 즉시 목록을 업데이트해야 한다고 가정해 보겠습니다.

// Initial list.
let employeeList = ['james', 'peter', 'roy', 'garreth'];

// you know you can use push and add a new employee to your existing array.
employeeList = employeeList.push('new james');

// But you are not sure what happens if you do like the above
console.log(employeeList);
> 5 // push returns the size of the array instead updated array.

따라서 실수를 피하기 위해 기본 사항을 아는 것이 매우 중요합니다. 또한 시행 착오를 피하기 위해.

I would say this is the main reason for mistakes in the whole coding journey.

팁 2: 사용하기 전에 알아보기

예. 웹 애플리케이션에서 몇 가지 특정 실시간 시나리오를 달성하기 위해 작성된 래퍼 또는 라이브러리에 의존해야 할 수 있으므로 기본 JS 메소드를 매번 사용하지 않습니다.

예: moment.js - 날짜와 시간을 잘 다루는 자바스크립트 라이브러리입니다.

이 라이브러리를 직접 가져올 수 있으며 필요한 시간 변환 등을 수행합니다.

이제 이러한 종류의 라이브러리는 다른 목적에 사용할 수 있는 다른 방법을 제공합니다. StackOverflow를 검색하여 코드를 복사하여 붙여넣으면 안 됩니다.

모든 라이브러리는 제공하는 각 기능에 대해 보다 명확한 문서를 제공합니다. 그것들을 살펴보고 그들이 제공하는 예를 시도하고 기능과 단점을 이해하십시오. 그 후에 그것들을 사용하십시오.

So, this tip is not just to avoid mistakes but also to avoid future bugs.

팁 3: 실행 흐름 이해

실행은 일반적으로 스크립트에서 위에서 아래로 발생합니다. 그러나 흐름이 약간 미끄러지는 상황이 있습니다.

비동기 JS:

JS에는 Promises, setTimeout, setInterval 등과 같은 비동기 지원이 있습니다. 다음과 같이 사용하면 실행 흐름이 변경됩니다.

예시:

console.log('first message');

setTimeout(() => {
    console.log('async message');
});

console.log('last message');

> first message
> last message
> async message

연산자 우선 순위: 연산자가 서로에 대해 구문 분석되는 방법을 결정합니다.

console.log(5 + 10 * 3 - 2); // 33
console.log(5 + 10 * (3 - 2)); // 15
console.log((5 + 10) * 3 - 2); // 43

첫 번째 시나리오에서는 곱셈이 더 높은 우선 순위를 가지므로,
5 + 10 * 3 - 2 -> 5 + 30 - 2 -> 35 - 2 - 33

두 번째 시나리오에서는 괄호가 더 높은 우선 순위를 가지므로,
5 + 10 * (3 - 2) -> 5 + 10 * 1 -> 5 + 10 -> 15
세 번째는 자명합니다.

따라서 실행 순서는 여기에서 결과를 변경합니다.

지금까지는 좋았지 만 연산자 우선 순위 규칙이 많이 있습니다. 어떻게 기억할 수 있습니까?

이 페이지를 북마크에 추가하지 마십시오: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Keep in mind that debugging is not for mistakes.

디버깅을 효율적으로 사용하는 위치, 시기 및 방법을 가리키는 다른 기사에서 디버깅에 대해 다룰 것입니다.

테이크 아웃은 무엇입니까?

실수 감소 == 코딩 시간 단축 - 성능 개선

실수를 피하기 위해 배울 것입니다 - 지식은 신성합니다

결국 JS로 말하게 될 것입니다 - 최고의 프로그래머가 되었습니다 🤩

이 모든 팁이 내 경험을 알려줍니다. 가장 팔로우하는 팁과 나만의 팁을 댓글로 남겨주세요.

감사합니다 😊

💎 귀하의 응답을 보고 싶습니다.

Like - 여기에 도달했습니다. 나는 좋아할 자격이 있다고 생각한다.

코멘트 - 함께 배울 수 있습니다.

공유 - 다른 사람들도 이 리소스를 유용하게 사용할 수 있습니다.

구독/팔로우 - 내 매일 기사를 최신 상태로 유지합니다.

격려해 주세요 - You can buy me a Coffee

더 논의합시다.

저스트 디엠

또는 기재

추가 업데이트: