데이터의 DNA: 객체와 배열 마스터클래스

Source: Dev.to

소개

다시 오신 것을 환영합니다. 이 글에서는 JavaScript에서 데이터를 다루는 절대적인 핵심인 객체와 배열에 대해 깊이 파고들겠습니다.

이미 변수를 사용해 본 적이 있다면, 변수가 단일 데이터를 저장하는 데에 훌륭하다는 것을 알 것입니다. 하지만 실제 애플리케이션—React로 앱을 만들든, Node.js로 백엔드를 구축하든, 혹은 다른 어떤 작업이든—단일 고립된 값만을 다루지는 않을 것입니다. 데이터 컬렉션을 다루게 됩니다. 데이터를 그룹화해야 하는데, 바로 객체와 배열이 이를 가능하게 해줍니다.

우리는 기본 문법만 살펴보는 것이 아니라, 내부적으로 어떤 일이 일어나는지 이해하고, 이 구조들을 전문가처럼 조작하는 방법을 배우고자 합니다.

배열: 순서가 있는 리스트와 그 비밀

배열부터 시작해봅시다. 마드리드 지하철 앱을 만든다고 상상해 보세요. 노선들의 리스트가 있습니다. 순서가 중요하죠? 1호선이 2호선보다 먼저입니다.

JavaScript에서는 대괄호 []를 사용해 배열을 생성합니다. 본질적으로 각 값이 숫자 위치(인덱스)를 갖는 값들의 리스트입니다.

Note: 인덱스는 0부터 시작합니다.
배열은 강력한 내장 메서드를 갖춘 반복 가능한 객체입니다.

스프레드 연산자 (...)

스프레드 연산자를 사용하면 배열(또는 객체)을 개별 요소로 펼칠 수 있습니다. 원본 구조를 변형하지 않고 복사, 연결, 삽입 등을 할 때 필수적입니다.

배열 다루기

배열을 만든 뒤 그대로 두는 경우는 거의 없습니다. 요소를 추가하거나 제거하고, 변형해야 할 때가 많습니다. 이때 push, pop, filter, map, reduce 같은 메서드가 등장합니다.

map을 사용하는 방식을 주목하세요. 이는 특히 React와 같은 현대 개발 환경에서 원본 배열을 변형하지 않고 데이터를 변환하는 가장 중요한 함수 중 하나입니다.

객체: 키‑값 쌍

배열은 순서가 있는 리스트를 위해 사용되는 반면, 객체는 특정 엔터티(사용자, 제품, 설정 등)와 관련된 데이터를 그룹화하기 위해 사용됩니다. 우리는 중괄호 {}를 사용하고 key: value 쌍을 정의합니다.

속성은 점 표기법(user.name)이나 대괄호 표기법(user['role'])을 사용해 접근할 수 있습니다. 대괄호 표기법은 접근하려는 키가 변수에 저장되어 있을 때 매우 유용합니다.

Reference Types vs. Primitives

이 개념은 많은 개발자들이 헷갈려 하는 부분입니다. 위에서 배열과 객체를 선언할 때 const를 사용한 것을 눈치채셨을 수도 있습니다. 다음과 같은 생각이 들 수 있겠죠:

“const인데 안에 있는 것을 왜 바꿀 수 있지?”

좋은 질문입니다! 이는 배열과 객체가 레퍼런스 타입이기 때문에 발생합니다. 변수는 값 자체를 저장하지 않고, 데이터가 위치한 메모리 주소(포인터)를 저장합니다.

객체 내부의 프로퍼티를 수정할 때 우리는 메모리 주소를 바꾸는 것이 아니라, 그 주소가 가리키는 위치에 있는 데이터를 바꾸는 것입니다. 그래서 const가 허용되는 것이죠. 하지만 이것은 객체를 단순히 다른 변수에 할당해서 복사하면, 데이터를 복사하는 것이 아니라 포인터를 복사한다는 의미이기도 합니다.

현대 문법: 스프레드와 구조 분해

ES6+는 이러한 구조를 더 깔끔하게 다룰 수 있는 훌륭한 도구들을 제공했습니다.

스프레드 연산자

객체의 실제 복사본을 만들거나 두 배열을 결합하고 싶다면, 스프레드 연산자가 최고의 친구가 됩니다.

구조 분해

객체에서 특정 속성만 추출해 변수에 저장하고 싶다면? 구조 분해를 사용하면 한 줄의 코드로 가능합니다.

// Example of object destructuring
const user = { name: 'Ada', role: 'Developer', age: 30 };
const { name, role } = user; // name = 'Ada', role = 'Developer'

마무리 생각

객체와 배열을 이해하는 것은 모든 JavaScript 개발자에게 기본입니다. 현대 문법인 스프레드, 레스트, 구조 분해 할당을 마스터하면 코드가 더 읽기 쉽고, 유지 보수가 용이하며, 효율적이 됩니다.

행복한 코딩 되세요! 🚀

모두 합쳐보기: 객체 배열

여기서 이론이 현실과 만납니다. 거의 모든 애플리케이션에서 객체 배열을 다루게 됩니다. API에서 반환되는 JSON 응답을 떠올려 보세요.

이 구조들을 마스터하는 것은 단순히 문법을 배우는 것이 아니라 데이터를 어떻게 모델링할지 이해하는 것입니다. Glovo에서 메뉴를 다루든 Fever에서 이벤트를 필터링하든, 언제나 이 기본 원칙으로 돌아오게 됩니다.

이 내용이 여러분에게 더 명확한 비전을 제공했길 바랍니다! 콘솔에서 코드를 실행해 보고 다음 기사에서 다시 만나세요. CodeSyllabus.com