[JavaScript] JavaScript 기본 문법 (6) - 객체 (3) - 메소드(Method)와 this 키워드

Method

메소드(Method) VS 함수(Function)

메소드는 함수의 일종. ( 메소드 ⊂ 함수 )

메소드는 객체에 종속된 함수. 객체의 property 값인 함수.

 

Method examples

Method 만들기

객체 프로퍼티의 value로 함수를 할당.

let user = {
    name: "Kim",
    age: 30,
    sayHi: function () {
        console.log("HI");
    },
};

user.sayHi();	// output : HI

이미 정의된 함수를 메소드로 만들 수도 있음.

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

function sayHi() {
    console.log("HI");
}

user.sayHi = sayHi;

user.sayHi();	// output : HI

line 10에서 user.sayHi = sayHi(); 처럼 작성하지 않도록 조심.

user.sayHi = sayHi(); 는 sayHi() 함수의 return 값이 user 객체의 프로퍼티로 들어가게 된다.

 

Method 단축 구문(shorthand)

line 1~5의 구문과 line 9~13의 구문은 완전히 동일하지는 않으나, 거의 비슷하게 동작함.

객체 상속(Object Inheritance)에서 약간의 차이가 존재.

let user = {
    sayHi: function () {
        console.log("HI");
    },
};

user.sayHi();	// output : HI

user = {
    sayHi() {
        console.log("HI");
    },
};

user.sayHi();	// output : HI

 

Method & this

Method & this

메소드는 객체 내부에서 this를 활용해 객체 프로퍼티의 값을 활용할 수 있음.

let user = {
    name: "KIM",

    sayHi() {
        console.log(`HI, My name is ${this.name}`);
    },
};

user.sayHi();
// output : HI, My name is KIM

 

런타임에 결정되는 JavaScript의 "this"

JavaScript의 this 는 다른 언어의 this 와는 동작 방식이 다르다.

javaScript에선 모든 함수에 this 를 사용할 수 있으며, 런타임에 this 의 값이 결정된다.

동일한 함수라도, 다른 객체에서 호출되었다면 (동일한 함수를 다른 객체의 메소드로 할당하고, 그것을 호출) this 가 참조하는 값이 달라진다.

let user1 = {
    name: "Kim",
};
let user2 = {
    name: "Lee",
};

function sayName() {
    console.log(this.name);
}

user1.sayName = sayName;
user2.sayName = sayName;

user1.sayName();	// output : Kim
user2.sayName();	// output : Lee

line 15, 16에서 this 가 점(.) 앞의 객체를 참조하기 때문에, this 의 값이 line 15와 line 16에서 각각 다름.

this 의 값이 line 15에선 user1 / line 16에선 user2.

 

객체 없이 호출되는 "this"

function sayName() {
    console.log(this);
}

sayName();
// output : <ref *1> Object [global] { global: [Circular *1], ............

이렇게 명시되는 객체 없이 this를 호출할 수도 있다.

strict mode 에서는 this 에 undefined 가 할당되어 그 property에 접근하려 하면 오류가 발생한다.

strict mode가 아닐 때 는 this 가 전역 객체 를 참조하게 된다.

 

화살표 함수에서의 "this"

화살표 함수에서 this 를 참조하면, 일반 함수와는 달리, 화살표 함수가 아닌 '평범한' 외부 함수에서 this 를 참조한다.

let user = {
    name: "Kim",
    sayName() {
        let say = () => console.log("this.name");
        say();
    },
};

user.sayName();
// output : Kim

line 5의 화살표 함수 say() 에서, say() 의 this 는 외부 함수인 sayName() 의 this 를 참조하여 가져온다.

즉, say() 의 this 는 user 객체이다.