Array 만들기

 

# 배열 만드는 방법

 

1. 그냥 만들기

const arr = [1, 2, 3, 4, 5]; // 정적인 배열 생성

 

2. Array 생성자로 만들기

# new Array( )

- 초기화되지 않고 빈슬롯으로 생성된다.

- 빈 슬롯(empty slots) 상태에서는 map,forEach 등 메서드 실행 불가

- fill()로 값을 채워준 뒤에 가능

const arr = new Array(5); // 길이가 5인 배열 [ empty * 5 ]
const filledArr = new Array(5).fill(0); // 길이가 5이며, 0으로 채워진 배열 [0,0,0,0,0]

# Array()

- 일부 내장 생성자 (Array(), String(), Number(), Boolean(), Object()) → new 없이도 동작 가능

- new를 붙이면 명시적으로 객체 인스턴스를 생성하지만, new 없이 호출하면 값 변환 함수처럼 동작함

✅ new 없이 호출하는 생성자 함수 = 값 변환 함수 = 값을 특정 타입으로 변환하는 함수

- new Array() 와 동일하게 동작..

console.log(Array(5)); // [ <5 empty slots> ]  
console.log(Array(1, 2, 3, 4, 5)); // [1, 2, 3, 4, 5]  
console.log(new Array(1, 2, 3, 4, 5)); // [1, 2, 3, 4, 5]

- 여러 개의 인자를 넣으면 해당 값들이 배열의 요소로 들어감.

- 인자가 하나이고 숫자일 경우, 해당 숫자가 배열의 길이(length)로 해석됨.

 

예시)

let board = Array(3).fill().map(()=>Array(3).fill(false));
// 어차피 값이 다 undefined라서 map 안에 함수에 인자가 필요없다고한다..

[ [false,false,false], [false,false,false], [false,false,false] ]

 

 

# fill() 메서드

: 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경한다.

fill(value)
fill(value, start) // start : 채우기 시작 할 인덱스
fill(value, start, end) // end : 채우기의 끝 인덱스

 

예시)

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]

console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]

console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]

 

- 그냥 fill() 을 하면 배열의 원소가 undefined로 채워진다.

console.log(Array(3).fill());  // [undefined, undefined, undefined]

 

3.  Array.from()

: 유사 배열 객체(array-like objects) 또는 이터러블(iterable) 객체를 배열로 변환하는 메서드 

 

사용법 1 . 유사배열 객체를 배열로 변환

console.log(Array.from("hello")); 
// ['h', 'e', 'l', 'l', 'o']

→ 문자열을 배열로 변환

 

console.log(Array.from(new Set([1, 2, 3, 3, 2]))); 
// [1, 2, 3]

→ Set(집합)을 배열로 변환하여 중복 제거

Array.from({ length: 5 }) // [ undefined,undefined,undefined,undefined,undefined ]

const obj = { 0: "a", 1: "b", 2: "c", length: 3 };
const arr = Array.from(obj); 
console.log(arr); // ["a", "b", "c"]

-> length 로 변환
- 초기값은 undefined로 채워진다.

- 그러므로 메서드를 바로 사용할 수 있다.

 

 

사용법 2. 두번째 인자로 콜백 함수 사용하기

: 두 번째 인자에 콜백 함수를 제공하면, 각 요소를 원하는 값으로 변환 가능

 const arr = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

→ { length: 5 }를 배열로 만들면서 각 요소를 가공 가능

 

 

- 2차원 배열 만들기

✅ 언제 사용?

• 그래프 탐색 (BFS, DFS)
• DP 테이블 생성
• 게임 보드판 만들기

let matrix = Array.from({ length: 3 }, () => new Array(4).fill(0));
console.log(matrix);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

 

 

const arr1 = Array.from({ length: 5 }).map((_, i) => i); // 오류 발생? 확인 필요
console.log(arr1);