네 번째 Deno(JavaScript) 기초 강의에서는 함수에 대해 설명하겠습니다.

개요

프로그래밍에서의 함수는 특정한 기능을 수행하기 위한 코드의 집합으로, 함수를 활용하면 반복되는 코드를 줄일 수 있습니다. 함수의 기본 기능은 특정한 값을 입력받고 함수에 있는 코드에 의하여 새로운 값을 반환하는 것입니다. 프로그래밍에서의 함수는 수학에서의 함수와 완전히 동일하진 않습니다.


함수의 기본 형태

일반적으로 프로그래밍에서의 함수는 함수가 반환할 값의 자료형, 함수의 이름, 함수에서 받을 매개변수와 각 매개변수의 자료형, 함수가 수행할 코드로 구성됩니다. JavaScript 또한 다른 프로그래밍 언어에서의 함수의 구성과 일치하지만 자료형을 선언하진 않습니다. JavaScript에서의 일반 함수의 기본 형태는 다음과 같습니다.

// 함수 선언
function sampleFunctionName(argument) {
    console.log('MESSAGE: ' + argument);
    
    return true;
}

// 함수 사용
sampleFunctionName('Hello world!');
// 결과: 'MESSAGE: Hello world!'

String을 결합할 때는 String 사이에 +를 삽입할 수 있습니다.

위 기본 형태의 이해를 돕기 위해 각 요소를 정리하였습니다.

예제

다음 getVolume(width, depth, height) 함수는 직육면체의 가로, 세로, 높이를 입력받고 가로, 세로, 높이를 각각 곱한 값인 부피를 반환합니다. 함수를 선언한 다음, console.log()를 이용하여 함수를 실행한 결과를 즉시 출력합니다.

// 함수 선언
function getVolume(width, depth, height) {
    return width * depth * height;
}

// 함수 사용
console.log(getVolume(3, 4, 2));
// 결과: 24

함수에서의 변수 이용

함수 안에 있는 코드는 함수 바깥에 있는 변수를 이용할 수도 있고, 함수 안에서 변수를 생성하여 이용할 수 있습니다. 하지만 함수 안에서 생성한 변수는 함수의 바깥에서 재사용할 수 없습니다. 함수 안에서 생성한 변수를 함수의 바깥에서 사용하고자 한다면 함수 바깥에서 생성된 변수에 값을 입력하도록 코드를 구성해야 합니다.

기초 강의 #2에서는 변수는 메모리에 특정한 값을 저장하는데 이용된다고 설명드린 적이 있습니다. 함수 내에서 생성된 변수는 함수가 종료되는 것과 동시에 메모리에서 삭제되기 때문에 함수 안에서 생성한 변수를 함수의 바깥에서 사용할 수 없습니다.

다음은 함수 바깥에서 생성된 변수에 값을 입력하는 예제입니다. 함수 바깥에서 생성된 변수에는 함수 안에 있는 코드가 접근할 수 있다는 사실을 보여줍니다.

let myName = 'not set';

function setMyName(newName) {
    myName = newName;
}

console.log(myName);
// not set

setMyName('홍길동');

console.log(myName);
// 홍길동

위 예제의 요약입니다.

  1. myName 변수에 not set이라는 String 값을 미리 선언합니다.
  2. setMyName(newName) 함수를 newName을 입력받고 myName에 입력된 newName을 저장하는 기능을 수행하도록 선언합니다.
  3. console.log()를 이용하여 myName을 출력하지만 아직 이름이 변경되지 않은 상태이므로 not set이 출력됩니다.
  4. setMyName 함수에 홍길동을 인자로 제출하여 이름을 변경합니다.
  5. console.log()를 이용하여 myName을 출력합니다. 이때 4번에서 변경된 이름인 홍길동이 출력됩니다.

다음 예제는 함수 안에서 생성된 변수를 함수 바깥에 있는 코드가 접근 시도하는 예제입니다. 함수 안에서 생성된 변수를 함수 바깥에 있는 코드는 접근할 수 없다는 사실을 보여줍니다.

function setMyAge(newAge) {
    let myAge = newAge;
}

console.log(myAge);
// undefined(선언되지 않음)

setMyAge(100);

console.log(myAge);
// undefined(선언되지 않음)

위 예제의 요약입니다.

  1. setMyAge 함수를 myAge를 입력받고 myAge 변수를 생성하여 입력된 newAge를 저장하는 기능을 수행하도록 선언합니다.
  2. console.log()를 이용하여 myAge를 출력하지만 위에서 선언된 myAge가 없기 때문에 undefined가 출력됩니다.
  3. setMyAge 함수에 100을 인자로 제출하여 나이를 변경합니다.
  4. console.log()를 이용하여 myAge를 출력하지만 위에서 선언된 myAge가 없고 함수 안에서 선언된 변수는 이용할 수 없기 때문에 undefined가 출력됩니다.

함수를 변수에 입력하기

JavaScript에서는 함수 자체, 함수의 실행 결과 모두 변수에 입력할 수 있습니다. 변수에 함수를 입력할 때 함수 이름 뒤에 ()를 넣지 않으면 함수 자체를, ()를 넣으면 함수의 실행 결과를 저장할 수 있습니다. 예제를 통해 살펴보겠습니다.

함수 자체를 입력하기

다음 예제는 생성된 함수 자체를 변수에 입력하고 사용하는 것을 설명합니다.

function sampleFunction(name) {
    console.log('Hello! ' + name);
}

const duplicatedFunction = sampleFunction;

duplicatedFunction('홍길동');
// Hello! 홍길동

저장한 함수를 변경할 필요가 없으므로 const(상수)를 사용했습니다.

위 예제의 요약합니다.

  1. sampleFunction 함수를 name을 입력받고 'Hello! '와 입력된 name을 결합한 다음 console.log()를 이용하여 출력하는 기능을 수행하도록 구성합니다.
  2. duplicatedFunction 상수를 생성하고 sampleFunction 함수를 입력합니다.
  3. duplicatedFunction 상수에 저장된 함수에 홍길동을 입력하여 Hello! 홍길동이라는 결과를 출력받습니다.

함수의 실행 결과를 저장하기

다음 예제는 생성된 함수의 실행 결과를 저장하는 것을 설명합니다.

function sampleFunction(name) {
    return 'Hello! ' + name;
}

const result = sampleFunction('홍길동');

console.log(result);

함수의 실행 결과는 return으로 출력할 수 있습니다.

위 예제의 요약입니다.

  1. sampleFunction 함수를 name을 입력받고 'Hello! '와 입력된 name을 결합한 다음 return으로 반환하는 기능을 수행하도록 구성합니다.
  2. result 상수에 sampleFunction홍길동을 인자로 넣었을 때의 결과 값인 Hello! 홍길동을 저장합니다.
  3. console.log()를 이용하여 result 상수에 저장된 Hello! 홍길동을 출력합니다.

이렇게도 저장할 수 있다

함수 자체를 변수에 저장하는 것을 보신 분이라면 다음과 같이 함수를 저장하는 것도 가능할지 궁금하실 것 같습니다. 결론부터 말씀드리자면 가능합니다. 이름없는 함수를 생성하고 sampleFunction과 같은 변수에 그대로 입력하면 함수 자체가 저장된다는 원리를 이용할 수 있습니다. 참고만 하시기 바랍니다.

const sampleFunction = function(name) {
    return 'Hello! ' + name;
}

다음 강의 예고

다음 강의에서는 JavaScript ES6에서의 객체 지향 설계에 관하여 간단히 알아보겠습니다.

질문이 있으시면 아래 댓글을 이용해 주세요. 감사합니다.