🧩 JavaScript 객체(Object) 완벽 정리

자바스크립트에서 **객체(Object)**는 가장 중요한 데이터 구조 중 하나입니다.
객체는 **이름(key)**과 **값(value)**으로 구성되어 있으며, 여러 데이터를 하나로 묶어 표현할 수 있습니다.


1️⃣ 객체(Object)란?

객체는 “key: value” 쌍의 집합입니다.

const person = {
  name: "홍길동",
  age: 30,
  job: "개발자"
};
항목 설명
name, age, job 속성(key)
"홍길동", 30, "개발자" 값(value)

2️⃣ 객체 생성 방법

(1) 객체 리터럴 (가장 일반적)

const user = { name: "Tom", age: 25 };

(2) new Object() 생성자

const user = new Object();
user.name = "Tom";
user.age = 25;

(3) 생성자 함수

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p1 = new Person("Jane", 20);

(4) 클래스(class, ES6 이상)

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const p2 = new Person("Kim", 35);

3️⃣ 속성 접근 방법

(1) 점 표기법 (dot notation)

console.log(person.name); // "홍길동"

(2) 대괄호 표기법 (bracket notation)

console.log(person["age"]); // 30

💡 변수명을 이용해 접근할 때 유용합니다.

const key = "job";
console.log(person[key]); // "개발자"

4️⃣ 속성 추가 / 수정 / 삭제

// 추가
person.gender = "남자";

// 수정
person.age = 31;

// 삭제
delete person.job;

5️⃣ 주요 Object 메서드

메서드 설명 예시
Object.keys(obj) 객체의 모든 키를 배열로 반환 ["name", "age"]
Object.values(obj) 모든 값을 배열로 반환 ["홍길동", 30]
Object.entries(obj) [key, value] 쌍을 배열로 반환 [["name", "홍길동"], ["age", 30]]
Object.assign(target, source) 객체 복사 또는 병합 Object.assign({}, obj)
Object.freeze(obj) 객체를 동결(수정 불가) 속성 추가/삭제/변경 불가
Object.seal(obj) 추가/삭제는 불가, 수정만 가능

6️⃣ 객체 순회 (반복문)

(1) for…in

for (let key in person) {
  console.log(key, person[key]);
}

(2) Object.entries() + forEach()

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

7️⃣ 객체는 참조 타입(reference type)

객체는 참조로 저장되기 때문에 복사 시 주의해야 합니다.

const a = { name: "Tom" };
const b = a;
b.name = "Jane";

console.log(a.name); // "Jane" ← a도 변경됨

8️⃣ 객체 요약 정리

구분 내용
정의 key-value 쌍의 데이터 집합
생성 {} 또는 new Object()
접근 obj.key, obj["key"]
순회 for...in, Object.keys/values/entries
복사 Object.assign() 또는 전개 연산자(...)
특징 참조 타입 (복사 시 주의 필요)

🧩 JavaScript map(), filter(), reduce() 완벽 정리

자바스크립트에서 배열을 다룰 때 가장 많이 사용하는 고차 함수 3종 세트입니다 👇

메서드 역할
map() 배열의 각 요소를 변환하여 새 배열을 반환
filter() 조건에 맞는 요소만 골라 새 배열로 반환
reduce() 모든 요소를 누적하여 하나의 결과값으로 반환

1️⃣ map() — 배열을 변형한다

map()은 기존 배열을 유지하면서, 각 요소를 새로운 값으로 변환해 새로운 배열을 만듭니다.

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

🔹 화살표 함수 버전

const doubled = numbers.map(num => num * 2);

💡 map()은 원본 배열(numbers)을 절대 수정하지 않습니다.


2️⃣ filter() — 조건에 맞는 요소만 남긴다

filter()는 조건식을 만족하는 요소만 새 배열에 담습니다.

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

const even = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(even); // [2, 4]

🔹 화살표 함수 버전

const even = numbers.filter(num => num % 2 === 0);

💡 filter()도 원본 배열을 변경하지 않으며, 조건에 맞지 않으면 빈 배열을 반환합니다.


3️⃣ reduce() — 모든 요소를 하나의 값으로 합친다

reduce()는 배열의 모든 요소를 순회하면서,
하나의 결과값으로 ‘누적(accumulate)’ 합니다.

형식 👇

array.reduce((누적값, 현재값, 인덱스, 원본배열) => { ... }, 초기값)

🔹 예시 ① — 합계 구하기

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

const sum = numbers.reduce(function(acc, cur) {
  return acc + cur;
}, 0);

console.log(sum); // 15

🔹 예시 ② — 최대값 구하기

const max = numbers.reduce((acc, cur) => (cur > acc ? cur : acc), numbers[0]);
console.log(max); // 5

🔹 예시 ③ — 객체 배열 합치기

const users = [
  { name: "Tom", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Kim", age: 28 }
];

const totalAge = users.reduce((acc, user) => acc + user.age, 0);
console.log(totalAge); // 83

4️⃣ 세 메서드 비교 정리

구분 기능 반환값 원본 변경
map() 각 요소를 변환 새 배열
filter() 조건에 맞는 요소만 반환 새 배열
reduce() 모든 요소를 누적 계산 단일 값

5️⃣ 함께 쓰는 예시

세 메서드는 조합하면 더 강력합니다 💪

예: 짝수만 2배로 만든 뒤, 합계를 구하기

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

const result = numbers
  .filter(n => n % 2 === 0) // 짝수만 남김 → [2, 4, 6]
  .map(n => n * 2)          // 2배 → [4, 8, 12]
  .reduce((sum, n) => sum + n, 0); // 합계 → 24

console.log(result); // 24

🧠 요약

메서드 역할 반환값 예시
map() 변형(transform) [2, 4, 6, 8]
filter() 조건(select) [2, 4]
reduce() 누적(accumulate) 15

🔚 마무리

  • map()은 변형할 때,
  • filter()는 걸러낼 때,
  • reduce()는 하나로 합칠 때 사용합니다.