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