📋
EPISODE 05
리터럴 · 메서드/this · 구조분해 · 전개 · JSON
객체
객체 리터럴, 점/대괄호 표기법, 메서드와 this, 객체 배열 패턴, 구조분해할당, 전개 연산자, 그리고 JSON 직렬화를 익힙니다.
JavaScriptobjectdestructuringJSON
소요 시간
⏱ 60분
난이도
📊 초보~중급
선수 조건
🎯 js-04
결과물
객체 배열을 자유롭게 변형·집계·직렬화
이 강의에서 배우는 것
- 1객체 리터럴로 데이터를 구조화한다
- 2점/대괄호 표기법으로 속성에 접근한다
- 3메서드와 this를 이해한다
- 4구조분해와 전개로 깔끔한 코드를 쓴다
- 5JSON.stringify / JSON.parse로 직렬화한다
1. 객체 리터럴
javascript
const person = {
name: "홍길동",
age: 25,
city: "서울",
isStudent: false,
};2. 속성 접근
javascript
// 점 표기법
console.log(person.name);
person.email = "h@a.com"; // 추가
person.age = 26; // 수정
delete person.isStudent; // 삭제
// 대괄호 표기법 (동적 키)
const key = "name";
console.log(person[key]);
const obj = { "first name": "길동" };
console.log(obj["first name"]);3. 메서드와 this
javascript
const person = {
name: "홍길동",
age: 25,
greet: function() {
return `안녕하세요, ${this.name}입니다!`;
},
// 단축 메서드 (ES6+)
getInfo() {
return `${this.name} (${this.age}세)`;
},
};
console.log(person.greet());
console.log(person.getInfo());⚠️
화살표 함수는 자신만의 this를 갖지 않으므로 메서드에는 일반 함수를 사용합니다.
4. 객체 배열
javascript
const students = [
{ id: 1, name: "김철수", grade: "A", score: 95 },
{ id: 2, name: "이영희", grade: "B", score: 82 },
{ id: 3, name: "박민준", grade: "A", score: 91 },
];
const student = students.find(s => s.id === 2);
const aStudents = students.filter(s => s.grade === "A");
const avg = students.reduce((sum, s) => sum + s.score, 0) / students.length;5. 구조분해할당
javascript
const person = { name: "홍길동", age: 25, city: "서울" };
const { name, age, city } = person;
// 변수명 변경
const { name: userName, age: userAge } = person;
// 기본값
const { email = "없음" } = person;
// 함수 매개변수
function greet({ name, age }) {
return `${name}님은 ${age}세입니다.`;
}6. 전개 연산자
javascript
const original = { name: "홍길동", age: 25 };
// 복사 (얕은)
const copy = { ...original };
// 합치기 (뒤가 우선)
const merged = { ...original, ...{ city: "서울", age: 30 } };
// 속성 추가/수정
const updated = { ...original, email: "h@a.com", age: 26 };7. JSON
javascript
const person = { name: "홍길동", age: 25 };
// 객체 → JSON 문자열
const json = JSON.stringify(person);
// JSON 문자열 → 객체
const parsed = JSON.parse(json);
// 들여쓰기
console.log(JSON.stringify(person, null, 2));