🧩 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()는 하나로 합칠 때 사용합니다.
답글 남기기