JavaScript

3. Javascript 함수의 개념

char1ey 2022. 11. 2. 23:57
목차
1. 함수와 코드 실행

  1.1. 코드의 실행
  1.2. 힙과 콜스택
    1.2.1 익명함수
  1.3. 함수 선언과 호출
  1.4. 매개변수와 인자
2. 함수 문법

  2.1. return
3. 호이스팅(hosting)

 

 

1. 함수와 코드 실행

 

오늘의 주인공인 함수(function)를 본격적으로 학습하기 전에 간단하게 훑어보고 코드 진행, 힙과 스택에 대해 알아보자.

 

함수의 기본적인 문법은 다음과 같다.

function showMessage () {
    console.log('hello showMessage!')
}

function 함수명 () { 실행될 코드 }

 

이를 함수 선언이라고 하고 이렇게 선언해 놓은 함수를 실행하는 방법은 다음과 같다.

showMessage()

함수를 실행하는 방법은 선언해 놓은 함수명과 괄호"()"를 적어주면 된다. 이렇게 코드가 진행된다.

 

1.1. 코드의 실행

 

코드는 어떻게 실행 될까?

  1. 코드를 저장하고 브라우저를 실행한다.
  2. 브라우저가 코드를 읽는다.
  3. 브라우저가 실행 시킨다.

처음 배울때 컴파일 방식은 코드 전체를 읽어 한번에 출력하고, 인터프리터 방식은 코드를 한줄 한줄씩 진행해 나간다고 짚고 넘어갔다. Javascript는 인터프리터 방식을 채택했기 때문에 한 줄씩 해석해 출력해준다. 하지만 이 말은 정확하지는 않다. 인터프리터 방식이지만 코드를 전체적으로 한 번 훑어보기 때문이다. 이 때 함수들을 힙이라는 저장공간에 저장 해놓는다. 그리고 콜 스택이라는 곳에서 실행을 시킨다.

 

1.2. 힙과 콜스택

 

콜스텍은 기본적으로 FILO(First in Last Out) 형태로 진행 되는데 코드를 한 줄 한 줄 읽어 나가기 때문에 먼저 들어가서 처리가 되지 않는 코드는 잠시 놔두고 뒤이어 들어온 코드를 해석하여 출력한다.

 

즉, 힙이란 코드를 한 번 훑을 때 예약어에 따라 들어감이 정해지는 임시저장공간이고, 스택이란, 코드를 실행시키는 장소이며 한 줄 한 줄 순서대로 출력해나가는 것을 의미한다. 추후에 추가로 설명을 다시 하고 지금은 간단하게 살펴보고 넘어간다.

 

1.2.1 익명함수

 

콜스택에서 함수호출이 실행되기 전에 첫 코드가 해석될 때 콜스택 가장 아래에는 익명함수가 먼저 생성된다. 이 익명함수는 코드가 처음부터 끝까지 실행되고 나서야 사라진다. 이는 추후에 더 깊게 파고들어야 하니 알아만 두자.

 

1.3. 함수 선언과 호출

 

함수는 function 예약어를 이용하여 선언하고 함수명과 괄호를 입력하여 호출한다. 뒤에 ( )가 붙은 경우 함수를 호출한다.

console.log()나 paraseInt()도 같은 경우이다. 아무튼 간에, 함수를 선언하게 되면 힙(heap)에 저장이 되고, 호출을 하게되면 콜스택에 들어가 실행을 하게되는 원리다.

 

1.4. 매개변수(parameter)와 인자(argument)

 

함수 선언시, 함수명 뒤의 괄호 ()에 들어가는 값을 매개변수(parameter)라고 하고,  함수 호출시 괄호 ()에 들어가는 값을 인자(argument)라고 한다.

2. 함수 문법

 

함수의 문법은 위에서 한번 언급했듯이,

function 함수명 (매개변수){
	함수호출시 선언 식
	return
}

함수명(인자)

위 코드와 같은 문법을 지니고 있다.

 

2.1.return

 

return은 함수 안에서만 사용되는 예약어이며, 디폴트로 항상 실행되고 있어 적지 않아도 되긴한다.

 

return의 역할은 함수코드 진행시 return을 마주하면 함수를 종료시키는 역할을 한다.

 

이를 확인하는 방법은 return 아래에 산출코드를 적어 놓으면 동작하지 않는 것을 알 수 있다. return을 만나면 함수가 종료되기 때문이다.

 

3. 호이스팅(hosting)

 

호이스팅이란 prototype언어라는 특징 때문에 생기는데, 개발시 오류가 날 수 있어 피하는 것이 좋다고 언급했다.

전에 언급한 예약어 var에는 호이스팅이 있어, 오류가 나기 때문에 현재는 let과 const를 사용한다.

function에서 호이스팅이라는 기능이 존재해 아래의 코드가 출력이 가능하다.

showMessage()


function showMessage(name, age) {
    console.log("hello " + name + " age " + age)
}​

 

선 호출 후 선언이 가능한데 이는 function의 호이스팅 으로인해 위에서 전역변수로 선언된 것처럼 되기 때문이다.

먼저 function으로 showMessage를 선언하기 때문이다. 실행은 되지만, 그런식으로 코드를 진행할 경우 어디에서 에러가 나거나 할 지 모르니 쓰지 않는 것이 바람직하다.