javascript 배열 만들기

코딩테스트를 준비하며.. 배열을 만들 일이 너무 많아 많고 많은 배열 방법들 중 내가 사용하는 것을 한 번 정리해보려 한다.

조심해야할 것

var member=Array(5).fill([])
console.log(member); //[ [],[],[],[],[] ]
member[1].push([]);
console.log(member); //[ [ [] ], [ [] ], [ [] ], [ [] ], [ [] ] ]

왜 member[1]에 []를 push해주었는데 결과가 이렇게 될까?

이유는 이렇다.
fill()메서드는 value에 객체를 받을 경우 그 참조만 복사해서 배열을 채우기 때문에,
모두가 같은 참조값을 가져, 1번째만 바꾸더라해도 모두가 바뀌는 것이다.

해결방법

1. map 사용

Array(5).fill(0).map(() => [])

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.

2. Array.from 사용

var member=Array.from({length:5},()=>[]);
console.log(member); //[ [],[],[],[],[] ]
member[1].push([]);
console.log(member); //[ [], [ [] ], [], [], [] ]

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.(MDN)

길이 객체와 값을 반환하는 콜백함수를 매개변수로 넘겨준다.
콜백함수를 실행하기 때문에 각 요소는 서로 다른 []를 가리키게 되어 해결된다는데
더 알아봐야겠다.

var map=Array.from({length:N},()=>Array.from({length:M},()=>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 ]
*	]
*/

이렇게도 응용이 가능하다.

3. ...Array 사용!!!***

{length}가 아주아주 느려서 좋지 않다는 정보를 입수했다.

var win=[...Array(n)].map(()=>[]);
var win2=[...Array(n)].map(()=>[...Array(n)].map(()=>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 ]
*	]
*
*/

**알고리즘 풀 때는 이 친구를 사용하도록 하자.

References

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from