JavaScript에서 여러 변수 선언

JavaScript에서는 다음과 같이 여러 변수를 선언 할 수 있습니다.

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

... 또는 이렇게 :

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

한 방법이 다른 방법보다 낫거나 빠릅니까?

첫 번째 방법은 유지 관리가 더 쉽습니다. 각 선언은 한 줄에있는 단일 명령문이므로 선언을 쉽게 추가, 제거 및 재정렬 할 수 있습니다.

두 번째 방법으로 var키워드와 세미콜론이 포함되어 있기 때문에 첫 번째 또는 마지막 선언을 제거하는 것은 성가신 일 입니다. 새 선언을 추가 할 때마다 이전 줄의 세미콜론을 쉼표로 변경해야합니다.

유지 관리 성 외에도 첫 번째 방법은 우발적 글로벌 변수 생성 가능성을 제거합니다.

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

두 번째 방법은 덜 관대하지만 :

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

조직 마다 범위 당 하나의 var명령문 을 사용하는 것이 일반적 입니다. 모든 "범위"가 유사한 패턴을 따르는 방식으로 코드를 더 읽기 쉽게 만듭니다. 또한 엔진은 어쨌든 모두를 "상승"합니다. 따라서 선언을 함께 유지하면 실제로 더 밀접하게 일어날 일을 모방합니다.

이런 식으로 할 때 훨씬 더 읽기 쉽습니다.

var hey = 23;
var hi = 3;
var howdy 4;

그러나 이런 식으로 공간과 코드 줄이 줄어 듭니다.

var hey=23,hi=3,howdy=4;

공간 절약에 이상적이지만 JavaScript 압축기가이를 처리하도록합니다.

아마도 이런 식으로

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

첫 번째 또는 마지막 변수를 변경할 때를 제외하고 유지 관리 및 읽기가 쉽습니다.

개인적인 취향의 문제 일뿐입니다. 공백을 제거하면 두 번째 형식으로 저장된 몇 바이트 외에는이 두 가지 방법 사이에 차이가 없습니다.

ECMAScript6 는 꽤 좋은 작동하는 구조 지정 할당 을 도입했습니다 .

[a, b] = [1, 2] a같을 것이다 1와 b동일 할 것이다 2.

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

다음보다 더 읽기 쉽습니다.

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

그러나 그들은 같은 일을합니다.

ES6 Destructuring assignment 사용 : 배열의 값 또는 객체의 속성을 별개의 변수로 압축 해제합니다.

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

쉼표에 대한 나의 유일한 필수 사용법은 for 루프입니다.

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

나는 이것이 JavaScript에서 괜찮은지 찾아보기 위해 갔다.

그것이 작동하는 것을 보았을지라도, n이 함수의 로컬인지 여부에 대한 의문이 남았습니다.

이것은 n이 로컬인지 확인합니다.

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

잠시 동안 나는 언어 사이를 전환 확신하지 못했습니다.

둘 다 유효하지만 두 번째 방법을 사용하면 경험이 부족한 개발자는 var 문을 어디에나 배치하고 게양 문제를 일으키는 것을 권장하지 않습니다. 함수의 맨 위에 함수 당 하나의 var 만 있으면 코드 전체를 디버그하기가 더 쉽습니다. 이는 변수가 선언 된 행이 원하는대로 명시 적이 지 않음을 의미 할 수 있습니다.

트레이드 오프가 가치가 있다고 생각합니다. 개발자가 원하는 위치에 'var'을 떨어 뜨리는 것을 의미한다면 말입니다.

사람들은 JSLint에 대해 불평 할 수도 있지만, 많은 문제는 언어 문제를 해결하는 것이 아니라 코더의 나쁜 습관을 수정하고 코드의 문제를 예방하는 데 중점을 둡니다. 따라서:

"블록 범위가있는 언어의 경우 일반적으로 처음 사용하는 사이트에서 변수를 선언하는 것이 좋습니다. 그러나 JavaScript에는 블록 범위가 없으므로 함수 상단에 함수의 모든 변수를 선언하는 것이 더 현명합니다. 함수 당 하나의 var 문을 사용하는 것이 좋습니다. " -http: //www.jslint.com/lint.html#scope

개인 취향의 문제라고 생각합니다. 나는 다음과 같은 방법으로 그것을 선호합니다 :

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

단일 명령문 버전 (단일 var ) 을 피하는 또 다른 이유 는 디버깅입니다. 예외가 던져 경우 어떤 과제 라인 스택 트레이스 쇼 단지 한 줄의.

쉼표 구문으로 10 개의 변수를 정의한 경우 어느 변수가 범인인지 직접 알 수 없습니다.

개별 성명서 버전은 이러한 모호성을 겪지 않습니다.

"Cohesion over Coupling"개념은 객체 / 모듈 / 함수보다 더 일반적으로 적용될 수 있습니다. 이 상황에서도 사용할 수 있습니다.

OP가 제안한 두 번째 예는 모든 변수를 동일한 문에 결합했기 때문에 한 줄을 가져 와서 물건을 깰 필요없이 다른 곳으로 옮길 수 없습니다 (높은 결합). 그가 준 첫 번째 예는 변수 할당을 서로 독립적으로 만듭니다 (낮은 커플 링).

낮은 결합은 종종 체계적인 컴퓨터 시스템과 좋은 디자인의 징조이며, 높은 응집력과 결합 될 때 높은 가독성과 유지 보수성의 일반적인 목표를 지원합니다.”

http://en.wikipedia.org/wiki/Coupling_(computer_programming)

첫 번째를 선택하십시오.

낡은 게시물이지만 동료 Google 직원을 위해 약간의 관점을 추가해야합니다.

이와 같은 작은 형식으로 유지 관리 문제를 쉽게 극복 할 수 있습니다.

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

개인 취향에 따라이 서식을 엄격하게 사용합니다. 물론 단일 선언이나 단순히 작품을 요약하는 경우이 형식을 건너 뜁니다.

ES6 사용을 시작하기 전에 단일 var 선언을 사용한 접근 방식이 좋거나 나쁘지 않다고 'use strict'생각합니다. :

1. 이제 우리는 두 가지 새로운 종류의 변수를 var가지게되었습니다. const실제로 필요할 때까지 어디에서나 사용하는 것이 좋습니다 let. 따라서 코드 중간에 코드가 포함 된 변수 선언이 포함되는 경우가 많으며, 블록 범위 지정으로 인해 작은 변경이있을 경우 블록간에 변수를 이동하는 경우가 많습니다. 여러 줄로 선언하는 것이 더 편하다고 생각합니다.

2. ES6 구문이 더욱 다양해졌으며, 소멸자, 템플릿 문자열, 화살표 기능 및 선택적 어설 션이 있습니다. 단일 var 선언으로 모든 기능을 많이 사용하면 가독성이 떨어집니다.

내 의견으로는 읽기가 어려운 첫 번째 방법 (여러 변수)이 가장 좋을 것이라고 생각합니다 (Knockout을 사용하는 응용 프로그램에서).

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });