[JavaScript] 자바스크립트 함수(function) (1) : 정의, 유효범위, 호이스팅, arguments, 디폴트 매개변수

728x90

자바스크립트 함수

- 자바스크립트에서는 함수도 하나의 타입(datatype)이다

- 다른 함수 내에 중첩되어 정의될 수 있다

함수의 정의

- function 키워드로 시작하며 함수이름, 매개변수, 실행문으로 구성된다

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

함수의 호출

- 정의된 함수는 프로그램 내에서 호출되어야 비로소 실행된다

- (예) 함수의 정의 및 호출

// 함수의 정의
function addNum(x, y) {
    return x + y;
}

// 함수의 호출
var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달합니다.
                        // 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입합니다.

- 값으로서 사용할 수도 있어, 함수가 변수에 대입되거나 다른 함수의 인수로 전달될 수 있다

함수의 유효 범위 (functions scope)

- 자바스크립트에서 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근 가능하다

- 전역 함수는 모든 전역 변수와 전역 함수에 접근 가능

- 다른 함수 내 정의된 내부함수는 부모 함수에서 정의된 변수 및 부모 함수가 접근할 수 있는 변수까지도 접근 가능

var x = 10, y = 20;		// 전역 변수

function sub() {		// 전역 함수
    return x - y;		// 전역 변수인 x, y에 접근함.
}

document.write(sub() + "<br>");

function parentFunc() {	// 전역 함수
    var x = 1, y = 2; // 전역 변수와 같은 이름으로 선언하여 전역 변수의 범위를 제한함.
    function add() {  // add() 함수는 내부 함수로 선언됨.
        return x + y; // 전역 변수가 아닌 지역 변수 x, y에 접근함.
    }
    return add();
}

document.write(parentFunc());

함수 호이스팅 (hoisting)

- 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다

- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선안하는 것을 말한다

- (예)

var globalNum = 10;     // globalNum을 전역 변수로 선언함.
function printNum() {
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // (1)
    var globalNum = 20; // globalNum을 지역 변수로 선언함. // (2)
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();

- ❌ (1)에서 globalNum이 전역 변수를 가리킨다 ❌

- 자바스크립트 내부에서는 함수 호이스팅에 의해 다음처럼 코드가 변경되어 처리된다

var globalNum = 10;
function printNum() {
    var globalNum; // 함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동됨.
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");	// (1)
    globalNum = 20;
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");	// (2)
}
printNum();

- (1) 시점에서는 지역 변수 globalNum가 선언만 되고 초기화되지 않은 상태이기 때문에, undefined 값을 반환한다

- (2) 시점에서는 변수 초기화 이후이므로 초기화된 값 20이 출력된다

매개변수 (parameter)

- JS에서는 함수를 정의할 때 매개변수의 타입을 명시하지 않고, 인수에 대해 타입 검사도 하지 않는다

- 함수의 정의보다 적은 수의 인수가 전달되더라도, 오류가 발생하지 않고 전달되지 않은 매개변수에 자동으로 undefined 값을 설정한다

- (예) 전달된 인수만을 가지고 정상적으로 계산하는 함수

function addNum(x, y, z) {
    if(x === undefined) // 함수 호출시 x에 해당하는 인수가 전달되지 않은 경우
        x = 0;          // 변수 x의 값을 undefined에서 0으로 변경함.
    if(y === undefined) // 함수 호출시 y에 해당하는 인수가 전달되지 않은 경우
        y = 0;          // 변수 y의 값을 undefined에서 0으로 변경함.
    if(z === undefined) // 함수 호출시 z에 해당하는 인수가 전달되지 않은 경우
        z = 0;          // 변수 z의 값을 undefined에서 0으로 변경함.
    return x + y + z;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0

arguments 객체

- 함수의 정의보다 더 많은 수의 인수가 전달될 때, 매개변수에 대입되지 못한 인수들을 참조하는 방법

- arguments 객체 : 함수가 호출될 때 전달된 인수를 배열의 형태로 저장

- (예) 인수의 개수에 상관없이 정상적인 계산을 수행하는 함수

function addNum() {
    var sum = 0;
    for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.
        sum += arguments[i];                    // 전달받은 각각의 인수를 sum에 더함.
    }
    return sum;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

디폴트 매개변수 (default parameter)

: 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우 사용할 기본값

- 자바스크립트에서 매개변수의 기본값 : undefined

- (예) 매개변수의 기본값 변경

function mul(a, b = 1) { // 인수가 한 개만 전달되면 나머지 매개변수의 값을 언제나 1로 설정해 줌.
    return a * b;
}
mul(3, 4); // 12
mul(3);    // 3

[참고자료] http://tcpschool.com/javascript/intro