Blog

자바스크립트 배열과 배열 메서드 소개

자바스크립트에서 배열(array)은 동일한 타입의 데이터를 순차적으로 저장하는 자료 구조로, 각 요소는 인덱스로 구분됩니다. 배열은 동적이며 유연한 데이터 구조로, 필요에 따라 데이터의 추가 및 삭제가 가능합니다. 이번 포스팅에서는 자바스크립트 배열의 기본 개념과 유용한 배열 메서드에 대해 알아보겠습니다.

자바스크립트 배열의 특징

자바스크립트 배열은 다음과 같은 특징을 가집니다:

• 배열 요소의 자료형이 다양할 수 있습니다. 즉, 숫자와 문자열이 같은 배열 내에 섞여 있을 수 있습니다.
• 배열의 인덱스는 0부터 시작하며, 이로 인해 각 요소의 위치를 쉽게 참조할 수 있습니다.
• 특정 값이 존재하지 않는 인덱스는 자동으로 undefined로 처리됩니다.

배열 생성 및 초기화

배열을 생성하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 배열 리터럴을 사용하는 것입니다:

let fruits = ["사과", "바나나", "체리"]; // 배열 리터럴

또한, Array 생성자를 사용하여 배열을 만들 수도 있습니다:

let numbers = new Array(1, 2, 3); // Array 생성자 사용

배열의 길이를 명시적으로 설정하고 싶다면, 다음과 같이 초기화할 수 있습니다:

let emptyArray = new Array(5); // 길이가 5인 배열 생성

배열의 요소 추가 및 삭제

배열에 요소를 추가하거나 삭제할 때 사용하는 여러 가지 메서드가 있습니다.

요소 추가하기

• push(): 배열의 끝에 요소를 추가합니다.
• unshift(): 배열의 맨 앞에 요소를 추가합니다.
• spread operator: 배열을 새로 생성할 때 기존 배열의 요소를 복사하는 방법입니다.

예를 들어, push 메서드를 사용하여 요소를 추가하면:

let fruits = ["사과", "바나나"];
fruits.push("체리"); // ["사과", "바나나", "체리"]

요소 삭제하기

• pop(): 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 해당 요소를 반환합니다.
• splice(): 원하는 인덱스의 요소를 삭제하며, 삭제할 요소의 개수를 지정할 수 있습니다.

pop 메서드를 사용하면 배열의 마지막 요소를 삭제할 수 있습니다:

let fruits = ["사과", "바나나", "체리"];
fruits.pop(); // ["사과", "바나나"]

배열 메서드 활용

자바스크립트에는 배열을 다루기 위한 다양한 메서드가 존재합니다. 아래에서는 대표적인 메서드 몇 가지를 소개하겠습니다.

forEach()

forEach() 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

let numbers = [1, 2, 3];
numbers.forEach((number) => {
  console.log(number); // 1, 2, 3 출력
});

map()

map() 메서드는 배열의 각 요소에 함수를 적용하여 새로운 배열을 생성합니다.

let numbers = [1, 2, 3];
let doubled = numbers.map(number => number * 2); // [2, 4, 6]

filter()

filter() 메서드는 주어진 조건을 만족하는 요소만으로 구성된 새로운 배열을 반환합니다.

let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4]

reduce()

reduce() 메서드는 배열의 각 요소를 누적하여 단일 값을 반환합니다.

let numbers = [1, 2, 3];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0); // 6

slice()

slice() 메서드는 배열의 일부분을 추출하여 새로운 배열로 반환합니다.

let fruits = ["사과", "바나나", "체리", "딸기"];
let slicedFruits = fruits.slice(1, 3); // ["바나나", "체리"]

배열과 객체 변환

배열을 다양한 객체로 변환하는 방법도 있습니다. 그중 몇 가지를 소개하겠습니다:

Object.assign()

Object.assign() 메서드를 사용하여 배열을 객체로 변환할 수 있습니다.

let arr = ['first', 'second'];
let obj = Object.assign({}, arr); // { '0': 'first', '1': 'second' }

Spread operator

Spread operator를 활용하여 배열을 객체로 손쉽게 변환할 수 있습니다.

let arr = ['first', 'second'];
let obj = { ...arr }; // { '0': 'first', '1': 'second' }

Object.fromEntries()

key-value 쌍으로 이루어진 배열을 객체로 변환할 때 유용합니다.

let arr = [['a', 1], ['b', 2]];
let obj = Object.fromEntries(arr); // { a: 1, b: 2 }

결론

자바스크립트 배열은 강력한 데이터 구조로, 다양한 메서드를 통해 쉽게 조작이 가능합니다. 배열을 이해하고 활용하면 더욱 효율적인 코드를 작성할 수 있으며, 작업의 복잡성을 줄일 수 있습니다. 이러한 배열 메서드들을 적절하게 활용하여 코딩의 효율성을 높여보세요!

자주 찾으시는 질문 FAQ