[JS] 익명함수 vs 일반함수

유나영·2023년 4월 9일
0

JavaScript

목록 보기
4/4
post-thumbnail

들어가며

일반 함수와 익명함수, 함수 표현식과 함수 선언식 ...
용어들이 어려운데 막상 파헤쳐보면 간단한 둘의 차이에 대해 알아봅시다


일반 함수 (함수 선언식)

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

// 예시
function SayHello(){
  console.log("hello!");
}

SayHello(); // hello!

일반적으로 사용되는 함수 선언 방식입니다.
(딱히 설명할게 없.. 진짜 이름에 충실한 일반 함수)

익명 함수

function() {
  console.log("hello!");
}

익명함수는 위와 같은 형태입니다.
일반함수와 비교했을때 함수 이름을 가지고 있지 않아요.
익명함수는 주로 재사용하지 않고 한번만 사용할 함수를 정의할때 사용합니다.
리터럴 방식으로 사용되는 익명함수는 변수에 저장하게 됩니다.

리터럴(literal) 방식이란
"문자 그대로 읽히는 방식"을 의미하며, 일반적으로 변수에 데이터를 넣을 때 사용하는 방식이 리터럴 방식입니다.

함수 표현식

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

//예시
const sayHello = function() {
  console.log("hello!");
}

sayHello(); // hello!

위의 예처럼 익명함수를 변수에 담은 형태가 바로 함수 표현식입니다!

차이점

우선 제일 큰 차이점은
함수 선언식은 호이스팅의 영향을 받지만 함수 표현식은 호이스팅의 영향을 받지 않는다는 것입니다.

  1. 일반 함수는 전역적이며, 전체가 다 호이스팅 되므로 호출의 위치와 구현의 위치간에 연관관계가 없다. 또한, 재사용될 기능에 주로 사용된다.

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

위 말만 보면 익명 함수가 오히려 번거로운 것처럼 보일 수 있지만,
이는 메모리 관리에 효과적인 방안이 될 수 있습니다.
단 한번만 사용되는 함수의 경우,
불필요한 시간동안 메모리를 차지하지 않도록 익명함수로 구현한다면
정확히 해당 함수가 필요한 위치에서만 해당 함수가 구현되고 사라지면서 메모리를 아낄 수 있게 됩니다.


참고

https://dev-note-97.tistory.com/273

https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

profile
프론트개발자입니다.

0개의 댓글