Javascript 배열 관련 메소드 정리

자주 쓰이는 배열 관련 메소드 모음

  • 검색용
  • 편집용
  • 복사용

1. 검색용

배열 내에서 element를 검색할때 자주 사용되는 메소드

  1. filter - 조건을 만족하는 모든 element들(반환타입이 배열)
  2. find - 조건을 만족하는 첫번째 element(반환타입 배열 아님)
  3. findIndex - 조건을 만족하는 첫번째 element의 배열 내 위치값(없으면 -1)

1.1. filter

배열 내에서 주어진 조건을 만족하는 element들을 배열로 반환함.

직원목록

const emps = [
  {name: 'hong', gender: 'M', age: 28},
  {name: 'jack', gender: 'M', age: 38},
  {name: 'jane', gender: 'F', age: 21}
]

위처럼 직원 목록이 배열로 주어질때 남성직원만 찾고 싶으면 아래와같이 filter 메소드를 사용함

남자만
const males = emps.filter((emp) => emp.gender === 'M')
// 두명 [{name:'hong',..}, {name:'jack',..}]
  • hong과 jack이 담긴 배열 반환

filter 메소드를 사용하려면 호출시 인자로 함수를 구현헤서 넘겨줘야 합니다. 이 함수는 filter 메소드 안에서 다음과 같이 사용됩니다.

filter내부
function filter(callback) {
  const found = []
  for(let i = 0; i < this.elems.length; i++) {
    if (callback(this.elems[i], i)) {
      found.push(this.elems[i])
    }
  }
  return found
}
  • callback은 filter 호출시 인자로 전달한 arrow 함수(emp) => emp.gender === 'M 입니다.
  • filter에서는 각각의 element를 callback 함수의 첫번째 인자로 전달해서 호출합니다.
  • callback 함수가 true를 반환하면 나중에 사용자에게 반환할 배열에 담습니다.

filter 메소드는 조건을 만족하는 element가 하나도 없을때 빈 배열을 반환합니다.

24살모두찾기
const age24Emp = emps.filter((emp) => emp.age === 24)

console.log(age24Emp)        // [] 출력
console.log(age24Emp.length) // 0 출력

1.2. find

filter 메소드와 다르게 Array.prototype.find 메소드는 조건을 만족하는 element를 찾으면 곧바로 반환합니다(반환 타입도 배열이 아님)

사용 방법은 filter 메소드와 동일하게 find 메소드 호출 시 callback 함수를 전달합니다.

JAVASCRIPT
const who = emps.find((emp) => emp.gender === 'M')

console.log(who.id) // 'hong'
  • 첫번째 원소(hong)가 조건을 만족하므로 반환함
  • 배열이 아닙니다.

find 메소드는 조건을 만족하는 element가 없을때 null을 반환합니다.

40세이상
const who = emps.find((emp) => emp.age >= 40)

console.log(who) // null 출력

2. 편집

배열의 element를 편집할때 사용되는 메소드

  1. splice

여기서 편집이란

  • 배열 내에서 특정 원소들을 제거함
  • 새로운 원소를 특정 위치에 끼워넣음

element 자체의 값을 변경하는 것은 취급하지 않습니다.

2.1. 삭제(원소 제거)

배열에서 element를 제거할때 splice 메소드에 두 개의 인자를 제공합니다.

아래와 같은 배열 arr에서 5를 제거하고 싶다면

JAVASCRIPT
const arr = [20, 30, 50, 70, 110]
arr.splice(2,1);

// result
[20, 30, 70, 110]
  • splice(pos, cnt) - 위치 pos에서 cnt개만큼을 제거함

2.2. 끼워넣기(추가)

아래와 같은 배열 arr에서 5와 7 사이에 100을 끼워넣고 싶다면

JAVASCRIPT
const arr = [2, 3, 5, 7, 11]

arr.splice(2, 0, 100)
  • index [0, 2) 사이의 두 원소(2, 3)를 삭제합