#3 자바스크립트 - 함수의 기초

JavaScript 함수의 기초

자바스크립트에서도 C언어나 JAVA에서처럼 함수가 존재한다.

함수는 일반적으로 다음과 같이 생겼다.

function 함수명(n) {
 
    함수 몸통
    return 값 (없을수도 있음);
 
}

이처럼 함수를 정의하는 것을 함수 선언문으로 함수를 정의했다고 한다.

간단한 예로 팩토리얼 함수를 자바스크립트로 표기해보자면,

function fact(n) {
    if (n <= 1) return n;
    return n * fact(n - 1);
}

함수 선언문으로 함수를 정의하면 끌어올림이 가능한데 이 말이 무슨 뜻이냐면

다음 예제를 보며 설명하겠다.

다음과 같이 함수를 정의하기 전에 함수를 실행하는 코드(console.log(fact(n));)가 먼저 쓰여도 문제없이 동작한다.

또한 함수는 원시 값이 인수일 때와 객체가 인수일 때와 다르게 동작한다.

먼저 원시 값이 인수일 때는

위 함수는 전달받은 인수에 +1을 한 후 반환하는 함수이다.

즉, 인수에 원시 값을 주면 그 값 자체가 인자에 전달, 복사된다.

여기서 변수 a와 인자 n은 별개의 변수이다.

다음으로 인수가 객체일 때 함수의 동작을 살펴보자.

함수가 호출될 때 a의 복사본이 인자 p에 할당된다. 여기까진 위 원시 값일 때와 같다.

그러나 객체 a에 {x:3, y:4};값을 인자 p에 대입시킨다.

즉, 변수 a와 인자 p는 똑같은 객체를 참조하고 있는 것이다.

그리고 위에서는 함수 선언문으로 함수를 정의해 보았는데, 함수 선언문 말고도 함수를 다루는 방법이 또 있다.

다음 방법은 함수 리터럴, 무명 함수로 함수 정의하는 방법이다.

var square = function(x) { return x * x; };

모양새만 보면 변수 square에 함수를 대입시킨 모습이다.

실제로 변수에 함수 객체의 참조를 저장시키는 방법이다.

그래서 일반적인 함수 선언문에서는 { ... } 끝에 세미콜론(;)을 붙이지 않았는데 여기서는 붙인 것을 볼 수 있다.

함수 리터럴에도 이름을 붙일 수 있다.

var square = function sq(x) { return x * x; };

그러나 sq라는 이름은 함수 안에서만 유효하므로 함수 바깥에서 sq라는 이름으로 호출할 수 없다.

마지막으로 객체의 메소드를 설명하겠다.

자바스크립트에서 메소드는 객체의 프로퍼티 중에서 함수 객체를 값으로 담고 있는 프로퍼티를 메소드라고 부른다.

var circle = {
    center: { x : 1.0, y : 2.0 },
    radius: 2.5,
    area: function () {
        return Math.PI * this.radius * this.radius;
    }
};

circle객체 안에 원의 넓이를 구하는 프로퍼티인 area가 함수 객체를 값으로 담고 있는 메소드이다.

메소드 또한 프로퍼티의 일종이므로 객체를 생성한 후 나중에 추가할 수 있다.

예를 들어 위 객체 circle에 translate라는 메소드를 추가해 보자면,

circle.translate = function(a, b) {
    this.center.x = this.center.x + a;
    this.center.y = this.center.y + b;
};

프로퍼티를 나중애 추가하는 방법과 동일하다.

다음 포스팅은 생성자에 대하여 포스팅을 하겠다.

< 본 포스팅에 사용된 코드의 출처는 '길벗출판사 - 모던 자바스크립트 입문' 도서입니다. />