JavaScript의 20가지 Array Method의 사용 방법

JavaScript의 20가지 Array Method의 사용 방법에 대해서 알아보자.

push()

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

const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers);
// [1, 2, 3, 4, 5]

pop()

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

const numbers = [1, 2, 3];
const lastNumber = numbers.pop();
console.log(numbers);
console.log(lastNumber);
// [1, 2]
// 3

shift()

배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다.

const numbers = [1, 2, 3];
const firstNumber = numbers.shift();
console.log(firstNumber);
// 1

unshift()

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

const numbers = [1, 2, 3];
numbers.unshift(0, -1);
console.log(numbers);
// [0, -1, 1, 2, 3]

find()

제공된 테스트 함수를 만족하는 배열의 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((num) => num > 3);
console.log(foundNumber);
// 4

some()

배열의 적어도 하나의 요소가 제공된 함수에서 구현한 테스트를 통과하는지 테스트합니다. 하나라도 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

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

every()

배열의 모든 요소가 제공된 함수에서 구현한 테스트를 통과하는지 테스트합니다. 모든 요소가 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const allEvenNumbers = numbers.every((num) => num % 2 === 0);
console.log(allEvenNumbers);
// false

sort()

배열의 요소를 정렬하여 반환합니다. 기본 정렬 순서는 요소를 문자열로 변환한 뒤 UTF-16 코드 단위 값을 기준으로 비교합니다.

const numbers = [1000, 20, 200, 30];
numbers.sort((a, b) => a - b);
console.log(numbers);
// 20, 30, 100, 200

includes()

배열에 특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const includesThree = numbers.includes(3);
console.log(includesThree);
// true

slice()

배열의 일부를 복사하여 새로운 배열 객체로 반환합니다. 원본 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(0, 2);
console.log(slicedNumbers);
// [1, 2]

map()

배열의 각 요소에 대해 제공된 함수를 호출한 결과로 새로운 배열을 생성합니다.

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

filter()

제공된 함수에서 구현한 테스트를 통과하는 모든 요소로 구성된 새로운 배열을 생성합니다.

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

reduce()

배열의 각 요소에 대해 리듀서 함수를 실행하여 단일 결과 값을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);
// 15

forEach()

배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.

const numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num * 2));
// 2, 4, 6

indexOf()

주어진 요소가 배열에서 처음 나타나는 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.

const fruits = ['banana', 'apple', 'orange', 'grape'];
const appleIndex = fruits.indexOf('apple');
console.log(appleIndex);
// 1

lastIndexOf()

주어진 요소가 배열에서 마지막으로 나타나는 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.

const fruits = ['banana', 'apple', 'orange', 'grape', 'apple'];
const lastAppleIndex = fruits.lastIndexOf('apple');
console.log(lastAppleIndex);
// 4

reverse()

배열의 요소 순서를 반대로 바꿉니다. 첫 번째 요소가 마지막 요소가 되고, 마지막 요소가 첫 번째 요소가 됩니다.

const numbers = [1, 2, 3];
numbers.reverse();
console.log(numbers);
// [3, 2, 1]

concat()

원본 배열과 추가 요소들을 포함하는 새로운 배열을 반환합니다.

const numbers = [1, 2, 3];
const moreNumbers = [4, 5];
const allNumbers = numbers.concat(moreNumbers);
console.log(allNumbers);
// [1, 2, 3, 4, 5]

join()

배열의 모든 요소를 문자열로 결합합니다. 요소들은 지정된 구분자로 구분됩니다.

const fruits = ['banana', 'apple', 'orange', 'grape'];
const joinedFruits = fruits.join(', ');
console.log(joinedFruits);
// 'banana, apple, orange, grape'

toString()

배열과 그 요소를 나타내는 문자열을 반환합니다.

const numbers = [1, 2, 3];
const numbersString = numbers.toString();
console.log(numbersString);
// '1, 2, 3'