(JS) 함수 선언문과 함수 표현식

woong·2022년 10월 16일

function 키워드 뒤에 함수 명을 써서 함수를 선언하는 방법.

function 함수이름 (parameter1,parameter2,...) {
  함수가 호출되면 실행될 실행문;
}

< 간단한 예시 >

function sum (a,b) {
  return a+b;
}
console.log(sum(2,3)); //5

먼저 변수를 선언하여 함수를 변수에 할당하는 방법. 함수의 이름이 따로 필요하지 않음.
함수 표현식으로 변수에 저장되면, 변수 이름으로 함수를 호출할 수 있다.

const 변수명 = function (parameter1,parameter2,...) {
  함수가 호출되면 실행될 실행문;
}

< 간단한 예시 >

const sum = function (a,b) {
  return a+b;
};
console.log(sum(2,3)); //5

함수 표현식과 마찬가지로 함수를 변수에 할당하는데 function이라는 키워드를 사용하지 않고 함수의 이름이 필요하지 않음.

const sum = (a,b)  => {
  return a+b;
};
console.log(sum(2,3)); //5

호이스팅이란 쉽게 말해서 코드가 맨 위로 끌어올려지는 매커니즘을 말한다.
=> 함수가 정의된 위치보다 위에서 호출을 해도 정상적으로 작동된다.

hello();
function hello () {
  console.log ('hello');
}
 //hello

함수 선언문으로 함수를 정의하면 호이스팅이 발생하여 함수를 정의한 위치가 맨 위로 간주된다. 그렇기 때문에 함수 정의를 한 위치보다 위에서 함수를 호출하여 사용할 수 있다.

hello();
const hello = function () {
  console.log ('hello')
};
// 에러.

함수 표현식으로 함수를 변수에 할당하면 호이스팅의 영향을 받지 않는다. 그렇기 때문에 함수 정의를 한 위치보다 위에서 함수를 호출하면 에러가 뜨며, 무조건 함수 표현식보다 아래에서 함수를 사용해야 한다.