[JavaScript] 함수 표현식, 화살표 함수

반응형

 함수 표현식

 이전 글에서 배웠던 함수를 작성하는 방식은 함수 선언문이라고 한다.

 

https://dailyjiwoong.tistory.com/entry/JavaScript-%ED%95%A8%EC%88%98

[JavaScript] 함수

 

 아래는 함수 표현식으로 작성한 방법이다.

autograph = function(celebrity) {
	console.log(`잘 먹고 갑니다. -${celebrity}-`);
}
autograph('호날두');

 

 함수 선언문과 함수 표현식의 차이는 함수를 호출하는 타이밍이다.

 자바스크립트는 코드를 위에서부터 순차적으로 실행한뒤 결과를 반환하는 인터프리터 언어이다.

 따라서 아래와 같은 코드는 오류가 발생한다.

console.log(a);
a = 2;

 

 함수 선언문은 자바스크립트 내부 알고리즘 때문에 언제든지 호출할 수 있지만, 함수 표현식은 위와 같은 이유로 함수가 생성되야만 호출할 수 있다.

 

화살표 함수

 화살표 함수는 함수를 간결하게 만들어준다.

 아래 코드를 간단하게 만드는 과정을 살펴보자.

a = prompt('숫자를 입력하세요');

square = function(num) {
	return num ** num;
}

result = square(a);
console.log(`${a}의 ${a}제곱은 ${result}입니다.`);

 

 위 코드를 => (화살표) 를 사용해 간결하게 만든다.

a = prompt('숫자를 입력하세요');

square = (num) => {
	return num ** num;
}

result = square(a);
console.log(`${a}의 ${a}제곱은 ${result}입니다.`);

 

 function이 사라지고 중괄호 앞에 화살표가 생겼다.

 이전과 크게 다르지는 않다.

 이때, 함수 본문이 한 줄이고 return문이 있다면 중괄호 대신 괄호를 사용할 수 있다.

a = prompt('숫자를 입력하세요');

square = (num) => (num ** num);

result = square(a);
console.log(`${a}의 ${a}제곱은 ${result}입니다.`);

 

 여기서 return문이 한 줄이라면 괄호도 생략할 수 있다.

a = prompt('숫자를 입력하세요');

square = (num) => num ** num;

result = square(a);
console.log(`${a}의 ${a}제곱은 ${result}입니다.`);

 

 인수가 하나라면, 괄호를 생략할 수 있다.

a = prompt('숫자를 입력하세요');

square = num => num ** num;

result = square(a);
console.log(`${a}의 ${a}제곱은 ${result}입니다.`);

 

주의사항

 - 인수가 없다면, 괄호를 생략할 수 없다.

 - return문이 존재하더라도, 본문의 코드가 여러 줄이라면 중괄호를 사용한다.