[JavaScript/자바스크립트] 함수 선언문과 함수 표현식

함수 선언문 방식

function funcA() {
  console.log('funcA');
}

말 그대로 함수를 직접 선언하는 방식이다. 

 

함수를 선언한 후에는 변수에 할당하여 이를 사용할 수 있다. 

const varA = funcA;
varA(); // 출력: funcA

 

 

함수 표현식

위 함수를 함수 표현식으로 나타내보면

const varB = function funcB() {
  console.log('b');
};

다음과 같이 작성할 수 있다. 변수의 값으로 함수를 직접 할당하여 주었다. 

자바스크립트는 함수를 하나의 구조가 아니라 특별한 값으로 취급하기 때문에 다음과 같이 함수를 변수에 할당할 수 있는 것이다. 

 

함수를 선언하지 않고 값으로써 사용하기 때문에 해당 방식을 함수 표현식이라 한다.  

 

varB(); //출력: b
funcB(); //SyntaxError

위와 같이 함수를 호출해보면, funcB는 단독으로 선언되지 않았기 때문에 호출이 되지 않는다. 

이렇게 생각해보면, 사실상 funcB라는 함수의 이름은 사실상 필요없는 존재이다. 

 

const varB = function {
  console.log('b');
};

따라서 위와 같이 변수에 할당하려는 함수의 이름을 작성하지 않을 수 있으며, 해당 함수를 익명함수 라고 부른다. 

 

호이스팅의 차이

호이스팅이란

끌어올린다 는 뜻으로 코드를 실행하기 전 함수 선언이나 변수 선언을 스코프의 최상단으로 끌어올린 것처럼 보이게 하는 현상이다. 

console.log(name);
var name;
name = 'p1su';

//출력
//undefined

호이스팅은 선언을 끌어올려 먼저 실행된 것처럼 보이게 한다. 

 

위 예시의 경우

//var name; 호이스팅이 발생
console.log(name);
var name;
name = 'p1su';

변수의 선언 이 호이스팅이 되고, 그 이후 바로 변수를 출력하게 된다. 
이때 변수는 선언만 된 상태고 실제로 할당된 값은 없기 때문에 undefined 를 출력하게 된다. 

//var x; 호이스팅
x = 2;
console.log(x); // 출력: 2
var x;

위와 같이 변수를 선언하지 않은 채로 초기화를 먼저 한 후 값을 출력하면 초기화한 값이 출력된다. 

호이스팅이 적용되었기 때문이다. 

 

변수의 경우 var 만 호이스팅이 적용되고, const와 let으로 선언한 경우 적용되지 않는다. 

 

함수 선언문에서의 호이스팅

funcA();
//출력
//funcA

function funcA() {
  console.log('funcA');
}

함수 선언문은 함수 전체를 호이스팅하여 정의된 범위보다 위에서 사용해도 호출된다. 

 

함수 표현식에서의 호이스팅

x();

var x = function () {
  console.log('x');
};

 

마찬가지로 var x; 가 실행된 것처럼 보여, undefined 가 출력된다. 

따라서 함수 표현식의 경우 변수 선언 전에 호출을 하게 된다면 오류가 발생한다. 

 

함수 선언문과 함수 표현식 모두 코드를 실행하는데 있어서 문제가 되지는 않는다. 

정해진 답은 없으니, 결국 본인에게 맞는 코드를 작성하면 될 것이다. 

 

호이스팅으로 인해 코드가 꼬이는 것을 방지하고, 추후 유지보수성을 생각하면 const 와 함수 표현식을 사용하여 함수를 정의하는 것이 바람직해 보인다는 것이 나의 생각이다 !