JavaScript 정리 1편 : 배열 메서드 (Array Method)

 HTML / CSS 정리는 앞으로 코드를 짜면서 기억해둘 만한 것들을 메모했다가, 양이 충분해지면 쓸 예정이다. 사실 대부분은 생성형 AI한테 물어보면서 쓰기에 그럴 일이 있을까 모르겠지만...

 

 자바를 공부할 땐, 파이썬과 비슷하게 객체 지향적인 개념을 담고 있어서 그다지 헷갈리지 않았다. 그런데 자바스크립트는 객체 지향이 추구하는 문법도 담은 것 같지만, 프로토타입이라는 개념으로 완전히 다른 문맥을 가진다.

 

자바스크립트는 왜 프로토타입을 선택했을까

 이에 대해서는 위 블로그를 통해 깊이 이해할 수 있었다. 문맥, 즉 컨텍스트(Context)에 의해 결정되는 값들을 이해해야 했다. 어쨌거나 자바스크립트의 철학에 대한 이해는 했지만 결국 코딩은 써보면서 느는 거라... 헷갈리는 메서드들의 파라미터와 리턴값, 그리고 작동 방식을 정리해보려고 한다.

 

 솔직히 기본적인 문법들은 정리하고 싶지 않다. 객체는 {}로 묶고 key와 value로 이루어져 있고 등등... 이런 것들을 정리하는 게 큰 의미가 있을까? 그럴 바에 객체를 활용한 메서드 중 자주 쓰이는 용법들을 정리하는 게 훨씬 나을 듯. 이번 글에서는 배열 메서드들을 정리해보려 한다.

 

---

 

 그 전에 간단하게 for문을 정리해볼까 한다. 기본적인 for문은 생략.

 

 for ... in 은 객체의 key값을 순회. 배열도 객체라 for in에 쓸 수 있지만 권장되지는 않는다(배열의 의미가 없어지므로).

 

 forEach는 배열의 메서드! array.forEach로 쓰이는데 용법은 다음과 같다.

array.forEach(function(currentValue, index, array) {
  // Your code here
});

 

 근데 forEach는 메서드라... break 문이 불가능하고 return 으로 탈출한다.

 

 for of 는 iterable 객체를 순회하고, 기본적으로는 value에 접근한다. iterable.keys() 나 iterable.entries()로 key에도 접근할 수 있다.

 

 배열의 메서드 중 forEach는 배열의 각 요소를 돌고, return값은 없다.

  const arr = [10, 15, 20, 5, 10];
  arr.forEach((item, index, array) => {
    array[index] = item + index;
  });

  console.log(arr);  # [10, 16, 22, 8, 14]

 

map()

 map()은 배열을 순회하며 새로운 배열을 생성해 반환한다.

  const arr = [10, 15, 20, 5, 10];
  const raisedArr = arr.map((item, index) => {
    return item + index;
  });
  console.log(raisedArr);   # [10, 16, 22, 8, 14]
  console.log(arr);   # [10, 15, 20, 5, 10]

 

filter()

filter()도 마찬가지로 배열을 순회하며 새로운 배열을 생성해 반환하는데, 조건에 맞는 요소를 걸러낸다. 이때 callback function의 return값은 boolean이어야 함!

  const arr = [10, 15, 20, 5, 10];
  const filteredArr = arr.filter((item, index) => {
    return index % 2 === 1;
  });
  console.log(filteredArr);   # [15, 5]

 

 reduce(), reduceRight()

 reduce는 배열을 순회하며 연산한 뒤, 하나의 값을 산출한다. parameter는 accumulator, currentValue, index, array 순이고 return 값이 accumulator에 저장된다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

 

 map, filter, reduce는 새로운 배열을 생성한다는 점에서 요긴하게 쓰인다. React는 기존 데이터를 수정하지 않고 새로운 데이터를 만들어서 업데이트 하는 방식으로 작동한다. 즉 불변성을 중요시하므로 새롭게 데이터를 return하는 방식이 종종 쓰인다.

 

 예를 들어 배열의 특정 index를 삭제해야 할 때 splice를 사용할 수도 있지만 이는 배열 자체를 건드리므로 filter를 통해 걸러낼 수 있다.

 const deleteItem = (indexToDelete) => {
   setItems(currentItems => 
     currentItems.filter((_, index) => index !== indexToDelete)
   );
 };

 

 이러면 currentItems에 저장된 배열의 특정 인덱스를 삭제할 수 있다.

 

 이 외에도 상당히 많은 메서드들이 남아있는데 한 번 끊고 다음 편에서 정리해보자!