[부스트코스] JavaScript -FE(4)

자바스크립트 함수의 호출에 대해 공부해봅시다!

 

 

함수 호출 스택

 

1)

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

function run(firstname) {
   firstname = firstname || "Youn";
   var result = printName(firstname);
   console.log(result);
}

run();

예제의 실행 순서를 살피어 봅시다.

 

1. run()이 읽힙니다.

2. run() 함수가 실행되게 되고, firstname 인자에는 undefined라는 값이 할당됩니다.

3. firstname은 undefined이기 때문에 "Youn"으로 재할당됩니다. (>> undefined는 false로 적용됩니다.)

4. result 변수의 선언부분이 실행됩니다.

5. printName 함수를 통해 선언되고 있으므로 printName 함수가 실행됩니다.

6. firstname 인자에는 "Youn" 값이 들어가게 됩니다.

7. myname 변수가 선언됩니다.

8. "myname Youn" 값이 return 됩니다.

9. 이 return 값이 result 변수 값으로 선언됩니다.

10. 콘솔에 result 값이 log 됩니다. 

 

따라서 콘솔에 "myname Youn" 이 찍히게 됩니다.

 

 

2)

function foo(b){
    var a = 5;
    return a * b + 10;
} 

function bar(x){
    var y = 3;
    return foo(x * y);
}

console.log(bar(6));

1. console 부분이 먼저 실행됩니다.

2. bar 함수가 실행됩니다. x 인자에는 6 값이 들어갑니다.

3. y 변수가 3으로 선언됩니다.

4. foo함수를 호출합니다.

5. b값으로 6*3 결과값인 18이 들어갑니다.

6. a 변수가 5로 선언됩니다.

7. return 값으로 5*18+10이 됩니다.

8. 이것이 bar의 return값이 됩니다.

 

따라서 콘솔에 100이 찍히게 됩니다.

 

 

두 예제를 통해 함수가 호출되는 순서에 대해 알아보았습니다.

stack과 같은 순서로 함수가 호출된다는 것을 알 수 있습니다.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16696/]