Javascript Stuty
- javascript 함수
1.함수 리터럴
자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. So. 일반 객체를 리터럴 처럼 생성할 수 있는 것 처럼, 자바스크립트에서도 함수 리터럴을 이용해 함수 생성이 가능하다.
ex) function add(x, y){
return x+y;
}
1) function 키워드
- 자바스크립트 함수 리터럴은 function 키워드로 시작함.
2) 함수명
- 함수명은 함수 내부 코드에서 자신을 재귀적으로 호출하거나 자바스크립트 디버거가 해당 함수를 구분하는 식별자로 사용.
다만 함수명은 선택사항. 이때 함수명이 없는 함수를 익명 함수라 한다.
3) 매개변수 리스트
- 매개변수는 C 언어와 같은 기존 언어의 함수 매개변수 형태와 거의 비슷, 다만 매개변수 타입을 기술하지 않는다.
4) 함수 몸체
- 실제 함수가 호출되었을 때 실행하는 코드 부분.
2. 함수 선언문 방식으로 생성
리터럴 형태와 같다. 다만 함수 선언문 방식으로 정의된 함수는 반드시 함수명이 정의되어 있어야 한다.
ex) function add(x, y){
return x+y;
}
console.log(add(3, 4)); // 7
3. 함수 표현식 방식으로 함수 생성하기
※ 자바스크립트에서는 함수도 하나의 값처럼 취급 된다. => 이러한 특징때문에 자바스크립트의 함수는 일급 객체라고 함. 그렇기 때문에 함수도 숫자나 문자처럼 변수에 할당 가능.
함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수르 생성하는 것을 함수 표현식 이라고 한다.
ex) var add = function (x, y){ // 이름 없는 함수형태 => 익명 함수 표현식
return x+y;
}
var add2 = function sum(x, y){ // 이름 포함된 함수 표현식 => 기명 함수 표현식
return x+y;
}
console.log(add(3,4)); // 7
console.log(add2(3,4));// 7
console.log(sum(3,4)); // Uncaught ReferenceError : sum is not defined 에러 발생
함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능 하다.
함수 표현식에 사용된 함수 이름은 정의된 함수 내부에서 해당함수를 재귀적으로 호출하거나, 디버거 등에서 함수를 구분할 때 사용된다.
위의 익명 함수 표현식과 같은 경우
var add = function add(x, y) {
return x + y;
}
와 같이 변경되기 때문에 함수 이름으로 함수 외부에서 호출 가능하다.
4. Function() 생성자 함수를 통함 함수 생성
Function() 생성자 함수 문법
new Function (arg1, arg2, ... argN, functionBody)
- arg1, arg2, .., argN : 함수의 매개변수
- functionBody : 함수가 호출될 때 실행될 코드를 포함한 문자열
이 방식을 사용한 add()함수는 다음과 같다.
ex) var add = new Function('x', 'y', 'return x + y');
console.log(add(3,4)); //7
5. 함수 호이스팅
예제를 통해 먼저 다음을 살펴본다.
ex)
add(2,3); //5
// 함수 선언문 형태의 add()
function add(x, y){
return x + y;
}
add(3, 4); //7
==> add()함수가 정의 되지 않았음에도 하단의 add()함수를 호출 하는 것이 가능하다. 즉 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작하기 때문이다. 이를 함수 호이스팅이라고 부른다.
위와 같이 이유로 함수 표현식 사용을 권장하고 있다. 다음과 같이 함수 표현식 형태로 add() 함수를 정의하여 보겠다.
ex)
add(2,3); // uncaught type error
var add = function (x, y){
return x + y;
}
add(3,4); //7
함수 표현식 형태로 정의하게되면 호이스팅이 일어나지 않는다.
