데이터를 특정 기준에 따라 분류하는 것은 자바스크립트로 데이터 처리를 할 때 자주 필요한 작업인데요. 그런데 아직도 데이터 그룹화를 위해서 reduce() 함수나 Lodash 라이브러리를 사용하시나요? 이번 포스팅에서는 자바스크립트에서 데이터를 그룹화를 위해 쓸 수 있는 비교적 새로운 API인 groupBy()에 대해서 알아보도록 하겠습니다. 기존 데이터 그룹화 방법 우선 예전에 자바스크립트에서 데이터 그룹화가 얼마나 불편했는지 살펴볼까요? 다음과 같이 여러 사용자의 이름, 나이, 국가를 담은 배열이 주어졌을 때, 아래와 같이 국가
자바스크립트의 배열은 여러가지 메서드를 제공하고 있지만 그 중에서 가장 강력한 녀석을 뽑으라면 단연 reduce()를 뽑을 수 있을텐데요. 워낙 범용적으로 쓰일 수 있는 메서드이다 보니 reduce()가 사용된 코드를 해석하는데 어려움을 느끼시는 분들이 많습니다. 이번 포스팅에서는 reduce() 메서드의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 개발에서 활용할 수 있는지 배워보겠습니다. 기본 문법 어떤 배열을의 reduce() 메서드를 호출하면 배열을 상대로 각 요소인자로 넘어온 콜백 함수를 실행하여 누적된 하나의
자바스크립트의 배열은 forEach(), filter(),map(), reduce, every(), some() 등과 같이 콜백 함수를 인자로 받아 배열에 저장되어 있는 모든 원소로 상대로 호출해주는 함수들을 제공합니다. 이 함수들을 잘 활용하면 소위 함수형 프로그래밍(Functional Programming) 스타일로 코딩을 할 수 있게 되죠. 그런데 혹시 이러한 자바스크립트의 배열에 제공하는 함수에 비동기 함수를 인자로 넘기면 낭패를 볼 수 있다는 것을 아시나요? 이번 포스팅에서는 자바스크립트 배열 함수를 통해서 비동기 함수를
자바스크립트에서 배열의 원소를 삭제하거나 추가하거나 교체할 때 가장 많이 사용되는 메서드가 바로 splice()인데요. 이 메서드에는 한 가지 골치 아픈 문제가 있습니다. 바로 원본 배열을 직접 변경해버린다는 점이죠 😅 원본 배열이 바뀌면 안 되는 상황에서는 매번 배열을 복제한 다음에 splice()를 호출해야 했는데 이게 꽤 번거로웠습니다. ES2023에서 이 불편함을 해소해주는 toSpliced() 함수가 등장했는데요. 이번 글에서는 toSpliced() 함수의 사용법과 splice()와의 차이점에 대해서 알아보겠습니다. sp
자바스크립트로 코딩하다 보면 배열의 순서를 뒤집어야 할 때가 종종 있죠? 최신 데이터를 먼저 보여줘야 하는 타임라인이나, 정렬 순서를 반대로 바꿔야 하는 상황처럼요. 이럴 때 예전부터 있었던 reverse() 함수를 사용하면 간단히 해결되는데, 이 함수에는 한 가지 까다로운 점이 숨어 있습니다. 바로 원본 배열을 직접 변경해버린다는 건데요. 이번 글에서는 기존의 reverse() 함수가 왜 문제가 될 수 있는지 살펴보고 비교적 최근에 추가된 toReversed() 함수로 안전하게 배열을 뒤집는 방법을 알아보겠습니다. 배열의 reve
배열에 원소를 제거하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠? 이번 포스팅에서는 자바스크립트 배열의 원소를 제거하는 다양한 방법에 대해서 간단히 정리해보겠습니다. pop() 메서드 자바스크립트 배열에 원소를 제거하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 pop() 메서드일 것 같은데요. 예를 들어, pop() 메서드로 과일 이름을 담은 배열로 부터 원소를 제거해보겠습니다. pop() 메서드는 배열에서 마지막 원소를 제거한 후에, 제거된 원소를 결과로 반환합니다. shift() 메서드 반대로
배열에 원소를 추가하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠? 이번 포스팅에서는 자바스크립트 배열에 원소를 추가하는 다양한 방법에 대해서 간단히 정리해보겠습니다. push() 메서드 자바스크립트 배열에 원소를 추가하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 push() 메서드일 것 같은데요. 예를 들어, push() 메서드로 과일 이름을 담은 배열에 원소를 추가해보겠습니다. push() 메서드에 넘어온 인수는 배열의 끝, 즉 기존에 마지막 원소 바로 뒤에 추가됩니다. 그리고 결과로 원소를 추
자바스크립트에서 배열을 다루다 보면 특정 조건에 맞는 원소를 하나만 찾아야 할 때가 종종 있는데요. 이럴 때 배열 전체를 filter()로 걸러낸 다음 첫 번째 원소만 꺼내는 코드를 작성하시는 분이 의외로 많습니다. 물론 동작은 하지만, 배열 전체를 순회해서 새 배열을 만든 뒤 첫 번째 원소만 쓰고 나머지는 버리니까 비효율적이죠? 이번 글에서는 이런 상황에 딱 맞는 find() 계열 메서드 네 가지를 정리해보겠습니다. find()로 원소 찾기 find() 메서드는 배열을 앞에서부터 순회하면서 콜백 함수가 true를 반환하는 첫 번째
이번 포스팅에서는 자바스크립트에서 배열을 합치는 방법에 대해서 간단히 정리해보겠습니다. concat() 메서드 연결하다(concatenate)를 의미하는 배열의 concat() 메서드를 사용하면 하나의 배열에 다른 배열을 합칠 수 있습니다. 예를 들어, concat() 메서드로 숫자 배열에 글자 배열을 합쳐보겠습니다. concat() 메서드의 중요한 특징은 바로 원본 배열을 건드리지 않고 새로운 배열을 반환한다는 것입니다. 따라서 원본 배열을 건드리지 않는 배열의 다른 메서드와 함께 체인(chain)의 형태로 연쇄 호출이 가능합니다
배열 안의 값들을 정렬하는 것은 백엔드 프론트엔드를 가리지 않고 빈번하게 필요한 작업이죠? 자바스크립트에서 배열을 정렬할 때는 예전부터 있었던 sort() 함수나 비교적 최근에 추가된 toSorted() 함수를 사용합니다. 이번 글에서는 이 두 함수를 사용하여 자바스크립트에서 배열을 정렬하는 기본적인 방법과 주의해야 할 부분에 대해서 알아보겠습니다. 배열의 sort() 함수 자바스크립트에서 배열을 정렬을 하는 가장 유명한 방법은 뭐니뭐니 해도 sort() 함수일텐데요. 배열을 상대로 sort() 함수를 호출하면 해당 배열 내의 값들
자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 이번 포스팅에서는 예제 코드를 작성하면서 이 두 함수가 어떤 점이 비슷하고 어떤 점이 다른지에 대해서 알아보겠습니다. slice() 함수 slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다. 간단한 실습을 위해 숫자
배열을 사용하는 이유? 3개의 과일 이름을 변수에 저장하려면 다음과 같이 3개의 변수를 사용할 것이다. 하지만 만약에 저장한 과일 이름이 300개라면? 위와 같이 일일이 하나 하나의 변수에 저장하기 힘들 것이다. 배열을 이용하면 하나의 변수에 여러 가지 값을 저장할 수 있고, 색인(Index)을 통해 이 값에 접근할 수 있다. 새로운 배열 생성 하기 기본적으로 대괄호 기호인 배열 리터럴(literal)을 이용해서 배열을 생성한다. 배열 리터럴 내에서는 공백이나 줄바꿈은 중요하지 않으므로 각 엘리먼트의 길이기 길 경우 가독성을 위해