자바스크립트 배열 정복: 개념부터 다차원 배열, 유용한 메소드까지 총정리!

1. 자바스크립트 배열: 기본 개념 이해하기

1.1. 배열이란 무엇일까요?

자바스크립트에서 배열(Array) 은 여러 개의 값을 하나의 변수에 순서대로 저장할 수 있는 특별한 데이터 구조입니다. 쉽게 말해, 칸칸이 나뉜 서랍장에 물건을 차곡차곡 정리하는 것과 유사합니다. 배열을 활용하면 연관된 데이터들을 묶어서 효율적으로 관리하고, 쉽게 접근하여 사용할 수 있습니다.

1.2. 배열은 왜 필요할까요?

예를 들어, 학생 100명의 이름을 각각 개별 변수에 저장하는 것보다, students라는 배열 하나에 모든 이름을 저장하는 것이 훨씬 간편하겠죠? 이와 같이 배열은 데이터 관리의 효율성을 크게 높여주는 역할을 합니다.

다양한 활용 예시:

• 장바구니: 온라인 쇼핑몰에서 장바구니에 담긴 상품들을 cart라는 배열에 저장하면, 상품 추가, 삭제, 총 가격 계산 등이 편리해집니다.
• 할 일 목록: 오늘 해야 할 일들을 todos라는 배열에 저장하면, 할 일 추가, 완료 처리, 남은 할 일 확인 등이 간편해집니다.
• 연락처 목록: contacts 배열에 이름, 전화번호, 주소 등을 객체 형태로 저장하면 연락처를 효율적으로 관리할 수 있습니다.

1.3. 배열의 정의: 순서가 있는 값들의 집합

• 배열은 순서가 있는 값들의 집합이며, 각 값은 인덱스(Index) 를 통해 접근합니다.
• 인덱스는 0부터 시작합니다. 즉, 첫 번째 요소는 항상 인덱스 0에 위치하고, 두 번째 요소는 인덱스 1, 세 번째 요소는 인덱스 2에 위치합니다.

2. 배열 생성: 두 가지 방법

자바스크립트에서는 크게 두 가지 방법으로 배열을 생성할 수 있습니다.

2.1. 대괄호 []를 사용한 리터럴 방식 (권장)

가장 일반적이고 간편한 방법은 대괄호 []를 사용하는 리터럴(Literal) 방식입니다.

let fruits = ['사과', '바나나', '체리']; // 과일 이름을 담은 배열
let numbers = [1, 2, 3, 4, 5]; // 숫자를 담은 배열
let emptyArray = []; // 빈 배열

// 추가 예제
let colors = ['red', 'green', 'blue']; // 색상 이름을 담은 배열
let booleanValues = [true, false, true]; // 불리언 값을 담은 배열

2.2. Array() 생성자 함수를 이용한 방식

Array 생성자 함수를 사용하는 방법도 있습니다.

let numbers = new Array(1, 2, 3); // 숫자 배열 생성
let emptyArray = new Array(5); // 길이가 5인 빈 배열 생성 (5개의 undefined 요소)

// 추가 예제
let fruits = new Array('apple', 'banana', 'orange'); // 과일 이름을 담은 배열 생성
let mixedArray = new Array(1, 'hello', true); // 혼합 데이터 타입 배열 생성

참고: Array() 생성자 함수는 전달되는 인자의 개수에 따라 다르게 동작하기 때문에 혼란을 야기할 수 있습니다. 따라서 [] 리터럴 방식을 사용하는 것을 권장합니다.

3. 배열의 특징: 유연함

자바스크립트 배열은 다른 프로그래밍 언어의 배열과는 다른, 몇 가지 독특한 특징을 지니고 있습니다.

3.1. 동적 크기: 필요에 따라 자유롭게 조절

자바스크립트 배열은 고정된 크기를 가지지 않습니다. 즉, 필요에 따라 언제든지 요소를 추가하거나 삭제하여 크기를 조절할 수 있습니다. 고무줄처럼 유연하게 늘어나고 줄어드는 것이죠.

let colors = []; // 빈 배열 생성
colors.push('빨강'); // '빨강' 추가
colors.push('파랑'); // '파랑' 추가
console.log(colors); // ["빨강", "파랑"]

// 추가 예제
let numbers = [1, 2, 3];
numbers.pop(); // 마지막 요소 제거
console.log(numbers); // [1, 2]
numbers.push(4, 5); // 4와 5 추가
console.log(numbers); // [1, 2, 4, 5]

