[자바스크립트] 배열 메서드 심층 분석

Array.from(iterable, mapFunc, this) 메서드

• 설명: 유사 배열 객체나 반복 가능한 객체(iterable)를 새로운 배열로 변환합니다.
• 매개변수:
  • iterable: 배열처럼 요소를 순회할 수 있는 객체
  • mapFunc(optional): 각 요소를 변환하는 함수 (선택적)
  • thisArg(optional): mapFunc에서 사용할 this 값 (선택적)
• 용도:
  • 유사 배열 객체(arguments, DOM NodeList 등)를 배열로 변환
  • 문자열을 문자 배열로 변환
  • Set, Map 등 다른 자료구조를 배열로 변환
  • 각 요소를 변환하면서 새로운 배열 생성

// 유사 배열 객체를 배열로 변환
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const arr = Array.from(arrayLike); // ['a', 'b']

// 문자열을 문자 배열로 변환
const str = 'hello';
const charArr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

// 각 요소를 제곱하여 새로운 배열 생성
const numbers = [1, 2, 3];
const squared = Array.from(numbers, x => x * x); // [1, 4, 9]

Array.of(values...) 메서드

• 설명: 주어진 값들을 요소로 하는 새로운 배열을 생성합니다.
• 용도:
  • 특정 값들을 가진 배열을 간편하게 생성
  • new Array(size)와 달리 숫자 하나만 주어져도 배열의 길이가 아니라 해당 숫자 하나를 요소로 가진 배열을 생성

// 빈 배열 생성
const emptyArray = Array.of(); // []

// 특정 값들을 가진 배열 생성
const arr = Array.of(1, 2, 3); // [1, 2, 3]

fill(value, startIndex, endIndex) 메서드

• 설명: 배열의 모든 요소를 주어진 값으로 채웁니다.
• 매개변수:
  • value: 채울 값
  • startIndex(optional): 시작 인덱스 (기본값: 0)
  • endIndex(optional): 끝 인덱스 (기본값: 배열 길이)
• 용도:
  • 배열 초기화, 특정 부분 채우기

const arr = [1, 2, 3];
arr.fill(0); // [0, 0, 0]
arr.fill(5, 1, 3); // [0, 5, 5, 3]

find(testingFunc, thisArg) 메서드

• 설명: 주어진 함수의 테스트를 통과하는 첫 번째 요소를 반환합니다.
• 매개변수:
  • testingFunc: 각 요소를 테스트하는 함수
  • thisArg(optional): testingFunc에서 사용할 this 값
• 용도:
  • 특정 조건에 맞는 요소 찾기

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(element => element > 3); // 4

findIndex(testingFunc, thisArg) 메서드

• 설명: 주어진 함수의 테스트를 통과하는 첫 번째 요소의 인덱스를 반환합니다.
• 매개변수:
  • testingFunc: 각 요소를 테스트하는 함수
  • thisArg(optional): testingFunc에서 사용할 this 값
• 용도:
  • 특정 조건에 맞는 요소의 위치 찾기

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex(element => element > 3); // 3

copyWithin(targetIndex, startIndex, endIndex) 메서드

• 설명: 배열의 일부를 다른 위치로 복사합니다.
• 매개변수:
  • targetIndex: 복사할 대상 위치
  • startIndex(optional): 복사 시작 위치
  • endIndex(optional): 복사 끝 위치
• 용도:
  • 배열 내부 요소 이동

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]

entries(), keys(), values() 메서드

• 설명: 배열의 각 요소에 대한 [인덱스, 값], 인덱스, 값을 순회할 수 있는 이터레이터 객체를 반환합니다.
• 용도:
  • for...of 문 등을 사용하여 배열 요소 순회

const arr = ['a', 'b', 'c'];
for (const [index, value] of arr.entries()) {
    console.log(index, value); // 0 a, 1 b, 2 c
}