반응형
*자바스크립트에서는 함수로 객체다.
함수의 기본 기능이 코드 실행뿐 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질수 있다.
// 함수 선언 방식으로 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 프로퍼티를 추가하는게 가능
- add() 함수를 생성할 때 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동 저장
- add() 함수에 일반 객체처럼 result 프로퍼티를 동적 생성, 여기에 add() 함수를 호출한 결과를 저장한것 확인 가능
- 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
- foo 변수에 100이라는 값이 할당된 것처럼, bar 변수에는 함수 리터럴로 생성한 함수가 저장된 것을 볼 수 있다.
여기서 foo와 bar 할당문의 차이는 bar는 함수의 참조값을 저장하고 있으므로 bar()라고 했을때 실제 함수 호출이 가능 - 함수는 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.
- foo() 함수가 호출되면, 리턴값으로 전달되는 함수가 bar 변수에 저장
- ()함수 호출 연산자를 이용해 bar()로 리턴된 함수를 실행하는 것이 가능.
*함수 객체의 기본 프로퍼티
function add(x, y) {
return x + y;
}
console.dir(add);
콘솔로그 창을 보면
반응형
'study > JavaScript' 카테고리의 다른 글
project - hover animation(텍스트에 마우스 올리면 배경이 이미지로 바뀜) (0) | 2020.06.05 |
---|---|
Event - click 이벤트, mouseenter, mouseleave 이벤트 (0) | 2020.05.10 |
스타일 변경하기 (0) | 2020.05.10 |
선택자 (0) | 2020.05.10 |
문자열 추출, 합치기 , 타이머 설정 (0) | 2020.05.09 |
댓글