[JavaScript] 자바스크립트 객체 정의 및 사용

 

01. 객체 = 필드 + 메서드 (프로퍼티의 집합)

let person = {
    name: "guswjd",  // 필드 (프로퍼티)
    age: 25,       // 필드 (프로퍼티)
    
    // 메서드 (객체가 수행하는 동작)
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet();  // "Hello, my name is guswjd"

자바스크립트에서 객체는 필드와 메서드로 구성된 데이터 구조이다. 

• 필드 : 객체가 가지고 있는 데이터로, 객체의 상태를 나타냄. 프로퍼티라고도 불리며, 숫자, 문자열, 배열, 또 다른 객체와 같은 값을 가질 수 있음
• 메서드 : 객체가 수행할 수 있는 동작. 객체의 기능을 정의하며 객체 내에 정의된 함수

 

💡 HTML(DOM)에서의 객체

HTML에서 객체는 요소(Element)와 속성(Attribute)로 나뉜다. DOM은 HTML 문서를 자바스크립트에서 다루기 위한 인터페이스이며, 각 요소는 객체로 표현된다.

• 요소(Element) : HTML 태그 자체 <div></div>
• 속성(Attribute) : 태그에 설정된 값 <div class="example"></div>

 

 

 

 

02. 메서드 표현법 : Default & Shorten

◼︎ Default 표현법 (기본 버전)

class Person {
    name = "Aaron";
    sayName = function() {
        console.log(this.name);
    }
};

 

 

◼︎ Shorten 표현법 (간략 버전)

function( ) 키워드를 생략하여 더 간결하게 작성 가능하다.

var person = {
    name: "Aaron",
    sayName() {
        console.log(this.name);
    }
};

 

 

 

 

 

 

03. 자바스크립트 객체 생성 방법

자바스크립트는 클래스가 없어도 객체 리터럴 방식으로 객체를 쉽게 정의하고 사용할 수 있다.

그러나, ES6부터는 클래스 문법도 지원하여 객체 지향적 프로그래밍이 가능해졌다.

 

#1. 객체 리터럴

var person = {
    name: "guswjd",
    age: 25,
};

객체 리터럴은 중괄호 { } 안에 키-값 쌍으로 데이터를 정의하는 가장 간단한 방식의 객체 생성 방법이다.

이때, 키는 프로퍼티 이름을, 값은 해당 프로퍼티에 할당된 데이터를 의미한다.

객체 리터럴 방식은 메서드가 포함되지 않거나, 간단한 데이터 전송에 적합하며, JSON 형식과 유사한 구조를 가지고 있다.

 

객체 리터럴 방법은 자바스크립트에서 서버와의 통신 시 객체 리터럴을 JSON 형식으로 직렬화하여 데이터를 전송하는데 많이 사용된다.

서버에서 데이터를 받아와 처리하거나, 데이터를 서버에 보낼 때 DTO처럼 데이터를 구조화하여 사용할 수 있다.

DTO는 데이터 전송을 위한 객체로, 객체 리터럴은 DTO처럼 데이터만을 담아 전송하거나 처리하는데 적합하다. 객체 리터럴을 이용하면 별도의 클래스를 정의할 필요 없이 간단하게 데이터를 구조화하여 표현할 수 있다.

 

var person = {
    name: "guswjd",
    age: 25,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet();  // "Hello, my name is guswjd" 출력

객체 리터럴은 위 코드처럼 간단한 데이터 뿐만 아니라, 메서드를 추가하여 동작을 정의할 수 있다.

이처럼 메서드도 포함할 수 있지만, 주로 메서드가 없는 데이터 중심의 객체로 사용된다.

 

 

 

 

#2. 클래스(ES6+에서 사용 가능)

클래스는 객체 지향 프로그래밍에서 캡슐화(Encapsulation)을 통해 데이터와 메서드를 보호하고 재사용성을 높이는데 사용된다.

자바스크립트에서 클래스는 class 키워드를 사용하여 정의한다.

클래스 내부에는 생성자(constructor)와 메서드(method)를 정의할 수 있다.

 

• constructor: 객체가 인스턴스화될 때 호출되는 특별한 메서드로, 객체의 초기 상태를 설정
• 메서드: 클래스 내에서 정의되는 함수로, 객체가 가지고 있는 동작(기능)을 정의

 

class Person {
  // 생성자: 객체가 생성될 때 호출되는 함수
  constructor(name, age) {
    this.name = name;  // 프로퍼티 정의
    this.age = age;
  }

  // 메서드: 클래스 내부에 정의된 함수
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person("guswjd", 25);  // 객체 생성
person1.greet();  // "Hello, my name is guswjd" 출력

 

클래스는 new 키워드를 사용해 인스턴스를 생성한다. 생성된 인스턴스는 클래스에서 정의한 프로퍼티와 메서드를 사용할 수 있다.

 

 

 

💡 클래스 내 Private 필드 설정

ES6 이후 필드나 메서드 이름 앞에 ' # '을 붙여 private 필드를 정의할 수 있다.

이를 통해 클래스 외부에서 직접 접근할 수 없는 필드를 생성할 수 있다.

private 필드 및 메서드는 클래스 내부에서만 접근 가능하다.

class BankAccount {
  #balance = 0;  // 비공개 필드
  
  // Private 메서드
  #calculateInterest() {
    return this.#balance * 0.05;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance + this.#calculateInterest();
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance());  // 1050 (1000 + 5% 이자)
console.log(account.#balance);  // SyntaxError: Private field '#balance' must be declared
// Private 메서드에 직접 접근하려고 하면 오류 발생
console.log(account.#calculateInterest());  // SyntaxError: Private field '#calculateInterest' must be declared

 

 

 

💡 Getter / Setter 메서드

클래스 내부에서 getter와 setter 메서드를 정의하여, 객체의 프로퍼티에 간접적으로 접근하거나 값을 설정할 수 있다.

• Getter 메서드 : 객체의 속성 값을 읽을 때 호출. 특정 속성에 접근할 때 내부적으로 정의된 getter가 호출. getter메서드는 값을 반환해야 하며, 매개변수를 받지 않음
• Setter 메서드 : 객체의 속성 값을 설정할 때 호출. 값을 설정할 때 추가적인 검증이나 처리 로직을 넣을 수 있음. 하나의 매개변수를 받으며 그 값이 설정될 속성값

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // Getter 메서드: fullName을 읽을 때 호출
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  // Setter 메서드: fullName을 설정할 때 호출
  set fullName(name) {
    const [firstName, lastName] = name.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const user = new User("guswjd", "jang");

// Getter 호출
console.log(user.fullName);  // "guswjd jang"

// Setter 호출
user.fullName = "guswjd jang"; 

// Getter 호출 - 값이 업데이트
console.log(user.fullName);  // "guswjd jang"

// 내부 필드에 직접 접근 가능
console.log(user.firstName); // "guswjd"
console.log(user.lastName);  // "jang"