유튜브 코딩앙마 채널의 '자바스크립트 기초 강좌' 를 공부하며 정리한 내용입니다.
객체에 함수를 추가할 수 있습니다. 객체 프로퍼티로 할당된 할당된 함수를 메소드 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 를 가르킨다.
객체의 메소드는 화살표 함수를 쓰지 않는 게 좋습니다.