데이터를 다루는 마법: 배열과 객체, 그리고 map/filter

수많은 데이터를 하나로 묶어 관리하고, 화면에 필요한 형태로 자유자재로 가공하는 필수 배열 메서드를 알아봅니다.

우리가 일상적으로 사용하는 웹사이트나 앱은 결국 '데이터의 모음'입니다. 유튜브의 수많은 영상 목록, 인스타그램의 피드, 쇼핑몰의 상품 리스트 등 화면을 가득 채우는 요소들은 모두 어딘가에서 가져온 데이터들입니다. AI가 화면을 멋지게 그려준다고 해도, 이 수많은 데이터들을 화면의 올바른 위치에 딱 맞게 꽂아 넣으려면 데이터를 묶고, 가공하고, 걸러내는 방법을 알아야 합니다. 이번 에피소드에서는 프론트엔드 개발의 꽃이라 불리는 배열(Array)과 객체(Object), 그리고 이 데이터들을 마법처럼 다루게 해주는 핵심 도구인 `map`과 `filter`에 대해 알아보겠습니다. 이 개념들을 이해하면 AI가 작성한 복잡한 데이터 처리 코드가 한눈에 들어오기 시작할 것입니다.

수많은 데이터를 하나로 묶기: 배열과 객체

변수 하나에 이름이나 숫자 하나만 담는다면, 100명의 사용자 목록을 관리하기 위해 100개의 변수가 필요할 것입니다. 이는 현실적으로 불가능한 일입니다. 자바스크립트는 수많은 데이터를 효율적으로 관리하기 위해 두 가지 강력한 바구니를 제공합니다. 바로 배열과 객체입니다.

순서가 있는 리스트, 배열 (Array)

배열(Array)은 여러 개의 데이터를 '순서대로' 나열해 놓은 리스트입니다. 기차의 칸들처럼 각 데이터가 칸칸이 들어차 있는 모습을 상상해 보세요. 대괄호 `[]`를 사용하여 만들며, 각 데이터는 쉼표로 구분합니다.

배열의 가장 큰 특징은 순서(Index)가 있다는 것입니다. 첫 번째 데이터, 두 번째 데이터처럼 순서를 통해 데이터에 접근할 수 있습니다. 단, 프로그래밍 세계에서는 순서를 셀 때 1이 아닌 0부터 시작한다는 점을 꼭 기억해야 합니다. 따라서 첫 번째 데이터는 '0번째' 데이터가 됩니다.

쇼핑몰 장바구니에 담긴 상품들의 목록이나 게시판의 글 목록처럼, 동일한 성격의 데이터들이 순서대로 나열되어야 할 때 주로 배열을 사용합니다. AI 코드를 볼 때 대괄호 `[]`가 보인다면 무조건 '아, 순서가 있는 목록이구나'라고 생각하시면 됩니다.

이름표가 붙은 데이터의 묶음, 객체 (Object)

반면 객체(Object)는 데이터에 '이름표(Key)'를 붙여서 보관하는 바구니입니다. 중괄호 `{}`를 사용하여 만들며, 이름표(Key)와 실제 값(Value)이 하나의 쌍을 이룹니다.

순서가 중요한 배열과 달리, 객체는 순서보다 데이터의 의미(이름표)가 훨씬 중요합니다. 예를 들어 한 명의 사용자 정보를 저장한다고 할 때, '홍길동', '25세', '서울'이라는 데이터들을 그냥 배열에 넣어두면 무엇이 이름이고 무엇이 나이인지 알기 어렵습니다. 하지만 객체를 사용하면 `name: '홍길동'`, `age: 25`, `city: '서울'`처럼 각 데이터가 무엇을 의미하는지 이름표를 붙여 명확하게 관리할 수 있습니다.

배열(Array)과 객체(Object) 한눈에 비교하기

구분	배열 (Array)	객체 (Object)
생성 기호	대괄호	중괄호
데이터 정렬 방식	순서(Index)를 기반으로 정렬	이름표(Key)를 기반으로 정렬
접근 방법	순서 번호를 통해 접근 (예: list(0))	이름표를 통해 접근 (예: user.name)
주요 사용처	게시글 목록, 메뉴 리스트 등 순차적 나열	사용자 정보, 설정값 등 속성 모음

실제 프론트엔드 개발에서는 이 두 가지를 섞어서 사용하는 경우가 대부분입니다. 즉, '객체들을 여러 개 담아둔 배열' 형태가 가장 흔합니다. 게시판 목록을 상상해 보세요. 각 게시물 하나하나는 제목, 작성자, 날짜 등의 속성을 가진 '객체'이고, 이 수많은 게시물 객체들이 순서대로 쭉 나열된 '배열'이 전체 게시판 목록을 구성하게 됩니다.

배열과 객체를 다룰 때 흔히 하는 착각

오해 또는 실수

배열의 순서를 1부터 세는 착각

바로잡기

프로그래밍에서 배열의 첫 번째 요소는 무조건 0번째(Index 0)입니다. 항상 0부터 세는 습관을 들여야 합니다.

