Skip to content

JavaScript 배열 메서드 치트 시트

이 페이지에서는 일반적인 작업, 새로운 ES6 기능, 성능 최적화 등을 포함한 JavaScript 배열 메서드에 대한 자세한 가이드를 제공합니다.

배열 생성

JavaScript는 배열을 생성하는 여러 가지 방법을 제공합니다.

배열 리터럴 사용 

let arr = [1, 2, 3];

생성자 사용 

let arr = new Array(1, 2, 3);

Array.of 메서드 사용 

let arr = Array.of(1, 2, 3);

Array.from 메서드 사용 

let arr = Array.from('123'); // ['1', '2', '3']

배열 작업

배열은 데이터 추가, 삭제, 수정 및 조회를 위한 다양한 메서드를 제공합니다.

요소 추가

  • push: 배열의 끝에 하나 이상의 요소를 추가합니다.
  • unshift: 배열의 시작 부분에 하나 이상의 요소를 추가합니다.

요소 삭제

  • pop: 배열의 마지막 요소를 삭제합니다.
  • shift: 배열의 첫 번째 요소를 삭제합니다.
  • splice: 인덱스를 기준으로 원하는 수의 요소를 삭제합니다.

요소 찾기

  • indexOf: 배열에서 요소의 인덱스를 찾습니다.
  • includes: 배열에 특정 요소가 포함되어 있는지 확인합니다.

배열 반복 상호작용

  • forEach: 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행합니다.
  • map: 호출하는 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새로운 배열을 생성합니다.
  • filter: 제공된 함수에 의해 구현된 테스트를 통과하는 모든 요소로 새로운 배열을 생성합니다.

배열 변환

  • join: 배열의 모든 요소를 하나의 문자열로 결합합니다.
  • slice: 배열의 일부에 대한 얕은 복사본을 반환합니다.
  • concat: 두 개 이상의 배열을 병합합니다.

ES6 새로운 기능

ES6에서는 배열 작업에 많은 향상이 이루어졌습니다.

스프레드 연산자 (Spread Operator) 

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find 

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex 

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill 

arr.fill(0); // [0, 0, 0]

Array.prototype.includes 

arr.includes(2); // true

성능 최적화

대규모 배열을 처리할 때는 성능 최적화가 특히 중요합니다.

  • 대개 C++로 구현되어 JavaScript 루프보다 빠른 map 및 filter와 같은 네이티브 메서드를 사용해 보세요.
  • 빈번하게 조작되는 배열의 경우 Typed Arrays의 사용을 고려해 보세요.
  • 루프 내부에서의 DOM 작업은 피하세요. 대신 조작할 DOM 노드를 수집하고 한꺼번에 작업을 수행하세요.

결론

이 가이드를 통해 JavaScript 배열 작업에 대해 더 깊이 이해하게 되었기를 바랍니다. 자세한 내용은 MDN Web Docs를 참조하세요.