자바스크립트(JavaScript) 배열 생성, 조작, 활용 방법

자바스크립트(JavaScript) 배열 생성, 조작, 활용 방법

자바스크립트에서 배열은 데이터를 저장하고 조작하는 데 있어 매우 중요한 역할을 합니다. 배열은 여러 값을 하나의 변수에 저장할 수 있도록 하며, 다양한 내장 메서드를 통해 쉽게 조작할 수 있습니다. 이 글에서는 자바스크립트 배열의 생성 방법, 조작 방법, 그리고 실제 활용 방법에 대해 다루겠습니다.

 

 

목차

1. 배열이란?
2. 배열 생성 방법
3. 배열 요소 접근 및 수정
4. 배열에 요소 추가 및 제거
5. 배열 순회
6. 배열 메서드 활용
7. 배열 고급 활용
8. 결론

 

1. 배열이란?

배열은 여러 개의 값을 순차적으로 저장할 수 있는 자료 구조입니다. 각 값은 인덱스로 접근할 수 있으며, 배열의 크기는 동적으로 변할 수 있습니다.

 

 

2. 배열 생성 방법

자바스크립트에서 배열을 생성하는 방법은 여러 가지가 있습니다.

배열 리터럴

배열 리터럴을 사용하여 배열을 생성할 수 있습니다.

let fruits = ['Apple', 'Banana', 'Cherry'];

Array 생성자

Array 생성자를 사용하여 배열을 생성할 수도 있습니다.

let fruits = new Array('Apple', 'Banana', 'Cherry');

 

 

3. 배열 요소 접근 및 수정

배열의 요소는 인덱스를 사용하여 접근하고 수정할 수 있습니다.

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
fruits[1] = 'Blueberry';
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']

 

 

4. 배열에 요소 추가 및 제거

배열에 요소를 추가하거나 제거하는 다양한 방법이 있습니다.

push와 pop

배열의 끝에 요소를 추가하거나 제거할 때 사용합니다.

let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']
fruits.pop();
console.log(fruits); // ['Apple', 'Banana']

unshift와 shift

배열의 시작에 요소를 추가하거나 제거할 때 사용합니다.

let fruits = ['Apple', 'Banana'];
fruits.unshift('Cherry');
console.log(fruits); // ['Cherry', 'Apple', 'Banana']
fruits.shift();
console.log(fruits); // ['Apple', 'Banana']

 

 

 

 

5. 배열 순회

배열의 각 요소를 순회하는 방법에는 여러 가지가 있습니다.

for 루프

let fruits = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

forEach 메서드

let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function(fruit) {
    console.log(fruit);
});

 

 

6. 배열 메서드 활용

자바스크립트 배열에는 다양한 유용한 메서드가 있습니다.

map

배열의 각 요소를 변형하여 새로운 배열을 만듭니다.

let numbers = [1, 2, 3];
let doubled = numbers.map(function(number) {
    return number * 2;
});
console.log(doubled); // [2, 4, 6]

filter

배열의 요소를 필터링하여 새로운 배열을 만듭니다.

let numbers = [1, 2, 3, 4];
let evens = numbers.filter(function(number) {
    return number % 2 === 0;
});
console.log(evens); // [2, 4]

reduce

배열의 요소를 누적하여 단일 값으로 만듭니다.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(total, number) {
    return total + number;
}, 0);
console.log(sum); // 10

 

 

7. 배열 고급 활용

배열을 더욱 효과적으로 활용하기 위한 고급 방법을 소개합니다.

배열 비구조화 할당

let fruits = ['Apple', 'Banana', 'Cherry'];
let [first, second, third] = fruits;
console.log(first); // Apple
console.log(second); // Banana

스프레드 연산자

let fruits = ['Apple', 'Banana'];
let moreFruits = [...fruits, 'Cherry', 'Date'];
console.log(moreFruits); // ['Apple', 'Banana', 'Cherry', 'Date']

 

 

8. 결론

자바스크립트 배열은 강력한 데이터 구조로, 다양한 방법으로 생성, 조작, 활용할 수 있습니다. 이 가이드에서 다룬 내용을 바탕으로 배열을 효과적으로 사용하여 코드를 더욱 효율적으로 작성해 보세요.