오해 또는 실수

객체의 Key를 중복해서 사용하는 실수

바로잡기

객체 안에서 이름표(Key)는 유일해야 합니다. 똑같은 이름표를 두 개 붙이면, 뒤에 붙인 값으로 앞의 값이 덮어씌워져 버립니다.

데이터를 내 마음대로 요리하기: 배열 메서드

배열과 객체에 데이터를 예쁘게 담아두었다면, 이제 이 데이터를 화면에 보여주기 위해 적절히 가공해야 합니다. 자바스크립트는 배열을 아주 쉽게 다룰 수 있도록 기본 도구(메서드)들을 제공합니다. 그중에서도 프론트엔드 개발에서 가장 압도적으로 많이 쓰이는 두 가지 마법의 주문이 바로 `map()`과 `filter()`입니다. AI가 만들어준 React나 Next.js 컴포넌트 코드의 80% 이상은 이 두 메서드를 사용해 화면을 그리고 있습니다.

화면에 데이터 뿌려주기: map()

가장 중요하고 가장 많이 쓰이는 도구는 단연 `map()`입니다. `map()`의 역할은 아주 단순합니다. 배열에 들어있는 모든 데이터들을 하나씩 꺼내서, 내가 지시한 작업을 수행한 뒤, 그 결과물들로 완전히 새로운 모양의 배열을 만들어내는 것입니다.

이것이 프론트엔드에서 중요한 이유는 무엇일까요? 화면에 10개의 상품 목록을 보여줘야 한다고 상상해 봅시다. 상품 데이터 10개가 든 배열을 가지고, `map()`을 사용해 "이 데이터들을 하나씩 꺼내서, 화면에 보여줄 멋진 카드 UI 모양으로 바꿔줘"라고 명령하는 것입니다. 그러면 `map()`은 원래의 데이터를 손상시키지 않고, 정확히 10개의 예쁜 카드 UI들이 담긴 새로운 묶음을 만들어 화면에 던져줍니다.

map()을 활용한 데이터 변환의 이해

만약 `[1, 2, 3]` 이라는 숫자 배열이 있다고 해보겠습니다. 이 배열에 `map()`을 써서 "모든 숫자에 10을 곱해줘"라고 명령하면 어떤 일이 일어날까요?

결과는 `[10, 20, 30]` 이라는 완전히 새로운 배열이 탄생합니다. 중요한 점은 원래 있던 `[1, 2, 3]` 배열은 아무런 상처도 입지 않고 그대로 남아있다는 것입니다. 이렇게 원본 데이터를 훼손하지 않고 새로운 결과물을 복사해 내는 특성 때문에, 안전한 화면 그리기가 필수인 React 환경에서 `map()`은 절대적인 지위를 갖습니다. AI 코드에서 `데이터배열.map( ... )` 형태를 본다면 "아, 저 데이터를 화면 UI로 바꾸어 반복해서 그려주는 중이구나"라고 이해하시면 완벽합니다.

원하는 데이터만 쏙쏙 골라내기: filter()

두 번째 마법의 도구는 `filter()`입니다. 이름에서 알 수 있듯이, 거름망처럼 내가 정한 조건에 딱 맞는 데이터들만 걸러내어 새로운 배열을 만들어주는 역할을 합니다.

쇼핑몰에서 '3만 원 이하 상품만 보기' 체크박스를 눌렀을 때 작동하는 원리가 바로 이 `filter()`입니다. 전체 상품이 담긴 배열에 대고 "가격이 3만 원 이하인 것들만 통과시켜 줘"라는 조건을 걸어 `filter()`를 실행하면, 해당 조건이 '참(True)'인 데이터들만 살아남아 새로운 배열로 탄생합니다.

이 역시 원본 전체 상품 데이터는 그대로 보존되기 때문에, 다시 필터를 해제하면 언제든 전체 상품을 다시 보여줄 수 있습니다. `map()`이 데이터의 '형태를 바꾸는' 공장이라면, `filter()`는 데이터의 '개수를 줄여주는' 정수기 필터라고 생각하시면 기억하기 쉽습니다. 실전에서는 `filter()`로 먼저 원하는 데이터를 걸러낸 뒤, 연달아 `map()`을 붙여서 화면에 그리는 패턴(`데이터.filter(...).map(...)`)이 아주 흔하게 사용됩니다.

개념 퀴즈

퀴즈 답을 맞춰야 학습 완료가 됩니다.

다음 중 자바스크립트의 배열 메서드에 대한 설명으로 틀린 것은 무엇입니까?

3줄 요약

1배열은 순서가 중요한 데이터들의 목록을 관리하며, 객체는 이름표(Key)를 붙여 속성들을 한데 묶어 관리합니다.
2map() 메서드는 원본 데이터를 손상시키지 않고 각 요소를 변환하여 화면에 그릴 UI 컴포넌트 목록을 생성할 때 필수적으로 사용됩니다.
3filter() 메서드는 특정 조건에 맞는 데이터만 걸러낼 때 사용되며, 실전에서는 map()과 연결하여 자주 활용됩니다.