JS Essential: 함수

해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.

자바스크립트와 함수

ES6가 세상에 나온 이후, 자바스크립트의 문법은 다양하고 방대해졌습니다.

새롭게 등장한 문법도 많고, 기존에 존재하던 문법의 개선도 이루어졌죠.

그 중심에 있는 개념이 함수라고 볼 수 있습니다. 객체 지향 프로그래밍을 넘어서 함수형 프로그래밍의 패러다임이 광범위하게 전파되었기 때문입니다.

이번 글 이후에, 다양한 형태의 함수와 사용법을 분할해서 알아보고자 합니다. 오늘 글에서는 함수의 개념과 원형에 대해 살펴보고, 디테일한 부분은 다음 글에서 정리하려고 합니다.

함수의 기본 개념

함수는 기본적으로 코드를 묶는 역할을 합니다. 물론 묶기만 하는 것이 아니라 묶인 코드들을 활용할 수 있게끔 해줍니다.

프로그래밍을 할 때 코드란 결국 어떠한 계산이고, 이러한 계산들을 묶어주는 것이 함수라고 할 수 있겠습니다.

이러한 함수는 자바스크립트 내에서 호출이 가능합니다. 호출이 되어야 계산 묶음이 실행되고, 결과값이 나올 것입니다.

기본 문법은 다음과 같습니다.

function function1() {
	return 10;
}

const result = function1();

아주 아주 간단한 function1이라는 함수를 만들어 주었습니다. 그리고 function1의 결과값을 result라는 변수에 담아주었습니다.

당연히 result의 값은 10이 될 것입니다. 예시에서 볼 수 있듯이, 함수를 작성하고 문서 내에서 함수를 호출해주면 비로소 함수의 결과값을 활용할 수 있게 됩니다.

함수 안에는 다양한 인자를 넣을 수도 있습니다.

function function1(x) {
	return x+10;
}

const result = function1(10);

이제 result의 값은 20이 될 것입니다. 이런 식으로 인자를 할당해서 함수의 값을 유동적으로 가져가는 것은 매우 중요한 개념입니다.

익명 함수

아까 예시에서는 function1이라는 이름을 가진 함수를 만들어 보았습니다.

그런데 자바스크립트는 유연한 프로그래밍 언어답게, 굳이 함수명을 설정해주지 않아도 함수를 만들 수 있습니다.

function () {
	return 10;
}

아까와 똑같은 함수인데, 이름이 없습니다. 결과값은 똑같이 10이겠지만요.

이렇게 이름없는 무기명 함수를 만들 수도 있는데, 문제는 이 함수를 호출할 방법이 없다는 것입니다.

말씀드린 것처럼, 함수는 호출을 해주어야 비로소 우리가 활용할 수 있는 반환값을 던져줍니다. 하지만 이름이 없으면 호출이 불가능합니다.

여기서 중요한 개념이 등장하는데, 자바스크립트는 언어 내에서 함수를 하나의 값으로 취급한다는 것입니다.

즉, 이름이 있던 없던 함수는 하나의 값으로 취급받기 때문에, 우리는 함수를 변수에 직접 넣어 줄 수 있습니다. 위의 코드 블럭을 바꿔보겠습니다.

const result = function () {
  return 10;
}

result();

이제 이름이 없지만 함수를 result 변수에 넣어주었기 때문에, 사실상 이 함수를 변수를 통해 호출하는 형태가 되었습니다.

여기서 살펴본 것과 같이, 함수도 하나의 값으로 작용한다는 개념은 매우 중요한 개념이니 꼭 기억해두셔야 하겠습니다.

이렇게 이름이 없는 함수는 익명 함수라고 부르는데, 이러한 익명 함수는 반드시 변수 안에 넣어주어야만 호출할 수 있습니다.

즉시 실행 함수

자바스크립트에서는 함수를 선언하고 즉시 호출하는 형태인 즉시 실행 함수도 만들 수 있습니다.

(function() {
  console.log('즉시 실행 함수')
})();

