자바스크립트에는 함수 선언문과 함수 표현식이 존재한다.
이러한식으로 흔히 작성하는 함수를 함수 선언문이라고 한다. 그렇다면 함수 표현식은 무엇일까?
이런식으로 이름이 없는 함수를 만들고 sayHello라는 변수에 함수를 할당하였다. 이런 방식을 함수 표현식이라 부르고 호출하는 방법은 위의 함수 선언문과 똑같이 sayHello(); 이런식으로 호출한다.
이렇게 호출하는 방식도, 작성하는 방식도 똑같은데 뭐가 다른걸까?
정답은 호출할 수 있는 타이밍이다.
함수 선언문은 어디서든 호출할 수 있다.
예를들면
이러한 코드를
이렇게 호출을 먼저 올려서 작성해도 동작한다. 자바스크립트는 위에서 아래로 코드를 읽으며 실행하는데 이렇게 순차적으로 실행되고 즉시 결과를 반환하는 프로그래밍 언어를 인터프리터 언어라고 한다. 근데 어떻게 저 코드가 실행이 되는걸까?
이러한 코드가 있다고 가정했을때 저 console.log는 찍히지 않을 것이다. 왜냐하면 순서대로 실행되는데 num의 값이 할당이 안되어 있기때문이다.
그렇다면
이 코드는 실행이 되는데 어떻게 실행이 되는걸까?
이것은 자바스크립트의 내부 알고리즘때문이다. 자바스크립트는 실행전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓는다. 즉 눈으로 봤을땐 저 모습이지만 저 함수는 이미 sayHello();라는 함수를 호출하는 코드보다 위에 위치한다는 개념이다. 실제로 위에 위치한다는건 아니지만 저 함수를 사용할 수 있는 범위는 저 호출하는 코드의 위치보다 위로 올라간다는 뜻이다. 이러한 개념을 호이스팅이라고 한다.
하지만 함수 표현식은 호이스팅 방식으로 되는게 아니라 해당 코드에 도달하면 생성이 된다.
그렇기에 해당 코드에 도달한 이후에 사용을 할 수 있다.
화살표 함수는 일반적인 함수를 좀 더 간결하게 사용 할 수 있다.
이렇게 생긴 함수를
이렇게 바꿀 수 있다.
지금 이 예제는 코드 본문이 한줄이고 return문이 있기 때문에
이렇게 바꿀 수 있다. 리턴문은 중괄호가 아닌 일반 소괄호로 바꿀 수 있다.
return문이 한줄이라면
이런식으로 괄호도 생략할 수 있다.
또한 인수가 하나라면 원랜 저 name부분이 (name)이렇게 되어야 하지만 저 소괄호도 생략할 수 있다.
근데 만약 인수가 없는 함수라면 괄호를 생략할 수 없다.
그리고 이렇게 return절이 한줄이 아니라 여러줄이면 소활호()가 아닌 중괄호{}를 사용해야 한다.
이 글은 유튜브 코딩앙마 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
