JavaScript - Function (함수) 기본 이해하기

안녕하세요.

Hynn 입니다.

 

매일매일 하루에 1~2 포스팅을 하려고 노력중입니다.

다만 최근에 급격하게 나빠진 컨디션으로 인해, 하루씩 빼먹는 날이 생기게 되네요.

 

보시는 분들께서도 건강챙기시면서, 차근차근 학습해나가시기를 바랍니다.

이전 시간에 데이터타입에서 이야기한 것과 추가로, 이제 Function 에 대해서 다루도록 할 예정입니다.

 

다만 Function 의 경우 내용이 중요한 만큼, 여러개의 포스팅으로 나뉘어 작성할 예정입니다.

그럼 시작해보겠습니다.

 

=============

1. 함수란 무엇인가?

2. 함수의 기본 구조

3. 함수의 작동원리

============

 

1. 함수란 무엇인가?

 

함수, 즉 Function 은 이전시간에 포스팅에서 간략하게 설명을 한 바 있습니다.

함수는 말 그대로, 선언된 변수에 계산식을 통해, 원하는 데이터를 도출하는 것이고, 수학의 그 함수와 유사하다고 할 수 있습니다.

 

함수를 사용하면, JavaScript 작성에 있어서 매우 편리한 이점을 가져올 수 있습니다.

하지만 "편리"할 수록, 사용자는 "많은" 공부와 "많은" 노력을 해야만 하는 것 역시 사실입니다.

 

당연하게도, 함수는 그러한 영역에서 대표되는 기능이고, 기본적으로 함수사용을 통해 JavaScript 에서는 중복코드를 사용하는 것을 최소화 하고자 함이며, 이는 "참조" 타입이라는 것을 기억해야 합니다.

 

우리는 이전시간에 연산자 기호를 사용하여, 구구단등을 계산할때 Console.log() 라는 명령어를 사용했습니다.

이 조차도 함수중 하나입니다.

 

 

2. 함수의 기본 구조

함수의 기본 구조를 먼저 작성해보겠습니다.

함수의 기본구조는 예약어를 통해 함수를 선언하고 난 뒤, 그 함수를 실행하는 2개의 단계를 거쳐야 합니다.

기본적인 작성예시는 아래와 같습니다.

function showMessage(){
	console.log('hello Hynn tistory blog')
}

이 코드의 기본 구조를 먼저 살펴보면 다음과 같습니다.

function -

  함수를 선언하기 위해 명령어를 입력합니다.

showMessage() -

  변수명을 선언합니다. 여기서의 변수명은 showMessage 가 되겠네요. 반드시 () 괄호까지 처리해야 합니다. 이것이 함수를 뜻하기도 하기 때문이죠.  

{console.log('hello Hynn tistory blog')} -

  이제 " { } "을 사용해 명령어를 입력합니다. 이미 우리는 CSS에서 { } 사용을 여러차례 해본 바 있습니다.  중괄호를 사용하여 열고, 괄호를 사용하여 console.log('hello hynn tistory blog' 를 입력하고 괄호를 닫고, 명령이 종료되었으니, 중괄호 까지 닫습니다.

 

이 코드를 이제 실행해보면, 실제 Console 에서는 아무것도 호출되지 않습니다.

 

왜 그런것일까요? 

 

 

3. 함수의 작동원리

 

함수의 작동원리를 이해하기 위해 그림을 하나 준비했습니다.

그리고 예제 코드를 하나 작성해보도록 하겠습니다.

 

let text = 1
function showMessage(){
    let text = "javascript"
    console.log("Hello world" + text)
}

showMessage()
console.log(text)



위 코드의 작성 흐름도를 예시로 들어 보겠습니다.

먼저 JavaScript 인터프리티 이기는 하지만, 최초 Code 를 실행시, 모든 코드를 엔진이 검사하는 과정을 거칩니다. 

이를 Annoymous function, 익명함수라고 칭합니다. 이 개념에 대해서는 별도로 작성되는 포스팅에서 자세하게 다루겠습니다.

 

이제 모두 검사를 마친 코드를 줄 단위로 지정하여 실행을 하기 위해 준비합니다.

여기서 두가지로 분류가 되는데, 실제 출력, 즉 실행하지 않아도 되는 함수는 Hip Area 에서 처리하고, 값을 출력하지는 않습니다.

반면에 출력해야하는 함수는 Call-Stack 이라는 호출스택 영역에서 처리하고, 콘솔로 순차적으로 표시합니다.

 

당연하게도 출력해야하는지, 하지 않아야 하는지를 결정하는 것은 이전 포스팅에서도 언급한 "예약어" 에 따라 결정되기 때문에, 당연히 올바른 명령/예약어를 사용해야 하는 중요도는 말할 필요도 없겠습니다.

 

이제 이 실행 구조도를 알기 쉽게 나누어 보도록 하겠습니다.

 

 

먼저 우측 상단에 표기된 모든 코드를 익명함수에서 모두 읽어냅니다.

그리고 난 뒤, 위부터 코드를 한줄 한줄씩 실행합니다.

 

let text = 1 은 변수 선언이므로, 출력 할 코드가 아니니, Hip 으로 이동합니다.

바로 아래줄로 이동하여 Function showMessage(){ 라는 함수가 선언되었습니다. 함수 안에는 지역변수로 let text  가 선언됩니다. 이 지역번수 역시 실행할 코드가 아니므로 Hip 으로 이동합니다. 이후에 나타나는 Console.log 역시, 이 함수가 실행 될 때 출력해야 할 내용이므로, Hip 으로 이동합니다. 

 

이제 showMessage() 라는 함수를 실행하는 명령이 호출됩니다. 그러면 이는 호출스택, Call-Stack 에서 처리하고, Console 로 출력합니다.

출력할때는 호출스택에서는 당연히 실행을 했으니, 호출스택 대기열에서 자연스럽게 제거됩니다.

그리고 난 뒤, 다음 함수실행을 하는 Console.log(text) 를 실행했습니다.

 

여기서는 최초에 선언한 let text = 1 이 전역변수, 함수 내에 선언된 let text="javascript" 는 지역변수이므로, 지역변수 영역내가 아닌, 전역 변수 영역에 있는 명령이므로, 1이 출력되게 됩니다.

 

물론 복잡한 코드를 작성하고, 실행할 수 록 이 단계는 보다 많은 과정을 거치게 됩니다.

 

하지만 이러한 기본 개념은 변함이 없기 때문에, 이에 대해서 반드시 숙지가 되어야 합니다.

JavaScript 에서 가장 중요한 항목이기 때문에, 다음 포스팅에서 또 다른 기본 개념으로 찾아뵙도록 하겠습니다.