[JS] 함수 선언문, 함수 표현식, 호이스팅

자바스크립트 함수(Function)

함수 선언문

일반적인 프로그래밍 언어에서의 함수 선언과 비슷합니다.

function 함수명(){
	구현 로직
}

함수 표현식

유연한 자바스크립트 언어의 특징을 활용한 선언 방식 - 함수를 변수화시킬 수 있다.

const 함수명 = function(){
	구현 로직
}

호이스팅(hoisting)

정의

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위(scope)의 최상단에 선언하는 것을 말한다.

함수 선언식은 호이스팅에 영향을 받지만, 함수표현식은 호이스팅에 영향을 받지 않습니다.

예제)

// main

try{
    declare();  // 함수 선언문 실행
    expresses(); // 함수 표현식 실행
    
} catch(error){
    console.log("에러 발생");
}

function declare(){
    console.log("declare");
};

const expresses = () => console.log("express");

// 실행 결과
// declare
// 에러 발생

즉, 호이스팅을 통해 declare함수는 메인함수가 실행되기 전 제일 상단에서 선언된다. 하지만 expresses함수는 상단에 선언되지 않는 것을 볼 수 있다. 그렇다면 이 코드는 실제로 아래와 같이 인식한다.

// 함수 선언
function declare(){
    console.log("declare");
};

// 변수 선언
const expresses;

// main

try{
    declare();  // 함수 선언문 실행
    expresses(); // 함수 표현식 실행
    
} catch(error){
    console.log("에러 발생");
}

const expresses = () => console.log("express");

함수 표현식의 장점

• 함수를 변수화시킬 수 있기 때문에 함수의 객체를 쉽게 변수로 나타내어 리턴할 수 있다는 장점을 가지고 있다.
• 위의 장점을 통해 자바스크립트의 클로저, 콜백함수 구현이 쉽게 가능하다.

클로저

// 변수는 global
let variable = "global";

function func(){
    // 함수 안에 있는 변수는 local
    let variable = "local";
    
    const clouser = () => {
        console.log(variable);
    }
	
    return clouser;
}

// 내부 함수를 리턴(함수 표현식을 사용하기에 가능)
const reference = func();

// reference의 스코프는 전역임에도 불구하고 func안에 있는 변수를 출력
reference(); // 출력: local;

함수 표현식을 통해 내부 함수의 객체를 func()함수의 리턴값으로 사용할 수 있게 되고 이를 통해 func()함수의 내부 변수의 값을 가져올 수 있게 된다. 지금은 이해가 잘 안될 수도 있으니 뒤에서 더 자세히 다루도록 하겠다.

콜백함수

function func(fn){
    fn();
}

const callback = () => console.log("This is 콜백");

func(callback); // 출력 : This is 콜백

콜백함수도 마찬가지로 callback이라는 변수에 callback함수의 객체를 담을 수 있게 되었고 이를 통해 func함수를 통해 실행이 가능해졌다. 콜백함수에 대해서는 뒤에서 더 잘 다루도록 하겠다.

참고자료

(캡틴판교님의 블로그) https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/#%EC%9D%B4%ED%95%B4%EA%B0%80-%EC%9E%98-%EC%95%88%EB%90%98%EC%8B%9C%EB%82%98%EC%9A%94-%EB%B0%A9%EC%86%A1%EC%97%90%EC%84%9C-%EC%A7%81%EC%A0%91-%EB%AC%BC%EC%96%B4%EB%B3%B4%EC%84%B8%EC%9A%94-

네이버 부스트 코스(웹 프로그래밍 풀스택) https://www.boostcourse.org/web316/lecture/254283?isDesc=false

(꼬꼬마 블로그) https://wlswoo.tistory.com/54