[자바스크립트 문법] 함수 표현식과 선언문, 화살표 함수 차이점

함수의 정의와 호출

함수는 기능을 만드는 것이다. 입력인 parameter(매개변수)와 결과값(return)이 있는 기능이다. 함수를 사용하려면 호출도 해주어야 한다.

 이때, 아래 코드처럼 ()괄호를 바로 사용하면 DOM이 load되자마자 바로 실행된다.

// 함수 선언
function sayHello(){
	console.log("Hello");
}

// 함수 호출
sayHello();

// 출력
Hello

 

함수의 표현식(익명 함수)

함수를 선언하는 방법에는 3가지가 있다. 표현식, 선언문, 화살표 함수가 있는데, 모두 필요에 따라서 또는 코드 스타일마다 사용여부를 결정하게 된다. 다음은 함수의 표현식이라고 부른다. 변수에 함수를 할당하는 형태이다. 익명함수의 경우, hoisting의 영향을 받지 않는다.

- 여기서 익명함수의 주의점은 '순서'이다. 익명 함수의 선언부가 호출된 위치보다 위에 있어야 한다. 즉, 익명함수를 먼저 작성한 후 호출은 나중에 작성해야 한다는 말이다. 

// 함수 표현식
const sum = function(){
	let result = 1+1;
    return result;
}

// 함수 호출은 나중에
sum();

 

- 익명함수를 쓰는 이유는 '일회성'에 있다. 변수에 함수 호출의 결과 값을 넣어서 다른 곳에 사용할 수 있다. 이는 메모리 관리 측면에서 효과적이다. 함수의 선언문은 언제든 호출될 수 있기에 항상 메모리를 차지하지만, 익명함수는 보통 '한 번만' 사용하기 때문에 불필요한 메모리를 차지하지 않고 아낄 수 있다.

함수의 선언문

함수의 표현식과 비슷하지만 변수에 할당하지 않고 선언하는 방식이다. 함수 선언문은 변수 var처럼 hoisting의 영향을 받게 된다. 함수 전체가 맨 위로 올라가므로 함수를 호출하는 위치에 상관없이 사용될 수 있다. 그래서 함수를 먼저 호출한 뒤, 선언하는 것이 가능하다. 이렇게 함수 선언문으로 사용하게되면 예측하기 어려운 코드가 동작하게 되므로 주의해야 한다. 

// 함수 선언문
function sum(){
	let result = 1 + 1;
	return result;
}

 

- 일반 함수 '재사용' 할 일이 있을 때 사용한다. 전역적이기 때문에 다 호이스팅된다. 함수의 선언과 호출 위치간에 연관관계가 없다.

화살표 함수

화살표 함수는 function 키워드 없이, 함수의 표현식처럼 변수명에 할당하는 형태이다. 화살표 함수는 함수 선언문과 다르게 hoisting의 영향을 받지 않는다. 

// 화살표 함수
const sum = () => {
	let result = 1+1;
    return result;
}

 

함수의 return

return 키워드 역할은 첫번째, 함수 내에서 결과 값을 돌려주기 위해 사용한다. 다음 코드처럼 result를 함수 내에서 돌려주고, 해당 반환 값을 다시 변수에 할당해 줄 수 있다.

const sum = function(){
	let result = 1+1;
    return result;
}

let result = sum();
console.log(result); // 출력 2

 

두번째는 해당 함수를 종료시켜주는 역할을 한다. 그래서 그 다음 구문은 실행하지 않는다.

const sum = function(){
	let result = 1+1;
    return result;
    console.log("return 다음은 실행되지 않습니다.");
}

let result = sum();
console.log(result); // 출력 2