Javascript로 배열을 선언 할 때 따라야 할 모범 사례는 무엇입니까?


176

새 배열을 선언해야 할 때이 표기법을 사용합니다

var arr = new Array();

그러나 온라인 (예 : jsbin) 을 테스트 할 때 "배열 리터럴 표기법 [] 사용"이라는 경고 메시지가 표시됩니다.

생성자를 사용하지 않는 이유를 찾지 못했습니다. 어떤 방법으로 사용하는 것보다 덜 효율적 []입니까? 아니면 나쁜 습관입니까?

var arr = [];대신 사용해야 할 이유가 var arr = new Array();있습니까?


5
둘 다 괜찮습니다. 전송 중에 일부 바이트 만 저장합니다.
Sirko

13
실제로 차이점이 있습니다. 이 게시물을 참조하십시오 : stackoverflow.com/q/2280285/921204
techfoobar

참고 : 배열을 덮어 쓴 경우에만 차이점이 있습니다 .
crdx

일부 브라우저에서는 @apkd 성능에 ​​큰 차이가 있습니다.
Alnitak

그럴 수 있지. 나는 연결된 질문에서 그것을 보지 못했습니다.
crdx

답변:


260

대부분 사람들이 사용 var a = []하기 때문에 더글러스 크록 포드는 이렇게 말한다 .

그의 이유는 다음과 같은 비 직관적이고 일관되지 않은 행동을 포함합니다 new Array().

var a = new Array(5);     // an array pre-sized to 5 elements long
var b = new Array(5, 10); // an array with two elements in it

미리 지정된 숫자 요소가 하나만new Array() 있는 배열을 만들 수있는 방법이 없습니다 .

[]실제로 사용하는 것이 더 효율적 이고 안전합니다 ! Array생성자 를 덮어 써서 이상하게 만들 수는 있지만의 동작을 덮어 쓸 수는 없습니다 [].

개인적으로 나는 항상 구문을 []사용하고 마찬가지로 항상 {}대신 구문을 사용 합니다 new Object().


5
"[]의 동작을 덮어 쓸 수 없습니다." 이거 확실하니? 적어도 일부 구현에서는 []에 영향을 미치는 Array 생성자와 {}에 영향을주는 Object 생성자를 덮어 쓸 수 있다고 생각했습니다.
Random832

11
@ Random832는 구형 브라우저에서는 가능하지만 ES5 호환 구현에서는 그렇지 않습니다. 사양 에는 당시의 []값이 아닌 내부 생성자 를 호출 한다고 Array.constructor나와 있습니다.
Alnitak

5
보너스 : 배열 리터럴은 Array생성자를 사용하여 새 배열을 만드는 것보다 훨씬 빠릅니다 . jsperf.com/new-array
Mathias Bynens

@MathiasBynens 가끔.
OrangeDog

Ew @ []는 내부 생성자 때문에 다르게 작동합니다. 불일치는 절약하는 것보다 더 많은 혼란을 야기합니다. 편집 : 아, 보안 문제. 알겠습니다
Erik Reppen

48

한 가지 중요한 차이점은이 []것입니다 항상 반면, 새로운 배열을 인스턴스화 new Array할 수있는 다른 개체를 만드는 납치 .

(function () {
    "use strict";
    var foo,
        bar;
    //don't do this, it's a bad idea
    function Array() {
        alert('foo');
    }
    foo = new Array();
    bar = [];
}());​

내 예제 코드에서는 Array함수를 나머지 문서 범위에서 숨겨 두었 습니다. 그러나 이런 종류의 문제가 발생하면 코드가 잘 닫히지 않았을 가능성이 높습니다. 찾기가 어려울 수 있습니다.

면책 조항 : Array생성자 를 납치하는 것은 좋지 않습니다 .


7
IIRC에서는 이전 브라우저에서 Array 생성자를 재정의하면 리터럴이 잘못 해석됩니다. 얼마 전 Gmail CSRF 취약점 이 있었는데 , 배열 생성자를 재정의하는 것과 관련된 새로운 브라우저는이 정확한 이유로 리터럴에 대한 오버로드를 무시합니다.
hugomg

반대 면책 조항 : 그러나 수년에 걸쳐 Array 생성자를 향상시키는 것은 매우 유용하고 유용했습니다.
Erik Reppen

26

유지 관리를 위해 []

배열 리터럴은 대부분의 개발자가 사용하므로 예측하기 쉽습니다. 대부분의 배열 사용법은 리터럴을 사용하며 다른 개발자가 사용하는 코드와 코드를 일치시키는 데 가치가 있습니다.

빈 배열의 경우 []

var ns = [];
var names = [ 'john', 'brian' ];

여기 에 표시된 것처럼 , 비어 있고 알려진 몇 개의 요소에 리터럴을 사용하는 것은 Array 생성자보다 더 뚱뚱합니다.

알려진 크기의 배열의 경우 new Array(size)

크기를 알면 Array 생성자를 사용하면 성능이 크게 향상됩니다. 그러나 그것은 또한 이미 모든 값을 채우는 '정의되지 않은'배열을 처리해야한다는 것을 의미합니다.

여기에 표시된대로

