댓글 - 자바스크립트 기초

14618 단어 beginnersjavascript

댓글 작성 방법:



한 줄 주석



한 줄 주석을 작성하려면
--> // 와 같이 두 개의 슬래시로 주석을 시작해야 합니다.
예:

// I am a comment



const test = 'hi'; // I can make comments like this too. 


  • 이 두 번째 예는 설명을 작성하는 데 전체 줄이 필요하지 않음을 보여줍니다
  • .

    참고: 기술적으로 여러 줄 주석 구문(아래 표시)을 사용하여 한 줄 주석을 만들 수 있습니다.

    /* I am comment */
    


    여러 줄 주석



    더 큰 주석을 위해 주석을 여러 연속 줄로 나눌 수도 있습니다.
    예:

    /*
      I am a comment
    */
    



    /* I am
    a
    comment */
    



    /*
      I am a comment
      I am a comment
      I am a comment
      I am a comment
      I am a comment
      I am a comment
    */
    


    댓글을 작성하는 이유:



    주석은 작성한 코드를 이해하는 데 사용됩니다.

    그러나 모든 것에 대해 언급하는 것은 피해야 합니다. 그럴 필요가 없습니다. 주석은 코드의 매우 불분명한 부분이나 복잡한 함수, 개체, 클래스 또는 언뜻 보기에 어려워 보이고 설명이 필요할 수 있는 기타 목적에 대한 높은 수준의 이해를 설명하는 경우에만 사용해야 합니다.

    주석 없이 읽을 수 있는 코드를 작성해야 합니다. 코드는 스스로를 설명해야 합니다. 그러나 항상 그런 것은 아닙니다.

    댓글에 대한 타당한 이유의 예("타당한 이유" 댓글 예시에 대한 비판의 여지가 있음):


  • 내가 만든 Tone.js 데모의 스니펫

  •   // Reusable method for events to play the "Close Encounters of the Third Kind" Human communication to the aliens.
      closeEncountersHumans() {
        const synth2 = new Tone.Synth().toDestination();
        synth2.volume.value = -3;
        const now = Tone.now();
        synth2.triggerAttackRelease('G4', '8n', now);
        synth2.triggerAttackRelease('A4', '8n', now + 0.5);
        synth2.triggerAttackRelease('F4', '8n', now + 1);
        synth2.triggerAttackRelease('F3', '8n', now + 1.5);
        synth2.triggerAttackRelease('C4', '8n', now + 2);
      }
    - This is a short sweet overview of a Class method I created for a React App. You don't need to go understand how it creates the object to create sound, you don't need to explain why the volume is the way it is, and you don't need to go an interpret the rest of this. The variable name tries to explain it, but a comment might do this method more justice. Because its purpose and output may not be completely understandable and maybe somebody just needs a sound effect for a button click. They look around the app and stumble upon this method that can produce the `"Close Encounters of the Third Kind" Human communication to the aliens` sound effect on a button click. Easy peezy. Nothing crazy.
    


  • 학교 프로젝트를 위해 만든 이전 서버 코드(불완전한 라우터(많은 부분 누락), 하지만 이 경우에 대한 좋은 예):

  • /* Purpose:
    This router handles the app's request routing and error
    handling for Preflight OPTIONS, GET requests for the app's
    background image default background or latest uploaded
    background, GET requests for remote commands to client
    application, and POST requests for client application 
    commands from the client application itself.
    */
    module.exports.router = (req, res, next = ()=>{}) => {
      if (req.method === 'OPTIONS') {
        res.writeHead(200, headers);
        res.end();
      }
      if (req.method === 'GET') {
        if (req.url === '/') {
          const result = messageQueue.dequeue();
          res.writeHead(200, headers);
          res.write(result);
          res.end();
        }
        if (req.url === '/background.jpg') {
          fs.readFile(module.exports.backgroundImageFile, (err, fileData) => {
            if (err) {
              res.writeHead(404);
            } else {
              res.writeHead(200);
              res.write(fileData, 'binary');
            }
            res.end();
          });
        }
      }
      if (req.method === 'POST') {
        res.writeHead(200, headers);
        res.end();
      }
      next();
    };
    


  • 이 라우터에는 많은 작업이 진행되고 있습니다. 처리할 수 있는 모든 가능한 요청에 대한 좋은 상위 수준 개요는 이것을 선택할 수 있는 개발자에게 도움이 될 것입니다. 특히 앞서 언급한 바와 같이 이 라우터가 불완전한 상황에서는 더욱 그렇습니다. 팀의 개발자가 이 라우터가 수행하는 작업과 20줄 이상의 코드 해석을 몇 줄로 신속하게 확인하는 것이 정말 좋을 수 있습니다. 그들은 요청 URL을 확인하는 각 조건의 "이유"와 각 조건 블록에서 어떤 일이 발생하는지에 대한 게이지를 얻을 수 있습니다.

  • 댓글에 대한 나쁜 이유의 예:




    const something = 'Hello World'; // I made this variable so our company's code can have a "Hello World" string.
    


  • 문자열 유형 값과 같은 일부 기본 데이터 유형에 대한 변수를 설명할 필요가 없습니다. 사용 사례는 사용하려는 모든 곳에서 의미가 있어야 합니다.

  • const aFunction = () => {
      const multipliedByTwo = arguments[0].map((value) => {
        return value * 2;
      });
      return multipliedByTwo;
    }; // This function iterates through the given array and returns a new array of values multiplied by two from the input array.
    


  • "매우 복잡해 보이는데 이 부분에 대해 언급하면 ​​안 되는 이유는 무엇입니까?"라고 생각할 수 있습니다. 처음에는 새로운 언어를 배우는 것이 복잡합니다. 하지만 이것에 대해 생각해 보십시오. 사람들에게 사과를 먹는 이유를 말할 필요가 없을 것입니다. 당신은 영양분을 얻기 위해 가장 높은 수준의 사과를 먹고 있습니다.
  • Code will like this이 학습 전반에 걸쳐 의미가 있을 것입니다. 그리고 그것은 다른 사람들에게도 의미가 있을 것입니다. 여기에 사용된 map 방법은 일부 조작된 값이 있는 다른 배열을 반환하기 위해 배열을 반복하는 데 사용되는 매우 일반적인 방법입니다. 또한 배열을 반복하는 데 사용할 수도 있습니다.
  • 학습하고 성장함에 따라 학습한 모든 언어를 배우는 것과 마찬가지로 주석을 사용해야 하는 경우와 사용하지 말아야 하는 경우에 대한 직관을 얻을 수 있습니다.
  • 좋은 웹페이지 즐겨찾기