[Javascript] 함수

함수

함수 선언 방법 및 호출

• 매개변수[Parameter] : 함수 내부에서만 사용할 수 있는 변수
• 인자[Argument] : 함수 호출 시 매개변수에 들어갈 값

// 함수 선언
function 함수이름 (매개변수[Parameter]) {
    // 함수가 호출되었을 때 실행할 코드
}

// 함수 호출
함수이름(인자[Argument]);

// 함수 선언 시 매개변수 초기값 지정
function 함수이름 (매개변수[Parameter] = 초기값) {
    // 함수가 호출되었을 때 실행할 코드
}

// 함수 호출
함수이름(인자[Argument]);

함수 사용 이유

• 중복 코드를 피하기 위함
• 가독성을 높여줌

// 레드벨벳 멤버 이름 출력 [함수 미 사용]
let name = "주현";
console.log("이름 : " + name);
name = "슬기";
console.log("이름 : " + name);
name = "승완";
console.log("이름 : " + name);
name = "수영";
console.log("이름 : " + name);
name = "예림";
console.log("이름 : " + name);

// 레드벨벳 멤버 이름 출력 [함수 사용]
function redVelvet(name) {
  console.log("이름 : " + name);
}

redVelvet("주현");
redVelvet("슬기");
redVelvet("승완");
redVelvet("수영");
redVelvet("예림");

함수 동작 원리

• Call Stack : 현재 실행 중인 기능을 추적하고, 계산을 수행한다.
• LIFO(Last In First Out) 방식으로 Stack에 저장된다.

function a() {
  console.log("a 함수 호출");
  b();
  return 1;
}
function b() {
  console.log("b 함수 호출");
  c();
  return 2;
}
function c() {
  console.log("c 함수 호출");
  return 3;
}

a();

함수 실행 결과

1. Javascript가 실행되면 Global Execution Context(anonymous)가 생성되어 Call Stack에 추가된다.

2. a 함수를 호출하면 Call Stack에 a 함수를 추가하고 a 함수 호출을 콘솔에 출력한다.

3. a 함수 내부에서 b 함수를 호출한다.

4. b 함수 호출하면 Call Stack에 b 함수를 추가하고 b 함수 호출을 콘솔에 출력한다.

5. b 함수 내부에서 c함수를 호출한다.

6. c 함수를 호출하면 Call Stack에 c 함수를 추가하고 c 함수 호출을 콘솔에 출력한다.

7. return을 만나 c 함수를 종료한다.

8. c 함수가 종료되어 Call Stack에서 제거되고 다시 return을 만나 b 함수를 종료한다.

9. b 함수가 종료되어 Call Stack에서 제거되고 다시 return을 만나 a 함수를 종료한다.

10. a 함수가 종료되어 Call Stack에서 제거되고 Global Execution Context(anonymous)만 남는다.

11. 모든 실행이 완료되어 Global Execution Context(anonymous)도 Call Stack에서 제거된다.

함수의 호이스팅(Hoisting)

호이스팅(Hoisting)이란?

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
• 덕분에 함수를 호출하는 코드를 함수 선언보다 앞에 작성할 수 있다.

함수의 호이스팅(Hoisting)

showMessage();
function showMessage() {
  let text = "javascript";
  console.log("hello wolrd! " + text);
}

showMessage 함수 실행 결과

1. Javascript가 실행되면 Global Execution Context(anonymous)가 생성되어 Call Stack에 추가된다.

2. showMessage 함수가 호출되면서 Call Stack에 추가되고 showMessage 함수 내부에 있는 코드들이 실행된다.

3. showMessage 함수가 종료되어 Call Stack에서 제거되고 Global Execution Context(anonymous)만 남는다.

4. 모든 실행이 완료되어 Global Execution Context(anonymous)도 Call Stack에서 제거된다.

return문

• 함수가 실행 중에 return문을 만나면 함수 실행을 종료한다.
• 이때 return문 옆에 작성한 값을 함수를 호출한 지점으로 반환해 준다.
• return문 뒤에 값이 없으면 undefined를 반환한다.
• 함수에서 return문을 작성하지 않아도 기본으로 들어가 있다.

function showMessage() {
  console.log("hello world! 1");
  return;
  console.log("hello world! 2");
}

console.log(showMessage()); // undefined

return문의 함수 종료 시점과 return문 뒤에 값을 적어주지 않았을 때 결과

function showMessage() {
  return "hello world";
}

console.log(showMessage()); // hello world

return문 뒤에 값을 적어주었을 때 결과

참조

• https://designer-ej.tistory.com/entry/Web-Call-Stack-자바스크립트의-콜스텍
• https://developer.mozilla.org/ko/docs/Glossary/Hoisting
• https://blog.bitsrc.io/master-javascript-call-by-sharing-parameter-passing-7049d65163ed
• https://cabulous.medium.com/javascript-execution-context-part-2-call-stack-and-multiple-execution-contexts-dbe428a94190
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return