JavaScript 배열 다루는 기초 코드 예시

자바스크립트에서 배열은 여러 개의 값을 한 변수에 저장할 수 있는 유용한 자료형입니다. 배열은 인덱스를 통해 접근할 수 있으며, 다양한 메서드를 이용하여 데이터를 효율적으로 조작할 수 있습니다. 이번 포스팅에서는 자바스크립트 배열의 기초적인 개념 및 주요 메서드에 대해 알아보겠습니다.

배열 생성하기

자바스크립트에서 배열을 생성하는 방법은 여러 가지가 있습니다. 대괄호([])를 사용하여 배열을 만들 수 있으며, 이를 배열 리터럴이라고 합니다. 또한, Array 객체를 사용하여 배열을 생성할 수도 있습니다. 예를 들어, 아래 코드를 통해 배열을 생성할 수 있습니다.

• 배열 리터럴을 이용한 생성: let fruits = ['사과', '바나나', '오렌지'];
• Array 객체를 이용한 생성: let fruits = new Array('사과', '바나나', '오렌지');
• 공백을 허용하는 배열: let emptyArray = [];

배열의 길이와 요소 접근하기

배열의 길이는 length 속성을 사용하여 측정할 수 있습니다. 각 요소는 대괄호 안에 인덱스를 넣어 접근할 수 있습니다. 여기서 인덱스는 0부터 시작하니 주의해야 합니다.

let arr = ['A', 'B', 'C'];
console.log(arr.length); // 3
console.log(arr[0]); // 'A'
console.log(arr[1]); // 'B'
console.log(arr[2]); // 'C'

배열 요소의 추가 및 삭제

배열에 새로운 요소를 추가하거나 기존 요소를 삭제하는 방법으로는 여러 메서드가 있습니다. 주로 사용되는 메서드들은 push(), pop(), unshift(), shift()입니다.

• push(): 배열 끝에 새로운 요소를 추가합니다.
• pop(): 배열 마지막 요소를 제거합니다.
• unshift(): 배열의 앞부분에 새로운 요소를 추가합니다.
• shift(): 배열의 첫 번째 요소를 제거합니다.

예를 들어, 아래와 같이 사용할 수 있습니다:

let arr = ['A', 'B', 'C'];
arr.push('D'); // 배열 끝에 'D' 추가
console.log(arr); // ['A', 'B', 'C', 'D']
arr.pop(); // 마지막 요소 제거
console.log(arr); // ['A', 'B', 'C']

배열 요소 수정하기

배열의 특정 요소를 수정하고 싶다면 인덱스를 통해 접근하여 값을 재할당하면 됩니다. 예를 들어, 아래와 같이 사용할 수 있습니다:

let arr = ['A', 'B', 'C'];
arr[1] = 'D'; // 두 번째 요소 수정
console.log(arr); // ['A', 'D', 'C']

배열의 복사

기존의 배열을 복사할 때는 slice(), concat(), 스프레드 연산자(…)를 사용할 수 있습니다. 각 방법은 상황에 따라 적절히 선택하여 사용하면 됩니다.

let arr = ['A', 'B', 'C'];
let copy1 = arr.slice(); // slice() 메서드로 복사
let copy2 = arr.concat(); // concat()으로 복사
let copy3 = [...arr]; // 스프레드 연산자 사용
console.log(copy1, copy2, copy3); // 모두 ['A', 'B', 'C']

배열 순회하기

배열의 각 요소를 순회하며 작업을 수행하려면 여러 가지 방법이 있습니다. 일반적인 방법으로는 for 문, for...of 문, forEach() 메서드가 있습니다.

let arr = ['A', 'B', 'C'];
// for 반복문
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// for...of 문
for (let item of arr) {
  console.log(item);
}
// forEach() 메서드
arr.forEach(item => {
  console.log(item);
});

배열 검색하기

배열 내에서 특정 요소를 검색할 때는 includes(), indexOf(), lastIndexOf() 메서드를 사용합니다. 이러한 메서드는 각각의 기능이 다르므로 필요에 따라 적절하게 사용할 수 있습니다.

• includes(): 배열에 특정 요소가 존재하는지 여부를 확인합니다.
• indexOf(): 배열에서 특정 요소가 처음 나타나는 인덱스를 반환합니다.
• lastIndexOf(): 배열에서 특정 요소가 마지막으로 나타나는 인덱스를 반환합니다.

예를 들어:

let arr = ['A', 'B', 'C', 'B'];
console.log(arr.includes('B')); // true
console.log(arr.indexOf('B')); // 1
console.log(arr.lastIndexOf('B')); // 3

배열의 각 요소에 대한 작업 수행하기

배열 내의 모든 요소에 대해 특정 작업을 수행하려면 map(), filter(), reduce()와 같은 메서드를 활용할 수 있습니다.

map() 메서드

map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 생성합니다. 예를 들어, 숫자 배열의 각 요소를 제곱하는 경우:

let numbers = [1, 2, 3];
let squares = numbers.map(num => num ** 2);
console.log(squares); // [1, 4, 9]

filter() 메서드

filter() 메서드는 조건에 맞는 요소들만 추출하여 새로운 배열을 생성합니다. 예를 들어, 특정 조건을 만족하는 점수를 필터링할 수 있습니다:

let scores = [60, 45, 80, 90];
let passed = scores.filter(score => score >= 60);
console.log(passed); // [60, 80, 90]

reduce() 메서드

reduce() 메서드는 배열의 모든 요소를 하나의 결과로 누적할 때 사용합니다. 예를 들어, 배열의 합계를 구할 수 있습니다:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

결론

자바스크립트의 배열은 다양한 방법으로 데이터를 관리하고 조작할 수 있는 매우 강력한 도구입니다. 배열을 잘 활용하면 효율적으로 데이터를 처리할 수 있으니, 다양한 메서드들을 실습해보며 익혀두시는 것이 좋습니다. 배열을 깊이 이해하면 자바스크립트 프로그래밍에서 더 큰 장점을 누릴 수 있을 것입니다.

자주 물으시는 질문