PHpullh
심층 가이드/JavaScript/컬렉션

JAVASCRIPT · 심층 가이드

JavaScript 컬렉션 완전 정리

배열 하나로 맵, 스택, 큐, 빈도표를 전부 처리하는 JavaScript 컬렉션 코드 20편을 모아, 상황별로 어떤 자료구조가 맞는지 바로 판단하도록 돕습니다.

주제 20개 · 예제 코드 포함 · 최종 수정 2026-08-30 · 작성 pullh 편집팀

JavaScript에는 별도의 리스트 타입이 없습니다. Array 하나가 리스트이자 스택이자 큐 역할을 겸하고, 여기에 Map과 Set이 얹히는 구조입니다. 문제는 이 유연함이 초보자의 판단을 흐린다는 점입니다. 객체를 딕셔너리처럼 쓰다가 키가 전부 문자열로 강제 변환되어 1과 "1"이 같은 슬롯을 차지하는 일이 흔합니다. 자료구조를 고르는 기준을 먼저 세워야 코드가 흔들리지 않습니다.

앞쪽 map 변환, filter 필터링, reduce 합계 세 편은 나머지 열일곱 편의 재료입니다. groupBy 구현과 빈도표 만들기는 결국 reduce로 누적하는 같은 뼈대이고, partition 나누기는 filter를 두 번 도는 대신 한 번의 순회로 끝내는 변형입니다. chunk 나누기와 sliding window는 인덱스 계산만 다를 뿐 구조가 겹치니 나란히 보면 차이가 선명해집니다.

가장 자주 밟는 지뢰는 Set과 Map의 동등성 규칙입니다. 이들은 SameValueZero 비교를 쓰기 때문에 {a:1} 두 개는 내용이 같아도 서로 다른 키입니다. 대소문자 무시 중복 제거가 별도 항목으로 존재하는 이유도 여기 있습니다. splice나 sort처럼 원본을 바꾸는 메서드와 slice, toSorted처럼 새 배열을 주는 메서드를 구분해 두지 않으면 reverse 복사에서 원본이 조용히 뒤집힙니다.

01map 변환

JavaScript에서 map 변환 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// map 변환
const items = [1, 2, 3, 1];
console.log(items.map(value => value * 2));
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

02filter 필터링

JavaScript에서 filter 필터링 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// filter 필터링
const words = ["js", "ts", "js", "rust"];
console.log([...new Set(words)]);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

03reduce 합계

JavaScript에서 reduce 합계 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// reduce 합계
const rows = [{ team: "a", score: 2 }, { team: "b", score: 3 }, { team: "a", score: 3 }];
const grouped = rows.reduce((acc, row) => { (acc[row.team] ??= []).push(row.score); return acc; }, {});
console.log(grouped);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

04첫 요소 찾기

JavaScript에서 첫 요소 찾기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 첫 요소 찾기
const values = [1, 2, 3, 4, 5];
const chunks = [];
for (let i = 0; i < values.length; i += 2) chunks.push(values.slice(i, i + 2));
console.log(chunks);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

05Set 중복 제거

JavaScript에서 Set 중복 제거 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// Set 중복 제거
const items = [1, 2, 3, 5];
console.log(items.map(value => value * 2));
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

06단어 수 세기

JavaScript에서 단어 수 세기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 단어 수 세기
const words = ["js", "ts", "js", "rust"];
console.log([...new Set(words)]);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

07스택 구현

JavaScript에서 스택 구현 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 스택 구현
const rows = [{ team: "a", score: 2 }, { team: "b", score: 3 }, { team: "a", score: 7 }];
const grouped = rows.reduce((acc, row) => { (acc[row.team] ??= []).push(row.score); return acc; }, {});
console.log(grouped);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

08큐 구현

JavaScript에서 큐 구현 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 큐 구현
const values = [1, 2, 3, 4, 5];
const chunks = [];
for (let i = 0; i < values.length; i += 2) chunks.push(values.slice(i, i + 2));
console.log(chunks);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

092차원 배열 합계

