함수 용어 정리 (함수선언문, 함수리터럴, 함수표현식, 화살표함수, 익명함수 등 등)

자바스크립트 함수 파트에서는 다양한 용어가 등장한다.

선언문, 리터럴, 표현식, 익명, 기명 등 등

명확하게 이해하지 않고 넘어가면 추 후에 나올 개념들에 대한 이해도 더뎌질 수 있기 때문에 정리해보겠다.

 

---

 

우선 함수란, 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이라고 한다. 

프로그램 내에서 반복되는 작업이 있으면 이를 함수화하여 재사용 및 수정 등을 보다 편리할 수 있게하는 프로그래밍 기법을 말한다.

 

자바스크립트에서 함수를 선언하는 다양한 방식이 있는데,

가장 기본적인 방식은 함수선언문이다.

function add(a, b){return a+b;} //함수선언문으로 함수를 선언

위와 같이 function 키워드, 함수 이름, (매개변수), {동작}으로 함수를 선언하는 방식을 함수선언문이라고 한다.

 

함수선언문 방식으로 함수를 선언하게 되면,

자바스크립트 엔진은 암묵적으로 함수 이름과 같은 add라는 식별자로 변수를 만들어 함수를 해당 변수에 할당한다.

함수를 변수에 할당할 수 있다는 것은 함수가 값이란 것이다.

 

여기서 자바스크립트가 가진 독특한 특징이 나타난다.

 

자바스크립트에서 함수 = 값이다.

 

자바스크립트에서 함수는 값이기 때문에 리터럴로 표현하여 생성할 수 있다.

리터럴은 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법을 말하는데,

간단히 말해 값으로 평가될 수 있는 함수를 함수 리터럴이라고 한다.

 

함수 리터럴에는 두가지 종류가 있다.

 

1. 익명함수리터럴 - 함수 이름이 없는 것

2. 기명함수리터럴 - 함수 이름이 있는 것

const add = function (a, b){return a+b;} //익명함수리터럴로 함수를 선언한 함수표현식
const add = function add2(a, b){return a+b;} //기명(add2)함수리터럴로 함수를 선언한 함수표현식

위와 같이 함수리터럴을 사용하여 변수에 할당해서 함수를 선언하는 것을 함수표현식이라고 한다.

 

근데 요상한 점이 있다.....

기명함수리터럴과 앞서 말한 함수선언문의 형태가 똑같다는 것이다....

const add = function add2(a, b){return a+b;} //기명(add2)함수리터럴로 함수를 선언한 함수표현식
function add2(a, b){return a+b;} // 함수선언문...?

자바스크립트는 문맥에 따라 해당 문을 함수리터럴인지, 함수선언문인지 판단한다.

1번 코드는 변수에 할당하기 때문에 함수리터럴로 평가하는 것이고,

2번 코드는 변수 없이 혼자 사용되기 때문에 함수선언문으로 평가하는 것이다.

 

또한 함수의 이름은 외부에서 호출할 수 없는 특징이 있다.

따라서 1번 코드에서 add2함수를 호출하기 위해서는 add2함수가 할당된 add 변수로 호출해야한다.

그렇기 때문에 함수표현식을 사용하게 되면, 일반적으로 익명함수리터럴을 사용하게 된다.

sayHello1(); // 정상 실행
sayHello2(); // Uncaught ReferenceError: sayHello2 is not defined

function sayHello1(){console.log("Hello");} //함수선언문
const sayHello2 = function(){console.log("Hello")}; //익명함수리터럴을 사용한 함수표현식

함수선언문과 함수표현식은 함수를 선언한다는 것은 동일하지만, 다른 특징을 가지고 있다.

바로 함수호이스팅이다.

호이스팅이란 코드가 실행되기 전에 함수를 미리 할당한다는 것을 뜻한다.

함수선언문은 함수호이스팅이 되기 때문에 선언 전에 사용할 수 있고,

함수표현식은 값이 할당되기 이전에는 해당 함수를 사용할 수 없다.

 

함수선언문과 함수표현식 말고도 함수를 만들 수 있는 방법이 더 있다.

function add(a,b){
	return a+b;
} //일반적인 함수선언문

const add = (a, b) => a+b //화살표함수

 

화살표함수는 한마디로 축약형이라고 할 수 있다.

비교적 간단하게 함수를 표현하게 해주는 문법인데, 

일반적인 함수선언문이나 함수표현식으로 생성한 함수랑 조금은 다른 특징을 가지고 있다.

이는 나중에 자세히 알아보도록 하자...

const add = new Function('x', 'y', 'return x + y');
console.log(add(2, 5));   // 7

위 코드는 자바스크립트가 기본제공하는 함수인 Function 생성자 함수에

매개변수 목록과 함수 동작을 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.

위 형태의 함수 선언은 잘활용하지 않는다고 하니 그만 알아보겠따....

 

---

 

개념 정리가 참 힘들다. 표현식, 리터럴, 선언문 어쩌구저쩌구...

복잡해서 머리가 아팠는데 조금 정리하고 나니까 이해가 되는 것 같기도 하고..아닌 것 같기도 하고...

암암 그래도 아직 정리 못한게 산더미인데 벌써부터 힘들면 안되지, 힘내자!