JavaScript에서 여러 변수 선언

JavaScript에서 여러 변수 선언

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

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

...혹은 다음과 같습니다.

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

어떤 방법이 다른 방법보다 더 좋습니까?/빠른가?

첫 번째 방법은 유지하기가 더 쉽습니다.각 선언은 한 줄에1개의 스테이트먼트이므로 선언을 쉽게 추가, 삭제 및 정렬할 수 있습니다.

에서는 첫 이 '언제'에서.이는 첫 번째 선언 또는 마지막 선언이 다음 명령에서 시작되기 때문입니다.var키워드와 세미콜론으로 각각 끝납니다.새 선언을 추가할 때마다 마지막 오래된 행의 세미콜론을 쉼표로 대체해야 합니다.

유지관리성 외에도 첫 번째 방법은 사고 전역 변수 생성 가능성을 배제합니다.

(function () {
var variable1 = "Hello, World!" // Semicolon is missed out accidentally
var variable2 = "Testing..."; // Still a local variable
var variable3 = 42;
}());

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

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

이렇게 하면 훨씬 읽기 쉬워집니다.

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

그러나 이러한 방식으로 공간 및 코드 행이 적게 소요됩니다.

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

공간을 절약하는 데 이상적일 수 있지만 JavaScript 압축기로 처리하십시오.

ECMAScript 2015는 상당히 효과적인 파괴적인 과제를 도입했습니다.

[a, b] = [1, 2]

a1 ★★★★★★★★★★★★★★★★★」b2.

일반적으로 조직에는 범위당 하나의 스테이트먼트를 사용합니다.모든 "범위"가 유사한 패턴을 따르기 때문에 코드를 더 잘 읽을 수 있습니다.게다가 엔진은 어쨌든 그들을 모두 정상으로 "호이스트"합니다.따라서 선언문을 함께 보관하는 것은 실제로 일어날 일을 더 가깝게 모방하는 것입니다.

그건 그냥 개인적인 취향의 문제일 뿐이야.이 두 가지 방법에는 공백 공간을 제거하면 두 번째 폼에서 절약되는 몇 바이트를 제외하고는 차이가 없습니다.

아마 이렇게

var variable1 = "Hello, World!"
, variable2 = 2
, variable3 = "How are you doing?"
, variable4 = 42;

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

ES6 파괴 할당을 사용합니다.어레이의 값 또는 객체의 속성을 개별 변수로 언팩합니다.

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

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

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

가독성:

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

하지만 그들은 같은 일을 한다.

싱글 스테이트먼트버전(single var)을 회피하는 또 다른 이유는 디버깅입니다.할당 행 중 하나에서 예외가 발생하면 스택트레이스는 1행만 표시합니다.

쉼표 구문을 사용하여 정의된 변수가 10개인 경우 어떤 변수가 원인인지 직접 알 수 없습니다.

개개의 스테이트먼트버전에서는, 이러한 애매함이 발생하지 않습니다.

콤마의 유일한 필수 용도는 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가 1개만 있는 경우 함수 상단에 있는 경우 코드 전체를 디버깅하는 것이 더 쉽습니다.이는 변수가 선언된 선이 일부에서 원하는 것처럼 명확하지 않음을 의미합니다.

만약 개발자가 원하는 곳에 'var'를 놓는 것을 그만두는다면, 트레이드오프가 가치가 있다고 생각합니다.

저도 JSLint에 대해 불평할 수 있지만, 그 대부분은 언어의 문제를 고치는 것이 아니라, 코더의 나쁜 습관을 고치고, 따라서 그들이 쓰는 코드에 문제가 생기는 것을 막기 위한 것입니다.그 때문에,

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

개인적인 취향의 문제인 것 같아요.다음과 같은 방법으로 작업하는 것이 좋습니다.

   var /* Variables */
            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 Variables */;

유지보수성 문제는 다음과 같은 간단한 포맷으로 쉽게 해결할 수 있습니다.

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

이 포맷은 어디까지나 개인 취향에 따라 사용합니다.물론, 나는 단일 선언이나, 그것이 단순히 일을 해내는 것에 대해서는 이 형식을 생략한다.

모두가 말한 것처럼, 그것은 대체로 선호도나 가독성이지만, 나는 다른 사람들이 이러한 관점에서 생각을 공유하는 것을 보지 못했기 때문에, 나는 그 줄에 대해 코멘트를 던질 것이다.

