[JavaScript] 함수

 JavaScript 함수 - 선언, 호이스팅, 표현식, arguments, call stack, arrow function

1. 함수의 선언

 

함수는 여러 개의 인자를 받아서, 그 결과를 출력한다. 자바스크립트는 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 만약 , 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined 값을 갖게 된다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다.

 

// 함수선언문
function printName(firstname) {
    var myname = "jisu";
    return myname + " " +  firstname;
}

// 결과
jisu undefined

 

 

2. 함수 표현식

 

함수는 다음과 같이도 표현할 수도 있다.

 

// 함수표현식
function test() { 
    console.log(printName()); 
    var printName = function() {
        return 'anonymouse';
    }
}
test(); // 타입에러가 발생한다.

 

함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 실행되지 않을 수 있다. 표현식보단 함수 선언문을 더 자주 사용하지만, 어떤 코딩 컨벤션에서는 표현식을 권장하기도 한다.

 

 

 

3. 표현식과 호이스팅

 

위에 표현식 예제에서 printName이 "printName이 is not defined"이라고 오류가 나오지 않고, function이 아니라고 나온 이유는 printName이 실행되는 순간 'undefined'으로 지정됐기 때문이다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언한다.  함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 한다.
(실제로 코드가 끌어올려지는 게 아니라, 자바스크립트 파서 내부적으로 그렇게 끌어올려서 처리한다는 것이다)
따라서 다음 코드 역시 함수를 값으로 가지지만 어쨌든 printName도 변수이므로 끌어올려지고, 값이 할당되기 전에 실행됐으므로 undefined가 할당된 상태이다.

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

 

 

 

4. 반환값과 undefined

 

다음 함수의 반환값은 undefined이다.

 

function printName(firstname) {
    var myname = "jisu";
    var result = myname + " " +  firstname;
}

 

자바스크립트 함수는 반드시 return 값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환된다.
자바스크립트에서는 다른 언어에서의 void타입이 없다.

 

 

5. arguments객체

 

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성된다.
arguments의 타입은 객체이다. 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.
이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수 있다. arguments는 배열이 아니다.
따라서 배열의 메서드를 사용할 수가 없다. 

 

function a() {
 console.log(arguments);
}
a(1,2,3);

// 결과
[Arguments] { '0': 1, '1': 2, '2': 3 }

 

자바스크립트의 가변 인자를 받아서 처리하는 함수를 만들 때 등에서 arguments속성을 유용하게 사용할 수가 있다. 하지만 arguments의 무분별한 사용은 하지 않는 게 좋다.

 

 

6. Arrow function

 

ES2015에는 arrow function이 추가됐다. 하지만 점점 많이 사용되고 있는 syntax이므로 같이 알아두어도 좋을 것 같다.

 

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

//위 함수는 아래 arrow함수와 같다. 
var getName = (name) => "Kim " + name;

 

 

7. 함수의 연속적 호출(call stack)

 

여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터 같은)를 위한 메커니즘이다. 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야 하는지 등을 제어한다.

 

function printing() {
   // [1] Some codes here
   sayHi();
   // [2] Some codes here
}
function sayHi() {
   return "Hi!";
}

printing();

// [3] Some codes here

 

실행 순서

1) printing() 함수 호출

2) 스택 리스트에 printing() 추가

3) [1] 실행, sayHi() 함수 호출

4) 스택리스트에 sayHi() 추가

5) sayHi() 종료 후, 호출된 곳으로 돌아감

6) 스택 리스트에서 sayHi() 제거

7) printing()의 나머지 코드 실행[2]

8) printing() 종료 후, 호출된 곳으로 돌아감

9) 스택 리스트에서 printing() 제거

10) [3] 코드 실행