함수 선언식과 함수 표현식

장혜식·2021년 8월 7일
0

JavaScript

목록 보기
3/6

* 함수 선언식

일반적인 함수 선언 형식과 비슷한 function 으로 시작합니다.

  • 함수 선언식 예시
function foo () {
  return "함수 선언식입니다.";
};

foo(); // "함수 선언식입니다."

* 함수 표현식

함수 표현식은 변수에 저장됩니다.
함수 표현식이 변수에 저장되면 그 변수는 함수처럼 사용이 가능해집니다.
변수에 저장된 함수는 함수명 작성을 하지 않아도 되고, 변수명을 통해 호출된다.

  • 함수 표현식 예시
const fnc = function () {return "함수 표현식입니다.";};

fnc(); // "함수 표현식입니다."

* 함수 선언식과 함수 표현식의 차이점

호이스팅의 영향을 받냐, 안 받냐의 차이점이 있습니다.
함수 선언식호이스팅의 영향을 받고, 함수 표현식호이스팅의 영향을 받지 않습니다.

foo();
fnc();

function foo () {
  return "함수 선언식입니다.";
};

const fnc = function () {return "함수 표현식입니다.";};

위 코드를 실행하면 foo() 함수는 실행이 되지만, fnc() 함수는 실행되지 않습니다.
위 코드가 실행됐을 때 자바스크립트는 밑에 코드처럼 해석을 합니다.

function foo() {
  return "함수 선언식입니다.";
};

const fnc;

foo(); // "함수 선언식입니다."
fnc(); // "Uncaught TypeError: sumNumbers is not a function"

function () {return "함수 표현식입니다.";};

이런식으로 함수 선언식은 호이스팅의 영향을 받기 때문에 함수가 위로 끌어올려지지만,
함수 표현식은 호이스팅의 영향을 받지 않기 때문에 함수가 위로 끌어올려지지 않아서
위와 같은 에러가 납니다.

profile
프로그래밍 기록공간

0개의 댓글