배열이란?
배열은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 배열의 각 값은 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. JavaScript의 배열은 크기가 동적으로 조정되며, 다양한 데이터 타입을 혼합하여 저장할 수 있습니다.
배열 선언
배열을 선언하는 방법에는 배열 리터럴과 Array
생성자를 사용하는 방법이 있습니다.
배열 리터럴
let fruits = ['Apple', 'Banana', 'Cherry'];
Array
생성자
let fruits = new Array('Apple', 'Banana', 'Cherry');
배열 요소 접근
배열 요소는 인덱스를 사용하여 접근할 수 있습니다.
예제
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'
배열 요소 추가 및 삭제
배열 요소 추가
push
메서드를 사용하여 배열의 끝에 요소를 추가할 수 있습니다.
let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']
배열 요소 삭제
pop
메서드를 사용하여 배열의 마지막 요소를 제거할 수 있습니다.
let fruits = ['Apple', 'Banana', 'Cherry'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 'Cherry'
console.log(fruits); // ['Apple', 'Banana']
배열 메서드
JavaScript는 배열을 조작할 수 있는 다양한 메서드를 제공합니다.
shift
와 unshift
shift
메서드는 배열의 첫 번째 요소를 제거하고 반환합니다. unshift
메서드는 배열의 앞에 요소를 추가합니다.
let fruits = ['Apple', 'Banana'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 'Apple'
console.log(fruits); // ['Banana']
fruits.unshift('Grape');
console.log(fruits); // ['Grape', 'Banana']
splice
splice
메서드는 배열의 중간에 요소를 추가하거나 제거할 수 있습니다.
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.splice(1, 1, 'Mango', 'Peach');
console.log(fruits); // ['Apple', 'Mango', 'Peach', 'Cherry']
slice
slice
메서드는 배열의 일부를 복사하여 새로운 배열을 만듭니다.
let fruits = ['Apple', 'Banana', 'Cherry'];
let someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['Banana', 'Cherry']
concat
concat
메서드는 두 개 이상의 배열을 결합하여 새로운 배열을 만듭니다.
let fruits = ['Apple', 'Banana'];
let moreFruits = ['Cherry', 'Date'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['Apple', 'Banana', 'Cherry', 'Date']
forEach
forEach
메서드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function(fruit, index) {
console.log(index + ': ' + fruit);
});
// 출력:
// 0: Apple
// 1: Banana
// 2: Cherry
map
map
메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
let numbers = [1, 2, 3];
let doubled = numbers.map(function(number) {
return number * 2;
});
console.log(doubled); // [2, 4, 6]
filter
filter
메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 참인 요소들로 구성된 새로운 배열을 반환합니다.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
reduce
reduce
메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 단일 값으로 축약합니다.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum); // 15
배열의 길이
length
속성은 배열의 길이를 반환합니다.
예제
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.length); // 3
배열과 객체의 차이점
배열은 인덱스를 사용하여 요소를 저장하고 접근하며, 주로 순서가 중요한 데이터에 사용됩니다. 객체는 키-값 쌍으로 데이터를 저장하고 접근하며, 주로 속성이 중요한 데이터에 사용됩니다.
예제: 배열
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
예제: 객체
let person = {
name: 'Alice',
age: 25
};
console.log(person.name); // 'Alice'
결론
배열은 여러 값을 하나의 변수에 저장하고 관리하는 데 유용한 데이터 구조입니다. 이번 글에서는 배열 선언, 요소 접근, 추가 및 삭제, 다양한 배열 메서드, 배열의 길이에 대해 배웠습니다. 다음 글에서는 배열 고급 주제에 대해 알아보겠습니다.
다음 글에서 만나요!
'JavaScript 문법 시리즈' 카테고리의 다른 글
[JavaScript 문법] 12일차: ES6 클래스 (0) | 2024.08.12 |
---|---|
[JavaScript 문법] 11일차: 배열 고급 (0) | 2024.08.11 |
[JavaScript 문법] 9일차: 객체의 프로토타입 (0) | 2024.08.09 |
[JavaScript 문법] 8일차: 객체 기초 (0) | 2024.08.08 |
[JavaScript 문법] 7일차: 스코프와 클로저 (0) | 2024.08.07 |