[JavaScript] 배열

배열

배열이란, 같은 자료들을 담는 자료 구조 중 하나이다. 변수에 여러 개의 데이터를 그룹화하여 저장해 놓은 상태이며, 하나의 배열에는 동일한 자료형을 나열하여 사용한다.

---

1차 배열

배열의 필요성

학급 성적표를 보고 각 학생별로 총점과 평균을 구해야한다고 가정했을 때, 성적표가 아래와 같다면 3명씩 3과목이므로 총 9개의 변수가 필요할 것이다. 만약, 30명의 학생에 대한 20과목에 대한 점수라고 가정한다면 생성해야하는 변수가 더 증가하므로 프로그램은 좀 더 복잡해지게 된다.
배열은 이러한 경우를 해소하기 위한 JavaScript 자료 구조 종류 중 하나로 변수에 여러 개의 데이터를 그룹화하여 저장해 놓은 상태를 말한다.

이름	국어	영어	수학
철수	92	81	77
영희	72	95	98
민혁	80	86	84

var kor1 = 92;
var kor2 = 71;
var kor3 = 80;
// ... 생략 ...
var math2 = 84;
var math3 = 98;

배열 생성

1. 배열의 선언

JavaScript는 변수의 특성이 값이 할당될 때 결정되기 때문에 선언은 일반 변수와 동일하며, 할당하기 전까지는 숫자, 문자열, 배열 등의 구분이 없다.

let myArr;

2. 배열의 할당

대괄호([]) 안에 포함할 값들을 데이터 타입의 구분 없이 콤마(,)로 구분하여 나열한다. 선언과 할당이 나누어진 경우, const로 선언할 수 없다. 

myArr = [1, 2, 3.14, true, false, "hello", "world"];

3. 선언과 할당의 통합 (권장)

선언과 할당을 한 번에 하는 방법이며, 이 방법의 사용을 가장 권장한다.

let myArr = [1, 2, 3, 5, 7];

4. Array 클래스를 사용한 할당

new Array(...) 형식으로 생성하며, 권장하지 않는 방법이다. 배열을 생성할 때 () 안에 숫자 값 하나만 명시되는 경우, 숫자 값만큼의 빈 칸을 갖는 배열이 생성되며, 그렇게 생성된 배열의 각 칸은 모두 정의되지 않은 undefined 값이 할당된다.

let newArr1 = new Array("hello", "world", 1, 2, 3, true, false);

// () 안에 숫자 값 하나만 명시되는 경우
let newArr2 = new Array(50);	// 50칸의 빈 배열 생성

배열의 원소에 접근

배열의 각 원소는 0부터 시작하는 일련번호를 부여받는데, 이를 배열의 인덱스라고 한다. 배열의 원소에 접근할 때에는 인덱스 번호를 활용하여 접근해야 하며, 존재하지 않는 원소의 값을 출력하고자 할 경우에는 정의되어 있지 않기 때문에 undefined으로 출력되게 된다.

let myArr = [1, 2, 3.14, true, false, "hello", "world"];
console.log(myArr[0]);
console.log(myArr[2]);
console.log(myArr[4]);
console.log(myArr[6]);


/** 결과 **/
1
3.14
false
world

배열의 크기

배열이름.length 는 배열의 칸 수를 반환하며, 배열의 인덱스는 항상 0부터 크기-1까지 1씩 증가하며 존재한다.

/** 5칸으로 구성된 빈 배열 생성 **/
const  myArr = new Array(5);
console.log(myArr);


/** 배열의 길이 **/
const len = myArr.length;
console.log("배열의 길이는 %d", len);



/** 결과 **/
[ <5 empty items> ]
배열의 길이는 5

반복문을 통한 활용

배열의 인덱스는 0부터 (배열이름.length-1)로, 순차적으로 증가한다는 특성이 있다. 반복문의 초기식을 0으로 할당하고, 조건식은 배열의 길이보다 작은 동안에 증감식을 1씩 증가로 설정한 반복문과 함께 사용하는 것이 일반적이다.

/** 최대 값을 구하는 예제 **/

// 원소값을 무작위로 갖는 배열
const data = [5, 2, 7, 9, 2];

// 비교를 위해 배열의 첫 번째 원소 복사
let max = data[0];

// 1번째 이후 원소부터 마지막 원소까지 반복
for (let i = 1; i < data.length; i++) {
    console.log("max=%d, data[%d]=%d", max, i, data[i]);

    // max가 data의 i번째보다 작다면 i번째 원소를 max에 복사
    // 비교식의 부등호 방향만 반대로 지정하면 최소값 구하기 가능
    if (max < data[i]) {
        console.log(">> max에 " + data[i] + "를 복사");
        max = data[i];
    }
}

console.log("---------");
console.log("최대값 = %d", max);



/** 결과 **/
max=5, data[1]=2
max=5, data[2]=7
>> max에 7를 복사
max=7, data[3]=9
>> max에 9를 복사
max=9, data[4]=2
---------
최대값 = 9