이 질문에 대한 답변은 주로 어떤 변수를 설정하는지, 그리고 그 변수들이 어떻게 관련되어 있는지에 달려 있다고 생각합니다.작성 중인 변수가 관련이 있는지 여부에 따라 일관성을 유지하려고 합니다.기본 설정은 일반적으로 다음과 같습니다.

관련이 없는 변수의 경우

나중에 쉽게 이동할 수 있도록 한 줄로 표시하며, 개인적으로 관련 없는 항목을 신고하지 않습니다.

const unrelatedVar1 = 1;
const unrelatedVar2 = 2;
const unrelatedVar3 = 3;

관련 사항(유틸리티)

새로운 변수를 작성하는 경우 블록으로 선언합니다.이것은 속성이 함께 속함을 암시합니다.

const
  x = 1,
  y = 2,
  z = 3
;

// or
const x=1, y=2, z=3;

// or if I'm going to pass these params to other functions/methods
const someCoordinate = {
  x = 1,
  y = 2,
  z = 3
};

이것은 디컨스트럭처링과 더 일치한다고 생각합니다.

const {x,y,z} = someCoordinate;

(난 이런 거 안 할 거야) 이런 거 하면 투박하게 느껴질 텐데

const x = someCoordiante.x;
const y = someCoordiante.y;
const z = someCoordiante.z;

관련 사항(시공)

동일한 생성자를 사용하여 여러 변수를 만드는 경우, 종종 함께 그룹화합니다. 개인적으로는 더 읽기 쉽다는 것을 알게 됩니다.

(평소 이런 거 잘 안 하는데) 이런 거 말고

const stooge1 = Person("moe");
const stooge2 = Person("curly");
const stooge3 = Person("larry");

보통은 이렇게 합니다.

const [stooge1, stooge2, stooge3] = ["moe", "curly", "larry"].map(Person);

저는 보통 입력 파라미터가 충분히 길어서 읽을 수 없게 되면 분할합니다.

용도 엄격에 대한 다른 사람들의 의견에 동의합니다.

"커플링 위의 접착" 개념은 단순한 객체/모듈/함수보다 더 일반적으로 적용될 수 있습니다.다음과 같은 경우에도 사용할 수 있습니다.

OP가 제안한 두 번째 예에서는 모든 변수를 동일한 문장으로 결합하므로, 두 선 중 하나를 분리하지 않고 다른 곳으로 이동할 수 없습니다(높은 결합).첫 번째 예제에서는 변수 할당을 서로 독립적으로 만듭니다(낮은 결합).

커플링 시작:

낮은 결합은 종종 잘 구성된 컴퓨터 시스템과 좋은 설계의 표시이며, 높은 응집력과 결합하면 높은 가독성과 유지 보수성이라는 일반적인 목표를 뒷받침합니다.

그러니까 첫 번째 걸 고르세요.

ES6를 사용하기 전에는 단일 var 선언을 사용한 접근방식은 좋지도 나쁘지도 않았다고 생각합니다(linters와 linters가 있는 경우).'use strict'정말 입맛에 맞는 거였어요.하지만 지금은 상황이 바뀌었다.복수행 선언에 찬성하는 제 생각은 다음과 같습니다.

1. 이제 두 가지 새로운 변수가 생겼습니다.var쓸모없게 되었다.사용하는 것이 좋습니다.const정말 필요할 때까지 모든 곳에서let코드 중간에는 변수 선언이 할당되어 있는 경우가 많고, 블록 스코핑에 의해 작은 변경에 대비하여 블록 간에 변수를 이동하는 경우가 많습니다.나는 여러 줄의 선언으로 그것을 하는 것이 더 편리하다고 생각한다.

2. ES6 구문은 더욱 다양해졌고 파괴자, 템플릿 문자열, 화살표 함수 및 옵션 할당이 이루어졌습니다.이러한 모든 기능을 단일 변수 선언과 함께 많이 사용하면 가독성이 저하됩니다.

첫 번째 방법(복수 변수)이 최선이라고 생각합니다.그렇지 않으면 (Knockout을 사용하는 어플리케이션에서) 이렇게 됩니다.JS)는 제 의견으로는 읽기 어렵습니다.

    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;
        });

c배경을 가진 사람은 반드시 두 번째 방법을 사용할 것이다.

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

위의 방법은 c언어에 더 가깝다.

언급URL : https://stackoverflow.com/questions/694102/declaring-multiple-variables-in-javascript