자바스크립트 함수표현식과 화살표 함수

" 함수도 자바스크립트 내에선 자료형. 값의 분류.
값이기 때문에 변수나 상수에 담아서 활용할 수 있다. "

 

함수에는 함수 표현식과 함수 선언식 두가지의 방식이 있다.

let helloA = function () {
  return "안녕하세요!";
}; // 함수 표현식

function helloB() {
  return "안녕하세요!";
} // 함수 선언식

그리고 만약에 함수가 선언되기전의 라인에서 함수를 선언하면 어떻게될까?

console.log(helloB()); // 안녕하세요! 가 출력되는 것을 알 수 있다.

let helloA = function () {
  return "안녕하세요!";
}; // 함수 표현식

function helloB() {
  return "안녕하세요!";
} // 함수 선언식

위에 적힌대로 안녕하세요! 가 정상 출력하는 것을 알 수 있다. 

이러한 자바스크립의 특징을 "호이스팅" 이라고 하는데 간단하게 함수 선언식으로 만들어진 함수들은 프로그램 실행되기전에 코드의 최상단으로 올라가게 되어 실제론 아래의 코드처럼 작동하는 것이다. 하지만 함수 표현식은 호이스팅이 이루어지지 않는다.

function helloB() {
  return "안녕하세요!";
} // 함수 선언식

console.log(helloB()); // 안녕하세요! 가 출력되는 것을 알 수 있다.

let helloA = function () {
  return "안녕하세요!";
}; // 함수 표현식

이 함수를 더 간략하게 사용할 수 있는 방법이 있는데 "화살표 함수" 이다.

let helloA = function () {
  return "안녕하세요!";
}; // 함수 표현식

let helloA = () => {
  return "안녕하세요 여러분";
}; // 위의 표현식을 더 간결하게 만들어주는 화살표 함수.

let helloA = () => "안녕하세요 여러분";
// 만약에 함수의 구현부가 하나만 리턴한다면 이렇게 사용해도 무관하다.

그리고 화살표 함수는 호이스팅 대상이 되지않기에 순서에 주의해 코딩하도록 하자.