3.2. 혼합 데이터 타입: 다양한 유형의 데이터를 함께 저장

자바스크립트 배열은 서로 다른 데이터 타입을 같은 배열에 함께 저장할 수 있습니다. 숫자, 문자열, 불리언, 객체, 심지어 다른 배열까지도 하나의 배열에 담을 수 있습니다.

let mixedArray = [1, '두', true, null, { name: '홍길동' }, [1, 2, 3]];
console.log(mixedArray); // [1, "두", true, null, { name: '홍길동' }, [1, 2, 3]]

// 추가 예제
let person = ['John Doe', 30, true, { city: 'Seoul' }]; // 이름, 나이, 결혼 여부, 거주지 정보를 담은 배열
console.log(person);

4. 배열 활용: length 속성과 필수 메소드

배열을 다룰 때 유용하게 사용되는 기본적인 속성과 필수 메소드들을 알아보겠습니다.

4.1. length 속성: 배열의 길이 확인

length 속성은 배열에 포함된 요소의 개수, 즉 배열의 길이를 나타냅니다.

let animals = ['개', '고양이', '토끼'];
console.log(animals.length); // 출력: 3

// 추가 예제
let emptyArray = [];
console.log(emptyArray.length); // 출력: 0

let fruits = ['사과', '바나나'];
fruits.push('딸기');
console.log(fruits.length); // 출력: 3

4.2. push() 메소드: 배열의 끝에 요소 추가

push() 메소드는 배열의 맨 끝에 새로운 요소를 추가합니다.

let animals = ['개', '고양이'];
animals.push('토끼'); // '토끼' 추가
console.log(animals); // ["개", "고양이", "토끼"]

// 추가 예제
let numbers = [1, 2];
numbers.push(3, 4, 5); // 여러 개의 요소 한 번에 추가
console.log(numbers); // [1, 2, 3, 4, 5]

4.3. pop() 메소드: 배열의 마지막 요소 제거

pop() 메소드는 배열의 마지막 요소를 제거하고, 그 값을 반환합니다.

let animals = ['개', '고양이', '토끼'];
let lastAnimal = animals.pop(); // 마지막 요소('토끼') 제거 및 반환
console.log(lastAnimal); // 출력: 토끼
console.log(animals); // ["개", "고양이"]

// 추가 예제
let colors = ['red', 'green', 'blue'];
let removedColor = colors.pop();
console.log(removedColor); // 출력: blue
console.log(colors); // ['red', 'green']

4.4. shift()와 unshift() 메소드: 배열의 앞과 뒤에서 조작

• shift() 메소드는 배열의 첫 번째 요소를 제거하고, 그 값을 반환합니다.
• unshift() 메소드는 배열의 맨 앞에 새로운 요소를 추가합니다.

let animals = ['개', '고양이', '토끼'];

let firstAnimal = animals.shift(); // 첫 번째 요소('개') 제거 및 반환
console.log(firstAnimal); // 출력: 개
console.log(animals); // ["고양이", "토끼"]

animals.unshift('새'); // '새'를 맨 앞에 추가
console.log(animals); // ["새", "고양이", "토끼"]

// 추가 예제
let numbers = [2, 3, 4];
let firstNumber = numbers.shift();
console.log(firstNumber); // 출력: 2
console.log(numbers); // [3, 4]

numbers.unshift(0, 1); // 0과 1을 맨 앞에 추가
console.log(numbers); // [0, 1, 3, 4]

4.5. 실생활 예제: 학생 관리 프로그램

학생들의 점수를 관리하고 싶다고 가정해봅시다. 학생 정보와 점수를 배열을 활용하여 효율적으로 관리할 수 있습니다.

// 학생들의 점수
let studentScores = [85, 90, 78];

// 새로운 학생 추가 (점수 95점)
studentScores.push(95);

// 평균 점수 계산
let totalScore = studentScores.reduce((sum, score) => sum + score, 0);
let averageScore = totalScore / studentScores.length;

console.log(`학생들의 평균 점수는 ${averageScore}점 입니다.`);

// 추가 예제: 학생 이름 관리
let studentNames = ["Alice", "Bob", "Charlie"];

// 새로운 학생 이름 추가
studentNames.push("David");

// 첫 번째 학생 이름 제거
studentNames.shift();

console.log(studentNames); // ["Bob", "Charlie", "David"]

