[JavaScript] 함수

함수 선언

함수는 여러 개의 인자를 받아서, 그 결과를 출력한다.

파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다.

파라미터가 1개일 때, 인자의 개수가 0개라면 파라미터는 undefined라는 값을 가지게 된다. 

function printName(firstName) {
    var myName = "hh_lin";
    return myName + " " + firstName;
}

함수 표현

함수는 아래와 같이 함수 표현식으로 쓸 수도 있다.

이렇게 표현하게 되면, 함수 선언문과는 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.

function printName(firstName) {
    var inner = function() {
        return "inner value";
    }
 
    var result = inner();
    console.log("name is " + result);
}

function printName(firstName) {
    var result = inner();
    console.log("name is " + result);
 
    var inner = function() {
        return "inner value";
    }
}

선언은 되어있지만 할당은 되어있지 않은 경우 undefined가 뜬다.(typeof inner 역시 undefined)

undefined이기 때문에 위에 "inner is not a function"이 뜬 것을 볼 수 있다.

function printName(firstName) {
    console.log(inner);
 
    var inner = function() {
        return "inner value";
    }
}

호이스팅

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 미리 다 모아서 선언한다.

함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 한다.

실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 파서가 내부적으로 처리하는 것이다.

- 함수표현식(실제코드)

function printName(firstName) {
    var result = inner();
 
    var inner = function() {
        return "inner value";
    }
}

- 호이스팅 결과

function printName(firstName) {
    var inner;
 
    var result = inner();
 
    inner = function() {
        return "inner value";
    }
}

- 함수 선언식(실제코드)

function printName(firstName) {
    var result = inner();
 
    function inner() {
        return "inner value";
    }
}

- 호이스팅 결과

function printName(firstName) {
    function inner() {
        return "inner value";
    }
 
    var result = inner();
}

printName(); //아직, printName이 undefined으로 할당된 상태다. 
var printName = function(){}

호이스팅에 의해 "printName is not defined"가 아닌 "printName is not a function"이 출력되는 것이다.

(변수는 존재하고, 아직 값이 할당되기 전이므로 undefined라는 기본 값이 할당됨.)

반환값과 undefined

자바스크립트 함수는 반드시 return값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환된다.

자바스크립트에서는 void 타입이 없다.

function printName(firstName) {
    var myName = "hh_lin";
    var result = myName + " " + firstName;
}

arguments 속성

함수가 실행되면 그 안에서 arguments라는 특별한 지역변수가 존재한다.

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.

이 때, 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수가 있다.

arguments는 배열 타입은 아니며, 따라서 배열의 메서드를 사용할 수가 없다.

function a() {
    console.log(arguments);
}

function a() {
    for(var i=0; i<arguments.length; i++) {
        console.log(arguments[i]);
    }
}

 

arrow function

ES2015(ES6)에는 간단하게 함수를 선언할 수 있는 문법인 arrow function이 추가되었다. 

function getName(name) {
    return "Kim " + name;
}

위 함수는 아래 arrow 함수와 같다.

var getName = (name) => "Kim " + name;

참고자료

https://www.edwith.org

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions