5. 자바스크립트 배열 기초

자바스크립트 배열 기초

지금까지 변수와 데이터 타입, 조건문과 반복문, 함수를 배웠다면, 이번엔 데이터를 리스트 형태로 다루는 배열을 배워볼 거다. 배열은 자바스크립트에서 여러 값을 한 번에 관리할 수 있는 강력한 도구로, 프로그래밍에서 자주 쓰이는 데이터 구조다. 배열을 잘 익히면 데이터를 효율적으로 저장하고 처리하는 방법을 터득할 수 있다.

내가 처음 코딩을 배울 때 배열을 몰라서 변수 여러 개를 만들어서 관리했는데, 배열을 알게 되니까 코드가 훨씬 간단해졌다. 이번 글에선 배열의 정의와 생성 방법, 기본적인 사용법, 배열 메서드, 반복문과의 결합을 다룰 거다. 천천히 따라오면서 콘솔이나 HTML 파일에서 직접 실행해보면 배열의 유용함을 실감할 수 있을 거다. 배열은 단순히 값을 나열하는 데 그치지 않고, 데이터를 조작하고 변환하는 데 핵심적인 역할을 한다.

앞서 배운 함수와 조건문, 반복문을 배열과 함께 쓰면 더 강력한 코드를 짤 수 있다. 예를 들어, 학생 점수 목록을 배열로 저장하고, 함수로 평균을 계산하거나 조건에 따라 특정 점수를 골라내는 작업을 쉽게 할 수 있다. 이번 포스팅에서 배열의 기초부터 실습까지 상세히 다루며, 자바스크립트 기본기를 한 단계 더 끌어올려보자.

배열이란 무엇인가?

배열(Array)은 여러 개의 값을 순서대로 저장하는 데이터 구조다. 자바스크립트에서 배열은 변수 하나에 여러 값을 담을 수 있게 해줘서, 데이터를 리스트처럼 관리할 때 쓰인다. 배열의 각 값은 인덱스(Index)라는 숫자로 접근할 수 있는데, 인덱스는 0부터 시작한다. 배열을 쓰면 반복 작업이나 데이터 집합을 다룰 때 매우 편리하다.

예를 들어, 학생 세 명의 이름을 각각 변수로 저장하려면 let name1 = "홍길동";, let name2 = "이순신";, let name3 = "김유신"; 이렇게 해야 한다. 하지만 배열을 쓰면:

let names = ["홍길동", "이순신", "김유신"];

이렇게 한 줄로 끝난다. 내가 처음 배열을 배울 때 이 간단함에 감탄했는데, 나중에 보니 배열은 단순히 값을 모으는 데서 끝나지 않고 다양한 연산과 조작을 가능하게 해줬다. 자바스크립트에서 배열은 객체의 일종이지만, 순서가 있는 리스트처럼 동작해서 다른 언어의 배열과 비슷하게 느껴진다.

배열은 데이터를 효율적으로 관리하고, 반복문이나 함수와 결합해서 복잡한 작업을 쉽게 처리할 수 있게 해준다. 실무에선 사용자 목록, 제품 정보, 점수 데이터 같은 걸 배열로 다루는 경우가 많다.

배열 생성 방법

자바스크립트에서 배열을 만드는 방법은 두 가지가 주로 쓰인다: 배열 리터럴과 Array 생성자다. 각각의 특징과 사용법을 보자.

1. 배열 리터럴(Array Literal)

가장 간단하고 많이 쓰이는 방법으로, 대괄호 []를 사용한다:

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // ["사과", "바나나", "오렌지"]

배열 안에 값을 쉼표로 구분해서 넣으면 된다. 빈 배열도 만들 수 있다:

let emptyArray = [];
console.log(emptyArray); // []

내가 처음 배열을 쓸 때 이 방식이 직관적이라 금방 익숙해졌다. 배열 리터럴은 간단하고 읽기 쉬워서 추천한다.

2. Array 생성자

Array 객체를 사용해서 배열을 만들 수도 있다:

let numbers = new Array(1, 2, 3);
console.log(numbers); // [1, 2, 3]

또는 길이만 지정해서 빈 배열을 만들 수 있다:

let empty = new Array(3);
console.log(empty); // [undefined, undefined, undefined]

