[JavaScript] 배열 메서드

배열 메서드

배열은 그 자체로 개체이므로 매서드가 있습니다.

 

1. slice

let arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.slice(2)); // cde
console.log(arr.slice(2,4)); // cd
console.log(arr.slice(-2)); //de

 

slice 매서드를 이용하여 배열의 요소를 자를 수 있습니다.

괄호 안에 인덱스를 넣어 사용할 수 있는데 -를 입력할 경우 끝에서부터 -1, -2... 이렇게 셉니다.

 

2. splice

splice의 결과는 slice와 동일하지만, splice는 원래 배열을 변경합니다.

splice해서 추출된 요소를 잃고 나머지 요소만 기존의 배열에 포함됩니다.

 

3. reverse

arr.reverse()
//edcba

 

reverse 메서드도 기존 배열을 변경하여 요소의 순서를 반대로 정렬합니다.

 

4. concat

concat은 두 배열을 하나의 배열로 만듭니다. 아래와 같이 쓸 수 있습니다.

arr.concat(arr2)

 

5. join

join은 구분자를 넣어 각 요소를 연결해주는 메서드입니다.

arr.join('')

 

6. at

at[0]은 [0]과 같은 역할을 합니다.

at을 사용하면 배열의 가장 마지막 요소나 거꾸로 숫자를 세서 요소를 추출할 때 편리하게 이용할 수 있습니다.

 

7. forEach

아래의 두 코드는 같은 결과를 얻을 수 있습니다.

forEach 메서드를 사용할 경우 더 읽기 쉽다는 장점이 있습니다.

for (const movement of movements) {
  if (movement > 0) {
    console.log(`You deposited ${movement}`);
  } else {
    console.log(`You withdrew ${Math.abs(movement)}`);
  }
};

movements.forEach (function(movement) {
  if (movement > 0) {
    console.log(`You deposited ${movement}`);
  } else {
    console.log(`You withdrew ${Math.abs(movement)}`);
  }
});

 

forEach 메서드의 매개변수는 (값, 인덱스, 전체 배열) 순서가 되어야 합니다.

forEach 구문에서는 전체를 다 루프할 때까지 빠져나올 수 없습니다.

이 경우에는 for of 구문을 사용하는 것이 좋습니다.

 

배열 외에도 세트나 맵에서도 forEach 구문을 사용할 수 있습니다.

세트에는 인덱스가 없지만 혼란을 방지하기 위해

두 번째 매개변수에 key 대신 다른 value를 입력할 수도 있습니다.

 

Map, Filter, Reduce

새 메서드의 공통점은 데이터 변환을 하는 메서드라는 점입니다.

맵은 배열에 또 다른 루프를 할 수 있는 메서드입니다.

forEach와 달리 맵은 새로운 배열을 만든다는 차이점이 있습니다.

필터는 기존 배열에 있는 것 중 특정 조건에 따라 필터링한 배열을 만들어줍니다.

reduce는 기존 배열의 요소를 더하는 등의 방법으로 하나의 값으로 만들어줍니다.

reduce는 첫 매개변수로 accumulator를 넣습니다.

 

Find, FindIndex

조건에 근거한 배열의 요소 하나를 검색할 수 있게 해주는 메서드입니다.

필터와 파인드의 다른 점은 필터는 배열을 반환한다는 점, 파인드는 요소를 반환한다는 점입니다.

 

findindex는 find와 비슷하지만 요소의 인덱스를 반환한다는 차이가 있습니다.

 

Some, Every

some은 includes와 비슷하지만 icludes가 동일한 값이 존재해야 참인 반면,

some은 조건을 설정하여 해당하는 값이 있는지의 여부를 알 수 있습니다.

const a = arr.some(i => i > 0)

 

every 메서드는 모든 요소가 조건에 대해 참이어야 참을 반환합니다.

 

Flat, FlatMap

배열 안에 배열이 중첩되어 있는 경우 한 단계 깊이의 배열을 없애고 플랫하게 만들어주는 메서드입니다.

const arr = [[1,2,3],[4,5,6],7,8];
console.log(arr.flat())

 

위의 코드 실행 결과 [1,2,3,4,5,6,7,8]이 출력됩니다.

 

맵과 플랫 메서드를 합친 것이 FlatMap입니다.

플랫 맵도 매핑을 하기 때문에 맵 매서드와 같은 방법으로 사용하면 됩니다.

 

Sorting

sort 매서드는 문자열 오름차순을 기반으로 정렬을 합니다.

숫자를 정렬할 때는 아래와 같이 사용할 수 있습니다.

arr.sort((a, b) => a - b);

 

 

Create, Fill

 

Array(2)를 통해 길이가 2인 빈 배열을 만들 수 있습니다.

이 배열을 채울 때 fill을 활용할 수 있습니다.

 

array from 을 사용하여 새 배열을 만들 수도 있습니다.

const x = Array.from({length:8}, () => 1);
const y = Array.from({length: 7}, (cur, i) => i+1)

 

x는 1이 8개 있는 배열이 되고 y는 1부터 7까지의 배열이 됩니다.