함수 표현식
정의된 모든 함수는 자바스크립트 엔진에 의해 객체를 생성한다.객체라는 것은 하나의 값으로 쓸 수 있다. 고로 변수에 함수 객체를 대입할 수 있고, 해당 변수 식별자 + () 연산자를 조합하면 식별자에 해당하는 함수를 실행하라는 호출이 가능하다 .
let 변수명 = function (매개변수 1,2,3,...,n) // 함수 이름을 부여해도 무관
{
실행될 함수 문장
}; // 중괄호 다음 세미콜론 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let print = function (x, y) {
return x + y;
};
print();
document.write(print(2,3) + "<br>");
document.write(print + "<br>");
document.write(typeof print + "<br>");
</script>
</body>
</html>
무명 함수
함수의 이름을 부여하지 않고, 함수를 변수에 할당하듯이 선언된 함수를 무명함수(이름이 없는 함수)라고 한다. 무명 함수는 주로 일회성으로 사용되거나 (이벤트 처리 함수로 이용할 때), 다른 함수의 인자로 전달될 때 유용하다. 함수 선언 방식과 다른점은 중괄호 다음에 시미콜론이 있다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 전역함수 : 선언 후 호출, 선언 전 호출 : 잘 작동
// 함수 선언문 -> 객체 생성됨, 객체 생성이 된 주소를 담고 있는 곳 : helloworld01
function helloworld01() {
alert("Hello World 01");
}
// 전역함수 : 선언부가 모두 메모리 올라가고, 위에서 아래로 코드 수행 될 때 연산 (function)
// 함수 표현식 : -> 객체 생성됨, 객체 생성이 된 주소를 담고 있는 곳 : helloworld02
let helloworld02 = function() {
alert("HJello World 02");
};
helloworld01(); // 식별자 + () : 식별자 내용에 해당하는 함수를 호출하겠다
helloworld02(); // 식별자 + () : 식별자 내용에 해당하는 함수를 호출하겠다
</script>
</body>
</html>
선언 순서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
helloworld01();
function helloworld01() {
alert("Hello World01");
}
helloworld02();
let helloworld02 = function() {
alert("Hello World02");
}
</script>
</body>
</html>
즉시 실행
(function() { // function 키워드는 무조건 함수명이 필요하기에
실행할 구문; // 선언식이 아니라는 그룹연산자()를 사용, 함수 객체(값으로 인식)
})(); // (함수 객체) + () 붙이면 코드 실행하라는 표현식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
(function() {
console.log ("이 함수는 즉시 실행됩니다.");
})();
</script>
</body>
</html>