Difference between arrow func and func declare, plus three-dot-operator

지금까지 js를 공부하면서 arrow function에 대해 파편적으로 배웠습니다.

애초에 js를 따로 공부한적도 없기 때문에, 아는것만 아는 수준입니다.

 

Arrow function은 비교적 최근(ES2015)에 나온 방법인데, 문법은 이러합니다. ()=>{}

그런데 최근에 들어, 이 arrow function과 일반 function 선언 두가지 방식에 대한 차이점이 궁금해 지기 시작합니다.

이리하여 arrow function 과 function declare에 대해 알아보았습니다

Function expression(함수 표현식)

우선 들어가기에 앞서, function expression 에 대해 알아보도록 합니다.

const func = function(foo){ return foo; }

이것이 바로 function expression(함수 표현식) 입니다.

Function declaration

일반적인 function선언은 아래 코드와 같습니다.

function func(foo){ return foo; }

이 둘의 차이는 끌어올려지는가(is hoisting) 입니다.

Hoisting?

hoisting은, 해당 function을 선언을 둘러싼 함수의 최상부, 혹은 전역범위(global scope)로 끌어올려진다 입니다.

console.log(func(1));  // return 1

function func(foo){return foo;} // this function is hoisted.

그리고, 위 코드에서와 같이, 비 순차적으로(선언을 사용한 뒤에 되어있는)코드가 있을 때, 해당 함수를 작동하면, hoisting이 됩니다. 이러한 Hoisting이 된 코드의 경우, 선언된 위치에 구애받지 않고, 작동을 보장합니다.

Console.log(func(1));  // return undefind.

Const func = (foo)=>{return foo;} // this function is not hoisted.

하지만 function declare 로 선언이 된 함수는, hoisting이 되지 않습니다.

이제 Arrow function을 보도록 합니다. Arrow function은 this,args,super 혹은 new.targer을 바인딩하지 않는다 라고 합니다.

그 말은 arrow는 anonymouse function 입니다.

함수안에 또 다른 함수(recursion)를 쓰기 위해서는 이전버전(ES2015)에는 arguments.callee 를 이용했었다고 하나, 여러가지 문제로 인해 named function을 사용한다 합니다.

(그래도 지난 게시물을 해결할 열쇠로 보이진 않네요)

Arrow function

arrow function의 사용은 this 의 범위가 바인딩 되지 않는 것이 큰 차이점으로 보입니다.

const test = {

 a : 10,

 b : ()=>{ console.log(this.A);}

 c : function(){ console.log(this.A);}

}

test.b()// return undefined

test.c()// return 10

의 간단한 예제로 바인딩의 범위를 볼 수 있습니다.

Declaring Arrow function

Arrow function은 두가지의 선언방법이 있으며,

1. concise 바디 (중괄호가 없는)

const foo = bar => bar * 2; //return은 생략 가능하며, bar*2가 들어있다.

2. Block 바디(중괄호가 있는)

const foo = (bar) => { return bar * 2 }//return을 생략할 수 없다

가 있습니다.

이 이외에도 상당히 다양한 차이가 존재하나, 가장 눈여겨 볼 것은 bind의 차이로 불 수 있어 보입니다. 무엇이 더 좋은가를 굳이 따지기 보다, 언제 쓰는게 올바른가를 알아야 할거 같습니다.

(물론 짧은게 최고 라고 합니다만)

ps

추가적으로 알아보다가 얻었던 궁금증인  :

Three-dot-operator (…) 

는 arguments에서 길이가 가변적인 array로 볼수 있습니다.

function func(args1, args2, ...args3) { console.log(args3)} ;

func(1, 2, 3, 4, 5, 6, 7); // returning (array)[3,4,5,6,7]

를 리턴한다 합니다.