5. 배열 활용: 유용한 메소드 정복

이번에는 배열을 더욱 자유자재로 다룰 수 있도록 도와주는 유용한 메소드들을 살펴보겠습니다.

5.1. slice() 메소드: 배열의 특정 부분 추출

slice() 메소드는 배열의 특정 부분을 추출하여 새로운 배열을 생성합니다. 원본 배열은 변경되지 않습니다.

let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 4); // 인덱스 1부터 4 이전(3)까지 추출
console.log(slicedNumbers); // [2, 3, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 그대로)

// 추가 예제
let fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
let slicedFruits = fruits.slice(2); // 인덱스 2부터 끝까지 추출
console.log(slicedFruits); // ['orange', 'grape', 'kiwi']

let someFruits = fruits.slice(1, 3); // 인덱스 1부터 3 이전(2)까지 추출
console.log(someFruits); // ['banana', 'orange']

5.2. splice() 메소드: 배열 요소의 삭제, 추가, 교체

splice() 메소드는 배열의 기존 요소를 삭제, 교체하거나, 새로운 요소를 추가합니다. 원본 배열을 변경한다는 점을 유의해야 합니다.

let items = ['A', 'B', 'C', 'D'];

// 삭제: 인덱스 1에서 2개의 요소 삭제
items.splice(1, 2);
console.log(items); // ['A', 'D']

// 추가: 인덱스 1에 'X', 'Y' 추가
items.splice(1, 0, 'X', 'Y');
console.log(items); // ['A', 'X', 'Y', 'D']

// 교체: 인덱스 2의 요소를 'Z'로 교체
items.splice(2, 1, 'Z');
console.log(items); // ['A', 'X', 'Z', 'D']

// 추가 예제
let colors = ['red', 'green', 'blue'];

// 삭제: 인덱스 0에서 1개의 요소 삭제
colors.splice(0, 1);
console.log(colors); // ['green', 'blue']

// 추가: 인덱스 1에 'yellow', 'purple' 추가
colors.splice(1, 0, 'yellow', 'purple');
console.log(colors); // ['green', 'yellow', 'purple', 'blue']

// 교체: 인덱스 0부터 2개의 요소를 'black', 'white'로 교체
colors.splice(0, 2, 'black', 'white');
console.log(colors); // ['black', 'white', 'purple', 'blue']

5.3. forEach() 메소드: 배열의 모든 요소 순회

forEach() 메소드는 배열의 모든 요소에 대해 주어진 함수를 순차적으로 실행합니다.

let numbers = [1, 2, 3, 4];

numbers.forEach(function (number) {
  console.log(number * 2); // 각 요소에 2를 곱하여 출력
});
// 출력:
// 2
// 4
// 6
// 8

// 추가 예제
let fruits = ['apple', 'banana', 'orange'];

fruits.forEach(function (fruit, index) {
  console.log(`Index ${index}: ${fruit}`); // 인덱스와 함께 과일 이름 출력
});
// 출력:
// Index 0: apple
// Index 1: banana
// Index 2: orange

5.4. map() 메소드: 배열의 각 요소를 변환

map() 메소드는 배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 생성합니다.

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); // [1, 4, 9, 16]

// 추가 예제
const names = ['Alice', 'Bob', 'Charlie'];
const nameLengths = names.map((name) => name.length); // 각 이름의 길이를 담은 배열 생성
console.log(nameLengths); // [5, 3, 7]

const prices = [10, 20, 30];
const formattedPrices = prices.map((price) => `$${price}`); // 각 가격 앞에 $를 붙인 문자열 배열 생성
console.log(formattedPrices); // ['$10', '$20', '$30']

5.5. filter() 메소드: 조건에 맞는 요소만 추출

filter() 메소드는 주어진 함수의 테스트를 통과하는(true를 반환하는) 모든 요소를 모아 새로운 배열을 생성합니다.

const ages = [12, 18, 25, 32];
const adults = ages.filter((age) => age >= 18); // 18세 이상인 요소만 추출
console.log(adults); // [18, 25, 32]

// 추가 예제
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((number) => number % 2 === 0); // 짝수만 추출
console.log(evenNumbers); // [2, 4, 6]

const words = ['apple', 'banana', 'orange', 'grape'];
const longWords = words.filter((word) => word.length > 5); // 길이가 5보다 큰 단어만 추출
console.log(longWords); // ['banana', 'orange']

