배열메소드 총정리

push

인수로 전달받은 모든 값을 원본 배열의 마지막에 추가하고 변경된 length 값을 반환

> 원본 배열 변경

> 성능x, 다음 두가지 방법을 쓰는게 좋음

const arr = [1, 2];

// push 와 동일
arr[arr.length] = 3;

// 스프레드 문법으로 원본 안건드리고
const newarr = [...arr, 3];

 

 

pop

원본배열에서 마지막 요소를 제거하고 제거한 요소를 반환

> 원본 배열 변경

 

unshift

인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 반환

> 원본 배열 변경

 

shift

원본배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.

> 원본 배열 변경

 

concat

인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열 반환

> 원본 배열 변경 X

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = [...arr1, ...arr2];

// 위와 동일
const concated = arr1.concat(arr2);

 

splice

원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용, 인수 3개 (start, delCount, items)

> 원본 배열 변경

> start : 원본 배열 제거를 시작할 인덱스

> delCount : 제거할 요소의 개수

> items : 제거한 위치에 삽입할 요소(옵션)

const arr = [1, 2, 3, 4];

const result = arr.splice(1, 2, 20, 30);
console.log(arr); // [1, 20, 30, 4]
console.log(result); // [2, 3] 제거된 요소 반환됨

const arr2 = [1, 2, 3, 4];
const result2 = arr2.splice(1, 0, 100);
console.log(arr2); // [1, 100, 2, 3, 4] 제거카운트가 0이므로 제거하지않고 추가만

const arr3 = [1, 2, 3, 4];
const result3 = arr.splice(1, 2);
console.log(arr3); // [1, 4] 추가할 요소를 지정하지 않았으므로 제거만 된다

 

const arr = [1, 2, 3, 1, 2];

// indexof 와 splice 조합
// array 에서 item 이 제거되지만 첫 번째 요소만 제거된다.
function remove(array, item) {
   // 제거할 요소의 index 찾기
   const index = array.indexOf(item);
   
   // 제거할 요소가 있으면 제거한다.
   if(index !== -1) array.splice(index, 1);
   
   return array;
}

// filter 로 모든 item 요소 제거도 가능하다
function removeAll(array, item) {
    return array.filter(v => v !== item);
}

 

 

slice

인수로 전달된 범위의 요소들을 복사하여 배열로 반환, 인수 2개(start, end)

> 원본 배열 변경 X

> start : 복사를 시작할 인덱스

> end : 복사를 종료할 인덱스, 이 인덱스에 해당하는 요소는 복사 안됨, 생략시 기본값은 length와 동일

 

join

원본 배열의 모든 요소들을 문자열로 변환 후, 인수로 전달받은 문자열 구분자로 연결해 반환. (생략시 콤마,)

> 원본 배열 변경 당연히 X

 

reverse

원본 배열 순서 뒤집기. 변경된 배열 반환

> 원본 배열도 변경됨!!

 

fill

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채워줌

> 원본 배열 변경

 

from

두번째 인수로 전달받은 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하며 호출하고, 콜백함수의 반환값으로 구성된 배열을 반환

// 인수로 전달받은 정수만큼 요소를 생성하고 0부터 1씩 증가하면서 요소를 채운다
const sequences = (length) => Array.from({length}, (_, i) => i);

// Array.from은 유사배열 객체를 손쉽게 배열로 만들어준다
console.log(sequences(3)); // [0, 1, 2]

 

 

includes

배열 내에 특정 요소가 포함되어 있는지 확인하여 true 혹은 false 반환

 

flat

인수로 전달한 깊이만큼 배열 평탄화

// 중첩배열을 평탄화하기 위한 값을 Infinity 로 지정하여 모두를 평탄화한다.
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]

 

sort

배열의 요소를 정렬한다. 기본적으로 오름차순 정렬, 정렬된 배열 반환

> 원본 배열 변경

// 숫자로 이루어진 배열은 그냥 쓰면 제대로 정렬 안됨
const points = [40, 100, 1, 5, 2, 25, 10];

// 숫자 배열의 오름차순 정렬
points.sort((a, b) => a - b);

// 숫자 배열의 내림차순 정렬
points.sort((a, b) => b - a);

 

forEach

반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수로 전달받아 반복 호출한다.

> 원본 배열 변경x

const numbers = [1, 2, 3]

// forEach 메서드는 원본배열을 변경하지 않지만 콜백함수를 통한 변경은 가능
// 콜백 함수의 세 번째 매개변수 arr은 원본 배열 numbers를 가리킨다.
// 따라서 콜백 함수의 세 번재 매개변수 arr 를 직접 변경하면 원본배열이 변경된다.
numbers.forEach((item, index, array) => { 
    arr[index] = item ** 2 
});
// 1, 4, 9
// 반환값은 언제나 undefined이다

 

map

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

그리고 콜백함수의 반환값들로 구성된 새로운 배열을 반환

> 원본 배열 변경x

const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item)); // 1, 2, 3
// map 메서드가 생성하는 새로운 배열의 length 는 기준배열의 length와 반드시 일치

 

filter

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

그리고 콜백함수의 반환값이 true 인 요소로만 구성된 새로운 배열을 반환

> 원본 배열 변경x

const numbers = [1, 2, 3, 4, 5];

const odds = numbers.filter(item => item % 2); // 1, 3, 5

 

reduce

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

그리고 콜백 함수의 반환값을 다음 순회 시에 콜백함수의 첫 번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다.

> 원본 배열 변경x

// 평균 구하기
const values = [1, 2, 3, 4, 5, 6];

const average = values.reduce((acc, curr, i, {length}) => {
    // 마지막 순회가 아니면 누적값을 반환하고 마지막 순회면 누적값으로 평균을 구해 반환
    return i === length - 1 ? (acc + curr) / length : acc + curr;
}, 0);

// 최대값 구하기
const max = values.reduce((acc,  curr) => (acc > curr ? acc : curr), 0);
// 이쪽이 편하다
const max2 = Math.max(...values);

// 요소의 중복 횟수 구하기
const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];

const count = fruits.reduce((acc, curr) => {
   // 첫번째 순회시 acc는 초기값인 {}이고 curr 은 banana이다.
   // 초기값으로 전달받은 빈 객체에 요소값인 curr을 키로, 요소의 개수를 값으로 할당
   // 만약 프로퍼티 값이 undefined면 프로퍼티 값을 -1초기화
   acc[curr] = (acc[curr] || 0) + 1;
   return acc;
}, {});

// 초기값 생략 가능하지만 전달하는 것이 안전

 

 

find

자신을 호출한 배열 요소를 순회 하면서 인수로 전달된 콜백함수를 호출하여 반환값이 트루인 첫번째 요소만 반환. 존재하지 않는 다면 undefined 반환

 

findIndex

자신을 호출한 배열 요소를 순회 하면서 인수로 전달된 콜백함수를 호출하여 반환값이 트루인 첫번째 요소의 인덱스를 반환. 존재하지 않는다면 -1 반환.