내 애착 메소드 Array.from 으로 표 만들기
Array.from으로 표를 만들 수 있다.
사실 아니다.
배열인데 모양이 표 모양이다.
이걸 2차원 배열 이라고 한단다.
놀라운 배열의 세계.
내가 처음 본 코드는
const graph = Array.from(Array(n), () => Array(n).fill(0))
이거였다.
길이가 n인 배열을
각 value에 길이가 n이고 value가 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이면
이런 배열이 나온다.
결과는 같다.
얘기가 나온 김에 내 애착 메소드 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차원 배열 만드는게 나오는 건 아닐까 걱정된다..
그런건 없겠지..?