Javascript method

 

Javascript 에서 다음과 같이 메서드를 표현할 수 있다.

예를 들어 user라는 객체를 만들고 이름을 바꾸는 메서드를 선언해 보면

function

const user = {
    name: '',
    changeName: function(name) {
        this.name = name
    }
}

function 축약법

const user = {
    name: '',
    changeName(name) {
        this.name = name
    }
}

화살표 함수

const user = {
    name: '',
    changeName: (name) => {
        User.name = name
    }
}

 

 

단 화살표 함수의 경우 메서드 안에서 this를 사용하게 되면, 상위 스코프의 this를 가져오기 때문에 메서드로 화살표 함수를 쓰는 것은 좋지 않다.

예를 들어 다음과 같은 user2 객체가 있다면,

const user2 = {
    name: '',
    changeName(name) {
        this.name = name
        const func2 = () => {
            console.log(this.name)
        }
        func2()
    }
}

 화살표 함수 안의 this.name 은 user2 객체의 name을 반환한다.

따라서 메서드를 화살표 함수로 사용한다면,

const user = {
    name: '',
    changeName: (name) => {
        this.name = name
        console.log(this)
    }
}

this는 상위 스코프인 window 객체를 가져오게 된다.

 

결론

javascript 에서의 화살표 함수는 메서드 용도로는 좋지 않고 함수 안에서 함수를 정의하거나 this가 필요하지 않은 함수에 적합한 것 같다.👌