[JS] 새로운 배열을 반환하는 Array 메소드

프런트앤드는 백엔드로 API를 호출하고 전달받은 response를 가공해 화면에 그려주는 일을 하다보니 대량의 데이터를 가공해야할 일이 많아 배열 메소드를 활용할 때가 많습니다.

또, 네트워크 통신보다 화면이 그려지는 시간이 빠른 SPA 프로그래밍 특성상 페이지가 그려진 이후에 데이터를 전달받을 수 있습니다. 그렇게 된다면 이를 감지해 화면에 다시 리렌더링을 해주어야하는데요. 배열은 참조값인 특성상, 식별자가 주소값과 바인딩되어 있어 주소값이 가리키는 데이터가 바뀌어도 이를 감지할 수 없습니다. 이 때문에 배열 가공시에 새로운 배열이 리턴되는지 기존의 배열에서 변경이 일어나는 것인지 체크를 하며 설계를 해야하는데요.

 

이번에는 새로운 배열을 리턴하는 메서도와 아닌 메소드를 구분지어 보겠습니다.

 

아래는 MDN에서 읽어온 Array 메소드 전체입니다.

1. Array.prototype.at()
2. Array.prototype.concat()
3. Array.prototype.copyWithin()
4. Array.prototype.entries()
5. Array.prototype.every()
6. Array.prototype.fill()
7. Array.prototype.filter()
8. Array.prototype.find()
9. Array.prototype.findIndex()
10. Array.prototype.findLast()
11. Array.prototype.findLastIndex()(en-US)
12. Array.prototype.flat()
13. Array.prototype.flatMap()
14. Array.prototype.forEach()
15. Array.from()
16. Array.prototype.group()(en-US)Experimental
17. Array.prototype.groupToMap()(en-US)Experimental
18. Array.prototype.includes()
19. Array.prototype.indexOf()
20. Array.isArray()
21. Array.prototype.join()
22. Array.prototype.keys()
23. Array.prototype.lastIndexOf()
24. Array.prototype.map()
25. Array.of()
26. Array.prototype.pop()
27. Array.prototype.push()
28. Array.prototype.reduce()
29. Array.prototype.reduceRight()
30. Array.prototype.reverse()
31. Array.prototype.shift()
32. Array.prototype.slice()
33. Array.prototype.some()
34. Array.prototype.sort()
35. Array.prototype.splice()
36. Array.prototype.toLocaleString()
37. Array.prototype.toString()
38. Array.prototype.unshift()
39. Array.prototype.values()

 

이 중에서 처음보는 것도 자주봤던 것도 있는데요. 일단 나누어 보겠습니다. 총 39개 중 14개네요.
2.Array.prototype.concat()

4.Array.prototype.entries()

5.Array.prototype.every()

7. Array.prototype.filter()

13.Array.prototype.flatMap()

22.Array.prototype.keys()

24. Array.prototype.map()

28.Array.prototype.reduce()

30.Array.prototype.reverse()

32.Array.prototype.slice()

33.Array.prototype.some()

34.Array.prototype.sort()

35.Array.prototype.splice()

39.Array.prototype.values()

 

처음 보는 것도 자주 사용하는 것도 헷갈리는 것도 많네요. 차차 배열 메소드에 대해 공부하도록 하겠습니다.