객체와 배열

• 데이터를 구조화하고 관리하는 기본적인 데이터 타입.

객체와 배열의 차이점

기본개념

특징	객체 (Object)	배열 (Array)
데이터 구조	키-값(key-value) 쌍으로 데이터를 저장.	순서(index)를 가진 값들의 리스트로 데이터를 저장.
키의 타입	문자열 또는 Symbol만 가능.	고정된 숫자 인덱스를 사용.
값의 타입	모든 데이터 타입이 가능.	모든 데이터 타입이 가능.
순서 유지 여부	키의 순서가 보장되지 않음.	삽입한 순서가 유지됨.

사용목적

특징	객체 (Object)	배열 (Array)
데이터 구조화	속성(property)로 데이터를 명확하게 표현할 때 사용.	순서대로 정렬된 데이터를 다룰 때 사용.
액세스 방법	키를 통해 특정 데이터에 접근.	숫자 인덱스를 통해 특정 데이터에 접근.
사용 사례	사용자의 정보를 표현 (이름, 나이, 주소 등).	목록, 리스트, 배열 (예: 상품 목록, 점수 목록).

주요 메소드

특징	객체 (Object)	배열 (Array)
값 추가	obj.key = value 또는 obj["key"] = value.	arr.push(value) (끝에 추가), arr.unshift(value) (앞에 추가).
값 삭제	delete obj.key.	arr.pop() (끝 삭제), arr.shift() (앞 삭제).
순회	for...in 또는 Object.keys(), Object.entries().	for, for...of, arr.forEach(), arr.map().
정렬 기능	없음 (순서가 없는 구조).	arr.sort(), arr.reverse() 등.

• 같은 기능을 수행하는 메소드가 왜 여럿인가?

• 원본 배열/객체를 수정하는지, 결과값이 필요한지, 모든 데이터를 처리하는 지 등의 이유로 메소드들이 나누어진다. 필요에 따라 맞는 메서드를 선택하면 된다.

• 수많은 메소드들의 기능을 일일이 외울 필요는 없고, 공식 문서나 구글링/AI 질문 등으로 필요할 때 찾아서 사용하면 된다.

1. 객체 (Object)

정의

객체는 key-value 쌍으로 데이터를 저장하는 자료형.
키는 문자열이나 Symbol만 가능, 값은 모든 타입이 될 수 있다.

문법

const obj = {
  key1: "value1",
  key2: 123,
  key3: [1, 2, 3],
  key4: { nestedKey: "nestedValue" }
};

객체의 주요 특징

데이터를 구조화하여 저장하기 적합.
키를 통해 값에 접근하거나 수정할 수 있음.

객체의 주요 메서드

코드 복사

console.log(obj.key1); // "value1"
console.log(obj["key2"]); // 123

추가/수정

obj.key5 = "newValue"; // 추가
obj.key1 = "updatedValue"; // 수정

삭제

delete obj.key2;

키와 값 다루기

Object.keys(obj): 객체의 키 배열 반환
Object.values(obj): 객체의 값 배열 반환
Object.entries(obj): [키, 값] 배열 반환

사용 예

const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is John"

2. 배열 (Array)

정의

배열은 순서가 있는 값의 리스트를 저장하는 자료형.
값은 중복될 수 있으며, 모든 데이터 타입을 포함할 수 있다.

문법

const arr = ["apple", "banana", "cherry"];

배열의 주요 특징

인덱스(숫자)를 사용하여 값에 접근.
순서를 기반으로 데이터를 다루기에 적합.
0부터 시작하는 인덱스를 가짐.

배열의 주요 메서드

• 상세 내용은 이전 포스팅 참조.

접근

console.log(arr[0]); // "apple"
console.log(arr[2]); // "cherry"

추가/수정

끝에 추가: arr.push("date")
앞에 추가: arr.unshift("kiwi")
수정: arr[1] = "blueberry"

삭제

끝 삭제: arr.pop()
앞 삭제: arr.shift()

찾기

arr.indexOf("banana"): 값의 인덱스 반환
arr.includes("cherry"): 값이 배열에 포함되었는지 확인

정렬

arr.sort(): 정렬
arr.reverse(): 배열 순서를 뒤집음

