#11 자바스크립트 배열 메서드

자바스크립트 배열은 데이터를 효율적으로 관리하는 데 필수적인 자료구조입니다. 이 글에서는 배열을 다루는 데 사용되는 다양한 메서드들을 상세히 설명하고, 예제를 통해 이해를 돕겠습니다.

1. 배열 요소 추가 및 삭제

• push(...items): 배열의 끝에 요소 추가

  const numbers = [1, 2, 3];
  numbers.push(4, 5); // [1, 2, 3, 4, 5]
  

   

   
• pop(): 배열의 마지막 요소 제거

  const numbers = [1, 2, 3];
  numbers.pop(); // [1, 2]
  

   

   
• unshift(...items): 배열의 앞에 요소 추가

  const numbers = [1, 2, 3];
  numbers.unshift(0); // [0, 1, 2, 3]
  

   

   
• shift(): 배열의 첫 번째 요소 제거

  const numbers = [1, 2, 3];
  numbers.shift(); // [2, 3]
  

   

   
• splice(start, deleteCount, ...items): 특정 위치부터 지정한 개수의 요소를 삭제하고, 새로운 요소를 추가

  const numbers = [1, 2, 3, 4];
  numbers.splice(1, 2, 5, 6); // [1, 5, 6, 4]
  

   

   

2. 배열 검색 및 순회

• indexOf(searchElement, fromIndex): 배열에서 특정 요소의 첫 번째 인덱스를 반환
• lastIndexOf(searchElement, fromIndex): 배열에서 특정 요소의 마지막 인덱스를 반환
• includes(searchElement): 배열에 특정 요소가 포함되어 있는지 확인
• find(callback): 주어진 함수의 조건을 만족하는 첫 번째 요소를 반환
• findIndex(callback): 주어진 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환
• forEach(callback): 배열의 모든 요소를 순회하며 함수 실행
• map(callback): 배열의 모든 요소를 변환하여 새로운 배열 생성
• filter(callback): 주어진 함수의 조건을 만족하는 요소만 추출하여 새로운 배열 생성
• every(callback): 배열의 모든 요소가 주어진 함수의 조건을 만족하는지 확인
• some(callback): 배열의 요소 중 하나라도 주어진 함수의 조건을 만족하는지 확인
• reduce(callback, initialValue): 배열의 모든 요소를 하나의 값으로 축소

 

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3); // 4
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0); // 15

 

 

 

3. 배열 변형

• reverse(): 배열의 순서를 반대로 뒤집음
• sort(): 배열을 정렬
• concat(...arrays): 배열을 연결하여 새로운 배열 생성
• slice(start, end): 배열의 일부분을 추출하여 새로운 배열 생성
• join(separator): 배열의 모든 요소를 연결하여 문자열 생성

 

const numbers = [3, 1, 4, 1, 5, 9];
numbers.sort(); // [1, 1, 3, 4, 5, 9]
const reversed = numbers.reverse(); // [9, 5, 4, 3, 1, 1]
const joined = numbers.join('-'); // '9-5-4-3-1-1'