1. 함수(Function) 생성

javascript 에서 함수를 선언하는 방법은 3가지가 존재한다.

1.함수 선언문(function statement)
2.함수 표현식(function expression)
3.생성자(function)

// 1.함수 선언문(function statement)
	function a() { 
      console.log('a')
    		};
// 2.함수 표현식(function expression)
	const b = function() { 
      console.log('b')
    		};
	const c = ()=> console.log('c');
    
// 3.`생성자`(function)
	const d = new function('console.log('d')');
   
      

2. 함수 선언문과 함수 표현식의 차이

함수 선언문은 호이스팅에 영향을 받지만, 함수 표현문은 호이스팅에 영향을 받지 않는다.

함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

예를 들어, 아래의 코드를 실행할 때

//실행전

logMessage();
sumNumber();

function logMessage(){
  	return 'hello';
	}

const sumNumber = function(){
  	return 10+20;
	};

호이스팅에 의해 Javascript 해석기는 아래와 같이 인식한다.

//실행시
function logMessage(){
  	return 'hello';
	}
const sumNumber

logMessage(); // 'hello'
sumNumber(); // 'Uncaught ReferenceError: Cannot access 'sumNumber' before initialization'

sumNumber = function(){
  	return 10+20;
	};

위 코드 결과는 아래와 같다.

Uncaught ReferenceError: Cannot access 'sumNumber' before initialization

함수 표현식 sumNumber에서 const도 호이스팅이 적용되어 위치가 상단으로 끌어 올려졌다.

const sumNumber;

logMessage(); 
sumNumber(); 

하지만 실제 sumNumber에 할당될 function 로직은 호출된 이후에 선언 되므로,sumNumber는 함수로 인식하지 않고 변수로 인식된다.

호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지 할 수 있다.

3. 함수의 형태

함수는 값을 입력 받을수 있고, 계산에 대한 값을 반환 할 수 있다.
함수 선언시 입력 받을 argument를 정의 할 수 있다.

function(arg1,arg2){};

함수 호출 반환 값을 return으로 이용해서 전달 할 수 있다.
만약 return으로 값을 전달하지 않는다면, undifined을 전달한다.
return을 호출하면 이후에, 모든 처리는 일어나지 않는다.

//return을 호출하면 이후에, 모든 처리는 일어나지 않는다.
function hasReturn() {
  return "hello";
  console.log("every one");
}
console.log(hasReturn());//'hello'

//return으로 값을 전달하지 않는다면, `undifined`을 전달한다.
function noReturn() {}
console.log(noReturn());// undefined

4. 재귀 함수,콜백 함수

재귀함수

프로그래밍 언어에는 자기 자신을 다시 호출하는 재귀 개념이 존재한다.
Javascript 에도 재귀 함수를 구현 할 수 있다.

function recursionFunction(n) {
    if(!n) return 0;
    return n + recursionFunction(n - 1);
}
console.log(recursionFunction(5));
// (5 + (4 + (3 + (2 + (1 + 0)))));
// 15

콜백함수

Javascript 에서 함수를 값으로 이용할 수 있다.
때문에, 함수 인자로 전달도 가능하다.

const two = function () {
  return 2;
}
const five = function () {
  return 5;
}

const sum = function (callback1, callback2) {
    return callback1() + callback2();
}
console.log(sum(two, five));

5. 즉시 실행 함수

Javascript에는 즉시 실행 함수 IIFE (Immediately-invoked function expression) 개념이 존재한다.
함수를 선언하자마다 실행할 수 있다.

(function (arg) {
    console.log('hello', arg);
})('world');
// hello world

(function (arg) {
    console.log('hello', arg);
}('world'));
// hello world

즉시실행함수를 쓰는 이유

• 첫 로드 시 초기화 할 때 변수를 global하게 선언하고 싶지 않을 때
• 변수에 함수를 이용해 즉시 값을 할당하고 싶을 때
• 라이브러리 전역 변수 충돌 방지

6. Arrow Function

ES6 부터 Arrow Function 이 추가되었다.
arrow function 는 항상 익명이며, arguments 객체를 갖지 않는다.

var a = (param) => { return param }
var b = (param) => (param)
var c = (param) => param
var d = param => param

console.log(a('a')); // a
console.log(b('b')); // b
console.log(c('c')); // c
console.log(d('d')); // d