first class object (1급 객체)

JavaScript의 함수는 1급 객체(first class object)이다.

1급 객체(first class object)에 대해 얘기하려면 먼저 1급 시민(first class citizen) 부터 얘기해야 하는데,
시민은 시민이지 1급 시민이란 뭘까?

👩🏻‍🏫 1급 시민?

📨 1급 시민은 투표권이 있다.
👨🏻‍🏭 1급 시민은 군인이 될 수 있다.
🙅🏼‍♂️ 1급 시민은 정치에 참여 할 수 있다.

19세기 초 영국에서는 남성을 1급 시민, 여성을 2급 시민으로 분류했으며, 2급 시민은 정치에 참여 할 수 없었다.
즉, 1급 시민이라는 말은 권한을 많이 누리는 대상이라고 볼 수 있다.

1급 시민 (first class citizen)

프로그래밍 언어에서 1급 시민이란 다음과 같은 조건을 충족하는 것을 말한다.

const a = 1; // 변수에 담을 수 있다.
function f1(num) {
  // parameter로 전달할 수 있다.
  const b = num + 1;
  return b; // return value으로 전달할 수 있다.
}
console.log(f1(a)); // 2가 출력

⇒ 대부분의 프로그래밍 언어에서 number 와 strung 은 1급 시민의 조건을 충족한다.

1급 객체 (first class object)

1급 객체란, 1급 시민의 조건을 충족하는 객체(Object) 이다.
javascript의 function도 객체이므로, 1급 객체의 조건을 충족한다.

const a = {msg: "a는 1급 객체"} // 변수에 담을 수 있다.
function f1 (a) { // parameter로 전달할 수 있다.
  const b = a
  b.msg2 = "2번째 메세지"
  return b  // return value으로 전달할 수 있다.
}
console.log(f1(a)) // {msg: 'a는 1급 객체입니다.', b: '이것은 2번째 메세지입니다.'} 출력

1급 함수 (first class function)

마찬가지로, 1급 시민의 조건을 충족하는 함수를 1급 함수라고 부른다.

단, 1급 함수는 1급 시민의 조건과 더불어 다음과 같은 추가적인 조건을 요구한다.

javascript의 function은 1급 시민, 객체, 함수를 모두 만족시킨다. (보통은 1급 객체라고 부른다.)

1급 객체가 대체 뭐길래 중요한걸까?

⇒ 바로 1급 객체는 고차 함수(high order function)가 가능하기 때문!!

(함수를 넘겨주기 위해 클래스를 만들고...인스턴스를 만들고...할 필요 없이 JavaScript의 each, filter, map, sort 등의 함수들을 목적에 맞게 인자로 바로 넘겨줄 수 있어서 매우 편리!!)

또한, 클로져(closure)와 만날때도 여러가지 장점이 생기는데, 사실 나도 아직 뭔소린지 모르겠당....😂

고차 함수와 클로져는 기회 될 때 다시 공부해서 정리해봐야겠다.

아무튼 결론은 javascript의 function 짱짱맨!!!

Function expression (함수 표현식)

const print = function () { // anonymous function
	console.log("print");
}
print(); // print 출력

const printAgain = print;
printAgain(); //print 출력

console.log(sum(4, 2)); //6 출력, 함수 선언보다 호출을 먼저 했는데 선언이 hoisting되어 정상적으로 호출 됨

function sum(a, b) {
	const result = a + b;
  return result;
}

• 코드 중에 값으로 변환될 수 있는 부분을 표현식 (expression)이라고 부른다.
• Function declaration (함수 선언식)은 hoisting된다.

:: 텍스트와 문자열의 연결

alert("2 더하기 2는 " + 2 + 2);
는 어떻게 출력될까? 2 더하기 2는 4?
실행해보면, 2 더하기 2는 22 라는 알림창이 뜬다.

프로그래밍은 왼쪽에서부터 순서대로 실행되기 때문에 이런 결과가 나타나는것!

참고로 위의 경우에서 2 더하기 2는 4 를 정상적으로 나타내는 방법은
의 2가지 방법이 있다!

1. Callback function

• 이름 그대로 나중에 호출되는 함수
• 함수 등록 후에 코드상에서 호출하는 것이 아니라, 특정 이벤트가 발생하거나 특정 시점에 도달했을때 자동으로 시스템에서 호출하는 함수

function randomQuiz(answer, printYes, printNo) { // 특정 이벤트에서 호출, 이것이 바로 Callback!
  if (answer === "solmi") {
    printYes(); // answer와 일치하면 printYes 함수를 호출
  } else {
    printNo(); // answer와 일치하지 않으면 printNo 함수 호출
  }
}