일단 익명 함수를 만들고, 이를 소괄호로 감싸줍니다. 그리고 뒤에 ()로 바로 호출 구문을 실행합니다.

이런 식으로 함수를 구성하면, 함수 생성 즉시 이 함수가 실행될 것입니다. 다만 이름이 없는 익명 함수니까, 이후에 이 함수를 호출하는 것은 불가능하죠.

따라서 자바스크립트 코드 내에서 단 한번만 실행해야 하는 코드를 작성할 때, 이 즉시 실행 함수를 사용하곤 합니다.

익명 함수의 응용 버전 같은 느낌이라고 볼 수도 있어요!

함수의 인자

다음과 같은 코드를 작성하면 어떤 일이 일어날까요?

function function1(x) {
	return x+10;
}

function1(10, 20);

우리가 최초에 function1에 선언한 인자는 하나 입니다. 그런데 인자로 두 개를 넣으면 어떤 일이 일어날까요?

자바스크립트 함수는 문법만 제대로 지킨다면, 인자를 몇 개를 보내든 무조건 호출에 성공합니다.

위 예시에서, 인자로 2개를 보내든, 3개를 보내든, 100개를 보내든, 혹은 심지어 인자를 안보내든 무조건 에러 없이 호출됩니다.

원래 선언한 것보다 더 많은 인자가 들어오면, 자바스크립트 함수는 초과된 인자는 그냥 무시합니다.

그리고 만약에 인자가 들어오지 않으면 해당 인자의 자리에 자동으로 undefined를 넣어서 함수를 호출하죠.

그래서 자바스크립트 함수는 인자 갯수와 상관없이 언제나 잘 호출됩니다. 물론 인자 숫자에 따라 결과가 바뀔 수는 있겠죠.

그런데 만약, 우리가 받을 인자가 가변적이라면? 함수 내용상 몇 개의 인자를 받을 지 정해진게 아니라면? 어떻게 할까요?

그럴 땐 다음과 같이 arguments를 사용할 수 있습니다.

function sum() {
  let s = 0;
  for(let i = 0; i < arguments.length; i++) {
    s = s + arguments[i];
  }
}

함수 안에서 arguments는 함수가 받을 인자들의 배열을 가리킵니다. 이를 통해 인자를 몇 개 받을 지 정해지지 않아도 반복문을 통해 처리할 수 있는 것이죠.

결과적으로 위 예시는 인자로 받은 숫자들을 전부 더한 값을 반환해 줄 것입니다.

함수의 호출

우리는 앞선 예시들에서 ()의 호출 구문을 통해 함수를 호출해 주었습니다. 하지만 함수를 호출하는 방법에는 두 가지가 더 있습니다.

const result = function () {
  return 10;
}

result();
result.call();
result.apply();

바로 call과 apply 메서드를 통한 방법입니다.

call과 apply는 뒤에 context를 설명하면서 더 자세하게 다뤄볼 생각입니다.

그 전에 함수와 관련지어 간단하게만 설명하자면, call은 함수의 인자를 날 것으로 받고, apply는 배열로 받는다는 것입니다.

function sum() {
  let s = 0;
  for(let i = 0; i < arguments.length; i++) {
    s = s + arguments[i];
  }
}

sum.call(null, 1,2,3,4,5);
sum.apply(null, [1,2,3,4,5]);

위 코드 블럭을 참고하시면 이해가 빠르실 겁니다. 참고로 call을 쓴 코드와 apply를 쓴 코드 모두 결과는 동일합니다.

최초 인자로 초기값을 주고, 그 뒤에는 해당 함수에 넣을 인자들이 들어가는 형식입니다. 다만 call은 인자를 그대로 받는 반면, apply는 인자를 배열 형태로 받습니다.

약간 추론해보자면, 가변적인 인자들을 다룰때는 apply()가 좀 더 유용할 것입니다. 인자의 배열을 변수에 담을 수도 있을 테니까요.

오늘은 함수들의 기본 개념에 대해 간단하게 다뤄보았고, 다음 글부터 자바스크립트의 다양한 함수 형태를 자세하게 다뤄보겠습니다.