6. 자바스크립트 객체 기초

자바스크립트 객체 기초

지금까지 변수와 데이터 타입, 조건문과 반복문, 함수, 배열을 배웠다면, 이번엔 데이터를 구조적으로 다룰 수 있는 객체를 배워볼 거다. 객체는 자바스크립트에서 데이터를 키-값 쌍으로 저장하고 관리하는 강력한 방법으로, 실무에서 엄청나게 자주 쓰인다. 객체를 잘 익히면 단순한 값 나열을 넘어 복잡한 데이터 구조를 다룰 수 있는 능력이 생긴다.

내가 처음 코딩을 배울 때 객체를 몰라서 변수와 배열로만 데이터를 관리하려고 했는데, 객체를 배우고 나니까 훨씬 체계적으로 코드를 짤 수 있게 됐다. 이번 글에선 객체의 정의와 생성 방법, 속성과 메서드, 객체와 배열의 결합, 그리고 기본적인 활용법을 상세히 다룰 거다. 천천히 따라오면서 콘솔이나 HTML 파일에서 직접 실행해보면 객체의 유연함과 강력함을 실감할 수 있을 거다. 객체는 단순히 데이터를 저장하는 데 그치지 않고, 데이터를 구조화하고 동작까지 추가할 수 있게 해준다.

앞서 배운 개념들과 객체를 결합하면 더 실용적인 코드를 작성할 수 있다. 예를 들어, 학생의 이름과 점수를 배열로만 관리하던 걸 객체로 바꾸면 이름과 점수를 한 번에 묶어서 처리할 수 있고, 함수로 점수를 계산하거나 조건문으로 특정 조건을 확인하는 작업도 훨씬 간편해진다. 이번 포스팅에서 객체의 기초를 다루며, 자바스크립트의 기본기를 한층 더 강화해보자.

객체란 무엇인가?

객체(Object)는 자바스크립트에서 데이터를 키-값 쌍(Key-Value Pair)으로 저장하는 데이터 구조다. 배열이 값을 순서대로 나열한다면, 객체는 각 값을 이름(키)으로 식별해서 저장한다. 이 키는 문자열이나 심볼로 정의되며, 값은 숫자, 문자열, 배열, 심지어 다른 객체까지 될 수 있다. 객체를 쓰면 데이터를 논리적으로 묶어서 관리할 수 있어서 코드의 가독성과 유지보수성이 크게 좋아진다.

예를 들어, 한 명의 학생 데이터를 배열로 저장하려면 이렇게 해야 한다:

let student = ["홍길동", 20, 85];

이렇게 하면 인덱스로 접근해야 해서 student[0]이 이름인지, student[1]이 나이인지 기억해야 한다. 하지만 객체를 쓰면:

let student = {
    name: "홍길동",
    age: 20,
    score: 85
};

이렇게 키로 바로 의미를 알 수 있다. 내가 처음 객체를 배울 때 이 직관성에 감탄했는데, 데이터를 이름으로 접근하니까 코드가 훨씬 명확해졌다. 자바스크립트에서 객체는 배열과 달리 순서가 없고, 키를 통해 값을 찾는 방식이라 더 유연하다.

객체는 자바스크립트의 핵심 데이터 타입 중 하나로, 함수나 배열도 사실 객체의 일종이다. 객체를 쓰면 단순히 데이터를 저장하는 데서 끝나지 않고, 데이터를 구조화하고 동작(메서드)을 추가할 수 있다. 실무에선 사용자 정보, 설정값, API 응답 같은 복잡한 데이터를 객체로 다루는 경우가 많다.

객체는 단순히 값을 저장하는 도구를 넘어, 데이터를 논리적으로 묶고 그 데이터와 관련된 동작까지 정의할 수 있게 해준다. 예를 들어, 학생 객체에 점수를 계산하는 기능을 추가하거나, 사용자의 상태를 관리하는 코드를 객체 안에 넣을 수 있다. 이런 점 때문에 객체는 자바스크립트에서 정말 중요한 개념으로 여겨진다.

객체 생성 방법

자바스크립트에서 객체를 만드는 방법은 주로 두 가지가 있다: 객체 리터럴과 Object 생성자다. 각각의 특징과 사용법을 살펴보자.

1. 객체 리터럴(Object Literal)

가장 간단하고 널리 쓰이는 방법으로, 중괄호 {}를 사용한다:

let person = {
    name: "홍길동",
    age: 25,
    city: "서울"
};
console.log(person); // { name: "홍길동", age: 25, city: "서울" }

키와 값은 :로 연결하고, 각 쌍은 쉼표로 구분한다. 빈 객체도 만들 수 있다:

let emptyObject = {};
console.log(emptyObject); // {}

내가 처음 객체를 쓸 때 이 방식이 직관적이라 바로 익숙해졌다. 키는 따옴표 없이 써도 되지만, 특수문자나 공백이 들어가면 따옴표를 써야 한다:

