JS_기본 문법 (21)_ 일급 객체

JS의 일급 객체에 대해서 알아보자!

 

일급 객체 (First Class Object)

함수를 변수나 상수의 값처럼 다룰 수 있는 언어에 존재하는 개념이다.

JS의 함수도 이에 속한다. (JS의 함수는 객체의 한 종류이다.)

 

특징

1. 상수/변수에 할당될 수 있다.

2. 다른 함수의 인자로 전달될 수 있다.

3. 다른 함수의 결과값으로서 반환될 수 있다.

 

 

---

1. 할당

변수/상수에 함수명을 식별자로 넣어서 할당시킨다.

이때 주의할 점은 괄호를 붙이지 않는 것이다. (괄호를 붙이면 함수 실행 후 반환 결과를 할당하는 것)

 

예시 1)

function isOdd (num) {
  console.log(
    (num % 2 ? '홀' : '짝')
    + '수'
  );
  return num % 2 ? true : false;
};

const checkOdd = isOdd; //함수를 할당할 때에는 괄호를 붙이지 않는다!

 

console.log(checkOdd(5));

>>> 홀수
>>> true

 

예시 2)

화살표 함수도 변수/상수 할당의 예시 중 하나이다.

let f1 = (a, b) => a + b;
let f2 = (a, b) => a - b;

console.log(f1(2, 1), f2(2, 1));

>>> 3 1

 

객체와 배열의 값으로도 할당 가능

(1) 객체의 프로퍼티에 할당

let npc1 = {
  name: '',
  job: '상점주인',
  msg: function(job){
      job ? '어서오시게 모험자! 무엇을 사실텐가?' : '어서오시게 초심자여 무엇을 사실텐가?'
  }
}

 

console.log(npc1.msg(true));

>>> 어서오시게 모험자! 무엇을 사실텐가?

console.log(npc1.msg(false));

>>> 어서오시게 초심자여 무엇을 사실텐가?

 

(2) 배열의 원소로 할당

let funcArr = [
  (a, b) => a + b,
  (a, b) => a - b,
  (a, b) => a * b,
  (a, b) => a / b,
];

 

for (el of funcArr){
  console.log(el(4,2));
}

>>> 6
>>> 2
>>> 8
>>> 2

 

※ 객체에 함수 프로퍼티를 포함시킬 때 주의할 점!

객체에 함수 프로퍼티를 포함시킬 때, 객체 내의  다른 프로퍼티로의 접근이 필요한 경우가 있다.

이 때 this 키워드를 이용하면 된다.

this 키워드 사용 시 현재 속한 객체를 가리키게 되고

this.프로퍼티명 으로 활용할 수 있다.

 

이때 객체 리터럴의 프로퍼티로 화살표 함수를 포함시키는 경우 this 키워드를 사용해서는 안된다.

이는 function으로 정의된 함수와 화살표 함수의 차이점이다!

자세한 것은 추후에 다루어 보자.

 

 

2. 인자로 전달

함수가 다른 함수를 인자로 받을 수 있다.

 

이때, 전달받는 함수는 고차 함수, 전달되는 함수는 콜백 함수라고 한다.

 

예시 1)

let list = [1, 2, 3, 4];

//고차함수(arrayFunc), 콜백함수(func)
function arrayFunc(arr, func){
  for (item of arr){
    func(item);
  }
}

arrayFunc(list, console.log); //console객체의 log라는 키에 할당된 함수

>>> 1
>>> 2
>>> 3
>>> 4

위처럼 함수를 인자로 전달 받을 수 있다.

또한 함수를 인자로 받았을 때에는 해당 함수를 매개변수 명으로 사용한다.

 

 

예시 2)

//계산
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;

//판별
const isOdd = (num) => !!(num % 2); //!!으로 현재 bool값 반환
const isPositive = (num) => num > 0;

function calcAndEval (calc, eval, a, b){
  return eval(calc(a, b)); //calc의 반환 값을 다시 인자로 받음
}

console.log(
  calcAndEval(add, isOdd, 3, 2),
  calcAndEval(subtract, isPositive, 2, 3),
  calcAndEval(multiply, isOdd, 3, 4),
  calcAndEval(divide, isPositive, 3, 2),
);

>>> true false false true

 

함수를 전달할 때 익명함수도 이용할 수 있다.

 

 

3. 결과값으로 반환

마지막으로 함수의 결과값으로 함수를 반환하는 것이 가능하다.

 

예시 1)

function say(name, job){
  //함수를 반환
  return job
  ? function() {
    console.log(`안녕하세요 저는 ${name}이구요, 현재 직장인입니다.`);
  } : function() {
    console.log(`안녕하세요 저는 ${name}이구요, 아직 백수입니다.`);
  }
}

// 함수를 할당
const TomSay = say('Tom', true);
const DavidSay = say('David', false);

//반환받은 함수 실행
TomSay();
DavidSay();

>>> 안녕하세요 저는 Tom이구요, 현재 직장인입니다.
>>> 안녕하세요 저는 David이구요, 아직 백수입니다.