자바 스크립트 변수 정의 : 쉼표와 세미콜론

세미콜론이 아닌 변수 그룹을 선언 할 때 쉼표를 사용할 때의 차이점 및 / 또는 이점은 무엇입니까?

예를 들면 :

var foo = 'bar', bar = 'foo';

대

var foo = 'bar';
var bar = 'foo';

var첫 번째 예제에서 첫 번째 변수에 키워드 를 지정하면 모든 변수에 걸쳐 지속되므로 둘 다 범위와 관련하여 동일한 최종 결과를 생성한다는 것을 알고 있습니다. 그것은 단지 개인적인 취향입니까, 아니면 어느 쪽이든 수행하면 성능상의 이점이 있습니까?

성능상의 이점은 없으며 개인적인 선택과 스타일의 문제입니다.

첫 번째 버전은 더 간결합니다.

최신 정보:

전송되는 데이터의 양에 관해서는 물론 적을수록 좋지만 var실제 영향을 확인하려면 엄청나게 많은 제거 된 선언 이 필요합니다 .

축소를가 로 첫 번째 예는, 그러나, 더 나은 축소를 위해 도움이됩니다 무언가로 언급 된 다니엘 Vassallo이 코멘트에 지적, 좋은의 minifier은 자동으로 당신을 위해 어쨌든, 그래서 그 점에 영향을주지 않고 무엇이든지 할 것입니다.

Crockford와 다른 사람들을 읽은 후 쉼표로만 변수를 연결하기 시작했습니다. 그런 다음 나중에 쉼표로 변수 정의에서 멈추지 않는 Chrome DevTools 디버거에 정말 짜증이났습니다. 디버거의 경우 쉼표로 연결된 변수 정의는 단일 문이며 여러 var 문은 디버거가 중지 할 수있는 여러 문입니다. 따라서 다음에서 다시 전환했습니다.

var a = doSomethingA,
    b = doSomethignB,
    c = doSomethingC;

에:

var a = doSomethingA;
var b = doSomethignB;
var c = doSomethingC;

이제 디버거 문제를 해결하는 이점은 말할 것도없고 두 번째 변형이 훨씬 더 깔끔하다는 것을 알게되었습니다.

축소자가 있기 때문에 "전선을 통한 코드 감소"인수는 설득력이 없습니다.

나는 var-per-variable표기법을 선호합니다 .

var a = 2
var b = 3

다른 comma-instead-of-another-var표기법에는 다음과 같은 세 가지 단점이 있기 때문입니다 .

1. 유지하기 어렵다
다음 코드를 고려하십시오.

var a = 1,
    b = mogrify(2),
    c = 3

하지만 mogrify는 무엇을합니까? b를 인쇄하여 알아 봅시다 :

var a = 1,
    b = mogrify(2),
    console.log(b)
    c = 3

물건을 부수다

2. 읽기 어렵다

줄 구걸의 var는 새로운 변수가 시작될 것임을 명확하게 전달합니다.

var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => {
        unicorn.legs.map((leg) => {
            leg.log('yes')
        })
    }).sort(),
    c = 3

도대체 c = 3거기서 뭐하는거야?

3. 일관성이 없음

이걸 고려하세요:

var a = 1,
    b = 2,
    c = 3

함께 var-per-variable모든 선언 동일한 구조를 따릅니다. 함께 comma-instead-of-another-var첫 번째 변수에 다른 사람보다 다른 방식으로 선언됩니다. 예를 들어, for 사이클 내에서 첫 번째 변수를 이동하기로 결정한 경우 선언 중간에 var를 추가해야합니다.

선호도 외에는 주목할만한 대부분의 프로젝트에서 var-per-variable표기법을 사용하는 것 같습니다.

나는 이것이 주로 개인적인 스타일의 문제라는 다른 답변자들의 의견에 동의합니다. 그러나 토론에 "신뢰할 수있는"의견을 가져 오기 위해 Douglas Crockford 가 인기있는 JSLint 도구 웹 사이트에서 다음과 같이 말합니다 .

