자바스크립트에서 배열(Array)은 여러 개의 값을 순서대로 저장할 수 있는 특별한 객체입니다. 배열은 일반적으로 동일한 데이터 타입의 요소를 담지만, 자바스크립트 배열은 여러 타입의 요소를 혼합하여 저장할 수 있습니다. 배열에 대해 상세히 설명하겠습니다.
1. 배열 생성
1.1 배열 리터럴
가장 간단한 방법은 배열 리터럴을 사용하는 것입니다.
const numbers = [1, 2, 3, 4, 5];
const mixedArray = [1, 'two', true, { key: 'value' }, [5, 6]];1.2 Array 생성자
Array 생성자를 사용하여 배열을 만들 수 있습니다.
const numbers = new Array(1, 2, 3, 4, 5);
const emptyArray = new Array(5); // 길이가 5인 빈 배열2. 배열의 속성
2.1 length 속성
length 속성은 배열의 길이를 반환합니다.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 53. 배열 요소 접근
3.1 인덱스를 사용한 접근
배열 요소에 접근하거나 수정할 때는 인덱스를 사용합니다. 인덱스는 0부터 시작합니다.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1
numbers[1] = 20; // 두 번째 요소를 20으로 수정
console.log(numbers[1]); // 203.2 at() 메서드
at() 메서드를 사용하면 배열의 마지막 요소에 접근할 때 유용합니다.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.at(-1)); // 5 (마지막 요소)
console.log(numbers.at(-2)); // 4 (마지막에서 두 번째 요소)4. 배열 메서드
자바스크립트는 배열을 조작하기 위한 다양한 내장 메서드를 제공합니다.
4.1 push()와 pop()
push()는 배열의 끝에 요소를 추가하고, pop()은 배열의 마지막 요소를 제거합니다.
const numbers = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4]
console.log(numbers.pop()); // 4 (제거된 요소)
console.log(numbers); // [1, 2, 3]4.2 unshift()와 shift()
unshift()는 배열의 앞에 요소를 추가하고, shift()는 배열의 첫 번째 요소를 제거합니다.
const numbers = [1, 2, 3];
numbers.unshift(0); // [0, 1, 2, 3]
console.log(numbers.shift()); // 0 (제거된 요소)
console.log(numbers); // [1, 2, 3]4.3 concat()
concat() 메서드는 두 개 이상의 배열을 합쳐서 새로운 배열을 만듭니다.
const array1 = [1, 2];
const array2 = [3, 4];
const array3 = array1.concat(array2); // [1, 2, 3, 4]
console.log(array3);4.4 slice()
slice() 메서드는 배열의 일부를 추출하여 새로운 배열을 만듭니다.
const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(1, 3); // [2, 3] (인덱스 1부터 3 전까지)
console.log(sliced);4.5 splice()
splice() 메서드는 배열의 요소를 추가하거나 제거합니다.
const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 'a', 'b'); // 인덱스 2에서 1개 요소 제거, 'a'와 'b' 추가
console.log(numbers); // [1, 2, 'a', 'b', 4, 5]4.6 forEach()
forEach() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.
const numbers = [1, 2, 3];
numbers.forEach((num, index) => {
console.log(`Element at index ${index} is ${num}`);
});4.7 map()
map() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 새로운 배열을 만듭니다.
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]4.8 filter()
filter() 메서드는 조건에 맞는 요소만 포함하는 새로운 배열을 만듭니다.
const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]4.9 reduce()
reduce() 메서드는 배열의 각 요소를 누적하여 단일 값을 만듭니다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 154.10 find()와 findIndex()
find()는 조건에 맞는 첫 번째 요소를 반환하고, findIndex()는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.
const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
const foundIndex = numbers.findIndex(num => num > 3);
console.log(found); // 4
console.log(foundIndex); // 34.11 includes()
includes() 메서드는 배열에 특정 요소가 포함되어 있는지 여부를 반환합니다.
const numbers = [1, 2, 3];
console.log(numbers.includes(2)); // true
console.log(numbers.includes(4)); // false4.12 sort()
sort() 메서드는 배열의 요소를 정렬합니다. 기본적으로 요소를 문자열로 취급하여 정렬합니다.
const numbers = [3, 1, 4, 1, 5, 9];
numbers.sort();
console.log(numbers); // [1, 1, 3, 4, 5, 9]
// 숫자 정렬을 위해 비교 함수를 제공
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 1, 3, 4, 5, 9]4.13 reverse()
reverse() 메서드는 배열의 요소를 역순으로 정렬합니다.
const numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers); // [3, 2, 1]5. 배열의 복사와 병합
5.1 배열 복사
배열을 복사할 때는 스프레드 연산자나 slice() 메서드를 사용합니다.
const original = [1, 2, 3];
const copy = [...original]; // 스프레드 연산자
const copy2 = original.slice(); // slice() 메서드
console.log(copy); // [1, 2, 3]
console.log(copy2); // [1, 2, 3]5.2 배열 병합
배열을 병합할 때는 스프레드 연산자나 concat() 메서드를 사용합니다.
const array1 = [1, 2];
const array2 = [3, 4];
const merged = [...array1, ...array2]; // 스프레드 연산자
const merged2 = array1.concat(array2); // concat() 메서드
console.log(merged); // [1, 2, 3, 4]
console.log(merged2); // [1, 2, 3, 4]6. 다차원 배열
배열 안에 배열을 포함시켜 다차원 배열을 만들 수 있습니다.
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1 (첫 번째 행의 첫 번째 요소)
console.log(matrix[2][1]); // 8 (세 번째 행의 두 번째 요소)7. 배열과 반복문
배열은 반복문을 사용하여 순회할 수 있습니다.
7.1 for 반복문
“`javascript