[Javascript] 함수

1. 자바스크립트의 함수

• 여러 개의 인자를 받아서, 그 결과를 반환한다.
• Javascript 함수는 return 값이 반드시 존재하며, 명시하지 않으면 undefined를 반환한다.
• 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 발생하지 않는다. -> 별도의 에러처리 필요
  • 만약, 파라미터가 1개일 때 인자를 주지 않으면, 이미 정의된 파라미터(매개변수)는 undefined라는 값을 갖게 된다.
  • undefined는 변수가 초기화 됐지만 값이 할당되지 않았음을 의미한다.
  • 만약, 파라미터가 1개일 때 인자의 개수가 더 많더라도 오류가 발생하지 않는다.

---

1. 함수 선언문(정의문)

function 키워드와 함수명, 매개변수 목록, 함수 몸체로 구성된 것.

function foo() {}

2. 함수 표현식(정의식)

함수의 일급객체 특성을 이용해 함수 리터럴 방식으로 함수를 정의하고 변수에 할당하는 방식.

1) 일급 객체 

자바스크립트의 함수는 일급 객체로 다음과 같은 특징을 갖는다.

• 무명의 리터럴로 표현 가능
• 변수나 자료 구조(객체, 배열)에 저장 가능
• 함수의 파라미터(인자)로 전달 가능
• 반환값으로 사용 가능

const bar1 = function bar2() {}; // 기명 함수
const hello = function () {}; // 익명 함수
const foo = hello;

bar1(); // 가능
bar2(); // 에러

console.log(bar1.name); // bar2
console.log(hello.name); // hello
console.log(foo.name); // hello

3. 기명함수와 익명함수

• 기명 함수 표현식
  • 함수 범위 안 쪽에서 현재 함수를 참고하고 싶다면, 기명 함수를 생성해야 함. 이는 함수 내부 범위(외부에서는 불가)에서만 사용할 수 있음.
  • 함수명은 함수 몸체(함수 표현식, 함수 선언문 모두)에서 자신을 재귀적으로 호출하거나 자바스크립트 디버거의 식별자로 사용.
• 함수가 할당된 <변수>의 name 속성 : 함수가 할당되면 해당 변수는 name 속성을 가지게 되고 이는 다른 변수에 할당되더라도 변하지 않음.
  • 익명 함수(함수의 이름 생략되었을 경우) : 해당 변수명(암묵적)
  • 기명 함수(함수의 이름이 있을 경우) : 기명 함수의 이름(명시적)

function foo() {} // 함수 선언문

var foo = function foo() {}; // 자바스크립트 엔진에 의해 함수 표현식으로 변경된 형태

• 함수 선언문의 경우는 자바스크립트 엔진에 의해 기명 함수와 같은 이름을 가진 변수에 할당된 함수 표현식의 형태로 변경된다.(기명 함수 표현식)
• 함수명이 아닌, 동일한 변수명으로 호출하는 것이다.
• 함수 선언문도 함수 표현식과 동일하게 함수 리터럴 방식으로 정의됨

4. 함수 표현식과 호이스팅(Hoisting)

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언한다. (함수의 최상부나 전역 범위에서) 이를 호이스팅이라고 한다.
  • var, let, const, function, function*, class 등 모든 선언을 호이스팅함.
  • 이로 인해, 모든 선언문이 선언되기 이전에 참조가 가능해진다.
  • 함수 선언문으로 정의된 함수는 함수 선언, 초기화, 할당이 한 번에 이루어지므로, 어느 위치에서도 호출이 가능하다.
• 하지만, 함수 표현식은 함수 선언문과 달리 변수 호이스팅만 발생하기 때문에 함수 표현식을 정의하기 전에는 사용할 수 없다.
  • 변수 호이스팅은 변수 생성, 초기화, 할당이 분리되어 진행된다. undefined로 초기화 후 할당문에서 할당이 이루어진다.
  • 함수 표현식은 스크립트 로딩 시점에 함수를 할당하지 않고 runtime시에 해석되므로, 정의 전에는 사용할 수 없다.

console.log(printName); // undefined 출력 : var hoisting으로 인해 선언은 끌어올려졌으나, 값이 할당되지 않음
printName() // Function Error 발생

var printName = function(){
	return 'function이다';
}

console.log(printName()); // 'function이다' 출력

---

1. 함수와 가변 인자의 구현(arguments 객체)

• 함수가 실행되면 그 안에 arguments라는 특별한 지역변수가 자동으로 생성된다.
• arguments는 인수(argument)를 담고 있는 유사 배열 객체이다.
• 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.
• 이 때 넘어온 인자를 arguments에서 배열의 형태로 하나씩 접근할 수 있다. (배열은 아님)

2. Arrow Function(화살표 함수)

function getName(name) {
   return "Kim " + name ;
}

//위 함수는 아래 arrow함수와 같다.
var getName = (name) => "Kim " + name;

3. 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)

함수의 정의와 동시에 실행되는 함수로 최초 한 번만 호출되며 다시 호출할 수 없다. 초기화 처리 등에 사용된다.

(function immediately() { // 기명
    //코드
}());

(function () { // 익명
    //코드
}());

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

https://medium.com/ibare-story/e252506f8525

https://www.boostcourse.org/web316/lecture/254283?isDesc=false 

https://poiemaweb.com/js-function