24.01.16 TIL - 배열 내장 메소드

알고리즘 문제를 푸는 데에 배열이 자주 나오는데 머리에 정리가 안 되어 있으니 불편해서 한번 정리해 보려고 한다.

 프론트를 할 때 map함수는 자주 써봤는데, 다른 배열을 쓸 일이 없었다. 하지만, 이제는 메소드를 한번 정리해보고 필요할 때 필요한 메소드를 뽑아 쓸 수 있게 정리해봤다. 이렇게 정리해 놓으면 알고리즘을 공부할 때 조금이라도 빨리 떠오르지 않을까 한다.

 

1. 원본 배열을 수정하는 메서드

1) push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.

const fruits = ['apple', 'banana'];
fruits.push('orange'); // fruits: ['apple', 'banana', 'orange']

 

2) pop(): 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
const last = fruits.pop(); // last: 'orange', fruits: ['apple', 'banana']

 

 

3) shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
const first = fruits.shift(); // first: 'apple', fruits: ['banana', 'orange']

4) unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.

const fruits = ['banana', 'orange'];
fruits.unshift('apple'); // fruits: ['apple', 'banana', 'orange']

 

 

5) splice(): 배열의 기존 요소를 삭제하거나, 새 요소를 추가하여 배열의 내용을 변경합니다.

const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'mango'); // fruits: ['apple', 'mango', 'orange']

 

 

 

2. 새 배열을 반환하는 메서드

1) map(): 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새 배열을 반환합니다. 매핑(mapping)해주는 함수.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // doubled: [2, 4, 6]

 

2) filter(): 주어진 함수의 테스트를 통과하는 모든 요소로 이루어진 새 배열을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // evens: [2, 4]

 

3) slice(): 배열의 일부분을 얕은 복사하여 새 배열 객체로 반환합니다.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const citrus = fruits.slice(2, 4); // citrus: ['orange', 'mango']

 

4) concat(): 기존 배열에 다른 배열이나 값들을 합쳐서 새 배열을 만듭니다.

const fruits = ['apple', 'banana'];
const moreFruits = fruits.concat(['orange', 'mango']);

 

 

3. 결과값을 반환하는 메서드

1) reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 단일 결과값을 반환합니다.

*여기서 말하는 리듀서(reducer)는 배열의 모든 요소를 하나의 값으로 축소하는 함수입니다. 배열에서 전체 요소들을 하나의 값으로 줄이는 역할을 함으로써 리듀서라 하는 것이죠.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum: 10

2) find(): 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만족하는 요소가 없으면 **undefined**를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(num => num % 2 === 0); // firstEven: 2

3) some(): 배열의 어떤 요소라도 주어진 테스트 함수를 만족하면 **true**를, 모두 만족하지 않으면 **false**를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0); // hasEven: true

4) every(): 모든 요소가 주어진 테스트 함수를 만족하면 **true**를, 하나라도 만족하지 않으면 **false**를 반환합니다.

const numbers = [2, 4, 6, 8];
const isAllEven = numbers.every(num => num % 2 === 0); // allEven: true

5) includes(): 배열이 특정 요소를 포함하고 있는지 여부를 true 또는 **false**로 반환합니다.

const fruits = ['apple', 'banana', 'mango'];
const hasBanana = fruits.includes('banana'); // hasBanana: true

6) indexOf(): 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환합니다.

const fruits = ['apple', 'banana', 'mango'];
const bananaIndex = fruits.indexOf('banana'); // bananaIndex: 1

7) lastIndexOf(): **indexOf()**와 유사하지만, 배열을 끝에서부터 검색합니다.

const fruits = ['apple', 'banana', 'apple'];
const lastAppleIndex = fruits.lastIndexOf('apple'); // lastAppleIndex: 2

8) forEach(): 배열의 각 요소에 대해 주어진 함수를 실행합니다. 이 메서드는 배열을 순회하면서 각 요소에 대해 지정된 콜백 함수를 한 번씩 호출합니다. map()과 달리 항상 undefined를 반환합니다.