Flatiron School의 첫 번째 JavaScript 강의 중 강사는 세미콜론이 JavaScript에서 선택 사항이라고 언급했습니다… 그렇지 않은 경우를 제외하고 🤔

JavaScript에서 세미콜론을 사용하는 이유를 진정으로 이해하고 이 지식을 사용하여 초기에 나쁜 습관을 만들지 않기로 결정했습니다.

피터 아클, https://opinionator.blogs.nytimes.com/2012/07/02/semicolons-a-love-story/

자동 세미콜론 삽입(ASI)

JavaScript에서 때때로 세미콜론이 선택 사항인 이유는 자동 세미콜론 삽입(ASI) 때문입니다. ASI는 실제 세미콜론이 코드에 삽입된다는 의미가 아니라 특정 지점에서 세미콜론이 해석되는지 여부를 결정하는 JavaScript에서 사용되는 일련의 규칙에 가깝습니다. Fullstack Academy에서 주제에 대한 유용한 강의를 찾았습니다. 나는 또한 주제에 대해 Bradley Braithwaite의 blog post을 찾았습니다. 아래에서는 이러한 리소스의 주요 내용을 강조합니다.

3개의 자동 세미콜론 삽입 규칙:

다음은 ASI와 관련하여 알아야 할 3가지 주요 사항입니다.

1- 문법적으로 올바르지 않은 줄 종결자나 '}'를 만나면 세미콜론이 삽입됩니다. 따라서 이전 코드 줄 바로 다음에 새 코드 줄을 구문 분석해도 여전히 유효한 JavaScript가 생성되면 ASI가 트리거되지 않습니다.

예 1:

var beef 
var cheese 

될 것입니다:

var beef; 
var cheese; 

예 2:

var a 
    b= 
    3;

여기서 문법은 a 뒤에 b가 표시될 것으로 예상하지 않으므로 ASI가 트리거됩니다.

var a; 
b = 3;

예 3:

a = b + c 
(d + e).print() 

같음:

a = b + c(d + e).print();

2- 프로그램이 입력 끝에 도달하고 오류가 없지만 완전한 프로그램이 아닌 경우 끝에 세미콜론이 추가됩니다. 이는 기본적으로 세미콜론이 누락된 경우 파일 끝에 세미콜론이 추가됨을 의미합니다.

3- 문법에는 줄 바꿈이 나타나면 무조건 문장을 종료하고 세미콜론을 추가하는 특정 위치가 있습니다. 이에 대한 한 가지 예는 반환 문입니다.

function getCheese() {
    return 
    { 
       cheeseType: "Gouda"
    } 
}

그러면 ASI가 트리거되고 결과는 다음과 같습니다.

function getCheese() {
    return; 
    { 
       cheeseType: "Gouda"
    } 
  }

return 문의 식은 다음과 같이 같은 줄에서 시작해야 합니다.

function getCheese() {
    return { 
       cheeseType: "Gouda"
    } 
  }

언제 세미콜론을 사용하지 않아야 합니까?

다음은 세미콜론이 필요하지 않은 몇 가지 경우입니다.

다른 경우라면 {...}
을 위한 (...) {...}
동안 (...) {...}

참고: 다음에 하나가 필요합니다: do{...} while (...);

마지막 생각들

선택적 세미콜론 없이 JavaScript를 작성하려는 경우 최소한 ASI가 수행하는 작업을 아는 것이 좋습니다. 예를 들어 압축 또는 축소로 인해 해당 프로그램이 세미콜론에 의존할 수 있으므로 유효한 코드에서 오류가 발생할 수 있습니다.

또한 코드가 인식하지 못하는 사이에 함께 연결될 수 있으므로 세미콜론 없이 디버그하기가 더 어려울 수 있습니다. 없어야 할 곳에 줄바꿈을 넣으면 ASI가 건너뛰어 세미콜론이 없어도 세미콜론으로 간주할 수 있습니다.

https://www.everywordcounts.co.uk/no-need-to-be-scared-of-semicolons/

회사와 오픈 소스 프로젝트는 어떤 식으로든 선호도가 있을 수 있으므로 그것이 무엇인지 반드시 기록해 두십시오.

마지막으로 ASI로 인해 오류가 발생할 수 있다고 생각되면 Babeljs.io를 확인하여 디버깅하십시오. 코드를 입력할 수 있고 ASI 세미콜론이 삽입되는 위치를 보여줍니다.

JavaScript에서 세미콜론과 관련하여 어떤 사실을 발견했습니까?