# 객체 메서드

객체지향 프로그래밍
- 객체를 사용하여 개체를 표현하는 방식

객체 (유일무이한) 실존하는 개체(entity)를 표현하고자 할 때 생성한다.

let user = {    
    name: 'John',
    age: 30,
}

1
2
3
4

예) 사용자(user), 주문(order)
사용자는 현실에서, 장바구니에서 물건 선택, 로그인, 로그아웃 등의 행동을 한다.
객체 프로퍼티에 함수 할당 마찬가지로 사용자를 나타내는 객체 user 도 특정한 행동을 할 수 있다.

# 메서드 만들기

메서드 객체 프로퍼티에 할당된 함수

객체 user 에게 인사할 수 있는 능력 부여

# 함수 표현식

함수 표현식으로 함수를 만든다.
user.sayHi 에 함수를 할당한다.

let user = {
    name: 'John',
    age: 30,
};
user.sayHi = function() {
    alert('안녕하세요!');
};
user.sayHi();

1
2
3
4
5
6
7
8

# 함수 선언식

function sayHi () {
    alert('안녕하세요');
}
user.sayHi = sayHi;
user.sayHi();

1
2
3
4
5

# 메서드 단축 구문

두 구분이 완전히 동일하지는 않다. 객체 상속과 관련된 미묘한 차이가 존재한다. TODO

user = {
    sayHi: function() {
        alert('Hello');
    }
};

1
2
3
4
5

user = {
    sayHi () {
        alert('Hello');
    }
};

1
2
3
4
5

# 메서드와 this

this 키워드 메서드 호출시, 해당 메소드를 갖고 있는 객체

let user = {
    name: "John",
    age: 30,
    sayHi() {
        alert(this.name);
    }
};
user.sayHi() // John

1
2
3
4
5
6
7
8

this 대신 user 사용했을 때, 예상치 못한 에러가 발생할 수 있다.

let user = {
    name: "John",
    age: 30,
    sayHi() {
        alert(user.name);   // Error: Cannot read property 'name' of null
    }
};
let admin = user;
user = null;
admin.sayHi();  // sayHi() 가 엉뚱한 객체를 참고하면서 에러가 발생함.

1
2
3
4
5
6
7
8
9
10

this 는 런타임. 컨텍스트에 따라 달라진다.

장점 : 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다
단점 : 유연함이 실수로 이어질 수 있다

어떤 객체의 메소드로 사용되느냐에 따라 메소드 내부의 this 가 가리키는 객체가 달라질 수 있다

function introduce() {
  return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}

const person1 = {
  name: '윤아준',
  introduce
};

const person2 = {
  name: '신하경',
  introduce
};

person1.introduce(); // 안녕하세요, 제 이름은 운아준입니다.
person2.introduce(); // 안녕하세요, 제 이름은 신하경입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# this 가 없는 화살표 함수

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

1
2
3
4
5
6
7
8
9

arrow()의 this 는 외부 함수 user.sayHi()의 this 이다.

# new 연산자와 생성자 함수

재사용할 수 있는 객체 생성 코드를 구현

객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있다.

# 생성자 함수

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다.

생성자 함수의 관례

함수 이름의 첫 글자는 대문자로 시작
반드시 "new" 연산자를 붙여 실행

# new 생성자 함수의 알고리즘

빈 객체를 만들어 this 에 할당
함수 본문을 실행 : this에 새로운 프로퍼티를 추가해 this 를 수정
this 를 반환

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

let user = new User("Jack");
/*
let user = {
  name: "Jack",
  isAdmin: false
};
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

모든 함수는 생성자 함수가 될 수 있다

new 를 붙여 실행한다면 어떤 함수라도 위에 위 알고리즘이 실행
이름 "첫 글자가 대문자"인 함수는 new 를 붙여 실행해야 한다(?)

(TODO 화살표 함수는 new 를 사용할 수 없는데... 어떻게 분류될까 )

# 재사용할 필요가 없는 복잡한 객체

코드를 익명 생성자 함수로 감싸주는 방식

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

1
2
3
4
5
6
7
8

위 생성자 함수는 익명 함수이기 때문에 어디에도 저장되지 않습니다.

← 객체 프로퍼티 옵셔널 체이닝 →