-
[JAVASCRIPT] 함수와 프로토타입 체이닝(1)Programming/JAVASCRIPT 2019. 12. 4. 17:42
함수 정의
함수 리터럴
ex) 함수 리터럴을 통한 add() 함수 정의
// 함수 선언문
function add(x, y){
return x + y;
}
함수 선언문 방식으로 함수 생성
* 함수 선언문 방식으로 정의된 함수는 반드시 함수명이 정의되어 있어야함
함수 표현식 방식으로 함수 생성
// add() 함수 표현식
var add = function(x, y) {
return x + y;
};
var plus = add;
console.log(add(3, 4)); // (출력) 7
console.log(plus(5, 6); // (출력) 11
* 익명함수 - 이름이 없는 함수 형태
// 함수 표현식 방식으로 구현한 팩토리얼 함수
ex)
var factorialVar = function factorial(n) {
if(n <= 1) {
return 1;
}
return n * factorial(n - 1);
};
console.log(factorialVar(3)); // (출력) 6
console.log(factorial(3)); /// (출력) error..
함수 호이스팅
함수 표현식만을 사용할 것이 권해지는데 그 이유가 함수 호이스팅!
ex) 함수 선언문 방식과 함수 호이스팅
add(2,3); // 5
// 함수 선언문 형태로 add() 함수 정의
function add(x, y) {
return x + y;
}
add(3, 4); // 7
* 이렇게 함수 선언문 형태로 함수를 정의하게 되면 , 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작한다!!
이것은 함수를 사용하기 전에 반드시 선언해야 한다는 규칙을 무시!!
따라서 표현식이 권장됨
함수 객체 : 함수도 객체
자바스크립트에서는 함수도 객체다
ex) 함수도 객체처럼 프로퍼티를 가질 수 있다
// 함수 선언 방식으로 add() 함수 정의
function add(x, y) {
return x + y;
}
// add() 함수 객체에 result, status 프로퍼티 추가
add.result = add(3, 2);
add.status = 'OK';
console.log(add.result); // (출력) 5
console.log(add.status); // (출력) 'OK'
자바스크립트에서 함수는 값으로 취급된다
함수도 일반 객체처럼 취급될 수 있다
함수는 일급 객체라고 부름
변수나 프로퍼티의 값으로 할당
// 변수에 함수 할당
var baek = 100;
var bar = function() {
return 100;
};
console.log(bar()); // (출력) 100
// 프로퍼티에 함수 할당
var obj = {};
obj.propert = function() { return 200; }
console.log(obj.propert()); // (출력) 200
함수 인자로 전달
ex) 함수를 다른 함수의 인자로 넘긴 코드
// 함수 표현식으로 baek() 함수 생성
var baek = function(func) {
func(); // 인자로 받은 func() 함수 호출
};
// baek() 함수 실행
baek(function() {
console.log('가능');
});
리턴값으로 활용
* 함수는 다른 함수의 리턴값으로 활용할 수 있음
// 함수를 리턴하는 baek() 함수 정의
var baek = function() {
return function() {
console.log('function is available')
}
};
var bar = baek();
bar();
출력) function is available
prototype 프로퍼티
ex) 함수 객체와 프로토타입 객체와의 관계를 보여주는 코드
// My function() 함수 정의
function myFunction() {
return true;
}
console.dir(myFunction.prototype);
console.dir(myFunction prototype.constructor);
* 함수가 위에서 생성됨과 동시에 myFunction() 함수의 prototype 프로퍼티에는 이 함수와 연결된 프로토타입 객체가 생성
* myFunction.prototype은 myFunction() 함수의 프로토타입 객체를 의미.
myFunction (함수 객체) myFunction.prototype(프로토타입 객체)
prototype 프로퍼티 <--- ---> constructor 프로퍼티
서로를 가리킨다!
함수의 다양한 형태
콜백 함수
* 익명 함수의 대표적인 용도
* 개발자는 단순히 함수를 등록하기만 하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 호출되는 함수
ex) 핸들러처리
window.onload 이벤트 핸들러 예제 코드
<!DOCTYPE html>
<html><body>
<script>
// 페이지 로드 시 호출될 콜백 함수
window.onload = function() { // window.onload 는 이벤트 핸들러
alert('This is the callback function.');
};
</script>
</body></html>
즉시 실행 함수
* 함수를 정의함과 동시에 바로 실행하는 함수
(function (name) {
console.log('This is the immediate function -> ' + name);
})('baek');
(출력) This is the immediate function -> baek
함수 바깥쪽 () 괄호쌍을 추가한 뒤 즉시 실행 함수 호출
* 최초 한번만 실행가능, 다시 호출할 수 없다!!!
내부 함수
* 함수 코드 내부에서도 다시 함수 정의가 가능!
ex) 내부 함수 예제 코드
// parent() 함수 정의
function parent() {
var a = 100;
var b = 200;
// child() 내부 함수 정의
function child(){
var b = 300;
console.log(a);
console.log(b);
}
child();
}
parent();
child();
(출력)
100
300
Uncaught ReferenceError: child is not defined
* 변수 b는 child() 함수에 선언이 되어있으므로 300이 출력
* 함수 외부에서 child()를 불러오면 error (함수 외부에서 특정 함수 스코프 안에 선언된 내부 함수를 호출하는 방법이 있긴함!)
이것이 가능한 이유는 스코프 체이닝 덕분 !!!
내부 함수는 자신을 둘러싼 외부 함수의 변수에 접근 가능!
ex) 함수 스코프 외부에서 내부 함수 호출하는 예제 코드
function parent() {
var a = 100;
// child() 내부 함수
var child = function() {
console.log(a);
}
// child() 함수 반환
return child;
}
var inner = parent();
inner();
(출력) 100
* parent() 함수를 호출하고, 이 결과로 반환된 inner() 함수를 호출하는 예제
* 이와 같이 실행이 끝난 parent()와 같은 부모 함수 스코프의 변수를 참조하는 inner()와 같은 함수를 클로저라고 함
함수를 리턴하는 함수
함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있음
ex) 자신을 재정의하는 함수 예제 코드
// self() 함수
var self = function() {
console.log('a');
return function() {
console.log('b');
}
}
self = self(); // a
self(); // b
'Programming > JAVASCRIPT' 카테고리의 다른 글
[JAVASCRIPT] 함수와 프로토타입 체이닝(3) (0) 2019.12.04 [JAVASCRIPT]함수와 프로토타입 체이닝(2) (0) 2019.12.04 [JAVASCRIPT] 데이터 타입과 연산자(3) (0) 2019.12.04 [JAVASCRIPT] 데이터 타입과 연산자(2) (0) 2019.12.04 [JAVASCRIPT] 데이터 타입과 연산자(1) (0) 2019.12.04