[JS] JS에서 배열 만들기(Array, Array.of, Array.from)

프론트엔드 직무에서는 JS로 코테를 보는 경우가 많아서,

알고리즘을 기존에 풀던 파이썬으로 한 번 풀고, JS로 한번 풀려고 한다.

 

우선 파이썬에서 만약 0이 10001개로 이루어진 배열을 만들려면,

arr = [0 for _ in range(10001)]
arr = [[0] * 10001]

이 두 방법을 사용하면 된다.

 

그럼 JS에서는 어떤식으로 배열을 만들 수 있을까?

---

 

📌 Array: 빈 배열 만들기

우선 길이가 10001인 빈 배열을 만들고 싶다면,

const arr = new Array(10001);

 

Array 함수 안에 원하는 길이를 적어주면 된다.

 

이 때, arr는 크기만 있는 빈 배열이므로 출력하면 다음과 같다

비어있는 10001개의 공간

당연히 이 안에 값을 일일히 지정해 줄 수도 있다

const arr = new Array(10001)
console.log(arr) // (10001) [empty × 10001]
arr[0] = 10
console.log(arr)  // (10001) [10, empty × 10000]

 

근데 위와 같은 방법으로 [1, 2, 3] 이런 배열을 만들고 싶다면, 이렇게 번거롭게 될 수 있다.

const arr = new Array(3)
arr[0] = 1
arr[1] = 2
arr[2] = 3

 

📌 Array.of:원하는 인수를 갖는 배열 만들기

[1, 2, 3]은 Array.of를 사용하면 쉽게 만들 수 있다.

const arr = Array.of(1, 2, 3)
console.log(arr)  // [1, 2, 3]

 

Array.of는 공식 문서에 따르면 "인자의 개수나 유형에 관계없이 가변적인 수의 인자를 가진 새 Array 인스턴스를 생성합니다."라고 한다.

인자의 개수나 유형에 관계없다고 하니까 이런것도 된다.

// 다른 타입 가능
const arr1 = Array.of(1, "2", 3)
console.log(arr1)  // [1, '2', 3]

// 비어있는 배열 생성 가능
const arr2 = Array.of()
console.log(arr2)   // []

// 배열을 넣어줄 수도 있음
const arr3 = Array.of(arr1)
console.log(arr3)  // [[1, '2', 3]]

 

근데 이 방법으로 아까 만든 0이 10001개 있는 배열은 만들기가 힘들다. -> 그래서 from을 사용하자

 

📌 Array.from: 배열을 편하게 만들기

공식문서에 따르면 Array.from의 역할은 "Array.from() 정적 메서드는 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성합니다."라고 한다.

 

Array.from의 사용방법

Array.from(arrayLike, mapFn, thisArg)

• arrayLike: 배열로 변환할 순회 가능한 객체 또는 유사 배열 객체
• mapFn(opt): 배열의 모든 요소에 대해 호출할 함수, 두가지 인수를 가짐
  • element: 배열에서 처리 중인 현재 요소
  • index: 배열에서 처리 중인 요소의 인덱스
• thisArg(opt): mapFn 실행 시에 this로 사용할 값

 

🔍 유사 배열 객체란?
배열처럼 동작하지만, 실제로는 배열이 아닌 객체

• 실제로는 배열이 아니므로, push, pop, map, filter등은 사용 불가능
• 숫자 형태의 index가 있음
• length 속성이 있음
• Array.from을 이용해 배열로 바꿔줄 수 있음

Array.from 사용해보기

아까 하던 0이 10001개로 이루어진 배열을 만드는 방법은 다음과 같다.

const arr = Array.from({length: 10001}, () => 0)

여기서 {length: 10001}은 길이가 10001인 유사배열객체이고, () => 0은 객체의 모든 요소에 0을 넣으라는 mapFn이다.

이를 이용해서 비슷하게 0부터 10000까지의 숫자로 이루어진 배열을 생성하려면 비슷하게

const arr = Array.from({lenght: 10001}, (_,idx) => idx)

이런식으로 해주면 된다. 여기서 (_, idx) => idx는 _는 사용하지 않는 element를 나타낸 것이고, idx는 각 요소의 인덱스인데, 0번 자리에 숫자  0이 들어가므로 그래도 idx를 반환해주면 된다.

 

 

---

위의 방법을 사용해서 파이썬 코드를 JS 코드로 바꿀 수 있었다.

백준 4673번 셀프넘버

# 파이썬 코드
# 셀프넘버

def make_num(n):
    new = n
    while True:
        if n // 10 >= 1:
            new += n % 10 
            n = n // 10
        else:
            new += n
            break
    return new

dic = [0 for _ in range(10001)]
dic[0] = 1
for i in range(1, 10001):
    next_num = make_num(i)
    if next_num <= 10000:
        dic[next_num] = 1

for i in range(10001):
    if dic[i] == 0:
        print(i)

 

// JS로 다시 풀어보기

const makeNumber = (n) => {
    let newNum = n;
    while (true) {
        if (Math.floor(n / 10) >= 1) {
            newNum += n % 10
            n = Math.floor(n/10)
        } else {
            newNum += n
            break
        }
    }
    return newNum
}

const dic = Array.from({length: 10001}, () => 0)
dic[0] = 1
for (i=1; i<=10001; i++) {
    const nextNum = makeNumber(i)
    if (nextNum <= 10000) {
        dic[nextNum] = 1
    }
}

dic.forEach((ele, idx) => {
    if (ele == 0) {
        console.log(idx)
    }
})