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

JavaScript Array

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

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

length

배열이 몇개의 원소로 이루어져 있는지를 반환합니다.

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

push()

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

const numbers = [1, 2, 3];
const newLength = numbers.push(4, 5);
console.log(numbers);
// [1, 2, 3, 4, 5]
console.log(newLength);
// 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]

at()

해당 인덱스에 해당하는 Element 값을 반환한다.

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

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

find()

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

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

findIndex()

배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

const numbers = [5, 12, 8, 130, 44];
const index = numbers.findIndex((num) => num > 10);
console.log(index);
// 1 (12는 10보다 큰 첫 번째 요소이며 인덱스는 1)

includes()

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

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

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

isArray()

전달된 값이 배열인지 확인합니다. Array 생성자의 정적 메소드입니다.

console.log(Array.isArray([1, 2, 3]));
// true
 
console.log(Array.isArray("문자열"));
// false
 
console.log(Array.isArray({}));
// false

slice()

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

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

concat()

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

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

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]

flat()

중첩 배열을 지정한 깊이까지 평탄화하여 새로운 배열을 생성합니다.

const nestedArray = [1, 2, [3, 4, [5, 6]]];
const flatArray = nestedArray.flat();
console.log(flatArray);
// [1, 2, 3, 4, [5, 6]]
 
const deepFlatArray = nestedArray.flat(2);
console.log(deepFlatArray);
// [1, 2, 3, 4, 5, 6]

from()

유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만듭니다. Array 생성자의 정적 메소드입니다.

// 문자열을 배열로 변환
console.log(Array.from("hello"));
// ['h', 'e', 'l', 'l', 'o']
 
// Set을 배열로 변환
const set = new Set([1, 2, 2, 3, 3]);
console.log(Array.from(set));
// [1, 2, 3]
 
// 매핑 함수 사용
console.log(Array.from([1, 2, 3], (x) => x * 2));
// [2, 4, 6]

forEach()

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

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

reduce()

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

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

sort()

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

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

reverse()

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

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

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'

toLocaleString()

배열의 요소를 나타내는 문자열을 반환합니다. 요소는 로케일에 맞게 변환됩니다.

const prices = [1000, 2000, 3000];
const localizedPrices = prices.toLocaleString("ko-KR", {
  style: "currency",
  currency: "KRW",
});
console.log(localizedPrices);
// '₩1,000, ₩2,000, ₩3,000'
 
const dates = [new Date("2023-01-01"), new Date("2023-12-31")];
console.log(dates.toLocaleString("ko-KR"));
// '2023. 1. 1., 2023. 12. 31.'