[ JS ] 일반 함수와 익명 함수의 차이에 대해 알아보자!

JavaScript에서의 함수 선언 방식은 일반함수와 익명함수로 나뉜다.

🤷‍♂️일반 함수란?

일반 함수는 다른 언어에서 함수를 선언하는 방식과 동일하다.
일반 함수 또는 함수 선언식이라고 불린다.

// JS 함수 구현 방법
function 함수명() {
	함수로직
}

# 파이썬 함수 구현 방법
def 함수명 () {
	함수로직
}

위 처럼 Python의 함수선언 방식과 JavaScript에서의 함수 선언 방식이 거의 동일한 것을 볼 수 있다 :)

이때 JavaScript에서는 일반 함수가 쓰여진 위치에 상관없이 사용할 수 있다.
왜냐하면 일반 함수는 JS가 스크립트를 처음 읽을 때 해석해서 사용하기 때문인데, 이를 호이스팅 이라고 한다.

👨‍🎓 호이스팅이란?
호이스팅은 JS가 처음 스크립트를 읽을 때 모든 객체 ( 변수, 함수 )의 선언부를 맨 위로 끌어올리는 것을 말한다. 즉 일반 함수는 (함수 명, 함수 로직 [바디 부분] ) 통째로 호이스팅 되어 맨 위로 올라가기 때문에 위치에 상관없이 사용할 수 있다.

hoistingTest()

function hoistingTest() {
  console.log("Hello :)")
}

hoistingTest()

/* 출력
* Hello :)
* Hello :)
*/

위 처럼 함수 선언을 중간에 놓고 사용을 해도, 호이스팅에 의해 함수 선언부가 끌어올려지기 때문에 정상적으로 두번 사용된 것을 확인할 수 있다!!😀

// 호이스팅 된 코드 모습
function hoistingTest() {
  console.log("Hello :)")
}

hoistingTest()
hoistingTest()

/* 출력
* Hello :)
* Hello :)
*/

---

🤷‍♂️익명 함수란?

익명 함수는 일반 함수와 다르게 함수의 이름이 존재하지 않는다. 그래서 일반 함수와 다르게 함수명을 제외한 채 선언한다.

function() {
console.log("Anonymous functions")
}

익명 함수는 "재사용 하지 않고 한번만 사용할 함수" 를 위한 개념으로 함수의 이름을 갖지 않고, 리터럴( Literal ) 방식으로 변수에 담겨 사용하는 함수이다. [ 함수의 이름 != 변수 ]

리터럴 [ Literal ] 방식이란?
Literal은 "문자 그대로 정확한" 이라는 뜻을 가진 것 처럼 뜻과 같이 일반적으로 변수에 데이터를 넣을 때 사용하는 방식이 리터럴 방식이다.

// Literal
let a = "Literal let";
const b = "Literal const";

위 처럼 리터럴 방식으로 익명 함수를 사용하게되면, 익명 함수는 변수에 저장된다.

const anonymousFunctions = function() {
  console.log("Anonymous functions Test")
}

anonymousFunctions()

// 출력 : Anonymous functions Test

위에서 말한 함수의 이름 != 변수 의 뜻은 호이스팅에서 온다.

일반 함수의 경우 호이스팅 시 함수 전체가 전부 맨 위로 올라가기 때문에 함수를 호출하는 위치에 상관없이 사용할 수 있었지만, 리터럴 방식으로 사용하는 익명 함수의 경우에는 함수를 담는 변수의 선언부만 위로 올라가고 익명 함수 자체는 변수가 호출되었을 때 실행되기 때문에, 선언부가 호출 위치보다 위에 있어야 정상적으로 사용 가능하다.

anonymousFunctions()

const anonymousFunctions = function() {
  console.log("Anonymous functions Test")
}

anonymousFunctions()
//error : Uncaught ReferenceError: Cannot access 'anonymousFunctions' before initialization

위 코드처럼 익명함수 선언을 중간에 두고 사용했을 경우 주석 처럼 error가 나오는것을 확인할 수 있다.

에러코드의 내용은 "초기화 하기 전에는 anonymousFunctions에 접근할 수 없다"고 하는 것인데, 이는 함수를 선언해주기 전에 호출했기 때문에 뜨는 오류이다.

위 처럼 일반 함수와는 다르게 익명 함수는 함수 선언 부분이 호출 위치 보다 위에 있어야 한다.

---

✍정리

일반 함수
전역적이며, 전체가 다 호이스팅 되므로 선언과 호출의 위치가 상관이 없다.
재사용 될 기능에 주로 사용!

익명 함수
선언부만 호이스팅되며 호출의 위치와 구현의 위치간에 순서가 알맞아야 한다!
한번만 사용하는 기능에 주로 사용된다.

사용해본 결과 일반 함수가 훨씬 편하고 관리하기도 좋아서 익명 함수는 왜 쓰는거지? 했지만
익명 함수는 메모리 관리에 아주 효과적이라고 한다.
일반 함수는 자바스크립트를 초기에 읽을 때 모두 호이스팅하는데, 전체 스크립트 내에서 단 한번만 쓰이는 함수가 일반 함수로 구현되어 있다면, 이 함수는 사용될 단 한번을 기다리며 불필요하게 메모리를 차지하게 된다! 즉 메모리를 낭비하게 되는 것 이다.

하지만 익명 함수를 사용할 경우 불필요한 시간동안 메모리를 차지하지 않고, 해당 함수의 위치에서 함수가 구현되고 사라지면서 메모리를 아낄 수 있게 된다!

---

‼결론

한번만 사용하는 기능을 구현할 때는 익명 함수를 주로 사용하고, 여러번 사용하는, 재사용이 필요한 함수일 때는 일반 함수로 구현하자!