[Javascript/Function] function, inner function, arrow function(자바스크립트, 함수, 내부 함수, 함수 선언식, =>)

📚 function, inner function, arrow function

• function 키워드는 함수를 생성하는 키워드
• 자바스크립트에서 함수는 일급 객체(일급 함수)
• 고차 함수 가능 -> 함수를 인자로 받고 함수를 리턴할 수 있음

---

📗 function

함수

• 함수 선언

// 함수 선언
function name(params) {
  // 함수의 기능
  return;
}

function add(a, b) {
  return a + b;
}

var result = add(10, 20);
console.log(result);

  30

• 기본 매개변수를 지정

function add(a = 1, b = 2) {
  return a + b;
}

var result = add(10, 20);
console.log(result);
console.log(add());

  30
  3

• 함수 표현식
  함수 표현식으로 변수에 함수를 할당할 수 있고 이러한 함수를 익명 함수라고도 한다

const add = function(a, b) {
  return a + b;
};
const result = add(10, 30);
console.log(result);

  40

• 호이스팅(hoisting)
  일반적인 선언 방법과 표현식의 차이점은 함수를 구현한 코드의 위치에 차이점이 있다 즉, 호이스팅 차이가 있다

test1("일반 선언식이 실행됨");
test2("함수 표현식이 실행됨");

// 일반적인 함수 선언 방식
function test1(params) {
  console.log(params);
}

// 함수 표현식으로 선언한 방식
var test2 = function(params) {
  console.log(params);
};

  일반 선언식이 실행됨
  test2('함수 표현식이 실행됨');
  ^

  TypeError: test2 is not a function

---

📒 inner function

함수 안에 함수를 선언하고 사용이 가능

• 내부 함수 구현하기

  function addSQ(a,b) {
  function square(x) {
  return x \* x;
  }
  return square(a) + square(b);
  }
  var a = addSQ(5,6);
  var b = addSQ(7,8);
  var c = addSQ(9,10);

  console.log(a);
  console.log(b);

  61
  113
  181

• 내부 함수를 활용해서 클로저(closure)를 구현
  내부 함수를 활용해 클로저 구현이 가능하다. 클로저는 내부 함수를 리턴하는데 이 내부 함수는 외부 함수의 변수나 파라미터를 사용할 수 있다

function closure(a, b) {
  return function(c = a, d = b) {
    return c + d;
  };
}

var result = closure(5, 5);
console.log(result);
console.log(result());

  [Function]
  10

---

📒 arrow function

구문이 짧고 항상 익명인 함수

• 일반 함수와의 가장 큰 차이점은 this

• 화살표 함수 전까지 모든 함수는 새로운 this 값을 정의했음

• 화살표 함수 구현

var test = params => {
  console.log(params);
};

test("화살표 함수 실행");

  화살표 함수 실행

• 매개변수가 하나인 화살표 함수 구현
  소괄호를 생략할 수 있다

var test = params => {
  console.log(params);
};

test("화살표 함수 실행");

  화살표 함수 실행

• 리턴을 생략한 화살표 함수 구현
  함수 몸체에 리턴만 존재한다면 중괄호를 생략할 수 있다

// var test = params => {return params*2};
var test = params => params * 2; // 위와 동일한 동작을 함

console.log(test(3));

  6

• 바인딩되지 않은 this
  화살표 함수는 자신을 포함하는 외부 스코프에서 this를 계승받습니다. 즉, 화살표 함수는 자신만의 this를 생성하지 않습니다.

var test = () => {
  console.log(this);
};

test();

  {}

• 화살표 함수를 사용하면 안 되는 경우

  ❌ 객체의 메서드로 선언하는 경우

  • 메소드를 소유한 객체가 아닌 상위 컨텍스트의 객체를 가리키게 됨

  ❌ 생성자의 함수로 사용하는 경우

  • 화살표 함수는 prototype을 갖고 있지 않기 때문에 생성자 함수로 사용하면 안 됨

  ❌ 등등..