꼭 알아야 할 자바스크립트 Array 메서드 10가지

자바스크립트 array 메서드를 사용할 때 대부분 forEach()만 사용합니다. 하지만 자바스크립트 메서드 중에는 forEach() 보다 더 활용도가 높은 메서드들이 있습니다. 특히 자바스크립트를 제대로 공부하고자 한다면 다음 array 메서드 10가지는 꼭 알아두어야 합니다. 그리고 시간된다면 MDN Array Docs도 꼭 정독해보세요. 그럼 꼭 알아야 할 Array 메서드를 살펴보도록 하죠.

1. includes()

이 method에 넘기 인자가 배열의 요소 중에 존재하는지 체크한다. 

  let arr = [1, 2, 3, 4, 5, 6];

  arr.includes(3); // true

  arr.includes(0); // false

2. filter()

콜백 함수의 조건을 통과한 요소들만 모아서 새로운 배열을 생성한다. (콜백 함수 : 배열의 각 요소 값에 대해 실행되는 함수이다)

  let arr = [1, 2, 3, 4, 5, 6];

  // 배열 요소가 3보다 크면

  let filtered = arr.filter(num => num > 3);

  console.log(filtered); // [4, 5, 6]

  console.log(arr); // [1, 2, 3, 4, 5, 6]

3. map()

콜백 함수에 배열의 모든 요소를 인자로 넘긴 후 도출된 결과값들을 모아 새로운 배열을 생성한다.

  let arr = [1, 2, 3, 4, 5, 6];

  // 모든 요소에 대해 1을 더한다

  let oneAdded = arr.map(num => num + 1);

  console.log(oneAdded); // [2, 3, 4, 5, 6, 7]

  console.log(arr); // [1, 2, 3, 4, 5, 6]

4. reduce()

콜백 함수에 인자를 넣어 나온 결과값을 왼쪽부터 차례대로 누산하여 하나의 값으로 축소(reduce) 한다.

  let arr = [1, 2, 3, 4, 5, 6];

  let sum = arr.reduce((total, value) => total + value, 0); // reduce함수의 마지막 인자는 초기값임

  console.log(sum); // 21

5. some()

배열의 요소 중 적어도 한 개 이상이 콜백 함수의 조건을 만족하는 경우 true, 그렇지 않으면 false를 리턴한다. 

  let arr = [1, 2, 3, 4, 5, 6];

  // 적어도 한 개 이상의 배열 요소가 4보다 큰가?

  let largeNum = arr.some(num => num > 4);

  console.log(largeNum); // true

  // 적어도 한 개 이상의 배열 요소가 0보다 작거나 같은가?

  let smallNum = arr.some(num => num <= 0);

  console.log(smallNum); // output: false

6. every()

모든 배열 요소가 콜백 함수의 조건을 만족하는 경우 true, 그렇지 않으면 false를 리턴한다.

  let arr = [1, 2, 3, 4, 5, 6];

  // 모든 배열 요소가 4보다 큰가?

  let greaterFour = arr.every(num => num > 4);

  console.log(greaterFour); // false

  // 모든 배열 요소가 10보다 작은가?

  let lessTen = arr.every(num => num < 10);

  console.log(lessTen); // true

7. sort()

이 method는 배열 요소를 arrange 하거나 sort 할 때 사용한다. 

  let arr = [1, 2, 3, 4, 5, 6];

  let alpha = ['c', 'a', 'd', 'e', 'f'];

  // 내림차순 정렬

  descOrder = arr.sort((a, b) => a > b ? -1 : 1);

  console.log(descOrder); // [6, 5, 4, 3, 2, 1]

  // 오름차순 정렬

  ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);

  console.log(ascOrder); // ['a', 'b', 'c', 'd', 'e']

8.Array.from()

이 method는 배열과 유사하거나 반복적인 형태를 가지고 있는 요소를 배열로 만들어준다. 특히, DOM을 핸들링할 때 유용하게 사용할 수 있다. 즉, Array.from() 으로 li 태그들을 배열로 만든 후 filter, map, reduce 함수를 이용하여 쉽게 핸들링할 수 있는 것이다.

  const name = 'javascript';

  const nameArray = Array.from(name);

  console.log(name); // javascript

  console.log(nameArray); // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']

DOM에서 활용한 예시

  const lis = document.querySelectorAll('li');

  const lisArray = Array.from(document.querySelectorAll('li'));

  // 이 후 lisArray를 filter, map, reduce 함수로 조작하여 활용한다.

Array.from() 대신에 [...] 문법을 쓸 수도 있다. (자바스크립트 Spread 문법 참조)

const lisArray = [... document.querySelectorAll('li')];

9. Array.of()

이 method는 인자로 받은 모든 요소를 모아 새로운 배열을 생성한다. 

  let nums = Array.of(1, 2, 3, 4, 5, 6);

  console.log(nums); // [1, 2, 3, 4, 5, 6]

물론 array을 만들 때는 그냥 let nums = [1, 2, 3, 4, 5, 6]; 으로 처리할 수도 있다. 하지만 다음과 같이 인자를 넣어서 다이나믹하게 배열을 만들고자 한다면 Array.of()를 사용해야 한다.

let a = 1;

let b = 2;

let c = 3;

...

let arr = Array.of(a, b, c);

10. forEach()

마지막으로 배열의 모든 요소를 순회하는 forEach() method이다. 아마도 이 method는 많이 익숙할 것이다.

  let arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(item => {

    console.log(item); // 1 2 3 4 5 6

  });

번역 및 참고 : 10 JavaScript array methods you should know