[JS] Arrow Function 가 뭔데

일반 function 사용 문법

// 1
function 함수이름(){
	// 기능
}

// 2
var 함수이름 = function(){
	// 기능
}

Arrow Function 사용 문법

var 함수이름 = () => {
	// 기능
}

왜 쓰는 걸까?

= 이걸 알면 언제 쓰면 좋을지가 나온다.

 

1. 함수 본연의 기능을 아주 잘 표현해주는 문법

 

우선 function은 언제 주로 사용하는가..에 대해 생각해보면

1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때. (이후 재사용도 고려..) 2) 입출력기능을 만들 때

 

var 두배만들기 = (x) => {return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

이런 식으로 사용하면 직관적으로 보기가 편해진다. 이해하기가 쉬워진다는 의미.

 

2. 소괄호 생략이 가능해진다.

파라미터가 하나일 때는 소괄호 생략이 가능하다.

var 두배만들기 = x => { return x*2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

3. 중괄호도 생략이 가능하다.

중괄호에 return 한줄 뿐일 경우 중괄호와 return도 생략이 가능해진다.

var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

4. function 내부에서 this 사용 시 외부(밖)에 있던 this 값을 그대로 사용함. (핵심)

this 는 함수가 쓰인 위치에 따라 내부의 this 값이 변한다.

arrow function은 어디서 쓰던 간에 내부의 this 값을 변화시키지 않음.

var 오브젝트1 = {
	함수: () => {console.log(this)}
}

오브젝트1.함수()

밖의 this를 호출하므로 window가 뜸.

 

 

일반 function을 대체하는 문법이 아니라.

용도에 맞게 사용하는게 핵심임.