자바스크립트[기초] 화살표 함수와 일반 함수의 차이

화살표 함수가 기존의  function 함수를 대체할 수 없는 것은 용도가 다르기 때문이다. 무엇보다 서로 가리키고 있는 this 값이 다르다 

---

화살표 함수(ES6에서 추가된 함수를 표현하는 문법)

• 함수를 파라미터로 전달할 때 유용하다
• 자신이 종속된 인스턴스를  가리킨다 (조금 더 쉽게 말하면 function 함수 자체의 this를 나타낸다)
• 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다

일반 함수(function)

•  자신이 종속된 객체를 this로 가리킨다 (조금 더 쉽게 말하면 function 함수 내부에 있는 객체를 나타낸다)  

// 일반 함수 사용
setTimeOut(function() {
	console.log('hello world');
 }, 1000);
 
 // 화살표 함수 사용
 setTimeOut(() =>{
	console.log('hello world');
 }, 1000);
 
 /* 일반 함수 와 화살표 함수의 this 차이 */
 
 // 일반 함수 사용
 function BlackDog() {
 this.name = '흰둥이';
    return {
    name: '검둥이',
    bark : function(){
    	console.log(this.name + ': 멍멍');
    	}
    }
 }

 const blackDog = new BlackDog();
 blackDog.bark(); // 검둥이: 멍멍!
 
 // 화살표 함수 사용 
 function WhiteDog() {
 this.name = '흰둥이';
    return {
    name: '검둥이',
    bark : () => {
    	console.log(this.name + ': 멍멍');
    	}
    }
 }
 
 const whiteDog = new WhiteDog();
 whiteDog.bark(); // 흰둥이: 멍멍!
 
 
// 화살표 함수는 따로 {} 를 열어주지 않으면 연산한 값을 그대로 반환한다는 의미 이다 
 function twice(value) {
 	return value * 2;
 }
const triple = (value) => value * 3;