JavaScript 함수 - 호이스팅(Hoisting)과 추상화(Abstraction)

함수 표현식과 선언문

 

함수 선언문

function hello(){
    console.log('Hello')
}

   - 함수 자체를 선언하는 방식입니다.

   - 함수를 뜻하는 function과 함수명을 지정해주어야 합니다.

 

함수 표현식

const world = function(){
    console.log('World')
}

   - 어떠한 변수에 함수를 할당하는 방식입니다.

   - 변수 자체가 함수의 역할을 하며, 이름을 지정하지 않으며, 적더라도 무시됩니다.

 

 

위 두 방식의 차이중 하나는 호이스팅이 되는가? 입니다.

함수 선언문은 호이스팅이 적용되지만 표현식은 호이스팅을 지원하지 않습니다.

 

호이스팅

hello() // hello 출력
world() // 에러 발생



function hello(){
    console.log('Hello')
}

const world = function(){
    console.log('World')
}​

   - 어떠한 값의 선언이 아래에 위치하더라도 해당 값을 사용할 수 있는것을 말합니다.

   - 먼저 사용한 뒤, 나중에 선언 하더라도 코드에 에러가 발생하지 않습니다.

   - 이를 이용하여 함수와 코드를 분리하여 작성할 수 있습니다.

   - 너무 자주 사용하게 되면 코드 가독성에 문제가 생길 수 있습니다.

 

 

추상화

function getFruits() {
    //코드 1
    //코드 2
    //코드 3
    //코드 4
    //....
    //return fruits
}


// 전체 코드를 안보더라도 대략적으로 어떤 작업을 하는지 이해할 수 있습니다.
const fruits = getFruits();​

   - 여러 코드를 하나의 함수로 묶어 추상적으로 이해할 수 있도록 만드는 작업입니다.

   - 전체 코드를 이해하지 않더라도 부분적으로 함수를 확인하여 이해할 수 있습니다.

   - 빠르게 일부 기능을 확인 할 수 있으므로 코드의 가독성을 높일 수 있습니다.