[자바스크립트] Function - 개념

Function (함수)

프로그래밍에서 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 함수라고 한다. 이러한 함수를 이용하여 반복적으로 수행되는 코드 덩어리를 하나의 함수로서 정의하고 해당 작업이 필요할 때마다 호출하여 사용한다.

 

자바스크립트에서는 이러한 함수도 하나의 데이터 타입(typeof function() {} === function)으로서 다룬다. 그렇기 때문에 함수를 변수에 대입하거나, 객체의 프로퍼티의 value로서 집어 넣어주기도 하고, 매개변수로도 넘겨줄 수 있는 것이다.

 

 

함수의 정의

자바스크립트에서 함수의 정의는 function 키워드를 통해 선언하며, 구성요소로는 아래와 같다.

• 함수의 이름
• 소괄호 안에 쉼표로 구분되는 함수의 매개변수(parameter)
• 중괄호로 둘러싸인 실행문

위의 구성요소를 이용하여, 아래와 같이 함수를 정의한다.

// 함수 정의 형식
// 매개변수가 없더라도 소괄호는 필수 표기
function [함수명] (매개변수1, 매개변수2, ...)
{
    호출되었을 때 실행되어지는 실행문
}

 

함수의 이름은 함수를 구별하는 식별자(identifier)이다. 매개변수는 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다. 매개변수를 통해 함수가 함수 외부의 값을 이용해 특정 작업을 진행할 수 있게 되는 것이다.

 

 

함수의 호출

함수의 정의는 단순히 어떠한 작업를 진행하는 코드의 덩어리에게 이름을 붙여준 것일 뿐이다. 이를 사용하여 함수의 작업을 수행하도록 하기 위해서는 호출이라는 과정이 필요하다.

 

함수의 호출 형식은 해당 함수의 이름과 그 함수가 필요로 하는 매개변수의 값들을 인수로 넘겨주면 된다.

//함수의 호출
함수이름(Argument1, Argument2, ...)

 

두 수를 더하는 함수의 예제는 다음과 같다.

//함수의 정의
//목적 : 넘겨받은 매개변수를 더하여 console에 출력
//이름 : addNum
//매개변수 : num1, num2
function addNum(num1, num2) {
    console.log(num1 + num2);
}


//함수의 호출
//필요 매개변수 : num1, num2
//넘겨줄 인수 : 1, 3
addNum(1, 3); // 4

//하나만 넘겨주면?
//에러가 발생 X
addNum(1); //num2 = undefined => result : NaN (Not a Number)

//여러개를 넘겨주면?
//필요 파라미터 수를 초과하는 인수를 넘겨받으면,
//초과한 인수는 무시!!
addNum(1, 3, 4, 5); // 1, 3 => 4

 

 

Return (반환문)

함수가 호출되어 함수 내 코드 실행이 끝나면, 호출한 쪽으로 실행이 되돌아온다. 이를 return 한다고 하는데, 기본적으로 함수의 실행이 끝나면 자동으로 리턴을 한다.

 

하지만 return 키워드를 통해서 명시적으로 리턴을 할 수 도 있고, 이 때에 어떤 값을 함수를 호출한 쪽에 돌려줄 수도 있다. 이 값을 함수의 반환값이라고 한다.

// 더한 값을 반환
function addNum(num1, num2) {
    return num1 + num2;
}


// 함수가 반환값을 호출한쪽(caller)에게 돌려줌
console.log(addNum(1, 3)); //4

 

또한, 함수는 return문을 만나면, 그 즉시 반환값을 리턴하고 해당 함수의 작업을 종료한다.

// 더한 값을 반환
// 받은 인수가 undefined면 '잘못된 입력값' 리턴
function addNum(num1, num2) {
    if(num1 === undefined || num2 === undefined) {
        return '잘못된 입력값';
    }
    return num1 + num2;
}

console.log(addNum(1, 3)); //4
console.log(addNum(1)); //잘못된 입력값

 

 

함수는 데이터이다

자바스크립트는 함수를 "데이터"로 취급한다.(<= 매우 중요한 개념) 그렇기 때문에 변수의 대입을 할 수도, 객체의 프로퍼티의 값으로서도, 함수에게 넘겨주는 인수로서도 동작할 수 있다.

//Function is Data
console.log(typeof function() {}); //function

//변수에 대입
const add = function addNum(num1, num2) {
    return num1 + num2;
}

console.log(add(1, 4)); //5


//함수의 이름은 생략 가능!!
// => 익명함수
const sub = function(num1, num2) {
    return num1 - num2;
}

console.log(sub(4, 1)); //3


//객체의 프로퍼티로 사용
const obj = {
    add : function (a, b) { return a + b };
    sub : function (a, b) { return a - b };
};

console.log(abj.add(4, 1)); //5
console.log(abj.sub(4, 1)); //3


//함수의 인수로서 사용
function paraFunc(para, num1, num2) {
    console.log(para(num1, num2));
}

const add = function (num1, num2) { return num1 + num2; };

//para에 add함수 데이터(function (num1, num2) { return num1 + num2; })가 대입
//para = function (num1, num2) { return num1 + num2; } 와 동일
paraFunc(add, 1, 4); //5

 

 

함수의 호이스팅 (Hoisting)

자바스크립트에서는 해당 block의 코드를 동작 시키기 전에 block 내의 선언된 변수를 생성하고 초기화한다. 이 과정을 코드 실행 처음으로 끌어올린다고 하여 호이스팅이라고 한다.

 

함수 또한 데이터로 동작하기 때문에, 호이스팅이 과정이 일어난다. 그렇기 때문에 같은 블록 내에 있다면 함수의 선언이 어디에 위치하든 해당 함수를 사용할 수 있게 된다.

//함수의 호이스팅
//아직 선언되지 않은 함수를 사용??
//자바스크립트의 인터프리터가 함수의 선언부를 먼저 실행시키기 때문에,
//함수 선언 전에 사용을 할 수 있다!! (사실상, 함수 선언 후에 동작함)
addNum(1, 4); //5

function addNum(num1, num2) {
    console.log(num1 + num2);
}

 

하지만, 함수의 호이스팅은 함수의 선언에서만 발생한다. 아래의 예제를 살펴보자.

// 함수 표현식에서는 hoisting 불가
addNum(1, 4); //ReferenceError : Cannot access 'addNum' before initialization

const addNum = function (num1, num2) {
    console.log(num1 + num2);
}

함수 표현식은 함수 데이터를 변수에 할당해주는 것이기 때문에 자바스크립트의 인터프리터는 addNum이라는 변수를 호이스팅하여 undefined값을 주게 된다. 그러한 상태에서 (1, 4)를 통해 접근하려고 하기 때문에 초기화 하기 전에 접근할 수 없다는 에러를 띄우게 되는 것이다.