함수 선언
기본 구조
function 함수명(매개변수1, 매개변수2, ...) {
// 함수가 수행할 코드
return 반환값; // (선택 사항) 함수의 결과를 반환
}1. 함수 선언문 (Function Declaration)
함수 선언문을 사용하여 함수를 정의할 수 있습니다. 함수 선언문은 function 키워드로 시작하며, 함수 이름, 매개변수, 함수 본문으로 구성됩니다.
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("홍길동"); // 출력: Hello, 홍길동!2. 함수 표현식 (Function Expression)
함수 표현식은 함수 자체를 변수에 할당하는 방식입니다. 이 경우 함수에 이름을 붙이지 않으면 익명 함수가 됩니다.
const add = function (a, b) {
return a + b;
};
console.log(add(3, 5)); // 출력: 83. 화살표 함수 (Arrow Function)
ES6에서 도입된 화살표 함수는 더 간결한 문법으로 함수를 작성할 수 있는 방식입니다. 특히 함수 본문이 한 줄일 경우 중괄호와 return 키워드를 생략할 수 있습니다.
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 출력: 6
// 일반 함수
const func1 = function () {
console.log("func1");
}
// 화살표 함수
const func2 = () => {
console.log("func2");
}
// 화살표 함수 한줄
const func3 = () => console.log("func3");
// 화살표 함수 인자 한줄
const func4 = (data1) => console.log("func4 ", data1);예제코드
기본 함수 선언
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 함수 선언 - func2: 매개변수가 없는 함수
function func2() {
console.log("func2"); // "func2" 출력
}
// 함수 선언 - func3: 하나의 매개변수를 받아서 출력하는 함수
function func3(data) {
console.log("func3 : " + data); // 매개변수 data를 포함해 출력
}
// 함수 선언 - func4: 두 개의 매개변수를 받아서 출력하는 함수
function func4(data1, data2) {
console.log("func4 : " + data1 + " " + data2); // data1과 data2를 출력
}
// 함수 선언 - func5: 두 개의 매개변수를 받아서 합산한 결과를 반환하는 함수
function func5(data1, data2) {
return data1 + data2; // data1과 data2의 합을 반환
}
</script>
</head>
<body>
<script>
// 함수 선언 - func1: 매개변수가 없는 함수
function func1() {
console.log("func1"); // "func1" 출력
}
// 함수 호출 - 각 함수를 호출하여 결과 확인
func1(); // 예상 출력: func1
func2(); // 예상 출력: func2
func3(10); // 예상 출력: func3 : 10
func4(10, 20); // 예상 출력: func4 : 10 20
// func5의 반환값을 변수 result에 저장
let result = func5(100, 200);
console.log(result); // 예상 출력: 300
</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>
<script type="text/javascript">
// 함수 표현식으로 func1 선언 - 익명 함수를 변수 func1에 할당
const func1 = function () {
console.log("func1"); // "func1" 출력
}
</script>
</head>
<body>
<script type="text/javascript">
// func1 함수 호출
func1(); // 예상 출력: func1
// func1 함수 자체를 출력 (함수의 정의가 출력됨)
console.log(func1); // 예상 출력: function() { console.log("func1"); }
// func1의 자료형을 출력 (자료형은 function)
console.log(typeof func1); // 예상 출력: function
// func2에 func1을 할당 (func2는 func1과 동일한 함수가 됨)
let func2 = func1;
func2(); // 예상 출력: func1
</script>
</body>
</html>콜백 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 일급함수 : 함수를 변수에 담을 수 있고, 함수의 인자로 전달할 수 있고, 함수의 반환값으로 사용할 수 있는 함수
// 콜백 함수 : 함수의 인자로 전달되는 함수
const callback = function () {
console.log("callback");
}
// 콜백 함수를 인자로 받아서 2번 호출하는 함수
const mainfunc = function (data) {
for (let i = 0; i <= 2; i++) {
data();
}
}
// 함수를 반환하는 함수
const rfunc = function () {
return function () {
console.log("rfunc");
}
}
</script>
</head>
<body>
<script type="text/javascript">
// 콜백 함수를 인자로 전달하는 함수 호출
mainfunc(callback);
// 함수를 반환하는 함수 호출
rfunc()();
</script>
</body>
</html>화살표 함수 선언
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 일반 함수
const func1 = function () {
console.log("func1");
}
// 화살표 함수
const func2 = () => {
console.log("func2");
}
// 화살표 함수 한줄
const func3 = () => console.log("func3");
// 화살표 함수 인자 한줄
const func4 = (data1) => console.log("func4 ", data1);
</script>
</head>
<body>
<script type="text/javascript">
// 일반 함수 호출
func1();
// 화살표 함수 호출
func2();
func3();
func4(10);
</script>
</body>
</html>함수를 이용한 구구단
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
const gugudan = function(dan) {
let html = '';
html += '<table border="1" cellspacing="0" width="100">';
for (let col = 1; col < 10; col++) {
html += '<tr>';
html += '<td>' + dan + ' X ' + col + ' = ' + dan*col + '</td>';
html += '</tr>';
}
html += '</table>';
return html;
};
</script>
</head>
<body>
<script type="text/javascript">
// document.write(gugudan(2));
let dan = 1;
document.write('<table border="1" cellspacing="0">');
for (let row = 1; row < 4; row++) {
document.write('<tr>');
for (let col = 1; col < 4; col++) {
document.write('<td>' + gugudan(dan) + '</td>');
dan++;
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>