자바스크립트 강좌 - 6. 함수(Function)

자바스크립트 에서, 그리고 다른 프로그래밍 언어에서도 항상 중요한 함수에 관한 내용입니다. 자바스크립트 의 강점 중에 하나는, 함수가 객체로 활용된다는 것이고, 이 객체를 통하여 여러가지 속성들을 사용할 수 있다는 것입니다. 함수를 통하여 다양한 기능들을 모듈화 합니다.

함수란 무엇인가 ?

먼저, 함수란 특정한 기능을 수행하는 코드들의 집합이며, 자바스크립트에서는 객체로 취급됩니다.

따라서, 함수는 이전에 객체를 선언했던 모습과 유사하게 선언할 수 있습니다.

var adder = function(a, b){
    var sum = a + b;
    return sum;
}
 
console.log(adder(3,5));

위의 코드에서 adder라는 객체는 함수 객체입니다.

위와 같은 방식으로 선언될 수 있는데, a와 b를 호출할 때에 받아서, 이 두 객체를 더한 sum을 돌려준다는 함수입니다.

따라서 6번 라인의 코드에 adder(3,5)를 실행하면, 3이 a가 되고, 5가 b가 되어 두개를 더한 8을 돌려주게 되고, 

console.log함수는 돌려받은 8을 화면에 출력하게 됩니다.

함수에서 사용된 sum이라는 객체는, 함수가 종료되면 사라지게 되는데, 이는 객체 스코프(Scope)에 의해서 사라집니다.

이 부분에 관하여는 클로져(Closure)에 관한 내용에서 다루도록 하겠습니다.

익명함수는 무엇인가?

자바스크립트 에는 익명함수 기능을 제공합니다.

기존에 함수는 선언을 한 후에, 함수를 호출하여 함수를 사용하였던 것에 반해, 익명함수는 함수를 선언과 동시에 사용하는 것을 의미합니다.

이름이 없기 때문에 다시 부를 수 없습니다.

var adder = function(a, b){
    var sum = a + b();
    return sum;
}
 
console.log(adder(3, function(){
    return 5;
}));

위의 코드에서 6번 라인의 function(){ return 5;}가 익명함수입니다.

adder 함수가 전달받는 객체로 함수 b를 받았기 때문에, 2번 라인의 코드에서 b를 바로 더하는 것이 아니라 b()로 작성하여 b의 결과값을 더해줍니다.

6번 라인에서의 익명함수는 그냥 5를 돌려주는 함수의 기능만을 하기 때문에, 3과 5를 더한 8의 값이 나오게 됩니다.

메서드란 무엇인가?

객체지향 언어에서, 객체가 가지는 함수를 메서드(Method)라고 합니다.

자바스크립트의 경우에는, 객체의 속성으로 함수 객체를 가질 수 있는데, 이 때 이를 메서드라고 합니다.

var yangd = {
    type: 'blogger',
    introduce : function(){
        console.log("Hello, I'm "+this.type);
    }
}
 
yangd.introduce()

위의 식에서, yangd라는 객체는 그 속성으로 type이라는 문자열 객체와 introduce라는 함수 객체를 가지고 있습니다.

특히 3번 코드의 함수 객체 속성이 바로 Method 이며, 특별한 점으로는 4번 라인에서 this라는 키워드를 사용했는데, 이는 이 객체를 가리키게 됩니다.

따라서 this.type 은 yangd 객체의 type을 가리키게 됩니다.

위의 코드의 실행 결과는 Hello, I'm blogger 가 되게 됩니다.

매개변수와 인자값

매개변수란 함수에서 넘기는 변수들을 의미하고, 인자값은 넘어온 값들을 의미합니다.

자바스크립트의 함수는 매개변수에 비교적 자유롭습니다. 이 말인즉슨 다음과 같습니다.

var adder = function(a, b){
    return a+b;
}
 
console.log(adder(3, 5, 7, 9))

adder라는 함수는 매개변수가 a, b의 두개를 가진 함수입니다.

그러나 5번 라인의 코드에서, 인자를 3,5,7,9를 넘겼습니다.

이렇다고 해서 런타임 에러가 일어나는 것이 아니라, 앞의 두 숫자를 a, b로 인식하여 8을 출력하게 됩니다.

함수에서 인자값에 접근하기 위해서 꼭 매개 변수를 사용하여야 하는 것은 아닙니다.

자바스크립트에는 함수가 실행될 때에, arguments라는 내부 객체에 접근할 수 있게 됩니다.

var addAll = function(){
    var sum = 0;
    for(var i in arguments){
        sum = sum + arguments[i];
    }
    return sum;
}
 
console.log(addAll(3, 5, 7, 9))

위와 같은 방식으로, 매개 변수는 없으나, arguments 배열을 사용하여 3,5,7,9에 접근할 수 있게 됩니다.

---

함수는 매우 중요한 개념입니다 !

하나의 함수에는 하나의 기능을 정확하고, 간결하고, 에러로부터 자유롭게 작동될 수 있도록 짜주는 것이 좋습니다.

보기 좋은 코드(클린 코드)에 대해서는 따로 추후에 포스팅 하겠지만, 함수를 잘 만들어주는 것이 중요합니다.

그럼 이만 ..