내 애착 메소드 Array.from 으로 표 만들기

Array.from으로 표를 만들 수 있다.

사실 아니다.

배열인데 모양이 표 모양이다.

이걸 2차원 배열 이라고 한단다.

놀라운 배열의 세계.

 

내가 처음 본 코드는

const graph = Array.from(Array(n), () => Array(n).fill(0))

 

이거였다.

길이가 n인 배열을

각 value에 길이가 n이고 value가 0인 배열을 만들겠다는건데..

 

[

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ]

]

n이 6이라 치면 이런 배열 만들겠다는 거다.

이걸 2차원 배열이라 하나봄

 

저 코드처음 봤을 때 사실 뭐지 싶었다.

Array를 쓰는걸 별로 안좋아해서 

안쓰다 보니 눈에 잘 안들어왔다.

console.log(Array(3))   // [empty, empty. empty]
console.log(Array(3,5)) // [3, 5]

이렇게 되는게 상당히 마음에 안든다. 

그래서 앞으로도 최대한 안 쓸 예정이다.

 

그래서 난 평소에 그냥 Array.from을 쓰는 편이다.

조금 코드가 복잡해져도 난 Array.from이 좀 더 직관적이라 편한 것 같다.

 

위에 코드를 Array 대신 전부 Array.from으로 바꾸면

const a = Array.from({ length: n }, () => 
          Array.from({ length: n }, () => 0));

마찬가지로 n이 6이면

[

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ],

[ 0, 0, 0, 0, 0, 0 ]

]

이런 배열이 나온다.

결과는 같다.

 

얘기가 나온 김에 내 애착 메소드 Array.from에 대해 조금 더 자세히 정리해볼까 한다.

사실 얘도 좀 헷갈린다.

헷갈리니까 더 애착을 두고, 옆에다 내비두고,

자주 쳐다봐야지...

 

1. 
Array.from('Tei');
//["T", "e", "i"]

2.
Array.from([1, 2, 3], x => x + x);
//[2, 4, 6]

MDN에서 긁어왔다.

1은 문자열을 인자로 받아 배열로 반환

2는 배열을 첫번째 인자로 받아서, 두번째 인자로 받은 함수를 통해 지 맘대로 바꾼 뒤에 반환한다.

 

표만들기에 사용된 방법은 2번의 예시와 일치한다.

으아니이.. 예시는 배열을 첫번째 인자로 받았고

표 만들기는 객체를 인자로 받았잖슴~

 

맞다. 근데 객체가 그냥 객체가 아니다.

{length:20}은 그냥 객체가 아닌 유사배열이다.

참고로 나는 배열조무사 라고 부른다.

 

이거에 대해 조금 더 알아 보려면 배열이란 녀석을 좀 더 파고들어야 한다.

배열은 object다.

 

const arr = [1, 2, 3];
console.log(typeof arr);  //object

object긴 object인데 

이터러블 프로토콜을 따르고,

length속성을 가지고 있고,

Array method를 가지고 있는

object를 

JavaScript에서는 배열이라고 한다.

const a = Array.from({ length: n }, () => 
          Array.from({ length: n }, () => 0));

그러니까 여기서 {length:n}

얘는 object에다가 length속성을 부여해서

유사배열이 된거다.

 

그리고 유사배열을 배열로 만들어 주는 Array.from을 만나 배열로 다시 태어났다.

배열조무사가 배열이 되다니.

놀라운 배열의 세계다.

 

그나저나 나중에는 3차원 배열 만드는게 나오는 건 아닐까 걱정된다..

그런건 없겠지..?