Javascript 일반함수와 화살표함수의 차이 (Difference between regular function and arrow function)

자바스크립트에서는 일반적으로 사용되는 함수 이외에 화살표함수를 제공합니다.

마치 자바의 람다식처럼 간결한 표현으로 코드를 조금 더 간단하게 사용할 수 있게 하여줍니다.

function abcd1 (){
    console.log(1234);
}
var abcd2 = ()=>{
    console.log(1234);
}

abcd1(); //1234가 출력됩니다.
abcd2(); //마찬가지로 1234가 출력됩니다.

당연한 결과가 출력됩니다.

 

일반함수와 화살표함수와의 가장 큰 차이는 일반함수는 자신만의 데이터를 가질 수 있는 반면, 화살표 함수는 그렇지 못하다는 점 입니다.

function abcd1 (){
    this.number = 1234;
}
var abcd2 = ()=>{
    this.number = 1234;
}

 

위 코드에서 this.number를 통하여 데이터를 넣는 모습입니다.

abcd1함수는 내부의 number라는 변수에 1234값을 넣었지만, abcd2 화살표 함수는 외부에 참조되는 데이터에 대해서 값을 넣었습니다.

위 내용을 조금 더 쉽게 살펴보기위해 코드를 변경하였습니다.

function abcd1 (){
    this.number = 1234;
}
var abcd2 = ()=>{
    this.number = 1234;
}

var abcd = new abcd1();
console.log(abcd.number);

var abcd_ = new abcd2();  //에러

에러가 발생합니다.

 

위 사진처럼 new를 통해서 함수를 생성하려 할 때 에러가 발생하는 것을 볼 수 있습니다.

이처럼 화살표 함수는 this를 통해서 본인 소유의 데이터를 가질 수 없습니다.

또한 호출은(callable) 가능하지만 생성은(constructable) 불가능 합니다.

 

이상으로 일반 함수와 화살표 함수와의 차이를 살펴 보았습니다.

단순하게 호출 및 간략한 코딩을 위해서는 화살표 함수가 좋지만 그렇지 않는 경우에는 일반함수를 사용하여 데이터 누락이나 생성과 관련된 오류를 피해야 하겠습니다!

* 아..물론 익스플로러에서 화살표 함수는 동작하지 않으므로..익스플로러를 지원해야하면 사용하면 안되겠습니다..ㅠ