2020년이 가기전에 꼭 알아야하는 자바스크립트 배열 메소드 📚

2020이 곧 끝나갑니다. 끝나기전에 배열 메소드 15개만 외우고 갑시다.
자바스크립트의 배열은 다른 요소를 저장하는데 사용되는 특별한 변수 입니다. 여기에는 필요에 따라 데이터를 추가, 제거, 반복 또는 조작하는 데 사용할 수 있는 몇 가지 기본 속성(Built-in properties)과 메소드(method)가 있습니다. 또한 JavaScript 배열 방법을 알면 개발자의 역량을 높일 수 있습니다.

이 게시물에서는 데이터를 제대로 조작하는 데 도움이 되는 15가지 array methods를 살펴보겠습니다

Notice - 이 게시물에서는 파라미터로 전달되는 함수를 단순화 합니다.

1. reduce()

accumulator와 value를 argument로 사용하는 함수를 전달받은 후 배열의 accumulator 와 각 value에 적용되어 한 개의 값만 끝에 반환합니다.

const myArr = [1, 2, 3, 4, 5]

myArr.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Output = 120

2. filter()

함수를 파라미터로 전달받아,argument가 true로 전달된 모든 배열 안의 요소를 포함하는 새 배열 을 반환합니다.

const myArr = [
  { id: 1, name: "Emily" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Jay" },
  { id: 4, name: "Emily" },
]

myArr.filter(element => element.name === "Emily")
//-------> Output : 0:{id: 1, name: "Emily"},
//                  1:{id: 4, name: "Emily"}

3. map()

함수를 파라미터로 전달받아, callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다.

const myArr = [5, 4, 3, 2, 1]
myArr.map(x => x * x)

//-------> Output : 25
//                  16
//                  9
//                  4
//                  1

4. some()

배열의 요소중 하나라도 일치하면 true, 반대 요소에 대해서는 거짓을 반환합니다.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
//-------> Output : true

5. flat()

이중 배열에서 하위 배열에 포함한 요소를 포함하는 새 배열을 만들어 평탄화합니다. 이 방법은 one level depth에서만 사용할 수 있습니다.

const myArr = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myArr.filter(element => element.name === "Mass")
//-------> Output : 0:{id: 3, name: "Mass"},
//                  1:{id: 4, name: "Mass"}

6. every()

배열의 각 요소가 테스트와 일치할경우 true, 그러지 않은경우 false를 반환합니다.

const myArr = ["a", "b", "c", "d", "e"]

myArr.every(test => test === "d")
//-------> Output : false

const myArr2 = ["a", "a", "a", "a", "a"]

myArr2.every(test => test === "a")
//-------> Output : true

7. forEach()

배열의 각 요소에 함수를 적용합니다.

const myArr = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myArr.forEach(element => console.log(element.name))
//-------> Output : john
//                  Ali
//                  Mass

8. findIndex()

파라미터를 함수로 수신하고 이를 배열에 적용합니다. 발견된 요소의 인덱스를 반환하고 인덱스 또는 테스트 함수를 만족하는 요소가 없으면 -1를 반환합니다.

const myArr = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myArr.findIndex(element => element.id === 3)
//-------> Output : 2

myArr.findIndex(element => element.id === 7)
//-------> Output : -1

9. find()

함수를 argument로 수신하고 이를 배열에 적용합니다. 이 값은 배열에서 찾을 수 있고, test function을 만족하는 요소의 값을 반환합니다. 그렇지 않으면 undefined 를 리턴합니다.

const myArr = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myArr.find(element => element.id === 3)
//-------> Output : {id: 3, name: "Mass"}

myArr.find(element => element.id === 7)
//-------> Output : undefined

10. sort()

배열을 오름차순 또는 내림차순으로 정렬합니다.

const myArr = [5, 4, 3, 2, 1]

// Sort from smallest to largest
myArr.sort((a, b) => a - b)
//-------> Output : [1, 2, 3, 4, 5]

// Sort from largest to smallest
myArr.sort((a, b) => b - a)
//-------> Output : [5, 4, 3, 2, 1]

11. fill()

지정된 배열의 모든 요소를 시작 인덱스(기본값 0)에서 끝 인덱스(기본값 배열.길이)까지 동일한 값으로 채웁니다.

const myArr = [1, 2, 3, 4, 5]

//fill with 0 from position 1 until pisosition 3
myArr.fill(0, 1, 3)
//-------> Output : [1, 0, 0, 4, 5]
//fill with 5 from posiiton 1
myArr.fill(5,1)
//-------> Output : [1, 5, 5, 5, 5]

12. includes()

배열이 일정 요소를 포함하고 있으면 true, 반대의 경우는 false를 반환합니다.

const myArr = [1, 2, 3, 4, 5]

myArr.includes(3)
//-------> Output : true

myArr.includes(8)
//-------> Output : false

13. concat()

두개 이상의 배열을 합쳐 새로운 배열을 반환합니다.

const myArr = [1, 2, 3, 4, 5]
const myArr = [10, 20, 30, 40, 50]
myArr.concat(myAwesomeArray2)
//-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

14. reverse()

배열을 뒤집어 첫번째 요소가 마지막 요소가 되고 마지막 요소가 첫번째 요소가 됩니다

const myArr = ["e", "d", "c", "b", "a"]

myArr.reverse()
//-------> Output : ['a', 'b', 'c', 'd', 'e']

15. flatMap()

배열의 각 요소에 함수를 적용한 다음 결과를 배열로 평탄화 합니다. flat(), 과 map()을 하나의 함수로 결합합니다.

const myArr = [[1], [2], [3], [4], [5]]

myArr.flatMap(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]

// With .flat() and .map()
myArr.flat().map(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]