자바스크립트) 일급객체

✅면접 질문을 위한 요약본

1) 일급객체
- 일급시민처럼 어떠한 특별한 혜택을 받는 것이 아니라, 사용할 때 다른 요소들과의 아무런 차별이 없다는 것을 뜻한다.
2) 일급객체 충족하는 조건
- 변수에 데이터를 담을 수 있어야한다. (함수 표현식 이용)
- 함수의 파라미터로 전달 할 수 있어야한다. (콜백함수 형태로 자유롭게 이용가능)
- 함수의 리턴값으로 사용할 수 있어야한다.

0. 일급객체(first class object)

일급객체를 알아보기 전에 first class citizen, second class citizen 은 무엇일까?
first class citizen 이란 자유롭게 거주하고 일 할 수 있고, 출입국의 자유를 가지며, 투표의 자유를 가지는 시민이다.
second class citizen 은 시민 또는 합법적 거주자이지만, 시민권 및 사회 경제적 기회가 제한되어있는 시민을 의미한다.
ex) 19세기 초 참정권을 가진 남성이 fisrt class citizen 이라면, 참정권을 가지지 못했던 여성은 second citizen 이라고 할 수 있다.  
프로그래밍 언어 디자인에서, 특정 언어의 first-class citizens 이란 보통 다른 객체들에게 적용가능한 연산을 모두 지원하는 객체를 말한다. 
즉, '일급' 이란 뜻은 일급 시민 처럼 무슨 혜택을 받는 다는 뜻이 아니라, 사용할 때 다른 요소들과 아무런 차별이 없다는 것을 뜻한다.
 
아래와 같은 조건을 충족한 객체를 일컫는다. 

1. 변수에  데이터를 담을 수 있어야한다. (변수나 프로퍼티의 값으로 할당이 가능하다.)
2. 함수의 파라미터로 전달 할 수 있어야한다.
3. 함수의 리턴값으로 사용할 수 있어야한다.

 
자바스크립트에서 함수는 위 조건을 모두 만족하므로 일급객체이다.  (더불어, 객체, 배열도 일급객체에 속한다.)

※ 함수가 객체라니? 왜 함수가 객체야? ( = 값으로서의 함수)
단순히 위조건을 만족했다고 일급객체가 아닌, 왜 객체인지가 궁금했다.

- 먼저, 자바스크립트는 프로토타입 기반의 언어이기 때문에 함수가 일급객체로 동작할 수 있게 된다. 
자바스크립트에서 모든 객체는 '프로토타입' 이라는 다른 객체로부터 속성과 메소드를 상속받는다. 이러한 관계는 '프로토타입 체인'을 통해 이루어진다. 이 체인을 따라 올라가다 보면, 모든 객체의 프로토타입은 결국 'Object.prototype'에 도달한다.  함수 역시 Function.prototype을 가지며, 자바스크립트 함수는 Function 객체이다. 이는 'Object.prototype'에 연결된다. 이런 방식으로 함수는 표준 객체 메소드(apply,call,bind,toString(), length) 를 상속 받을 수 있다. 

- 자바스크립트에서 함수는 값으로 취급되기에 함수도 일반 객체처럼 취급될 수 있다는 것을 말한다.

값으로서 취급된다는 것은 위 일급객체의 조건처럼

1) 변수에 담을 수도 있고, 객체의 메소드로 담길 수도 있다.
2) 함수는 값이기 때문에 다른 함수의 파라미터로 전달 될 수 있다. 
3) 함수의 리턴값으로도 사용할 수 있다.
4)  함수 자체가 일반 객체처럼 프로퍼티를 생성하고 할당이 가능하다. 
5) 변수나 배열의 요소, 객체의 프로퍼티 등에도 할당이 가능하다.

위 5가지와 같은 동작을 할 수 있다는 것이다. 

 
4) 함수 자체가 일반 객체처럼 프로퍼티를 생성하고 할당이 가능하다.  의 예제코드

// 함수 선언문 방식으로 add() 함수 정의
function add(x,y) {
    return x + y;
}

// add()함수도 객체처럼 프로퍼티를 가질 수 있다.
// add()함수 객체에 result, status 프로퍼티를 추가해 본다.
add.result = add(3,4);
add.status = 'complete';

console.log(add.result); // 7
console.log(add.status); // 'complete'

