JS LAB
    JS 3.6 · 3부. 데이터 다루기

    객체 기초

    이름을 붙인 값들을 하나로 묶습니다. 두 가지 표기법을 봅니다.

    예상 학습 시간 15분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 초급
    개념 설명

    이름을 붙여 묶습니다

    배열은 여러 값을 순서로 담습니다. 그런데 사람의 이름과 나이처럼 값마다 뜻이 다르면 순서로는 알아보기 어렵습니다. 그때는 값마다 이름을 붙여 묶습니다. 그것이 객체(object) 입니다.

    중괄호 안에 이름: 값 을 쉼표로 구분해 적습니다. 이 이름을 속성(property) 이라고 합니다.

    최소 예제 · 편집 가능

    만들고 꺼내기

    script.js 
    const person = {
	name: "홍길동",
	age: 27,
	isMember: true
};

console.log(person);
console.log(person.name);
console.log(person["age"]);
console.log(person.email);
    출력
    { name: "홍길동", age: 27, isMember: true } 홍길동 27 undefined

    꺼내는 방법이 둘입니다. 점 표기법(person.name)이 짧아 기본으로 쓰고, 대괄호 표기법(person["age"])은 속성 이름이 변수에 담겨 있을 때 사용합니다.

    없는 속성을 꺼내면 오류가 아니라 undefined 입니다.

    상세 사용법

    더하고 바꾸고 지우기

    script.js 
    const person = { name: "홍길동", age: 27 };

person.city = "서울";
person.age = 28;
delete person.name;

console.log(person);
console.log("city" in person);
console.log("name" in person);
    출력
    { age: 28, city: "서울" } true false

    배열과 마찬가지로 const 로 선언해도 속성은 바꿀 수 있습니다. 바꾸지 못하는 것은 그 객체를 다른 것으로 바꿔치기하는 일입니다(3.1).

    상세 사용법

    속성 이름이 변수에 있을 때

    script.js 
    const person = { name: "홍길동", age: 27 };

const key = "name";

console.log(person[key]);
console.log(person.key);
    출력
    홍길동 undefined

    person.key 는 key 라는 이름의 속성을 찾습니다. 변수에 담긴 값을 이름으로 쓰려면 대괄호여야 합니다.

    상세 사용법

    객체 안의 객체, 배열 안의 객체

    script.js 
    const product = {
	name: "연필",
	price: 1000,
	maker: { company: "문구사", country: "한국" }
};

console.log(product.maker.company);

const products = [
	{ name: "연필", price: 1000 },
	{ name: "공책", price: 2000 }
];

console.log(products.length);
console.log(products[0].name);

products.forEach(p => console.log(`${p.name}: ${p.price}원`));
    출력
    문구사 2 연필 연필: 1000원 공책: 2000원

    객체가 담긴 배열이 실무에서 가장 자주 다루는 모양입니다. 서버에서 받아 오는 데이터가 대부분 이렇게 생겼습니다(3.8).

    상세 사용법

    배열 메서드와 함께 쓰기

    3.3~3.5 에서 배운 것을 객체 배열에 그대로 사용합니다.

    script.js 
    const products = [
	{ name: "연필", price: 1000, stock: 3 },
	{ name: "공책", price: 2000, stock: 0 },
	{ name: "지우개", price: 500, stock: 7 }
];

console.log(products.filter(p => p.stock > 0).map(p => p.name));
console.log(products.find(p => p.name === "공책"));
console.log(products.some(p => p.stock === 0));
console.log(products.reduce((sum, p) => sum + p.price, 0));
    출력
    ["연필", "지우개"] { name: "공책", price: 2000, stock: 0 } true 3500
    흔한 실수

    처음에 자주 걸리는 것

    1. 없는 속성의 속성을 꺼냅니다

    product.maker 가 undefined 인데 .company 를 이어 적으면 오류가 납니다. 6.5 의 ?. 로 안전하게 다루는 방법을 다룹니다. 

    TypeError: Cannot read properties of undefined (reading 'company')
    2. 대괄호 안에 따옴표를 빠뜨립니다

    person[name] 은 name 이라는 변수를 찾습니다. 글자 그대로라면 person["name"] 입니다.

    3. 두 객체를 === 로 비교합니다

    속성이 똑같아도 다른 객체이면 거짓입니다. 같은 것을 가리킬 때만 참입니다. 

    console.log({ a: 1 } === { a: 1 });   // false
    실습 문제

    직접 해보기

    1. 상품 하나 만들기 난이도 하

    이름·가격·재고를 담은 객체를 만들고, 연필 1000원 (재고 3개) 형태로 출력하세요.

    const item = { name: "연필", price: 1000, stock: 3 }; console.log(`${item.name} ${item.price}원 (재고 ${item.stock}개)`);
    2. 재고 있는 상품의 총액 난이도 중

    상품 객체 배열에서 재고가 있는 것만 골라 가격의 합을 출력하세요.

    거르고 나서 모읍니다 — filter 뒤에 reduce 입니다.
    const products = [ { name: "연필", price: 1000, stock: 3 }, { name: "공책", price: 2000, stock: 0 }, { name: "지우개", price: 500, stock: 7 } ]; const total = products .filter(p => p.stock > 0) .reduce((sum, p) => sum + p.price, 0); console.log(total); // 1500
    요약

    이 단원의 정리

    • 객체는 값마다 이름을 붙여 묶습니다. 그 이름을 속성이라고 합니다.
    • 점 표기법이 기본이고, 이름이 변수에 있을 때만 대괄호를 사용합니다.
    • 없는 속성은 오류가 아니라 undefined 입니다.
    • const 객체도 속성은 바꿀 수 있습니다.
    • 객체가 담긴 배열이 실무에서 가장 자주 다루는 모양입니다.