본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크
Front-end/Javascript

[Javascript]자바스크립트 객체(Objec의 기본 구조 및 예제

by 빽짱구 2023. 12. 17.

JavaScript에서 객체는 데이터와 해당 데이터를 조작하기 위한 동작을 포함하는 복합 데이터 유형입니다.

 

객체(Object)란?

객체는 키-값 쌍의 모음이며, 키는 문자열 또는 기호이고, 값은 어떠한 데이터 유형이나 함수가 될 수 있습니다. 객체는 중괄호 {}로 표현되며, 키-값 쌍은 쉼표로 구분됩니다.

 

object = 물건, 물체

 

자바스크립트 객체는 속성(Property)행동(또는 메서드(Method))으로 구성됩니다. 객체는 데이터를 저장하는 속성과 그 데이터를 조작하거나 동작하는 메서드를 포함합니다. 이러한 속성과 메서드는 객체의 상태와 행동을 정의하며, 객체의 핵심적인 특징 중 하나입니다.

 

객체의 기본 구조 및 예제

다음은 JavaScript 객체의 기본 구조 및 예제입니다.

 

// 객체 생성
var person = {
  // 속성(키-값 쌍)
  name: "John",
  age: 30,
  isStudent: false,

  // 메서드(함수)
  greet: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
};

// 객체 속성에 접근
console.log(person.name); // "John"
console.log(person.age);  // 30
console.log(person.isStudent);  // false

// 객체 메서드 호출
person.greet(); // "Hello, my name is John."

 

이 예제에서 person이라는 객체를 생성했습니다. 객체는 name, age, isStudent라는 세 가지 속성을 가지고 있으며, greet라는 메서드를 포함하고 있습니다. 속성에는 해당 속성의 이름(키)과 값이 할당되어 있습니다. 메서드는 함수로, 객체 내에서 동작을 정의하는 데 사용됩니다.

또 다른 예제를 살펴보겠습니다.

 

// 사용자 정보 객체
var user = {
  username: "jsmith",
  email: "jsmith@example.com",
  preferences: {
    theme: "dark",
    language: "en"
  },
  login: function() {
    console.log("User logged in: " + this.username);
  }
};

// 중첩된 객체 및 메서드 호출
console.log(user.username);           // "jsmith"
console.log(user.preferences.theme);  // "dark"
user.login();  // "User logged in: jsmith"

 

이 예제에서는 user 객체를 생성하고 중첩된 객체인 preferences를 포함하고 있습니다. 객체의 속성은 다른 객체를 포함할 수 있으며, 이는 중첩된 객체라고 합니다. 위의 코드에서 user.preferences.theme은 중첩된 객체의 속성에 접근하는 방법을 보여줍니다.

JavaScript의 객체는 유연하며 동적이므로, 속성이나 메서드를 동적으로 추가, 제거, 또는 수정할 수 있습니다. 객체는 프로토타입 체인과 함께 상속을 지원하여 객체 간의 관계를 형성할 수 있습니다.

사용 사례

객체는 프로그래밍에서 데이터와 그 데이터를 조작하는 동작을 논리적으로 묶어 표현하는 데 사용됩니다. 객체는 현실 세계의 개념을 모델링하고 프로그램 내에서 이를 추상화하여 표현하는데 도움이 됩니다. 다양한 데이터 유형과 동작을 단일 단위로 그룹화하여 코드를 더 구조적이고 유지보수 가능하게 만들 수 있습니다.

객체가 필요한 몇 가지 이유와 사용 사례는 다음과 같습니다.

1. 데이터 구조화

객체는 관련된 데이터를 하나의 단위로 묶어서 표현할 수 있습니다. 예를 들어, 사용자 정보를 다음과 같이 객체로 표현할 수 있습니다.

 

var user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

 

2. 코드의 모듈화

객체를 사용하면 코드를 더 작은 모듈로 나눌 수 있습니다. 관련 있는 데이터와 동작을 객체로 그룹화하여 각 모듈을 더 쉽게 이해하고 유지보수할 수 있습니다.

 

var car = {
  brand: "Toyota",
  model: "Camry",
  start: function() {
    console.log("Engine started.");
  },
  stop: function() {
    console.log("Engine stopped.");
  }
};

 

3. 상태와 행동의 결합

객체는 상태(데이터)와 행동(메서드)을 함께 묶어 표현할 수 있습니다. 이는 코드를 논리적으로 구조화하고 응집력을 강화하는 데 도움이 됩니다.

 

4. 상속과 다형성

객체 지향 프로그래밍에서 객체는 상속을 통해 다른 객체로부터 특성을 상속받을 수 있습니다. 이는 코드의 재사용성을 증가시키고 유연성을 제공합니다.

 

5. 코드 가독성과 유지보수성 향상

객체를 사용하면 코드가 더 읽기 쉽고 이해하기 쉽게 됩니다. 관련된 데이터와 동작을 논리적으로 그룹화하면 코드의 가독성과 유지보수성이 향상됩니다.

자바스크립트에서는 객체가 매우 중요한 개념이며, 거의 모든 것이 객체로 표현될 수 있습니다. 함수, 배열, 정규표현식 등도 내부적으로 객체로 취급되므로 객체 지향 프로그래밍의 원칙을 따르고 있습니다.