✔️Function

---

📌Function?

• 보통 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. 프로그램과 마찬가지로, 함수 역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 값을 '전달'하면, 함수는 값을 '반환'할 것입니다.
• JavaScript의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있으므로 일급(first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은, 함수는 호출할 수 있다는 점입니다. 간단히 말해, 함수는 Function 객체입니다.

📌Why should we use?

1. 재사용성
   : 한 번 정의된 함수를 재사용 할 수 있다.
2. 신뢰성
   : 이미 정의된 함수를 사용함으로서 코드를 작성할때의 실수를 줄일 수 있다.
3. 가독성
   : 식별자를 통해 어떤 함수인지 함수의 역할을 파악할 수 있다.
4. 편의성
   : 코드의 중복을 줄이고 재사용이 가능해 유지보수가 편하다.

📌How to use?

// 선언(정의)
function sayHello () {
  console.log('Hello!!')
};

/*
  function - let이나 const처럼 함수를 선언할때 사용.
  sayHello - 함수의 이름
  () - INPUT이 들어갈 자리
  {} - 함수가 수행할 기능이 들어가는 자리
*/

// 실행(호출)
sayHello()

• 함수의 가장 기본적인 구성요소
  • INPUT (인자, 매개변수 parameter)
  • 기능수행
  • OUTPUT (return)
    *INPUT 이나 OUTPUT (혹은 둘 다)을 생략한 함수도 존재한다.

// input x , output x
function newNum () {
  let num = 2;
  console.log(num);       // console.log는 단순히 console에 값을 나타내기 위한 것일 뿐
}                         // 함수의 output이 아니다.

// input x , output o
function newNum () {
 let num = 2;
 return num;              // return => output
}

// input o , output o
function newNum (num1) {  // num1 => input
  let num = num1 + 1;
  return num;             // return => output

• output 으로 return 한 값은 console에 찍을 수도 있고, 변수에 할당을 할 수도 있다.

function myNum () {
  let num = 3;
  return num;
}

// console.log 찍어보기
console.log(myNum());  // 3

// 변수에 할당하기
let newNum = myNum();
console.log(newNum);   // 3

📌Definition & Call

• 함수는 정의(선언)을 하고 호출(실행)을 시켜줘야한다.
• 함수를 호출(실행)시키지 않으면 아무런 동작도 일어나지 않는다.
• 호출을 해주는 순간에(이름을 불러주는 순간에) 함수가 동작을 한다.

1. Definition

함수를 정의하는 방법

• 함수 선언문
• 함수 표현식
• 화살표 함수 (ES6)
• Function 생성자 함수 (일반적으로 사용 X)

• 함수 선언문

• 위의 모든 함수 예제들이 '함수 선언문' 방식으로 정의한 함수이다.

함수 선언문 주의사항 ( 호이스팅 )

• 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장한다. 즉, 함수 선언, 초기화, 할당이 한번에 이루어진다. 그렇기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출이 가능하다.

function myNum (num1) {   // 함수명, 매개변수
  let newNum = num1 + 1;  // 함수 몸체
  return newNum;          // 결과값
};

• 함수 표현식

• 자바스크립트의 함수는 "일급 객체"이므로 아래와 같은 특징이 있다.
  1. 무명의 리터럴로 표현이 가능하다.
  2. 변수나 자료구조(객체,배열...)에 저장할 수 있다.
  3. 함수의 파라미터로 전달할 수 있다.
  4. 반환값(return value)으로 사용할 수 있다.
• 함수의 일급 객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 "함수 표현식" 이라고 한다.

let myNum = function(num1) {  // 함수 표현식에선 함수명 생략 가능
  return num1 + 1;            // 함수명 생략 => 익명 함수
}

• 화살표 함수 (ES6)

• 화살표 함수는 익명 함수로만 사용할 수 있어서, 함수를 호출하기 위해서는 함수 표현식을 사용한다.
• 콜백 함수로 사용할 수 있다.

화살표 함수 주의사항

• 일반 함수의 this와 화살표 함수의 this는 다르기때문에 주의가 필요하다.
• method, prototype, 생성자 함수를 사용할때엔 화살표 함수를 사용해서는 안된다.
  (참고 : https://poiemaweb.com/es6-arrow-function)

let newNum = function (num1) => {return num1 + 1;};

2. Call

• 함수를 실행하기 위해 필요한 인수를 매개변수를 통해 함수에 전달하여 함수를 실행시키는 명령어.
• 함수를 호출하면 함수 블록에 담겨있는 기능들이 실행이되고 그 실행결과를 반환값인 return으로 반환한다.

//호출
newName('shorry');

// 함수의 반환값을 변수에 할당.       
const myName = newName('shorry');        

---

Reference

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions
• https://poiemaweb.com/js-function
• https://velog.io/@minj9_6/JavaScript%EC%9D%98-%ED%95%A8%EC%88%98%EC%9D%98-%EC%A0%95%EC%9D%98%EC%99%80-%ED%98%B8%EC%B6%9C%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

---

---

Word of the day

내가 그의 이름을 불러주기 전에는
그는 다만
하나의 몸짓에 지나지 않았다.

내가 그의 이름을 불러주었을 때,
그는 나에게로 와서
꽃이 되었다.

김춘수 꽃 中

꽃도 함수인가보다...

End.