// fill an array with 100 numbers
var ns = new Array( 100 );
for ( var i = 0; i < 100; i++ ) {
    ns[i] = i;
}

이것은 매우 작은 배열 에도 작동합니다 .


12

아니요, 실제로 빈 배열에 다른 표기법을 사용할 이유가 없습니다.

그러나 대부분의 브라우저 x = [];Constructor를 호출하는 것보다 약간 더 나은 성능을 보여줍니다 .

특정 크기와 배열을 작성해야하는 경우, 종류의 필요 사용에 x = new Array(10);10 개 배열을 만들 것입니다 예를 들어, undefined슬롯.


@Alnitak : 이미 언급했듯이 매우 직관적이고 간결하지 않습니다.
jAndy

7
성능을 비교하기 위해 jsperf를 구성했습니다 : jsperf.com/array-constructor-versus-literal . 적어도 우분투의 Chrome 20에서는 리터럴이 생성자보다 두 배 빠릅니다.
Steven


jAndy, 왜 JavaScript에서 "10 개의 빈 슬롯"을 가진 배열을 원하십니까? 실제로는 다음과 같은 작업을 수행 할 수 있습니다. var arr = []; arr [9] = "오메가"; 1. JS의 배열은 완전히 동적이며 원하는 인덱스를 참조 할 수 있으며 "정의되지 않음"이됩니다. 마치 마치 말하는 것처럼 사실입니다. var arr = new Array (10); arr [23]; 2. 어레이의 길이는 사이에 정의되지 않은 슬롯 수에 관계없이 그 안에 어떤 것이 든 가장 높은 값으로 설정됩니다. 또는 직접 설정할 수 있습니다. [] 암을 치료할 수는 없지만 조금 더 좋습니다.
Norguard

7
  • var arr = []은 배열 / 객체 리터럴을 사용합니다
  • var arr = new Array ()는 배열 / 객체 생성자를 사용합니다

생성자를 호출 할 필요가 없기 때문에 배열이나 객체를 정의하는 가장 빠른 방법은 문자 그대로입니다.

var arr1 = new Array(1, 2, 3, 4);
var arr2 = [1, 2, 3, 4];

alert(arr1[0]); // 1
alert(arr2[0]); // 1

var arr3 = new Array(200);
var arr4 = [200];

alert(arr3[0]); // 'undefined'
alert(arr4[0]); // 200

2
참고로 무대 뒤에서 var arr = [];논리적으로 생성자를 사용합니다. 그것은 단지이야 항상 내장 된 배열 생성자, 오히려 현재 이름으로 가고 어떤 기능보다 Array.
cHao

6

둘 다 맞습니다. 하지만 대부분의 사람들은var a = []

JavaScript에서 배열을 선언하는 세 가지 방법

방법 1 : JavaScript "new"키워드를 사용하여 배열을 메모리에 명시 적으로 선언하여 배열을 메모리에 인스턴스화 (즉, 생성하여 사용 가능하게 함) 할 수 있습니다.

// Declare an array (using the array constructor)
var arlene1 = new Array();
var arlene2 = new Array("First element", "Second", "Last");

방법 2 : 우리는 대체 방법을 사용하여 배열을 선언합니다.

// Declare an array (using literal notation)
var arlene1 = [];
var arlene2 = ["First element", "Second", "Last"];

방법 3 : JavaScript를 사용하면 특정 메서드를 호출하여 간접적으로 배열을 만들 수도 있습니다.

// Create an array from a method's return value
var carter = "I-learn-JavaScript";
var arlene3 = carter.split("-");

4

생성자가 인수로 취할 수있는 한계가 있습니다.

대부분의 시스템에서 한계는 2 ^ 16 (2 바이트)입니다.

var myFreshArr = new Array(0,1,2,3 ..... 65536);

오류가 발생합니다 (너무 많은 인수 ....)

리터럴 []을 사용하면 그러한 문제가 없습니다.

큰 배열에 신경 쓰지 않는다면 원하는 것을 사용할 수 있다고 생각합니다.


2
사람이 70,000 개의 값으로 미리 채워진 배열을 합리적으로 만들려는 위치의 예를들 수 있습니까? 비록로드가 끝나지 않은 것처럼 보였던 끔찍한 웹 사이트들 중 일부를 설명하고 있습니다.
John O

2
John O, 나는 IATA (공항) 코드, 항공사, 여행사, 리조트 등을 갖춘 2D / 3D 배열의 배열과 관련하여 SCARY JSON 구현을 보았습니다. 하나의 배열로. .... 1MB 이상의 JSON 다운로드로 울고 싶습니다.
Norguard

4
var array = [ 1, 2, 3, 4];

설탕이다

var array = new Array(1, 2, 3, 4);

소금이다


5
커피 나 파스타에 어디서 사용할 수 있습니까?
Aristos

구문 설탕과 소금
linquize

3

new Array()모호 하기 때문 입니다. 이들은 올바른 생성자입니다.

// Using brackets
[element0, element1, ..., elementN]

// Using new AND a list of elements
new Array(element0, element1, ..., elementN)

// Using new AND an integer specifying the array length
new Array(arrayLength)
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.