let user = {
    "first name": "길동",
    "email-address": "gildong@example.com"
};

객체 리터럴은 간단하고 읽기 쉬워서 대부분의 상황에서 추천한다.

2. Object 생성자

Object 객체를 사용해서도 객체를 만들 수 있다:

let person = new Object();
person.name = "이순신";
person.age = 30;
console.log(person); // { name: "이순신", age: 30 }

이 방식은 빈 객체를 만든 뒤 속성을 하나씩 추가한다. 내가 처음 이걸 썼을 때 리터럴보다 번거롭다고 느꼈는데, 동적으로 속성을 추가할 때 유용하다.

객체 속성과 접근 방법

객체를 생성했으면 속성(Property)에 접근하고 수정하는 법을 알아야 한다.

속성 접근

객체 속성에 접근하는 방법은 두 가지다: 점 표기법(Dot Notation)과 대괄호 표기법(Bracket Notation).

- 점 표기법:

let person = {
    name: "김유신",
    age: 28
};
console.log(person.name); // "김유신"
console.log(person.age); // 28

- 대괄호 표기법:

console.log(person["name"]); // "김유신"
console.log(person["age"]); // 28

대괄호 표기법은 변수나 특수문자가 있는 키에 유용하다:

let key = "name";
console.log(person[key]); // "김유신"
let user = {
    "first-name": "유신"
};
console.log(user["first-name"]); // "유신"

내가 처음엔 점 표기법만 썼는데, 동적 키를 다룰 때 대괄호가 필수라는 걸 알게 됐다.

속성 추가와 수정

객체는 동적이어서 속성을 언제든 추가하거나 바꿀 수 있다:

let person = {
    name: "홍길동"
};
person.age = 25; // 추가
console.log(person); // { name: "홍길동", age: 25 }
person.name = "이순신"; // 수정
console.log(person); // { name: "이순신", age: 25 }

속성 삭제

delete 연산자로 속성을 제거한다:

delete person.age;
console.log(person); // { name: "이순신" }

내가 처음 객체 수정할 때 이렇게 유연한 점이 신기했는데, 실무에서 데이터를 동적으로 다룰 때 정말 유용하다.

객체와 메서드

객체는 속성 외에도 동작(메서드)을 정의할 수 있다. 메서드는 객체 안에 함수를 추가한 거다.

메서드 정의

let person = {
    name: "김유신",
    sayHello: function() {
        console.log("안녕, 나는 " + this.name + "이야!");
    }
};
person.sayHello(); // "안녕, 나는 김유신이야!"

this는 객체 자신을 가리킨다. ES6부터는 더 간결하게 쓸 수 있다:

let person = {
    name: "홍길동",
    sayHello() {
        console.log("안녕, 나는 " + this.name + "이야!");
    }
};
person.sayHello(); // "안녕, 나는 홍길동이야!"

내가 처음 메서드를 썼을 때 this가 헷갈렸는데, 객체 안에서 자기 자신을 참조한다고 생각하면 된다.

객체와 배열 결합

객체와 배열을 함께 쓰면 더 강력하다. 예를 들어, 학생 목록을 배열로 만들고 각 학생을 객체로 정의할 수 있다:

let students = [
    { name: "홍길동", score: 85 },
    { name: "이순신", score: 92 },
    { name: "김유신", score: 78 }
];
console.log(students[1].name); // "이순신"

내가 처음 이걸 썼을 때 데이터 구조가 훨씬 명확해져서 좋았다.

실습 예제

객체를 활용한 실습을 해보자:

let student = {
    name: "홍길동",
    scores: [85, 90, 88],
    getAverage: function() {
        let sum = 0;
        for (let score of this.scores) {
            sum += score;
        }
        return sum / this.scores.length;
    }
};
console.log(student.getAverage()); // 87.666...

let users = [
    { name: "이순신", age: 30 },
    { name: "김유신", age: 25 }
];
for (let user of users) {
    console.log(user.name + "은 " + user.age + "살이에요.");
}
// 출력: "이순신은 30살이에요.", "김유신은 25살이에요."

평균 계산과 사용자 목록 출력 예제를 만들어봤다. 객체와 배열을 결합하니 실용적인 코드가 된다.

주의할 점

객체는 참조 타입이라 복사 시 주의해야 한다. this의 값은 호출 방식에 따라 달라질 수 있으니 잘 확인하자. 속성 이름은 중복되지 않게 관리해야 한다.

결론

이번 포스팅에서 자바스크립트 객체의 기초를 다뤘다. 객체 생성, 속성과 메서드, 배열과의 결합까지 배웠으니 이제 데이터를 구조적으로 다룰 수 있다. 다음 글에선 객체의 프로토타입과 상속을 더 깊이 파고들어 보자.