javaScript-함수 리터럴(feat.익명 함수, 호이스팅)

함수 리터럴을 알아보기 전에 알아야 할 것이 있다.

// 함수 선언
function greet(name) {
    return "Hi, " + name + "!";
}

console.log(greet("Dragon")); // "Hi, Dragon!"

우선, 일반적인 함수 선언이다.

 

function 키워드를 사용하여 함수에 이름을 붙여서 선언을 한다.

참고로 호이스팅의 영향을 받기 때문에 함수가 정의 되기 전에 호출해도 정상적으로 동작한다.

 

---

 

다음은 함수 리터럴이다.

 

// 함수 선언
var greet = function(name) {
	return "Hi, " + name + "!"; 
}

console.log(greet("Dragon")); // "Hi, Dragon!"

지금 선언한 함수 리터럴은 이름이 없는 "익명 함수"로 정의되고, 

 

변수에 할당되거나 다른 함수에 인수로 전달될 때 이름이 없다. (이름이 없기 때문이다.)

 

필요하면 함수 이름을 지정할 수 있지만 내부에서만 사용된다.

// 함수 선언
var greet = function existenceName(name) {
	return "Hi, " + name + "!"; 
}

console.log(greet("Dragon")); // "Hi, Dragon!"

 

이번에는 함수 리터럴을 이용한 "이름이 있는 함수"이다.

 

 

 

---

 

 

 

또한 함수 리터럴은 호이스팅되지 않는다.

 

 

정확히 말하자면,

 

변수는 호이스팅이 되어서 선언은 되지만 

함수 자체의 정의는 호이스팅되지 않는다.

 

 

 

? 뭔 말임) 예제로 보면 바로 안다.

 

 

함수 리터럴로 선언한 익명 함수이다.

변수를 콘솔로 찍어보니, undefined가 나온다.

 

즉, 변수가 호이스팅이 되었지만 함수는 정의되기 전이라는 소리다.

 

다음으로 greet함수를 호출해보니 greet is not a function, 함수가 아니라고 한다.

 

 

요약하면,

 

변수는 호이스팅 ok

함수 자체 정의는 호이스팅 no

 

---

 

그래서 함수 리터럴이랑 익명 함수가 같음 ?

 

No. 

 

함수 리터럴은 자바스크립트에서 함수를 정의하는 "표현식"을 의미한다.

함수 정의를 변수에 할당하거나 다른 함수에 인수로 전달할 수 있다.

 

함수 리터럴 : 함수를 정의하는 표현식이다. 익명 함수와 이름이 있는 함수 둘 다 정의할 수 있다.

익명 함수 : 이녀석은 주로 함수 리터럴을 통해 정의된다.

 

 

그럼 익명 함수는 함수 리터럴이라는 함수 표현식을 이용하여 정의된 함수구나 !

 

---

 

그래서 함수 선언문, 함수 표현식 둘 중에 뭘 써야함 ?

 

 

특정한 이름을 통해 함수를 참조할 필요가 있다면 함수 선언문을, 

함수를 다른 함수에 인자로 전달하거나 변수에 할당해야 할 때는 함수 리터럴을 사용하는 것이 일반적이다.

함수 리터럴을 이용한 함수 표현식은 함수를 값처럼 다루어 더 유연한 프로그래밍을 가능하게 한다. ex) callback

함수 선언문은 코드 구조를 명확하게 하고, 호이스팅을 통해 어디서든 함수를 호출할 수 있는 게 장점이다.

 

각자의 코딩 스타일, 코드 가독성과 유지 관리를 고려하면서 선택하자.