JavaScript의 세미콜론에 대한 관점이 뚜렷한 문장

의견과 사실

이 문장은 나의 의견에 관한 것이다JavaScript를 작성할 때는 세미콜론을 포함해야 합니다.간단한 사실은, 나는 그 중 하나가 다른 것보다 우수하다는 것을 증명할 어떠한 정량이나 정성 데이터도 없다.내가 뭘 더 좋아하는지 알아.

Programs must be written for people to read, and only incidentally for machines to execute.
-- Abelson and Sussman

코드에 번호를 삽입하는 것이 좋은 실천인지에 대해서는 두 가지 관점이 있다.문제는 이것이 최선의 방법인가이다

가독성 특징으로 분호를 사용합니까?

자동 세미콜론으로 세미콜론을 배치할 수 없는 영역에만 세미콜론을 사용합니까?

학파: "항상 분호를 사용"

이런 사상은 개발자가 항상 번호를 사용해야 한다고 주장한다. 자동 번호 삽입 (ASI) 에서 통상적으로 일을 처리하는 구역에서도 마찬가지다.
ASI가 영원히 100% 신뢰할 수는 없지만 JavaScript의 모든 새 버전에 따라 달라질 수도 있습니다.ASI 기능이 수정되거나 변경될 경우 세미콜론 코드가 사용되지 않는 기능에서 실행될 수 있습니다.

사상 유파: "영원히 번호를 사용하지 마라"

두 번째 학파는 분호는 절대적으로 분호가 필요한 상황에서만 사용할 수 있다고 생각한다.
ASI의 문서가 이 기능을 구현하는 상황을 명확하게 설명한다고 가정합니다.ASI 기능은 삽입을 처리하기 때문에 문장부호를 추가할 필요가 없습니다.
제목 속의'여태껏'이라는 단어는 거의 항상 이렇기 때문에 글자 그대로 이해할 수 없다.JavaScript에는 절대 세미콜론이 필요한 인스턴스가 많은데 ASI 기능은 이러한 인스턴스를 처리하지 않습니다.
이 학파는 이 개념을 양호한 코드 실천을 장려하는 방식으로 여긴다.

정의

{ }: 괄호[ ]: 대괄호( ): 괄호

자동 세미콜론 삽입(또는 ASI)

세미콜론은 JavaScript에서 ASI를 선택하는 경우가 있습니다.이것은 결코 코드에 실제 분호가 삽입되었다는 것을 의미하지 않는다.
ASI는 세미콜론이 특정 위치에서 해석되는지 확인하는 데 사용되는 JavaScript 규칙 집합입니다.세미콜론이 필요할 때, 백그라운드에 세미콜론을 몰래 추가합니다.

For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.

• ECMAScript Language Specification

중요한 것은 JavaScript의 행동이 예상에 부합되지 않기 때문에 잘못된 코드를 작성하지 않도록 번호를 나누는 규칙을 알아야 한다.
코드 해석 과정에서 다음과 같은 특수 상황이 발생하면 JavaScript 해석기는 자동으로 세미콜론을 추가합니다.

현재 줄의 코드를 중단하기 위해 다음 줄을 시작할 때(코드는 여러 줄에서 생성할 수 있음).

다음 줄을 괄호로 시작할 때 } 현재 블록을 닫습니다.

코드 끝에 도달했을 때.

자신의 행에 return, break, throw 또는 continue 문장이 있을 때.

메모: 번호 지정 필요

요구했어

두 개 이상의 문장이 같은 줄에 있을 때만 JavaScript에 세미콜론이 필요합니다.

// Semicolon required, but optional before the line break
var i = 0; i++

// Semicolon optional
var i = 0
i++

선택 가능

JavaScript의 세미콜론은 구문을 구분하는 데 사용됩니다.그러나 문장 뒤에 줄 바꾸기 문자가 있거나 블록에 문장이 하나만 있고 보통 괄호{ }로 표시된다면 이 문장을 생략할 수 있다.
다음은 주석 유형의 문장들입니다...

