frontend/javascript

🟨 1-8. 객체(Object)와 배열(Array) — 구조, 조작, 메서드 완벽 이해

mirabo01 2025. 11. 6. 22:06

자바스크립트를 배우다 보면 결국 모든 데이터가 객체(Object) 로 통한다는 걸 깨닫게 된다.
숫자, 문자열, 함수, 배열 — 전부 객체의 한 형태거나 객체에서 파생된 존재다.

이 글에서는 객체와 배열을 단순히 “자료 구조”로 보지 않고,
데이터를 표현하고 조작하는 철학적 도구로 접근해보자.

1. 객체(Object)의 개념

객체는 하나의 실체를 표현하기 위한 키(key)-값(value) 쌍의 집합이다.
예를 들어 사람을 표현하려면 다음과 같이 쓸 수 있다.

const person = {
  name: "기범",
  age: 27,
  job: "Frontend Developer",
};

여기서 name, age, job은 속성(property) 이며,
이 속성들은 각각의 값과 연결되어 있다.

이런 구조 덕분에 객체는 현실의 개념을 코드로 모델링할 수 있다.

2. 객체의 접근 방법

객체의 값을 불러오는 방법은 두 가지다.

console.log(person.name);    // 점(dot) 표기법
console.log(person["job"]);  // 대괄호 표기법

점 표기법은 주로 고정된 키 이름을 사용할 때,
대괄호 표기법은 변수나 동적으로 접근할 때 사용한다.

const key = "age";
console.log(person[key]); // 27

대괄호 표기법을 쓰면, API 응답 데이터처럼
키 이름이 동적으로 결정되는 상황에서 매우 유용하다.

3. 객체의 수정, 추가, 삭제

객체는 유연한 자료형이다.
필요할 때 언제든 속성을 추가하거나 삭제할 수 있다.

person.address = "서울특별시";
delete person.job;
console.log(person);

단, 이렇게 객체를 직접 조작하는 방식은 실무에서는 잘 쓰지 않는다.
대신 불변성(immutability) 을 유지하기 위해 스프레드 연산자나 Object.assign()을 활용한다.

const newPerson = { ...person, age: 28 };
console.log(newPerson);

이렇게 하면 원본 객체를 훼손하지 않고 새로운 객체를 만들어낸다.

4. 객체 순회 — for...in

객체의 속성을 모두 탐색하고 싶을 때는 for...in 문을 사용한다.

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

for...in은 객체의 모든 열거 가능한 속성을 탐색한다.
하지만 배열에는 절대 사용하지 않는 게 좋다.
순서가 보장되지 않기 때문이다.

5. 객체의 주요 내장 메서드

자바스크립트는 객체를 효율적으로 다루기 위한 여러 유틸리티 함수를 제공한다.

메서드 설명

Object.keys(obj) 키 목록을 배열로 반환
Object.values(obj) 값 목록을 배열로 반환
Object.entries(obj) [키, 값] 쌍 배열 반환
Object.assign(target, ...sources) 객체 복사 및 병합
Object.freeze(obj) 객체를 변경 불가능하게 고정

예시 👇

const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

console.log(keys); // ["name", "age", "address"]
console.log(values); // ["기범", 28, "서울특별시"]
console.log(entries); // [["name","기범"],["age",28],["address","서울특별시"]]

6. 배열(Array)의 개념

배열은 여러 데이터를 순서대로 나열한 집합이다.
인덱스(index)는 0부터 시작하며, 각 요소(element)는 순서를 가진다.

const fruits = ["사과", "바나나", "포도"];

배열은 사실상 “객체”의 한 종류다.
즉, 배열도 내부적으로는 Array 객체이며 메서드를 통해 조작할 수 있다.

7. 배열의 기본 조작

배열은 데이터 추가, 삭제, 수정이 매우 자유롭다.

fruits.push("딸기");     // 맨 뒤에 추가
fruits.unshift("수박");  // 맨 앞에 추가
fruits.pop();            // 마지막 제거
fruits.shift();          // 첫 번째 제거