const printYes = function () {
  console.log("yes!!");
};
const printNo = function () {
  console.log("No!!");
};

randomQuiz("coder", printYes, printNo); //"No!!" 출력
randomQuiz("solmi", printYes, printNo); //"Yes!!" 출력

2. Anonymous function (익명 함수)

function(x, y) { // 익명 함수는 이름이 없어서 이름을 가지고 호출 할 수 없다.
  return x + y;
}

const add = function(x, y) { // 변수에 저장한 후에 변수의 이름을 통해 호출
  return x + y;
}

add(1, 2); // 3 출력

• 함수를 만든 쪽이 아니라 다른 쪽에서 그 함수를 호출할 때 많이 쓴다. (함수를 인수로 넘겨줄 때)

3. Named function

const printNo = function ptint() {
	console.log("no");
	print(); // 함수 안에서 본인 함수를 호출 가능
};

• 디버깅 할 때, error stack trace에서 에러가 발생한 함수의 이름을 나타내기 위해 이름을 붙인다.

  stack property를 통해 접근할 수 있는데, 에러를 일으킨 파일에 대한 history 를 전달해준다.(고 한다. 잘 모름)
  디버깅에 대해선 좀 더 고수가 되면 정리해봐야지....

• 그리고 예제처럼 함수 안에서 본인 함수를 호출할 때 쓰인다. (예제처럼 작성하면 메모리 터져버리지만, 아무튼 조건값이나 특정 로직을 넣어서 어떤 값을 계산한다던지 등등 활용 방법이 많이 있다.)

4. Arrow function

• ES2015 (ES6)부터 추가되었다.
• 항상 이름이 없는 Anonymous function 이다!
• (매개변수 목록) => {함수 내용} 형식으로 작성

const add = function (x, y) {
  return x + y;
}

숫자 두개 더할뿐인데 3줄이나 차지하는 함수.......
이렇게 작성 가능하다!

const add = (x, y) => x + y;

1. 화살표 함수의 매개변수가 하나라면, 괄호 생략
2. 화살표 함수의 내부가 하나의 구문으로 이루어졌다면, 중괄호 생략 ⇒ 구문의 결과값이 곧 함수의 반환값

💁🏻‍♀️ 화살표 함수는 표기법이 간단해서 익명 함수를 다른 함수의 인수로 넘길 때 주로 사용한다.

[1, 2, 3, 4, 5].filter(x => x % 2 === 0);`

Bonus! IIFE

• 즉시 실행 함수 표현
  (IIFE, Immediately Invoked Function Expression)

function hello() {
  console.log("hello");
}
hello();

이렇게 호출할 수도 있지만, 함수 선언하고 바로 호출할 거라면

(function hello() {
  console.log("hello");
})();

⇒ 이렇게 함수 전체를 ()로 묶고, 괄호 다음에 함수 호출하듯이 (); 를 작성해주면 즉시 호출이 가능하다!

Quiz!!

💯 function calculate (command, a, b)
1. command에 따라 a와 b의 숫자값을 가지고 계산되는 함수 만들기!
2. command : add, subtract, divide, multiply, remainder

내 풀이

function calculate(command, a, b) {
  switch (calculate) { // switch()에 calculate 함수명을 써버렸당..
    case "add":
      return a + b;
    case "subtract":
      return a - b;
    case "divide":
      return a / b;
    case "multiply":
      return a * b;
    case "remainder":
      return a % b;
    default:
      console.log(
        "add, subtract, divide, multiply, remainder 중에서 입력해주세요."
      );
      break;
  }
}
console.log(calculate("remainder", 44, 5)); // 왜 출력이 안되지?

⇒ switch 구문이 익숙하지 않아서 ()에 뭘 넣을지 한참 고민했다....
calculate 넣고 안되니까 구글링 했는데 검색어가 잘못됐던건지 글도 안나오고ㅠㅠ
⇒ 실행이 안되면 이것저것 값을 다 넣어보자ㅠ

정답? 개선한 코드!

function calculate(command, a, b) {
  switch (command) {
    case "add":
      return a + b;
    case "subtract":
      return a - b;
    case "divide":
      return a / b;
    case "multiply":
      return a * b;
    case "remainder":
      return a % b;
    default:
      console.log(
        "add, subtract, divide, multiply, remainder 중에서 입력해주세요."
      );
      break;
  }
}
console.log(calculate("remainder", 44, 5));