[js] 함수의 종류(선언문,표현식,화살표,즉시실행 등...)

서비스 운영 및 협업을 하면서, 사람마다 함수를 사용하는 스타일이 달라 선언형 함수, 표현형 함수, 화살표 함수 등이 의미없이 섞여있어 문득 각각의 차이점을 정확히 이해하고 사용하고 있을까 라는 의문이 들었다.

이참에 나도 놓치고 있는부분이 있지는 않을까 짚고 넘어가기 위해, 또한 팀원들과의 공유를 위해 해당 게시글을 작성하게 되었다.

함수의 종류

javascript에서의 함수의 종류에 대해 정리하려고 한다.

함수 선언문 (Function Declaration)

function 함수이름( ) { code... }

함수 선언문은 *호이스팅되므로, 선언 위치에 상관없이 코드에서 사용할 수 있다.
즉, 선언 보다 호출을 먼저 하여도 정상적으로 잘 작동한다.
함수 선언문은 함수 자체가 *호이스팅되어 초기화되므로, 선언 이전에 호출할 수 있다.

*호이스팅에 관한 내용은 js의 실행 컨텍스트와 함께 추후 포스팅하도록 할 예정이다.

function func() {
  console.log('Hello!');
}

---------------------------------------
  
// 호이스팅 예제
func() // Hello!

function func() {
  console.log('Hello!');
}

함수 표현식 (Function Expression)

const 함수이름 = function() { code... }

함수 표현식은 변수나 상수에 함수가 할당되는 시점에 정의된다. func는 호이스팅되지만, 초기화 이전에는 사용할 수 없다. 아래의 상황에서는 func의 초기화는 선언시점에 되기때문에 선언 전에는 해당 변수를 참조할 수 없다. 때문에 참조에러가 발생한다.
위에서 말했지만 이후 포스팅에서 *호이스팅에 관해 다룰 예정이기에 간단하게 넘어가도록 하겠다.

const func = function() {
  console.log('Hello!');
}

---------------------------------------
// 호이스팅 예제
func() // ReferenceError: func is not defined

const func = function() {
  console.log('Hello!');
}

화살표 함수 (Arrow Function)

const 함수이름 = () => { code... }

간결한 구문을 제공하며, this를 바인딩하지 않는다. 주로 짧은 콜백 함수나 간단한 로직을 작성할 때 유용하다. 화살표 함수는 생성자로 사용할 수 없다.

또한 일반함수의 표현식과 동일하게 선언이 먼저 호이스팅되고 이후에 코드실행에서 초기화되므로, 선언전에 함수가 호출 될 수 없다.

const func = () => {
  console.log('Hello!');
};

즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

(function() { code... })()
정의와 동시에 실행되는 함수로, 전역 스코프를 오염시키지 않고 코드를 실행할 수 있다.

(function() {
  console.log('즉시 실행 함수 !!');
})(); // '즉시 실행 함수 !!'

생성자 함수 (Constructor Function)

function 함수이름() { code... }
new 키워드를 사용해 객체를 생성할 때 사용된다. 생성자 함수는 주로 대문자로 시작한다.

생성자 함수는 ES6(ECMAScript 2015)에서 클래스 문법이 생기며, 잘 사용하지 않게 되었지만, 일부 레거시 시스템과의 호환성을 유지하기 위해서 사용될 수 있기에 정리했다.

function User(name, age) {
  this.name = name;
  this.age = age;
}
const kitty = new User('kitty', 30);

메서드 (Method)

객체의 속성으로 정의된 함수.
객체 내부에서 정의된 함수로, 객체의 속성으로 동작한다.

const obj = {
  greet: function() {
    console.log('Hello!');
  }
};
obj.greet(); // Hello!

함수의 종류를 크게 나누어 두었지만 각각의 함수의 장단점이 있고, 특징이 있다. 상황에 따라 알맞는 형식의 함수를 사용할 수 있도록 정확히 이해하고 사용하고자 해당 내용을 정리하였다.