JS 함수 선언 방법 3가지
1.
function 키워드 사용해 함수 선언 (= 함수 정의)
2.
함수선언 방식 (function declaration) : 함수명 사용 방식 (Hoisting 가능)
함수식 방식 (function expression) : 변수 사용 방식 (Hoisting 불가)
Function 생성자 이용 방식 : 객체 선언 이용한 변수 사용 방식인데, 거의 사용 X
1.
함수 : 자주 사용하는 코드를 필요할 때 호출해 사용 위해 정의해 둔 코드.
2.
선언된 함수는 즉시 실행 안 함. 사용 위해 함수를 호출할 때만 실행 됨.
3.
JS에서 ; (세미콜론)은 실행 구문을 분리할 때 사용하는데,
함수는 바로 실행 되는 건 아니므로 ; (세미콜론)으로 안 끝내는 게 일반적.
함수 정의 방법 1 : 함수선언 방식 (Function Declaration)
구문
function 함수명(매개변수) {
// 실행코드
}
특징
① 함수에 이름을 붙여, 함수명으로 함수 호출.
② 실행문이 아니므로 끝에 ; (세미콜론) 안 붙이는 게 일반적.
③ Hoisting 됨. (즉, 함수 정의 전 호출 코드 사용 가능)
④ 자체호출 불가.
예제
<p id="demo"></p>
<script>
var x = homzzang(4, 3);
document.getElementById("demo").innerHTML = x;
function homzzang(a, b) {
return a * b;
}
</script>
결과보기
함수 정의 방법 2 : 함수식 방식 (Function Expression)
구문
var 변수 = function (매개변수) {실행코드};
특징
① 함수를 변수에 담아, 변수명으로 함수 호출.
② 실행문이므로 끝에 ; (세미콜론) 붙여야 함.
③ Hoisting 안 됨. (즉, 함수 정의 전 호출코드 사용 불가)
④ 자체호출가능.
예제
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
결과보기
PS1. 함수명 유무
기명 함수표현식
var hz = function hz() {
/* 실행코드 */
};
익명 함수표현식
var hz = function() {
/* 실행코드 */
};
PS2. 즉시 실행함수 ※ jQuery 즉시 실행 구문
기명 즉시실행함수
(function hz() {
/* 실행코드 */
}());
익명 즉시실행함수 ※ JS 전문가 권장 표기법
(function() {
/* 실행코드 */
}());
익명 즉시실행함수
(function() {
/* 실행코드 */
})();
함수 정의 방법 3 : Function 생성자 방식 (거의 사용 X)
var 변수 = new Function("a", "b", "return a * b");
① JS 내장 키워드인 Function() 메서드 이용.
② 첫글자는 대문자, 나머지는 소문자로 적음.
③ 매개변수가 실행코드가 모두 매개변수 임에 주의.
④ 보통, 이 방법 대신 함수식 선언 방식 이용.
<p id="demo"></p>
<script>
var x = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = x(4, 3);
</script>
결과보기
※ JS에서 new 키워드는 대부분 생략 가능.
JS 함수 특징
특징1. Hoisting 기능은 함수명 사용 방식만 가능.
함수명 사용 방식은 hoisting 작동하나, 변수 사용 방식은 hoisting 작동 안함.
[함수명 사용 방식]
homzzang(5); // 정상 호출 O
function homzzang(x) {
return x * x;
}
[변수 사용 방식]
homzzang(5); // 정상 호출 X
var homzzang = function(x) {return x * x;};
특징2. 함수 자체호출은 변수 사용 방식만 가능
함수명 사용 방식은 자체호출 불가이나, 변수 사용 방식은 자체호출 사용 가능.
[함수명 사용 방식]
<p id="demo"></p>
<script>
function homzzang() {
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
} (); // 정상 출력 X
</script>
결과보기
[변수 사용 방식]
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
})(); // 정상 출력 O
</script>
결과보기
특징3. 함수는 변수값으로 사용 가능.
<p id="demo"></p>
<script>
function homzzang(a, b) {
return a * b;
}
var x = homzzang(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
결과보기
※ 변수 사용 방식은 당연하고, 함수명 사용 방식 역시 변수값으로 사용 가능.
특징4. 함수는 표현식에 사용 가능
<p id="demo"></p>
<script>
function homzzang(a, b) {
return a * b;
}
var x = homzzang(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
결과보기
특징5. 함수는 객체 일종
<p id="demo"></p>
<script>
function homzzang(a, b) {
return arguments.length; // 매개변수 개수
}
document.getElementById("demo").innerHTML = homzzang(4, 3);
</script>
결과보기
1.
typeof 연산자는 함수에 대해 function 문자열 반환하나.
함수의 본질을 가장 잘 설명하는 건 객체라는 사실임.
2.
JS 함수는 속성 (property)과 메서드(method) 갖는데,
arguments.length 속성은 함수호출될 때 넘겨받은 매개변수 개수 반환.
특징6. toString() 메서드는 함수코드자체를 출력
<p id="demo"></p>
<script>
function homzzang(a, b) {
return a * b;
}
var x = homzzang.toString();
document.getElementById("demo").innerHTML = x;
</script>
결과보기
PS.
객체 메서드 (a method to the object)
객체의 속성으로 정의된 함수
객체 생성자 (an object constructor)
새 객체를 생성하는 함수
특징7. 화살표 함수 선언 방식은 (IE11 및 그 이하 버전)은 지원 X
예제1
// JS ES5 버전
var x = function(x, y) {
return x * y;
}
// JS ES6 버전
const x = (x, y) => x * y;
예제2
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
결과보기
특징
1.
함수식 방식 (= 변수 사용 함수정의방식)을 아주 간단하게 표현 가능.
즉, 함수 선언 시, function 및 return 키워드, {} 기호가 불필요함.
2.
this 키워드 안 갖음. (∵ 객체 메서드 표현하기 부적합하므로)
3.
Hoisting 지원 안됨. (∴ 반드시 함수 호출 전에 함수 정의 필요.)
4.
var 보단 const 키워드 사용해 화살표 함수 선언.
(∵ 함수식은 항상 상수값을 갖으므로)
5.
return 및 {} 기호는 되도록이면 항상 사용하는 게 바람직함.
(∵ 함수가 단일구문일 때만 return 키워드 및 {} 기호 생략 가능.)
아래 예제 참고.
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
결과보기
※ 화살표 함수 정의 방식은 IE 11 및 그 이하에선 지원 안 함.
