JavaScript Array

안녕하세요. 오늘은 자바스크립트 배열(Array)에 대해 알아볼게요.

 

 

 

배열(Array)

 

배열은 여러 개의 데이터를 하나의 변수로 순서대로 저장할 수 있는 자료 구조예요.

 

자바스크립트의 배열은 다양한 타입의 데이터를 한 배열 안에 저장할 수 있고,

 

배열의 크기가 고정되지 않아 동적으로 변경이 가능해요.

 

+) 인덱스(index)는 0부터 시작하고, 각 데이터를 요소(element)라고 불러요

 

 

 

배열 생성 방법

 

1. 리터럴(Literal) 방식

 

리터럴 방식은 가장 일반적으로 사용하는 방식이에요.

 

대괄호[] 안에 요소들을 쉼표(,)로 구분해 나열하고, 장점은 간결하고 직관적이에요.

let fruits = ['사과', '오렌지', '망고'];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, '문자', true, undefined, null, [1, 2, 3]];

 

 

2. Array 생성자 방식

 

newArray()를 사용해 배열을 생성할 수도 있어요.

let arr1 = new Array(3); // 크기가 3인 빈 배열 생성
let arr2 = new Array('사과', '오렌지', '망고'); // 요소를 직접 지정

// new Array(3)은 [empty × 3] 형태로 비어 있는 배열을 생성합니다.

 

 

3. 배열 요소 접근 및 수정

 

배열의 각 요소는 인덱스(index)로 접근해요.

const sports = ['축구', '야구', '농구'];

console.log(sports[0]); // '축구'
console.log(sports[2]); // '농구'

// 요소 수정
sports[2] = 'basketball';
console.log(sports); // ['축구', '야구', 'basketball']

const로 선언된 배열이라도 배열 자체 재할당은 불가하지만, 배열 내부 요소의 값 변경은 가능해요.

 

 

4. 배열의 길이 확인 및 변경

 

length 속성을 이용해 배열의 길이를 확인할 수 있어요.

console.log(sports.length); // 3

sports.length = 6;
console.log(sports); 
// [ '축구', '야구', 'basketball', <3 empty items> ]

JS 배열은 동적 배열이므로, length를 변경하면 빈 공간이 자동 생성돼요.

 

 

5. 배열 탐색 함수

 

1) indexOf(요소): 처음으로 등정하는 인덱스 번호 반환

let snacks = ['칸쵸', '초코송이', '포테토칩', '초코송이'];
console.log(snacks.indexOf('초코송이')); // 1
console.log(snacks.indexOf('딸기송이')); // -1 (없음)

 

2) lastIndexOf(요소): 뒤에서부터 탐색해 첫 번째 인덱스 반환

console.log(snacks.lastIndexOf('초코송이')); // 3

 

3) includes(요소): 해당 요소가 존재하면 true, 없으면 false

console.log(snacks.includes('포테토칩')); // true

 

 

6. 배열 조작 메서드

(1) push() — 끝에 요소 추가
(2) pop() — 끝에서 요소 제거
(3) unshift() — 앞에 요소 추가
(4) shift() — 앞에서 요소 제거

let fruits = ['Apple', 'Banana'];

fruits.push('Cherry');   // ['Apple', 'Banana', 'Cherry']
fruits.pop();            // ['Apple', 'Banana']

fruits.unshift('Mango'); // ['Mango', 'Apple', 'Banana']
fruits.shift();          // ['Apple', 'Banana']

(5) splice(시작인덱스, 삭제개수, 추가요소...)
추가: 삭제 개수를 0으로 주면 요소 추가
삭제: 삭제 개수를 지정하면 해당 개수만큼 요소 제거

let fruits2 = ['mango', 'orange', 'Banana'];

// 추가
fruits2.splice(1, 0, 'Strawberry', 'Coconut');
console.log(fruits2);
// ['mango', 'Strawberry', 'Coconut', 'orange', 'Banana']

// 삭제
let removed = fruits2.splice(1, 2);
console.log(removed); // ['Strawberry', 'Coconut']

push와 unshift는 수정된 배열의 길이를 반환, pop과 shift는 삭제된 요소를 반환해요.

 

 

7. 배열 정렬

(1) sort() — 오름차순 정렬
(2) reverse() — 내림차순 정렬

let fruits3 = ['Banana', 'mango', 'orange'];
console.log(fruits3.sort());   // ['Banana', 'mango', 'orange']
console.log(fruits3.reverse()); // ['orange', 'mango', 'Banana']

sort()는 문자 기준으로 정렬되므로, 숫자를 정렬할 땐 비교 함수를 추가해야 해요.

 

 

8. 배열 ↔ 문자열 변환

 

1) join(구분자): 배열을 문자열로 결합

let fruitValues = ['사과', '바나나', '망고'];
console.log(fruitValues.join());     // 사과,바나나,망고
console.log(fruitValues.join(' - ')); // 사과 - 바나나 - 망고

 

2) split(구분자): 문자열을 배열로 분리

let str = '사과,바나나,망고';
console.log(str.split(',')); // ['사과', '바나나', '망고']

 

9. 다차원 배열 (배열 안의 배열)

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9, 10]
];

console.log(matrix[2]);    // [7, 8, 9, 10]
console.log(matrix[2][3]); // 10

이처럼 배열 안에 또 다른 배열을 넣으면 2차원 배열, 더 깊게 넣으면 다차원 배열을 표현할 수 있어요.

 

 

 

다음은 배열의 정리 요약표예요.

구분	메서드 / 속성	설명	반환값
길이	.length	배열의 길이 확인	숫자
추가	.push()	끝에 요소 추가	새 길이
삭제	.pop()	끝 요소 제거	제거된 요소
추가	.unshift()	앞에 요소 추가	새 길이
삭제	.shift()	앞 요소 제거	제거된 요소
추가/삭제	.splice()	지정 위치에 추가·삭제	제거된 요소
탐색	.indexOf()	앞에서부터 검색	인덱스 번호
탐색	.lastIndexOf()	뒤에서부터 검색	인덱스 번호
포함여부	.includes()	존재 여부 확인	true / false
정렬	.sort()	오름차순 정렬	정렬된 배열
반전	.reverse()	순서 반전	반전된 배열
문자열 변환	.join()	배열 → 문자열	문자열
배열 변환	.split()	문자열 → 배열	배열

 

 

 

여기까지 자바스크립트 배열에 알아봤는데요.

 

여러 데이터를 한 곳에 모아 순서대로 관리할 수 있는데 상자 같은 개념이라는 것을 알게 됐어요.