📖 [JS] 함수 표현식과 화살표 함수

 

 

 

자바스크립트 함수의 독특한 문법인

함수 표현식과, 화살표 함수에 대해 알아봅시다. 

 

---

 

 

<함수 표현식>

 

function funcA() {
	console.log("funcA");
}

let varA = funcA;
console.log(varA);

varA();

 

 

let varA라는 변수를 만들고 초기값으로 funcA라는 함수를 담아 주도록 하겠습니다.

이때, funcA라는 함수를 호출해서 결괏값을 변수에 담은 것이 아니라

funcA라는 함수 자체를 변수에 담았습니다. 

 

 

 

console에 출력해보면 위 사진과 같은 값이 출력됩니다.

즉, 함수도 숫자나 문자열과 같은 하나의 "값"으로써 취급하기 때문에

 

let varA = funcA처럼 함수 자체를 변수에다가 담아 놓을 수 있습니다.

이렇게 함수를 어떤 변수에 담게 되면, funcA라는 함수를 변수의 이름으로 호출해 줄 수도 있다는 것을 알 수 있습니다.

 

 

function funcA() {
	console.log("funcA");
}

let varA = funcA;
console.log(varA);

varA();

// 함수를 생성하고 바로 변수에 담음
let varB = function funcB() {
	console.log("funcB");
};

varB(); // 호출 가능
funcB() // 호출 불가능

 

 

위 코드 처럼 자바스크립트의 특징을 이용하면

우리가 함수를 굳이 선언하지 않고,

그냥 변수에 담듯이 사용할 수 있습니다.

 

이렇게 되면 funcB라는 함수는 varB라는 변수에 담겨 있기 때문에

varB();라는 이름으로 함수를 호출할 수 있습니다.

 

다만, 한 가지 주의해야할 점이 있습니다.

funcB의 경우에는 선언식이 아닙니다.

그 이유는 선언식이라는 것은 어떤 변수의 값으로써 담기지 않은 상태로 유지가 되어야 합니다.

그래서 위 코드 부분은 그냥 값으로써 함수가 생성된 것이므로, 이 함수의 이름으로는 호출이 불가능합니다.

 

그렇기 때문에  위 코드처럼 함수를 생성하지 않고

함수를 생성할 때 이름을 생략하여도 문제가 되지 않습니다.

그리고 이렇게 이름이 없는 함수를 "익명 함수"라고 합니다.

 

function funcA() {
	console.log("funcA");
}

let varA = funcA;
console.log(varA);

varA();

// 함수를 생성하고 바로 변수에 담음
let varB = function () { // 익명 함수
	console.log("funcB");
};

varB();

 

정리하자면, funcA처럼 함수 선언문을 이용해서 함수를 만들지 않고,

대신에 이 varB처럼 값으로써 함수를 생성하는 방식을

자바스크립트에서는 특별히 "함수 표현식"이라고 부릅니다.

 

이 함수 표현식으로 만든 함수들은 값으로써 취급이 되는 거기 때문에

호이스팅이 되지 않습니다.

 

---

<화살표 함수>

 

화살표 함수라는 건 함수 표현식과 비슷한 개념입니다.

 

화살표 함수라는 건 함수를 이전보다 더 빠르고 간결하게 생성해 줄 수 있도록

도와주는 자바스크립트 문법입니다.

 

// 화살표 함수
let varC = function() {
	return 1;
}
// 여기서 function을 지워버리고
// 소괄호와 중괄호 사이에 화살표를 넣어주시면 됩니다.

let varC = ("매개 변수 사용 가능") => {
	return 1;
}

console.log(varC());