JavaScript - 호이스팅(함수 선언과 표현 구분)

// 함수 선언문(Declaration)

function hello ( ) {}

// 함수 표현식(Expression)

const hello = function () {}

// 호이스팅(Hoisting) - 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 / 함수 선언문에서만 사용가능, 표현식 x

 

# 함수 선언문

---

// 호이스팅(Hoisting)

hello();

function hello() {

  console.log("Hello~");

}

 

함수가 선언이 아래쪽에 있지만 함수 선언을 할 때 작성한 선언문을 함수 선언문에 끌어올려져서 동작하는 것

 

hello()

const world = function world() {

  console.log('Hello~')

}

 

이렇게 작성하게 될 경우 함수 표현식에서 기존 함수 명을 hello에서 world로 바꾸었기 때문에 함수 명은 hello가 아닌 world로 선언을 해야 오류가 나지 않게 됩니다.

# 함수 표현식

---

world()

const world = function world() {

  console.log('Hello~')

}

 

또한, 이렇게 작성하게 될 경우 호이스팅은 함수 선언문에서만 동작하므로 함수 표현식에서는 호이스팅이 동작하지 않습니다. 따라서 에러가 발생하게 됩니다. 이러한 에러를 해결하기 위해서는 world() 를 함수 표현식 밑에 작성하여야 합니다. 아래와 같이 변경하여 작성하게 되면 에러가 나질 않습니다.

 

const world = function world() {

  console.log('Hello~')

}

hello()

 

# 함수 반환 및 종료

---

// 반환 및 종료

function plus(num) {

  return num + 1;

}

console.log(plus(2));

 

위와 같이 작성하게 되면 숫자 2를 plus 함수가 받아 숫자 2 + 1 인 값인 3을 반환하게 됩니다. 따라서 콘솔 창에는 숫자 3이 출력이 됩니다.

console.log(plus());

 

=> 이렇게 작성하게 되면 plus 함수를 잘못 사용한 것이므로 콘솔 창에는 NaN이 출력이 됩니다.

 

// 반환 및 종료

function plus(num) {

  if( typeof num !== 'number'){

    console.log('숫자를 입력해주세요!')

    return 0

  }

  return num + 1;

}

console.log(plus(2));

console.log(plus(7));

console.log(plus());

 

=> 이렇게 작성하게 되면, typeof 함수와 부정 연산자 !를 사용하여 입력된 데이터의 타입이 숫자가 아닐 경우 "숫자를 입력해주세요!" 와 함께 0을 반환합니다. 그렇게 되면 사용자는 입력된 값이 숫자가 아닌 것을 알게 되어 수정할 수 있는 형식입니다.

 

여기서, return 키워드를 통해서 반환하거나 함수를 종료하거나 둘 중 하나인 경우로 출력할 수 있습니다!