[JavaScript] 3. 함수 표현식

Zero·2023년 2월 12일
0

JavaScript

목록 보기
3/35

함수 선언문 VS 함수 표현식

  • 함수 선언문
function sayHello(){
  console.log('Hello');
}

sayHello();
  • 함수 표현식
let sayHello = function(){
	console.log('Hello');
}

sayHello()

위 두가지의 실행 방식과 동작 방식은 동일하다 어떤 차이가 있을까 ??

정답은 함수를 호출할 수 있는 타이밍이다 !

함수 호출의 타이밍

함수 선언문은 어디서든 호출이 가능하다 함수 선언보다 함수를 호출하는 부분이 윗부분에 있어도 실행이 되는데 , 순차적으로 실행되는 JS에서 어떻게 실행이 가능한 것일까 ?

  • JS 내부 알고리즘에 의해 JS는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓습니다. 따라서 함수의 사용 가능한 범위가 함수가 선언된 부분보다 넓어지는데 이를 ,
    호이스팅(hoisting)이라고 합니다. 코드 위치가 실제로 올라가는 것은 아님

  • 함수 표현식은 JS가 한줄씩 읽어가면서 실행되기 때문에 코드에 도달해서야 함수가 실행되기 때문에 위와 같은 방식으로는 호출할 수 없다.


화살표 함수(arrow function)

let add = (function(num1,num2){
  return num1 + num2;
}
         
--> 화살표 함수로 변경
         
let add = (num1, num2) => {
  return num1 + num 2; 
}

--> 이 때, return 문이 한줄이라면 return 과 괄호를 생략할 수 있다.

let add = (num1, num2) => (num1 + num2);

0개의 댓글