(11) JavaScript - 추상화 / 함수의 실행 순서

    function sayHello() {
        console.log('hi');
        console.log('welcome to my club');
    }
    console.log('함수 호출 전');
    sayHello()
    console.log('함수 호출 후');

 

해당 코드를 실행하면 순서는 기본적으로 위에서부터 아래로 한 줄씩

왼쪽에서 오른쪽으로 읽으면서 각 줄이 해야하는 일이 끝나면 그 다음줄을 읽는 방식으로 동작한다.

하지만 코드를 실행하는 중에 함수가 호출되면 코드가 다르게 동작한다. 

한번 살펴보자면..

    function sayHello() {
        console.log('hi');
        console.log('welcome to my club');
    }

 

▲ sayHello라는 함수를 정의하는 코드이다.

함수를 정의한다고해서 바로 실행되는 것은 아니기 때문에 특별히 어떤 일이 일어나지는 않는다.

 

    console.log('함수 호출 전');
    sayHello()
    console.log('함수 호출 후');

▲ 여기서부터 '함수 호출 전' 이라는 문자열이 먼저 출력된다.

그러고 바로 다음 줄 sayHello 함수를 호출 했는데, sayHello라는 이름을 가진 함수를 찾고

그 함수의 내용을 한 줄씩 실행한다.

 

처음에는 'hi'라는 문자열을 출력하고 그 다음줄 'welcome to my club' 라는 문자열을 출력한다.

sayHello 함수 내에 있는 내용들을 실행하고나면 다시 함수를 호출 했던 줄(sayHello())로 돌아오는데,

이 줄은 함수를 호출하는 역할을 다 했기 때문에 그 다음줄로 넘어가 해석한다.

마지막 줄은 '함수 호출 후' 라는 문자열이 출력되고 그 다음줄은 없기 때문에 프로그램이 종료된다.

 

다른 경우도 한번 살펴보자

    function square(x) {
        return x * x;
    }
    console.log('함수 호출 전');
    console.log(square(5));
    console.log('함수 호출 후');

 

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

▲ square라는 함수를 정의하는 코드이고 

마찬가지로 함수를 정의한다고해서 바로 실행되는 것은 아니기 때문에 특별히 어떤 일이 일어나지는 않는다.

 

    console.log('함수 호출 전');
    console.log(square(5));
    console.log('함수 호출 후');

▲ '함수 호출 전'이라는 문자열이 출력되고 그 다음 줄에 square 함수가 한 번 호출된다.

파라미터 숫자 5가 들어가있는데 함수 선언 부분에서 파라미터 숫자가 전달이 되어서 함수가 실행 될 것이다.

파라미터 x에 5가 전달이 되고 리턴 x * x 니까 리턴 5 * 5를 즉, 25를 리턴하게 되고

squrare 함수를 호출한 부분이 25로 대체되며 최종 출력 결과는 다음과 같다.

 

    console.log('함수 호출 전');
    console.log(square(3) + square(4));
    console.log('함수 호출 후');

▲ 방금 본 코드와 크게 다른 건 없지만 square 함수가 2번 호출된다.

천천히 살펴보자면 처음 square 함수를 호출할 때는 파리미터로 숫자 3을 전달했다.

그럼 함수 선언 부분의 파라미터 x에 3이 전달돼서[function square(3) {}] 함수가 실행된다.

함수 내부에서는 리턴 x * x 이므로 리턴 3 * 3이, 즉 9를 리턴하게 되고 [return 3 * 3 ]

첫 번째 square 함수를 호출하는 부분은 9로 대체된다. [console.log (9 + square(4))]

 

두 번째 square 함수 호출에서는 파라미터로 숫자 4를 전달했다.

동일하게 x에 4가 전달이 되고 (function square(4) {}) 

리턴 4 * 4 이므로 즉 16을 리턴하고 [return 4 * 4]

두 번째 square 함수를 호출 한 부분은 16으로 대체된다. [console.log (9 + 16)]

그러면 결과적으로 25를 출력된다.

 

함수는 선언을 하고 끝이 나는 것이 아니라 함수를 호출했을 때 실행이 되기 때문에 

이렇게 함수의 실행 순서를 이해하고있어야 좀 더 자유롭게 함수를 활용할 수가 있다.

 

---

★ GitHub 주소 (함수의 실행 순서)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/6-%EC%B6%94%EC%83%81%ED%99%94/2.%ED%95%A8%EC%88%98%EC%9D%98%EC%8B%A4%ED%96%89%EC%88%9C%EC%84%9C.html

JavaScript_soloPlay/Basic/6-추상화/2.함수의실행순서.html at main · SeopE9611/JavaScript_soloPlay