자바스크립트를 수월하게 사용하려면 함수(Function)을 아는 것이 중요합니다. 함수란 무엇일까요?

함수란?

수학에서는 input을 받아 output을 내보내는 과정을 함수라고 합니다. 더하기 라는 함수를 정의했다고 가정해봅시다.

이렇게 동작하죠. 프로그래밍에서도 똑같습니다.

function add(x, y) { return x + y; } add(3, 5) // 8

왜 함수를 사용할까?

무언가를 더하고 싶다면 더할 개수만큼 더하기를 반복하면 되는 건 아닐까요?

3 + 5 + 8 + ...

하지만 프로그래머들은 이런 과정을 반복하고 싶지 않아합니다. 물론 몇 번이나 반복해야하는지 모를 때도 있구요.

따라서 계속 반복되는 동일한 작업이 있을 경우 함수를 정의해 사용하는 것이 편리합니다.

만약 1+2+3+4+ ... 가 n번째 수까지 이어진다면 사람은 그걸 다 더하고 있어야겠죠. 수열의 합 공식 같은 경우는 배제하고 봅시다. 하지만 n까지의 수를 다 더하는 함수를 작성하면 n이 어떤 수가 되든 상관 없고, 프로그램이 다 계산해주는 편리함을 누릴 수 있습니다.

뿐만 아니라 1+2+3+4+ ... + n 번이 된다면 가독성도 좋지 않습니다. 누구나 보고 잘 읽을 수 있는 코드를 작성하기 위해서도 함수는 반드시 필요합니다.

함수 작성하기

함수는 여러 형태로 작성할 수 있는 객체입니다. 다만 일반 객체와는 구별되는 호출할 수 있는 객체입니다.

작성할 수 있는 형태는 다음과 같습니다.

• 함수 선언문(function declaration)
• 함수 표현식(function expression)
• Function 생성자 함수
• 화살표 함수 (ES6) (arrow function)

이 밖에도 약식 메소드 정의나 제너레이터 함수가 있지만 이후에 살펴보도록 하겠습니다.

함수의 형태

함수를 작성할 때의 구성요소를 알아보겠습니다.

• 함수명
  • 식별자 명명 규칙을 준수해야 합니다.
  • 함수 이름은 생략 가능합니다. (함수명이 있는 함수는 기명함수, 없는 함수는 익명함수)
• 매개변수
  • 함수 내부로 전달할 변수입니다.
  • 0개 이상을 작성할 수 있습니다.
  • 순서가 중요합니다. (첫 번째 매개변수를 비우고 두 번째 매개변수를 전달할 수 없습니다.)
  • 식별자 명명 규칙을 준수해야 합니다.
• 함수몸통(body)
  • 함수를 호출했을 때 동작할 문들을 작성합니다.

가장 기본적인 형태인 함수 선언문부터 알아보겠습니다.

함수 선언문

function add(x, y) { return x + y }

위와 같은 형태를 띄고 있습니다.

function 키워드로 함수를 작성한다고 명시하고, 함수명을 입력합니다. 함수 선언문에서는 함수의 이름을 생략할 수 없습니다.

return

함수 선언문은 return이 있는 형태와 없는 형태로 구분할 수 있습니다.

먼저 return은 키워드 뜻 그대로 돌려준다는 의미입니다. 자바스크립트의 함수는 기본적으로 리턴 값을 명시하지 않으면 undefined 를 리턴합니다.

function add(x, y) { return x + y } // 함수의 정보 확인 가능 console.log(add) // ƒ add(x, y) { return x+y } console.dir(add) // arguments, caller, length, name, prototype 확인 가능 // 값으로 평가 console.log(add(1, 2)) // 3

add 함수에 인자(arguments)를 넣으니 return 된 값이 있음을 확인할 수 있습니다.

분명 함수를 호출했는데, 값이 콘솔에 기록됩니다. 이것은 자바스크립트 함수의 특징인데요.
자바스크립트에서 함수는 값의 성질을 갖는 객체입니다.

return이 없는 함수 선언문도 살펴보겠습니다.

let result = 0; function addOnResult(x, y) { result = x + y; } console.log(addOnResult(1, 2)) // undefined console.log(result) // 3

return이 없고 외부의 변수를 컨트롤할 경우에는 함수는 undefined를 되돌려줌을 볼 수 있습니다.

함수 표현식

앞서 살펴본 함수 선언문에서 함수는 문이기 때문에 변수에 할당할 수 없다고 생각할 수 있습니다. 하지만 함수는 또한 값처럼 사용할 수 있는 객체 이기 때문에 변수에 할당해 사용할 수도 있습니다.

const add = function(x, y) { return x + y }

이렇게 표현식으로 작성하게 되면 함수명으로 접근해 함수를 호출하는 것이 아니라, 변수에 변수와 이름이 같은 함수를 하나 생성한 것으로 바라봅니다.

const add는 곧 function add(x, y) {...}를 할당한 것과 같은 것이죠.

그렇기에 함수 표현식을 작성할 때 이름이 있는 함수(기명함수)로 작성하지 않고 함수명을 생략하는 것이 일반적입니다.

다음과 같은 사례가 발생할 수 있기 때문입니다.

const foo = function bar(x) { return x + 1; } console.log(foo(5)) // 6 console.log(bar(5)) // ReferenceError: bar is not defined // foo 내부에서만 접근할 수 있는 이름. console.dir(foo) // name: "bar", length: 1, arguments: null, caller: null

함수 선언문과 함수 표현식의 차이

함수 선언문으로 정의한 함수는 호이스팅됩니다. 반면 표현식은 불가능합니다. 각각의 생성 시점이 다르기 때문입니다.

표현식은 변수 호이스팅으로 취급됩니다.

생성자 함수

생성자 함수로 함수를 생성하는 것은 일반적이지 않은 방식입니다. 위에서 살펴본 함수 선언문, 함수 표현식으로 관리되는 함수와는 다른 동작 방식을 가지고, 클로저를 지원하지 않습니다.

const add = new Function('x', 'y', 'return x+y');

형태만 보고 넘어갑시다.

화살표 함수(ES6)

ES6 문법부터 도입된 화살표 함수입니다. function 키워드 대신 => 화살표를 사용해 축약된 표현으로 함수를 작성할 수 있습니다.

const add = (x, y) => x + y; console.dir(add) // length: 2, name: "add"

다른 함수보다 좀더 간략하게 보여지나요?

화살표 함수는 위 코드에서 볼 수 있듯 항상 익명함수로 작성합니다.

다른 함수 정의 방법과 다른 점은 console.dir로 확인했을 때 prototype과 arguments 가 없는 것을 확인할 수 있습니다.

화살표 함수는 추후에 어떤 방식으로 작동하는지 보다 자세히 알아보겠습니다.

다음 글에서는 스코프에 대해 알아보겠습니다.

◾ 얕은 복사와 깊은 복사 👈 이전 글 보기