객체 안에 함수 넣기

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 이곳으로 문의주세요! 😀

객체 안에 함수를 집어 넣을 수 있다.

const dog = {
	name : "멍멍이",
	sound : "멍멍",
	say : function say() {
		console.log(this.sound); //여기서 this가 가리키는 건 함수가 위치한 이 객체 자기자신을 의미. 즉 dog!
	}
};

dog.say(); //"멍멍" 출력

위 예제에서 function 이름을 생략해도 동일한 결과가 나옴

//...생략
	say : function () {
		console.log(this.sound);
	}
};

dog.say(); //"멍멍" 출력

더 나아가 key-value 쌍이 아닌, : funcation 부분을 지워도 동일한 결과가 나옴

//...생략
	say() {
		console.log(this.sound);
	}
};

dog.say(); //"멍멍" 출력

반면 여기서 function 키워드가 아닌 화살표 함수를 이용하면 동작하지 않게 된다!!

//...생략
	say: () => {
		console.log(this); //"undefined" 출력
		console.log(this.sound); //"TypeError: Cannot read property 'sound' of undefined." 에러 출력
	}
};

dog.say(); //에러 발생

위에서 처럼 function 키워드를 사용하는 것이 아니라 화살표 함수를 사용하게 되면 this가 무엇인자 알지못한다.

∵ function으로 만들었을때 this는 자신이 속해있는 곳을 가리키게 되는데,
화살표함수에서는 this를 자신이 속해있는 곳으로 연결하지 않는다!

=> 따라서 제대로 동작하지 않는다!

이해를 돕기위한 또다른 예시!

const dog = {
	name : "멍멍이",
	sound : "멍멍",
	say : function say() {
		console.log(this.sound); 
	}
};

const cat = {
	name : "야옹이",
	sound : "야옹"
};

cat.say = dog.say; //cat.say에다가 dog.say를 연결해줌
cat.say(); //"야옹" 출력

cat.say에 등록된 함수에서 this는 cat을 가리키기 때문에 this.sound는 "야옹"이 되고, "야옹"이 출력됨

//위에 예제에서 연결
const catSay = cat.say;
catSay(); //"TypeError: Cannot read property 'sound' of undefined." 에러 출력

catSay는 아무곳에도 엮여있는 것이 아니기 때문에, 호출하게 되면 this가 무엇인지 모르니 undefined가 되고 에러가 발생!