반복

arr.forEach(): 각 요소에 대해 반복
arr.map(): 새로운 배열 생성

필터링

const filtered = arr.filter(item => item.includes("a"));

사용 예

const fruits = ["apple", "banana", "cherry"];

// 배열 반복
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// 새로운 배열 생성
const upperCaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperCaseFruits); // ["APPLE", "BANANA", "CHERRY"]

3. 혼합 사용

• 객체와 배열은 함께 사용되어 복잡한 데이터 구조를 형성할 수 있다.

• 실전에서는 보통 객체와 배열이 같이 사용되는 상황이 대단히 흔하게 나타나곤 한다.

const data = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 3, name: "Doe" }
];

console.log(data[1].name); // "Jane"

4. 구조분해할당 (비구조화)

• 배열과 객체의 Destructuring.

• '비구조화'라고도 하고 '구조분해할당'으로도 번역된다. 어느 쪽을 사용해도 상관은 없다. 같은 개념을 지칭하는 단어들이기 때문.

• 객체 또는 배열의 속성을 개별 변수로 추출하는 문법. 코드를 간결하고 가독성 있게 작성할 수 있다.

특징	구조분해할당 사용하지 않을 때	구조분해할당 사용할 때
코드 길이	객체 이름이나 배열 인덱스를 반복적으로 사용해야 함.	한 줄로 필요한 속성을 추출할 수 있음.
가독성	불필요한 코드로 인해 복잡도가 증가.	코드가 간결하고 명확해짐.
기본값 처리	수동으로 기본값을 설정해야 함.	선언과 동시에 기본값을 설정할 수 있음.
중첩 구조 처리	중첩된 속성을 추출하려면 반복적으로 객체 이름 사용.	중첩 구조에서도 필요한 속성만 깔끔하게 추출 가능.

구조분해할당 예시

const user = { name: "Alice", age: 30, job: "Developer" };

// 각 속성에 접근하기 위해 객체 이름을 반복적으로 사용해야 함
const name = user.name;
const age = user.age;
const job = user.job;

//
//

const numbers = [10, 20, 30];

// 각 요소에 접근하려면 인덱스를 명시적으로 사용
const first = numbers[0];
const second = numbers[1];
const third = numbers[2];

const user = { name: "Alice", age: 30, job: "Developer" };

// 객체를 분해하여 변수에 바로 할당
const { name, age, job } = user;

//
//

const numbers = [10, 20, 30];

// 배열을 분해하여 변수에 바로 할당
const [first, second, third] = numbers;

• 내부 속성에 접근하기 위해서 점 표기법을 활용해서 기존 객체명을 반복 사용해야 하지만, 구조분해할당을 활용하면 그럴 필요 없이 현장에서 객체를 분해하여 변수에 바로 할당하여 사용할 수 있게된다.

구조분해할당 예시 - 심화

const user = {
  name: "Alice",
  address: {
    city: "Seoul",
    zip: "12345"
  }
};

// 중첩된 속성에 접근하려면 객체 이름을 계속 사용
const city = user.address.city;
const zip = user.address.zip;

const user = {
  name: "Alice",
  address: {
    city: "Seoul",
    zip: "12345"
  }
};

// 중첩된 구조에서 필요한 속성만 분해하여 추출
const { address: { city, zip } } = user;

console.log(city); // "Seoul"
console.log(zip);  // "12345"

• 중첩 구조가 가능한 객체에서는 구조분해할당을 중첩 구조에서도 사용할 수 있다.

const user = { name: "Alice", age: 30 };

function displayUserInfo(user) {
  console.log(`Name: ${user.name}`);
  console.log(`Age: ${user.age}`);
}

const user = { name: "Alice", age: 30 };

function displayUserInfo({ name, age }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
}

• 함수의 인자도 객체라면 구조분해할당을 사용할 수 있다.

const user = { name: "Alice" };

// 기본값을 설정하려면 조건문 또는 `||` 사용
const age = user.age || 25;

const user = { name: "Alice" };

// 기본값을 구조분해할당에서 바로 설정
const { age = 25 } = user;

• 기본값 지정도 구조분해할당 문법을 활용할 수 있다.