Growth from the root - Vanilla JavaScript - 메서드와 this

메서드와 this

📃 객체는 사용자, 주문 등과 같이 실제 존재하는 개체를 표현할 때 생성됨.

let user = {
name : "형준",
age : 27
};

✏️ 사용자는 현실에서 장바구니에서 물건선택, 로그인 등의 행동을 함, 마찬가지로 객체도 특정한 행동을 할 수 있음.

메서드 만들기

📃 객체는 user 에게 인사할 수 있는 능력을 부여해 보자.

let user = {
 name : "형준",
 age : 27
};

user.sayHi = function () {
 alert("안녕")
}

user.sayHi()

✏️ 함수생성(함수표현식으로) -> 객체 프로퍼티 user.sayHi에 함수 할당 -> 객체에 할당된 함수 호출 시 user가 인사
✅ 이렇게 할당된 함수를 메서드(sayHi)라고 부름.

let user = {
  name : "형준",
  age : 27
};

// 함수 선언
function sayHi() {
  alert("안녕")  
}

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi

user.sayHi() // 안녕

✏️ 이미 정의된 함수를 이용해서 만들 수도 있음.

메서드 단축 구문

user = {
  sayHi : function() {
    alert("안녕");
  }
};

user = {
    sayHi() {
      alert("안녕")
    }
  };

✏️ 두 객체는 동일하게 작동함

메서드와 this

📃 메서드 내부에서 this를 사용하면 객체에 접근할 수 있음. '점 앞'의 this 는 객체를 나타냄.

let user = {
  name : "형준",
  age : 30,
  
  sayHi() {
    // 여기서 this는 '현재객체' 즉, user
    alert(this.name);
  }

}

user.sayHi() // "형준"

✏️ user.sayHi()가 실행되는 동안에 this는 user를 나타냄.



📃 this를 사용하지 않고 외부변수를 참조해 접근하는 것도 당연 가능.

let user = {
  name : "형준",
  age : 30,
  
  sayHi() {
    // 여기서 this는 '현재객체' 즉, user
    alert(user.name);
  }

}

✏️ 이렇게 했을때 발생할 수 있는 에러 : user를 복사해 다른 변수에 할당하고(user는 전혀 다른 값으로 덮어써짐) -> 원치 않는 값을 참조하게 됨.

let user = {
  name : "형준",
  age : 30,
  
  sayHi() {
    // 여기서 this는 '현재객체' 즉, user
    alert(user.name);
  }

  let admin = user;
  user = null ; // user를 null로 덮어씀.
  
  admin.sayHIi() // 에러발생
}

✏️ user.name -> this.name 으로 인수를 받으면 에러 안생김.

자유로운 this

let user = { name : "형준"}
let admin = { name : "승찬"}

function sayHi () {
  alert(this.name)
}

// 별개의 객체에서 동일한 함수를 사용함.
user.f = sayHi
admin.f = sayHi


// 'this'는 '점 앞의' 객체를 참조하기 때문에 this 값이 달라짐
user.f() // 형준 (this == user)
admin.f() // 승찬 (this == admin)

user['f']() // 형준
admin['f']() // 승찬 (점과 대괄호는 동일하게 동작함.)

this가 없는 화살표 함수

📃 화살표 함수는 일반 함수와는 달리 고유한 this를 가지지 못함, 화살표 함수에서 this를 참조하면 평범한 외부함수에서 가져옴

let user = {
  firstName : "형준",
  sayHi() {
    let arrow = () => alert(this.first)
    arrow()
  }
}

user.sayHi() // 형준

✏️ 별개의 this 가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우에 유용함.

🎯 객체 지향 프로그래밍

객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍(object-driented programming, OPP)라고 함

OPP 자체가 중요한 주제임, 올바른 객체를 사용하는 법, 올바를 개체를 선택하는법, 개체 간의 상호작용을 나타내는 방법 등에 관한 의사결정은 객체지향설계를 기반으로 이뤄짐.