이건 길이 3인 배열을 만들지만 값은 채워지지 않는다. 내가 처음 이걸 썼을 때 undefined가 나와서 당황했는데, 주로 동적으로 채울 때 유용하다.

배열 기본 사용법

배열을 생성했으면 값을 읽고 쓰는 법을 알아야 한다.

인덱스로 접근

배열의 각 요소는 인덱스로 접근한다:

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"

인덱스는 0부터 시작하니까 첫 번째 요소는 [0], 두 번째는 [1]이다. 값을 바꿀 수도 있다:

fruits[1] = "포도";
console.log(fruits); // ["사과", "포도", "오렌지"]

내가 처음 인덱스 쓸 때 1부터 시작인 줄 알고 헷갈렸는데, 0부터라는 걸 기억하면 된다.

길이 확인

length 속성으로 배열의 길이를 알 수 있다:

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits.length); // 3

길이를 이용해서 마지막 요소도 쉽게 접근할 수 있다:

console.log(fruits[fruits.length - 1]); // "오렌지"

배열 길이는 동적이라 요소를 추가하거나 빼면 자동으로 바뀐다.

배열 메서드

자바스크립트 배열은 다양한 메서드를 제공해서 데이터를 쉽게 조작할 수 있다. 몇 가지 기본 메서드를 보자.

1. 요소 추가/제거

- push: 배열 끝에 요소 추가

let fruits = ["사과"];
fruits.push("바나나");
console.log(fruits); // ["사과", "바나나"]

- pop: 배열 끝 요소 제거

fruits.pop();
console.log(fruits); // ["사과"]

- unshift: 배열 앞에 요소 추가

fruits.unshift("오렌지");
console.log(fruits); // ["오렌지", "사과"]

- shift: 배열 앞 요소 제거

fruits.shift();
console.log(fruits); // ["사과"]

내가 처음 push와 pop을 썼을 때 배열이 스택처럼 동작하는 느낌이 재밌었다.

2. 배열 탐색과 변환

- indexOf: 요소의 인덱스 찾기

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits.indexOf("바나나")); // 1
console.log(fruits.indexOf("포도")); // -1 (없으면 -1)

- includes: 요소 포함 여부 확인

console.log(fruits.includes("오렌지")); // true
console.log(fruits.includes("포도")); // false

- join: 배열을 문자열로 변환

console.log(fruits.join(", ")); // "사과, 바나나, 오렌지"

내가 indexOf를 처음 썼을 때 -1이 나와서 당황했는데, 없는 걸 찾으면 -1을 반환한다는 걸 알면 유용하다.

배열과 반복문

배열은 반복문과 함께 쓰면 진가를 발휘한다.

for 문으로 순회

let fruits = ["사과", "바나나", "오렌지"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 출력: "사과", "바나나", "오렌지"

for...of 문

ES6에서 추가된 더 간단한 방법:

for (let fruit of fruits) {
    console.log(fruit);
}
// 출력: "사과", "바나나", "오렌지"

내가 처음 for...of를 썼을 때 인덱스 없이 바로 값을 가져오는 게 편리해서 자주 쓰게 됐다.

실습 예제

배열을 활용한 실습을 해보자:

function getAverage(scores) {
    let sum = 0;
    for (let score of scores) {
        sum += score;
    }
    return sum / scores.length;
}
let scores = [85, 90, 95, 88];
console.log(getAverage(scores)); // 89.5

let names = ["홍길동", "이순신", "김유신"];
for (let i = 0; i < names.length; i++) {
    if (names[i].includes("신")) {
        console.log(names[i] + "은 '신'이 포함돼요!");
    }
}
// 출력: "이순신은 '신'이 포함돼요!", "김유신은 '신'이 포함돼요!"

평균 계산과 이름 필터링을 해봤다. 배열과 함수, 반복문을 결합하니 실용적인 코드가 된다.

주의할 점

인덱스는 0부터 시작하니 헷갈리지 않게 주의하자. length는 동적이니까 배열 수정 시 확인해야 한다. 메서드마다 배열을 변경하는지 여부를 잘 알아야 한다.

결론

이번 포스팅에서 자바스크립트 배열의 기초를 다뤘다. 배열 생성, 기본 사용법, 메서드, 반복문 활용까지 배웠으니 이제 데이터를 리스트로 다룰 수 있다. 다음 글에선 배열 메서드를 더 깊이 파고들어 고급 활용법을 알아보자.