자바스크립트에서 가장 중요한개념은 함수인데, 이에 대해서 알아보자.
4-1) 함수를 생성하는 방법 3가지
- 함수선언문
- 함수표현식
-funtion() 생성자 함수
4-2) 함수 리터럴
:함수명은 선택사항. 함수명이 없는경우 익명함수라한다.
funtion add(x,y) {
return x+y;
}
4-3) 함수 선언문 방식
: 리터럴형태와 같지만 함수명이 반드시 정의되어있어야함. 매개변수의 타입은 적지않아도 됨.
funtion add(x,y) {
return x+y;
}
console.log(add3,4)); //출력값 74-4) 함수 표현식
: 자바스크립트에서는 함수도 하나의 값처럼 취급된다. 따라서 , 함수 리터럴로 하나의 함수를 만든뒤 변수에 할당하여 함수를 생성할수 있다.
: 함수이름은 보통사용하지 않는다.
: 아래에서 add변수는 함수 리터럴로 생성한 함수를 참조하는 변수이지, 함수이름이 아니다.
: 함수 변수 add는 참조값을 가지므로 plus에 그 값을 그대로 할당 할수 있다. 때문에 plus로도 호출해서 사용이가능하다.
: 즉 add와 plus는 같은 함수를 참조하는 함수 변수다.
var add = funtion (x,y) {
return x+y;
};
var plus=add;
console.log(add(3,4)); //출력값 7
console.log(plus(5,6)); //출력값 11
4-5) 4-4에서 함수이름을 사용할수도 있다고 하였는데, 이름을 사용하면 기명 함수 표현식이된다.
: 기명 함수 표현식은 주의점이있다.
: 함수 표현식에서 사용된 함수이름이 외부코드에서 접근불가하다는 것이다.
: 사실 add()함수는 자바스크립트 엔진에 의해 add함수라는 구조로 변하기때문에 마치 add로 외부에서 사용할수 있는것처럼 보임
: 보통 기명함수 표현식을쓸때는, 재귀호출 처리를 하기위함이다.
var add = funtion sum(x,y) {
return x+y;
};
console.log(add(3,4)); //출력값 7
console.log(sum(5,6)); //Uncaught ReferenceError: sum is not defined재귀호출 처리예제
var factiorialVar = funtion Factorial (n) {
if(n<=1) {
return 1;
}
return n * factorial(n-1);
};
console.log(factiorialVar(3)); //출력값 6
console.log(Factorial(3)); //출력값 factorial is not defined
4-6) 자바스크립트는 세미콜론 사용을 강제하지는 않는다. 인터프리터가 자동으로 세미콜론을 삽입시켜주기 때문인데, 어떠한상황(ex.즉시실행함수)에서는 심각한 디버깅 상황을 초래하므로 함수표현식 방식에서의 세미콜론 사용을 강력하게 권고한다.
4-7) Function()생성자 함수를 통한 함수 생성하기
: 자바스크립트의 함수도 Function()이라는 기본 내장 생성자 함수로부터 생성된 객체다.
: 앞서 설명한 함수 선언문이나 함수 표현식 방식도 내부적으로 Function()생성자 함수로 함수가 생성된다고 볼수 있겠다.
: new Funtion (arg1, arg2, ...argN, funtionBody) ;
: arg -함수의 매개변수, funtionBody -함수호출될때 실행될 코드를 포함한 문자열
var add = new Funtion('x','y','return x+y');
console.log(add(3,4)); //출력값 7
4-8) 함수 호이스팅
: 함수가 선언되는 시점전에도 함수가 호출되는 경우가 있다. 즉 함수 선언문 형태로 정의한 함수유효범위는 코드의 맨처음부터 시작된다.
: 이것을 함수 호이스팅이라 함.
: 호이스팅이 발생하는 이유는 변수의 생성과 초기화 작업이 분리돼 일어나기때문. (->자세한건 나중에)
| 함수 생성 방식 | 호이스팅 |
| 함수 선언문 방식 | 일어남 |
| 함수 표현식 | 안일어남 |
4-9) 함수도 객체야
: 코드실행 뿐아니라 일반 객체처럼 프로퍼티들을 가질수있음
: property는 이름(string 이나 symbol)과 값(원시함수(primitive), 메서드(method) 또는 객체 참조(object reference))을 가지고 있다. 보통 "프로퍼티가 object를 가지고 있다"라는 것은 "property가 object reference"를 가지고 있다는 것을 줄여서 말함
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'
4-10) 함수는 값으로 취급된다.
: 따라서 다음과 같은 동작이 가능
- 리터럴에의해 생성
- 변수나 배열의 요소, 객체의 프로퍼티등에 할당가능
- 함수의 인자로 전달가능
- 함수의 리턴값으로 리턴가능
- 동적으로 프로퍼티 생성,할당가능
//프로퍼티에 함수 할당
var obj ={};
obj.baz = funtion() {return 200;}
console.log(obj.baz()); //출력값 2004-11) 함수 객체의 기본 프로퍼티
: ECMA5 명세서에는 모든함수가 length와 prototype프로퍼티를 기져야한다고 말한다.
: caller프로퍼티 - 자신이 호출한 함수를 나타냄, 함수가 정상적으로 실행될때 기대되는 인자의 개수
: arguments프로퍼티 - 함수호출시 전달된 인자값 나타냄
: prototype프로퍼티 - 이 함수가 생성자로 사용될때 생성된 객체의 부모역할을 하는 프로토타입 객체를 가리킴
: [[Prototype]]프로퍼티 - 자신의 부모역할을 하는 프로토타입객체 가리킴
: constructor프로퍼티 - 자신과 연결된 함수를 가리킴
4-12) 콜백함수
: 익명함수의 대표적인용도가 바로 콜백함수
: 어떤 이벤트가 발생하거나 특정시점에 도달했을때 시스템에서 호출되는 함수.
: 이벤트 핸들러에 사용하면, 웹 페이지가 로드되거나 키보드가 입력되는 등의 DOM이벤트가 발생할 경우, 브라우저는 정의된 dom이벤트에 해당하는 핸들러 실행시킴.
<!DOCTYPE html>
<html><body>
<script>
//페이지 로드시 호출될 콜백함수
window.onload = function() {
alert('start!');
};
</script>
</body></html>
4-13) 즉시실행함수
: 정의함과 동시에 바로 실행하는 함수.
: 익명함수의 응용이다. 바로 결과가 출력됨.
: 최초 한번만 실행필요로하는 초기화 코드에서 쓴다.
(function (name) {
console.log('start->' + name);
})('foo');
//출력 start->foo
4-14) 내부함수
: 함수내부에 다시 함수정의를 할수 있다.
: 내부함수에서는 자신을 둘러싼 외부함수의 변수에 접근이 가능하다.
: 함수 외부에서는 사용이 가능하지만, 가능하게 하기위해서는 부모함수에서 내부함수를 외부로 리턴하면된다. 이것을 클로저라고한다.
fuction parent() {
var a =100;
var b =200;
//child()내부함수 정의
funtion child() {
var b = 300;
console.log(a); //100
console.log(b); //300
}
child();
}
parent();
child(); //child is not defined
4-15) 함수를 리턴하는 함수
: 함수를 호출함과 동시에 다른함수로 바꾸거나 자기자신을 재정의하는 함수를 구현할수 있다.
var self = funtion() {
console.log('a');
return function() {
console.log('b');
}
}
self = self();//a
self(); //b
'개발공부 > JavaScript' 카테고리의 다른 글
| [인사이드 자바스크립트] 교재 정리 #5 실행 컨텍스트와 클로저 (0) | 2022.06.01 |
|---|---|
| [인사이드 자바스크립트] 교재 정리 #4 함수와 프로토타입 체이닝(2) (0) | 2022.05.12 |
| [인사이드 자바스크립트] 교재 정리 #3 (0) | 2022.04.20 |
| [바닐라 js로 크롬 앱만들기] 인강정리 (#8) (0) | 2022.04.07 |
| [바닐라 js로 크롬 앱만들기] 인강정리 (#7) (0) | 2022.04.02 |
댓글