[Javascript] 객체 - 메서드와 this

객체의 메서드와 this

객체는 고객  , 자동차 와 같이 실제 존재하는 개체(entity)를 표현할 때 사용됨.

 

개체, 예를들면 고객은 현실에서 물건사기, 반품하기 등 특정한 행동을 하므로 객체를 통해 이러한 행동을  표현 할 수 있어야 함

 

이러한 행동을 객체로 표현하기 위해 객체의 프로퍼티에 함수를 할당해 메서드로 사용할 수 있음

 

 

메서드 생성

객체 customer 를 생성하여 물건을 구매할 수 있는 메서드를 생성

let customer = {
	name:"park",
    age:20,
    buy:function(){
    	console.log("물건 구매")
    }
}

customer.buy()

 

 

메서드 단축 구문을 사용하여 더 깔끔한 코드로 할당할 수 있음

let customer = {
	name:"park",
    age:20,
    buy(){
    	console.log("물건 구매")
    }
}

customer.buy()

 

 

 

메서드의 this

객체의 메서드에서 해당 객체에 저장된 프로퍼티에 접근할 수 있어야 메서드로서의 역할을 수행할 수 있음

이때 this를 통해 메서드를 통해 객체의 프로퍼티에 접근이 가능해짐

 

let customer = {
	name:"park",
    age:20,
    printInfo() {
    	console.log(`name: ${this.name} , age: ${this.age}`);
    }
}

customer.printInfo();

 

this를 사용하지 않고 외부변수를 참조해 객체에 접근하는 것도 가능하지만 아래와 같은 문제를 보임

let customer1 = {
	
    name:'park',
    age:20,
    printInfo() {
    	console.log(`name: ${customer1.name} , age: ${customer1.age}`);
    }
}

let customer2 = customer1;

customer1.printInfo()

customer1 = null

customer2.printInfo()

 

customer1.printInfo()의 결과는 아래와 같이 정상적으로 출력됨

 

 

하지만 customer2.printInfo() 실행시 참조되어있는 customer1 의 데이터가 null 로 바뀌었으므로 더이상 customer1의 프로퍼티를 참조할 수 없으 오류가 발생

'name' 프로퍼티가 존재하지 않으므로 참조할 수 없음

 

customer1.name 이 아니라 this.name으로 참조했을 경우 customer2로 객체가 참조될때 customer1의 데이터가 사라져도 customer2는 남아있으므로 정상적으로 프로퍼티를 참조할 수 있음

 

 

참조: https://ko.javascript.info/object-methods