티스토리 뷰

IT지식

JavaScript 객체, 프로그래밍의 핵심

고슈슈 2024. 8. 30. 20:52

목차



    반응형

     

    JavaScript를 공부하다 보면 가장 자주 듣게 되는 단어 중 하나가 바로 "객체"입니다.

    객체는 JavaScript의 핵심 개념 중 하나로, 웹 개발부터 게임 개발까지 거의 모든 분야에서 사용됩니다.

     

    이번 포스팅에서는 JavaScript 객체가 무엇인지, 왜 중요한지, 그리고 어떻게 활용할 수 있는지를 알아보겠습니다.

     

    ※ 객체란 무엇인가요?

    객체(Object)는 속성(프로퍼티)과 메서드의 집합입니다. 속성은 객체의 상태를 나타내는 데이터이고, 메서드는 객체의 동작을 나타내는 함수입니다. 예를 들어, 여러분이 소유한 자동차를 생각해보세요. 자동차는 색상, 모델, 연료 유형 등의 다양한 속성(프로퍼티)을 가지고 있고, 가속, 제동, 방향 전환 등의 기능(메서드)을 수행할 수 있습니다. JavaScript에서 객체는 이와 비슷한 방식으로 데이터를 구성하고 다룰 수 있게 해줍니다.

     

    객체는 JavaScript에서 다양한 데이터를 구조화하는 방법 중 하나이며, 복잡한 프로그램을 작성할 때 매우 유용합니다.

     

    ※ 객체를 만드는 방법

    JavaScript에서 객체를 만드는 방법은 여러 가지가 있습니다. 가장 기본적인 방법은 객체 리터럴을 사용하는 것입니다. 객체 리터럴은 중괄호 {}를 사용하여 정의할 수 있습니다.

     

    1) 객체 리터럴

    객체 리터럴을 사용하여 간단한 객체를 만들어볼까요?

    let car = {
    brand: "Tesla",
    model: "Model S",
    year: 2022,
    color: "red",
    start: function() {
        console.log("The car is starting...");
    }
};

    여기서 car는 하나의 객체입니다. 이 객체는 brand, model, year, color와 같은 속성을 가지고 있으며, start라는 메서드를 포함하고 있습니다. 이 속성들은 각기 다른 값(데이터)을 저장하고, 메서드는 특정 동작을 정의합니다.

     

    2) 객체의 속성에 접근하기

    객체의 속성에 접근하는 방법은 두 가지가 있습니다.

     

    점 표기법(dot notation) → 속성 이름 앞에 객체 이름을 붙이고, 점(.)을 사용하여 접근합니다.

    console.log(car.brand); // "Tesla" console.log(car.year); // 2022

     

    대괄호 표기법(bracket notation) → 속성 이름을 문자열로 작성하고, 대괄호([]) 안에 넣어 접근합니다.

    console.log(car["model"]); // "Model S" console.log(car["color"]); // "red"

    두 방법 모두 동일한 결과를 반환하지만, 속성 이름이 변수나 공백이 포함된 문자열인 경우에는 대괄호 표기법을 사용하는 것이 더 좋습니다.

     

    3) 객체의 메서드 호출하기

    객체의 메서드는 함수와 마찬가지로 호출할 수 있습니다. 예를 들어, car 객체의 start 메서드를 호출해보겠습니다.

    car.start(); // "The car is starting..."

    이렇게 메서드를 호출하면, 객체에 정의된 동작이 실행됩니다.

     

    ※ 객체 수정 및 추가

    JavaScript 객체는 매우 유연합니다. 객체를 생성한 후에도 속성과 메서드를 자유롭게 추가하거나 수정할 수 있습니다.

     

    1) 속성 추가하기

    객체에 새로운 속성을 추가하는 것은 매우 간단합니다. 점 표기법이나 대괄호 표기법을 사용하여 객체에 새로운 속성을 추가할 수 있습니다.

    car.owner = "Alice";
console.log(car.owner); // "Alice"

    이제 car 객체는 owner라는 새로운 속성을 가지게 되었습니다.

     

    2) 속성 수정하기

    기존 속성의 값을 수정하는 것도 간단합니다. 다음 예제를 보세요.

    car.color = "blue";
console.log(car.color); // "blue"

    이렇게 하면 car 객체의 color 속성 값이 "red"에서 "blue"로 변경됩니다.

     

    3) 속성 삭제하기

    객체의 속성을 삭제하고 싶다면 delete 키워드를 사용하면 됩니다.

    delete car.year;
