자바스크립트 배열 선언 및 사용법 총정리

1. 배열의 개념과 선언 방법

배열(Array)은 여러 개의 값을 하나의 변수에 저장하기 위한 데이터 구조입니다. 배열은 순서가 있는 리스트 형태로, 각 값은 인덱스(index)를 통해 접근할 수 있습니다. 자바스크립트에서 배열은 객체 타입으로 간주되며, 배열의 크기나 요소의 타입을 미리 지정할 필요가 없습니다. 배열은 동적으로 크기가 조절되며, 어떤 타입의 값이라도 포함할 수 있습니다.

배열의 선언 방법

자바스크립트에서 배열을 선언하는 방법은 다음과 같습니다.

1. 리터럴 표기법

   const arr = [값1, 값2, 값3];

   위의 코드는 arr이라는 변수에 [값1, 값2, 값3]이라는 배열을 할당하는 것입니다.

2. new 키워드

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

   new 키워드를 사용하여 배열 객체를 생성하고, 값을 넣어서 배열을 초기화할 수도 있습니다.

3. 빈 배열

   const arr = [];

   빈 배열을 선언할 수도 있으며, 이후에 요소를 추가하여 배열을 채울 수 있습니다.

4. Array 생성자 함수

   const arr = Array(값의개수);

   요소의 개수를 넣어 Array 생성자 함수를 호출하여 빈 배열을 만들 수도 있습니다.

이렇게 배열을 선언하고 초기화했다면, 해당 배열에 접근하여 값을 확인하거나 수정할 수 있습니다. 다음 항목에서 배열에 값을 추가, 수정, 삭제하는 방법에 대해 알아보겠습니다.

2. 배열의 요소 추가, 수정, 삭제

배열에 요소를 추가, 수정, 삭제하는 방법은 다음과 같습니다.

요소 추가

배열에 요소를 추가할 때는 다음과 같은 방법을 사용할 수 있습니다.

1. push 메서드: 배열의 끝에 하나 이상의 요소를 추가합니다.

   const arr = [1, 2, 3];
   arr.push(4);
   // arr은 [1, 2, 3, 4]가 됨

2. length 프로퍼티: 배열의 길이를 사용하여 특정 인덱스에 요소를 추가합니다.

   const arr = [1, 2, 3];
   arr[arr.length] = 4;
   // arr은 [1, 2, 3, 4]가 됨

3. concat 메서드: 두 개 이상의 배열을 합쳐서 새 배열을 생성합니다.

   const arr1 = [1, 2];
   const arr2 = [3, 4];
   const newArr = arr1.concat(arr2);
   // newArr은 [1, 2, 3, 4]가 됨

요소 수정

배열의 특정 인덱스에 있는 요소를 수정하는 방법은 다음과 같습니다.

const arr = [1, 2, 3];
arr[1] = 4;
// arr은 [1, 4, 3]이 됨

배열의 인덱스를 사용하여 해당 위치에 새로운 값을 할당하면 됩니다.

요소 삭제

배열에서 요소를 삭제할 때는 다음과 같은 방법을 사용할 수 있습니다.

1. pop 메서드: 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다.

   const arr = [1, 2, 3];
   const removed = arr.pop();
   // arr은 [1, 2]가 되고, removed는 3이 됨

2. splice 메서드: 주어진 인덱스에서부터 특정 개수의 요소를 제거합니다.

   const arr = [1, 2, 3, 4];
   arr.splice(1, 2); // 인덱스 1부터 2개의 요소를 제거
   // arr은 [1, 4]가 됨

이렇게 배열에 요소를 추가, 수정, 삭제하여 배열을 변경할 수 있습니다. 배열의 길이와 배열에 접근하는 방법은 다음 항목에서 알아보겠습니다.

3. 배열의 길이와 접근 방법

배열의 길이를 확인하고, 배열에 접근하는 방법을 알아보겠습니다.

배열의 길이 확인

배열의 길이는 length 프로퍼티를 통해 확인할 수 있습니다.

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

