[Javascript] 객체 메서드/this

이 글의 목적

📌 객체의 특성은 메서드를 삽입할 수 있다는 점입니다. 객체와 this를 사용하여 메서드 내에서 동작하는 객체들을 만들어보는 것이 포인트입니다.

객체와 메서드

---

1.메서드의 사용

1. 객체의 형태

객체는 아래와 같이 key:value로 구성되어 있지만, value에 메서드 형태를 넣어줄 수 있습니다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

2. 메서드가 들어간 객체
아래와 같이 user에게 인사할 수 있는 능력을 메서드를 통해 부여해줍시다.

let user = {
  name: "John",
  age: 30
};

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

user.sayHi(); // 안녕하세요!

user.sayHi라는 함수를 객체 프로퍼티에 할당해주었는데요.
이를 통해 객체의 함수를 호출하면 user가 인사해줍니다.

이렇게 객체 프로퍼티에 할당된 함수를 메서드(method)라고 합니다.

3.객체 지향 프로그래밍
이처럼 객체 단위로 특정 기능과 값을 수행하도록 만든 것을 객체 지향 프로그래밍이라고 합니다.

4. 메서드 단축구문

//일반적인 표기 방법
user = {
	sayHi: function(){
	alert("Hello");
	}	
};

//단축 구문
user = {
	sayHi()
		alert("Hello");
}

메서드와 this

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다.
메서드 내부에서 this를 사용하여 객체에 접근할 수 있습니다.
this는 객체를 나타냅이다. (메서드를 호출할 때 사용된 객체)

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

함수 내에서 해당 객체만을 불러오길 희망한다면
this를 통하여 사용하면 됩니다.

this가 없는 화살표 함수
화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않습니다.
화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 평범한 외부 함수에서 this 값을 가져옵니다.

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

user.sayHi(); // 보라

객체 연습문제

const book = {
	name: "혼자 공부하는 파이썬",
	price: 18000,
	publisher: "한빛미디어",
};

3. 대괄호 []를 통하여 객체에 값을 넣어줄 수 있다.

1. delete객체[속성]을 이용하여 제거할 수 있다.

메소드 print : object.ko 값을 넣었을 때 번역을 해주는 메소드