JavaScript 16. 함수 선언식과 함수 표현식, 화살표 함수 (=>)

함수 선언식 (Function Declarations)

일반적인 함수 선언식은 다음과 같다.

<script>

  // 기본식 
  function 함수명(){ 리턴값 }

  //예시
  function decFn(){
  	return 'Function Declarations';
  }
  
  decFn();
  
</script>

함수 표현식 (Function Expressions)

함수를 변수선언과 같은 방식으로 표현하여 변수로 인식되게 한다. 함수를 임시 변수에 저장하여 사용하는 것.

<script>

  // 기본식 
  let 함수명 = function(){ 리턴값 }

  //예시
  let decFn = function(){
  	return 'Function Declarations';
  }
  
  decFn();
  
</script>

차이점

함수 선언식은 작성한 위치에 상관없이 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려지는, 호이스팅에 영향을 받는다. 하지만 함수 표현식은 함수로 인식되지 않고 변수로 인식되기 때문에 호이스팅에 영향을 받지 않는다.

• 함수와 변수는 가급적 상단부에 작성하자. 그러면 호이스팅으로 인한 꼬임 현상을 최대한 방지할 수 있다.

화살표 함수

화살표 함수는 위와 같은 함수 표현식의 간편한 대안이라고 할 수 있다.

<script>

  // 기본 표현 
  let list = function(list1, list2 ...){
      return listview;
  }

  //화살표 함수를 사용한 간편식 표현 : 화살표(=>) 우측의 값을 반환
  let list = (list1, list2 ...) => listview 
  
</script>

위의 두 함수는 인자 (list1, list2...) 를 받는 함수 list가 listview 값을 반환하는 식이다.
두 함수표현을 비교해봤을 때 화살표 함수를 사용한 식이 훨씬 간편한 것을 볼 수 있다.
예시를 하나 더 살펴보자.

<script>

  //기본 표현 
  let sum = function(a, b){
      return a + b;
  }

  //화살표함수로 표현  
  let sum = (a, b) => a + b;
  
  //구문이 여러줄일 때는 중괄호를 사용 + return 지시자를 사용하여 반환해줄 것 
  let sum = (a, b) => {
  	let result = a + b;
    return result;
  }
  
  alert( sum(100, 200)); 
  
</script>

위의 식은 a와 b의 인자를 받는 sum 함수가 a+b라는 리턴값을 반환하는 식이다.

• 만약, 인자가 하나밖에 없다면 인자를 감싸는 괄호를 생략할 수 있다.
  let sum = n => n + 1;

• 인자가 없을 때는 빈 괄호로 대체한다.
  let Hello = () => alert("Hello~!");
Hello();