JS/JavaScript

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

인생아 2024. 8. 29. 00:20
반응형

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

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'
 
반응형