• 반복 횟수를 구하기 위한 연산
  1. 원소가 5개일 경우의 반복 횟수 => 2회
     1. 5/2를 연산
     2. 연산 결과에서 parseInt() 명령을 통해 나머지를 버릴 수 있다.
        1. parseInt(실수): 소수점 아랠르 버리고 정수 부분만 반환하는 명령어
  2. 원소가 6개일 경우의 반복 횟수: 3회
     1. 배열의 길이/2 만큼 반복 처리

/** 역순 배치 **/

const data = [1, 5, 2, 4, 3];
console.log(data);

const p = parseInt(data.length/2);

for (let i = 0; i < p; i++) {
    // i번째 원소의 반대쪽에 위치한 원소의 인덱스
    const k = data.length - i - 1;

    const tmp = data[i];
    data[i] = data[k];
    data[k] = tmp;
}

console.log(data);	// [ 3, 4, 2, 5, 1 ]

• SWAP 처리
  1. 변수 a와 변수 b의 값을 서로 교환하기 위해 또다른 변수 c를 만들어 c에 a의 값을 대입한다.
  2. a에 b의 값을 대입 후, b에 c의 값을 대입한다.

let a = 1;
let b = 2;
let c = 0;

c = a;
a = b;
b = c;

---

2차 배열

1차 배열의 각 원소가 다른 배열로 구성된 형태로, 열의 개념만 존재하는 1차 배열에 행의 개념이 추가된 형태이다.

2차 배열 생성

[]를 사용하여 1차원을 표현하고, 그 안에 다시 []를 콤마로 구분하여 1차원을 구성한다.

/** myArr라는 배열 안에 3개의 배열이 0, 1, 2번째 위치에 포함 **/
const myarr = [ [ ... ], [...] ];


/** 아래와 같은 2차 배열은 선언이 불가능 */
const myArr = [][][];

2차 배열 원소에 접근

2행 3열인 경우, 행의 인덱스는 0부터 1까지, 열의 인덱스는 0부터 2까지 존재하게 된다. 배열에 저장된 원소에 접근하기 위해서는 변수 이름 뒤에 행, 열의 순서로 인덱스를 명시해야 한다.

const myArr = [
    [1, 2, 3],
    [4, 5, 6]
];

console.log(myArr[0][1]);	// 2

2차 배열의 행, 열 크기

1. 행의 크기

배열의 길이가 행을 의미하므로, 2차 배열에 대한 길이를 직접 구하면 행의 크기를 알 수 있다.

const myArr = [
    [1, 2, 3],
    [4, 5, 6]
];

console.log(myArr.length);	// 2

2. 열의 크기

2차 배열의 모든 행에 대한 열 크기가 항상 동일하다는 보장은 없다. 그렇기 때문에 열의 크기는 각 행마다 개별적으로 구해야 한다.

const myArr = [
    [1, 2, 3],
    [4, 5, 6]
];

// 배열의 각 행 단위로 열 조회 가능
console.log(myArr[0].length); // 0번째 행의 열 조회
console.log(myArr[1].length); // 1번째 행의 열 조회


/** 결과 **/
3
3

가변 배열

원소로서 포함되는 각 배열의 크기가 동일하지 않은 배열을 말한다. 항상 배열의 모든 행이 동일한 열로 구성되는 것이 아니며, 모든 줄의 칸 수가 같다는 보장 또한 없다. 가변 배열이 자주 등장하지는 않으며, 대부분의 경우가 모든 행마다 열 크기가 동일한 경우이다.

const a = [1, 3, 5, 7, 9];
const b = [2, 4, 6];

const data = [a, b];
console.log(data); // [[1, 3, 5, 7, 9], [2, 4, 6]]

for (let i=0; i<data.length; i++) {
    console.log(data[i]);
		// [1, 3, 5, 7, 9]
		// [2, 4, 6]

    for (let j=0; j<data[i].length; j++) {
        console.log(data[i][j]);
				// 각 배열의 원소들 출력
    }
};

반복문을 통한 활용

1. 배열의 모든 원소 스캔

반복문으로 스캔하기 위해서는 중첩 반복문을 사용해야 한다. 이때, 부모 반복문은 행에 대해 관여하고, 자식 반복문은 열에 대해 관여하게 된다.

2. for-of

for-of는 배열 값을 순환하는 함수로 배열 원소를 추출한다.

1. 1차 배열 탐색
   • 원소의 합, 최대 값을 구할 때 최적화되어 있다.
   • item이 몇 번째인지 알 수 없기 때문에 정렬, 두 개의 배열 비교, 역순 배치 등에서는 사용하지 못 한다.
   • 원소만 추출하여 처리하는 logic에서 사용하기 좋다.
2. 2차 배열 탐색
   • 정렬, 두 개의 배열 비교, 역순 배치 등에서 사용 가능하다.

/** 1차 배열의 탐색 **/
const data = [4, 5, 2, 1, 3];
for (const item of data) { // 배열 원소 출력
    console.log(item);
}

/** 결과**/
4
5
2
1
3



/** 2차 배열의 탐색 **/
const myArr = [
    [1, 2, 3],
    [4, 5, 6]
];

for (const item of myArr) { // 배열의 한 행 출력
    console.log(item);

    for (const sub of item) { // 배열의 원소 출력
        console.log(sub);
    }
};

/** 결과 **/
[ 1, 2, 3 ]
1
2
3
[ 4, 5, 6 ]
4
5
6