Javascript 함수와 화살표 함수에 대한 정리 # Arrow Function

오늘은 Javascript의 화살표 함수에 대해서 정리하려고 하는데요.

이에 대해서 알아보기전에, 기존의 함수에 대해서 알아보고 정리해 보도록 하겠습니다.

 

1. 기존의 함수 (Function) 표현 방법

기존의 함수를 선언하는 방법은 크게 2가지가 있었는데요.

함수선언(Function Declaration)과 함수표현식(Functoin Expression)입니다.

1-1. 함수 선언 ( Function Declaration )

기존의 자바스크립트의 함수선언 방법은,

function키워드로 시작해서, 함수의 이름과, 인자를 전달한 후 "{ }"로 감싸서 표현하였구요.

return 키워드를 통해서 값을 반환하고, 함수를 종료하여 빠져 나갑니다.

 

 

아래와 같이 기본 값을 정해줄 수도 있습니다.

두번째 인수인 b를 아래와 같이 주지 않을경우 1이 디폴트값으로 들어가게 됩니다.

 

function minus(a, b = 1){
  return a - b;
}
minus(3) //2

 

값을 반환하지 않더라도 return 키워드로 함수를 종료하고 나갈 수 있습니다.

아래는 error가 있다면 함수를 종료하도록 하고 있습니다.

 

 

 

참고로 아무 값도 return 되지 않을 경우, 자바스크립트는 아래와 같이 'undefined'를 반환해 줍니다.

(Javascript에서는 없는 속성을 찾을 경우 'undefined'가 return됩니다.

예를 들어서, 아무값도 리턴하지 않고 console.log()만 하더라도 반환 값은 'undefined' 입니다.)

 

1-2. Rest parameters (나머지 인자들)

함수에서 인자를 받아들일 때 알아두면 좋은 것이 Rest Parameters 라는 개념입니다.

유연하기로 유명한 자바스크립트는 인자의 개수를 함수에서 정의하지 않아도,

원하는 만큼 인자를 넣어서 사용할 수 있는데요.

이렇게 가변되는 인자에 대응하기 위해서는 아래와 같이 해주면 됩니다.

(사실 다른 언어에도 가변인자에 대응하는 방법은 있습니다.)

 

아래와 같이 "..." 다음에 이름을 정해서 가변인자를 표현해 줍니다.

꼭 args라고 쓸필요는 없구요. 원하는 키워드를 만들어서 사용한 다음,

배열로 값이 들어오는데요.

for문을 돌려서 아래와 같이 사용해도 되고, 원하는데로 사용하면 됩니다.

 

 

 

Javascript 에서는 이외에도 아래와 같이 arguments 값에 접근하면,

인자들의 값을 배열같은 형태의 값으로 가져올 수 있습니다.

그럼 굳이 왜 rest parameter를 사용해야할까요?

다만, 주의할 것은 위의 rest parameters 처럼 진짜 배열이 아니기 때문에,

sort()나 map(), forEach, pop(), reduce() 함수등을 직접 사용할 수 없습니다.

 

 

1-2. 함수 표현식(Function Expression)

자바스크립트에서는 아래와 같이 함수를 작성할 수도 있었습니다.

변수를 먼저 선언하고, 함수를 대입하는 형식입니다.

 

 

1-3. 함수표현에 따른 hoisting 의 차이

자바스크립의 함수를 사용할 때는 hoisting이라는 개념에 대해서 알고 있어야 하는데요.

hoist 의 뜻은 무언가를 감아올리는 장치를 말합니다.

함수를 어딘가에서 감아올리는 뜻일까요?

 

 

자바스크립트에서는 코드작성 순서상 함수를 먼저 선언하고 호출하지 않고,

호출을 먼저하고, 함수선언이 아래에 있어도 정상적으로 동작합니다.

아래와 같이 사용해도 에러가 나지 않는 다는 것 이지요.

이것은 자바스크립트가 자체적으로 함수선언부를 hoist하고 있기 때문이지요.

 

 

 

이러한 Hoisting 현상은 함수 선언 (Function Declaration)방식에서는 동작하지만,

함수 표현식(Function Expression)방식에서는 동작하지 않습니다.

 

 

오늘 글의 진짜 주제이자,

아래에서 알아볼 화살표함수 표현방식에서도 동작하지 않습니다.

 

1-4. 리터럴 객체내에서 메소드 선언

리터럴 객체를 아래와 같이 사용할 경우, 

함수를 선언해서 사용할 수 있습니다.

이를 메소드라고 부르는데요.

 

 

객체리터럴에서는 아래와 같이 ": function"부분을 없애도 정상적으로 동작합니다.

다만 이렇게 축약하는 방법은 화살표함수에서는 동작하지 않습니다.

 

 

