함수와 일급 객체

이보아·2024년 5월 24일
0

모던_자바스크립트

목록 보기
8/18
post-thumbnail

일급 객체

일급 객체의 조건 💫

  • 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능
  • 변수, 자료구조(객체, 배열등)에 저장 가능
  • 함수의 매개변수에 전달 가능
  • 함수의 반환값으로 사용 가능
// 1.무명의 리터럴 2.변수에 저장 가능 3.런타임에 함수 리터럴이 평가되어 함수 객체 생성 변수에 할당
const increase = function (num) {
   return ++num;
}

const decrease =  function (num) {
   return --num;
}

// 함수는 객체에 저장할 수 있다. 
const auxs = {increase, decrease}

// 4. 함수의 매개변수에 전달 가능 4. 함수의 변환값으로 사용 가능 
funstion makCounter(aux) {
  let num = 0;

 return function () {
    num = aux(num)
    return num;
 };
}

// 함수의 매개변수에 전달 가능 
const increaseer = makeCounter(auxs.increase);
console.log(increase) // 1
console.log(increase) // 2 


// 함수의 매개변수에 전달 가능 
const decrease  = makeCounter(auxs.decrease);
console.log(decrease()) // -1
console.log(decrease()) // -2

📄 일급 개체란? 함수를 객체와 동일하게 사용할 수 있다는 의미다.
👉 함수와 일반 객체의 차이점 : 일반 객체는 호출 불가능 하지만 함수는 호출 가능하고 함수 고유의 프로퍼티를 소유한다.


함수 객체의 프로퍼티

함수는 객체이기 때문에 프로퍼티를 가질 수 있다.

스크린샷 2024-05-24 095444

function square(num) {
 return num * num;
}

console.log(Object.getOwnPropertyDescriptors(square))
console.log(Object.getOwnPropertyDescriptors(square,'__proto__')); // undefined -> __proto__는 Object.prototype 객체의 접근가 프로퍼티이다. 

👉 아래 스린샷에서 위의 코드의 함수의 모든 프로퍼티의 프로퍼티 어트리뷰트를 Object.getOwnpropertyDescriotors 메서드로 확인 해볼 수 있다.

image

arguments 프로퍼티

함수 객체 arguments 프로퍼티 값은 arguments 객체다.

  • arguments 함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회 가능한 유사 배열 객체
  • 함수 내부에서 지역 변수처럼 사용 가능
  • 함수 외부에서는 참조 불가능
function multiply(a, b) {
    console.log(arguments);
    return a * b;
}
console.log(multiply()); // NaN
console.log(multiply(1)); // NaN
console.log(multiply(1, 2)); // 2
console.log(multiply(1, 2, 3)); // 2

자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않음 -> 에러가 발생하지 않는다. 몸체 내에서 암묵적으로 매개변수가 선언되고, undefined로 초기화된 이후 인수가 할당된다. 인수를 더 많이 전달한 경우 초과된 인수는 무시된다. -> 버려지는것은 아니고 프로퍼티에 보관된다.

  function sum(){
   let res = 0;

   for (let i =0; i <arguments.lengrh; i++){
   res + arguments[i]
}
    return res;
}
 console.log(sum()) //0
 console.log(sum(1,2)) //3
 console.log(sum(1,2,3)) //6

  • arguments 객체는 매게변수 개수를 확정할 수 없는 가변 인자 함수를 구현할때 유용하다.
  • 📄 유사 배열 객체와 이터러블이란? ES6에서 도입된 이터레이션 프로토콜을 준수하며 순회 가능한 자료구조인 이터러블이 된다. 이터러블 개념이 없던때에는 arguments객체는
    유사 배열 객체로 구분됨 하지만 이터러블 도입 후 arguments은 유사객체이면서 이터러블이다.

caller 프로퍼티

ECMAscipt 사양에 포함되지 않은 비표준 프로퍼티다.

function foo(func){
   return func();
}
function bar(){
   return 'caller :' + bar.celler;

// 브라우저 실행한 결과
 console.log(foo(bar)) // caller : function foo(func) {.....}
 console.log(bar()) // caller: null -> 호출한 함수가 없기때문에 프로퍼티는 null을 가르킨다. 
}

length 프로퍼티

함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.


function foo(){
 console.log(foo.length); // 0 
}

function foo1(x){
  return x;
}
 console.log(foo1.length); // 1

function foo2(x,y){
  return x * y;
}
 console.log(foo2.length); // 2

name 프로퍼티

함수 이름을 나타낸다. ES6 정식 표준이 됬다. ES5와 다르게 동작하므로 주의하자 ( ES5 : 빈문자열 값 / ES6 : 함수 객체를 가리키는 식별자 값)

let namedFunc = function foo1(){
  console.log(namedFunc.name); // foo1
}

let anonymousFunc = function(){
//  ES5: name 프로퍼티는 빈 문자열 값을 갖음
//  ES6: name 프로퍼티는 함수 객체를 가리키는 변수 이름을 값으로 갖음
  console.log(anonymousFunc.name); // anonymousFunc
}

 function foo2(){}
 console.log(foo2.name); // foo2

proto접근자 프로퍼티

모든 객체는 [[prototype]] 내부 슬롯을 갖는다. 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티이다.

const obj = [a:1];
// 객체 리터럴 방식으로 생성한 객체 프로토타입 객체는 Object.prototype이다.
console.log(obj.__proto__ === Object.prototype); //true

// 객체 리터럴 방식으로 생성한 객체는 프로토타입 객체인 Object.prototype 프로퍼티는 상속 받음
// hasOwnProperty 매서드는  Object.prototype의 메서드이다.
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('__protp__')); // false 

prototype 프로퍼티

생성자 함수로 호출할 수 있는 함수 객체

// 함수 객체는 prototype 소유함 
(function () {}).hasOwnProperty('prototype'); // true
// 일반 객체는 prototype 소유하지 X
({}).hasOwnProperty('prototype'); // false
profile
매일매일 틀깨기

0개의 댓글