자바스크립트 함수 종류
- 자동 호출되는 함수
- 선언적 함수 (일반 함수 : function)
- 익명 함수
- 콜백 함수
- 화살표 함수
- 디폴트 매개변수
함수
- 독립적인 모듈 { }
- 특정 기능을 수행하고 결과를 돌려주는 독립적인 코드 집합
- 메소드, 모듈, 기능, 프로시저 등으로 불림
- 함수를 사용하기 위해서는 반드시 호출해야 함
함수 선언 형식
function 함수명() {
// 함수가 수행하는 문장;
}
자동 호출되는 함수 : 호출하지 않아도 스스로 동작하는 함수
(function() {
// 함수가 수행하는 문장;
})();
다양한 함수 호출 방법
// 함수 호출 : 함수 사용
show(); // 방법1 : 필요한 곳에서 함수 이름 불러서 호출
// 함수 호출 방법2 : HTML 이벤트 속성에서 호출
<body onLoad=”show()”>
<button onClick=”show()”>show</button>
// 함수 호출 방법3 : 다른 함수 내에서 호출
function show() {
input(); // 다른 함수 호출
}
function input() {
...
}
함수 선언문과 함수 표현식
함수 선언문
function sayHello() {
console.log('Hello');
}함수 표현식
- 이름이 없는 함수로 만들고 변수를 선언하여 함수를 할당
- 사용 방식, 실행 방식, 동작 방식 함수 선언문으로 선언한 함수와 동일하나 작성하는 문법에서 차이 있음
let sayHello = function() {
console.log('Hello');
}
sayHello();함수 선언문과 함수 표현식으로 작성한 함수들의 호출 가능 타이밍
함수 선언문 : 어디서나 호출 가능 (함수 선언보다 함수의 호출이 먼저 와도 오류 발생하지 않음)
// (1)
function sayHello() {
console.log('Hello');
}
sayHello();
// (2)
sayHello();
function sayHello() {
console.log('Hello');
}
// (3)
console.log(num);
let num = 1;
// (1) (2) 모두 오류 없이 실행 가능
// 그러나 (3)은 오류 발생 (변수 num을 만나기 이전에 함수가 실행되었기 때문)
이것이 가능한 이유 = ?
자바스크립트는 인터프리터 언어 -> 위에서부터 아래로, 차례대로 한 줄씩 읽으며 코드를 실행
그러나, 자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언을 찾아 생성해 줌
따라서 눈으로 봤을 때 함수가 사용 가능한 범위는 함수 선언 이후처럼 보이더라도, 실제 함수 사용 가능 범위는 함수 선언 이전의 위치도 가능
=> 이것이 바로 호이스팅
함수 표현식 : 해당 코드에 도달해야 함수가 생성됨 -> 함수 생성 이후에 함수 사용이 가능
예제 - 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
// 자동 호출되는 함수 : 호출하지 않아도 스스로 동작하는 함수
(function() {
alert("함수 호출 없이도 자동 실행!")
})();
// 함수 정의 (함수 선언) - 선언과 동시에 정의
function show() {
alert("호출해주어야만 실행되는 show() 함수입니다.");
}
show();
</script>
</head>
<body>
</body>
</html>
예제 - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
// 다른 함수 내에서 함수 호출
function start() {
var answer = confirm("배경 색을 변경하시겠습니까?");
if(answer) changeColor();
else alert("취소하였습니다.");
}
function changeColor() {
var color = prompt("색상 입력", "red/blue/green...");
document.write(color);
document.bgColor = color;
}
start();
</script>
</head>
<body>
</body>
</html>
예제 - 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
document.write('<button onClick="input();">색상 입력</button>');
function input() {
var answer = prompt("색상 입력");
if(answer) document.bgColor = answer;
else alert("취소하였습니다.");
}
</script>
</head>
<body>
</body>
</html>
예제 - 4
...
<script type="text/javascript">
document.write('<button onClick="input();">숫자 입력</button>');
function input() {
var answer = parseInt(prompt("숫자 입력"));
show(answer);
}
function show(answer) {
for (let i=0; i<answer; i++) document.write("★");
/* 버튼 사라지지 않도록 출력하기 위해서는
document.body.innerHTML += "★"; 사용*/
}
</script>
...'Frontend > Javascript' 카테고리의 다른 글
| 익명 함수 (Anonymous Function) (0) | 2021.12.09 |
|---|---|
| 조건문 문자 비교 (0) | 2021.12.09 |
| 배열 (0) | 2021.12.08 |
| 조건문과 반복문 (0) | 2021.12.08 |
| [][][] 화살표함수 객체 (0) | 2021.12.08 |