add()함수는 마치 일반 객체처럼 result 프로퍼티를 동적으로 생성하고 add()함수를 호출한 결과를 저장한 것을 확인 할 수가 있다.
이렇게 일반객체의 접근방식처럼 add.result, add.status를 이용해 접근이 가능
다시말해서 자바스크립트에서 함수는 특정기능의 코드를 수행할 뿐만 아니라, 일반 객체처럼 자신의 프로퍼티를 가질 수 있는 특별한 객체라고 볼 수 있다.
 
5) 변수나 배열의 요소, 객체의 프로퍼티 등에도 할당이 가능하다. 의 예제코드

var process = [
    function(input){ return input + 10;}, // 1 + 1 = 11
    function(input){ return input * input;}, // 11 * 11 = 121
    function(input){ return input / 2;} // 121 / 2 = 60.5
];
var input = 1;

for(var i = 0; i < process.length; i++){
    input = process[i](input);
}

console.log(input); // 60.5

 
 

---

1. 변수에  데이터를 담을 수 있어야한다.

1) 함수 표현식 이용

- 함수 표현식을 통해 자유롭게 담을 수 있다.

const hello = function() {
	console.log("Hello World");
}

 
- 다음과 같은 함수를 만들때는, add 변수 안에 저장된 값은 함수이므로, 함수를 호출하지 않고 그 값을 아래처럼 전달 할 수 있다.

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

var newAdd = add;
newAdd(2,3) //5

 

2) method 에 할당하기

var movie = {
    name: '옥자',
    director: '봉준호',
    show: function() {
        console.log(this.name + ' ' + this.director);
    }
}

 

2. 함수의 파라미터로 전달 할 수 있어야한다.

- 콜백 함수 형태로 자유롭게 전달이 가능하다.

// 함수를 매개변수로 받는 함수 정의
function executeFunction(func) {
  func();
}

// 실행할 함수 정의
function myFunction() {
  console.log("Hello, world!");
}

// 함수를 매개변수로 전달하여 실행
executeFunction(myFunction); //Hello, world!

 

3. 함수의 리턴값으로 사용할 수 있다.

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

const a = hello();
a();

// 다음과 같이 hello 함수 내에서 hi라는 함수를 만들고, hi함수를 반환할 수 있다.
// hello 함수를 실행한 결과, hi함수가 반환되는데 이 리턴값을 a라는 변수에 넣어준다.
// 그리고 a()로 hi함수를 실행할 수 있다.

 
+) 아래과 같은 형식으로도 사용할 수 있다.

// 함수가 비슷한 역할을 한다면, 아래와 같이 활용할 수도 있다.

const hi = () => console.log("hi");
const hello = () => console.log("hello");
const niceToMeetYou = () => console.log("nice to meet you");
const howDoYouDo = () => console.log("how do you do?");

const functionList = [hi, hello, niceToMeetYou, howDoYouDo];
functionList.forEach((func) => func());

// hi, hello, niceToMeetYou, howDoYouDo 함수를 선언한다.
// 이 문법은 화살표 함수로, 자바스크립트의 새로운 문법이다.
// functionList에 4가지 함수를 모두 넣어준다.
// forEach 메서드를 이용해, 배열의 각 리스트를 func라는 이름으로 받아서 func()로 즉시 실행시킨다.

---

4. So, 일급객체로 뭘 할 수 있는데?

함수가 일급객체의 특성을 갖고있기 때문에 다른 데이터처럼 자유롭게 사용될수 있음을 의미한다.
따라서, 고차 함수, 콜백함수 등 다양한 고급패턴을 사용할 수 있게 된다.
 

---

참고자료
https://soeunlee.medium.com/javascript%EC%97%90%EC%84%9C-%EC%99%9C-%ED%95%A8%EC%88%98%EA%B0%80-1%EA%B8%89-%EA%B0%9D%EC%B2%B4%EC%9D%BC%EA%B9%8C%EC%9A%94-cc6bd2a9ecac
https://inpa.tistory.com/entry/CS-%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB-%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4first-class-object

👨‍💻 일급 객체(first-class object) 란?

https://hanamon.kr/javascript-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98%EC%99%80-%EC%BD%9C%EB%B0%B1-%EC%9D%BC%EA%B8%89%EA%B0%9D%EC%B2%B4%EB%9E%80/

[JavaScript] 고차 함수와 콜백(Callback) - 일급 객체란? - 하나몬

https://webclub.tistory.com/114

자바스크립트에서 함수는 값으로 취급된다