배열 중간에 요소를 삽입하고 싶다면 splice()를 사용한다.

fruits.splice(1, 0, "멜론"); // 1번 인덱스에 '멜론' 추가
console.log(fruits);

8. 배열 순회 방법

자바스크립트에서는 배열을 반복하는 방법이 정말 다양하다.

1️⃣ for문

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

2️⃣ for...of

for (const fruit of fruits) {
  console.log(fruit);
}

3️⃣ forEach

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});

forEach는 콜백 함수를 인자로 받아 배열 요소마다 실행한다.
코드가 간결하고, React 같은 프레임워크에서도 자주 사용된다.

9. 배열의 변형 메서드

배열을 다른 형태로 변환할 때 자주 쓰이는 고차 함수(High-order Functions)들을 살펴보자.

const numbers = [1, 2, 3, 4, 5];

map — 새로운 배열 반환

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

filter — 조건에 맞는 요소만

const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

reduce — 누적 계산

const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

이 세 가지 메서드는 실무 데이터 처리의 90% 이상을 차지한다.

10. 배열의 정렬과 탐색

정렬(sort)

const arr = [10, 2, 5, 1];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 5, 10]

기본 sort()는 문자열 기준으로 정렬하므로, 숫자일 땐 반드시 비교 함수를 넘겨야 한다.

탐색(find, some, every)

const users = [
  { id: 1, name: "철수" },
  { id: 2, name: "영희" },
  { id: 3, name: "민수" },
];

const found = users.find(u => u.id === 2);
console.log(found); // {id: 2, name: "영희"}

some은 조건을 만족하는 요소가 하나라도 있으면 true,
every는 모두 만족해야 true를 반환한다.

11. 배열과 객체의 조합 — 실무형 데이터

대부분의 프론트엔드 프로젝트에서는
배열 안에 객체를 담는 형태로 데이터를 관리한다.

const products = [
  { name: "노트북", price: 1200000 },
  { name: "키보드", price: 80000 },
  { name: "마우스", price: 30000 },
];

상품명만 추출하려면 map,
10만 원 이상만 걸러내려면 filter,
총합을 구하려면 reduce를 쓴다.

const names = products.map(p => p.name);
const expensive = products.filter(p => p.price > 100000);
const total = products.reduce((sum, p) => sum + p.price, 0);

이 세 줄로 데이터 분석, 집계, 필터링이 모두 가능하다.

12. 구조 분해 할당 (Destructuring)

객체나 배열에서 원하는 값만 깔끔하게 꺼낼 수도 있다.

const user = { name: "기범", age: 27, job: "개발자" };
const { name, job } = user;
console.log(name, job); // 기범 개발자

배열도 가능하다.

const colors = ["red", "green", "blue"];
const [first, second] = colors;
console.log(first, second); // red green

이 문법은 React나 Vue의 props/state 처리에서도 아주 자주 등장한다.

13. 스프레드(Spread)와 rest 문법

스프레드: 펼치기

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1,2,3,4]

rest: 나머지 모으기

const [a, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2,3,4]

이 두 문법은 배열과 객체를 다루는 가장 강력한 표현식 중 하나다.

14. 마무리

객체와 배열은 자바스크립트의 ‘심장’과 같다.
데이터를 저장하고, 전달하고, 조작하는 거의 모든 로직이
이 두 구조 위에서 작동한다.

  • 객체는 의미 있는 데이터의 묶음
  • 배열은 순서가 있는 데이터의 흐름

이 둘을 자유롭게 다루게 되면
API 데이터를 받아 화면에 출력하거나,
사용자 입력을 저장하고 가공하는 일이 훨씬 자연스러워진다.

다음 편에서는
1-9. 함수형 메서드(map, filter, reduce) 심화 — 실무 데이터 처리의 핵심 원리
를 통해 고차 함수의 동작 원리와 활용 패턴을 깊이 있게 다뤄보자.