주벨로퍼의 개발 공부

1. 함수 표현식

let sayHi = function() {
  alert( "Hello" );
};

  자바스크립트에선 다음과 같이 변수에 함수를 할당할 수 있다. 이와같이 변수에 함수가 할당된 것을 함수 표현식이라고 한다.

  그렇다면 왜 자바스크립트에선 다른 언어와 달리 함수 표현식으로 나타내는 것이 가능할까?

  그것은 바로 자바스크립트가 함수를 값으로 취급하기 때문이다.

  즉, 함수를 다른 변수와 동일하게 다룰 수 있다는 의미이다. 이와 같은 언어를 일급 함수를 가졌다고 표현한다.

  일급 함수를 가진 언어에서는 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있다.

2. 콜백 함수

  앞서 자바스크립트에서는 다른 함수의 매개 변수로 함수를 제공할 수 있다고 했다.

  아래 예시를 살펴보자.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

  ask함수의 인수로 showOk, showCancel 이라는 함수가 전달됐고 confirm(question)의 결과에 따라 해당 함수를 실행함을 알 수 있다.

  이처럼 어떤 함수가 다른 함수의 인수로 전달되어 특정 동작후에 나중에 호출되는 함수를 콜백 함수라 한다.

  너가 특정 동작을 한 후에 나를 호출해줘라는 의미에서 call back이라 부르는 것이다.

3. 함수 표현식 vs 함수 선언문

  첫 번째 차이는 기본적인 문법의 차이이다.

function sum(a, b) {
  return a + b;
} //함수 선언문

let sum = function(a, b) {
  return a + b;
}; //함수 표현식

  두 번째 차이는 자바스크립트 엔진이 언제 함수를 생성하는지에 있다.

  함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다.

  따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

  하지만 함수 선언문은 조금 다르다.

  함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.

  이것이 가능한 이유는 자바스크립트 엔진이 변수 선언, 함수 선언문을 스크립트의 젤 위로 먼저 위치시키기 때문이다.

  이것을 Hoisting이라고 한다.

  따라서 스크립트는 함수 선언문을 먼저 처리한 이후에서야 나머지 코드를 실행한다.

  따라서 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것이다.

4. Arrow function(화살표 함수)

  화살표 함수는 문법의 생김새에 따라 이름이 지어졌다.

  굳이 구분할 것도 없지만 처음에 나도 화살표 함수를 접할 때 굉장히 익숙하지 않아서 적응하는데 애를 먹었다.

  화살표 함수는 크게 세 가지 형태만 기억하면 된다.

  4 - 1) 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. 괄호를 생략하면 코드 길이를 더 줄일 수 있다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 동일하다.

alert( double(3) ); // 6

  4 - 2) 인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 다만, 이 때 괄호는 생략할 수 없다.

let sayHi = () => alert("안녕하세요!");

sayHi();

  4 - 3) 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있다.

    이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 한다.

    그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 한다.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

*출처 : ko.javascript.info/function-expressions, ko.javascript.info/arrow-functions-basics, developer.mozilla.org/ko/docs/Glossary/First-class_Function