자바스크립트, 함수 리터럴과 함수 정의 방식 알아보기

출퇴근길에 공부하는 자바스크립트1

함수 리터럴과 함수 정의

자바스크립트에서 함수는 매우 중요한 역할을 한다.  함수는 기본적으로 함수 리터럴로 생성될 수 있는데, 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 그리고 함수 몸체로 구성되어있다. 함수 리터럴은 다음과 같은 형태를 지니고 있다.  

function add(x, y) {
   return x + y;
 }

함수 선언문과 함수 표현식

함수를 정의하는 방법에는 여러 가지가 있다. 그중에서 가장 흔한 방법은 함수 선언문과 함수 표현식이다.  

    함수 선언문: 함수 선언문은 함수 이름을 생략할 수 없으며, 호이스팅이 발생한다.

function add(x, y) {
   return x + y;
 }

함수 표현식: 함수 표현식은 이름을 생략할 수 있고, 호이스팅이 발생하지 않는다.

var add = function(x, y) {
   return x + y;
 };

함수 생성 시점과 함수 호이스팅

함수 선언문은 코드가 실행되기 전에 함수 객체를 생성하기 때문에 호이스팅이 발생한다. 즉, 함수 선언문으로 정의된 함수는 선언문 이전에 호출할 수 있다는 것이다. 반면, 함수 표현식은 런타임에 함수 객체를 생성하기 때문에 호이스팅이 발생하지 않는다.

Function 생성자 함수와 화살표 함수  

    Function 생성자 함수: 이 방법은 거의 사용되지 않으며, 보안과 성능 문제가 있을 수 있다.

var add = new Function('x', 'y', 'return x + y');

화살표 함수 (ES6): 간결한 문법을 가지고 있으며, this 바인딩이 일어나지 않는다.

var add = (x, y) => x + y;

함수는 자바스크립트에서 중요한 구성 요소이다. 함수의 정의 방식에 따라 동작이 달라질 수 있으므로, 이러한 차이를 이해하고 올바르게 활용하는 것이 중요하다.