[JavaScript] 일급 객체

728x90

일급객체는 함수를 변수와 같이 다루는 언어에 있는 개념입니다. 즉, 파이썬이나 자바스크립트가 일급객체에 대한 개념을 가지고 있습니다.

 

자바스크립트의 함수는 객체입니다.

function add (a, b) { return a + b; }
console.log(typeof add); //function
console.log(add instanceof Object); // true ->변수 instanceof Object는 변수가 객체인지 확인하는 메소드

 

일급객체의 특성으로는 3가지가 있습니다.

첫번째로 상수 또는 변수에 할당될 수 있어야합니다.

두번째로 다른 함수의 인자로 전달될 수 있어야합니다.

세번째로 다른 함수의 결과값으로 반환될 수 있어야 합니다.

 

1. 할당

function isOddNum (number) {
  console.log(
    (number % 2 ? '홀' : '짝')
    + '수입니다.'
  );
  return number % 2 ? true : false;
};

// checkIfOdd 상수에 isOddNum 함수를 할당
const checkIfOdd = isOddNum; // 뒤에 괄호 없음

console.log(checkIfOdd(9)); 
//출력:
//홀수입니다.
//true


let x = 7, y = 3;

let func1 = (a, b) => a + b;
let func2 = (a, b) => a - b;
console.log(func1(x, y), func2(x, y));

func1 = func2
console.log(
	func1(x, y), //10 4
    func2(x, y) // 4 4 
);

// 객체나 배열에서도 사용가능
//객체의 key를 프로퍼티라고 함
let person = {
  name: 'zero',
  age: 30,
  married: true,
  introduce: function (formal) { //
    return formal
    ? '안녕하십니까. 저는 zero라고 합니다.'
    : '안녕, 나는 zero야.';
  }
};

console.log(person.introduce(true)); //안녕하십니까. 저는 zero라고 합니다.
console.log(person.introduce(false)); //안녕, 나는 zero야.

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

for (cal of cals) {
  console.log(cal(5, 3));
}
//출력:
//8
//2
//15
//1.6666666666666667

 

2. 다른함수에 인자로 전달

함수가 다른 함수의 인자로 전달받을 때 전달받는 함수를 고차함수라고 하고 전달되는 함수를 콜백함수라고 합니다.

 

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

function doInList (args, func) { //첫번째 인자는 args로 두번째 인자는 func로 지정
  for (item of args) {
    func(item);
  }
}

//doInList는 고차함수, console.log는 콜백함수임
doInList(list, console.log); 
//list의 요소를 반복하면서 func으로 지정된 두번째 매개변수인 함수에 list 요소를 넣어서 실행함


//위를 풀어서 쓰면 아래와 같음
for(num of list){
	console.log(num);
}

 

매개변수로 사용할 함수는 이름이 없는 익명함수를 사용할 수도 있습니다.

function doNTimes (func, repeat, x, y) { 
  let result = x; //1. x값을 result 변수에 저장
  for (i = 0; i < repeat; i++) { //3. repeat만큼 반복
    result = func(result, y); //2. 함수 func에 result값과 y를 매개변수로 넣어서 실행한 후 result에 저장
  }
  return result; //4. result를 반환
}

console.log(
  doNTimes((x, y) => x * y, 3, 5, 2),
  //5를 result에 저장 ->  5*2=10를 result에 저장 -> 10*2=20을 result에 저장 -> 20*2=40을 result에 저장 -> 3번 반복이 끝났으므로 40을 반환
  doNTimes((x, y) => x / y, 3, 5, 2),
  //5를 result에 저장 5/2 = 2.5를 result에 저장 -> 3번 반복 -> 0.625반환
);

 

인자로 들어갈 함수는 2개 이상이 될 수도 있습니다.

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

// 판별함수
const isOdd = (number) => !!(number % 2);//홀짝 판별 -> 홀수는 true
const isPositive = (number) => number > 0; //음양 판별 -> 양수는 true

function calcAndEval (calc, eval, x, y) {
  return eval(calc(x, y)); // x,y를 먼저 계산함수에 넣고 그 결과값을 판별함수에 넣어서 반환
}

console.log(
  calcAndEval(add, isOdd, 5, 7), // false -> 5+7=14 -> 짝수이므로 false
  calcAndEval(subtract, isPositive, 5, 10), // false -> 5-10 = -5 -> 음수이므로 false
  calcAndEval(multiply, isOdd, 5, 7) // true 5*7 = 35 -> 홀수이므로 true
);

3 다른 함수의 결과값으로 반환

함수를 정의하면서 return에 함수를 넣어 결과값으로 반환할 수도 있습니다.

function getIntroFunc (name, formal) { 
  return formal //formal값에 따라 다른 함수를 반환
  ? function () {
    console.log(`안녕하십니까, 저는 ${name}입니다.`);
  } : function () {
    console.log(`안녕~ 난 ${name}이라고 해.`);
  }
}

const intro1 = getIntroFunc('zero', true);
const intro2 = getIntroFunc('week', false);

intro1(); //안녕하십니까, 저는 zero입니다.
intro2(); //안녕~ 난 week이라고 해.


//익명함수로도 사용가능
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

function combineFuncs(func1, func2, func3) { //인자로 3개의 함수를 넣음
  return (x, y) => func3(func2(func1(x, y), y), y); //x,y값을 받아 func1,func2,func3 수행
}

const add_mul_sub = combineFuncs(add, mul, sub); //덧셈, 곱셈, 뺄셈을 매개변수로 넣음
const mul_add_div = combineFuncs(mul, add, div); // 곱셈, 덧셈, 나눗셈을 매개변수로 넣음
const div_add_mul = combineFuncs(div, add, mul); // 나눗셈, 덧셈, 곱셈을 매개변수로 넣음

console.log(
  add_mul_sub(10, 4), //52 -> ((10+4)*4)-4 = 52
  mul_add_div(10, 4), //11 -> ((10*4)+4)/4 = 11
  div_add_mul(10, 4) // 26 -> ((10/4)+4)*4 = 26
);

 

 

 

'JAVASCRIPT Programming > Javascript' 카테고리의 다른 글

[JavaScript] 클래스  (0) 2024.08.11
[JavaScript] 객체  (0) 2024.08.06
[JavaScript] 제어문  (0) 2024.07.21
[JavaScript] 함수  (0) 2024.07.21
[JavaScript] 블록과 스코프  (0) 2024.07.18