배열

배열(Array)은 데이터들이 순서를 가지고 나열된 데이터 구조입니다. 배열 또한 변수에 저장할 수 있습니다. 배열은 다수의 데이터를 다루기 용이한 구조이며, 자주 쓰입니다. 이 문서에서는 배열을 선언하고 다루는 방법을 소개합니다.

배열이 필요한 이유

여러분이 학생 수가 20명인 반의 초등학교 교사라고 가정해봅시다. 만약 배열 없이 학생의 정보를 관리하고자 한다면 아래와 같이 코드를 작성하게 될겁니다.

let student1 = "철수";
let student2 = "영희";
// ...
let student20 = "민수";

이럴 경우 특정 학생의 이름을 출력하는 기능을 개발하는데 어려움을 겪을 것입니다.

if (msg.command === "student") {
    let student_num = Number(msg.args[0]);

    switch (student_num) {
        case 1:
            msg.reply(student1);
            break;
        case 2:
            msg.reply(student2);
            break;
        // ...
        case 20:
            msg.reply(student20);
            break;
    }
}

학생의 이름을 조회하는 기능을 위해 너무 긴 코드를 작성해야만 합니다. 또한, 전학생이 와 student21이 새롭게 추가될 경우 case 21: ...을 추가로 작성해야만 합니다. 즉, 독립된 변수에 데이터를 각각 저장하는 방식은 데이터를 관리하고 접근하는데 어려울 수 있습니다.

반면, 배열의 경우 데이터를 선언하는 방식부터 간결합니다.

let students = ["철수", "영희", /* ... */, "민수"];

그리고 데이터에 접근하는 방식 또한 우아합니다.

if (msg.command === "student") {
    let student_num = Number(msg.args[0]);

    msg.reply(students[student_num - 1]);
}

만약 전학생이 오더라도 당신은 배열에 전학생의 이름을 추가하기만 하면 됩니다. 추가적인 코드의 수정이 필요하지 않습니다. 배열은 나열된 형태의 데이터를 저장하고 접근하기 편리한 데이터 구조입니다.

배열 선언

배열을 선언할 땐 대괄호([])을 사용합니다.

let arr = [];

위의 코드는 대괄호 사이에 아무것도 없으므로 빈 배열을 선언합니다. 직접 배열의 초깃값을 정할 수 있습니다.

let fruits = ["apple", "banana", "orange"];

위의 코드는 3개의 문자열 데이터를 담은 배열을 선언합니다. JavaScript에서는 배열 안의 요소들이 같은 자료형일 필요가 없습니다.

let arr = [1, "hello", true];

전체 배열을 메시지로 전송할 수 있습니다.

let arr = [1, "hello", true];
msg.reply(arr); // 메시지: "1,hello,true"

접근/할당

배열의 특정 요소에 접근하고 할당 때 인덱스(Index)를 사용합니다. 인덱스는 컴퓨터가 배열의 순서를 세는 방법입니다. 우리가 순서를 세는 방법과 다른 점은, 우리는 순서를 1부터 세지만 컴퓨터는 순서를 0부터 센다는 것입니다. 그러므로 당신이 배열의 2번째 요소에 접근하고 싶다면 컴퓨터에겐 1번째 요소에 접근하라고 명령해야 합니다.

배열의 특정 요소에 접근하는 방법은 아래와 같이 대괄호에 인덱스를 적는 것입니다.

let fruits = ["apple", "banana", "orange"];
fruits[0]; // "apple"을 반환합니다.

배열의 특정 요소에 새로운 값을 할당하기 위해 = 연산자를 사용합니다.

let fruits = ["apple", "banana", "orange"];
fruits[1] = "grape";
msg.reply(fruits); // 메시지: "apple,grape,orange"

let arr = ["Seoul", "Incheon", "Busan", "Daejeon"];
arr.length; // 4

let arr = ["Seoul", "Incheon", "Busan", "Daejeon"];
arr[arr.length - 1]; // "Daejeon"

배열에 요소 추가하기

배열에 요소를 추가하는 방법은 다양합니다. 각각 배열의 처음, 마지막, 중간에 요소를 추가하는 방법이 존재합니다.

배열의 마지막에 요소를 추가하기 위해 아래와 같이 push() 메소드를 사용합니다.

let arr = ["apple", "banana", "orange"];
arr.push("grape");
msg.reply(arr); // 메시지: "apple,banana,orange,grape"

배열의 처음 부분에 요소를 추가할 땐 아래와 같이 unshift() 메소드를 사용합니다.

let arr = ["apple", "banana", "orange"];
arr.unshift("grape");
msg.reply(arr); // 메시지: "grape,apple,banana,orange"

배열의 중간 부분에 요소를 추가할 땐 splice() 메소드를 사용할 수 있습니다.

배열.splice(추가할_인덱스, 0, 추가할_데이터);

let arr = ["apple", "banana", "orange"];
arr.splice(1, 0, "grape"); // 1번째 인덱스에 "grape"를 추가합니다.
msg.reply(arr); // 메시지: "apple,grape,banana,orange"

배열의 요소 제거하기

배열의 요소를 제거하는 방법은 또한 다양합니다. 각각 배열의 처음, 마지막, 중간에 존재하는 요소를 제거하는 방법이 존재합니다.

배열의 마지막 요소를 제거하기 위해 아래와 같이 pop() 메소드를 사용합니다.

let arr = ["apple", "banana", "orange"];
arr.pop();
msg.reply(arr); // 메시지: "apple,banana"

배열의 처음 요소를 제거할 땐 아래와 같이 shift() 메소드를 사용합니다.

let arr = ["apple", "banana", "orange"];
arr.shift();
msg.reply(arr); // 메시지: "banana,orange"

배열의 중간에 존재하는 요소를 추가할 때 또한 splice() 메소드를 사용할 수 있습니다. 다만 추가할 때와 조금 다르게 사용합니다.

배열.splice(제거할_인덱스, 1);

let arr = ["apple", "banana", "orange"];
arr.splice(1, 1); // 1번째 인덱스에 존재하는 요소를 제거합니다.
msg.reply(arr); // 메시지: "apple,orange"