그러나 JavaScript에는 블록 범위가 없기 때문에 함수의 모든 변수를 함수 맨 위에 선언하는 것이 현명합니다. 함수 당 하나의 var 문을 사용하는 것이 좋습니다. 이는 onevar옵션 으로 시행 할 수 있습니다 .

다른 사람들이 언급했듯이 스타일 선호도입니다. JSLintvar 는 함수 당 하나만 갖도록 지시 할 수 있습니다 ( "Good Parts"를 사용하는 경우). 따라서 JSLint를 사용하여 코드를 확인하는 경우 (나쁜 생각이 아닙니다. IMHO) 후자보다 첫 번째 형식을 더 많이 사용하게됩니다.

반면에 동일한 저자 인 Douglas Crockford 는 코딩 규칙 에서 각 변수를 고유 한 줄에 넣으라고 말합니다 . 따라서 varJSLint를 사용하는 경우 "All one per function"확인란 을 선택 취소 할 수 있습니다. ;-)

나는 눈에 띄는 차이가 없다고 생각한다. 내가 염려하는 한 그것은 단지 개인적인 취향 때문이다.

여러 var 선언이 싫어서 일반적으로 다음을 수행합니다.

var 
   one
  ,two
  ,three
  ,four
;

더 짧고 더 읽기 쉬우므로 var볼 소음이 없습니다 .

여기에 대한 참조가 없으므로 JavaScript의 기본 사양 인 ECMA-262 사양에 대한 링크가 있습니다. 해당 페이지의 문법은 다음과 같습니다.

12.2 Variable Statement

Syntax

  VariableStatement :
    var VariableDeclarationList ;

  VariableDeclarationList :
    VariableDeclaration
    VariableDeclarationList , VariableDeclaration

  VariableDeclarationListNoIn :
    VariableDeclarationNoIn
    VariableDeclarationListNoIn , VariableDeclarationNoIn

  VariableDeclaration :
    Identifier Initialiseropt

  VariableDeclarationNoIn :
    Identifier InitialiserNoInopt

  Initialiser :
    = AssignmentExpression
  InitialiserNoIn :
    = AssignmentExpressionNoIn

여기서 얻을 수있는 것은 쉼표를 사용하는 것입니까 아니면 중요하지 않습니다. 어느 쪽이든, 그것은 a로 파싱되고 VariableDeclaration정확히 동일하게 취급됩니다. 스크립트 엔진이 두 선언을 처리하는 방식에는 차이가 없어야합니다. 유일한 차이점은 다른 답변에서 이미 언급 한 것입니다. 더 많은 공간을 절약 VariableDeclarations하고 스크립트를 컴파일 할 때 모든 것을 찾기 위해 문법을 적용하는 데 걸리는 시간의 실질적으로 측정 할 수없는 차이입니다 .

첫 번째는 몇 개의 문자를 저장하므로 JS 파일 크기와 대역폭 소비 측면에서 매우 작게 절약됩니다. 이것이 눈에 띄는 유일한 시간은 극단적 인 경우입니다.

나는 두 번째 버전을 선호합니다 (각각 자체가 있습니다 var). 저는 C ++ 배경에서 왔기 때문이라고 생각합니다. C ++에서는 첫 번째 예제에서와 같이 변수를 선언 할 수 있지만 눈살을 찌푸립니다 (그런 식으로 포인터를 만들려고 할 때 쉽게 실수로 이어집니다).

자바 스크립트를 축소하는 경우 상당히 큰 이점이 있습니다.

var one, two, three, four;

된다

var a, b, c, d;

어디로

var one;
var two;
var three;
var four;

된다

var a;
var b;
var c;
var d;

이는 var시간이 지남에 따라 추가 될 수 있는 추가 세 개의 인스턴스입니다 .

"A List Apart"기사 시리즈 "Better Javascript Minification" Part 1 및 Part 2 참조