Array Constructor arrayFrom 생성자 함수

1. Array 생성자 함수:

자바스크립트에서 Array 생성자 함수는 새로운 배열을 생성하는데 사용됩니다. 배열은 여러 개의 값을 하나의 변수에 저장하거나 처리할 때 유용하게 사용됩니다. 다음은 Array 생성자 함수의 사용법입니다:

// 배열 리터럴을 사용하는 방법
const arrLiteral = [1, 2, 3];

// Array 생성자 함수를 사용하는 방법
const arrConstructor = new Array(1, 2, 3);

두 가지 방법 모두 [1, 2, 3]이라는 동일한 배열을 생성합니다. 배열 리터럴은 직관적이고 간단하지만, Array 생성자 함수는 동적으로 배열을 생성하거나 길이를 동적으로 결정해야 할 때 유용합니다.

// 배열의 길이를 동적으로 설정하는 예시
const length = 5;
const dynamicArray = new Array(length); // 길이가 5인 빈 배열 생성
console.log(dynamicArray); // 출력: [empty x 5]

// 동적으로 배열을 채우는 예시
const dynamicFilledArray = new Array(length).fill(0); // 0으로 채워진 배열 생성
console.log(dynamicFilledArray); // 출력: [0, 0, 0, 0, 0]

2. fill 메소드:

fill() 메소드는 배열의 모든 요소를 정적인 값으로 채우는데 사용됩니다. 이 메소드는 원본 배열을 변경하며, 새로운 배열을 반환하지 않습니다. 다음은 fill() 메소드의 사용법과 예시입니다:

const arr = [1, 2, 3, 4, 5];
arr.fill(0); // 모든 요소를 0으로 채웁니다.
console.log(arr); // 출력: [0, 0, 0, 0, 0]

// 특정 인덱스 범위 내의 요소를 채우는 예시
const arr2 = [1, 2, 3, 4, 5];
arr2.fill('a', 1, 4); // 인덱스 1부터 3까지('2', '3', '4') 요소를 'a'로 채웁니다.
console.log(arr2); // 출력: [1, 'a', 'a', 'a', 5]

3. map 메소드:

map() 메소드는 배열의 모든 요소에 대해 주어진 콜백 함수를 호출하고, 콜백 함수의 반환값들을 모아 새로운 배열로 반환합니다. 원본 배열은 변경되지 않습니다. 다음은 map() 메소드의 사용법과 예시입니다:

const arr = [1, 2, 3];
const mappedArr = arr.map((num) => num * 2); // 각 요소를 2배로 곱하여 새 배열 생성
console.log(mappedArr); // 출력: [2, 4, 6]

4. from 메소드:

Array.from()은 ES6(ECMAScript 2015)에서 도입된 자바스크립트의 내장 함수로, 다양한 형태의 데이터를 배열로 변환하는 데 사용됩니다. 이 함수는 유사 배열 객체(array-like object)나 반복 가능한(iterable) 객체를 실제 배열로 변환하고자 할 때 유용하게 사용됩니다. 유사 배열 객체는 length 속성을 가지고 있으며, 숫자로 인덱싱된 요소들이 포함된 객체를 말합니다. 반복 가능한 객체는 배열처럼 요소들을 순회할 수 있는 객체를 말합니다.

Array.from()의 일반적인 구문은 다음과 같습니다:

Array.from(iterable[, mapFn[, thisArg]])

• iterable: 변환하고자 하는 유사 배열 객체나 반복 가능한 객체입니다.
• mapFn (옵션): 배열의 각 요소를 변환하기 위해 호출되는 함수로, 새로운 배열을 생성하는데 사용됩니다.
• thisArg (옵션): mapFn 함수가 호출될 때 사용되는 this 값을 설정할 수 있습니다.

간단한 예시를 통해 Array.from()의 사용법을 살펴보겠습니다:

// 문자열을 배열로 변환
const str = 'Hello';
const strArray = Array.from(str);
console.log(strArray); // 출력: ['H', 'e', 'l', 'l', 'o']

// Set을 배열로 변환
const set = new Set([1, 2, 3, 2, 1]);
const setArray = Array.from(set);
console.log(setArray); // 출력: [1, 2, 3]

// Map의 키를 배열로 변환
const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
const keysArray = Array.from(map.keys());
console.log(keysArray); // 출력: [1, 2, 3]

// 배열의 요소를 변환하여 새로운 배열 생성
const numbers = [1, 2, 3, 4, 5];
const squaredArray = Array.from(numbers, num => num * num);
console.log(squaredArray); // 출력: [1, 4, 9, 16, 25]

Array.from()은 반복 가능한 객체에 대해서는 배열의 spread 문법([...] 구문)과 비슷하게 동작합니다. 그러나 Array.from()은 변환하려는 객체가 반드시 반복 가능해야 하며, length 속성을 가진 유사 배열 객체도 변환할 수 있습니다. 이러한 유연성으로 인해 코드를 간결하게 작성하고 다양한 상황에 적용할 수 있습니다.

5. keys 메소드:

keys() 메소드는 배열의 인덱스를 가지고 있는 새로운 배열 이터레이터 객체를 반환합니다. 이 이터레이터 객체를 통해 배열의 인덱스들을 순회할 수 있습니다. 다음은 keys() 메소드의 사용법과 예시입니다:

const arr = ['a', 'b', 'c'];
const keysIterator = arr.keys();

for (const key of keysIterator) {
  console.log(key); // 출력: 0, 1, 2
}

위 예시에서 keys() 메소드는 배열 arr의 인덱스 0, 1, 2를 가지고 있는 이터레이터 객체를 반환하고, for...of 루프를 통해 배열의 인덱스들을 순회하고 출력하였습니다.

이로써 Array 생성자 함수, fill(), map(), Array.from(), 그리고 keys() 메소드에 대해 상세하게 설명하고 각각의 예시를 통해 사용법을 확인하였습니다. 이 함수들은 자바스크립트에서 배열을 다루는데 매우 유용하게 사용되며, 적절히 응용하면 코드를 간결하고 효율적으로 작성할 수 있습니다.