JavaScript 객체(Object): 연관된 데이터를 구조화하여 관리하기
    2

    JavaScript 객체(Object): 연관된 데이터를 구조화하여 관리하기

    Coding BasicsFront-End Development

    JavaScript 객체(Object): 연관된 데이터를 구조화하여 관리하기


    배열만으로는 부족할 때가 있지 않나요?


    지난 포스팅에서 우리는 배열(Array)에 대해 배웠습니다. 배열은 여러 개의 취미나 점수처럼 같은 종류의 데이터를 리스트 형태로 관리할 때 아주 유용했죠.



    let hobbies = ["sports", "cooking", "reading"];


    하지만 실제 프로그래밍을 하다 보면, 단순한 리스트로는 표현하기 어려운 데이터들이 있습니다.


    신분증을 떠올려 볼까요?

    여권이나 주민등록증을 생각해 보세요. 신분증에는 어떤 정보들이 있나요?

    1. 이름: 홍길동
    2. 생년월일: 1990-05-15
    3. 주소: 서울특별시 강남구
    4. 발급일: 2020-01-10


    이 정보들은 분명히 서로 연관되어 있습니다. 모두 한 사람을 설명하는 데이터니까요. 하지만 배열로 표현하기에는 문제가 있습니다.


    배열로 표현하면 어떤 문제가 생길까요?


    let person = ["홍길동", "1990-05-15", "서울특별시 강남구", "2020-01-10"];


    문제점:

    1. 각 값이 무엇을 의미하는지 알 수 없습니다
    2. person[0]이 이름인지, 생년월일인지 기억해야 합니다
    3. 순서를 바꾸면 모든 코드를 수정해야 합니다
    4. 나중에 코드를 다시 볼 때 혼란스럽습니다


    핵심 문제: 배열은 같은 종류의 데이터를 나열하는 데는 좋지만, 다른 종류의 데이터에 라벨을 붙여 설명하는 데는 적합하지 않습니다.


    객체(Object)가 필요한 이유는 무엇인가요?


    바로 이럴 때 객체가 필요합니다! 객체는 **라벨(label)**과 **값(value)**을 쌍으로 묶어서 데이터를 표현할 수 있게 해줍니다.

    신분증처럼:

    1. 라벨: 이름, 생년월일, 주소...
    2. 값: 홍길동, 1990-05-15, 서울특별시...


    객체를 사용하면 각 데이터가 무엇을 의미하는지 명확하게 알 수 있습니다!



    객체는 어떻게 만드나요?


    기본 문법

    객체는 **중괄호 {}**를 사용해서 만듭니다:


    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };


    구조를 자세히 살펴볼까요?

    1. { : 객체의 시작
    2. title: "developer" : 첫 번째 속성 (라벨: 값)
    3. , : 각 속성을 구분하는 쉼표
    4. place: "New York" : 두 번째 속성
    5. salary: 50000 : 세 번째 속성
    6. } : 객체의 끝


    속성(Property)이란?

    객체 안의 라벨과 값의 조합을 속성(property)이라고 부릅니다.


    let job = {
    title: "developer", // 속성 1
    place: "New York", // 속성 2
    salary: 50000 // 속성 3
    };


    각 속성은:

    1. 키(key) 또는 라벨: title, place, salary
    2. 값(value): "developer", "New York", 50000
    3. 구분자: 콜론(:)으로 키와 값을 연결, 쉼표(,)로 속성 구분


    배열 vs 객체: 어떻게 다른가요?


    배열 (Array):


    let hobbies = ["sports", "cooking", "reading"];
    // 인덱스로 접근: hobbies[0], hobbies[1], hobbies[2]
    // 같은 종류의 데이터 리스트


    객체 (Object):


    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };
    // 속성 이름으로 접근: job.title, job.place, job.salary
    // 다른 종류의 데이터를 라벨과 함께 저장


    객체에 어떤 값을 넣을 수 있나요?

    객체의 속성 값으로는 우리가 배운 모든 타입을 사용할 수 있습니다!


    문자열과 숫자

    let person = {
    name: "Max", // 문자열
    age: 32, // 숫자
    city: "Seoul" // 문자열
    };


    배열도 넣을 수 있습니다

    let person = {
    name: "Max",
    age: 32,
    hobbies: ["sports", "cooking", "reading"] // 배열을 값으로!
    };



    심지어 객체 안에 객체도 가능합니다

    let person = {
    name: "Max",
    age: 32,
    address: { // 중첩된 객체
    city: "Seoul",
    district: "Gangnam"
    }
    };

    나중에 중첩된 객체(nested objects)에 대해서도 배우게 될 것입니다!



    객체의 값에는 어떻게 접근하나요?


    점(.) 표기법 사용하기


    객체의 속성에 접근하려면 점(.) 표기법을 사용합니다:


    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };

    alert(job.title); // "developer" 출력
    alert(job.place); // "New York" 출력
    alert(job.salary); // 50000 출력


    문법:

    1. 변수명 뒤에 점(.)을 찍습니다
    2. 그 다음 원하는 속성의 이름을 적습니다


    IDE의 자동 완성 기능 활용하기


    현대적인 코드 에디터(VS Code 등)에서는 점을 찍으면 자동으로 속성 목록이 나타납니다!


    job. // ← 여기서 자동 완성 목록이 나타남


    자동 완성이 나타나지 않으면?

    1. Ctrl + Space (Windows/Linux)
    2. Cmd + Space (Mac)

    를 눌러서 수동으로 트리거할 수 있습니다.


    팁: 파란색 상자 아이콘이 있는 항목들이 실제 객체의 속성입니다. 다른 제안들은 에디터의 추측일 뿐 실제로 작동하지 않을 수 있습니다.



    변수 여러 개 vs 객체 하나: 무엇이 더 나을까요?


    개별 변수로 관리하는 방법


    let jobTitle = "developer";
    let jobPlace = "New York";
    let jobSalary = 50000;


    문제점:

    1. 세 변수가 논리적으로 연관되어 있다는 것을 머릿속으로 기억해야 합니다
    2. 코드가 길어지면 어떤 변수들이 함께 속하는지 파악하기 어렵습니다
    3. 관련 데이터를 함수에 전달할 때 하나씩 전달해야 합니다



    객체로 그룹화하는 방법

    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };

    장점:

    1. 연관된 데이터가 명시적으로 그룹화되어 있습니다
    2. 코드의 의도가 명확하게 드러납니다
    3. 하나의 변수로 모든 관련 정보를 전달할 수 있습니다
    4. 나중에 유지보수하기 쉽습니다


    코드 가독성을 높이는 방법은?


    객체를 여러 줄로 나누기


    객체가 커질수록 한 줄에 모든 것을 쓰면 읽기 어려워집니다. 이럴 때는 여러 줄로 나눠서 작성하세요:


    한 줄로 작성 (읽기 어려움):


    let job = {title: "developer", place: "New York", salary: 50000};


    여러 줄로 작성 (권장):

    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };


    들여쓰기는 필수인가요?

    들여쓰기(indentation)는 기술적으로 필수는 아니지만, 가독성을 위해 강력하게 권장됩니다.


    // 들여쓰기 없음 (작동은 하지만 읽기 어려움)
    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };

    // 들여쓰기 있음 (권장)
    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };


    자동 정렬 팁:

    1. Tab 키를 누르면 자동으로 들여쓰기됩니다
    2. VS Code에서 Shift + Alt + F (Windows) 또는 Shift + Option + F (Mac)을 누르면 문서 전체가 자동으로 정렬됩니다



    배열도 여러 줄로 나눌 수 있나요?


    네! 배열이 길거나 복잡할 때는 여러 줄로 나누는 것이 좋습니다:


    // 짧은 배열 - 한 줄도 괜찮음
    let hobbies = ["sports", "cooking", "reading"];

    // 긴 배열 - 여러 줄 권장
    let longList = [
    "First item",
    "Second item",
    "Third item",
    "Fourth item",
    "Fifth item"
    ];


    문자열에서 줄바꿈은 어떻게 하나요?


    일반 따옴표에서는 줄바꿈이 안 됩니다


    // ❌ 에러 발생!
    let text = "This is
    a long text";


    일반 따옴표(' 또는 ") 안에서는 직접 줄바꿈을 할 수 없습니다.


    방법 1: 문자열 연결하기

    + 연산자로 여러 문자열을 합칠 수 있습니다:


    let text = "This is " +
    "a long text";


    더 명확하게 작성하려면:


    let text = "This is " +
    "a long text " +
    "that continues here";


    원리: JavaScript는 다음 줄에 연결될 값이 있다는 것을 이해하고 기다립니다.


    방법 2: 백틱(`) 사용하기 (권장)

    백틱(backtick)을 사용하면 문자열 안에서 자유롭게 줄바꿈을 할 수 있습니다:


    let text = `This is
    a long text
    that spans multiple lines`;


    백틱은 어디에 있나요?

    1. 대부분의 키보드에서 숫자 1 왼쪽에 있습니다
    2. 작은따옴표(')와 비슷하게 생겼지만 다른 문자입니다


    백틱의 추가 기능: 나중에 배우겠지만, 백틱을 사용하면 템플릿 리터럴(template literal)이라는 강력한 기능도 사용할 수 있습니다!



    let name = "Max";
    let age = 32;
    let message = `My name is ${name} and I am ${age} years old`;
    // "My name is Max and I am 32 years old"


    실전 예제로 이해하기

    예제 1: 사용자 프로필


    let user = {
    name: "Max",
    age: 32,
    city: "Seoul",
    hobbies: ["sports", "cooking", "reading"]
    };

    alert(user.name); // "Max"
    alert(user.age); // 32
    alert(user.hobbies[0]); // "sports" - 객체 속성이 배열일 때


    예제 2: 제품 정보

    let product = {
    name: "Laptop",
    brand: "TechCorp",
    price: 1200000,
    inStock: true
    };

    alert(product.name + " - " + product.price + "원");
    // "Laptop - 1200000원"


    예제 3: 중첩된 객체

    let person = {
    name: "Max",
    age: 32,
    address: {
    city: "Seoul",
    district: "Gangnam",
    zipCode: "06000"
    }
    };

    // 중첩된 객체 접근: 점을 연속으로 사용
    alert(person.address.city); // "Seoul"
    alert(person.address.district); // "Gangnam"


    코드 가독성: 왜 중요한가요?


    프로그래밍에서 가장 중요한 원칙 중 하나는 코드 가독성(code readability)입니다.


    좋은 코드의 특징

    1. 읽기 쉬워야 합니다나중에 다시 봐도 이해할 수 있어야 합니다
    2. 다른 개발자도 쉽게 이해할 수 있어야 합니다
    3. 명확하게 구조화되어야 합니다들여쓰기와 줄바꿈을 적절히 사용합니다
    4. 관련된 코드를 그룹화합니다
    5. 간결해야 합니다한 줄에 너무 많은 내용을 넣지 않습니다
    6. 불필요한 복잡성을 피합니다


    나쁜 코드 vs 좋은 코드


    나쁜 예:


    let job={title:"developer",place:"New York",salary:50000};alert(job.title);



    좋은 예:


    let job = {
    title: "developer",
    place: "New York",
    salary: 50000
    };

    alert(job.title);


    두 코드 모두 작동하지만, 어느 것이 더 읽기 쉬운가요? 당연히 두 번째입니다!



    속성은 변수와 비슷한가요?

    네, 좋은 질문입니다! 객체의 **속성(property)**은 객체에 속한 변수라고 생각할 수 있습니다.


    변수와 속성의 비교


    일반 변수:


    let title = "developer";
    let place = "New York";


    객체의 속성:


    let job = {
    title: "developer", // job 객체 안에 "포함된" 변수
    place: "New York"
    };


    차이점은 무엇인가요?

    특징일반 변수객체 속성
    선언 키워드let 필요let 불필요
    값 할당= 사용: 사용
    접근 방법변수명 직접객체명.속성명
    스코프전역/함수객체 내부

    속성은 객체에 "캡슐화(enclosed)"되어 있다고 표현할 수 있습니다!



    핵심 정리


    오늘 배운 내용을 정리해 볼까요?


    ✅ 객체는 라벨과 값을 쌍으로 묶어 관련 데이터를 표현합니다

    1. 서로 다른 종류의 데이터를 구조화할 때 사용합니다

    ✅ 중괄호 {}로 객체를 만듭니다

    1. 속성은 키: 값 형태로 작성합니다
    2. 각 속성은 쉼표(,)로 구분합니다

    ✅ 점(.) 표기법으로 속성에 접근합니다

    1. 객체명.속성명으로 값을 가져옵니다
    2. IDE의 자동 완성 기능을 활용하세요

    ✅ 객체는 배열보다 명확하고 구조화된 데이터 표현이 가능합니다

    1. 변수 여러 개보다 객체 하나가 관리하기 쉽습니다

    ✅ 가독성이 매우 중요합니다

    1. 여러 줄로 나누고 들여쓰기를 사용하세요
    2. 백틱(`)을 사용하면 문자열에서 줄바꿈이 가능합니다

    ✅ 속성에는 모든 타입의 값을 넣을 수 있습니다

    1. 문자열, 숫자, 배열, 심지어 다른 객체도 가능합니다