JavaScript 배열 메서드 총정리
1. 배열 변형 (원본 변경)
| 메서드 | 설명 |
|---|---|
push(item) | 배열 끝에 요소 추가 |
pop() | 배열 끝 요소 제거 후 반환 |
unshift(item) | 배열 앞에 요소 추가 |
shift() | 배열 앞 요소 제거 후 반환 |
splice(index, count, item1, item2, ...) | 특정 위치에서 요소 추가/제거 |
reverse() | 배열 요소 순서 뒤집기 |
sort(compareFn) | 배열 정렬 (기본: 문자열 기준) |
fill(value, start, end) | 특정 값으로 배열 채우기 |
copyWithin(target, start, end) | 특정 위치의 요소를 복사하여 덮어쓰기 |
2. 새로운 배열 반환 (원본 유지)
| 메서드 | 설명 |
|---|---|
map(callback) | 배열을 변형하여 새로운 배열 생성 |
filter(callback) | 조건을 만족하는 요소만 모아 새 배열 생성 |
slice(start, end) | 배열의 특정 부분을 잘라 새 배열 생성 |
concat(array2) | 두 배열 합쳐서 새 배열 생성 |
flat(depth) | 다차원 배열을 평탄화 |
flatMap(callback) | map + flat(1) 효과 |
3. 검색 & 요소 찾기
| 메서드 | 설명 |
|---|---|
indexOf(item) | 특정 요소의 첫 번째 인덱스 반환 |
lastIndexOf(item) | 특정 요소의 마지막 인덱스 반환 |
includes(item) | 배열에 요소가 포함되어 있는지 확인 (true/false) |
find(callback) | 조건을 만족하는 첫 번째 요소 반환 |
findIndex(callback) | 조건을 만족하는 첫 번째 요소의 인덱스 반환 |
some(callback) | 하나라도 조건을 만족하면 true |
every(callback) | 모든 요소가 조건을 만족해야 true |
4. 배열 합치기 & 변환
| 메서드 | 설명 |
|---|---|
join(separator) | 배열을 문자열로 변환 (구분자 지정 가능) |
toString() | 배열을 쉼표로 구분된 문자열로 변환 |
reduce(callback, initialValue) | 배열 요소를 누적하여 하나의 값 반환 |
reduceRight(callback, initialValue) | reduce와 같지만 오른쪽부터 실행 |
5. 반복 & 순회
| 메서드 | 설명 |
|---|---|
forEach(callback) | 각 요소에 대해 함수 실행 (반환값 없음) |
entries() | [index, value] 쌍의 이터레이터 반환 |
keys() | 인덱스의 이터레이터 반환 |
values() | 요소 값의 이터레이터 반환 |
6. 기타 유용한 메서드
| 메서드 | 설명 |
|---|---|
isArray(value) | 값이 배열인지 확인 (Array.isArray()) |
내가 자주 사용하는 메서드만 따로 들여다보자
메서드
indexOf
- 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환하는 메서드
- 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러개 있다면 첫번째로 검색된 요소의 인덱스를 반환
- 원본배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환
요소의 존재여부를 알고 싶다면,include()를 쓰는것을 추천한다.
includes
- 배열내에 특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환한다.
includes(찾을 요소, start)start는 생략시 0부터 확인한다.
push
- 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티값을 반환한다. => 원본배열 변경
==> 원본배열이 수정되어야 하는 상황이 아니라면 push보단 스프레드 연산자를 추천
//example
const arr = [1,2];
const newArr = [...arr, 3]; // [1,2,3]
pop
- 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.=>원본 배열 변경
splice
- 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다.
splice(start, deleteCount, items)
start: 원본배열 제거 시작 인덱스
deleteCount: 원본배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수. 만약 음수일경우 -n번째요소를 가라킴
items: 제거한 위치에 삽입할 요소들의 목록
//example
const arr = [1,2,3,4];
const result = arr.splice(1,2,20,30)
//result = [2,3] 삭제된 배열이 반환되는 것을 볼 수 있다
//arr = [1,20,30,4] 2,3이 삭제된 뒤 배열의 모습deleteCount가 0이면, start뒤에 바로 삽입하게 된다.
slice
- 인수로 전달된 범위의 요소들을 복사하여 배열로 반환 => 원본배열 변환X
slice(start, end)
start: 복사 시작 인덱스 - 음수일경우 배열의 끝에서부터의 인덱스를 나타냄
end: 복사종료 인덱스 - 생략시 기본값은 length프로퍼티 값
이때의 복사본은 얕은 복사를 통해 생성된다 (복사된 요소의 참조값이 같다는 뜻)
나중에 다시 포스팅하겠지만, 잠시 짚고 넘어가자면,
얕은복사와 깊은 복사
- 객체를 프로퍼티값으로 갖는 객체의 경우 얕은 복사는 한 단계 까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말함
join
- 원본 배열의 모든 요소를 문자열로 변환한 후, 기본 구문자로 연결한 문자열을 반환
//example
const arr = [1,2,3,4];
arr.join() //1,2,3,4 -> default ,
arr.join('') //1234reverse
- 원본 배열의 순서를 반대로 뒤집는다. 반환값은 변경된 배열이다. => 원본배열 변경
fill
- 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. => 원본배열 변경
//example
const arr = [1,2,3]
arr.fill(0) //[0,0,0]fill(채울 요소, start, end)이다. 참고로 end-1까지만 바뀐다는걸 잊지 말자
배열 고차 함수 (HOC)
sort
- 배열의 요소를 정렬한다. 원본배열을 직접 변경하며 정렬된 배열을 반환한다.
=> default는 오름차순으로 정렬한다.
숫자로 되어있는 배열의 경우 정상적으로 정렬되지 않는다
기본적으로 유니코드 코드포인트의 순서를 따르기 때문이다. 숫자이더라도, 문자열로 변환한 후 정렬한다.
숫자를 정렬할때는 정렬순서를 정의하는 비교 함수를 인자로 전달해야한다.
const points = [40,2,1,4,100];
points.sort((a,b)=>a-b) //[1,2,4,40,100]
//반대의 b-a의 경우에는 내림차순으로 정렬된다.timesort 알고리즘을 사용한다. (기존엔 quicksort알고리즘 이였다)
forEach
- for문을 대체할 수 있는 고차함수
const num = [1,2,3]
const pow = [];
num.forEach((n)=> pow.push(n**2))// [1,4,9]num의 모든 요소를 순회하며 콜백함수를 반복 호출한다.
forEach는 3개의 인수를 전달할수 있다.
~.forEach(요소값, 인덱스, this)를 받는다
여기서 this는 콜백함수 내부의 this가 아니다. 위 예시로는 ~ 이게 되겠다.
반환값은 undefined이다.
forEach메서드는 break, continue문을 사용할수없다. 모든 요소를 순회해야만 한다.
map
- 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
반환값은 콜백함수의 반환값을로 구성된 새로운 배열을 반환한다. => 원본 배열은 변경되지 않는다.
map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 Map메서드를 호출한 배열의 length 프로퍼티값과 반드시 일치한다.
쉽게 말해, 원본 배열과 생성된 배열은 1:1 매핑한다.
~.map((요소값, 인덱스, this)=>{})3가지 인수를 받는다.
filter
- 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
콜백함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다 =>원본 배열은 변경되지 않는다.
조건에 맞는 값을 새로운 배열에 담아주기 때문에, length프로퍼티 값은 같거나 작다.
~.filter((요소값, 인덱스, this)=>{}) 3가지 인수를 받는다.
reduce
- 조금 복잡하게 보일수 있다.
- 자신을 호출한 배열의 모든요소를 순회하며 인수로 전달받은 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.
=> 원본 배열은 변경되지 않는다.
~.reduce((accumulator, currentValue, index, array)=>{}, 초기값)
accumulator: 초기값 또는 누적값(필수)
currentValue: 현재 순회 중인 요소(필수)
index: 현재 요소의 인덱스
array: this(호출된 배열 자체)
평균구하기, 최대값 구하기, 중복 횟수 구하기 등 한가지 값을 도출해내는데 특화된 함수다.
map, filter, some, every, find와 같은 모든 배열의 고차함수는 reduce로 구현이 가능하다.
=> 참고로 초기값은 지정해주는게 좋다. 빈 배열로 호출될경우에 에러가 발생한다. 혹은, 객체가 전달 되었을때도 오류가 발생할수 있다.
some
- 콜백함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다.
~.some((요소, 인덱스, this)=>{})3가지 인수를 받는다.
every
- 콜백함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이라면 false를 반환한다.
호출한 배열이 빈 배열일 경우에는 언제나 true를 반환한다.
~.every((요소, 인덱스, this)=>{})3가지 인수를 받는다.
find
- 반환값이 true인 첫번째 요소를 반환한다. true인 반환값이 존재하지 않으면 undefined를 반환한다.
~.find((요소, 인덱스, this)=>{})3가지 인수를 받는다.
filter와 뭐가 다를까? - filter는 true인 요소만 추출하여 새로운 배열을 반환한다
따라서 filter는 배열을 반환한다. - find는 첫 요소를 반환하기 때문에 결과값이 배열이 아닌 요소값이다.
findIndex
- 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 없다면 -1을 반환한다.
~.findIndex((요소, 인덱스, this)=>{})3가지 인수를 받는다.
정리하며
모든 함수와 모든 동작 방식들을 외우고 바로 코딩에 접목시키기는 어려움이 있다.
하지만 하나씩 코테, 프로젝트에 도입하다보면 적재적소에 코드를 활용할수 있을것이라고 생각한다.
자주 들려서 자주 만나보자.
Web개발자