프론트엔드 개발일지 #16 - 콜백과 배열03 (화살표 함수와 this)

화살표 함수와 this

// this 키워드를 사용하면 화살표 함수가 다르게 동작한다.
const person = {
    firstName: 'Viggo',
    lastName: 'Mortensen',
  	fullName: function () {
    	return `${this.firstName} ${this.lastName}`
	}//'Viggo Mortensen'
} 
 
//fullName 부분을 화살표 함수로 다시 써보면,
const person = {
    firstName: 'Viggo',
    lastName: 'Mortensen',
  	fullName: function () => {
    	return `${this.firstName} ${this.lastName}`
	}// undefined undefined
} 
//출력이 되지않고 undefined가 출력된다. this가 윈도우를 가르키고 있다.
//지연을 시켜보자.
const person = {
    firstName: 'Viggo',
    lastName: 'Mortensen',
  	fullName: function () => {
    	return `${this.firstName} ${this.lastName}`
	},
	shoutName: function () {
		setTimeout(function () {
			console.log(this.fullName())
    }, 3000)
  }//undefined 3초 뒤 윈도우 가르키고 있다.
}

//저 부분을 다시 화살표 함수로 바꾸면
const person = {
    firstName: 'Viggo',
    lastName: 'Mortensen',
  	fullName: function () => {
    	return `${this.firstName} ${this.lastName}`
	},
	shoutName: function () {
		setTimeout(() =>
			console.log(this.fullName())
    }, 3000)
  }//undefined 3초 뒤 윈도우가 아닌 사람을 가르키고 있다.
}

//다시 코드를 바꿔보면
const person = {
    firstName: 'Viggo',
    lastName: 'Mortensen',
  	fullName: function () {
    	return `${this.firstName} ${this.lastName}`
	},//this가 객체를 바라보지않았다
	shoutName: function () {
		setTimeout(() =>
			console.log(this.fullName())
    }, 3000)
  }
}

일반함수와 다르게 작용한다.