본문 바로가기
study/JavaScript

함수 객체

by Elfen Lied 2020. 5. 25.
반응형

*자바스크립트에서는 함수로 객체다.

함수의 기본 기능이 코드 실행뿐 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질수 있다.

 

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

// add() 함수 객체에 result, status프로퍼티 추가
add.result = add(3, 2);
add.status = "OK";

console.log(result);    //5
console.log(status);    //"OK"

위처럼 함수 선언문 방식으로 add() 함수를 생성 후,  일반 객체처럼 result와 status 프로퍼티를 추가하는게 가능

 

  1. add() 함수를 생성할 때 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동 저장
  2. add() 함수에 일반 객체처럼 result 프로퍼티를 동적 생성, 여기에 add() 함수를 호출한 결과를 저장한것 확인 가능
  3. add() 함수 객체의 status 프로퍼티도 일반 객체에서의 접근 방식처럼 add.status를 이용해 접근 가능

 

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

자바스크립트 함수는 다음과 같은 동작이 가능

  • 리터럴에 의해 생성
  • 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능
  • 함수의 인자로 전달 가능
  • 함수의 리턴값으로 리턴 가능
  • 동적으로 프로퍼티를 생성 및 할당 가능

- 일급 객체 (First Class)라 부름

일급 객체라 함은 컴퓨터 프로그래밍 언어 분야에서 쓰이는 용어로

위에서 나열한 기능이 모두 가능한 객체를 말한다.

 

 

*변수나 프로퍼티의 값으로 할당

// 변수에 함수 할당
var foo = 100;
var bar = function () { return 100; };
console.log(bar()) // 100


// 프로퍼티에 함수 할당
var obj = {};
obj.baz = function () { return 200; };
console.log(obj.baz());  // 200
  1. foo 변수에 100이라는 값이 할당된 것처럼, bar 변수에는 함수 리터럴로 생성한 함수가 저장된 것을 볼 수 있다.
    여기서 foo와 bar 할당문의 차이는 bar는 함수의 참조값을 저장하고 있으므로 bar()라고 했을때 실제 함수 호출이 가능
  2. 함수는 1과 같이 변수 이외에 예제의 baz처럼 객체의 프로퍼리나 배열의 원소 등에도 할당이 가능

 

*함수 인자로 전달

아래 함수를 보면 foo()는 함수 표현식 방법으로 생성한 함수로서, 인자로 받은 func 함수를 내부에서 함수 호출 연산자()를 붙여 호출하는 기능을 한다.

// 함수 표현식으로 foo() 함수 생성
var foo = function(func) {
	func();  // 인자로 받은 func() 함수 호출
}

// foo() 함수 실행
foo(function() {
	console.log("Function can be used as the argument.");
});

결과
Function can be used as the argument.

 

 

*return값으로 활용

// 함수를 리턴하는 foo() 함수 정의
var foo = function () {
	return function () {
    	console.log("this function is the return value.")
    };
};

var bar = foo();
bar();

결과
this function is the return value.
  1. foo() 함수가 호출되면, 리턴값으로 전달되는 함수가 bar 변수에 저장
  2. ()함수 호출 연산자를 이용해 bar()로 리턴된 함수를 실행하는 것이 가능.

 

*함수 객체의 기본 프로퍼티

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

console.dir(add);

콘솔로그 창을 보면

반응형

댓글