TIL no.53 - arrow function 화살표 함수

- arrow function은 ES6 이후로 등장한 새로운 개념입니다.

arrow function 은 단순하고 간단한 문법으로 함수를 작성하기 위해 사용되는 개념입니다.

작성이 편리하고 보기에도 간결하기 때문에 여기저기 흔하게 사용되는 것을 볼 수 있었을 것입니다.

 

일반 함수의 모양과는 다르게

//함수 선언식
function hiThere() {
	console.log('Hi there ~');
}

//함수 표현식
const function = function () {
	console.log('Hi there ~');
}

 

arrow function은 이렇게 선언합니다.

() => console.log('hi there ~')

함수 선언식에는 이름이 있는 반면에 arrow function은 익명함수로 표현합니다.

아니면 함수 표현식처럼 변수 이름을 선언해주고 그 안에 넣어주어야 합니다.

const hiThere = () => console.log('hi there ~');

 

만일 중괄호에 함수를 담아줄 경우에는 return 을 해주어야 합니다.

const hiThere = () => { return console.log('hi there ~'); }

 

기존의 일반 함수보다 코드를 더 간결하고 가독성있게 구현할 수 있습니다.

그렇다고 무조건적으로 arrow function을 사용할 수는 없습니다.

둘의 차이를 알고 때에 맞게 적절하게 사용하는 것이 중요합니다.

 

 

⚠️ arrow function 과 function 의 차이

arrow function은 this를 바인딩하지 않으며 arguments를 사용할 수 없고 생성자 함수로 사용할 수 없습니다.

 

1. this

 

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되지 않고 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다. 

따라서 동적으로 this의 값을 변경하기 위해 bind나 call, apply 메서드를 사용할 수 있습니다.

 

하지만 arrow function 은 this에 바인딩할 객체가 정적으로 결정됩니다. 호출자에 따라 매번 this가 변경되지 않고 언제나 상위 스코프의 this를 가리킵니다.

 

그래서 arrow function 과 function의 차이로 this를 바인딩하지 않는다고도 합니다.

또한 동적으로 결정되지 않기 때문에 bind나 call, apply도 사용할 수 없습니다.

 

 

 

2. arguments

 

일반함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있었지만, 화살표 함수에서는 arguments 변수가 전달되지 않습니다.

 

 

 

3. 생성자 함수

 

일반 함수는 생성자 함수로 사용할 수 있지만 화살표함수는 생성자 함수로 사용할 수 없습니다.

생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않습니다.

 

 

 

 

*** 이 외에도 화살표 함수의 정적인 this와 일반 함수의 동적인 this가 사용하여야 할 부분이 다르기 때문에 화살표 함수의 개념에 유의하며 사용하시길 바랍니다 .