[Javascript] - 함수 선언식과 함수 표현식의 차이점

1. 함수 선언식

💡function 키워드를 사용하여 함수 이름과 본문을 명시적으로 정의하는 방식

// 1. 함수 선언식
function 함수이름(파라미터) {
	동작
    return 리턴값
}

// 2. 호이스팅
printHi();

funtion printHi() {
	console.log('Hi');
}

2. 함수 표현식

💡함수 선언을 값처럼 활용하는 방식

// 1. 함수 표현식 - 함수 선언을 변수에 할당
const printHello = function (파라미터) {
	console.log('Hello');
}
printHello();

// 2. 함수 표현식 - 값처럼 사용
const myBtn = document.querySelector('myBtn');

myBtn.addEventListener('click', funtion() {
	console.log('button is clicked!');
});

 

---

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

1. 호이스팅 차이

함수 선언식	함수 표현식
호이스팅 가능	호이스팅 불가능

2. 함수 스코프 차이

함수 선언식	함수 표현식
함수 안에 선언된 함수는 함수 밖에서 호출할 수 없다.	함수가 아닌 다른 코드 블록에서 함수 선언을 하게 되면 모두 전역적으로 호출이 가능하다.

 

함수 선언식

// 함수 안에 선언된 함수는 함수 밖에서 호출할 수 없다.
function printHello() {
  function printJS() {
    console.log('JavaScript');
  }

  console.log('Hello');
  printJS();
}

printHello();
printJs(); // ReferenceError

// 함수가 아닌 다른 코드 블록에서 함수 선언을 하게 되면 모두 전역적으로 호출이 가능하다.
const x = 4;

if (x < 5) {
  function printJS() {
    console.log('JavaScript');
  }
}

{
  function printHello() {
    console.log('Hello');
  }
}

printHello()();
printJS();

함수 표현식

// 할당된 변수에 따라 스코프가 결정
var printJS = function () {
  console.log('JavaScript');
};

let printHi = function () {
  console.log('Hi');
};

const printBye = function () {
  console.log('Bye');
};