[JavaScript] 익명 함수, 즉시 실행 함수, 다양한 함수의 표현법 알기

안녕하세요! 저번 함수 알아보기 게시물에 이어서 함수를 더 편리하고 간편하게 사용할 수 있는 방법들을 공부해 보겠습니다.

익명함수

익명함수는 말 그대로 이름이 없는 함수입니다.

전 게시글의 함수들은 모두 함수명을 표기하였습니다. 하지만 익명 함수는 이름 없이 선언할 수 있습니다.

function(a, b){
	return a + b;
}

여기서 잠깐! 

익명 함수는 이름이 없는데 어떻게 호출하고 실행할까요??

 

익명함수는 함수 자체가 표현식이기 때문에 함수를 변수에 대입하거나 다른 함수의 매개변수로 사용할 수 있습니다. 

말이 좀 어렵지만 다음 코드를 보면서 차근차근 이해해 봅시다.

 

var sum = function(a, b){
    return a + b;
}

console.log(sum(10, 5));

실행결과 >> 15

위 코드는 함수를 변수에 대입한 예입니다. 

 

마지막으로 익명 함수가 뭔지 알겠는데... 왜 사용하는 거야? 싶은 분들에게 익명함수를 사용하는 이유를 말씀드리자면

익명함수는 메모리 절약을 위해 사용된다라고 이해하시면 좋습니다. 

일반함수는 프로그램 실행 내내 메모리 공간을 차지하고 있습니다. 

하지만 익명함수는 다시 호출이 불가능한 일회성 함수이기 때문에, 사용하는 순간에만 메모리를 차지하여 메모리를 절약할 수 있습니다.

 

즉시 실행 함수

위의 익명 함수처럼 일회성의 함수라면 함수를 정의와 동시에 실행시킬 수 있습니다.

 

즉시 실행 함수의 기본형은 다음과 같습니다. 전의 함수들과 다르게 함수의 마지막에 세미콜론을 붙인다는 것에 유의하세요.

(function(매개변수){
	명령
}(인수));

다음 코드를 통해 즉시 실행 함수를 사용해 봅시다.

var text = prompt("출력할 문장을 입력하세요.");
(function(text){
    console.log(text);
}(text));

 

실행 결과 >> 즉시 실행 함수

 

prompt로 사용자에게 문자를 입력받고, 즉시 실행 함수를 통해 문자를 출력하였습니다.

함수 없이 console.log()를 사용하는 것이 더 간편해 보일 수 있지만...

이번 예제에서는 즉시 실행 함수의 형태를 알고 넘어가는 것에 의의를 두겠습니다

 

 

 

함수의 화살표 표기법

함수의 화살표 표기법을 이용하면 익명 함수를 간결하게 사용할 수 있습니다. 

 

기본적인 익명 함수와 화살표 표기법을 사용한 함수를 비교해 봅시다

//매개변수가 없는 익명함수
var hi = function(){
	console.log("hi");
}

//매개변수가 없는 화살표함수
var hi = () => {
	console.log("hi");
}

//매개변수가 있는 익명함수
var sum = function(x, y){
	return x + y;
}

//매개변수가 있는 화살표함수
var sum = (x, y) => x + y;

기본적으로 화살표 함수는 function 키워드를 사용하지 않으며, 함수의 명령이 짧을 경우 중괄호와 return을 생략해도 됩니다. 화살표 함수를 이용하면 훨씬 더 간결하게 코드를 작성할 수 있습니다.

---

오늘 내용들은 사실, "이걸... 알아야 돼...?" 싶은 내용일 수 있습니다. 하지만 이번 스터디의 주제가 js의 함수와 이벤트 처리인 만큼 빠지기에는 조금 아쉬운 것들이라 과제에 추가했습니다. 

 

두 번째 과제도 매우 쉬운 난이도라 많이 아쉽겠지만, 이건 모두 다음 과제와 다음 시즌 스터디(... 과연 존재할 것인지)를 위한 빌드업이라고 생각해 주세요.

 

다음 과제에서는 이벤트와 이벤트 처리기를 알고 함수를 더 유용하게 사용해 보도록 하겠습니다!