2. Arrow Function

2-1. 화살표 함수의 표현방법

위에서 함수선언이나 함수표현식을 이용해서 함수를 표현하는 방법을 알아보았는데요.

ES6(ES2015)부터 시작된 문법입니다.

기존의 함수는 아래와 같이 표현할 수 있었는데요.

 

 

아래와 같이 화살표를 이용해서 축약된 형태로 함수를 표현할 수 있습니다.

function 키워드는 사라지고 매우 간결해진 것을 볼 수 있습니다.

"function(){ ... }'로 표현되던 것이, 

"()=>{ ... }"로 바뀐 것 이지요.

 

 

 

함수의 첫줄에서 리턴이 될 경우, 아래와 같이 return 키워드와"{ }"도 생략할 수 있는데요.

(return키워드가 암시적으로 사용되기 때문에 생략이 가능합니다.)

 

 

다만, 아래와 같이 객체를 return 하는 경우,

"{ }"기호가 중첩되므로,

아래와 같이 "()"로 묶어 주면 return 키워드를 생략해 줄수 있습니다.

 

 

물론, 아래와 같이 그냥 return 키워드와 "{ }"로 묶어 주어도 됩니다.

 

 

인자가 없는 경우는 조금 미묘해 보이는데요. 다음과 같습니다.

 

 

인자가 하나인 경우, 아래와 같이 "()"를 생략할 수도 있습니다.

하지만, 개인적으로는 인자가 한여도 "()"를 일관적으로 넣는 것을 선호하기는 합니다.

 

 

아래는 화살표 함수를 표현한 것 인데요.

 

const applySpecialPoint = (scores, specialPoint) => {
  return scores.map(score => score * specialPoint);
};

 

한줄로 return이 가능한 return문은 생략이 가능하므로, 아래와 같이 한번 더 축약해서 볼수도 있습니다.

 

const applyBonus = (scores, bonus) => scores.map(score => score * bonus);

 

화살표가 2개가 있어 복잡해 보일 수 있지만,

그 의미를 이해한다면, 더욱 간결한 코드를 작성하고 이해할 수 있습니다.

 

2-2. this, arguments, super 에 접근할 수 없음

이 함수는 단순히 함수의 문법을 축약한 것만이 아니라,

this, arguments, super 등에 접근할 수 없습니다.

this에 접근할 수 없기에 아래와 같은 경우는 동작하지 않습니다.

아래의 경우 this에 접근할 수 없기에 return값이 'undefined'가 나옵니다.

 

 

 

위의 것을 일반 함수선언방식으로 해 보겠습니다.

정상적으로 접근되어서 10이 출력 되는 것을 볼 수 있습니다.

 

 

화살표 함수에서는 this에 접근이 안된다고 하였지만,

해당 화살표 함수를 감싸는 다른 일반함수가 있다면 아래와 같이 접근이 가능합니다.

 

 

2-3. 콜백함수에서의 사용

화살표 함수는 그 간결한 표현때문에 콜백함수에서도 많이 사용되는데요.

 

setTimeout이나 setInterval 함수를 사용하면 콜백함수가 실행되는 시간을 조절할 수 있는데요.

아래에서는 setTimeout함수를 사용해서 3초후에 실행될 코드를

첫번째 인자에서 콜백함수로 받아서 사용하였습니다.

 

 

그런데, 콜백을 사용하면 showMe에 값을 전달하기가 어렵습니다.

return되는 값이 setTimeout()에만 전달되기 때문입니다.

 

그래서 아래와 같이 showMe에서 인자로 콜백을 받은다음, 

그 콜백에 인자로 return값을 전달해 주고, 

해당 콜백함수를 구현해서 받은 return값을 사용하는 것 입니다.

 

 

 

한번 더 사례를 보겠습니다.

아래는 array 에 reduce함수를 사용한 것 인데요.

이 함수는 첫번째 인자에 콜백함수를 넣어줘야 하는데,

이 때 화살표 함수를 사용해 주었습니다.

 

 

3. IIFE (Immediately Invoked Function Expression)

화살표함수를 알아보면서 한가지 더 알아두면 좋을 함수표현방법이 있는데요.

Ben Alman 이라고 하는 개발자가 블로그에서 표현하여 유명해진 방법으로서,

즉시 호출되어 실행되는 함수의 표현법입니다.

MDN에 따르면 아래와 같은 패턴을 따르게 되는데요.

 

특별한 방법은 아니구요. "( )"로 감싸서, 함수의 명칭없이 바로 실행하는 것이 특징입니다.

 

(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();

 

예를 들면 아래와 같이 사용할 수 있습니다.

함수명 없이도 아래와 같이 잘 실행되는 것을 볼 수 있습니다.