console.log(car.year); // undefined

    이제 car 객체에서 year 속성이 삭제되어 더 이상 접근할 수 없습니다.

     

    ※ 객체를 사용한 반복 작업

    객체의 모든 속성에 대해 반복 작업을 해야 하는 경우, for...in 반복문을 사용할 수 있습니다. 이 반복문은 객체의 모든 속성을 순회하며 각 속성에 대해 작업을 수행할 수 있습니다.

    for (let key in car) {
    console.log(key + ": " + car[key]);
}

    이 코드는 car 객체의 모든 속성과 그 값을 출력합니다.

    brand: Tesla
model: Model S
color: blue
owner: Alice

     

    1) 객체의 복사

    객체를 복사하려면 Object.assign() 메서드를 사용하거나 스프레드 연산자(...)를 사용할 수 있습니다. 그러나 주의할 점은 JavaScript에서 객체는 참조 타입이기 때문에, 단순히 할당 연산자(=)로 복사하면 원본 객체와 복사된 객체가 같은 참조를 가리키게 됩니다.

     

    2) 얕은 복사

    Object.assign()이나 스프레드 연산자를 사용하면 객체의 얕은 복사가 이루어집니다.

    let carCopy = Object.assign({}, car);
// 또는
let carCopy2 = { ...car };

    이렇게 하면 carCopy와 carCopy2는 원본 car 객체의 복사본이 되지만, 객체 안에 객체가 중첩되어 있다면 그 내부 객체는 여전히 참조를 공유하게 됩니다.

     

    3) 깊은 복사

    객체의 모든 중첩된 객체까지 복사하려면 깊은 복사가 필요합니다. 깊은 복사는 JavaScript의 기본 기능만으로는 할 수 없지만, JSON.parse(JSON.stringify(obj))와 같은 방법을 사용하거나, 외부 라이브러리(예: Lodash의 _.cloneDeep())를 활용할 수 있습니다.

    let deepCopy = JSON.parse(JSON.stringify(car));

    이 방법을 사용하면 객체의 모든 계층이 복사되어, 원본 객체와 독립된 복사본이 생성됩니다.

     

    ※ 객체와 배열의 차이

    JavaScript에서 배열(Array)도 객체의 일종입니다. 배열은 특별히 순서가 있는 데이터를 다루기 위해 만들어졌으며, 각 요소에 숫자 인덱스를 통해 접근할 수 있습니다. 반면, 객체는 키-값 쌍으로 데이터를 저장하며, 키는 숫자가 아닌 문자열이나 심벌이 될 수 있습니다.

    예를 들어, 자동차의 색상을 여러 개 저장하려면 배열을 사용할 수 있습니다.

    let colors = ["red", "blue", "green"];

    배열은 객체와 달리, 데이터를 순서대로 처리하거나 반복 작업을 수행할 때 유용합니다.

     

    ※ 객체를 활용한 실전 예제

    객체는 복잡한 데이터를 관리하고 처리할 때 매우 유용합니다. 예를 들어, 온라인 쇼핑몰에서 제품을 관리하는 시스템을 만들려면 제품 정보를 객체로 저장할 수 있습니다.

    let product = {
    name: "Laptop",
    price: 1500,
    quantity: 3,
    showDetails: function() {
        console.log(`${this.name}: $${this.price}, Quantity: ${this.quantity}`);
    },
    purchase: function() {
        if (this.quantity > 0) {
            this.quantity--;
            console.log(`Purchased ${this.name}. Remaining quantity: ${this.quantity}`);
        } else {
            console.log(`${this.name} is out of stock.`);
        }
    }
};

product.showDetails(); // "Laptop: $1500, Quantity: 3"
product.purchase(); // "Purchased Laptop. Remaining quantity: 2"

    이 예제에서 product 객체는 제품 정보를 관리하고, 구매할 때마다 수량을 줄이는 메서드를 포함하고 있습니다. 이처럼 객체는 실제 애플리케이션에서 데이터를 구조화하고 처리하는 데 강력한 도구가 될 수 있습니다.

     

     

    JavaScript의 객체는 데이터를 구조화하고 다양한 동작을 정의할 수 있는 강력한 도구입니다. 객체는 변수에 데이터를 저장하는 것보다 훨씬 유연하고 강력한 방법을 제공합니다. 이번 포스팅을 통해 객체의 개념과 기본 사용법을 이해하고, 실전에서 객체를 활용해 볼 수 있는 자신감을 얻으셨길 바랍니다.

     

    객체를 잘 활용하면 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있으며, 복잡한 애플리케이션도 체계적으로 개발할 수 있습니다.

    반응형