[기초]JavaScript 배열과 메서드(Array, Method)

JavaScript에서 배열(Array)은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 배열은 순서가 있는 컬렉션으로, 각 요소는 인덱스를 통해 접근할 수 있습니다. 배열은 다양한 메서드와 속성을 제공하여 데이터를 효과적으로 관리하고 조작할 수 있게 해 줍니다.

 

1. 배열 생성

JavaScript에서 배열을 생성하는 방법은 여러 가지가 있습니다.

• 리터럴 표기법

const arr = [1, 2, 3, 4, 5];

 

• Array 생성자 사용

const arr = new Array(1, 2, 3, 4, 5);

 

• 빈 배열 생성

const arr = [];

 

• 고정된 길이의 배열 생성:

const arr = new Array(5); // 길이 5의 빈 배열 [empty * 5]
const arr = new Array(5).fill(0) // [0, 0, 0, 0, 0]

 

 

2. 배열 요소 접근 및 수정

배열 요소는 인덱스를 통해 접근하며, 인덱스는 0부터 시작합니다.

• 접근

const arr = [1, 2, 3];
console.log(arr[0]); // 1
console.log(arr[2]); // 3

• 수정

arr[1] = 10;
console.log(arr); // [1, 10, 3]

 

 

3. 배열의 길이

배열의 길이는 length 속성으로 확인할 수 있습니다.

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

 

 

4. 배열 메서드 ( arr = [1, 2, 3, 4, 5] )

JavaScript 배열은 다양한 내장 메서드를 제공하여 배열을 조작할 수 있습니다.

(1) 배열 추가 및 제거 메서드 

• push(): 배열의 끝에 하나 이상의 요소를 추가합니다.

arr.push(6); // [1, 2, 3, 4, 5, 6]

 

• pop(): 배열의 마지막 요소를 제거하고 반환합니다.

const lastElement = arr.pop(); // 6, arr = [1, 2, 3, 4, 5]

 

• unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가합니다.

arr.unshift(0); // [0, 1, 2, 3, 4, 5]

 

• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.

const firstElement = arr.shift(); // 0, arr = [1, 2, 3, 4, 5]

 

• splice(): 배열의 특정 위치에 요소를 추가하거나 제거합니다.

let arr = [1, 2, 3, 4, 5]
arr.splice(2, 0, 10); // [1, 2, 10, 3, 4, 5] (2번 인덱스에 10을 추가)
arr.splice(2, 1); // [1, 2, 3, 4, 5] (2번 인덱스 요소 제거)
let deleted = arr.splice(3); // arr = [1, 2, 3] deleted = [4, 5](인덱스 3부터 끝까지의 요소 제거)

 

 

(2) 배열 탐색 및 확인 메서드

• indexOf(): 주어진 요소의 첫 번째 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.

const index = arr.indexOf(3); // 2

 

• includes(): 배열에 특정 요소가 포함되어 있는지 확인합니다.

const hasThree = arr.includes(3); // true

 

• find(): 주어진 테스트 함수를 만족하는 첫 번째 요소를 반환합니다.

const found = arr.find(element => element > 3); // 4

 

• findIndex(): 주어진 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다.

const index = arr.findIndex(element => element > 3); // 3

 

 

(3) 배열 순회 메서드

• forEach(): 배열의 각 요소에 대해 주어진 함수를 실행합니다.

arr.forEach(element => console.log(element));

 

• map(): 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 만듭니다.

const doubled = arr.map(element => element * 2); // [2, 4, 6, 8, 10]

 

• filter(): 주어진 테스트 함수를 만족하는 요소만 포함하는 새로운 배열을 만듭니다.

const filtered = arr.filter(element => element > 3); // [4, 5]

 

• reduce(): 배열의 각 요소에 대해 주어진 함수를 실행하여 단일 결과값을 만듭니다. 두 번째 인자로 초기값을 제공할 수 있습니다. 만약 초기값을 제공하지 않으면 배열의 첫 번째 요소가 초기값으로 사용됩니다.

const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 15

 

 

(4) 배열 정렬 메서드

• sort(): 배열을 정렬합니다.

let arr = [1, 5, 400,410,411];
arr.sort(); // [ 1, 400, 410, 411, 5 ](요소들을 문자열로 변환해 사전 순으로 정렬)
arr.sort((a, b) => a - b); // [ 1, 5, 400, 410, 411 ](숫자 오름차순)

 

• reverse(): 원본 배열 자체를 변경시키는 함수로, 배열의 순서를 반전시켜 반환합니다.

let arr = [1, 5, 400, 410, 411];
arr.reverse(); // [411, 410, 400, 5, 1]

 

 

(5) 배열 변환 메서드

• join(): 배열의 모든 요소를 문자열로 결합합니다.

const str = arr.join('-'); // "1-2-3-4-5"

 

• split(): 문자열을 배열로 분할합니다. (배열 메서드는 아니지만 관련이 있습니다)

const str = "1-2-3-4-5";
const arrFromStr = str.split('-'); // [1, 2, 3, 4, 5]

 

• slice(): 배열의 일부를 잘라내어 새로운 배열을 반환합니다.

const newArr = arr.slice(1, 3); // [2, 3]

 

 

5. 배열의 특성

• 가변 길이: 배열의 크기는 동적으로 늘어나거나 줄어들 수 있습니다.
• 객체로서의 배열: JavaScript 배열은 특수한 형태의 객체입니다. 숫자 인덱스가 키로 사용됩니다.
• 배열의 다른 타입: 배열은 동일한 배열 내에 다른 데이터 타입을 포함할 수 있습니다. 예를 들어, 문자열, 숫자, 객체, 배열 등 모든 종류의 데이터 타입을 포함할 수 있습니다.

 

6. 배열과 루프

배열은 다양한 루프 구조를 통해 순회할 수 있습니다.

• for 루프

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

 

• forEach 메서드

arr.forEach(element => {
  console.log(element);
});

 

• for...of루프

for...of루프
const arr = [1, 2, 3];
for (let element of arr) {
  console.log(element);
}
// 출력:
// 1
// 2
// 3

 

• for...in 루프(배열에선 권장되지 않음)

const arr = [1, 2, 3];
for (let index in arr) {
  console.log(index, arr[index]);
}
// 출력: 
// 0 1
// 1 2
// 2 3

 

 

요약

JavaScript 배열은 데이터를 관리하고 조작하기 위한 강력하고 유연한 도구입니다. 다양한 메서드와 속성을 제공하여 배열의 요소들을 쉽게 추가, 제거, 정렬, 탐색, 순회할 수 있습니다. 배열은 모든 데이터 타입을 저장할 수 있으며, 가변 길이를 가지기 때문에 매우 유연합니다. 다양한 배열 메서드를 이해하고 활용하면 효율적인 데이터 처리가 가능합니다.