Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript 배열 완벽 가이드: 초보자를 위한 기초부터 활용까지

좋아하는 과일 목록을 만들어 볼까요? 목록 이름은 "fruit"로 정하고, 바나나, 멜론, 포도를 추가해 보겠습니다. 과일을 참 좋아하니까요! 쇼핑 목록 만들기 튜토리얼처럼 들리지만, 사실 우리는 방금 배열(array)을 하나 만든 것입니다.

이 가이드에서는 배열이 무엇인지, 어떻게 작동하는지, 그리고 코드에서 왜 사용해야 하는지 하나씩 살펴보겠습니다. 실전 예제도 함께 다루니, 글을 끝까지 읽고 나면 JavaScript 배열을 자유자재로 다루는 실력을 갖추게 될 것입니다.

배열이란 무엇인가?

배열은 데이터를 저장하는 객체입니다. 배열은 순서가 있는 항목들의 집합을 담으며, 0개 이상의 항목을 저장할 수 있습니다. 비슷한 값들을 하나의 변수에 저장할 수 있기 때문에 프로그래밍에서 매우 유용하게 활용됩니다.

예를 들어 좋아하는 과일을 나열할 때 열 개의 변수를 일일이 선언할 필요가 없습니다. 배열을 사용하면 좋아하는 과일을 모두 하나의 변수에 담을 수 있습니다.

다음 예제를 살펴보세요:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

여기서 우리는 "fruits"라는 배열을 만들었습니다. 이 배열은 세 개의 값을 저장하며, 각 값은 마트에서 구매하고 싶은 과일을 나타냅니다. 배열을 선언할 때는 항목 목록을 대괄호([])로 감싸면 됩니다.

배열 선언하기

배열을 선언하는 방법은 두 가지입니다. 가장 널리 사용되는 방법은 앞서 살펴본 것처럼 대괄호로 항목 목록을 감싸는 것입니다:

let berries = [
	"Strawberry",
	"Blueberry",
	"Gooseberry"
];

이 예제에서는 세 개의 값을 가진 배열을 선언했습니다. 또한 new 키워드를 사용하는 배열 생성자(Array Constructor)로도 배열을 선언할 수 있습니다:

let berries = new Array(
	"Strawberry",
	"Blueberry",
	"Gooseberry"
);

두 코드는 서로 다른 방식으로 동일한 배열을 만듭니다. 두 번째 예제에서는 소괄호(())를 사용했고, new Array 생성자를 반드시 사용해야 한다는 점에 주목하세요. 그렇기 때문에 대부분의 개발자는 첫 번째 방법을 선호합니다. 대괄호가 기억하기 쉽고 입력 속도도 빠르기 때문입니다.

배열에는 반드시 같은 데이터 타입만 넣어야 하는 것은 아닙니다. 하나의 배열에 여러 가지 타입의 데이터를 함께 저장할 수도 있습니다:

let berries = [
	"Strawberry",
	1.50,
	true
];

이 배열은 문자열, 숫자, 불리언(boolean)이라는 세 가지 서로 다른 타입의 데이터를 저장합니다. 이제 배열을 선언하는 방법을 익혔으니, 배열의 내용에 접근하는 방법을 알아볼 차례입니다.

배열 읽기

배열의 값을 읽을 수 없다면 큰 의미가 없겠죠. 그래서 인덱싱(indexing)이 존재합니다. 인덱싱은 리스트와 같은 반복 가능한(iterable) 객체에서 개별 항목에 접근하는 방법입니다.

배열의 모든 요소에는 고유한 인덱스 번호가 부여됩니다. 인덱스는 0부터 시작하며, 이 번호로 배열의 개별 항목에 접근할 수 있습니다. 아까의 "fruits" 배열을 기억하시나요?

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

이 배열에 할당된 인덱스 값은 다음과 같습니다:

  • 0: Banana
  • 1: Grapes
  • 2: Melon

이 번호를 사용하면 목록의 개별 항목에 접근할 수 있습니다. 예를 들어 인덱스 1에 어떤 과일이 있는지 확인하고 싶다면, 배열 이름 뒤에 대괄호를 붙여 인덱스 값을 지정하면 됩니다:

fruits[1];

이 코드는 "Grapes"를 반환합니다. 인덱스 1 위치에 "Grapes"가 저장되어 있기 때문입니다. 0을 전달하면 "Banana"가 반환됩니다. 반면 존재하지 않는 항목에 접근하려고 하면 "undefined"가 반환됩니다:

fruits[10];

결과: undefined. 인덱싱이 특히 빛을 발하는 순간은 배열의 항목들을 반복 처리할 때입니다. 배열의 모든 과일을 콘솔에 출력하고 싶다면 다음과 같이 for 루프를 사용할 수 있습니다:

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

이 코드는 다음을 출력합니다:

Banana
Grapes
Melon

이 코드는 목록의 모든 항목을 순회하며 각 항목을 콘솔에 출력합니다. 여기서 length 속성도 함께 사용했는데, 이 속성은 배열의 길이를 반환합니다.

배열에 항목 추가하기

대부분의 경우 배열을 처음 선언한 후에 새로운 값을 추가하고 싶어질 것입니다. 이때 push() 메서드를 사용하면 됩니다.

앗, 과일 목록에 "딸기(Strawberry)"를 추가하는 것을 잊었네요! 걱정 마세요. push() 메서드로 언제든 추가할 수 있습니다:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

이 코드를 실행하면 배열은 다음과 같이 됩니다:

BananaGrapesMelonStrawberry
0123

반면 배열의 맨 앞에 데이터를 추가하려면 unshift()를 사용합니다. 딸기가 쇼핑 목록에서 워낙 중요해서 맨 앞에 오기를 원한다면:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.unshift("Strawberry");
console.log(fruits);

원래의 "fruits" 목록은 다음과 같이 바뀝니다:

StrawberryBananaGrapesMelon
0123

배열에서 항목 제거하기

알고 보니 집에 이미 멜론이 있다고 해봅시다. 굳이 멜론을 하나 더 살 필요는 없겠죠? 멜론이 목록 끝에 있으므로 제거하는 방법은 두 가지입니다:

  • splice(): 인덱스 번호를 기준으로 요소를 제거합니다.
  • pop(): 배열의 마지막 요소를 제거합니다.

splice() 예제를 살펴보겠습니다:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.splice(2, 1);
console.log(fruits);

이 코드는 다음을 반환합니다:

Banana
Grapes

splice()는 두 개의 매개변수를 받습니다. 첫 번째는 배열에서 제거를 시작할 인덱스 번호이고, 두 번째는 제거할 항목의 개수입니다. 위 예제에서는 인덱스 2에 있는 항목 하나를 제거하고 싶었기 때문에 "2, 1"을 지정했습니다.

pop()은 매개변수를 받지 않습니다. 단순히 목록의 마지막 항목을 제거할 뿐입니다:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.pop();
console.log(fruits);

이 코드는 다음을 반환합니다:

Banana
Grapes

또한 shift()를 사용하면 목록의 맨 앞 항목을 제거할 수 있습니다:

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.shift();
console.log(fruits);

이 코드는 다음을 반환합니다:

Grapes
Melon

정리하면, push()와 unshift()는 배열에 항목을 추가하고, pop()과 shift()는 배열에서 항목을 제거합니다. splice() 메서드 역시 인덱스 값을 기준으로 항목을 제거하는 데 활용할 수 있습니다.

배열의 항목 변경하기

바나나는 맛있는 과일이지만 크기가 커서 출출할 때 간식으로 먹기엔 부담스러울 때가 있습니다. 미니 바나나(baby banana)가 훨씬 먹기 편하죠.

이제 "fruits" 목록에서 일반 바나나 대신 미니 바나나를 사도록 변경해 보겠습니다. 일반 변수와 마찬가지로 할당 연산자(=)를 사용하면 됩니다:

fruits[0] = "Baby bananas";
console.log(fruits);

이 코드는 다음을 반환합니다:

Baby bananas
Grapes
Melon

우리는 인덱스 0 위치의 항목을 "Baby bananas" 값으로 수정했습니다. 이런 변경에는 특별한 메서드가 필요하지 않습니다. 할당 연산자만으로 배열의 값을 손쉽게 변경할 수 있습니다.

마무리

지금까지 JavaScript 배열의 기본기를 살펴봤습니다. 아직 배울 것이 더 남아 있지만, 그것이야말로 프로그래밍이 재미있는 이유입니다. 언제나 새로운 도전 과제가 기다리고 있으니까요. 어쨌든 오늘은 제가 좋아하는 과일들도 함께 소개해 드렸네요. 사실 블랙커런트도 정말 좋아하는데, 이번 튜토리얼에서는 언급하지 못했네요.

이제 여러분도 전문가처럼 JavaScript 배열을 다룰 준비가 되었습니다!