length 프로퍼티는 배열의 마지막 인덱스보다 1 큰 값을 가지게 됩니다. 이를 이용하여 배열의 요소를 반복하는 등 다양한 작업에 활용할 수 있습니다.

배열에 접근하기

배열에 있는 각 요소에 접근하기 위해서는 인덱스를 사용합니다. 자바스크립트의 배열은 0부터 시작하는 인덱스를 가지며, 음수 인덱스를 통해 배열의 끝에서부터 요소에 접근할 수도 있습니다.

const arr = [10, 20, 30];

console.log(arr[0]); // 10
console.log(arr[1]); // 20
console.log(arr[-1]); // 30 (맨 뒤 요소)
console.log(arr[-2]); // 20 (맨 뒤에서 두 번째 요소)

배열의 인덱스를 사용하여 해당 위치의 요소에 접근할 수 있습니다. 만약 존재하지 않는 인덱스를 사용하면 undefined를 반환합니다.

배열 순회하기

배열의 각 요소에 접근하기 위해 반복문을 사용할 수 있습니다. 가장 일반적인 방법인 for 루프를 사용하여 배열을 순회할 수 있습니다.

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

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

위의 예제에서 i를 이용해 배열의 요소에 접근할 수 있습니다. for...of문이나 forEach메서드를 사용하여 배열을 순회할 수도 있습니다. 이렇게 배열의 요소에 접근하여 값을 확인하거나 수정할 수 있습니다.

배열의 길이와 접근 방법은 배열을 다루는 중요한 개념입니다. 다음 항목에서는 배열의 다양한 메서드와 배열을 조작하는 방법에 대해 알아보겠습니다.

4. 배열 반복문과 배열 메서드

배열을 반복하거나 조작하기 위해 사용되는 배열 반복문과 배열 메서드에 대해 알아보겠습니다.

배열 반복문

배열을 반복하는 가장 일반적인 방법은 for 루프를 사용하는 것입니다.

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

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

위의 코드는 배열의 각 요소에 접근하기 위해 반복문을 사용하는 예시입니다. for 루프의 조건문을 통해 배열의 길이를 확인하고, 배열의 각 요소에 접근할 수 있습니다.

ES6부터는 배열을 순회하는 더 간편한 방법으로 for...of문과 forEach메서드를 사용할 수 있습니다.

for...of문

for...of문을 사용하여 배열을 순회할 수 있습니다.

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

for (const element of arr) {
  console.log(element);
}

for...of문은 반복 시 배열의 각 요소를 순서대로 element 변수에 할당하며, 요소에 순차적으로 접근합니다.

forEach 메서드

forEach메서드를 사용하여 배열을 순회할 수도 있습니다.

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

arr.forEach(function(element) {
  console.log(element);
});

forEach메서드는 배열의 각 요소에 대해 지정된 함수를 호출합니다. 이 함수는 요소를 받아서 처리할 수 있습니다. forEach메서드는 또한 인덱스와 배열 자체 인수도 제공할 수 있습니다.

배열 메서드

배열을 조작하고 변경하기 위해 다양한 배열 메서드를 사용할 수 있습니다. 몇 가지 일반적인 배열 메서드는 다음과 같습니다.

push 메서드

배열의 끝에 요소를 추가하는 push메서드는 다음과 같이 사용됩니다.

const arr = [1, 2, 3];
arr.push(4);
// arr은 [1, 2, 3, 4]가 됨

pop 메서드

배열의 마지막 요소를 제거하고 반환하는 pop메서드는 다음과 같이 사용됩니다.

const arr = [1, 2, 3, 4];
const removed = arr.pop();
// arr은 [1, 2, 3]가 되고, removed는 4가 됨

splice 메서드

지정된 인덱스에서부터 요소를 제거하거나 삽입하는 splice메서드는 다음과 같이 사용됩니다.

const arr = [1, 2, 3, 4];
arr.splice(1, 2); // 인덱스 1부터 2개의 요소를 제거
// arr은 [1, 4]가 됨

