[JavaScript] 배열

JavaScript 배열

• JavaScript 배열에 대해서 알아보자 !!
• JavaScript 에서 배열은 동적으로 배열의 크기를 조절할 수 있으며, 모든 유형의 변수, 함수 그리고 객체도 담을 수 있어 유연하게 사용할 수 있지만 제대로 사용해야 할 것이다 !!

배열을 생성하는 여러 방법들

• 아래에 리터럴을 사용하는 방법과 Array() 생성자 함수를 사용하여 생성하는 방법에 대해서 작성하였다. 리터럴을 사용해도 내부적으로 Array() 생성자 함수를 사용하여 생성하므로 기능상의 차이는 없으며, 배열 리터럴이 조금 더 간소화된 문법이다.

• 자바스크립트에서는 배열 사용시 배열 리터럴([])을 사용할 것을 권장한다고 한다 !!

배열 리터럴 대괄호([ ])를 사용하여 만드는 방법

1. 빈 배열 생성

// 배열 생성 ( 빈 배열 )
var arr = []; 

arr[0] = 'zero';
arr[1] = 'one';
arr[2] = 'tow';

2. 배열생성 ( 초기값 할당 )

// 배열 생성 ( 초기 값 할당 )
var arr = ['zero', 'one', 'tow']; 

3. 배열 생성 ( 배열 크기 지정 )

// 배열 생성 (배열 크기 지정)
// 쉼표 개수만큼 크기가 지정됨
var arr = [,,,]; 

Array() 생성자 함수로 배열 생성하는 방법

1. 배열 생성 ( 빈 배열 )

// 배열 생성 (빈 배열)
var arr = new Array(); 

arr[0] = 'zero';
arr[1] = 'one';
arr[2] = 'tow';

2. 배열 생성 ( 초기값 할당 )

// 배열 생성 (초기 값 할당)
var arr = new Array('zero', 'one', 'tow'); 

3. 배열 생성 ( 배열 크기 지정 )

// 배열 생성 (배열 크기 지정)
// 원소가 1개이고 숫자인 경우 배열 크기로 사용됨
var arr = new Array(3); 

• JavaScript의 배열은 다른 언어들과 다른점이 2가지 있다.
  • 1. 배열 내부의 데이터 타입이 서로 다를 수 있다.

let arr = [1234, 'test', true];

• 2. 배열의 크기는 동적으로 변경될 수 있다.

var arr = [1234, 'test', true];

// 배열의 크기를 임의로 변경( 3 -> 5 )
// arr[3], arr[4]는 값이 할당 되지 않았기 때문에 undefined
arr.length = 5; 

// 새로운 배열을 추가하면 크기는 자동으로 변경 ( 5 -> 6 )      
arr[5] = 'apple'; 

// 새로운 배열 추가로 크기 변경 ( 6 -> 7 )       
arr.push('banana');  

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 출력 결과
1234
test
true
undefined
undefined
apple
banana

JavaScript 2차원 배열

JavaScript에서 2차원 배열이란 ?

• 자바스크립트에서 진정한 2차원 배열이란 없다.
  • let arr [ ][ ] ; 이와 같이 한번에 2차원 배열 선언이 불가능하다.
• 약간의 트릭을 통해 2차원 배열과 비슷한 배열을 만들 수 있는 것이다.

2차원 배열을 생성하는 방법들

1. 초기값을 할당하여 배열 생성

// 자바에서 arr[5][2] 처럼 자바스크립트에서는 아래와 같이 생성한다.
var arr = [['a','b'], ['c', 'd'], ['e', 'f'], ['g', 'h'], ['i', 'j']]; 

2. 반복문을 사용하여 빈 배열 생성

// arr[5][2]
var arr = new Array(5);

for (var i = 0; i < arr.length; i++) {
    arr[i] = new Array(2);
}

3. 2차원 배열 생성 함수를 만들어서 사용

function create2DArray(rows, columns) {
    var arr = new Array(rows);
    for (var i = 0; i < rows; i++) {
        arr[i] = new Array(columns);
    }
    return arr;
}

// arr[5][2]
var arr = create2DArray(5, 2);

4. Array 객체에 배열 생성 함수를 추가하여 사용

Array.matrix = function (m, n, initial) {
    var a, i, j, mat = [];
    for (i = 0; i < m; i += 1) {
        a = [];
        for (j = 0; j < n; j += 1) {
            a[j] = initial;
        }
        mat[i] = a;
    }
    return mat;
};

// matrix('행', '열', '기본값')
var arr = Array.matrix(5, 2, 0);

5. ES6 를 지원하는 최신 브라우저라면 사용 가능한 방법

// arr[5][2] (빈 배열 생성)
const arr1 = Array.from(Array(5), () => new Array(2)

// arr[5][2] (null로 초기화하여 생성)
const arr2 = Array.from(Array(5), () => Array(2).fill(null))