JavaScript - 함수의 정의와 호출의 차이점!

김민재·2021년 7월 27일
0

TIL, Deep Javascript

목록 보기
7/22
post-thumbnail

*🔐Study Keyword :

✅함수의 🔑정의와 🗝️호출의 차이점에 대해서 확실히 알아보장!

자바스크립트에

- 함수의 정의

  • WHAT IS❓
  • 함수함수 정의(function definition)를 통해서 생성됩니다.
  • 함수는 일련의 과정을 문(statements)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 입니다.

💡함수의 구성 요소)

  • 함수 정의 시 함수를 구별하기 위해 식별자1>함수명을 쓸 수 있다.
    또 함수 내부('()')로 입력을 전달받는 변수2>매개변수(parmeter)라고 부르고 함수의 실행 결과인 출력3>반환값(return value)이라 부른다.
  • 함수 호출 시 함수의 매개변수를 통해 받은 입력4>인수(argument)라고 부른다.
<script>
function introduceMySelf (name, age) { // 함수 키워드 함수명 (매개변수1, 매개변수2..)
  return `Hello, I'm ${name}!, ${age} old`;// 반환 값
}//여기까지 함수 몸체이자
const greeting = introduceMySelf('jamie', 26); 함수 호출 후 변수에 할당
console.log(greeting)// 변수 출력
</script>
  • HOW TO USE❕❓
  • 함수를 정의 할 수 있는 다양한 방법은 중 다음은 함수 선언문을 사용하여 정의한 함수이다.
  • 함수 선언은 변수 선언처럼 함수 선언 키워드 뒤에 함수명(=식별자) 적고 중괄호로 ({}) 블럭을 넣어준 뒤 블럭 내부에 함수가 실행할 코드를 작성해준다.
<script>
}// *함수 정의*
function introduceMySelf (name, age) { 
  return `Hello, I'm ${name}!, ${age} old`;
}
</script>

🚫함수 선언시 주의할 점)

  • 자바스크립트는 호이스팅 기능으로 함수선언이 상단으로 올라가기에 함수 선언이 정의 되기도 전에 접근하여 호출 할 수도 있다는 점을 반드시 인지하자아
<script>
greeting(); // Output: 'Hello, I'm jamie!' 
- 자바스크립트의 hoisting으로 인해 함수 선언이 정의되기도 전에 함수가 호출되어지는 현상이 발생하니 *주의하자*
function greeting() {
  console.log('Hello, I'm jamie!');
}
</script>
  • 💻 함수 정의는 말그대로 실행시킬 일련의 과정의 정의를 내려 함수의 존재를 선언하는 것 뿐이지 실행을 의미하는 것은 절대 ❌!
    ->그렇다면 실행을 위해선 어떻게 해야할까❓💁‍

- 함수 호출

  • WHAT IS❓

함수 호출(function definition)이란 미리 정의된 일련의 과정(함수의 정의), 정의된 함수를 실행하기 위해 필요한 입력인 인수를 매개변수를 통해 함수에 전달하여 함수실행 시키는 명령어이다.

  • HOW TO USE❕❓
  • 함수 호출(function definition)할 땐 함수 내부 ()안에 필요한 인자를 넣어주면 되고 없다면 생략가능하다.
  • 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되어 실행 결과로서 반환값을 반환한다.
<script>
// *함수 호출*
const greeting = introduceMySelf('jamie', 26); // 함수 호출 후 반환값을 변수 greeting에 할당했다.
console.log(greeting)
/* 함수 introduceMySelf에 인수 jamie', 26 전달하면서
호출하면 반환값인 Hello, I'm jamie!, 26 old`*가 출력된다./
</script>

‣ 함수 리터럴

🔅참고🔅)

  • 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기방식이다. 즉 값을 생성하기 위한 표기법을 말한다.]
  • WHAT IS❓
  • 다른 데이터 타입이 리터럴로 값을 만들어 내듯 함수 역시 함수 리터럴값을 생성할 수 있다.
    -> 즉, 함수 리터럴도 평가되어 값을 생성하며 그 값은 객체가 된다.
    따라서 ✨자바스크립트의 함수는 객체(다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 속성 중 하나)✨이다.
  • HOW TO USE❕❓
<script>
//변수 variable에 함수 리터럴을 할당한 식
const cal = function add(x, y){
	return x + y;
}
</script>

🔅함수 리터럴의 구성) -
-function keyword : 함수를 선언해주는 키워드(function)이다.
-identifer(=함수명) :
1>함수명(cal)은 식별자로 함수의 몸체 내에서만 참조할 수 있다.
2>함수 이름이 생략되면 익명함수, 이름이 있으면 기명함수라 부른다.
-매게 변수 목록 :
1>0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 서로 구분한다.
2>매개변수 목록은 순서에 의미를 지녀 호출 시 지정한 인수가 지정했던 순서대로 할당된다.
3>매개변수는 함수 몸체 내에서 변수와 동일하게 취급된다.
-function body(=함수 몸체) : 함수 호출 시 일괄적으로 실행되는 문들을 하나의 실행 단위로 정의한 블록으로 오직 함수 호출에 의해서만 실행된다.

profile
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.

1개의 댓글

comment-user-thumbnail
2022년 4월 15일

감사합니다! 덕분에 이해가 잘되었습니다!

답글 달기