[JavaScript] 05. 함수 선언문과 함수 표현식

오늘은 함수 선언문과 함수 표현식에 대해서 정리해보려고 합니다.

먼저, 함수 선언문과 함수 표현식을 살펴볼까요?

💡함수 선언문

함수 선언문은 일반적인 프로그래밍 언어에서 함수 선언과 유사한데요!

function 함수명(매개변수1, 매개변수2){실행내용;}

💡함수 표현식

함수 표현식은 어떤 변수에 함수를 할당하여 함수를 생성하는 것을 말합니다. 이때 변수 선언과 동일하게 세미콜른을 붙여 사용합니다.

let 변수명 = function(매개변수1, 매개변수2){실행내용;};

함수 표현식에는 두가지의 표현식이 존재합니다.
먼저, 익명 함수 표현식은 위와 같은 형식을 말하는데요!

함수명을 따로 지정하지 않고 사용하는 것을 의미합니다.

기명 함수 표현식은 함수명을 따로 부여하여 사용할 수 있어요!

let 변수명 = function 함수명 (매개변수1, 매개변수2){실행내용;};

기명 함수 표현식을 사용할 때에는 반드시 변수명을 이용하여 함수를 호출해주어야 합니다.
예를 들어 아래와 같은 코드가 있을 때,

let func = function introduce(name = "송우든"){
  
    console.log(`나의 이름은 ${name}입니다.`);
};

func(); // 올바른 호출 방법
introduce(); // xxx error!

introduce()를 호출하여 사용한다면 아래와 같은 오류가 발생합니다.

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

함수 선언문과 함수 표현식의 차이점은 크게 두가지가 존재하는데요!

1. 생성시점 차이

함수 표현식은 코드 실행 시 함수에 도달했을 때 함수를 사용할 수 있는 반면, 함수 선언문은 호이스팅 영향을 받아 함수 선언문이 정의되기 전에 호출이 가능합니다.

2. 유효범위(스코프) 차이

strict mode(엄격 모드)에서 함수 선언문이 코드 블록 내에 위치하면 블록 내 어디서든 접근이 가능하지만 블록 밖에서는 함수에 접근하지 못합니다. 하지막 함수 표현식은 제대로 동작합니다.

++ strict mode(엄격 모드)
엄격모드(strict mode)는 ES5부터 등장하였는데요!
하위 버전에 호환성을 가짐과 동시에 새롭게 정의된 스펙을 따르기 위하여 생겨났습니다.

'use strcit';를 스크립트 최상단에 붙여 사용합니다. strict mode는 뒤에서 좀 더 상세하게 다루어 보겠습니다.

💡함수 선언문과 함수 표현식, 언제 사용할까?

[함수 선언문]

함수 선언 전에 호출 할 수 있기 때문에 코드를 좀 더 편리하게 사용할 수 있고 가독성을 높일 수 있어요!

[함수 표현식]

조건에 따라 함수의 내용이 달라질 때 사용하는 것이 좋습니다.

오늘은 간단하게 함수 선언문과 표현식에 대해 정리해 보았습니다.
다음에는 자바스크립트의 다양한 함수(일급함수, 고차함수, 화살표함수 등)을 다뤄볼 예정입니다:)

참고 자료 및 사이트

JAVASCRIPT.INFO