JS 화살표 함수

화살표 함수

ES6 문법에서 함수를 표현하는 새로운 방식이다.
그렇다고 해서 기존 function을 이용한 함수 선언 방식을 아예 대체하지는 않는다. 사용 용도가 조금 다르다.

이 문법은 주로 함수를 파라미터로 전달할 때 유용하다.

setTimeout(function(){
	console.log('1초 지났다');
},1000);

setTimeout(()=>{
	console.log('1초 지났다');
})

이 문법이 기존 function과 다른 이유는 서로 가리키고 있는 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() 👉 일반함수

  • 자신이 종속된 객체를 this로 가리킨다.

• ( )=>{ } 👉 화살표 함수

  • 자신이 종속된 인스턴스를 this로 가리킨다.

화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.

function twice(value){
	return value * 2;
}

const triple = (value) => value * 3;
//{ }를 사용하지 않으면 연산한 값을 그대로 반환한다는 의미