[혼공스] 5주차_객체, 속성, 메서드

 

이 카테고리는 한빛미디어의 혼자 공부하는 자바스크립트 교재를 학습하는 내용을 정리하는 공간입니다.

---

 

1. 객체 속성 (Properties)

객체 속성은 객체 안에 포함된 값들을 의미한다. 객체 속성은 문자열, 숫자, 배열, 함수 등 다양한 값을 가질 수 있다. 객체 속성에 접근하거나 수정하려면 두 가지 방법을 사용할 수 있다.

1.1. 객체 속성 접근

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

• 점 표기법 (Dot Notation): 속성 이름을 점으로 구분하여 접근하는 방법이다. 주로 속성 이름이 변수나 상수로 지정되어 있을 때 사용한다.
• const person = { name: 'Alice', age: 30 }; console.log(person.name); // Alice console.log(person.age); // 30
• 대괄호 표기법 (Bracket Notation): 속성 이름을 문자열로 사용하여 접근하는 방법이다. 동적으로 속성 이름을 지정하거나, 속성 이름에 공백 또는 특수 문자가 포함된 경우 사용된다.
• const person = { name: 'Alice', 'favorite color': 'blue' }; console.log(person['name']); // Alice console.log(person['favorite color']); // blue

1.2. 객체 속성 수정

객체 속성을 수정하려면 점 표기법이나 대괄호 표기법을 사용한다.

const person = {
    name: 'Alice',
    age: 30
};

// 점 표기법으로 수정
person.name = 'Bob';
person.age = 25;

// 대괄호 표기법으로 수정
person['age'] = 35;

console.log(person.name);  // Bob
console.log(person.age);   // 35

2. 객체 메서드 (Methods)

객체 메서드는 객체에 정의된 함수로, 객체의 동작을 정의하는 역할을 한다. 객체 메서드는 속성과 동일한 방식으로 정의되지만, 함수의 형태를 가진다는 점에서 차이가 있다. 객체 메서드는 함수 표현식 또는 메서드 축약 구문을 사용하여 정의할 수 있다.

2.1. 메서드 정의

객체 내에 메서드를 정의하는 방법은 두 가지가 있다.

• 함수 표현식으로 메서드 정의:
• const person = { name: 'Alice', greet: function() { console.log(`Hello, my name is ${this.name}`); } }; person.greet(); // Hello, my name is Alice
• 메서드 축약 구문: ES6 이후, 함수 표현식 대신 축약 구문을 사용하여 메서드를 정의할 수 있다. 이 방식은 코드가 더 간결해지고, 가독성이 높아진다.
• const person = { name: 'Alice', greet() { console.log(`Hello, my name is ${this.name}`); } }; person.greet(); // Hello, my name is Alice

2.2. this 키워드

메서드 내에서 사용되는 this 키워드는 메서드를 호출한 객체를 가리킨다. this를 사용하면 메서드 안에서 객체의 속성에 접근할 수 있다.

const person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
};

person.greet();  // Hello, my name is Alice and I am 30 years old.

여기서 this.name과 this.age는 객체 person의 속성에 접근하는 방법이다.

2.3. 메서드 호출

객체 메서드는 마치 함수처럼 호출된다. 메서드를 호출하면 해당 함수 내부의 코드가 실행된다.

const person = {
    name: 'Alice',
    sayHello() {
        console.log('Hello!');
    }
};

person.sayHello();  // Hello!

2.4. 메서드에서 반환 값

메서드는 값을 반환할 수도 있다. 예를 들어, 객체의 속성 값을 계산하거나 변환하여 반환하는 경우이다.

const person = {
    name: 'Alice',
    age: 30,
    greet() {
        return `Hello, my name is ${this.name}`;
    }
};

const greeting = person.greet();
console.log(greeting);  // Hello, my name is Alice

3. 객체 메서드의 활용

객체 메서드는 객체의 동작을 정의하는 데 사용되며, 객체와 관련된 기능을 하나로 묶어 관리하는 데 유용하다. 예를 들어, set과 get 메서드를 사용하여 객체의 속성을 안전하게 접근하거나 변경할 수 있다.

const person = {
    _name: 'Alice',
    
    get name() {
        return this._name;
    },
    
    set name(value) {
        if (value) {
            this._name = value;
        }
    }
};

console.log(person.name);  // Alice
person.name = 'Bob';      // name 값 변경
console.log(person.name);  // Bob

결론

JavaScript에서 객체는 속성과 메서드를 포함하고 있으며, 이들은 객체의 상태와 동작을 정의하는 중요한 요소이다. 객체의 속성에 접근하거나 수정하는 방법을 익히고, 메서드를 정의하여 객체의 동작을 구현하는 데 집중하는 것이 중요하다. 객체의 메서드 내에서 this를 잘 활용하면, 객체와 관련된 데이터를 효율적으로 다룰 수 있다.