JavaScript에서 2차원 배열 합계 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 2차원 배열 합계
const items = [1, 2, 3, 9];
console.log(items.map(value => value * 2));
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

10groupBy 구현

JavaScript에서 groupBy 구현 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// groupBy 구현
const words = ["js", "ts", "js", "rust"];
console.log([...new Set(words)]);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

11flatten 펼치기

JavaScript에서 flatten 펼치기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// flatten 펼치기
const rows = [{ team: "a", score: 2 }, { team: "b", score: 3 }, { team: "a", score: 11 }];
const grouped = rows.reduce((acc, row) => { (acc[row.team] ??= []).push(row.score); return acc; }, {});
console.log(grouped);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

12zip 묶기

JavaScript에서 zip 묶기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// zip 묶기
const values = [1, 2, 3, 4, 5];
const chunks = [];
for (let i = 0; i < values.length; i += 2) chunks.push(values.slice(i, i + 2));
console.log(chunks);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

13chunk 나누기

JavaScript에서 chunk 나누기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// chunk 나누기
const items = [1, 2, 3, 13];
console.log(items.map(value => value * 2));
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

14key 기준 정렬

JavaScript에서 key 기준 정렬 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// key 기준 정렬
const words = ["js", "ts", "js", "rust"];
console.log([...new Set(words)]);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

15빈도표 만들기

JavaScript에서 빈도표 만들기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 빈도표 만들기
const rows = [{ team: "a", score: 2 }, { team: "b", score: 3 }, { team: "a", score: 15 }];
const grouped = rows.reduce((acc, row) => { (acc[row.team] ??= []).push(row.score); return acc; }, {});
console.log(grouped);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

16대소문자 무시 중복 제거

JavaScript에서 대소문자 무시 중복 제거 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// 대소문자 무시 중복 제거
const values = [1, 2, 3, 4, 5];
const chunks = [];
for (let i = 0; i < values.length; i += 2) chunks.push(values.slice(i, i + 2));
console.log(chunks);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

17sliding window

JavaScript에서 sliding window 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// sliding window
const items = [1, 2, 3, 17];
console.log(items.map(value => value * 2));
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

18pair 목록을 맵으로 변환

JavaScript에서 pair 목록을 맵으로 변환 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// pair 목록을 맵으로 변환
const words = ["js", "ts", "js", "rust"];
console.log([...new Set(words)]);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

19reverse 복사

JavaScript에서 reverse 복사 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// reverse 복사
const rows = [{ team: "a", score: 2 }, { team: "b", score: 3 }, { team: "a", score: 19 }];
const grouped = rows.reduce((acc, row) => { (acc[row.team] ??= []).push(row.score); return acc; }, {});
console.log(grouped);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

20partition 나누기

JavaScript에서 partition 나누기 개념을 코드로 빠르게 확인하는 컬렉션 예제입니다.

JavaScript code

// partition 나누기
const values = [1, 2, 3, 4, 5];
const chunks = [];
for (let i = 0; i < values.length; i += 2) chunks.push(values.slice(i, i + 2));
console.log(chunks);
알아두면 좋은 점

컬렉션 연산은 원본을 바꾸는지 새 값을 만드는지 꼭 함께 확인하세요.

자주 하는 실수

정렬, 필터, 추가 연산이 원본을 바꾸는지 혼동하면 버그로 이어지기 쉽습니다.

정리하며

  • 키가 문자열이 아니거나 순서가 중요하면 일반 객체 대신 Map을 씁니다
  • groupBy, 빈도표, partition은 모두 reduce 누적 한 판으로 환원됩니다
  • Set 중복 제거는 참조 비교이므로 객체 배열에는 키 함수를 따로 둡니다
  • sort와 reverse는 원본을 바꾸므로 복사본을 만든 뒤 호출합니다

더 깊이 들어가고 싶다면 JavaScript 학습 라이브러리에서 다른 주제 가이드를 이어서 보거나, 언어 비교에서 같은 개념이 다른 언어에서 어떻게 표현되는지 확인해 보세요.