5.6. reduce() 메소드: 배열의 모든 요소를 하나의 값으로 결합

reduce() 메소드는 배열의 모든 요소를 하나의 값으로 결합하는 데 사용됩니다. 누적 계산, 합계, 평균 등을 구할 때 유용합니다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 모든 요소의 합계 계산
console.log(sum); // 10

• accumulator: 이전 reduce() 호출에서 반환된 누적 값
• currentValue: 현재 처리 중인 배열 요소
• 0: 초기값 (생략 가능하며, 생략 시 배열의 첫 번째 요소가 초기값으로 사용됨)

// 추가 예제
const numbers = [1, 2, 3, 4];
const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1); // 모든 요소의 곱 계산
console.log(product); // 24

const words = ['Hello', ' ', 'World', '!'];
const sentence = words.reduce((accumulator, currentValue) => accumulator + currentValue); // 문자열 합치기
console.log(sentence); // "Hello World!"

6. 다차원 배열: 배열 속의 배열

지금까지는 1차원 배열, 즉 한 줄로 나열된 배열에 대해 살펴봤습니다. 이제 배열 안에 또 다른 배열이 들어있는 다차원 배열에 대해 알아보겠습니다.

6.1. 다차원 배열이란 무엇인가요?

다차원 배열은 말 그대로 배열 안에 배열이 중첩된 형태를 의미합니다. 가장 흔하게 사용되는 것은 2차원 배열로, 행과 열로 구성된 테이블 형태의 데이터를 표현할 때 유용합니다.

6.2. 2차원 배열: 행렬, 테이블 데이터 표현

2차원 배열은 엑셀 시트처럼 행(Row)과 열(Column) 로 구성된 데이터를 표현하기에 적합합니다.

let scores = [
  [90, 85, 88], // 첫 번째 학생의 과목별 점수
  [78, 82, 80], // 두 번째 학생의 과목별 점수
  [95, 91, 89], // 세 번째 학생의 과목별 점수
];

// 첫 번째 학생의 두 번째 과목 점수 접근
console.log(scores[0][1]); // 85

• scores[0] : 첫 번째 학생의 점수 배열 [90, 85, 88]
• scores[0][1] : 첫 번째 학생의 두 번째 과목 점수 85

// 추가 예제
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

// 2행 3열의 값 접근
console.log(matrix[1][2]); // 6

// 3행 1열의 값 접근
console.log(matrix[2][0]); // 7

6.3. 다차원 배열 활용 예제: 체스판, 게임판 표현

다차원 배열은 게임 개발, 그래픽 프로그래밍 등 다양한 분야에서 활용됩니다. 예를 들어, 2차원 배열을 사용하여 체스판이나 게임판을 표현할 수 있습니다.

// 체스판 초기화 (8x8)
let chessBoard = [
  ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
  ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
  ['', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', ''],
  ['♀️', '♀️', '♀️', '♀️', '♀️', '♀️', '♀️', '♀️'],
  ['🦁', '🐎', '🐘', '👸🏻', '🤴🏻', '🐘', '🐎', '🦁'],
];

// 체스판 출력 함수
function printChessBoard(board) {
  for (let row of board) {
    console.log(row.join(' | '));
  }
}

printChessBoard(chessBoard);

// 추가 예제
// 3x3 틱택토 게임판 초기화
let ticTacToeBoard = [
  ['', '', ''],
  ['', '', ''],
  ['', '', ''],
];

// 첫 번째 행, 두 번째 열에 'X' 표시
ticTacToeBoard[0][1] = 'X';

// 두 번째 행, 첫 번째 열에 'O' 표시
ticTacToeBoard[1][0] = 'O';

console.log(ticTacToeBoard);

7. 결론: 배열, 자바스크립트 프로그래밍의 핵심

지금까지 자바스크립트 배열의 개념, 생성, 특징, 다차원 배열, 그리고 유용한 메소드까지 꼼꼼하게 살펴봤습니다. 배열은 자바스크립트 프로그래밍의 핵심 요소 중 하나이며, 데이터를 효율적으로 관리하고 처리하는 데 필수적인 도구입니다. 이 글을 통해 여러분이 배열을 자유자재로 다루고 활용할 수 있는 능력을 키우셨기를 바랍니다. 앞으로도 배열을 적극적으로 활용하여 더욱 강력하고 효율적인 자바스크립트 코드를 작성해나가시길 바랍니다!