// Variable declaration
var i;
// Value assignment
i = 5;
// Value assignment
i = i + 1;
// Value assignment
i++;
// Declaration and Assignment
var x = 9;
// Variable declaration, assignment, and function definition
var fun = function() { // ... };
// Function call
alert('bob');

모든 이 문장들은 분호로 끝나지만, 반드시 분호로 끝나야 하는 것은 하나도 없다.본고는 각 문장을 분호로 끝내는 것이 좋은 습관인지에 관한 것이다."

피한다

끝 괄호
세미콜론은 끝 괄호 } 뒤에 있으면 안 됩니다.이 규칙의 유일한 예외는 값 부여 문장이다. 예를 들어 let a = { // ... };.

// No semicolons follow ...
if () { // ... } else { // ... }
for () { // ... }
while () { // ... }

// Function statement
function b(argument) { // ... }

IF, FOR, WHILE 또는 SWITCH 문장의 괄호 뒤에
IF-STATEMENT의 { } 뒤에 점수를 붙이는 것은 아무런 해가 없다.그것은 무시될 뿐만 아니라, 필요하지 않다는 경고가 있을 수도 있다.그러나 번호가 속하지 않는 곳은 아주 나쁜 생각이다...

if (value === true); { alert('Yes!') }

// Is equivalent to ...

if (value === true) /* DO NOTHING */;
alert('Yes');

이 코드는 항상 "YES!"라는 메시지를 표시합니다.그러나 value은true이 아니라 번호 때문이다.그것은 자바스크립트로 하여금 거기에 빈 괄호가 있다고 믿게 한다.번호 오른쪽의 모든 내용은 if-STATEMENT에 속하지 않고 독립된 것으로 간주됩니다.
지금, 예외...
물론 예외도 있다.
한 가지 중요한 문제는 FOR-LOOP의 괄호 ( ) 안에서...여기서 분호는 첫 번째 문장과 두 번째 문장 뒤에만 있고 세 번째 문장 뒤에는 없다.

// Correct Syntax
for (var i = 0, len = 10; i < len; i++) { // actions }
// Syntax Error
for (var i = 0, len = 10; i < len; i++;) { // actions }

예기치 않은 작업을 수행하는 코드

분호가 없는 상황에서 몇 가지 상황에서 코드의 행동이 이상할 수 있다.
이런 코드를 주면...

const word = 'WORD'
const another = 'ANOTHER'

['b', 'o', 'b'].forEach(letter => console.log(letter))

... 오류Uncaught TypeError: Cannot read property 'forEach' of undefined가 발생한 것은 첫 번째 규칙이 상기 코드를 다음과 같이 설명하려고 시도했기 때문이다...

const word = 'WORD'
const another = 'ANOTHER'['b', 'o', 'b'].forEach(letter => console.log(letter))

다음은 이런 코드를 드리겠습니다...

(1 + 2).toString()

예상"3"이 출력으로 나타납니다.
하지만 이 코드를 확장하면...

const a = 1
const b = 2
const combined = a + b
(a + b).toString()

... TypeError: b is not a function 이상 트리거입니다. Javascript가 코드를 로 해석하려고 하기 때문에...

const a = 1
const b = 2
const combined = a + b(a + b).toString()

전형적인 결핍 번호 예시를 검사합니다. 코드는 아래와 같습니다.

(() => {
  return
  {
    result: 'bob'
  }
})()

이 IIFE의 반환값은 result 속성을 포함하는 대상이 될 것으로 예상됩니다. 이 속성의 값은 'bob' 입니다.
사실은 그렇지 않다.
반대로 자바스크립트가 undefined 뒤에 세미콜론을 삽입했기 때문에 return입니다.
이 코드를 작성하는 정확한 방법은 return 뒤에 큰 괄호가 있는 것이다...

(() => {
  return {
    result: 'bob'
  }
})()

상술한 규칙을 검사하면 4조는 이곳에서 깨진 규칙이다.

또 다른 예시에서 제시한 코드는 console.log'0'을 출력으로 촉발하는 것처럼 보인다...

41 + 1
-1 + 1 === 0 ? console.log('0') : console.log('42')

... 그러나'생명, 우주, 그리고 모든 궁극적인 문제에 대한 답안'이나 42를 제시했다. 왜냐하면 위의 규칙 1은 이 코드를 다음과 같이 해석하기 때문이다.

41 + 1 -1 + 1 === 0 ? console.log('0') : console.log('42')

유머러스하다

엔리크 로페스 마나스
@ 엔리케 로페스

이것은 분호이다.이것은 그리스의 물음표이다.아니오, 그들은 같은 배역이 아니에요.네, 자바스크립트 동료를 악용할 수 있어요.
2019년 5월 14일 새벽 03:11

결론

본문은 나의 관점을 기록하였다JavaScript를 작성할 때는 세미콜론을 포함해야 합니다.
나는 분호가 부족하거나 분호가 부족하여 문제를 초래할 때, 어떤 경로도 문제를 초래할 수 있다고 의심한다.개발자들이 자바스크립트를 점차 이해하면서 번호를 빼면 이해하기 어려운 문제를 초래할 수 있다.경험이 증가함에 따라 JavaScript의 기능은 무시될 수 있습니다.내가 이 경로에 대한 유일한 문제는 언젠가 코드를 사용한 경험이 적은 개발자들이 다시 문제를 볼 수 있다는 것이다.
간단한 사실은, 나는 그 중 하나가 다른 것보다 우수하다는 것을 증명할 어떠한 정량이나 정성 데이터도 없다.내가 뭘 더 좋아하는지 알아...JavaScript를 작성할 때 세미콜론을 포함합니다.