concat 메서드

두 개 이상의 배열을 합쳐서 새로운 배열을 생성하는 concat메서드는 다음과 같이 사용됩니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
// newArr은 [1, 2, 3, 4]가 됨

map 메서드

배열의 각 요소에 함수를 적용하여 새로운 배열을 생성하는 map메서드는 다음과 같이 사용됩니다.

const arr = [1, 2, 3];
const squared = arr.map(function(element) {
  return element * element;
});
// squared는 [1, 4, 9]가 됨

filter 메서드

주어진 함수로 배열의 각 요소를 테스트하여 조건을 충족하는 요소로 이루어진 새로운 배열을 생성하는 filter메서드는 다음과 같이 사용됩니다.

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(function(element) {
  return element % 2 === 0;
});
// evenNumbers는 [2, 4]가 됨

배열 메서드는 배열을 조작하고 변경하는 데 유용한 기능을 제공합니다. 위에서 소개한 메서드 외에도 많은 배열 메서드가 있으며, 개별 요소에 대한 작업, 배열의 모든 요소에 대한 작업, 배열의 일부 요소를 선택하는 등 다양한 용도로 사용될 수 있습니다.

5. 다차원 배열과 배열 연산

다차원 배열과 배열 연산에 대해 알아보겠습니다.

다차원 배열

다차원 배열은 배열의 요소로 다시 배열을 포함하는 배열입니다. 다차원 배열은 행렬이나 2차원 좌표 시스템과 같은 데이터 구조를 다룰 때 유용하게 사용될 수 있습니다.

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

위의 코드는 3x3 행렬을 나타내는 다차원 배열입니다. 각 행은 배열로 표현되며, 각 열은 배열의 요소로 저장됩니다. 다차원 배열에서는 인덱스를 사용하여 각 요소에 접근할 수 있습니다.

console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6
console.log(matrix[2][1]); // 8

다차원 배열은 필요한 경우 배열의 배열을 사용하여 복잡한 데이터 구조를 표현할 수 있습니다.

배열 연산

배열은 그 자체로 연산을 수행할 수 있는 다양한 메서드를 제공합니다.

배열 병합

두 개 이상의 배열을 하나로 병합할 수 있습니다. 배열을 병합하는 가장 간단한 방법은 concat메서드를 사용하는 것입니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = arr1.concat(arr2);
// merged는 [1, 2, 3, 4]가 됨

또는 spread 연산자를 사용하여 배열을 병합할 수도 있습니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
// merged는 [1, 2, 3, 4]가 됨

배열 필터링

주어진 조건을 기반으로 배열에서 필요한 요소만 필터링할 수 있습니다. filter메서드를 사용하여 새로운 배열을 생성할 수 있습니다.

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(function(element) {
  return element % 2 === 0;
});
// evenNumbers는 [2, 4]가 됨

배열 변환

배열의 모든 요소를 변환하여 새로운 배열을 생성할 수 있습니다. map메서드를 사용하여 각 요소에 대해 지정된 함수를 적용할 수 있습니다.

const arr = [1, 2, 3];
const squared = arr.map(function(element) {
  return element * element;
});
// squared는 [1, 4, 9]가 됨

배열 정렬

배열의 요소를 정렬할 수 있습니다. sort메서드를 사용하여 배열을 정렬할 수 있습니다.

const arr = [3, 1, 4, 2, 5];
arr.sort();
// arr은 [1, 2, 3, 4, 5]가 됨

또는 정렬 순서를 기준으로 사용자 정의 함수를 전달할 수도 있습니다.

const arr = [3, 1, 4, 2, 5];
arr.sort(function(a, b) {
  return a - b;
});
// arr은 [1, 2, 3, 4, 5]가 됨

이외에도 배열은 다양한 연산을 수행할 수 있는 메서드와 기능을 제공합니다. 배열을 사용하여 데이터를 구성 및 조작하는 데 유용하게 활용할 수 있습니다.