객체(Object) - method, this

유튜브 코딩앙마 채널의 '자바스크립트 기초 강좌' 를 공부하며 정리한 내용입니다.

객체에 함수를 추가할 수 있습니다. 객체 프로퍼티로 할당된 할당된 함수를 메소드 method 라고 합니다.

const superman = {
	name : 'clark',
	age : 33,
}

// 위 객체에 메소드를 추가하면

 const superman = {
	name : 'clark',
	age : 33,   
	fly : function(){
		console.log('날아갑니다.')
	}
}
 
superman.fly(); // -> 날아갑니다.

위 식은 function 을 생략하고 단축할 수 있습니다.

 const superman = {
	name : 'clark',
	age : 33,   
	fly(){
		console.log('날아갑니다.')
	}
}

객체 안의 함수 메소드가 객체 이름을 사용할 경우 this 를 사용할 수 있습니다.

const user = {
	name: 'Mike',
  	sayHello: function(){
    	console.log("Hello, I'm" ${user.name});
    }
}

// 함수 안에 user.name 을 쓰는 것은 문제가 될 수 있으므로 this 로 교체 

const user = {
	name: 'Mike',
  	sayHello: function(){
    	console.log("Hello, I'm" ${this.name});
    }
}

다른 예시로

let boy = {
	name : 'Mike',
}
let girl = {
	name : 'Jane',
}
sayHello : function(){
	console.log('Hello, I'm ${this.name}');
}

// this 가 아직 결전되기 전이다.

let boy = {
	name : 'Mike',
	sayHello,
}
let girl = {
	name : 'Jane',
	sayHello,
}

// 위 코드 이상하긴 하지만 일단 기록

boy.sayHello();  // I'm Mike
girl.sayHello();  // I'm Jane

// this 를 실행하는 시점은 런타임에 결정된다.

화살표 함수에서 this 를 사용하면 동작이 달라집니다. 화살표 함수의 this 는 외부의 전역객체를 가리킵니다. 브라우저 환경에서는 window 노드에서는 global 입니다. this 는 복잡하므로 추후 공부가 더 필요합니다.

예시를 통해 조금 더 살펴보면

let boy = {
	name : "Mike",
	showName : function () {
		console.log(boy.name)
	}
};
boy.showName(); // -> "Mike" 

// 위와 같은 함수에서 아래처럼 변수를 선언하면

let man = boy;

// man 이라는 변수에  boy 객체를 담으면 두 개로 접근 가능하다. 사람은 Mike 한 명인데 별명이 두개인 상황

man.name = "Tom"
console.log(boy.name) // -> "Tom"

// man 이름을 바꾸면 boy 이름도 바뀐다.

let boy = {
	name : "Mike",
	showName : function () {
		console.log(boy.name)
	}
};
let man = boy;
boy = null;
man.showName();

// 이렇게 실행하면 동작을 안한다. boy 가 null 이 되었으니 man 으로만 접근 가능한데, 이 때 메소드 안에 this 를 써야 한다.

let boy = {
	name : "Mike",
	showName : function () {
		console.log(this.name)
	}
};
let man = boy;
boy = null;
man.showName(); // -> "Mike"

// 메소드 안에서는 해당 객체를 가리킬 때 this 를 쓰는 것이 좋다.

화살표 함수를 활용한 사례를 살펴보면,

let boy = {
	name : 'Mike',
	sayThis : function () {
		console.log(this);
	}
};
boy.sayThis(); // 해당 객체 호출

// 위 함수를 화살표 함수로 바꾸면

let boy = {
	name : 'Mike',
	sayThis : () => {
		console.log(this);
	}
};
boy.sayThis(); // 작동 안할 수 있다.

// 화살표 함수를 쓰면 this 가 전역객체 window 를 가르킨다.

객체의 메소드는 화살표 함수를 쓰지 않는 게 좋습니다.